/* Alkafeel+ — custom video player (player.html) + live page (live.html). Uses tokens.css only.
   No ornaments. Motion: transform / opacity only. */

.stage { position: relative; padding-top: var(--header-h); background: var(--c-bg); }
.stage-inner { position: relative; margin: 0 auto; }
@media (min-width: 768px) {
  .stage { padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-2); }
  .stage-inner { width: min(100%, calc(76vh * 16 / 9)); }
}

/* ---------- player box ---------- */
.player {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin-inline: auto; background: var(--c-player); overflow: hidden; isolation: isolate;
  color: var(--c-text); user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none;
}
@media (min-width: 768px) { .player { border-radius: var(--r-card); box-shadow: var(--sh-card); } }
.player:fullscreen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.player:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--c-player); }
.player-poster { position: absolute; inset: 0; z-index: 1; view-transition-name: poster; background: var(--c-surface); transition: opacity var(--dur-3) var(--ease); }
.player-poster img, .player-poster picture { width: 100%; height: 100%; object-fit: cover; }
.player-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, var(--c-ov-a0), var(--c-ov-a60)); }
.player.started .player-poster { opacity: 0; pointer-events: none; }
.p-tap { position: absolute; inset: 0; z-index: 2; }

/* center: big play + resume + messages */
.p-center { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); padding: var(--sp-4); text-align: center; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.p-center > * { pointer-events: auto; }
.player.started .p-center { opacity: 0; pointer-events: none; }
.player.started .p-center > * { pointer-events: none; }
.player[data-state="error"] .p-center, .player[data-state="ended"]:not(.has-next) .p-center { opacity: 1; }
.player[data-state="error"] .p-center > *, .player[data-state="ended"] .p-center > * { pointer-events: auto; }
/* big play = alkafeel.tv round green play button */
.p-big {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-round);
  background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-card);
  transition: transform var(--dur-2) var(--ease);
}
.p-big svg { width: 30px; height: 30px; margin-inline-end: -4px; }
.p-big:hover { transform: scale(1.08); }
.p-big:focus-visible { outline: 2px solid var(--c-text); outline-offset: 4px; }
@media (min-width: 768px) { .player .p-big { width: 84px; height: 84px; } .p-big svg { width: 34px; height: 34px; } }
.player[data-state="soon"] .p-big, .player[data-state="error"] .p-big, .player[data-state="loading"] .p-big, .player[data-state="notfound"] .p-big { display: none; }
.player.is-in .p-big { animation: p-pop var(--dur-3) var(--ease) both; }
@keyframes p-pop { from { opacity: 0; transform: scale(.85); } }
.p-resume { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.p-msg { max-width: 440px; display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--c-ov-a80); border: 1px solid var(--c-line); }
.p-msg svg { width: 30px; height: 30px; color: var(--c-primary); }
.p-msg strong { color: var(--c-text); font-size: var(--fs-18); }
.p-msg p { font-size: var(--fs-13); color: var(--c-text-body); }
.p-msg .btn { margin-top: var(--sp-1); }
.p-msg-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
@media (max-width: 480px) { .p-msg { padding: var(--sp-3); } .p-msg p { display: none; } }

/* spinner (rotate = transform) */
.p-spinner { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity var(--dur-2); }
.p-spinner span { width: 52px; height: 52px; border-radius: var(--r-round); border: 3px solid var(--c-white-a16); border-top-color: var(--c-primary); animation: spin 900ms linear infinite; }
.player.is-waiting .p-spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* double-tap ripples (touch) */
.p-ripple { position: absolute; z-index: 5; top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: var(--r-round); display: grid; place-items: center; background: var(--c-ov-a60); opacity: 0; transform: scale(.6); pointer-events: none; }
.p-ripple svg { width: 34px; height: 34px; }
.p-ripple-back { left: 14%; } .p-ripple-fwd { right: 14%; }
.p-ripple.go { animation: ripple 650ms var(--ease) both; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* single click: brief play / pause icon in the center (like YouTube) */
.p-flash { position: absolute; z-index: 5; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: var(--r-round); display: grid; place-items: center; background: var(--c-ov-a60); opacity: 0; pointer-events: none; }
.p-flash svg { width: 30px; height: 30px; }
.p-flash.go { animation: flash 600ms var(--ease-out) both; }
@keyframes flash { 0% { opacity: 0; transform: scale(.7); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }

/* on-screen indicator for speed / volume / quality (inside the video, semi-transparent) */
.p-osd {
  position: absolute; z-index: 6; top: var(--sp-5); left: 50%; translate: -50% 0;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--c-ov-a60);
  font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-text); line-height: 1.4; white-space: nowrap;
  opacity: 0; transform: scale(.94); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease);
}
.p-osd.is-on { opacity: 1; transform: none; transition-duration: var(--dur-1); }
.p-osd:empty { display: none; }
@media (min-width: 768px) { .p-osd { top: var(--sp-7); font-size: var(--fs-16); } }

