:root{
      --radius:18px;
      --radius-lg:24px;
      --border:rgba(255,255,255,.10);
      --texture-opacity: 0.015;
    }
    /* Hide tawk.to chat by default - only show when body.tawk-visible */
    div[id^="tawk"], div[class*="tawk"], iframe[src*="tawk"] {
      display: none !important;
    }
    body.tawk-visible div[id^="tawk"], body.tawk-visible div[class*="tawk"], body.tawk-visible iframe[src*="tawk"] {
      display: block !important;
    }
    /* Header and Footer Link Hover Effects */
    header nav a, footer a {
      position: relative;
      transition: color .3s ease, text-shadow .3s ease;
    }
    header nav a::after, footer a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, #ff1744 50%, transparent);
      opacity: 0;
      transform: scaleX(0);
      transition: opacity .3s ease, transform .3s ease;
    }
    header nav a:hover, footer a:hover {
      color: #fff;
      text-shadow: 0 0 12px rgba(255,23,68,.4), 0 0 24px rgba(255,23,68,.2);
    }
    header nav a:hover::after, footer a:hover::after {
      opacity: 1;
      transform: scaleX(1);
    }
    html{scroll-behavior:smooth}
    body::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.015) 1px, transparent 0);
      background-size: 24px 24px;
      pointer-events: none;
      z-index: 1;
      opacity: 0.4;
    }
    .no-scrollbar::-webkit-scrollbar{display:none}
    .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
    .bg-hero {background-image: radial-gradient(ellipse 1000px 700px at 20% 5%, rgba(255,23,68,.06), transparent 55%), radial-gradient(ellipse 900px 600px at 80% 95%, rgba(233,30,99,.04), transparent 55%);}
    .bg-grid{
      background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0),
        linear-gradient(to bottom, rgba(255,23,68,.02) 0%, transparent 50%, rgba(233,30,99,.02) 100%);
      background-size: 20px 20px, 100% 100%;
    }
    .btn-grad{
      background: linear-gradient(135deg, #ff1744 0%, #e91e63 100%);
      position: relative;
      overflow: hidden;
      transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 6px 20px rgba(255,23,68,.45), 0 3px 10px rgba(0,0,0,.3), 0 0 0 1px rgba(255,23,68,.25);
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .btn-grad::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 50%);
      opacity: 0;
      transition: opacity .35s ease;
    }
    .btn-grad:hover{
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 10px 35px rgba(255,23,68,.5), 0 5px 14px rgba(0,0,0,.4), 0 0 50px rgba(255,23,68,.25), 0 0 0 1px rgba(255,23,68,.35);
    }
    .btn-grad:hover::before { opacity: 1; }
    .card{
      background:
        linear-gradient(135deg, rgba(30,30,30,.98) 0%, rgba(24,24,24,.98) 100%),
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.02) 1px, transparent 0);
      background-size: 100% 100%, 20px 20px;
      backdrop-filter: blur(10px) saturate(1.2);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      box-shadow:
        0 8px 32px rgba(0,0,0,.5),
        0 4px 12px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.06);
      position: relative;
    }
    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,23,68,.15) 50%, transparent);
      opacity: .7;
    }
    .card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: var(--radius);
      background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,23,68,.06), transparent 40%);
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
    }
    .card:hover::after {
      opacity: 1;
    }
    .chip{ border:1px solid var(--border); background:rgba(255,255,255,.05); border-radius:999px; padding:.4rem .7rem }
    .badge{ position:absolute; left:.5rem; top:.5rem; font-size:.7rem; padding:.28rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.38); backdrop-filter: blur(10px) }
    .reveal{opacity:1; transform:none}

    /* Typography hierarchy enhancements */
    h1, h2, h3 {
      letter-spacing: -0.02em;
      font-weight: 700;
    }
    h1 { font-weight: 800; }
    section > div > h2:first-child {
      font-weight: 700;
      letter-spacing: -0.025em;
    }
    .field-invalid{ border-color: rgba(239,68,68,.6)!important; box-shadow: 0 0 0 2px rgba(239,68,68,.15) }
    .spin{ animation: spin 1s linear infinite } @keyframes spin{to{transform:rotate(360deg)}}
    .modal-scroll { -webkit-overflow-scrolling: touch; }
    @keyframes bbxSpIn { from { opacity:0; transform: translateX(-12px)} to { opacity:1; transform:none } }
    @keyframes bbxSpOut{ from { opacity:1; transform:none } to { opacity:0; transform: translateX(-12px)} }
    #bbxSocialProof.bbx-show { opacity:1 !important; pointer-events:auto !important; animation: bbxSpIn .40s ease both }
    #bbxSocialProof.bbx-hide { animation: bbxSpOut .30s ease both }
    @media (prefers-reduced-motion: reduce){
      #bbxSocialProof.bbx-show, #bbxSocialProof.bbx-hide { animation:none !important }
    }
    @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

    /* Custom BBX scrollbar (Firefox) */
