/**
 * DLA — player chrome.
 * Sits over the Vimeo iframe inside .dla-video-wrap / .dla-vimeo-player.
 */
.dlapl-host{position:relative;outline:none;}
.dlapl-host iframe{pointer-events:none;} /* the SDK drives it; our layer takes the clicks */

.dlapl{
  --acc:#b59458; --acc-2:#cdac6c; --ink:#f1ece1;
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:flex-end;
  font-family:'DM Sans',sans-serif;
  opacity:1; transition:opacity .3s ease;
}
.dlapl *{box-sizing:border-box;}
.dlapl-idle .dlapl{opacity:0; pointer-events:none;}
.dlapl-idle{cursor:none;}

/* big centre button */
.dlapl-big{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  /* Every box property carries !important: the theme styles bare <button>
     elements with its own gold fill and square corners, which is what turned
     this into a small gold rectangle. */
  width:76px !important; height:76px !important;
  border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(3,9,7,.55) !important; background-image:none !important;
  color:#fff !important;
  cursor:pointer; padding:0 !important; min-width:0 !important;
  box-shadow:none !important; text-shadow:none !important; font-size:0 !important;
  backdrop-filter:blur(4px);
  transition:background .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1);
}
.dlapl-big svg{width:30px !important; height:30px !important; fill:#fff !important; display:block !important;}
.dlapl-big:hover svg{fill:#04100c !important;}
.dlapl-big:hover{background:var(--acc) !important; color:#04100c !important; border-color:var(--acc) !important;}
.dlapl-playing .dlapl-big{opacity:0; pointer-events:none;}

/* bottom bar */
.dlapl-bar{
  position:relative; z-index:2; width:100%;
  padding:34px 14px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.45) 55%,transparent);
}

.dlapl-seek{padding:6px 0; cursor:pointer; outline:none;}
.dlapl-track{position:relative; height:4px; border-radius:3px; background:rgba(255,255,255,.25);}
.dlapl-fill{position:absolute; top:0; left:0; height:100%; width:0; border-radius:3px; background:var(--acc);}
.dlapl-knob{
  position:absolute; top:50%; left:100%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%; background:var(--acc-2);
  opacity:0; transition:opacity .2s ease;
}
.dlapl-fill .dlapl-knob{left:100%;}
.dlapl-seek:hover .dlapl-track,
.dlapl-seek:focus .dlapl-track{height:6px;}
.dlapl-seek:hover .dlapl-knob,
.dlapl-seek:focus .dlapl-knob{opacity:1;}

.dlapl-row{display:flex; align-items:center; gap:8px; margin-top:4px;}
.dlapl-spacer{flex:1 1 auto;}

.dlapl-btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; border-radius:6px !important;
  border:none !important; background:transparent !important; background-image:none !important;
  color:#fff !important; cursor:pointer; padding:0 !important; min-width:0 !important;
  box-shadow:none !important; text-shadow:none !important;
  font:500 12px 'DM Sans',sans-serif !important; letter-spacing:.06em !important;
  transition:background .2s ease, color .2s ease;
}
.dlapl-btn svg{width:20px !important; height:20px !important; fill:#fff !important; display:block !important;}
.dlapl-btn:hover svg{fill:var(--acc-2) !important;}
.dlapl-btn:hover{background:rgba(255,255,255,.14) !important; color:var(--acc-2) !important;}
.dlapl-speed{width:auto; padding:0 10px !important;}

/* Fullscreen gets a pill of its own so it reads as a button, not as a glyph
   lost in the gradient — it was the one control people could not find. */
.dlapl-fs{
  width:44px !important; height:38px !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  margin-left:4px;
}
.dlapl-fs svg{width:22px !important; height:22px !important; fill:#fff !important; stroke:none !important;}
.dlapl-fs svg path{fill:#fff !important; stroke:none !important;}
.dlapl-fs:hover{background:var(--acc) !important; border-color:var(--acc) !important;}
.dlapl-fs:hover svg,.dlapl-fs:hover svg path{fill:#04100c !important;}

.dlapl-vol{width:0; overflow:hidden; transition:width .25s ease;}
.dlapl-row:hover .dlapl-vol{width:78px;}
/* The theme paints every <input> with a white box and a border, which turned
   the volume slider into a white plate with a knob. Strip it back to nothing
   and draw the track and thumb ourselves. */
.dlapl-vol input[type=range]{
  -webkit-appearance:none !important; appearance:none !important;
  width:74px !important; height:20px !important;
  background:transparent !important; background-image:none !important;
  border:none !important; border-radius:0 !important;
  box-shadow:none !important; outline:none !important;
  padding:0 !important; margin:0 !important; min-height:0 !important;
  cursor:pointer;
}
.dlapl-vol input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:3px; background:rgba(255,255,255,.3); border:none;
}
.dlapl-vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; margin-top:-4px;
  border-radius:50%; background:var(--acc-2); border:none;
}
.dlapl-vol input[type=range]::-moz-range-track{
  height:4px; border-radius:3px; background:rgba(255,255,255,.3); border:none;
}
.dlapl-vol input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--acc-2); border:none;
}

