/* YouTube-like two-column layout + Theater Mode behavior */

:root{
  --fg: rgba(255,255,255,.92);
  --fg-muted: rgba(255,255,255,.7);
  --bg: #0f0f0f;
  --panel: rgba(255,255,255,.06);
  --panel-border: rgba(255,255,255,.10);

  --page-pad: 24px;
  --gap: 24px;

  --sidebar-max: 320px;
  --content-max: 1720px;

  --vjs-fg: rgba(255,255,255,.92);
  --vjs-fg-muted: rgba(255,255,255,.72);
  --vjs-bg: rgba(0,0,0,.55);
  --vjs-focus: rgba(255,255,255,.25);
  --vjs-radius: 14px;
  --vjs-control-h: 40px;
  --vjs-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Global resets removed — these break scroll on multi-page layouts.
   Original standalone page had: * { box-sizing: border-box; }
   html, body { height: 100%; } body { margin:0; font-family/bg/color }
   The host page already provides its own resets. */

.yt-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,15,15,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.yt-topbar__inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px var(--page-pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.yt-brand{
  font-weight: 600;
  letter-spacing: .2px;
}
.yt-topbar__hint{
  color: var(--fg-muted);
  font-size: 12px;
}

.yt-main{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px var(--page-pad) 40px;
}

.yt-content{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--sidebar-max));
  gap: var(--gap);
  align-items: start;
}

/* Breakpoint similar to YouTube-ish behavior: stack below ~1000px */
@media (max-width: 1000px){
  .yt-content{
    grid-template-columns: 1fr;
  }
}

