@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Defaults if JS loader fails */
  --font-headline: 'Shurjo', sans-serif;
  --font-body: 'Shurjo', sans-serif;
  --font-menu: 'Shurjo', sans-serif;
  --font-card: 'Shurjo', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-shurjo {
  font-family: var(--font-headline);
}

body,
p {
  font-family: var(--font-body);
}

.nav-link,
.menu-item,
header,
nav {
  font-family: var(--font-menu);
}

/* Custom Scrollbar for Webkit is already in index.html, but good to have here too */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Print Styles for E-Paper */
@media print {
  body * {
    visibility: hidden;
    /* Hide everything by default */
  }

  /* Only show the print container */
  #epaper-print-container,
  #epaper-print-container * {
    visibility: visible;
  }

  #epaper-print-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: white !important;
    z-index: 9999;
    /* Ensure it scales to fit width if needed, or use natural size */
  }

  /* Hide header/footer/controls strictly */
  header,
  footer,
  .print:hidden {
    display: none !important;
  }

  @page {
    size: auto;
    /* auto is the initial value */
    margin: 10mm;
    /* this affects the margin in the printer settings */
  }
}

/* Bottom Ticker Marquee - Continuous Seamless Loop */
@keyframes marquee-continuous {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee-continuous {
  animation: marquee-continuous 60s linear infinite;
  /* Ensure the container is wide enough (it will be handled by flex children) */
}

.hover\:pause-animations:hover {
  animation-play-state: paused;
}

/* Toast slide-up animation */
@keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}