/* top title (fullscreen only) */
.p-top { position: absolute; z-index: 6; inset: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-7); background: linear-gradient(180deg, var(--c-ov-a80), var(--c-ov-a0)); opacity: 0; transition: opacity var(--dur-2); pointer-events: none; }
.p-top-title { font-weight: var(--fw-bold); font-size: var(--fs-16); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.p-qtag { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--c-text-2); padding: 2px var(--sp-2); border: 1px solid var(--c-white-a22); border-radius: var(--r-pill); white-space: nowrap; }
.player.started:not(.is-idle) .p-top { opacity: 1; }
.player:not(:fullscreen) .p-top { display: none; }

/* controls (auto-hide while playing; cursor hides too) */
.p-controls { position: absolute; z-index: 7; inset: auto 0 0; padding: var(--sp-6) var(--sp-2) var(--sp-1); background: linear-gradient(0deg, var(--c-ov-a92), var(--c-ov-a45) 60%, var(--c-ov-a0)); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease); pointer-events: none; }
.player.started .p-controls { opacity: 1; transform: none; pointer-events: auto; }
.player.started.is-idle .p-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.player.started.is-idle, .player.started.is-idle * { cursor: none; }
@media (min-width: 768px) { .p-controls { padding: var(--sp-8) var(--sp-4) var(--sp-2); } }
.p-row { display: flex; align-items: center; gap: 2px; }
.p-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-round); color: var(--c-text); transition: transform var(--dur-1) var(--ease-out);
}
.p-btn svg { width: 24px; height: 24px; }
.p-btn::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--c-white-a10); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.p-btn:hover::before, .p-btn[aria-expanded="true"]::before { opacity: 1; }
.p-btn:active { transform: scale(.92); }
.p-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.p-spacer { flex: 1; }
.p-time { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--c-text-2); padding: 0 var(--sp-2); white-space: nowrap; }
.p-vol { display: flex; align-items: center; }
.p-vol-range { display: none; width: 76px; accent-color: var(--c-primary); margin: 0 var(--sp-1); }
@media (hover: hover) and (min-width: 768px) { .p-vol-range { display: block; } }
@media (max-width: 400px) { #btnBack, #btnFwd { display: none; } .p-time { padding: 0 var(--sp-1); font-size: var(--fs-12); } }
.p-set-q { position: absolute; top: 5px; right: 1px; font-size: 9px; line-height: 13px; font-weight: var(--fw-bold); padding: 0 3px; border-radius: 3px; background: var(--c-primary); color: var(--c-on-primary); }

/* seek bar (LTR: time flows left → right, like YouTube's Arabic UI) */
.p-seek { position: relative; height: 26px; margin: 0 var(--sp-3); cursor: pointer; touch-action: none; display: flex; align-items: center; }
.p-rail { position: relative; width: 100%; height: 4px; border-radius: var(--r-pill); background: var(--c-white-a22); overflow: hidden; transform: scaleY(1); transition: transform var(--dur-1); }
.p-seek:hover .p-rail, .p-seek.is-drag .p-rail, .p-seek:focus-visible .p-rail { transform: scaleY(1.6); }
.p-rail i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); }
.p-buf { background: var(--c-white-a35); }
.p-hover { background: var(--c-white-a22); opacity: 0; }
.p-seek:hover .p-hover { opacity: 1; }
.p-played { background: var(--c-primary); }
.p-thumb { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--r-round); background: var(--c-text); box-shadow: 0 0 0 4px var(--c-primary-a35); scale: 0; transform: translateX(var(--x, 0px)); transition: scale var(--dur-1); }
.p-seek:hover .p-thumb, .p-seek.is-drag .p-thumb, .p-seek:focus-visible .p-thumb { scale: 1; }
@media (hover: none) { .p-thumb { scale: .8; } }
.p-tip { position: absolute; bottom: 26px; left: 0; padding: 2px var(--sp-2); border-radius: var(--r-xs); background: var(--c-ov-a92); border: 1px solid var(--c-line); font-size: var(--fs-12); font-weight: var(--fw-bold); pointer-events: none; opacity: 0; transform: translateX(var(--tx, 0px)); transition: opacity var(--dur-1); white-space: nowrap; }
.p-seek:hover .p-tip, .p-seek.is-drag .p-tip { opacity: 1; }
.p-seek:focus-visible { outline: none; }
.p-seek:focus-visible .p-rail { box-shadow: 0 0 0 2px var(--c-focus); }

