/* Wrapper & container */
.mc-bunny-hls-wrapper{ width:100%; color:#111; position:relative; }
.mc-bunny-hls-video-container{ position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:12px; overflow:hidden; }
.mc-bunny-hls-player{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

/* Overlay (desktop only; hidden on mobile) */
.mc-bunny-hls-overlay{ position:absolute; inset:0; z-index:999999; pointer-events:none; }
.mc-desktop .mc-bunny-hls-overlay{ pointer-events:none; }
.mc-mobile .mc-bunny-hls-overlay{ display:none; }

.mc-bunny-hls-overlay .mc-btn{ pointer-events:auto; appearance:none; border:0; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.mc-bunny-hls-overlay .nav-left,
.mc-bunny-hls-overlay .nav-right{
  position:absolute; top:50%; transform:translateY(-50%);
  width:64px; height:64px; font-size:36px; line-height:64px; display:flex; align-items:center; justify-content:center;
}
.mc-bunny-hls-overlay .nav-left{ left:12px; }
.mc-bunny-hls-overlay .nav-right{ right:12px; }

/* Volume (desktop) */
.mc-bunny-hls-overlay .mc-volume{
  position:absolute; left:12px; bottom:12px; display:flex; gap:10px; align-items:center; pointer-events:auto;
  background:rgba(0,0,0,.55); padding:6px 10px; border-radius:12px;
}
.mc-bunny-hls-overlay .mc-volume .mute{ appearance:none; border:0; background:transparent; color:#fff; font-size:18px; cursor:pointer; }
.mc-bunny-hls-overlay .mc-volume .slider{ width:120px; }

/* Close only in fullscreen */
.mc-bunny-hls-overlay .close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; font-size:20px; display:none; align-items:center; justify-content:center; pointer-events:auto;
}
.mc-bunny-hls-wrapper.mc-fullscreen .mc-bunny-hls-overlay .close,
.mc-bunny-hls-wrapper.mc-pfs .mc-bunny-hls-overlay .close{ display:flex; }

/* Desktop: arrows visible in fullscreen (native or pseudo) */
.mc-desktop.mc-fullscreen .mc-bunny-hls-overlay .nav-left,
.mc-desktop.mc-fullscreen .mc-bunny-hls-overlay .nav-right,
.mc-desktop.mc-pfs .mc-bunny-hls-overlay .nav-left,
.mc-desktop.mc-pfs .mc-bunny-hls-overlay .nav-right{ display:flex; }

/* Thumbnails + quickbar */
.mc-bunny-hls-thumbnails{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:10px; }
.mc-bunny-hls-thumb{ appearance:none; border:0; padding:0; background:#1118; color:#fff; border-radius:12px; overflow:hidden; text-align:left; cursor:pointer; }
.mc-bunny-hls-thumb .img{ position:relative; aspect-ratio:16/9; background:#222; }
.mc-bunny-hls-thumb .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mc-bunny-hls-thumb .t{ padding:8px 10px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111; background:#fff; }
.mc-bunny-hls-thumb.is-active{ outline:2px solid #4f46e5; }

.mc-bunny-hls-quickbar{ margin-top:8px; display:flex; gap:8px; justify-content:flex-end; }
.mc-bunny-hls-quickbar button{ appearance:none; border:0; border-radius:999px; padding:10px 14px; background:#4f46e5; color:#fff; font-weight:600; cursor:pointer; box-shadow:0 6px 18px rgba(79,70,229,.35); }
.mc-mobile .mc-bunny-hls-quickbar{ display:none; } /* hide quickbar on mobile */

/* Pseudo fullscreen: use dynamic viewport units to avoid top-third issue */
.mc-bunny-hls-wrapper.mc-pfs{ position:fixed !important; inset:0; width:100vw !important; height:100dvh !important; height:100svh !important; background:#000; z-index:2147483647; padding:0; margin:0; }
.mc-bunny-hls-wrapper.mc-pfs .mc-bunny-hls-video-container{ position:absolute; inset:0; padding-top:0; height:100%; }
.mc-bunny-hls-wrapper.mc-pfs .mc-bunny-hls-player{ width:100%; height:100%; }

/* Hide thumbnails in FS */
.mc-bunny-hls-wrapper.mc-fullscreen .mc-bunny-hls-thumbnails,
.mc-bunny-hls-wrapper.mc-pfs .mc-bunny-hls-thumbnails{ display:none !important; }

/* Prevent background scroll when pseudo-FS */
html.mcb-no-scroll, body.mcb-no-scroll{ overflow:hidden !important; touch-action:none; }


/* --- Added: bottom Play/Pause bar --- */
.mc-ppbar{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  z-index: 1000000; pointer-events:auto;
}
.mc-ppbtn{
  appearance:none; border:0; border-radius:12px; padding:10px 16px; font-weight:700;
  background:#111; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); cursor:pointer;
  display:flex; align-items:center; gap:10px;
}
.mc-ppbtn.is-paused .mc-ppicon::before{ content:'▶'; display:inline-block; transform:translateY(1px); }
.mc-ppbtn.is-playing .mc-ppicon::before{ content:'❚❚'; display:inline-block; letter-spacing:-3px; }
.mc-ppbtn .mc-pplabel{ font-size:14px; }
 /* Hide on mobile; keep double-tap UX */
/* --- /Added --- */


/* --- Added: show overlay on mobile while in pseudo fullscreen so Close button is reachable --- */
.mc-mobile.mc-pfs .mc-bunny-hls-overlay{ display:block; }
/* Keep thumbnails hidden only when really fullscreen/pseudo-FS */


/* --- Updated: bottom control bar visible on mobile; bottom inside video --- */
.mc-ppbar{
  position:absolute; left:50%; bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:1000000; pointer-events:auto;
  display:flex; align-items:center; gap:10px;
}
.mc-ppbtn, .mc-skipbtn{
  appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:700;
  background:rgba(0,0,0,.7); color:#fff; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  min-width:48px; min-height:44px; /* mobile-friendly tap targets */
}
.mc-ppbtn.is-paused .mc-ppicon::before{ content:'▶'; display:inline-block; transform:translateY(1px); }
.mc-ppbtn.is-playing .mc-ppicon::before{ content:'❚❚'; display:inline-block; letter-spacing:-3px; }
.mc-ppbtn .mc-pplabel{ font-size:14px; margin-left:8px; }
@media (max-width: 768px){
  .mc-ppbtn .mc-pplabel{ font-size:13px; }
}
/* Override any previous mobile hide */
.mc-mobile .mc-ppbar{ display:flex; }
/* Keep desktop overlay arrows centered; this bar is supplementary */

/* --- Removed overlay arrows + quickbar --- */
.mc-bunny-hls-overlay .nav-left,
.mc-bunny-hls-overlay .nav-right,
.mc-bunny-hls-quickbar{ display:none !important; }


/* --- Update: volume button in bottom control bar --- */
.mc-volbtn{
  appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:700;
  background:rgba(0,0,0,.7); color:#fff; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:8px;
  min-width:48px; min-height:44px;
}
.mc-volbtn .mc-vollabel{ font-size:14px; }
@media (max-width:768px){
  .mc-volbtn .mc-vollabel{ font-size:13px; }
}

/* --- Kill legacy overlay volume UI completely --- */
.mc-bunny-hls-overlay .mc-volume{ display:none !important; visibility:hidden !important; }