/* ==========================================================================
   Base Layout Guards
   Mobile-first guardrails used by the player layout system.
   ========================================================================== */

/* Shared hidden state used by templates/components instead of inline styles. */
.mp-is-hidden {
    display: none;
}

/* Ensure controls never exceed their container width. */
:where(.mehrazi-player, .mp-video-player, .mehrazi-player-container) {
    inline-size: 100%;
    max-inline-size: 100%;
}

/* Box sizing normalization inside player boundaries. */
:where(.mehrazi-player, .mp-video-player) *,
:where(.mehrazi-player, .mp-video-player) *::before,
:where(.mehrazi-player, .mp-video-player) *::after {
    box-sizing: border-box;
}

/* Prevent flex/grid children from forcing overflow. */
:where(.mehrazi-player, .mp-video-player) :is(
    .mp-controls-grid,
    .mp-controls-secondary,
    .mp-controls-main,
    .mp-controls-utility,
    .mp-action-buttons
) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* Modal tabs use class-based visibility to avoid style attributes. */
:where(.mehrazi-player, .mp-video-player) .mp-tab-content {
    display: none;
    min-inline-size: 0;
    max-inline-size: 100%;
}

:where(.mehrazi-player, .mp-video-player) .mp-tab-content.is-active {
    display: block;
}

/* Default icon states are CSS-driven (play/pause, mute/unmute). */
:where(.mehrazi-player, .mp-video-player) .mp-play .mp-icon-pause,
:where(.mehrazi-player, .mp-video-player) .mp-mute .mp-icon-mute {
    display: none;
}