.bbx-scroll{
  scrollbar-width: thin;                       /* FF */
  scrollbar-color: rgba(255,23,68,.8) rgba(255,255,255,.06);
}

/* Custom BBX scrollbar (Chromium/Safari) */
.bbx-scroll::-webkit-scrollbar{
  width: 10px; height: 10px;
}
.bbx-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.bbx-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #ff1744, #e91e63);
  border-radius: 999px;
  border: 2px solid rgba(18,18,18,.95);       /* matches bg-base */
  box-shadow: inset 0 0 6px rgba(255,255,255,.15);
}
.bbx-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #ff4569, #ff1744);
  box-shadow: inset 0 0 8px rgba(255,255,255,.2), 0 0 12px rgba(255,23,68,.4);
}
/* Optional: slightly thinner on very small screens */
@media (max-width: 480px){
  .bbx-scroll::-webkit-scrollbar{ width: 8px; height: 8px; }
}
.w-80m {width: 18.6rem;}
.w-56m {width: 14.4rem;}

.bwhite {
  filter: brightness(0) invert(1);
}

/* Channel logos style */
/* Channel logos style */
#kanali .animate-marquee img,
#kanali .animate-marquee-reverse img {
  height: 3.5rem;          /* matches Tailwind h-14 */
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  opacity: .78;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
  user-select: none;
  padding: 2px;
  /* filter: grayscale(1) contrast(1.05) brightness(.96); */
}

/* Hover: color pop + tiny lift */
#kanali .animate-marquee img:hover,
#kanali .animate-marquee-reverse img:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

/* Pause track on hover over the section */
#kanali .reveal:hover .animate-marquee,
#kanali .reveal:hover .animate-marquee-reverse {
  animation-play-state: paused;
}

/* Animations: seamless because we have two identical copies side-by-side */
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

#kanali .animate-marquee,
#kanali .animate-marquee-reverse {
  display: flex;                 /* ensure rows are one continuous line */
  width: max-content;            /* size to content so -50% works perfectly */
  will-change: transform;
}

#kanali .animate-marquee {
  animation: marquee 60s linear infinite;
}
#kanali .animate-marquee-reverse {
  animation: marquee-reverse 60s linear infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kanali .animate-marquee,
  #kanali .animate-marquee-reverse {
    animation: none !important;
  }
}

/* Mobile: speed up without flick because of the duplicate trick */
@media (max-width: 640px) {
  #kanali .animate-marquee {
    animation-duration: 40s;
  }
  #kanali .animate-marquee-reverse {
    animation-duration: 40s;
  }
}

  #ctaFab { transition: opacity .3s ease, transform .3s ease; }
  #ctaFab.opacity-0 { transform: translateY(6px); }

.field-invalid {
  border-color: rgba(255, 99, 99, 0.6) !important;
  outline: none;
}

/* Poster uvek 2:3, bez distorzije */
#vod #vodTrack img{
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Hover: mali lift + jača senka */
#vod #vodTrack > *:hover img{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}

/* Ako badge i/ili godina stoje kao apsolutni elementi u kartici */
#vod #vodTrack .chip{
  backdrop-filter: saturate(120%) blur(6px);
  border: 1px solid rgba(255,255,255,.12);
}