.yt-player-frame{
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  background: #000;
  border-radius: var(--vjs-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

/* 16:9 responsive frame — capped at 1080p (1920x1080) */
.yt-player-frame .video-js{
  width: 100%;
  max-width: 1920px;
  max-height: 1080px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.yt-meta{
  padding: 14px 2px 0;
}
.yt-title{
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
}
.yt-subtitle{
  color: var(--fg-muted);
  font-size: 13px;
}

.yt-sidebar{
  width: 100%;
}
.yt-sidebar__box{
  max-width: var(--sidebar-max);
  margin-left: auto;
  padding: 14px;
  border-radius: var(--vjs-radius);
  border: 1px solid var(--panel-border);
  background: var(--panel);
}
@media (max-width: 1000px){
  .yt-sidebar__box{
    max-width: none;
    margin-left: 0;
  }
}

.yt-sidebar__title{
  font-weight: 600;
  margin-bottom: 10px;
}
.yt-sidebar__item{
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}
.yt-sidebar__note{
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.35;
}

/* --- Theater Mode (YouTube-like) ---
   Desktop (>1000px): player spans full width top row, sidebar sits to the right of meta row.
   Mobile: still stacks naturally (single column).
*/
.yt-content.is-theater{
  row-gap: 14px;
}

/* Desktop behavior */
@media (min-width: 1001px){
  .yt-content.is-theater{
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--sidebar-max));
    grid-template-areas:
      "player player"
      "meta sidebar";
  }

  /* Let children participate directly in the grid for theater layout */
  .yt-content.is-theater .yt-player-col{
    display: contents;
  }

  .yt-content.is-theater .yt-player-frame{ grid-area: player; }
  .yt-content.is-theater .yt-meta{
    grid-area: meta;
    margin-top: 0;
  }
  .yt-content.is-theater .yt-sidebar{
    grid-area: sidebar;
    margin-top: 0;
  }
}

/* Mobile/tablet keeps stacked single column (inherits default grid in media rule above) */
@media (max-width: 1000px){
  .yt-content.is-theater .yt-sidebar{
    margin-top: 8px;
  }
  .yt-content.is-theater .yt-sidebar__box{
    max-width: none;
  }
}

/* Theater mode frame: a bit more "cinema" */
.yt-content.is-theater .yt-player-frame{
  border-color: rgba(255,255,255,.10);
}

/* Theater mode for embedded use (movie_player.tpl) —
   .is-theater is toggled directly on .yt-player-frame (no .yt-content grid wrapper) */
.yt-player-frame.is-theater{
  position: relative;
  width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-bottom: 0;
}
@media (max-width: 991px){
  .yt-player-frame.is-theater{
    width: 100%;
    left: auto;
    transform: none;
  }
}

/* --- Minimal, modern Video.js styling (monochrome) --- */
.video-js.vjs-custom-theme{
  font-family: var(--vjs-font);
}

.video-js.vjs-custom-theme .vjs-control-bar{
  height: var(--vjs-control-h);
  background: linear-gradient(to top, var(--vjs-bg), rgba(0,0,0,0));
  padding: 6px 10px;
  gap: 6px;
  display: flex;
  align-items: center;
}
/* Time group: collapse the 6px gap between current time, divider, duration */
.video-js.vjs-custom-theme .vjs-time-divider,
.video-js.vjs-custom-theme .vjs-duration{
  margin-left: -6px;
}

/* Force all controls to vertically center; strip default padding so gap is the only spacing */
.video-js.vjs-custom-theme .vjs-control{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.video-js.vjs-custom-theme .vjs-button{
  cursor: pointer;
  width: 30px !important;
}
.video-js.vjs-custom-theme .vjs-play-control{
  width: 26px !important;
}

.video-js.vjs-custom-theme .vjs-button > .vjs-icon-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.video-js.vjs-custom-theme .vjs-button > .vjs-icon-placeholder:before,
.video-js.vjs-custom-theme .vjs-menu-button-popup .vjs-icon-placeholder:before{
  color: var(--vjs-fg);
  opacity: .9;
  text-shadow: none;
  position: relative;
  top: auto;
  line-height: 1;
  font-size: 18px;
  width: 20px;
  height: 20px;
}

/* Play button — larger than other icons */
.video-js.vjs-custom-theme .vjs-play-control .vjs-icon-placeholder:before{
  font-size: 26px;
  width: 26px;
  height: 26px;
}

/* Google Material Symbols (Outlined) icons */
.video-js.vjs-custom-theme .vjs-theater-button .vjs-icon-placeholder:before{
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat url("/custom_assets/images/theatre.svg");
  filter: brightness(0) invert(1) drop-shadow(0 0 .4px #fff) drop-shadow(0 0 .4px #fff);
}
.video-js.vjs-custom-theme .vjs-theater-button.is-active .vjs-icon-placeholder:before{
  opacity: 1;
  width: 17px;
  height: 17px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z'/%3E%3C/svg%3E");
}

.video-js.vjs-custom-theme .vjs-airplay-control .vjs-icon-placeholder,
.video-js.vjs-custom-theme .vjs-airplay-button .vjs-icon-placeholder{
  width: 20px !important;
  height: 20px !important;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='m240-120 240-240 240 240H240ZM80-280v-480q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v480q0 33-23.5 56.5T800-200H680v-80h120v-480H160v480h120v80H160q-33 0-56.5-23.5T80-280Zm400-200Z'/%3E%3C/svg%3E") !important;
}

.video-js.vjs-custom-theme .vjs-volume-panel .vjs-mute-control .vjs-icon-placeholder:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z'/%3E%3C/svg%3E");
}

.video-js.vjs-custom-theme .vjs-chromecast-button .vjs-icon-placeholder{
  width: 20px !important;
  height: 20px !important;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M480-480Zm320 320H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm-720 0v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Z'/%3E%3C/svg%3E") !important;
}

.video-js.vjs-custom-theme .vjs-fullscreen-control .vjs-icon-placeholder:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z'/%3E%3C/svg%3E");
}

/* Playback rate — replace text with speed icon */
.video-js.vjs-custom-theme .vjs-playback-rate{
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-playback-rate-value{
  font-size: 0;
  line-height: 0;
  width: 20px;
  height: 20px;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M418-340q24 24 62 23.5t56-27.5l224-336-336 224q-27 18-28.5 55t22.5 61Zm62-460q59 0 113.5 16.5T696-734l-76 48q-33-17-68.5-25.5T480-720q-133 0-226.5 93.5T160-400q0 42 11.5 83t32.5 77h552q23-38 33.5-79t10.5-85q0-36-8.5-70T766-540l48-76q30 47 47.5 100T880-406q1 57-13 109t-41 99q-11 18-30 28t-40 10H204q-21 0-40-10t-30-28q-26-45-40-95.5T80-400q0-83 31.5-155.5t86-127Q252-737 325-768.5T480-800Zm7 313Z'/%3E%3C/svg%3E");
}

.video-js.vjs-custom-theme .vjs-button:hover > .vjs-icon-placeholder:before{
  opacity: 1;
}

.video-js.vjs-custom-theme .vjs-time-control,
.video-js.vjs-custom-theme .vjs-time-divider{
  color: var(--vjs-fg-muted);
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0;
  min-width: auto;
}
.video-js.vjs-custom-theme .vjs-time-divider span{
  padding: 0 2px;
}

/* Progress bar above controls (YouTube-style) */
.video-js.vjs-custom-theme .vjs-progress-control{
  position: absolute;
  top: -10px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 14px;
}

.video-js.vjs-custom-theme .vjs-progress-holder{
  height: 3px;
  margin: 0;
  background: rgba(255,255,255,.18);
}
.video-js.vjs-custom-theme .vjs-progress-control:hover .vjs-progress-holder{
  height: 5px;
}

.video-js.vjs-custom-theme .vjs-play-progress{
  background: rgba(255,255,255,.9);
}
.video-js.vjs-custom-theme .vjs-load-progress{
  background: rgba(255,255,255,.12);
}

/* Volume bar always visible (horizontal) */
.video-js.vjs-custom-theme .vjs-volume-panel.vjs-volume-panel-horizontal{
  width: auto !important;
  padding: 0;
  margin: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.video-js.vjs-custom-theme .vjs-volume-panel .vjs-mute-control{
  padding: 0;
  margin: 0;
  width: 20px !important;
}
.video-js.vjs-custom-theme .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{
  visibility: visible !important;
  opacity: 1 !important;
  width: 4em !important;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.video-js.vjs-custom-theme .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.video-js.vjs-custom-theme .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.video-js.vjs-custom-theme .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
.video-js.vjs-custom-theme .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover{
  width: auto !important;
}
.video-js.vjs-custom-theme .vjs-volume-bar{
  width: 100%;
  margin: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.video-js.vjs-custom-theme .vjs-volume-level{
  background: rgba(255,255,255,.9);
  border-radius: 999px;
}

/* Hide default Cast SDK button */
google-cast-launcher,
.vjs-tech + google-cast-launcher,
video::-internal-media-controls-overlay-cast-button{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Right-side button ordering (YouTube-style) */
.video-js.vjs-custom-theme .vjs-playback-rate{
  order: 98;
  margin-left: auto;
  margin-right: 6px;
}

/* Playback rate popup menu — dark panel with radio-dot items */
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu{
  width: auto !important;
  left: 50% !important;
  margin-left: -45px;
  margin-bottom: 10px !important;
}
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu .vjs-menu-content{
  display: flex !important;
  flex-direction: column;
  background: rgba(15, 15, 15, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 0;
  bottom: 1.5em;
  max-height: none;
  width: auto;
}
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu-title{
  display: none;
}
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu-item{
  display: block;
  width: 100%;
  padding: 4px 14px 4px 28px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  background: none;
  position: relative;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  line-height: 1.4;
}
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu-item:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}
/* Radio dot — unselected */
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu-item:before{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}
/* Radio dot — selected */
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu-item.vjs-selected:before{
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.video-js.vjs-custom-theme .vjs-playback-rate .vjs-menu-item.vjs-selected{
  color: #fff;
  font-weight: 600;
  background: none;
}

.video-js.vjs-custom-theme .vjs-theater-button{
  order: 101;
  margin-right: 6px;
}
.video-js.vjs-custom-theme .vjs-chromecast-button{
  display: flex;
  align-items: center;
  justify-content: center;
  order: 99;
  margin-right: 6px;
}
.video-js.vjs-custom-theme .vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden),
.video-js.vjs-custom-theme .vjs-airplay-button{
  order: 100 !important;
  margin-right: 6px;
}
.video-js.vjs-custom-theme .vjs-fullscreen-control{
  order: 200;
}
/* Hide control bar until first play */
.video-js.vjs-custom-theme.vjs-paused:not(.vjs-has-started) .vjs-control-bar{
  display: none;
}

/* Show controls only on hover (after playback has started) */
.video-js.vjs-custom-theme.vjs-has-started .vjs-control-bar{
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-js.vjs-custom-theme.vjs-has-started:hover .vjs-control-bar,
.video-js.vjs-custom-theme.vjs-has-started.vjs-paused .vjs-control-bar{
  opacity: 1;
}

/* Big play button — icon only, no box */
.video-js.vjs-custom-theme .vjs-big-play-button{
  border: none;
  background: none;
  border-radius: 0;
  height: 84px;
  width: 84px;
  line-height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  font-size: 7em;
  transition: transform .12s ease;
}
.video-js.vjs-custom-theme:hover .vjs-big-play-button{
  transform: scale(1.1);
  background: none;
  border: none;
}

/* Focus states */
.video-js.vjs-custom-theme .vjs-control:focus-visible,
.video-js.vjs-custom-theme .vjs-button:focus-visible{
  outline: 2px solid var(--vjs-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* --- Pause CTA modal tweaks --- */
.video-js .vjs-modal-dialog{
  background-color: rgba(0,0,0,.35);
}
.video-js .vjs-modal-dialog .vjs-modal-dialog-content{
  display: grid;
  place-items: center;
  padding: 0;
}
.vjs-pause-cta{
  width: min(720px, calc(100vw - 32px));
  border-radius: var(--vjs-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vjs-pause-cta a{
  display: block;
  text-decoration: none;
  color: inherit;
}
.vjs-pause-cta img{
  display: block;
  width: 100%;
  height: auto;
}
.vjs-pause-cta .vjs-pause-cta-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}
.vjs-pause-cta .vjs-pause-cta-title{
  font-size: 14px;
  color: var(--vjs-fg);
  opacity: .95;
}
.vjs-pause-cta .vjs-pause-cta-cta{
  font-size: 13px;
  color: var(--vjs-fg);
  opacity: .9;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
}

/* Slightly “tighter” controlbar spacing on very small screens */
@media (max-width: 420px){
  .video-js.vjs-custom-theme .vjs-control-bar{
    padding: 6px 8px;
  }
}