.dlapl-time{
  font-size:13px; color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums; white-space:nowrap; margin-left:4px;
}

/* Buffering: a ring around the button spins, the glyph stays still. Spinning
   a play triangle reads as a broken button, not as loading. */
.dlapl-buffering .dlapl-big::after{
  content:""; position:absolute; inset:-6px;
  border-radius:50%; border:2px solid transparent; border-top-color:var(--acc-2);
  animation:dlaplSpin .9s linear infinite;
}
@keyframes dlaplSpin{to{transform:rotate(360deg);}}

/* ---- real fullscreen ---- */
.dla-video-wrap:fullscreen,.dla-vimeo-player:fullscreen,
.dla-video-wrap:-webkit-full-screen,.dla-vimeo-player:-webkit-full-screen{
  width:100vw !important; height:100vh !important;
  padding-bottom:0 !important; background:#000 !important;
}
.dla-video-wrap:fullscreen > iframe,.dla-vimeo-player:fullscreen > iframe,
.dla-video-wrap:-webkit-full-screen > iframe,.dla-vimeo-player:-webkit-full-screen > iframe{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
}

/* ---- pinned fullscreen, for browsers that refuse to fullscreen a container
        (iPhone). Visually identical to the viewer. ---- */
html.dlapl-pinned,html.dlapl-pinned body{overflow:hidden !important;}
.dlapl-pin{
  position:fixed !important; inset:0 !important; z-index:99999 !important;
  width:100vw !important; height:100vh !important;
  height:100dvh !important;
  padding-bottom:0 !important; margin:0 !important; background:#000 !important;
}
.dlapl-pin > iframe{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
}

