/* TH Trending player: one video player for Live TV, free films and film pages.
   Brand tokens are repeated here so the player looks the same on every page. */
.thp{
  --thp-bulb:#e50914; --thp-bulb-hi:#ff2a37; --thp-ink:#ffffff; --thp-pearl:#ffffff; --thp-dust:#bdbdbd; --thp-ash:#8c8c8c;
  --thp-panel:rgba(16,16,16,.95); --thp-seam:rgba(255,255,255,.14); --thp-live:#e50914;
  --thp-sub-scale:1;
  position:relative; width:100%; height:100%; background:#000; color:var(--thp-pearl); overflow:hidden; isolation:isolate;
  font:500 14px/1.3 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; outline:none
}
.thp *,.thp *::before,.thp *::after{ box-sizing:border-box }
.thp video{ position:absolute; inset:0; width:100%; height:100%; display:block; background:#000; object-fit:contain }
.thp button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer }
.thp :focus-visible{ outline:2px solid var(--thp-bulb); outline-offset:2px; border-radius:6px }
.thp svg{ display:block }

/* captions */
.thp video::cue{ background:rgba(0,0,0,.72); color:#fff; font-family:"Archivo", system-ui, sans-serif; font-size:calc(100% * var(--thp-sub-scale)); line-height:1.35 }
.thp[data-subsize="s"]{ --thp-sub-scale:.8 } .thp[data-subsize="l"]{ --thp-sub-scale:1.35 }

/* gradients behind the controls */
.thp-shade{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 22%, transparent 58%, rgba(0,0,0,.85) 100%) }
.thp.ui .thp-shade,.thp.paused .thp-shade{ opacity:1 }

/* top: title */
.thp-top{ position:absolute; z-index:3; left:0; right:0; top:0; display:flex; align-items:flex-start; gap:12px; padding:14px 16px; opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s; pointer-events:none }
.thp.ui .thp-top,.thp.paused .thp-top{ opacity:1; transform:none }
.thp-ttl{ min-width:0 }
.thp-ttl b{ display:block; font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.6) }
.thp-ttl span{ display:block; font-size:12.5px; color:var(--thp-dust); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px }
.thp-livebadge{ flex:none; display:none; align-items:center; gap:6px; padding:5px 8px 4px; border-radius:4px; background:var(--thp-live); color:#fff; font:700 11px/1 "Archivo", system-ui, sans-serif; letter-spacing:.12em }
.thp-livebadge::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff }
.thp.live .thp-livebadge{ display:inline-flex }

/* center: big play, spinner, flash */
.thp-center{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none }
.thp-big{ width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.55); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s; pointer-events:none }
.thp-big svg{ width:34px; height:34px }
.thp.paused:not(.loading) .thp-big{ opacity:1; transform:none; pointer-events:auto }
.thp-spin{ width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:var(--thp-bulb); animation:thpSpin .8s linear infinite; display:none }
.thp.loading .thp-spin{ display:block }
@keyframes thpSpin{ to{ transform:rotate(360deg) } }
.thp-flash{ position:absolute; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.5); opacity:0 }
.thp-flash svg{ width:28px; height:28px }
.thp-flash.go{ animation:thpFlash .6s ease-out }
@keyframes thpFlash{ 0%{ opacity:1; transform:scale(.8) } 100%{ opacity:0; transform:scale(1.25) } }
.thp-seekhint{ position:absolute; top:50%; transform:translateY(-50%); padding:8px 12px; border-radius:20px; background:rgba(0,0,0,.6); font-weight:700; opacity:0 }
.thp-seekhint.l{ left:12% } .thp-seekhint.r{ right:12% }
.thp-seekhint.go{ animation:thpFlash .7s ease-out }

