/* /css/web-player.css
 * Stadium Nights theme for the iptv.soccer Web Player.
 * Adapted from iptv.events' m3u.css. The structural rules stay the same
 * so the upstream m3u.js DOM expectations keep working; only the brand
 * accent and a handful of dark-surface tweaks change.
 */

:root {
  --brand-green: #1B8B3D;     /* pitch green */
  --brand-green-light: #22C55E;
  --brand-gold: #F59E0B;
  --stadium-dark: #0A1628;
  --stadium-dark-alt: #122a1a;

  /* Mirror of /css/soccer-theme.css :root vars so /css/player-platforms.css
     can render its modals correctly on /web-player/ (which doesn't load
     soccer-theme.css). Keep these in sync if the theme palette changes. */
  --primary:          #1B8B3D;
  --primary-light:    #22C55E;
  --primary-dark:     #15692E;
  --dark-alt:         #1E293B;
  --dark-surface:     #162032;
  --white:            #F8FAFB;
  --off-white:        #F1F5F9;
  --gold:             #F59E0B;
  --gold-light:       #FBBF24;
  --red:              #EF4444;
  --font-heading:     'Montserrat', sans-serif;
  --font-body:        'Inter', sans-serif;
}

body { background: #fff; }
.sidebar { border-right: 1px solid #eee; }

.group-list .list-group-item { cursor: pointer; }
.channel-card { cursor: pointer; transition: transform .05s ease; }
.channel-card:hover { transform: translateY(-1px); box-shadow: 0 .25rem .5rem rgba(0,0,0,.05); }
.channel-logo { width: 38px; height: 38px; object-fit: contain; border-radius: .375rem; flex: 0 0 auto; }

.video-wrap { background: #000; border-radius: .5rem; overflow: hidden; }
#video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
#clapprPlayer { width: 100%; aspect-ratio: 16 / 9; background: #000; }

.sticky-header { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #eee; }

#leftScroll { overflow-y: auto; }
.col-left  { order: 2; }
.col-right { order: 1; }
@media (min-width: 992px) {
  .col-left  { order: 1; min-height: 100vh; }
  .col-right { order: 2; }
}
@media (max-width: 991.98px) {
  #leftScroll { max-height: 45vh; }
  .video-wrap { margin-top: .25rem; }
}

.now-playing {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid #e9ecef; border-left: 4px solid var(--brand-green);
  border-radius: .5rem; background: #f8f9fa; color: #111; font-weight: 600;
}
.now-playing .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-green); display: inline-block;
}
.pill-audio {
  font-weight: 600; border: 1px solid rgba(27,139,61,.2);
  color: var(--brand-green); background: rgba(27,139,61,.08);
}

/* reCAPTCHA badge visibility toggled by JS */
.grecaptcha-badge { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body.show-badge .grecaptcha-badge { visibility: visible; opacity: 1; pointer-events: auto; }

/* Tiny LIVE dot after brand */
.wp-live-dot{
  position: relative; width: .7rem; height: .7rem; border-radius: 50%;
  background: #dc3545; flex: 0 0 auto;
  animation: wpPulse 2.4s ease-in-out infinite;
}
.wp-live-dot::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(220,53,69,.24);
  animation: wpRipple 2.4s ease-in-out infinite;
}
@keyframes wpPulse { 0% { transform: scale(.92);} 50% { transform: scale(1.12);} 100% { transform: scale(.92);} }
@keyframes wpRipple {
  0%   { box-shadow: 0 0 0 0 rgba(220,53,69,.22); }
  50%  { box-shadow: 0 0 0 .45rem rgba(220,53,69,.10); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

/* Animated playlist loader */
.ls-loading{
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem; background: #f8f9fa;
  border: 1px solid #e9ecef; border-left: 4px solid var(--brand-green);
  border-radius: .5rem; font-weight: 600; color: #111;
  font-size: 1rem !important;
  min-height: 48px;
}
.ls-loading .label { font-size: 1.05rem; font-weight: 600; }
.ls-loading .dots  { display: inline-flex; gap: .35rem; margin-left: .25rem; transform: translateY(1px); }
.ls-loading .dot {
  display: block; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--brand-green);
  animation: lstvDot 1.05s ease-in-out infinite both;
}
.ls-loading .dot:nth-child(2) { animation-delay: .15s; }
.ls-loading .dot:nth-child(3) { animation-delay: .30s; }
@keyframes lstvDot {
  0%, 80%, 100% { transform: translateY(0)    scale(.85); opacity: .55; }
  40%           { transform: translateY(-6px) scale(1);   opacity: 1; }
}

/* ── Bootstrap colour overrides → Stadium Nights ── */
.btn-success {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}
.btn-success:hover, .btn-success:focus {
  background: var(--brand-green-light) !important;
  border-color: var(--brand-green-light) !important;
}
.btn-outline-success {
  color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}
.btn-outline-success:hover, .btn-outline-success:focus {
  background: var(--brand-green) !important;
  color: #fff !important;
}
.text-success { color: var(--brand-green) !important; }
.bg-success-subtle { background: rgba(27,139,61,.12) !important; }
.text-success-emphasis { color: var(--brand-green) !important; }

/* Stadium-themed header band */
.web-player-topbar {
  background: linear-gradient(135deg, var(--stadium-dark) 0%, var(--stadium-dark-alt) 100%);
  color: #fff;
  border-bottom: 3px solid var(--brand-green);
}
/* Only the immediate top-bar links are white. Dropdown items render
   on a normal white-background popup and need their default dark text. */
.web-player-topbar > .container-xxl > .d-flex > a,
.web-player-topbar .navbar-brand { color: #fff; }
.web-player-topbar .navbar-brand:hover { color: var(--brand-green-light); }
.web-player-topbar .dropdown-menu       { background: #fff; }
.web-player-topbar .dropdown-menu .dropdown-item        { color: #212529; }
.web-player-topbar .dropdown-menu .dropdown-item:hover,
.web-player-topbar .dropdown-menu .dropdown-item:focus  { background: rgba(27,139,61,.10); color: #0A1628; }
.web-player-topbar .dropdown-menu .dropdown-item.text-danger { color: #dc3545 !important; }
.web-player-topbar .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.web-player-topbar .btn-outline-secondary:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.7);
}

/* Modals: centred, soft shadows, gold accents on highlights */
.modal-content { border-radius: 14px; border: none; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.modal-header { border-bottom: none; padding-bottom: .25rem; }
.modal-footer { border-top: none; padding-top: .25rem; }

/* Chrome/Brave HEVC fallback notice — inline platform logo tiles.
   Wrapped in .cn-tiles (inline-flex, no wrap) so the whole strip
   either sits next to the text on one line OR moves wholesale to
   the next line on narrow screens — never split tile-by-tile. */
.cn-tiles {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.cn-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--brand-green, #1B8B3D);
  font-size: 14px;
  line-height: 1;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  flex: 0 0 auto;
}
.cn-tile:hover,
.cn-tile:focus {
  background: var(--brand-green, #1B8B3D);
  color: #fff !important;
  transform: translateY(-1px);
}
/* (the trailing three-dots tile inherits the regular .cn-tile look —
    no special muted styling. It just leads to the setup guide.) */

/* Active group / channel hover gets a green highlight */
.list-group-item-action.active,
.list-group-item-action:active {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}