/* Hero: faint Europe map overlay */
.bg-eu-hero {
/*  background: url('assets/eu-map.png') no-repeat right 20% top 30%; */
  background-size: 480px auto;
  opacity: 0.06;
  pointer-events: none;
}

/* Stats & FAQ: dotted grid */
.bg-soft-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.02) 1px, transparent 0),
    linear-gradient(to bottom, rgba(18,18,18,.6), rgba(24,24,24,.4) 50%, rgba(18,18,18,.6));
  background-size: 20px 20px, 100% 100%;
}

/* Movies: soft spotlight */
.bg-spotlight {
  background:
    radial-gradient(ellipse 700px 500px at center top, rgba(255,23,68,.08), rgba(255,23,68,.04) 40%, transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.015) 1px, transparent 0);
  background-size: 100% 100%, 22px 22px;
}

/* Testimonials: left-to-right gradient panel */
.bg-gradient-panel {
  background: linear-gradient(135deg, rgba(26,26,26,.95) 0%, rgba(18,18,18,.98) 100%);
}

/* ====== BBX TV (no-video) ====== */
#bbxTV { position: relative; background:#000; border-radius: var(--radius); }
#bbxTV .tv-screen{
  position:relative; inset:0; width:100%; height:100%;
  background: radial-gradient(120% 120% at 50% 50%, #242424 0%, #1a1a1a 55%, #121212 100%);
  overflow:hidden;
}

/* Startup logo */
#bbxTV .tv-logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.06em; color:#fff; opacity:0;
  background:rgba(0,0,0,.8);
  text-transform:uppercase;
  font-size: clamp(16px, 2.6vw, 28px);
  animation: none;
}

/* Channel bug (top-right) */
#bbxTV .tv-bug{
  position:absolute; top:10px; right:12px; z-index:5;
  display:flex; align-items:center; gap:.4rem;
  font-size:12px; color:#fff; padding:.28rem .50rem;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; backdrop-filter: blur(6px);
  opacity:0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
#bbxTV .tv-bug .dot{
  width:8px;height:8px;border-radius:50%;
  background: #ef4444; box-shadow:0 0 10px #ef4444aa;
  display:none;
}

/* Info OSD */
#bbxTV .tv-info{
  position:absolute; left:12px; bottom:38px; z-index:5;
  min-width: 46%;
  padding:.55rem .70rem;
  border-radius:14px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  backdrop-filter: blur(6px);
}
#bbxTV .tv-info .row{
  display:flex; justify-content:space-between; gap:.8rem;
  font-size:12px; color:#cdd4ea;
}
#bbxTV .tv-info .title{
  margin-top:.15rem; font-weight:700; font-size: clamp(12px,1.6vw,14px);
}
#bbxTV .tv-info .next{
  margin-top:.1rem; font-size:12px; color:#a6b0c9;
}

/* Ticker */
#bbxTV .tv-ticker{
  position:absolute; left:0; right:0; bottom:0; height:28px; z-index:5;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85));
  border-top: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
#bbxTV .tv-ticker .marquee{
  position:absolute; white-space:nowrap; will-change: transform;
  left:100%; top:50%; transform: translateY(-50%);
  animation: tv-marquee 16s linear infinite;
  font-size:12px; color:#e8ecf7; padding:0 1rem;
}

/* Overlays */
#bbxTV .tv-scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background: repeating-linear-gradient( to bottom,
    rgba(255,255,255,.06) 0px, rgba(255,255,255,.02) 1px, transparent 2px);
  mix-blend-mode: soft-light;
  opacity:.08; animation: scan-move 6s linear infinite;
}
#bbxTV .tv-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}
#bbxTV .tv-noise{
  position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 1.2px, transparent 1px);
  background-size: 4px 3px, 5px 4px, 6px 5px;
  filter: contrast(130%) brightness(110%);
  animation: noise-shift .8s steps(2,end) infinite;
  mix-blend-mode: screen;
  transition: opacity .12s ease;
}
#bbxTV .tv-aperture{
  position:absolute; inset:0; z-index:7; opacity:0; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,.35) 25%, transparent 70%);
  transform: scaleY(.05) scaleX(1.6);
}
#bbxTV .tv-flash{
  position:absolute; inset:0; z-index:8; opacity:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.85), transparent 65%);
}