/* unmute pill (autoplay starts muted when the browser requires it) */
.thp-unmute{ position:absolute; z-index:4; left:16px; bottom:84px; display:none; align-items:center; gap:8px; padding:9px 14px 9px 11px; border-radius:22px;
  background:var(--thp-pearl); color:#140c10; font-weight:700; font-size:13.5px; box-shadow:0 8px 24px rgba(0,0,0,.45) }
.thp-unmute svg{ width:18px; height:18px }
.thp.muted-auto .thp-unmute{ display:inline-flex }

/* bottom controls */
.thp-bottom{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:0 14px 10px; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s }
.thp.ui .thp-bottom,.thp.paused .thp-bottom{ opacity:1; transform:none }
.thp:not(.ui):not(.paused){ cursor:none }
.thp-prog{ position:relative; height:22px; display:flex; align-items:center; cursor:pointer; touch-action:none }
.thp-rail{ position:relative; width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.22); transition:height .15s }
.thp-prog:hover .thp-rail,.thp-prog.drag .thp-rail{ height:6px }
.thp-buf,.thp-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:2px }
.thp-buf{ background:rgba(255,255,255,.35) }
.thp-fill{ background:var(--thp-bulb) }
.thp-knob{ position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--thp-bulb); box-shadow:0 0 0 4px rgba(229,9,20,.25); transform:scale(0); transition:transform .15s }
.thp-prog:hover .thp-knob,.thp-prog.drag .thp-knob{ transform:scale(1) }
.thp-tip{ position:absolute; bottom:22px; transform:translateX(-50%); padding:4px 7px; border-radius:4px; background:var(--thp-panel); font:600 12px/1 "Archivo", system-ui, sans-serif; white-space:nowrap; display:none }
.thp-prog:hover .thp-tip,.thp-prog.drag .thp-tip{ display:block }
.thp.live .thp-fill{ background:var(--thp-live) }
.thp.live .thp-knob{ background:var(--thp-live); box-shadow:0 0 0 4px rgba(229,9,20,.25) }
.thp.live.nodvr .thp-prog{ pointer-events:none }
.thp.live.nodvr .thp-fill{ width:100% !important }

.thp-row{ display:flex; align-items:center; gap:4px; min-height:44px }
.thp-btn{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:8px; color:var(--thp-pearl); transition:background .15s, transform .15s }
.thp-btn:hover{ background:rgba(255,255,255,.12) }
.thp-btn:active{ transform:scale(.92) }
.thp-btn svg{ width:24px; height:24px }
.thp-btn[aria-pressed="true"]{ color:var(--thp-bulb) }
.thp-btn[hidden]{ display:none }
.thp-vol{ display:flex; align-items:center }
.thp-volbar{ width:0; overflow:hidden; transition:width .2s; display:flex; align-items:center }
.thp-vol:hover .thp-volbar,.thp-vol:focus-within .thp-volbar{ width:88px }
.thp-volbar input{ -webkit-appearance:none; appearance:none; width:76px; height:4px; margin:0 6px; border-radius:2px; cursor:pointer;
  background:linear-gradient(to right, var(--thp-pearl) var(--v,100%), rgba(255,255,255,.25) var(--v,100%)) }
.thp-volbar input::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--thp-pearl); border:0 }
.thp-volbar input::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--thp-pearl); border:0 }
@media (hover:none){ .thp-volbar{ display:none } }
.thp-time{ margin-left:6px; font:600 12.5px/1 "Archivo", system-ui, sans-serif; color:var(--thp-dust); white-space:nowrap; font-variant-numeric:tabular-nums }
.thp-golive{ display:none; align-items:center; gap:7px; height:30px; margin-left:6px; padding:0 11px; border-radius:15px; font:700 11.5px/1 "Archivo", system-ui, sans-serif; letter-spacing:.12em;
  background:rgba(255,255,255,.12); color:var(--thp-pearl) }
