/* style.css — small custom touches on top of TailwindCSS (loaded via CDN in header.php) */

body {
  -webkit-font-smoothing: antialiased;
}

/* Toasts */
.toast {
  min-width: 240px;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  animation: toast-in 0.25s ease-out;
}
.toast-success { background: #0b5d33; }
.toast-error { background: #b91c1c; }
.toast-info { background: #1f2937; }

@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Bet slip slide panel handled mostly by Tailwind transform classes in header.php,
   this just smooths the overlay fade */
#betslipOverlay {
  transition: opacity 0.3s ease;
}

/* Market accordion caret rotation */
.market-toggle[aria-expanded="true"] span:last-child {
  transform: rotate(180deg);
}

/* Simple spinner reused across pages */
.spinner {
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: #12a454;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Odd button pressed/selected state (JS toggles this class) */
.odd-btn.selected {
  border-color: #12a454;
  background-color: #ecfdf5;
}

table th, table td {
  vertical-align: middle;
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Hide scrollbar on the sport-tabs strip while keeping it scrollable */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Scrolling promo ticker in header.php */
.ticker-track {
  display: inline-block;
  animation: ticker-scroll 32s linear infinite;
  padding-left: 100%;
}
.ticker-track:hover {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Hero carousel dots */
.hero-dot {
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* Live pulse dot used across header / game listings */
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse {
  animation: pulse-live 1.4s ease-in-out infinite;
}