/* Color bars (NO SIGNAL) */
#bbxTV .tv-colorbars{
  position:absolute; inset:0; z-index:1; display:none;
  background:
    linear-gradient( to right,
      #c00 0 14.28%, #ff0 14.28% 28.56%, #0c0 28.56% 42.84%,
      #0cc 42.84% 57.12%, #00f 57.12% 71.4%, #c0f 71.4% 85.68%, #888 85.68% 100%);
  filter: saturate(120%);
}

/* States */
#bbxTV.show-bug .tv-bug{ opacity:1; transform:none; }
#bbxTV.show-info .tv-info{ opacity:1; transform:none; }
#bbxTV.live .tv-bug .dot{ display:inline-block; }
#bbxTV.nosignal .tv-colorbars{ display:block; }

/* Animations */
@keyframes tv-marquee{ 0%{ transform: translate(0, -50%)} 100%{ transform: translate(-100%, -50%)} }
@keyframes scan-move{ 0%{ background-position: 0 0 } 100%{ background-position: 0 3px } }
@keyframes noise-shift{
  0%{ background-position: 0 0, 20px -10px, -20px 10px }
  100%{ background-position: -10px 10px, 10px 0, 0 -10px }
}
@keyframes tv-power-on{
  0%{ opacity:0; transform: scaleY(.02) scaleX(1.6) }
  45%{ opacity:1; transform: scaleY(1.06) scaleX(.94) }
  100%{ opacity:0; transform: scale(1) }
}
@keyframes tv-white-flash{ 0%{opacity:.9} 100%{opacity:0} }
@keyframes tv-glitch{
  0%{ transform: translateX(0) }
  20%{ transform: translateX(1px) skewX(.5deg) }
  40%{ transform: translateX(-1px) skewX(-.5deg) }
  60%{ transform: translateX(1px) }
  100%{ transform: none }
}

/* Glitch helper on zap */
#bbxTV.glitch .tv-screen{ animation: tv-glitch .18s steps(2,end); }
/* ====== BBX TV (no-video baseline + extras) ====== */
#bbxTV { position: relative; background:#000; border-radius: var(--radius); }
#bbxTV .tv-screen{
  position:relative; width:100%; height:100%;
  background: radial-gradient(120% 120% at 50% 50%, #242424 0%, #1a1a1a 55%, #121212 100%);
  overflow:hidden;
}

/* Video holder (hidden by default; shown only when a state has video) */
#bbxTV .tv-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none;
}

/* Startup logo */
#bbxTV .tv-logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.06em; color:#fff; opacity:0;
  background:rgba(0,0,0,.8); text-transform:uppercase;
  font-size: clamp(16px, 2.6vw, 28px);
}

/* Channel bug (top-right) */
#bbxTV .tv-bug{
  position:absolute; top:10px; right:12px; z-index:5;
  display:flex; align-items:center; gap:.4rem;
  font-size:12px; color:#fff; padding:.28rem .50rem;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; backdrop-filter: blur(6px);
  opacity:0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
#bbxTV .tv-bug .dot{
  width:8px;height:8px;border-radius:50%;
  background: #ef4444; box-shadow:0 0 10px #ef4444aa; display:none;
}

/* Info OSD */
#bbxTV .tv-info{
  position:absolute; left:12px; bottom:38px; z-index:5; min-width: 46%;
  padding:.55rem .70rem; border-radius:14px;
  background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  color:#fff; opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease; backdrop-filter: blur(6px);
}
#bbxTV .tv-info .row{ display:flex; justify-content:space-between; gap:.8rem; font-size:12px; color:#cdd4ea; }
#bbxTV .tv-info .title{ margin-top:.15rem; font-weight:700; font-size: clamp(12px,1.6vw,14px); }
#bbxTV .tv-info .next{ margin-top:.1rem; font-size:12px; color:#a6b0c9; }