.thp-golive::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--thp-ash) }
.thp.live .thp-golive{ display:inline-flex }
.thp.live .thp-time{ display:none }
.thp.live.atlive .thp-golive{ background:transparent; color:#fff; cursor:default }
.thp.live.atlive .thp-golive::before{ background:var(--thp-live); box-shadow:0 0 0 3px rgba(229,9,20,.3) }
.thp-spacer{ flex:1; min-width:0 }
.thp-qbadge{ font:700 10px/1 "Archivo", system-ui, sans-serif; letter-spacing:.06em; padding:3px 4px 2px; border-radius:3px; background:var(--thp-bulb); color:var(--thp-ink); margin-right:4px }
.thp-qbadge:empty{ display:none }

/* settings panel */
.thp-menu{ position:absolute; z-index:6; right:12px; bottom:66px; width:min(300px, calc(100% - 24px)); max-height:calc(100% - 90px); overflow-y:auto; padding:6px; border-radius:12px;
  background:var(--thp-panel); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 0 0 1px var(--thp-seam);
  transform-origin:bottom right; animation:thpPop .16s ease-out; overscroll-behavior:contain }
@keyframes thpPop{ from{ opacity:0; transform:scale(.96) translateY(6px) } }
.thp-mh{ display:flex; align-items:center; gap:8px; padding:8px 8px 10px; margin-bottom:4px; border-bottom:1px solid var(--thp-seam); font-weight:700 }
.thp-mh button{ width:30px; height:30px; border-radius:6px; display:grid; place-items:center }
.thp-mh button:hover{ background:rgba(255,255,255,.1) }
.thp-mi{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:42px; padding:8px 10px; border-radius:8px; text-align:left; font-size:14px }
.thp-mi:hover,.thp-mi:focus-visible{ background:rgba(255,255,255,.1) }
.thp-mi .v{ color:var(--thp-dust); font-size:13px; display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.thp-mi .v svg{ width:16px; height:16px; flex:none }
.thp-mi[aria-checked="true"]{ color:var(--thp-bulb); font-weight:700 }
.thp-mi[aria-checked="true"]::after{ content:"✓"; font-weight:800 }
.thp-mi small{ color:var(--thp-ash); font-size:12px; font-weight:500; margin-left:6px }
.thp-mnote{ margin:6px 10px 8px; font-size:12px; line-height:1.4; color:var(--thp-ash) }

/* error state */
.thp-err{ position:absolute; inset:0; z-index:5; display:none; place-items:center; padding:20px; text-align:center; background:radial-gradient(120% 95% at 70% 25%, #1a0507, #000000 72%) }
.thp.error .thp-err{ display:grid }
.thp-err h3{ margin:0 0 8px; font:800 clamp(20px, 3.2vw, 30px)/1.1 "Archivo", system-ui, sans-serif }
.thp-err p{ margin:0 auto; color:var(--thp-dust); max-width:44ch; font-size:14px; line-height:1.45 }
.thp-err .acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px }
.thp-err .acts button{ min-height:40px; padding:0 14px; border-radius:7px; font-weight:700; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px var(--thp-seam) }
.thp-err .acts button.pri{ background:var(--thp-bulb); color:var(--thp-ink); box-shadow:none }

/* small players: fewer controls */
.thp.sm .thp-skip,.thp.sm .thp-pip,.thp.sm .thp-volbar{ display:none }
.thp.sm .thp-btn{ width:36px; height:36px } .thp.sm .thp-btn svg{ width:21px; height:21px }
.thp.sm .thp-top{ padding:10px 12px } .thp.sm .thp-ttl span{ display:none }
.thp.sm .thp-big{ width:58px; height:58px } .thp.sm .thp-big svg{ width:26px; height:26px }
.thp.sm .thp-unmute{ bottom:58px; left:10px; padding:7px 11px 7px 9px; font-size:12.5px }
.thp.sm .thp-menu{ bottom:52px }
.thp:fullscreen{ width:100vw; height:100vh }
@media (prefers-reduced-motion:reduce){ .thp *,.thp *::before,.thp *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important } }