/* Live TV ads: full-stage ad layer, squeeze-back corner window, sponsor banner. */
.zf-lad { position: absolute; inset: 0; z-index: 20; background: #000; color: #fff; font-family: inherit; }
.zf-lad[hidden] { display: none !important; }
.zf-lad .zf-lad-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* short ad load: the ZapFlix "Z" breathing (same mark as the brand loader) */
.zf-lad.is-loading::after {
  content: "Z"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font: 900 40px/1 Inter, "Segoe UI", system-ui, Arial, sans-serif;
  background: linear-gradient(180deg, #ff6a71 0%, #ff2c36 42%, #e50914 70%, #b00610 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(229, 9, 20, 0.45));
  animation: zf-lad-z 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes zf-lad-z {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.65; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .zf-lad.is-loading::after { animation: none; } }

.zf-lad-top { position: absolute; top: 16px; inset-inline-start: 16px; inset-inline-end: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.zf-lad-badge { display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 999px; background: rgba(12, 12, 16, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.zf-lad-badge b { color: #ffd23f; font-weight: 800; letter-spacing: 0.02em; }
.zf-lad-next { padding: 6px 12px; border-radius: 999px; background: rgba(229, 9, 20, 0.85); font-size: 12.5px; font-weight: 700; }
.zf-lad-next:empty { display: none; }

.zf-lad-bottom { position: absolute; bottom: 22px; inset-inline-start: 16px; inset-inline-end: 16px; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.zf-lad-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.zf-lad-info strong { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-lad-info span { font-size: 13px; color: rgba(255, 255, 255, 0.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-lad-visit, .zf-lad-sound, .zf-lad-skip {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
  min-height: 42px; padding: 10px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.zf-lad-visit { background: #fff; color: #0b0b10; }
.zf-lad-visit:hover, .zf-lad-visit:focus-visible { background: #e9e9ee; }
.zf-lad-sound { background: rgba(12, 12, 16, 0.72); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.zf-lad-skip { background: rgba(12, 12, 16, 0.78); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); font-variant-numeric: tabular-nums; }
.zf-lad-skip:not(:disabled):hover, .zf-lad-skip:not(:disabled):focus-visible { background: #fff; color: #0b0b10; }
.zf-lad-skip:disabled { cursor: default; opacity: 0.85; font-weight: 600; }
.zf-lad [hidden] { display: none !important; }
.zf-lad-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.18); }
.zf-lad-bar i { display: block; height: 100%; width: 0; background: #ffd23f; transition: width 0.25s linear; }
html[dir="rtl"] .zf-lad-bar i { margin-inline-start: auto; }

/* Squeeze-back: during an ad break the channel keeps playing muted in a corner window. */
.zf-lad-live { display: none; }
.stage.zf-lad-on.zf-lad-squeeze > #v {
  z-index: 22; inset: auto; top: 16px; inset-inline-end: 16px; width: min(30%, 340px); height: auto; aspect-ratio: 16 / 9;
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.85); transition: all 0.35s ease;
}
.stage.zf-lad-on.zf-lad-squeeze .zf-lad-live {
  display: flex; align-items: center; gap: 6px; position: absolute; z-index: 23; top: 24px;
  inset-inline-end: 24px; padding: 4px 10px; border-radius: 999px; background: rgba(229, 9, 20, 0.92); font-size: 12px; font-weight: 800;
}
.stage.zf-lad-on.zf-lad-squeeze .zf-lad-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: zf-lad-pulse 1.4s ease-in-out infinite; }
@keyframes zf-lad-pulse { 50% { opacity: 0.3; } }
.stage.zf-lad-on.zf-lad-squeeze .zf-lad-top { inset-inline-end: calc(min(30%, 340px) + 32px); }
/* The live controls and site zones stay under the ad. */
.stage.zf-lad-on .controls, .stage.zf-lad-on .topbar, .stage.zf-lad-on .tb-clock, .stage.zf-lad-on > .zf-site-ad-zone { visibility: hidden; }

/* Sponsor banner (lower third) */
.zf-lad-banner {
  position: absolute; z-index: 15; bottom: 96px; inset-inline-start: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px));
  display: flex; align-items: stretch; border-radius: 16px; overflow: hidden; background: rgba(14, 14, 18, 0.86);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  animation: zf-lad-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[dir="rtl"] .zf-lad-banner { transform: translateX(50%); }
@keyframes zf-lad-rise { from { opacity: 0; translate: 0 18px; } }
.zf-lad-banner-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #fff; text-decoration: none; }
.zf-lad-banner-link img { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: #222; }
.zf-lad-banner-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zf-lad-banner-copy small { font-size: 11px; font-weight: 700; color: #ffd23f; text-transform: uppercase; letter-spacing: 0.04em; }
.zf-lad-banner-copy b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-lad-banner-link em { flex: none; margin-inline-start: auto; font-style: normal; font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px; background: #e50914; }
.zf-lad-banner-x { flex: none; width: 40px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 22px; cursor: pointer; }
.zf-lad-banner-x:hover, .zf-lad-banner-x:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
.stage.idle .zf-lad-banner { bottom: 24px; }

@media (max-width: 700px) {
  .zf-lad-top { top: 10px; inset-inline-start: 10px; }
  .zf-lad-bottom { bottom: 14px; inset-inline-start: 10px; inset-inline-end: 10px; }
  .zf-lad-info { display: none; }
  .zf-lad-visit, .zf-lad-sound, .zf-lad-skip { min-height: 36px; padding: 7px 13px; font-size: 13px; }
  .stage.zf-lad-on.zf-lad-squeeze > #v { top: 10px; inset-inline-end: 10px; width: 38%; }
  .stage.zf-lad-on.zf-lad-squeeze .zf-lad-live { display: none; }
  .stage.zf-lad-on.zf-lad-squeeze .zf-lad-top { inset-inline-end: calc(38% + 20px); }
  .zf-lad-banner { bottom: 70px; }
  .zf-lad-banner-link img { width: 42px; height: 42px; }
  .zf-lad-banner-link em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zf-lad-banner, .stage.zf-lad-on.zf-lad-squeeze > #v { animation: none; transition: none; }
}

/* Staff preview bar (?ad_preview=1) */
.zf-lad-preview { position: absolute; z-index: 16; top: 80px; inset-inline-start: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px; background: rgba(14, 14, 18, 0.88); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.5); font-size: 12px; font-weight: 700; color: #ffd23f; }
html[dir="rtl"] .zf-lad-preview { transform: translateX(50%); }
.zf-lad-preview span { padding: 0 8px; }
.zf-lad-preview button { border: 0; border-radius: 999px; padding: 7px 12px; background: #fff; color: #0b0b10; font: inherit; cursor: pointer; }
.stage.zf-lad-on .zf-lad-preview { visibility: hidden; }