/* ---- phones: bigger targets, 16px floor on the readable bits ---- */
@media (max-width:640px){
  .dlapl-bar{padding:40px 10px 8px;}
  .dlapl-big{width:64px; height:64px;}
  .dlapl-big svg{width:26px; height:26px;}
  .dlapl-btn{width:44px !important; height:44px !important;}
  .dlapl-btn svg{width:22px !important; height:22px !important;}
  .dlapl-fs{width:52px !important; height:44px !important;}
  .dlapl-fs svg{width:26px !important; height:26px !important;}
  .dlapl-time{font-size:16px;}
  .dlapl-speed{font-size:16px !important;}
  .dlapl-track{height:5px;}
  .dlapl-knob{opacity:1; width:14px; height:14px;}
  /* No hover on a phone, so the slider would never open — the mute button
     covers it and the hardware keys do the rest. */
  .dlapl-vol{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .dlapl,.dlapl *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}


/* -----------------------------------------------------------------------
   Watermark
   Sits above the video, below the controls, and never takes a click.
   Bottom placements are lifted clear of the control bar.
   ----------------------------------------------------------------------- */
.dlapl-mark{
  position:absolute; z-index:15;
  pointer-events:none; user-select:none;
  max-width:40%; line-height:0;
  transition:opacity .3s ease;
}
.dlapl-mark img{width:100%; height:auto; display:block;}
.dlapl-mark.pos-tl{top:16px; left:16px;}
.dlapl-mark.pos-tr{top:16px; right:16px;}
.dlapl-mark.pos-bl{bottom:74px; left:16px;}
.dlapl-mark.pos-br{bottom:74px; right:16px;}
/* With the bar hidden the bottom marks can drop back down. */
.dlapl-idle .dlapl-mark.pos-bl,
.dlapl-idle .dlapl-mark.pos-br{bottom:16px;}
/* Our own logo has no business sitting on top of a sponsor's card. */
.dlaad-on .dlapl-mark{opacity:0 !important;}
@media (max-width:640px){
  .dlapl-mark{max-width:32%;}
  .dlapl-mark.pos-tl,.dlapl-mark.pos-tr{top:10px;}
  .dlapl-mark.pos-tl,.dlapl-mark.pos-bl{left:10px;}
  .dlapl-mark.pos-tr,.dlapl-mark.pos-br{right:10px;}
  .dlapl-mark.pos-bl,.dlapl-mark.pos-br{bottom:84px;}
}


/* -----------------------------------------------------------------------
   Held opening frame
   Sits above the video, below the ad layer, and dissolves rather than cuts.
   The scale is barely perceptible — just enough that the image feels like it
   settles into the film instead of switching off.
   ----------------------------------------------------------------------- */
.dlapl-intro{
  position:absolute; inset:0; z-index:18;
  background-size:cover; background-position:center;
  background-repeat:no-repeat; background-color:#000;
  opacity:1; transform:scale(1.02);
  transition-property:opacity, transform;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:900ms;
  pointer-events:none;
}
.dlapl-intro.gone{opacity:0; transform:scale(1);}
/* While it holds, the chrome stays out of the way. */
.dlapl-intro-on .dlapl-bar{opacity:0; transition:opacity .3s ease;}
.dlapl-intro-on .dlapl-big{opacity:0 !important;}
@media (prefers-reduced-motion:reduce){
  .dlapl-intro{transition-duration:1ms !important; transform:none !important;}
  .dlapl-intro.gone{transform:none !important;}
}

/* Last resort: a cover that somehow survives its own timer must never be able
   to hold the lesson hostage. Once the wrapper reports playback, it goes. */
.dlapl-playing .dlapl-intro{opacity:0 !important;pointer-events:none !important;}

/* The site-wide "no rounded corners" pass flattens Video.js's loading
   spinner too, and a spinner is literally a circle with one coloured edge —
   squared off, it tumbles like a brick. Give it its shape back. */
html body .video-js .vjs-loading-spinner,
html body .video-js .vjs-loading-spinner:before,
html body .video-js .vjs-loading-spinner:after,
html body .vjs-loading-spinner,
html body .vjs-loading-spinner:before,
html body .vjs-loading-spinner:after{
    border-radius:50% !important;
}
html body .video-js .vjs-loading-spinner{
    border-color:rgba(255,255,255,.22) !important;
    border-top-color:#fff !important;
}


/* -----------------------------------------------------------------------
   Video.js (self-hosted HLS) control bar
   The theme paints every <button> with its gold fill, square corners and its
   own font. On Video.js that turns the icon glyphs (drawn with the VideoJS
   icon font) into blank gold squares — the fullscreen toggle being the one
   people miss most. Pin the skin back to what it should be.
   ----------------------------------------------------------------------- */
html body .video-js .vjs-control-bar{
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.45)) !important;
  height:3.4em !important;
}
html body .video-js .vjs-control-bar .vjs-button,
html body .video-js .vjs-control-bar button{
  background:transparent !important; background-image:none !important;
  border:none !important; border-radius:0 !important;
  box-shadow:none !important; text-shadow:none !important;
  color:#fff !important; padding:0 !important; margin:0 !important;
  min-width:0 !important; width:4em !important; height:3.4em !important;
  line-height:3.4em !important; font-size:inherit !important;
}
html body .video-js .vjs-icon-placeholder:before,
html body .video-js .vjs-button > .vjs-icon-placeholder:before{
  font-family:VideoJS !important; font-weight:normal !important; font-style:normal !important;
  color:#fff !important; font-size:1.9em !important; line-height:3.4em !important;
  text-shadow:none !important;
}
html body .video-js .vjs-control-bar .vjs-button:hover .vjs-icon-placeholder:before{color:#cdac6c !important;}
/* Fullscreen toggle: same pill as the Vimeo chrome, so it's findable on both. */
html body .video-js .vjs-fullscreen-control{
  width:4.4em !important; height:2.6em !important; line-height:2.6em !important;
  margin:.4em .5em .4em .2em !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.35) !important;
}
html body .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before{line-height:2.4em !important;}
html body .video-js .vjs-fullscreen-control:hover{background:#b59458 !important; border-color:#b59458 !important;}
html body .video-js .vjs-fullscreen-control:hover .vjs-icon-placeholder:before{color:#04100c !important;}
/* The theme's <input> reset hits the volume slider too. */
html body .video-js .vjs-volume-panel input{border:none !important; background:transparent !important; box-shadow:none !important;}
@media (max-width:640px){
  html body .video-js .vjs-control-bar{font-size:12px !important; height:3.8em !important;}
  html body .video-js .vjs-control-bar .vjs-button{width:3.6em !important; height:3.8em !important; line-height:3.8em !important;}
  html body .video-js .vjs-icon-placeholder:before{font-size:2em !important; line-height:3.8em !important;}
  html body .video-js .vjs-fullscreen-control{width:4.4em !important; height:2.9em !important; line-height:2.9em !important; margin:.45em .4em !important;}
  html body .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before{line-height:2.7em !important;}
  html body .video-js .vjs-time-control,html body .video-js .vjs-time-divider{display:none !important;}
}