/* ==========================================================================
   VIDEO PAGE - CRITICAL ABOVE-THE-FOLD STYLES
   Matches classes/IDs in your video page markup
   ========================================================================== */

/* ---- Tokens (selaras dengan file CSS sebelumnya) ----------------------- */
:root{
  --ubc-blue:#002145;
  --link-blue:#0a58ca;
  --text:#0f172a;
  --bg:#ffffff;
  --border:#e2e8f0;
  --muted:#334155;
  --shadow-md:0 12px 24px rgba(15,23,42,.18);
  --radius:12px;
}

html{box-sizing:border-box;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.5;color:var(--text);background:var(--bg)}

/* a11y */
a{color:var(--link-blue);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
:focus{outline:2px solid #94c0ff;outline-offset:2px}
.visuallyhidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.is-hidden{display:none!important}

/* Containers */
.container__outer{width:100%}
.container__inner{max-width:1200px;margin:0 auto;padding:16px}
.page-wrapper{min-height:100vh;display:flex;flex-direction:column}
.page-wrapper__inner{flex:1}

/* ---- Sticky Header / Nav ------------------------------------------------ */
.page-header{position:sticky;top:0;z-index:1000;background:var(--ubc-blue);color:#fff;padding:12px 0}
.page-header a{color:#fff}
.page-header__buttons{display:flex;gap:8px;padding:0 16px}
.page-header__buttons button{background:transparent;border:0;color:#fff;padding:8px;cursor:pointer}
.page-header__brand{display:flex;align-items:center;padding:0 16px}
.page-header__nav-items--wrapper{overflow-x:auto}
.page-header__nav-items{display:flex;align-items:center;list-style:none;gap:8px;margin:0;padding:8px 16px}
.nav-item{position:relative}
.nav-item__link,.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:6px;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer}
.nav-item__link:hover{background:rgba(255,255,255,.1);text-decoration:none}

/* Dropdown base (for Search/Shows/Explore) */
.nav-item .dropdown{display:none;position:absolute;left:0;top:calc(100% + 8px);background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:var(--radius);padding:16px;min-width:260px;z-index:1001}
.nav-item .dropdown.show{display:block}
.nav-section-title{opacity:.8;padding:0 8px;font-size:14px;letter-spacing:.02em}

/* ---- Buttons quick styles ---------------------------------------------- */
.btn{background:#e2e8f0;border:1px solid #cbd5e1;color:var(--text)}
.btn.btn--fill--blue{background:var(--link-blue);border-color:var(--link-blue);color:#fff}
.btn.btn--ghost--blue{background:transparent;border-color:var(--link-blue);color:var(--link-blue)}
.btn--fill--ubc-blue-white{background:var(--ubc-blue);border-color:var(--ubc-blue);color:#fff}
.btn--fill--white{background:#fff;color:var(--text);border-color:var(--border)}
.btn--close{background:transparent;border:0;cursor:pointer}

/* ---- Video Player (hero section) --------------------------------------- */
.video-player{position:relative;color:#fff;border-radius:16px;overflow:hidden;margin:16px auto}
.video-player__inner{
  display:grid;grid-template-columns:1.2fr 1fr;gap:24px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.35)),var(--bg, #111);
  backdrop-filter:blur(3px);padding:24px
}
.video-player__iframe-wrapper{aspect-ratio:16/9;background:#0b1220;border-radius:12px;overflow:hidden}
.floating-player{position:relative;width:100%;height:100%}
.video-player__iframe{width:100%;height:100%;display:block;border:0}
.video-player__info{display:flex;flex-direction:column;gap:10px}
.video-player__title{margin:.2em 0;font-size:clamp(20px,2.4vw,34px);line-height:1.2}
.video-player__summary{opacity:.9;font-size:14px}
.video-player__description{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:10px;border-radius:8px;font-size:14px;color:#f8fafc}
.video-player__metrics{display:flex;gap:16px;flex-wrap:wrap;opacity:.95;font-size:14px}

/* Shop strip inside hero */
.video-player__shop{margin-top:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:10px;border-radius:8px;color:#fff}
.video-player__shop-links{display:flex;gap:12px;align-items:center;list-style:none;padding:0;margin:8px 0 0}
.video-player__shop-links__option__link{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#fff;color:var(--text);border:1px solid var(--border)}

/* Watch / My list placeholders */
.btn--mylist--placeholder,
.btn--watch-related-placeholder{min-height:40px}

/* Continuous-play toggle */
.video-player__continuous-play-control__toggle{display:inline-block;width:42px;height:24px;border-radius:999px;background:#e2e8f0;position:relative;cursor:pointer;border:1px solid #cbd5e1}
.video-player__continuous-play-control__toggle::after{content:"";position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;transition:transform .2s}
.video-player__continuous-play-control__toggle.is-on{background:#10b981;border-color:#10b981}
.video-player__continuous-play-control__toggle.is-on::after{transform:translateX(18px)}

/* Social share */
.social-share__wrapper{display:flex;align-items:center;gap:8px}
.social-share__links{display:flex;gap:8px;align-items:center;list-style:none;padding:0;margin:0}
.social-share__link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text)}
.social-share__link:hover{filter:brightness(1.03)}

/* ---- Related content preview area (above the fold start) --------------- */
.theme-light-dark{background:#f8fafc;color:var(--text);border-radius:16px;padding:16px}
.related-content__learn-more__items{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0}
.related-content__learn-more__item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr}
.related-content__learn-more__item__image-link{display:block;position:relative}
.related-content__learn-more__text{padding:10px 12px 16px}

/* ---- Modal base (Sign-in, Embed, Report Problem) ----------------------- */
.modal-window{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.6);z-index:2000}
.modal-window.show{display:flex}
.modal-window__dialog{background:#fff;color:var(--text);width:min(840px,92vw);border-radius:12px;border:1px solid var(--border);box-shadow:0 24px 48px rgba(2,6,23,.3);position:relative}
.modal-window__dialog--scrollable{max-height:90vh;overflow:auto}
.modal-window__body{padding:20px}
.modal-window__topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 10px;border-bottom:1px solid var(--border)}
.modal-window__topbar__title{margin:0;font-size:18px}
.close-modal{position:absolute;top:8px;right:8px}

/* ---- Footer skeleton (first paint) ------------------------------------- */
.footer--outer{background:#f1f5f9;color:var(--text);border-top:1px solid var(--border);margin-top:24px}
.footer--inner{max-width:1200px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.footer__section-title{margin:0 0 8px;font-size:16px}
.footer__links{list-style:none;padding:0;margin:0}
.footer__link{display:inline-block;padding:6px 0;color:var(--link-blue)}
.footer__legal{border-top:1px solid var(--border);padding:12px 16px;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer__legal-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- Responsive tweaks -------------------------------------------------- */
@media (max-width:1024px){
  .video-player__inner{grid-template-columns:1fr}
  .footer--inner{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .page-header__nav-items{gap:4px}
  .related-content__learn-more__items{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .related-content__learn-more__items{grid-template-columns:1fr}
}

/* ---- Dark scheme (optional – mengikuti tema) --------------------------- */
@media (prefers-color-scheme: dark){
  :root{ color-scheme:dark; }
  body{ background:#0b1220; color:#e5e7eb; }
  .theme-light-dark{ background:#111827; }
  .related-content__learn-more__item{ background:#0f172a; border-color:#1f2937; }
  .video-player__description{ color:#e5e7eb; }
  .footer--outer{ background:#111827; border-top-color:#1f2937; }
  .footer__link{ color:#7db0ff; }
}