/* xtalks-exit-popup — V3 editorial popup. Light (V3), Dark B via
   prefers-color-scheme, Ended A via .xtk-ended on the root. */

@font-face { font-family: 'XtkRoboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'XtkRoboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'XtkRobotoCondensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/roboto-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'XtkRobotoCondensed'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/roboto-condensed-900.woff2') format('woff2'); }

.xtk-popup-root {
  /* V3 Light theme (default) */
  --xtk-shell-bg: #fff;
  --xtk-ink: #233F54;
  --xtk-copy: #58585A;
  --xtk-hero-grad: linear-gradient(135deg, #EAF6FB 0%, #fff 100%);
  --xtk-rule: #28A5DE;                       /* 3px hero underline */
  --xtk-accent: #28A5DE;                     /* headline key word */
  --xtk-cd-num: #233F54;
  --xtk-cd-label: #0E7D9F;
  --xtk-cd-sep: #e5e7eb;
  --xtk-shadow: 0 25px 60px -15px rgba(15,30,50,0.35), 0 0 0 1px rgba(0,0,0,0.04);
  --xtk-nothanks: #58585A;
  --xtk-community-bg: #58585A;
  --xtk-community-fg: #fff;
  --xtk-community-hover-bg: #4D4D50;
  --xtk-community-hover-fg: #fff;
  --xtk-net-display: block;
  font-family: 'XtkRoboto', Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .xtk-popup-root {
    /* V3 Dark B: warm ink + orange rule, no network pattern */
    --xtk-shell-bg: #1A1410;
    --xtk-ink: #fff;
    --xtk-copy: rgba(255,255,255,0.7);
    --xtk-hero-grad: linear-gradient(135deg, #251A12 0%, #1A1410 100%);
    --xtk-rule: #F68D1F;
    --xtk-accent: #F8AB59;
    --xtk-cd-num: #fff;
    --xtk-cd-label: #F8AB59;
    --xtk-cd-sep: rgba(255,255,255,0.12);
    --xtk-shadow: 0 30px 70px -15px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05);
    --xtk-nothanks: rgba(255,255,255,0.55);
    --xtk-community-bg: #ECECEC;
    --xtk-community-fg: #233F54;
    --xtk-community-hover-bg: #fff;
    --xtk-community-hover-fg: #233F54;
    --xtk-net-display: none;
  }
}

.xtk-popup-scrim {
  position: fixed; inset: 0; background: rgba(15,30,50,0.42); z-index: 999998;
  touch-action: none;                        /* no drag-scroll of the dimmed page */
}
.xtk-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100vw - 32px); max-width: 460px; max-height: calc(100vh - 32px);
  overflow-y: auto; overscroll-behavior: contain; background: var(--xtk-shell-bg); color: var(--xtk-ink);
  border-radius: 12px; box-shadow: var(--xtk-shadow); z-index: 999999;
  animation: xtk-pop-in 0.22s ease-out;
}
@keyframes xtk-pop-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.xtk-close {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  background: transparent; border: none; cursor: pointer; color: #9aa3ad;
  display: grid; place-items: center; border-radius: 6px; z-index: 5; padding: 0;
}