/* settings / subtitles menu */
.p-menu { position: absolute; z-index: 9; bottom: 66px; right: var(--sp-3); width: min(290px, calc(100% - 24px)); max-height: calc(100% - 84px); overflow-y: auto; padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-ov-a92); border: 1px solid var(--c-line); box-shadow: var(--sh-pop); opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom right; transition: opacity var(--dur-1), transform var(--dur-2) var(--ease); }
.p-menu.is-open { opacity: 1; transform: none; }
.p-menu h3 { font-size: var(--fs-12); color: var(--c-text-body); font-weight: var(--fw-bold); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.p-menu [role="menuitemradio"] { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-14); font-weight: var(--fw-semi); text-align: start; color: var(--c-text-2); }
.p-menu [role="menuitemradio"]:hover:not([aria-disabled="true"]), .p-menu [role="menuitemradio"]:focus-visible { background: var(--c-white-a10); outline: none; }
.p-menu [role="menuitemradio"] svg { width: 18px; height: 18px; flex: none; }
.p-menu [aria-checked="false"] .m-check { opacity: 0; }
.p-menu [aria-checked="true"] { color: var(--c-text); }
.p-menu [aria-checked="true"] .m-check { color: var(--c-primary); }
.p-menu [aria-disabled="true"] { opacity: .45; cursor: default; }
.p-menu hr { border: 0; border-top: 1px solid var(--c-white-a10); margin: var(--sp-1) var(--sp-2); }

/* speed: one track that snaps to 0.5 · 0.75 · 1 · 1.25 · 1.5 · 2, labels underneath */
.m-speed { --th: 16px; padding: var(--sp-1) var(--sp-3) var(--sp-2); }
.m-range { display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.m-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--c-primary) var(--p, 40%), var(--c-white-a22) var(--p, 40%)); }
.m-range::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--c-white-a22); }
.m-range::-moz-range-progress { height: 4px; border-radius: var(--r-pill); background: var(--c-primary); }
.m-range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--th); height: var(--th); margin-top: -6px; border-radius: var(--r-round); background: var(--c-text); border: 0; box-shadow: 0 0 0 4px var(--c-primary-a35); }
.m-range::-moz-range-thumb { width: var(--th); height: var(--th); border-radius: var(--r-round); background: var(--c-text); border: 0; box-shadow: 0 0 0 4px var(--c-primary-a35); }
.m-range:focus { outline: none; }
.m-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--c-primary-a35), 0 0 0 6px var(--c-focus); }
.m-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--c-primary-a35), 0 0 0 6px var(--c-focus); }
.m-ticks { position: relative; height: 20px; margin-inline: calc(var(--th) / 2); }
.m-ticks span { position: absolute; top: 0; left: calc(var(--k) * 20%); transform: translateX(-50%); font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--c-text-body); line-height: 20px; cursor: pointer; }
.m-ticks span.is-on { color: var(--c-text); }

/* next-episode card */
.p-next { position: absolute; z-index: 8; bottom: 78px; right: var(--sp-3); width: min(300px, calc(100% - 24px)); display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3); align-items: center; padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-ov-a92); border: 1px solid var(--c-line); box-shadow: var(--sh-pop); opacity: 0; transform: translateX(16px); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease); }
.p-next.is-in { opacity: 1; transform: none; }
.p-next-img { position: relative; aspect-ratio: 16/9; border-radius: var(--r-xs); overflow: hidden; background: var(--c-surface); }
.p-next-img img { width: 100%; height: 100%; object-fit: cover; }
.p-next small { display: block; font-size: var(--fs-11); color: var(--c-text-body); font-weight: var(--fw-bold); }
.p-next strong { display: block; font-size: var(--fs-13); color: var(--c-text); line-height: 1.45; }
.p-next .p-next-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--c-primary); color: var(--c-on-primary); font-size: var(--fs-13); font-weight: var(--fw-bold); }
.p-next .p-next-go svg { width: 14px; height: 14px; }
.p-next-x { position: absolute; top: -12px; left: -12px; width: 32px; height: 32px; border-radius: var(--r-round); display: grid; place-items: center; background: var(--c-surface-2); border: 1px solid var(--c-white-a22); }
.p-next-x svg { width: 14px; height: 14px; }
.p-next-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-primary); transform-origin: right center; transform: scaleX(1); }
.p-next-bar.run { transition: transform 8s linear; transform: scaleX(0); }
@media (max-width: 480px) { .p-next { bottom: 64px; grid-template-columns: 72px 1fr; } }
.player:has(.p-menu.is-open) .p-next { opacity: 0; pointer-events: none; }