/* Ticker */
#bbxTV .tv-ticker{
  position:absolute; left:0; right:0; bottom:0; height:28px; z-index:5;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85));
  border-top: 1px solid rgba(255,255,255,.06); overflow:hidden;
}
#bbxTV .tv-ticker .marquee{
  position:absolute; white-space:nowrap; will-change: transform;
  left:100%; top:50%; transform: translateY(-50%);
  animation: tv-marquee 16s linear infinite;
  font-size:12px; color:#e8ecf7; padding:0 1rem;
}

/* Overlays */
#bbxTV .tv-scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background: repeating-linear-gradient( to bottom,
    rgba(255,255,255,.06) 0px, rgba(255,255,255,.02) 1px, transparent 2px);
  mix-blend-mode: soft-light; opacity:.08; animation: scan-move 6s linear infinite;
}
#bbxTV .tv-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}
#bbxTV .tv-noise{
  position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 1.2px, transparent 1px);
  background-size: 4px 3px, 5px 4px, 6px 5px;
  filter: contrast(130%) brightness(110%); animation: noise-shift .8s steps(2,end) infinite;
  mix-blend-mode: screen; transition: opacity .12s ease;
}
#bbxTV .tv-aperture{
  position:absolute; inset:0; z-index:7; opacity:0; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,.35) 25%, transparent 70%);
  transform: scaleY(.05) scaleX(1.6);
}
#bbxTV .tv-flash{
  position:absolute; inset:0; z-index:8; opacity:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.85), transparent 65%);
}

/* Color bars (NO SIGNAL) */
#bbxTV .tv-colorbars{
  position:absolute; inset:0; z-index:1; display:none;
  background:
    linear-gradient( to right,
      #c00 0 14.28%, #ff0 14.28% 28.56%, #0c0 28.56% 42.84%,
      #0cc 42.84% 57.12%, #00f 57.12% 71.4%, #c0f 71.4% 85.68%, #888 85.68% 100%);
  filter: saturate(120%);
}

/* Controls */
#bbxTV .tv-controls{
  position:absolute; right:10px; bottom:36px; z-index:9; display:flex; gap:6px;
  opacity:0; transition:opacity .2s ease;
}
#bbxTV:hover .tv-controls{ opacity:1; }
#bbxTV .tv-controls button{
  width:32px; height:32px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45); color:#fff; font-size:14px;
}
#bbxTV .tv-controls button:hover{ background: rgba(255,255,255,.06); }

/* Remote bubble */
#bbxTV .tv-remote-bubble{
  position:absolute; right:14px; top:14px; z-index:9; opacity:0; pointer-events:none;
  background:#111827; color:#fff; border:1px solid rgba(255,255,255,.12);
  padding:.25rem .5rem; border-radius:10px; font-size:12px;
  transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease;
}
#bbxTV .tv-remote-bubble.show{ opacity:1; transform:none; }

/* --- TV OFF: doily drop animation --- */
/* TV OFF layout + drop bez bounce-a */
#bbxTV .tv-off{position:absolute;inset:0;z-index:10;display:none;place-items:center;background:#000;}
#bbxTV #tvDoily{
  z-index:1; width:100%;height:100%;object-fit:cover;opacity:0;
  transform-origin:50% 0%;
  transform:translateY(-90%) rotateX(30deg) scale(1.02);
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.5));
}
#bbxTV #tvDoily.drop{ animation:bbx-doily-drop 1.2s ease-out forwards; }

/* overlay OBAVEZNO iznad slike + fade-in */
#bbxTV #tvEndOverlay{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  opacity:0; transition:opacity .35s ease;
}
#bbxTV .tv-off.show-overlay #tvEndOverlay{ opacity:1; }

/* bez overshoot-a (bounce-a) */
@keyframes bbx-doily-drop{
  0%   {opacity:0; transform:translateY(-92%) rotateX(30deg) scale(1.02);}
  100% {opacity:1; transform:translateY(0)    rotateX(0deg)  scale(1);}
}