/* ── Hero band ── */
.xtk-hero {
  position: relative; height: 120px; overflow: hidden;
  background: var(--xtk-hero-grad); border-bottom: 3px solid var(--xtk-rule);
}
.xtk-hero-banner { width: 100%; height: 100%; object-fit: cover; display: block; }
.xtk-hero-banner[hidden], .xtk-hero-fallback[hidden] { display: none; }
.xtk-hero-fallback { position: absolute; inset: 0; padding: 24px 32px; }
.xtk-net {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: var(--xtk-net-display); opacity: 0.4;
}
.xtk-logo { position: relative; display: block; width: 110px; height: auto; }
.xtk-logo .xtk-logo-word { fill: #58585A; }
@media (prefers-color-scheme: dark) { .xtk-logo .xtk-logo-word { fill: #fff; } }
/* On-air LIVE / On-Demand badge — centered over the banner's dark left plexus,
   pulsing broadcast ring + gentle blink (motion gated on prefers-reduced-motion).
   Position is tuned to the bundled home-hero (badge sits between the box's left
   edge and the arc's red ring). LIVE = red; On-Demand (.xtk-ended) = orange. */
.xtk-badge {
  position: absolute; top: 50%; left: 25.5%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  background: transparent; border: 0; padding: 0;
  font-family: 'XtkRobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
  font-size: 20px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: #ff2d2d; text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.7);
}
.xtk-badge-dot { width: 13px; height: 13px; border-radius: 50%; background: #ff2d2d; }
.xtk-ended .xtk-badge { color: #ff9a1e;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.65); }
.xtk-ended .xtk-badge-dot { background: #ff9a1e; }
@media (prefers-reduced-motion: no-preference) {
  .xtk-badge { animation: xtk-live-blink 2.2s ease-in-out infinite; }
  .xtk-badge-dot { animation: xtk-live-ring 2.2s ease-out infinite; }
  .xtk-ended .xtk-badge-dot { animation: xtk-ring-amber 2.2s ease-out infinite; }
}
@keyframes xtk-live-ring {
  0%   { box-shadow: 0 0 8px 2px rgba(255,45,45,0.95), 0 0 0 0 rgba(255,45,45,0.6); }
  70%  { box-shadow: 0 0 8px 2px rgba(255,45,45,0.95), 0 0 0 16px rgba(255,45,45,0); }
  100% { box-shadow: 0 0 8px 2px rgba(255,45,45,0.95), 0 0 0 0 rgba(255,45,45,0); }
}
@keyframes xtk-ring-amber {
  0%   { box-shadow: 0 0 8px 2px rgba(255,154,30,0.95), 0 0 0 0 rgba(255,154,30,0.6); }
  70%  { box-shadow: 0 0 8px 2px rgba(255,154,30,0.95), 0 0 0 16px rgba(255,154,30,0); }
  100% { box-shadow: 0 0 8px 2px rgba(255,154,30,0.95), 0 0 0 0 rgba(255,154,30,0); }
}
@keyframes xtk-live-blink { 0%,55% { opacity: 1; } 68% { opacity: 0.32; } 82%,100% { opacity: 1; } }

/* ── Body ── */
.xtk-body { padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 18px; }
.xtk-headline {
  margin: 0; font-family: 'XtkRobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
  font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--xtk-ink);
  letter-spacing: -0.01em; text-wrap: balance; text-align: center;
}
.xtk-accent { color: var(--xtk-accent); }

/* ── Countdown (flat, magazine rules in dark) ── */
.xtk-countdown { display: flex; gap: 0; padding: 10px 0;
  border-top: 1px solid var(--xtk-cd-sep); border-bottom: 1px solid var(--xtk-cd-sep);
  font-family: 'XtkRobotoCondensed', 'Roboto Condensed', Arial, sans-serif; }
.xtk-countdown[hidden] { display: none; }
.xtk-cd { flex: 1; text-align: center; }
.xtk-cd-num { font-size: 40px; font-weight: 900; color: var(--xtk-cd-num);
  line-height: 1; font-variant-numeric: tabular-nums; }
.xtk-cd-label { font-size: 9px; font-weight: 600; color: var(--xtk-cd-label);
  text-transform: uppercase; letter-spacing: 0.14em; margin-top: 6px; }
.xtk-cd-sep { width: 1px; background: var(--xtk-cd-sep); align-self: stretch; margin: 4px 0; }

/* ── Ended A play-card ── */
.xtk-playcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 12px; background: #EAF6FB; border: 1px solid rgba(40,165,222,0.2);
  text-align: left; }
.xtk-playcard[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  .xtk-playcard { background: rgba(40,165,222,0.08); border-color: rgba(40,165,222,0.3); }
}
.xtk-play-btn { width: 48px; height: 48px; border-radius: 50%; background: #28A5DE;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(40,165,222,0.33); }
.xtk-playcard-title { font-weight: 700; color: var(--xtk-ink); font-size: 14px;
  font-family: 'XtkRobotoCondensed', 'Roboto Condensed', Arial, sans-serif; letter-spacing: 0.01em; }
.xtk-playcard-sub { color: var(--xtk-copy); font-size: 12px; }

/* ── Copy ── */
.xtk-copy { margin: 0 auto; font-size: 13.5px; line-height: 1.55; color: var(--xtk-copy);
  text-align: center; max-width: 360px; }
.xtk-copy[hidden] { display: none; }
.xtk-copy strong { color: var(--xtk-ink); }

/* ── Actions ── */
.xtk-actions { display: flex; flex-direction: column; gap: 8px; }
.xtk-cta { display: block; text-align: center; background: #F68D1F; color: #fff;
  border: none; padding: 14px 22px; border-radius: 999px; cursor: pointer;
  font-family: 'XtkRobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  box-shadow: 0 4px 14px rgba(246,141,31,0.33); transition: transform 0.15s ease; }
.xtk-cta:hover { transform: translateY(-1px); color: #fff; }
/* Join Community: full-width, same size as the primary CTA, Xtalks grey
   (off-white in dark mode). No thanks: centered underneath. */
.xtk-community { display: block; text-align: center; background: var(--xtk-community-bg); color: var(--xtk-community-fg);
  border: none; padding: 14px 22px; border-radius: 999px; cursor: pointer;
  font-family: 'XtkRobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease; }
.xtk-community:hover { background: var(--xtk-community-hover-bg); color: var(--xtk-community-hover-fg); }
.xtk-community[hidden] { display: none; }
.xtk-nothanks { align-self: center; background: transparent; color: var(--xtk-nothanks);
  border: none; padding: 6px; cursor: pointer; font-family: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; }