/* keyboard help (opened with ? — no menu entry) */
.keys-dlg { border: 0; padding: 0; background: transparent; color: var(--c-text-body); max-width: 100vw; }
.keys-dlg::backdrop { background: var(--c-black-a50); }
.keys-panel { width: min(440px, 92vw); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--c-header); border: 1px solid var(--c-line); box-shadow: var(--sh-pop); display: grid; gap: var(--sp-3); }
.keys-panel h2 { font-size: var(--fs-18); }
.keys { margin: 0; display: grid; gap: 6px; }
.keys div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-13); padding: 4px 0; border-bottom: 1px solid var(--c-white-a06); }
.keys dt { direction: ltr; }
.keys dd { margin: 0; }
kbd { display: inline-block; min-width: 24px; padding: 0 6px; border-radius: var(--r-xs); border: 1px solid var(--c-white-a22); background: var(--c-surface); color: var(--c-text); font: var(--fw-semi) var(--fs-12)/22px var(--font); text-align: center; }

/* ---------- info below the player ---------- */
.p-info { padding-top: var(--sp-6); padding-bottom: var(--sp-2); display: grid; gap: var(--sp-2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--c-text-body); }
.crumbs a { color: var(--c-text-body); min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--c-primary); }
.crumbs svg { width: 14px; height: 14px; opacity: .6; }
.p-kicker { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-primary); }
.p-info h1 { font-size: clamp(24px, 1.4vw + 16px, 32px); line-height: 1.35; text-wrap: balance; }
.p-info h1:lang(en) { line-height: 1.25; }
.p-sub { font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--c-text-2); line-height: 1.55; }
.p-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-14); color: var(--c-text-body); }
.p-meta li { display: inline-flex; align-items: center; gap: var(--sp-3); }
.p-meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: var(--r-round); background: var(--c-text-dim); }
.p-meta svg { width: 14px; height: 14px; color: var(--c-primary); }
.p-desc { max-width: 760px; margin-top: var(--sp-2); font-size: var(--fs-15); line-height: var(--lh-text); color: var(--c-text-2); }
.p-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.back-kids { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-pill); background: var(--c-bg); border: 2px solid var(--c-primary); color: var(--c-text-2); font-weight: var(--fw-bold); justify-self: start; }
.back-kids svg { width: 18px; height: 18px; }

/* =====================================================================
   WATCH PAGE LAYOUT (player.html) — three sizes like YouTube:
   default  = normal player + the up-next list BESIDE it (≥ 1100px; below that the list goes under)
   theater  = the player gets a full-width dark band, info + up-next move below (T key / button)
   fullscreen = the browser's fullscreen (F key / button / double-click)
   ===================================================================== */
