/* V115 — standalone player controls and focused playback layout. */

/* The standalone player becomes a clean video-only surface after playback starts. */
body.bm-player-session-active{
  padding-bottom:0!important;
  overflow:hidden;
  background:#000!important;
}
body.bm-player-session-active .header,
body.bm-player-session-active .player-hero,
body.bm-player-session-active .cinema-titlebar,
body.bm-player-session-active .helper-grid,
body.bm-player-session-active .bottom-nav,
body.bm-player-session-active .bm-support-card,
body.bm-player-session-active footer{
  display:none!important;
}
body.bm-player-session-active .page-shell{
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
}
body.bm-player-session-active .cinema-panel{
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#000!important;
}
body.bm-player-session-active .cinema-panel::before{display:none!important}
body.bm-player-session-active .player-wrapper{
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  margin:0!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.bm-player-session-active .player-video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Controls are class-driven only. Hover/focus/fullscreen must not keep them open. */
.player-wrapper .player-controls{
  position:absolute!important;
  inset:auto 0 0!important;
  z-index:40!important;
  padding:48px 18px max(16px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,0) 100%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(8px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease!important;
}
.player-wrapper:hover .player-controls,
.player-wrapper:active .player-controls,
.player-wrapper:fullscreen .player-controls,
.player-wrapper:-webkit-full-screen .player-controls,
.player-wrapper .player-controls:focus-within{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.player-wrapper.controls-visible .player-controls,
.player-wrapper.controls-paused .player-controls{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0);
}
.player-wrapper.ui-locked .player-controls{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.player-wrapper .progress-container{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 14px!important;
}
.player-wrapper .progress-time{
  flex:0 0 auto!important;
  min-width:54px!important;
  color:#fff!important;
  font-size:13px!important;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.player-wrapper .progress-bar{min-width:0!important;flex:1 1 auto!important}

/* All controls stay in one compact cluster on Windows and fullscreen. */
.player-wrapper .controls-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
}
.player-wrapper .controls-left,
.player-wrapper .controls-right{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
}
.player-wrapper .controls-right{margin:0!important}
.player-wrapper .ctrl-btn{
  flex:0 0 auto!important;
  min-width:42px!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.player-wrapper .ctrl-btn:hover{background:var(--accent)!important;color:#050505!important}
.player-wrapper .ctrl-btn svg{width:18px!important;height:18px!important}
.player-wrapper .volume-control{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  height:42px!important;
  padding:0 10px 0 0!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.09)!important;
  overflow:hidden;
}
.player-wrapper .volume-control .ctrl-btn{
  min-width:42px!important;
  width:42px!important;
  height:42px!important;
  border:0!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
.player-wrapper .volume-slider{width:88px!important;flex:0 0 88px!important}

@media(max-width:768px){
  .player-wrapper .player-controls{
    padding:38px 10px max(10px,env(safe-area-inset-bottom))!important;
  }
  .player-wrapper .progress-container{gap:7px!important;margin-bottom:10px!important}
  .player-wrapper .progress-time{min-width:42px!important;font-size:11px!important}
  .player-wrapper .controls-row,
  .player-wrapper .controls-left,
  .player-wrapper .controls-right{gap:6px!important}
  .player-wrapper .ctrl-btn{
    min-width:36px!important;
    width:36px!important;
    height:36px!important;
  }
  .player-wrapper .ctrl-btn svg{width:16px!important;height:16px!important}
  .player-wrapper .volume-control{height:36px!important;padding-inline-end:8px!important;gap:6px!important}
  .player-wrapper .volume-control .ctrl-btn{min-width:36px!important;width:36px!important;height:36px!important}
  .player-wrapper .volume-slider{width:70px!important;flex-basis:70px!important}

  body:not(.fullscreen-active):not(.bm-player-session-active) .player-wrapper .controls-left .ctrl-btn:not(#playPauseBtn),
  body:not(.fullscreen-active):not(.bm-player-session-active) .player-wrapper .controls-right .ctrl-btn:not(#settingsBtn):not(#screenLockBtn):not(#fullscreenBtn),
  body:not(.fullscreen-active):not(.bm-player-session-active) .player-wrapper .volume-control{
    display:none!important;
  }
}

@media(max-width:430px){
  .player-wrapper .player-controls{padding-inline:7px!important}
  .player-wrapper .controls-row,
  .player-wrapper .controls-left,
  .player-wrapper .controls-right{gap:4px!important}
  .player-wrapper .ctrl-btn{
    min-width:32px!important;
    width:32px!important;
    height:32px!important;
  }
  .player-wrapper .ctrl-btn svg{width:15px!important;height:15px!important}
  .player-wrapper .volume-control{height:32px!important;padding-inline-end:6px!important;gap:4px!important}
  .player-wrapper .volume-control .ctrl-btn{min-width:32px!important;width:32px!important;height:32px!important}
  .player-wrapper .volume-slider{width:56px!important;flex-basis:56px!important}
}

@media(max-height:520px) and (orientation:landscape){
  .player-wrapper .player-controls{padding-top:28px!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
  .player-wrapper .progress-container{margin-bottom:7px!important}
  .player-wrapper .ctrl-btn{min-width:34px!important;width:34px!important;height:34px!important}
  .player-wrapper .volume-control{height:34px!important}
  .player-wrapper .volume-control .ctrl-btn{min-width:34px!important;width:34px!important;height:34px!important}
}

/* V116 — exact standalone-player layout from the supplied reference screenshot. */

/* The shared desktop header is absolute; keep the player intro fully below it. */
@media (min-width: 992px) {
  body:not(.bm-player-session-active) .page-shell {
    padding-top: 112px !important;
  }
}

/* Controls: timeline above, two separated groups below — exactly like the reference. */
.player-wrapper .player-controls {
  --bm-control-size: clamp(44px, 4.55vw, 58px);
  --bm-seek-width: clamp(76px, 7.8vw, 100px);
  --bm-control-gap: clamp(8px, .95vw, 12px);
  padding: 58px clamp(16px, 1.9vw, 24px) max(18px, env(safe-area-inset-bottom)) !important;
}

.player-wrapper .progress-container {
  gap: clamp(10px, 1.25vw, 16px) !important;
  margin-bottom: 18px !important;
}

.player-wrapper .progress-time {
  min-width: clamp(50px, 5.2vw, 68px) !important;
  font-size: clamp(12px, 1.25vw, 16px) !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
}

.player-wrapper .controls-row {
  justify-content: space-between !important;
  gap: 18px !important;
}

.player-wrapper .controls-left,
.player-wrapper .controls-right {
  gap: var(--bm-control-gap) !important;
  justify-content: flex-start !important;
}

.player-wrapper .controls-left {
  margin-right: auto !important;
}

.player-wrapper .controls-right {
  margin-left: auto !important;
}

.player-wrapper .ctrl-btn {
  min-width: var(--bm-control-size) !important;
  width: var(--bm-control-size) !important;
  height: var(--bm-control-size) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28) !important;
}

.player-wrapper .ctrl-btn svg {
  width: clamp(18px, 1.85vw, 23px) !important;
  height: clamp(18px, 1.85vw, 23px) !important;
  stroke-width: 2 !important;
}

.player-wrapper .ctrl-btn.seek-extra {
  width: var(--bm-seek-width) !important;
  min-width: var(--bm-seek-width) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: clamp(12px, 1.2vw, 15px) !important;
  font-variant-numeric: tabular-nums !important;
}

.player-wrapper .ctrl-btn.seek-extra svg {
  width: clamp(21px, 2vw, 25px) !important;
  height: clamp(21px, 2vw, 25px) !important;
}

/* In the reference the speaker is a separate circle and the slider is bare. */
.player-wrapper .volume-control {
  height: var(--bm-control-size) !important;
  padding: 0 !important;
  gap: clamp(10px, 1.35vw, 18px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.player-wrapper .volume-control .ctrl-btn {
  min-width: var(--bm-control-size) !important;
  width: var(--bm-control-size) !important;
  height: var(--bm-control-size) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28) !important;
}

.player-wrapper .volume-slider {
  width: clamp(76px, 10vw, 128px) !important;
  flex: 0 0 clamp(76px, 10vw, 128px) !important;
}

.player-wrapper .download-control-btn {
  color: #07150f !important;
  background: linear-gradient(145deg, #35f0ad, #0fd68c) !important;
  border-color: rgba(75,255,190,.72) !important;
  box-shadow: 0 0 0 1px rgba(35,255,171,.16), 0 0 30px rgba(18,230,148,.30), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.player-wrapper .download-control-btn:hover {
  color: #06100c !important;
  background: linear-gradient(145deg, #63ffc7, #19e99b) !important;
}

/* Keep the settings wrapper from changing the spacing of the right group. */
.player-wrapper .settings-dropdown {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Tablet/landscape: same arrangement, proportionally smaller, no overflow. */
@media (max-width: 760px) {
  .player-wrapper .player-controls {
    --bm-control-size: clamp(36px, 7vw, 46px);
    --bm-seek-width: clamp(58px, 12vw, 78px);
    --bm-control-gap: clamp(4px, 1.1vw, 7px);
    padding: 44px 10px max(10px, env(safe-area-inset-bottom)) !important;
  }
  .player-wrapper .progress-container {
    gap: 7px !important;
    margin-bottom: 10px !important;
  }
  .player-wrapper .progress-time {
    min-width: 42px !important;
    font-size: 11px !important;
  }
  .player-wrapper .controls-row {
    gap: 8px !important;
  }
  .player-wrapper .ctrl-btn.seek-extra {
    gap: 3px !important;
    font-size: 11px !important;
  }
  .player-wrapper .volume-control {
    gap: 6px !important;
  }
  .player-wrapper .volume-slider {
    width: clamp(56px, 11vw, 78px) !important;
    flex-basis: clamp(56px, 11vw, 78px) !important;
  }
}

/* Narrow portrait: preserve every button but collapse the volume line first. */
@media (max-width: 520px) {
  .player-wrapper .player-controls {
    --bm-control-size: 32px;
    --bm-seek-width: 50px;
    --bm-control-gap: 3px;
    padding-inline: 7px !important;
  }
  .player-wrapper .volume-slider {
    display: none !important;
  }
  .player-wrapper .volume-control {
    width: var(--bm-control-size) !important;
    flex: 0 0 var(--bm-control-size) !important;
  }
  .player-wrapper .ctrl-btn.seek-extra span {
    font-size: 9px !important;
  }
  .player-wrapper .ctrl-btn.seek-extra svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Hard guarantee: while playing, the class is the only thing that may reveal controls. */
.player-wrapper:not(.controls-visible):not(.controls-paused) .player-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}