/* CelebMasta Video Player Styles */
.cmvp-wrapper {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.75em;
    position: relative;
    background: #000;
}

.cmvp-video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

/* Fluid Player overrides */
.fluid_video_wrapper {
    margin-bottom: 0 !important;
}

/* ============================================================
   CONTROLS — bigger everywhere, all the time (not just once in
   native fullscreen) — same size on the embed modal, single video
   pages, and anywhere else this player renders.
   NOTE: icon scale is intentionally kept modest — transform:scale()
   only enlarges what the icon *looks like*, not the actual clickable
   button box. Scaling icons too far past their button's real size
   makes them visually spill outside their tappable area, so taps
   near the edge of the icon miss. Icon scale must stay small enough
   that the icon stays inside the button it's sitting in.
   ============================================================ */

/* Control bar */
.fluid_controls_container {
    height: 44px !important;
    min-height: 44px !important;
}

/* All buttons */
.fluid_button {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
}

/* SVG icons and pseudo-element icons inside buttons */
.fluid_button svg,
.fluid_button:before {
    transform: scale(1.3) !important;
    transform-origin: center !important;
}

/* Fullscreen button specifically — a bit bigger still, but not so far
   past the button box that taps miss */
.fluid_control_fullscreen svg,
.fluid_control_fullscreen:before {
    transform: scale(1.6) !important;
    transform-origin: center !important;
}

/* Time / duration text */
.fluid_control_duration {
    line-height: 44px !important;
    font-size: 12px !important;
}

/* ---- Mini Player: constrain width on mobile so it doesn't overflow ----
   FluidPlayer hardcodes width:400px which goes off-screen on phones < 420px.
   Two queries needed:
   - max-width: 600px  → portrait mobile
   - max-height: 500px → landscape mobile (width > 600px but height is short)  */
@media screen and (max-width: 600px), screen and (max-height: 500px) {
    .fluid_video_wrapper.fluid_mini_player_mode--bottom-right,
    .fluid_video_wrapper.fluid_mini_player_mode {
        width: 240px !important;
        height: 135px !important;  /* 240 × 9/16 */
        right: 8px !important;
        bottom: 8px !important;
    }
}