.watch { padding-top: var(--header-h); overflow-x: clip; }
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "info" "side" "more"; align-items: start; }
.watch .stage { grid-area: stage; padding: 0; background: none; isolation: isolate; }
.watch .p-info { grid-area: info; padding-inline: var(--gutter); min-width: 0; }
.watch-side { grid-area: side; min-width: 0; padding-inline: var(--gutter); margin-top: var(--sp-7); }
.watch-side .row-title { margin-bottom: var(--sp-4); }
/* the dark band behind the player in theater mode (fades; the band is wider than the stage, so the page clips it) */
.watch .stage::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(50% - 50vw); background: var(--c-player); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); pointer-events: none; }
@media (max-width: 767px) { #btnTheater { display: none; } }
@media (min-width: 768px) {
  .watch { padding-top: calc(var(--header-h) + var(--sp-5)); }
  .watch-grid { padding-inline: var(--gutter); column-gap: var(--sp-6); }
  .watch .p-info, .watch-side { padding-inline: 0; }
  .watch .stage-inner { width: min(100%, calc(76vh * 16 / 9)); }
  .watch.is-theater { padding-top: var(--header-h); }
  .watch.is-theater .stage::before { opacity: 1; }
  .watch.is-theater .stage-inner { width: min(100%, calc((100vh - var(--header-h) - 96px) * 16 / 9)); }
  .watch.is-theater .player { border-radius: 0; box-shadow: none; }
}
@media (min-width: 1100px) {
  /* details right under the player (rows never stretch); the «المزيد من …» grid takes the rest of the main column */
  .watch-grid { grid-template-columns: minmax(0, 1280px) clamp(340px, 26vw, 400px); grid-template-areas: "stage side" "info side" "more side"; grid-template-rows: auto auto 1fr; justify-content: center; }
  .watch .stage-inner { width: 100%; }
  .watch-side { margin-top: 0; }
  .watch.is-theater .watch-grid { grid-template-areas: "stage stage" "info side" "more side"; }
  .watch.is-theater .watch-side { margin-top: var(--sp-6); }
  .watch.is-theater .stage-inner { width: min(100%, calc((100vh - var(--header-h) - 96px) * 16 / 9)); }
}

/* «المزيد من …» (watch page): the section-page cards — 3 per row on desktop, 2 on tablets */
.p-more { grid-area: more; align-self: start; min-width: 0; margin-top: var(--sp-8); }
.watch .p-info { align-self: start; }
.p-more .k-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .p-more .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .p-more .row-head, .p-more .k-grid { padding-inline: 0; } }
@media (min-width: 1100px) { .p-more .k-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--gap); } .p-more { margin-top: var(--sp-7); } }
.watch.is-cinema .p-more { display: none; }
.un-more { margin-top: var(--sp-3); min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--c-line-2); color: var(--c-text-2); font-size: var(--fs-13); font-weight: var(--fw-bold); }
.un-more:hover { border-color: var(--c-primary); color: var(--c-text); }
.un-more:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* up-next list: small thumbnail + text rows (YouTube-like); a grid under the player on tablets */
.un-list { display: grid; gap: var(--sp-3); }
.un { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: var(--sp-3); align-items: start; color: inherit; border-radius: var(--r-md); }
.un-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); }
.un-thumb picture, .un-thumb img { width: 100%; height: 100%; object-fit: cover; }
.un-thumb img { transition: transform var(--dur-3) var(--ease); }
.un-dur { position: absolute; bottom: 4px; inset-inline-end: 4px; padding: 0 5px; border-radius: var(--r-xs); background: var(--c-ov-a80); color: var(--c-text); font-size: var(--fs-11); font-weight: var(--fw-bold); line-height: 18px; }
.un-soon { position: absolute; top: 4px; inset-inline-start: 4px; padding: 0 6px; border-radius: var(--r-xs); background: var(--c-bg-a75); color: var(--c-text); font-size: var(--fs-11); font-weight: var(--fw-bold); line-height: 18px; }
.un.is-soon .un-thumb img { opacity: .6; }
.un-body { display: grid; gap: 2px; min-width: 0; }
.un-title { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--c-text); line-height: var(--lh-title); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.un-meta { font-size: var(--fs-12); color: var(--c-text-body); line-height: var(--lh-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .un:hover .un-title { color: var(--c-primary); } .un:hover .un-thumb img { transform: scale(1.05); } }
@media (min-width: 600px) and (max-width: 1099px) { .un-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--gap); } }
.watch.is-theater .un-list { gap: var(--sp-3); }

/* control-bar tooltips (label + shortcut). Buttons before the spacer anchor left, after it anchor right (never clipped). */
.p-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2;
  padding: 4px var(--sp-2); border-radius: var(--r-xs); background: var(--c-ov-a92); border: 1px solid var(--c-white-a10);
  font: var(--fw-semi) var(--fs-12)/1.4 var(--font); color: var(--c-text); white-space: nowrap;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
html[dir="rtl"] .p-btn[data-tip]::after { direction: rtl; }
.p-spacer ~ .p-btn[data-tip]::after { left: auto; right: 0; }
@media (hover: hover) { .p-btn[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: 300ms; } }
.p-btn[data-tip]:focus-visible::after { opacity: 1; transform: none; }
.player.is-idle .p-btn[data-tip]::after, .p-btn[aria-expanded="true"]::after { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .watch .stage::before, .p-btn[data-tip]::after { transition: none; } }

/* =====================================================================
   CINEMA FLOW (films, programs, drama, documentaries) — one details page:
   artwork + details + «شاهد». Playing: the player sits at the TOP of the
   same page (full content width, 16:9, never taller than the screen), and
   the details / episodes / «قد يعجبك أيضاً» stay below it. Header as usual.
   ===================================================================== */
.watch.is-cinema, .watch.is-cinema.is-theater { padding-top: 0; display: flex; flex-direction: column; }
.watch.is-cinema .watch-grid { display: none; order: -1; }
.watch.is-cinema .p-info, .watch.is-cinema .watch-side { display: none; }
.watch.is-cinema .stage::before { display: none; }
.watch.is-cinema .p-resume { display: none; }
.cin-hero .hero-copy { max-width: 640px; }
.cin-hero .hero-ctas .btn-primary { min-width: 200px; justify-content: center; }
.cin-hero .hero-ctas .btn-primary[disabled] { opacity: .6; cursor: default; }
.watch.is-cinema.is-playing .watch-grid { display: block; padding-top: var(--header-h); }
@media (min-width: 768px) {
  .watch.is-cinema.is-playing .watch-grid { padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) 0; }
  .watch.is-cinema.is-playing .stage-inner { width: min(100%, calc((100vh - var(--header-h) - 40px) * 16 / 9)); }
}
/* while playing, the artwork has become the player: the details below are a calm block (no backdrop, no button) */
.watch.is-playing .cin-hero { height: auto; display: block; }
.watch.is-playing .cin-hero .hero-media, .watch.is-playing .cin-hero .hero-scrim, .watch.is-playing .cin-hero .hero-ctas { display: none; }
.watch.is-playing .cin-hero .hero-body { margin-top: 0; padding-top: var(--sp-6); padding-bottom: 0; }
.watch.is-playing .cin-hero .hero-title { font-size: clamp(24px, 1.4vw + 16px, 34px); text-shadow: none; }
.watch.is-playing .cin-hero .hero-sub { text-shadow: none; }

