/* ── Shared trailer player component ──────────────────────────────────────── */
.trailer-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}

/* Header bar — single flex row: [title] [tag chips ...] */
.tp-header-bar{position:absolute;top:24px;left:12px;right:54px;z-index:8;display:flex;flex-direction:row;align-items:center;gap:7px;pointer-events:none;overflow:hidden}

/* ── Video selector dropdown ─────────────────────────────────────────────────── */
.video-selector{position:absolute;bottom:52px;right:12px;z-index:11;pointer-events:auto}
.vs-btn{background:rgba(0,0,0,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;font-family:inherit;transition:background .15s}
.vs-btn:hover{background:rgba(0,0,0,.88)}
.vs-arrow{font-size:10px;opacity:.7}
.vs-menu{position:absolute;bottom:calc(100% + 6px);right:0;background:rgba(8,8,8,.96);border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden;min-width:190px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.vs-menu.vs-open{display:block}
.vs-item{display:block;width:100%;padding:10px 14px;text-align:left;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;white-space:normal;font-family:inherit}
.vs-item:last-child{border-bottom:none}
.vs-item:hover{background:rgba(255,255,255,.07);color:#fff}
.vs-item.vs-active{color:#60a5fa;background:rgba(59,91,219,.12)}
.vs-item.vs-active::before{content:'▶ ';font-size:10px}
.vs-item-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-item-synopsis{display:block;font-size:10px;font-weight:400;color:rgba(255,255,255,.4);margin-top:2px;line-height:1.35}

/* Title pill (flex child, never shrinks below its natural size) */
.trailer-title-ov{flex-shrink:0;max-width:220px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);padding:5px 12px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Logo artwork overlay — replaces text title when a title-treatment image is available */
.trailer-logo-ov{flex-shrink:0;max-height:32px;max-width:180px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}

/* Close button overlay */
.trailer-close-ov{position:absolute;top:10px;right:10px;z-index:12;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);border:none;color:rgba(255,255,255,.8);font-size:20px;cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:background .15s,color .15s}
.trailer-close-ov:hover{background:rgba(0,0,0,.82);color:#fff}

/* Loading overlay */
.trailer-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:14px;opacity:.7;pointer-events:none}

/* Play button overlay (embedded/watch page mode) */
.trailer-play-ov{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.3);transition:background .2s}
.trailer-play-ov:hover{background:rgba(0,0,0,.12)}
.trailer-play-ov svg{width:70px;height:70px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}

/* Plyr theme — shared across all contexts */
.plyr{--plyr-color-main:#e50914;--plyr-range-fill-background:#e50914;--plyr-video-control-color:#fff;--plyr-video-control-color-hover:#fff;--plyr-video-controls-background:linear-gradient(transparent,rgba(0,0,0,.72));--plyr-font-family:system-ui,-apple-system,'Segoe UI',sans-serif;border-radius:0;overflow:hidden}
.plyr--full-ui input[type=range]{color:#e50914}
/* Larger Plyr play-large overlay button — explicit flex centering fixes icon alignment */
.plyr__control--overlaid{width:82px !important;height:82px !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;--plyr-control-icon-size:28px}
/* Larger embedded play overlay button (watch page) */
.trailer-play-ov svg{width:90px;height:90px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
/* Smaller on narrow screens — the 90px circle overwhelms a phone-width player.
   Bumped up from 52px (2026-09-18) — was reading as too small on mobile. */
@media(max-width:640px){
  .trailer-play-ov svg{width:68px;height:68px}
}

/* ── End card ──────────────────────────────────────────────────────────────── */
@keyframes tp-fade-in{from{opacity:0}to{opacity:1}}
.trailer-endcard{position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.87);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 28px;animation:tp-fade-in .35s ease;text-align:center}
.ec-poster{max-width:260px;width:55%;height:auto;border-radius:7px;box-shadow:0 6px 22px rgba(0,0,0,.55);aspect-ratio:16/9;object-fit:cover;flex-shrink:0}
.ec-title{color:#fff;font-size:clamp(17px,2.64vw,26px);font-weight:800;letter-spacing:-.2px;max-width:90%;line-height:1.25}
.ec-year{color:rgba(255,255,255,.5);font-size:16px}
.ec-actions{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.ec-watch{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;background:#e50914;color:#fff;border-radius:6px;font-size:18px;font-weight:700;text-decoration:none;transition:background .15s,transform .15s;white-space:nowrap}
.ec-watch:hover{background:#c50812;transform:scale(1.04)}
.ec-watch svg{flex-shrink:0}
.ec-replay{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:rgba(255,255,255,.1);color:#fff;border-radius:6px;font-size:17px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.18);transition:background .15s;white-space:nowrap}
.ec-replay:hover{background:rgba(255,255,255,.22)}
.ec-tag{color:rgba(255,255,255,.58);font-size:16px;font-style:italic;text-align:center;max-width:88%;line-height:1.45;margin-top:-2px}
.ec-moods{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:500px;margin-top:2px}
.ec-mood{padding:4px 11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:20px;color:rgba(255,255,255,.68);font-size:14px;font-weight:500;white-space:nowrap;text-transform:capitalize}

/* ── Progress CTA bar ──────────────────────────────────────────────────────── */
.trailer-cta-bar{position:absolute;left:0;right:0;bottom:44px;z-index:9;display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(10,10,10,.88);backdrop-filter:blur(4px);border-top:1px solid rgba(229,9,20,.35);opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.trailer-cta-bar.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.cta-heart{color:#e50914;font-size:15px;flex-shrink:0}
/* Text + Watch button cluster together on the left (not flex:1 — that used to
   shove the button to the far right, under the video-selector dropdown). Text
   shrinks with an ellipsis first on narrow screens; the button never does. */
.cta-text{color:rgba(255,255,255,.8);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cta-watch-btn{display:inline-flex;align-items:center;padding:5px 13px;background:#e50914;color:#fff;border-radius:4px;font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none;transition:background .15s;flex-shrink:0}
.cta-watch-btn:hover{background:#c50812}
.cta-dismiss{background:none;border:none;color:rgba(255,255,255,.4);font-size:20px;cursor:pointer;line-height:1;padding:0 4px;flex-shrink:0;margin-left:auto;transition:color .15s}
.cta-dismiss:hover{color:#fff}

/* ── Thumbnail meta overlay (shown before play, over poster) ───────────────── */
.tp-thumb-meta{position:absolute;bottom:60px;left:12px;z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:5px;transition:opacity .3s ease}
.tp-thumb-meta.tp-hidden{opacity:0}
.tp-thumb-info{color:rgba(255,255,255,.92);font-size:13px;font-weight:700;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);padding:4px 10px;border-radius:4px;white-space:nowrap;letter-spacing:.1px}
.tp-thumb-moods{display:flex;flex-wrap:wrap;gap:5px}
.tp-mood-chip{padding:3px 9px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);border-radius:14px;color:rgba(255,255,255,.82);font-size:11px;font-weight:600;white-space:nowrap;text-transform:capitalize;letter-spacing:.1px}

/* ── Tags row (flex child — chips appear simultaneously next to title) ──────── */
.tp-tags-row{display:flex;flex-direction:row;align-items:center;gap:5px;overflow:hidden;min-width:0;flex-wrap:nowrap}
@keyframes tp-chip-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.tp-tag-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.05px;backdrop-filter:blur(4px);animation:tp-chip-in .3s ease forwards;line-height:1.35;flex-shrink:0}

/* P1 short description — italic, subtle */
.tp-tag-chip--tag{background:rgba(0,0,0,.65);color:rgba(255,255,255,.88);font-style:italic;font-weight:500}
/* Content label — indigo/blue */
.tp-tag-chip--label{background:rgba(79,70,229,.9);color:#fff}
/* "Watched By" prefix — deep amber-brown, distinct from but paired with viewership chips */
.tp-tag-chip--watched-by{background:rgba(120,53,15,.92);color:rgba(255,255,255,.92);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:4px 8px}
/* Viewership chip — amber */
.tp-tag-chip--viewership{background:rgba(217,119,6,.92);color:#fff}

/* ── Tilt hint ─────────────────────────────────────────────────────────────── */
.tilt-hint{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);z-index:8;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);color:rgba(255,255,255,.9);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s;display:none;letter-spacing:.2px}
@media(max-width:600px) and (orientation:portrait){.tilt-hint{display:block}}
.tilt-hint.show{opacity:1}

/* ── Desktop / tablet — 20% larger metadata fonts (≥768px) ───────────────────
   Gated on min-height too (not just min-width) so a phone tilted to landscape
   (e.g. 812×375) doesn't get misclassified as a tablet/desktop — real tablets
   and desktops always have a viewport height well above a landscape phone's. */
@media(min-width:768px) and (min-height:500px){
  .trailer-title-ov{font-size:16px;padding:6px 14px}
  .trailer-logo-ov{max-height:42px;max-width:220px}
  .tp-tag-chip{font-size:14px;padding:5px 12px}
  .tp-tag-chip--watched-by{font-size:12px;padding:5px 10px}
  .tp-thumb-info{font-size:16px;padding:5px 12px}
  .tp-mood-chip{font-size:13px;padding:4px 11px}
}

/* ── Mobile responsive ─────────────────────────────────────────────────────── */
/* Also applies by (max-height:500px) — not width alone — so a landscape phone
   (short viewport, wide width) keeps compact chip sizing instead of falling
   through to the desktop/tablet rules above just because it got wider. */
@media(max-width:600px), (max-height:500px){
  .tp-thumb-info{font-size:11px;padding:3px 8px}
  .tp-mood-chip{font-size:10px;padding:2px 7px}
  .tp-tag-chip{font-size:10px;padding:3px 8px}
  .tp-tag-chip--watched-by{font-size:9px;padding:3px 6px}
  .trailer-title-ov{max-width:170px;font-size:15px;padding:6px 13px}
  .trailer-logo-ov{max-height:24px;max-width:130px}
  .tp-header-bar{right:46px}
  .vs-btn{font-size:14px;padding:7px 14px}
  .vs-arrow{font-size:11px}
  /* watch.php mobile: pre-play overlay (year/runtime + mood chips) was congested
     next to the play button and video-selector dropdown — hide it on start,
     leaving just the play button + dropdown. #player-wrap scopes this to
     watch.php's embedded player only (discover.php's modal doesn't use that id). */
  #player-wrap .tp-thumb-meta{display:none}
  .trailer-endcard{gap:5px;padding:10px 14px}
  .ec-poster{width:44%;max-width:150px}
  .ec-title{font-size:clamp(13px,3.8vw,17px)}
  .ec-year{font-size:12px}
  .ec-tag{font-size:12px;margin-top:0}
  .ec-moods{gap:4px;margin-top:0;max-width:100%}
  .ec-mood{font-size:11px;padding:3px 8px}
  .ec-actions{gap:7px;margin-top:3px}
  .ec-watch{font-size:13px;padding:8px 14px}
  .ec-watch svg{width:15px;height:15px}
  .ec-replay{font-size:12px;padding:7px 12px}
}