@media (prefers-reduced-motion:reduce){
  #bbxTV #tvDoily{transform:none!important;opacity:1!important;animation:none!important;}
  #bbxTV #tvEndOverlay{transition:none;opacity:1;}
}


/* State helpers */
#bbxTV.show-bug .tv-bug{ opacity:1; transform:none; }
#bbxTV.show-info .tv-info{ opacity:1; transform:none; }
#bbxTV.live .tv-bug .dot{ display:inline-block; }
#bbxTV.nosignal .tv-colorbars{ display:block; }
#bbxTV.video-on .tv-video{ display:block; }

/* Animations */
@keyframes tv-marquee{ 0%{ transform: translate(0, -50%)} 100%{ transform: translate(-100%, -50%)} }
@keyframes scan-move{ 0%{ background-position: 0 0 } 100%{ background-position: 0 3px } }
@keyframes noise-shift{
  0%{ background-position: 0 0, 20px -10px, -20px 10px }
  100%{ background-position: -10px 10px, 10px 0, 0 -10px }
}
@keyframes tv-power-on{
  0%{ opacity:0; transform: scaleY(.02) scaleX(1.6) }
  45%{ opacity:1; transform: scaleY(1.06) scaleX(.94) }
  100%{ opacity:0; transform: scale(1) }
}
@keyframes tv-white-flash{ 0%{opacity:.9} 100%{opacity:0} }
@keyframes tv-glitch{
  0%{ transform: translateX(0) }
  20%{ transform: translateX(1px) skewX(.5deg) }
  40%{ transform: translateX(-1px) skewX(-.5deg) }
  60%{ transform: translateX(1px) }
  100%{ transform: none }
}

/* Glitch helper on zap */
#bbxTV.glitch .tv-screen{ animation: tv-glitch .18s steps(2,end); }

/* Respect reduced motion: stop marquee & subtle effects */
@media (prefers-reduced-motion: reduce){
  #bbxTV .tv-ticker .marquee{ animation: none !important; }
  #bbxTV .tv-scanlines{ animation: none !important; }
}

/* Drawer: body lock */
.bb-no-scroll { overflow: hidden; }

/* Improve momentum scroll inside drawer on iOS */
#bb-drawer { -webkit-overflow-scrolling: touch; }

/* Band list: mobile = stacked; desktop = inline with "•" separators */
.bb-band-list{ list-style:none; margin:0; padding:0; }
@media (min-width: 640px){
  .bb-band-list > li{ display:flex; align-items:center; }
  .bb-band-list > li + li::before{
    content:"•";
    color: rgba(255,255,255,.3);
    margin: 0 12px;
  }
}

/* Hide horizontal scrollbar on mobile chips row */
.no-scrollbar{ scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar{ display: none; }
#tf_country option {
  background-color: #090909; /* dark background */
  color: #f8f8f8;           /* near-white text */
}

/* Section dividers for better hierarchy */
section {
  position: relative;
}
section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 20%, rgba(255,23,68,.1) 50%, rgba(255,255,255,.06) 80%, transparent);
  opacity: .5;
}
section:first-of-type::before {
  display: none;
}
/* ===== Maintenance Overlay ===== */

#bbx-maintenance{
  position: fixed;
  inset: 0;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.75);
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}

#bbx-maintenance *{
  pointer-events:auto;
}

/* Only blur page content when maintenance overlay is shown (body has .bbx-lp-maintenance) */
body.bbx-lp-maintenance > *:not(#bbx-maintenance){
  filter: blur(6px) brightness(.6);
  pointer-events:none;
  user-select:none;
}

.bbx-maintenance-box{
  background: rgba(18,18,18,.95);
  border: 1px solid rgba(255,255,255,.12);
  padding: 40px;
  border-radius: 18px;
  max-width: 520px;
  color:#fff;
}

.bbx-maintenance-box h2{
  font-size: 26px;
  margin-bottom: 12px;
}

.bbx-maintenance-box p{
  opacity:.85;
}