/* ---------- PROGRAM page: calm details block + one episode row ---------- */
.sd { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-7); }
.sd-bg { position: absolute; inset: 0; z-index: -1; background: var(--c-bg); }
.sd-bg img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(48px) brightness(.32) saturate(1.15); }
.sd-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--c-bg-a55), var(--c-bg) 100%); }
.sd-in { display: grid; gap: var(--sp-6); align-items: center; }
.sd-art { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); box-shadow: var(--sh-card); }
.sd-art picture, .sd-art img { width: 100%; height: 100%; object-fit: cover; }
.sd-info { display: grid; justify-items: start; min-width: 0; }
.sd-title { font-size: var(--fs-hero); line-height: 1.32; text-wrap: balance; color: var(--c-text); }
.sd-title:lang(en) { line-height: 1.2; }
.sd-now { display: none; margin-top: var(--sp-2); font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--c-text-2); line-height: 1.55; }
.sd-desc { margin-top: var(--sp-3); max-width: 640px; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--c-text-2); }
.sd .hero-ctas { margin-top: var(--sp-5); }
.sd .hero-ctas .btn-primary { min-width: 200px; justify-content: center; }
@media (min-width: 900px) { .sd-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); } }
@media (max-width: 767px) { .sd { padding-top: calc(var(--header-h) + var(--sp-4)); } }
/* playing: the player is above; the details follow without the backdrop, the art or the button */
.watch.is-playing .sd { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.watch.is-playing .sd-bg, .watch.is-playing .sd-art, .watch.is-playing .sd .hero-ctas { display: none; }
.watch.is-playing .sd-in { grid-template-columns: minmax(0, 1fr); }
.watch.is-playing .sd-title { font-size: clamp(24px, 1.4vw + 16px, 34px); }
.watch.is-playing .sd-now { display: block; }
/* one horizontal row of uniform episode cards (drag / swipe / arrows — the same rail as the home rows) */
.sd + .sd-eps { margin-top: var(--sp-2); }
.eps-rail { --card-w: 280px; }
@media (max-width: 599px) { .eps-rail { --card-w: calc((100vw - 2 * var(--gutter)) * .72); } }
.epc { display: grid; gap: 4px; color: inherit; border-radius: var(--r-md); }
.epc-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); margin-bottom: var(--sp-2); }
.epc-thumb picture, .epc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.epc-thumb img { transition: transform var(--dur-3) var(--ease); }
.epc.is-soon .epc-thumb img { opacity: .6; }
.epc.is-current .epc-thumb { box-shadow: 0 0 0 2px var(--c-primary); }
.epc-name { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epc.is-current .epc-name { color: var(--c-primary); }
.epc-sub { font-size: var(--fs-13); color: var(--c-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epc:focus-visible { outline: none; }
.epc:focus-visible .epc-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .epc:hover .epc-thumb img { transform: scale(1.04); } .epc:hover .epc-name { color: var(--c-primary); } }

/* episodes drawer inside the player (inline-end side) */
.p-drawer { position: absolute; inset: 0; z-index: 10; }
.p-drawer-scrim { position: absolute; inset: 0; background: var(--c-black-a50); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.p-drawer-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(420px, 90%); display: flex; flex-direction: column;
  background: var(--c-ov-a92); border-inline-start: 1px solid var(--c-line); box-shadow: var(--sh-pop);
  transform: translateX(100%); transition: transform var(--dur-3) var(--ease);
}
html[dir="rtl"] .p-drawer-panel { transform: translateX(-100%); }
.p-drawer.is-open .p-drawer-scrim { opacity: 1; }
.p-drawer.is-open .p-drawer-panel { transform: none; }
.p-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.p-drawer-head h2 { font-size: var(--fs-18); }
.p-drawer-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-3) var(--sp-4); scrollbar-width: thin; }
.p-eps[aria-expanded="true"] { color: var(--c-primary); }

/* episode list (details view, drawer, watch-page side): thumbnail + title, duration, progress, current highlighted */
.epl-wrap { display: grid; gap: var(--sp-3); }
.epl { display: grid; gap: var(--sp-2); scrollbar-width: thin; }
.epi { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding: var(--sp-2); border-radius: var(--r-md); color: inherit; }
.epi-body { display: grid; gap: 6px; min-width: 0; align-content: center; justify-items: start; }
.epi-dur { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12); color: var(--c-text-body); }
.epi-dur svg { width: 12px; height: 12px; color: var(--c-primary); }
.epi-prog { display: block; width: min(100%, 180px); height: 3px; border-radius: var(--r-pill); background: var(--c-white-a16); overflow: hidden; }
.epi-prog i { display: block; height: 100%; background: var(--c-primary); transform-origin: right center; transform: scaleX(var(--p, 0)); }
[dir="ltr"] .epi-prog i { transform-origin: left center; }
.epi:hover { background: var(--c-white-a06); }
.epi.is-current { background: var(--c-primary-a20); box-shadow: inset 0 0 0 1px var(--c-primary-a55); }
.epi:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.epi-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); }
.epi-thumb picture, .epi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.epi.is-soon .epi-thumb img { opacity: .6; }
.epi-now { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c-ov-a45); color: var(--c-primary); }
.epi-now svg { width: 22px; height: 22px; }
.epi-title { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--c-text); line-height: var(--lh-title); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.epl-season-one { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--c-text-body); }
.epl-season { justify-self: start; }
.epl-wrap.is-vertical .epl { max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.p-drawer .epl-wrap.is-vertical .epl { max-height: none; overflow: visible; padding: 0; }
/* details view: a vertical list on desktop, a horizontal swipe row on phones */
.cin-eps .epl-wrap { padding-inline: var(--pad); }
/* details page (desktop): a tidy list — at most 2 columns, each row = 220px thumbnail + its text right next to it */
@media (min-width: 768px) {
  .epl-wrap.is-adaptive { max-width: 1200px; }
  .epl-wrap.is-adaptive .epl { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2) var(--sp-6); max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
  .epl-wrap.is-adaptive .epi { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (min-width: 1100px) { .epl-wrap.is-adaptive .epl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .epl-wrap.is-adaptive .epl { grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--sp-1); }
  .epl-wrap.is-adaptive .epl > li { scroll-snap-align: start; }
  .epl-wrap.is-adaptive .epi { grid-template-columns: 1fr; align-items: start; }
}

/* end of an episode: «الحلقة التالية خلال 5» with play now / cancel */
.p-next { width: min(360px, calc(100% - 24px)); grid-template-columns: 120px minmax(0, 1fr); }
.p-next-body { display: grid; gap: 2px; min-width: 0; }
.p-next-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.p-next .p-next-cancel { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--c-white-a22); color: var(--c-text-2); font-size: var(--fs-13); font-weight: var(--fw-bold); }
.p-next .p-next-cancel:hover { border-color: var(--c-text-2); color: var(--c-text); }
.p-next-bar.run { transition: transform 5s linear; transform: scaleX(0); }
.p-next a:focus-visible, .p-next button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* audio only: the artwork with a slow drift and a soft glow instead of the picture */
.p-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--c-player); display: grid; place-items: center; }
.p-art-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) brightness(.42) saturate(1.1); }
.p-art-glow { position: absolute; width: 62%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: radial-gradient(closest-side, var(--c-primary-a55), var(--c-ov-a0)); transform: scale(1.25); animation: art-glow 5s ease-in-out infinite; }
.p-art-card { position: relative; width: min(52%, 640px); aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-card); }
.p-art-card img { width: 100%; height: 100%; object-fit: cover; animation: art-drift 26s ease-in-out infinite alternate; }
.player:not([data-state="playing"]) .p-art-card img, .player:not([data-state="playing"]) .p-art-glow { animation-play-state: paused; }
@keyframes art-drift { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes art-glow { 0%, 100% { opacity: .45; transform: scale(1.18); } 50% { opacity: .95; transform: scale(1.32); } }
.p-audio[aria-pressed="true"] { color: var(--c-primary); }
.p-audio[aria-pressed="true"]::before { opacity: 1; }

/* side panels of the watch page: poem text, chapters, the program's episodes */
.side-title { font-size: var(--fs-18); margin-bottom: var(--sp-3); }
.p-poem, .p-chapters, .side-eps { margin-bottom: var(--sp-6); }
.p-poem { padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.p-poem .side-title { padding-inline: var(--sp-2); }
.p-poem-body { max-height: min(52vh, 520px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; text-align: center; font-size: var(--fs-16); font-weight: var(--fw-semi); line-height: 2.1; color: var(--c-text); padding-inline: var(--sp-2); }
.p-poem-body p.gap { height: .8em; }
.p-poem-more { color: var(--c-text-dim); }
.p-poem-body:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-xs); }
.chap-list { display: grid; gap: 2px; }
.chap { display: flex; align-items: baseline; gap: var(--sp-3); width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); text-align: start; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-semi); }
.chap:hover { background: var(--c-white-a06); }
.chap[aria-current="true"] { background: var(--c-primary-a20); color: var(--c-text); }
.chap:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.chap-t { flex: none; min-width: 44px; direction: ltr; font-size: var(--fs-13); color: var(--c-text-body); }
.chap[aria-current="true"] .chap-t { color: var(--c-primary); }
.p-chaps { position: absolute; inset: 0; pointer-events: none; }
.p-chaps i { position: absolute; top: 50%; width: 3px; height: 8px; margin: -4px 0 0 -1.5px; border-radius: 1px; background: var(--c-player); }
@media (prefers-reduced-motion: reduce) {
  .p-art-card img, .p-art-glow { animation: none; }
  .p-drawer-scrim, .p-drawer-panel { transition: none; }
}

/* =====================================================================
   LIVE PAGE (live.html): section page (header band + channel row) or player view (player, details, channel row)
   ===================================================================== */
/* player view: the player at full content width (never taller than the screen), the channel's details right under it,
   then «القنوات» as one horizontal row */
.live-layout { display: block; }
.live-main { min-width: 0; }
@media (max-width: 767px) { .live-info { padding-inline: var(--gutter); } }
@media (min-width: 768px) { .live-main .player { width: min(100%, calc((100vh - var(--header-h) - 40px) * 16 / 9)); } }
.live-poster {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); padding: var(--sp-4);
  background: radial-gradient(70% 70% at 50% 45%, var(--c-surface), var(--c-player)); text-align: center;
  transition: opacity var(--dur-3) var(--ease);
}
.player.started .live-poster { opacity: 0; pointer-events: none; }
.live-art { position: absolute; inset: 0; z-index: -1; }
.live-art picture, .live-art img { width: 100%; height: 100%; object-fit: cover; }
.live-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, var(--c-ov-a45), var(--c-ov-a80)); }
.live-poster { isolation: isolate; }
.live-name { font-size: clamp(16px, 1vw + 12px, 22px); font-weight: var(--fw-bold); color: var(--c-text); line-height: var(--lh-title); }
.p-livebadge { position: absolute; z-index: 6; top: var(--sp-3); inset-inline-start: var(--sp-3); }
.p-live-state { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--c-text-2); padding-inline: var(--sp-2); white-space: nowrap; }
.live-info { padding-top: var(--sp-5); }
.live-info h1 { font-size: clamp(22px, 1.2vw + 16px, 30px); }
.p-src { color: var(--c-text-2); }
.p-src:hover { color: var(--c-primary); }

.live-chs { margin-top: var(--sp-7); }
.live-chs .ch[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); }
.live-chs .ch[aria-pressed="true"] .ch-play { background: var(--c-text); }
body.is-sec .live-chs { margin-top: var(--sp-4); }


/* ---------- PHONES (< 768px). Desktop unchanged. ---------- */
@media (max-width: 767px) {
  .p-src { display: inline-flex; align-items: center; min-height: 44px; }
  .un-more { min-height: 44px; }
  .p-next .p-next-go, .p-next .p-next-cancel { min-height: 44px; }
  .p-set-q { font-size: 10px; }
  .crumbs a { min-height: 44px; min-width: 44px; justify-content: center; }
  .m-range { height: 44px; }
  .un-dur, .un-soon { font-size: var(--fs-12); }
}
@media (max-width: 599px) {
  .p-vol { display: none; }                          /* phones: hardware volume */
  .p-seek { height: 44px; }
  .p-controls { padding-top: var(--sp-4); }
  /* settings / subtitles: a bottom sheet (also inside fullscreen, which is the fixed containing block there) */
  .p-menu { position: fixed; z-index: calc(var(--z-tabbar) + 2); inset: auto 0 0; width: 100%; max-height: min(70vh, 460px);
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(16px); transform-origin: bottom center; }
  .p-menu [role="menuitemradio"] { min-height: 48px; }
  .p-menu { background: var(--c-surface-2); }
  /* the player (and its stage) form stacking contexts: lift them while the sheet is open so it covers the page + tab bar */
  .stage:has(.p-menu.is-open), .player:has(.p-menu.is-open) { position: relative; z-index: calc(var(--z-tabbar) + 2); }
}
@media (max-width: 400px) { #btnPip { display: none !important; } }