/* ==========================================================================
   Templates Responsive Layer
   Final mobile-first hardening for archive, carousel, single and modal pages.
   ========================================================================== */

:where(.mp-template-shell, .mp-layout-shell) {
    --mp-shell-gutter: clamp(0.75rem, 3vw, 1.5rem);
    --mp-shell-max-archive: 88rem;
    --mp-shell-max-single: 56rem;
    --mp-shell-max-single-video: 82rem;
    --mp-shell-max-modal: 80rem;
    --mp-template-main-archive-padding: 1.5rem;
}

/* Shared boundary guards for template surfaces. */
:where(.mp-template-shell, .mp-layout-shell) {
    inline-size: 100%;
    max-inline-size: 100%;
}

:where(.mp-template-shell, .mp-layout-shell, .mp-template-main) {
    min-inline-size: 0;
}

:where(.mp-template-shell, .mp-layout-shell) :is(img, video) {
    max-inline-size: 100%;
    height: auto;
}

/* Shared width behavior for archive and carousel wrappers. */
.mp-template-shell--archive,
.mp-template-shell--carousel {
    inline-size: min(100%, var(--mp-shell-max-archive));
    margin-inline: auto;
    padding-inline: var(--mp-shell-gutter);
}

/* Standalone audio/video players should inherit shell safety semantics. */
.mp-template-shell--player,
.mp-template-shell--video-player,
.mp-layout-shell {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
}

.mp-template-shell--player .mp-template-main--player,
.mp-template-shell--video-player .mp-template-main--video-player {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
}

/* Single page inner shell should remain narrow and centered. */
.mp-template-shell--single .mp-template-main {
    inline-size: min(100%, var(--mp-shell-max-single));
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--mp-shell-gutter);
}

/* Unified shell for legacy/modern single video templates. */
.mp-template-shell--single-video .mp-template-main--single-video {
    inline-size: min(100%, var(--mp-shell-max-single-video));
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--mp-shell-gutter);
}

.mp-template-stack {
    inline-size: 100%;
    max-inline-size: 100%;
}

/* Theme/container wrappers used by legacy templates must stay fluid. */
:where(
    .main-page-wrapper,
    .wd-content-layout,
    .content-layout-wrapper,
    .container,
    .mp-container,
    .mp-single-container
) {
    max-inline-size: 100%;
    min-inline-size: 0;
}

.mp-template-main--archive {
    padding-block: var(--mp-template-main-archive-padding);
}

.mp-template-stack--spaced > * + * {
    margin-block-start: 1.5rem;
}

/* Global responsive safety net for legacy and modern wrappers. */
:where(
    .mehrazi-player,
    .mp-video-player,
    .mp-video-modal,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mp-archive-modern
) {
    max-inline-size: 100%;
    min-inline-size: 0;
}

:where(
    .mehrazi-player,
    .mp-video-player,
    .mp-video-modal,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mp-archive-modern
) :is(
    .mp-controls-grid,
    .mp-controls-secondary,
    .mp-controls-main,
    .mp-controls-utility,
    .mp-video-controls-main,
    .mp-video-controls-left,
    .mp-video-controls-right,
    .mp-filter-chips,
    .mp-view-toggle,
    .mp-header-actions,
    .mp-single-actions
) {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
}

:where(
    .mehrazi-player,
    .mp-video-player,
    .mp-video-modal,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mp-archive-modern
) :is(
    .mp-controls-grid > *,
    .mp-controls-secondary > *,
    .mp-controls-main > *,
    .mp-controls-utility > *,
    .mp-video-controls-main > *,
    .mp-video-controls-left > *,
    .mp-video-controls-right > *,
    .mp-header-actions > *,
    .mp-single-actions > *
) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* Structural overflow guards for grids, cards, and carousels. */
:where(
    .mp-template-shell,
    .mp-layout-shell,
    .mehrazi-player,
    .mp-video-player,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mp-archive-modern
) :is(
    .mp-grid-container,
    .mp-grid,
    .mp-podcast-grid,
    .mp-related-grid,
    .swiper,
    .swiper-wrapper,
    .swiper-slide,
    .mp-card-content,
    .mp-card-meta,
    .mp-card-title,
    .mp-card-excerpt
) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* Long timer/status labels should not push controls out of viewport. */
:where(.mehrazi-player, .mp-video-player, .mp-video-modal) :is(
    .mp-time-display,
    .mp-video-time-display
) {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy single-video template guard: prevent action-row overflow and clipping. */
:where(.mehrazi-single-video) {
    max-inline-size: 100%;
    min-inline-size: 0;
}

:where(.mehrazi-single-video) :is(
    .mp-single-title,
    .mp-channel-name,
    .mp-single-description
) {
    overflow-wrap: anywhere;
}

:where(.mehrazi-single-video) .mp-single-meta-row,
:where(.mehrazi-single-video) .mp-single-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-inline-size: 0;
    max-inline-size: 100%;
}

:where(.mehrazi-single-video) .mp-single-actions {
    inline-size: 100%;
}

:where(.mehrazi-single-video) .mp-action-btn {
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Archive headers and action clusters must wrap on small screens. */
:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) :is(
    .mp-section-header,
    .mp-header-actions,
    .mp-view-toggle
) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-inline-size: 0;
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-section-title {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* Default to one-column cards for narrow phones (320px+). */
:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) :is(
    .mp-podcast-grid:not(.mp-view-list),
    .mp-podcast-grid--responsive
) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Long metadata text must not force horizontal overflow. */
:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) :is(
    .mp-card-title,
    .mp-card-excerpt,
    .mp-card-meta span
) {
    overflow-wrap: anywhere;
}

/* Modern archive template: stable wrapping/touch targets without overflow. */
:where(.mp-archive-modern, .mp-template-shell--archive.mp-archive-modern) {
    --mp-archive-modern-grid-cols: 1;
    inline-size: 100%;
    max-inline-size: 100%;
}

:where(.mp-archive-modern) .mp-container {
    min-inline-size: 0;
}

:where(.mp-archive-modern) .mp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-inline-size: 0;
}

:where(.mp-archive-modern) .mp-search {
    flex: 1 1 16rem;
    min-inline-size: min(100%, 16rem);
}

:where(.mp-archive-modern) .mp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-inline-size: 0;
}

:where(.mp-archive-modern) .mp-chip {
    min-block-size: 44px;
    padding-inline: 0.75rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

:where(.mp-archive-modern) .mp-sort {
    flex: 1 1 12rem;
    min-inline-size: min(100%, 12rem);
}

:where(.mp-archive-modern) .mp-grid {
    grid-template-columns: repeat(var(--mp-archive-modern-grid-cols), minmax(0, 1fr));
    gap: 1rem;
}

/* Semantic archive card modifiers for tw-free templates. */
.mp-section-header--archive {
    margin-block-end: 1rem;
}

.mp-grid-container--archive {
    margin-block-start: 1rem;
}

.mp-video-card--archive {
    overflow: hidden;
}

.mp-card-media--video {
    position: relative;
}

.mp-live-badge--archive {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 2;
}

.mp-card-cover--video {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mp-card-placeholder--video {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-card-overlay--video {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.mp-video-play-btn--archive {
    inline-size: 3rem;
    block-size: 3rem;
    min-inline-size: 44px;
    min-block-size: 44px;
}

.mp-favorite-btn--archive {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
}

.mp-card-content--archive {
    padding: 0.75rem;
}

.mp-card-meta--archive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(224, 231, 255, 0.72);
}

.mp-card-date--archive,
.mp-card-artist--archive {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-card-title--archive {
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-card-title--archive a {
    display: inline-block;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.mp-card-excerpt--archive {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(224, 231, 255, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-no-results--archive {
    text-align: center;
    padding-block: 2.5rem;
}

.mp-no-results--archive > * + * {
    margin-top: 0.75rem;
}

/* Related content should scale with available width without fixed card columns. */
:where(.mehrazi-single-video, .mp-single-video, .mehrazi-player-app) .mp-related-section {
    inline-size: 100%;
    max-inline-size: 100%;
}

:where(.mehrazi-single-video, .mp-single-video, .mehrazi-player-app) .mp-related-section .mp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

:where(.mehrazi-single-video, .mp-single-video, .mehrazi-player-app) .mp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
}

/* Carousel cards should stretch cleanly and avoid vertical clipping. */
.mehrazi-player-carousel.mp-template-shell--carousel {
    inline-size: min(100%, var(--mp-shell-max-archive));
    max-inline-size: 100%;
}

.mehrazi-player-carousel .swiper-wrapper {
    align-items: stretch;
}

.mehrazi-player-carousel .swiper-slide {
    block-size: auto;
}

/* Single podcast page: full semantic layout (no tw-* dependency). */
.mehrazi-player-app.mp-single-shell {
    --mp-single-cover-size: min(16rem, 72vw);
    --mp-single-related-card-size: min(10rem, 46vw);
    position: relative;
    min-block-size: 100vh;
    background: var(--mp-bg-base, #050814);
    color: var(--mp-text, #fff);
}

.mehrazi-player-app .mp-template-main,
.mehrazi-player-app .mp-single-container {
    inline-size: min(100%, var(--mp-shell-max-single));
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--mp-shell-gutter);
}

.mehrazi-player-app .mp-single-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.mehrazi-player-app .mp-single-backdrop-media {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.2;
    filter: blur(64px);
    transform: scale(1.1);
}

.mehrazi-player-app .mp-single-backdrop-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 8, 20, 0.8) 0%,
        rgba(5, 8, 20, 0.95) 52%,
        rgba(5, 8, 20, 1) 100%
    );
}

.mehrazi-player-app .mp-single-container {
    position: relative;
    z-index: 10;
    padding-block-end: 6rem;
}

.mehrazi-player-app .mp-single-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--mp-border, rgba(148, 163, 184, 0.2));
    background: rgba(5, 8, 20, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mehrazi-player-app .mp-single-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 999px;
    color: var(--mp-text, #fff);
    background: var(--mp-bg-glass, rgba(17, 24, 39, 0.6));
    border: 1px solid var(--mp-bg-glass-border, rgba(148, 163, 184, 0.2));
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.mehrazi-player-app .mp-single-back-link:hover {
    background: var(--mp-bg-glass-hover, rgba(17, 24, 39, 0.75));
}

.mehrazi-player-app .mp-single-back-link:active {
    transform: scale(0.96);
}

.mehrazi-player-app .mp-single-back-link:focus-visible {
    outline: 2px solid var(--mp-primary, #d4af37);
    outline-offset: 2px;
}

.mehrazi-player-app .mp-single-header-title {
    margin: 0;
    min-inline-size: 0;
    max-inline-size: min(62vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0.92;
}

.mehrazi-player-app .mp-single-header-spacer {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;
}

.mehrazi-player-app .mp-single-content {
    max-inline-size: 100%;
    padding: 1.5rem 1rem;
}

.mehrazi-player-app .mp-single-content > * + * {
    margin-block-start: 2rem;
}

.mehrazi-player-app .mp-single-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.mehrazi-player-app .mp-single-cover-wrap {
    position: relative;
    inline-size: var(--mp-single-cover-size);
    block-size: var(--mp-single-cover-size);
    max-inline-size: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--mp-shadow, 0 24px 48px -12px rgba(0, 0, 0, 0.5));
}

.mehrazi-player-app .mp-single-cover {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mehrazi-player-app .mp-single-cover-wrap:hover .mp-single-cover {
    transform: scale(1.05);
}

.mehrazi-player-app .mp-single-cover-placeholder {
    inline-size: 100%;
    block-size: 100%;
    display: grid;
    place-items: center;
    font-size: 2.25rem;
    background: var(--mp-bg-elevated, #090f23);
}

.mehrazi-player-app .mp-single-cover-shadow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.mehrazi-player-app .mp-single-hero-meta {
    inline-size: min(100%, 28rem);
    max-inline-size: 100%;
}

.mehrazi-player-app .mp-single-hero-meta > * + * {
    margin-top: 0.5rem;
}

.mehrazi-player-app .mp-single-hero-title {
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--mp-text, #fff);
    overflow-wrap: anywhere;
}

.mehrazi-player-app .mp-single-artist-link {
    display: inline-block;
    color: var(--mp-primary, #d4af37);
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
}

.mehrazi-player-app .mp-single-artist-link:hover {
    text-decoration: underline;
}

.mehrazi-player-app .mp-single-player-wrap {
    inline-size: 100%;
    padding: 0.25rem;
    border-radius: 1.5rem;
    border: 1px solid var(--mp-bg-glass-border, rgba(148, 163, 184, 0.2));
    background: var(--mp-bg-card, rgba(17, 24, 39, 0.55));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.mehrazi-player-app .mp-single-description {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--mp-bg-glass-border, rgba(148, 163, 184, 0.2));
    background: var(--mp-bg-card, rgba(17, 24, 39, 0.55));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mehrazi-player-app .mp-single-section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mp-text, #fff);
}

.mehrazi-player-app .mp-single-description-content {
    margin-top: 1rem;
    color: var(--mp-text-muted, #b0b0b0);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.mehrazi-player-app .mp-single-description-content :where(p, ul, ol) {
    margin-block: 0 0.75rem;
}

.mehrazi-player-app .mp-single-description-content :where(h1, h2, h3, h4) {
    color: var(--mp-text, #fff);
}

.mehrazi-player-app .mp-single-related-section > * + * {
    margin-top: 1rem;
}

.mehrazi-player-app .mp-single-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 0.5rem;
}

.mehrazi-player-app .mp-single-related-link {
    color: var(--mp-primary, #d4af37);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.mehrazi-player-app .mp-single-related-link:hover {
    text-decoration: underline;
}

.mehrazi-player-app .mp-single-related-carousel-wrap {
    padding-inline: 0.5rem;
}

.mehrazi-player-app .mp-single-related-scroll {
    max-inline-size: 100%;
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mehrazi-player-app .mp-single-related-scroll::-webkit-scrollbar {
    display: none;
}

.mehrazi-player-app .mp-single-related-scroll > * {
    flex: 0 0 auto;
}

.mehrazi-player-app .mp-single-related-card {
    inline-size: var(--mp-single-related-card-size);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.mehrazi-player-app .mp-single-related-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.mehrazi-player-app .mp-single-related-thumb-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mehrazi-player-app .mp-single-related-card:hover .mp-single-related-thumb-img {
    transform: scale(1.1);
}

.mehrazi-player-app .mp-single-related-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.mehrazi-player-app .mp-single-related-card:hover .mp-single-related-thumb-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.mehrazi-player-app .mp-single-related-play-indicator {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 0.5rem;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
    background: var(--mp-primary, #d4af37);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mehrazi-player-app .mp-single-related-card:hover .mp-single-related-play-indicator {
    opacity: 1;
    transform: translateY(0);
}

.mehrazi-player-app .mp-single-related-title {
    margin: 0;
    color: var(--mp-text, #fff);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.mehrazi-player-app .mp-single-related-card:hover .mp-single-related-title {
    color: var(--mp-primary, #d4af37);
}

.mehrazi-player-app .mp-single-related-artist {
    margin: 0.25rem 0 0;
    color: var(--mp-text-muted, #b0b0b0);
    font-size: 0.75rem;
}

/* Video modal/video player defaults to wrapped controls on mobile. */
:where(.mp-video-modal, .mp-video-player) .mp-video-player-container {
    inline-size: min(100%, var(--mp-shell-max-modal));
    max-inline-size: calc(100vw - 1rem);
    max-block-size: calc(100dvh - 1rem);
    min-inline-size: 0;
    margin-inline: auto;
}

:where(.mp-video-modal, .mp-video-player) {
    --mp-video-controls-main-padding-inline: 0.625rem;
    --mp-video-controls-right-align: stretch;
    --mp-video-controls-right-flex: 1 1 100%;
    --mp-video-controls-right-justify: flex-start;
    --mp-video-autoplay-flex: 1 1 100%;
    --mp-video-autoplay-justify: space-between;
    --mp-video-playlist-sidebar-width: min(86vw, 20rem);
}

:where(.mp-video-modal, .mp-video-player) :is(
    .mp-video-controls-main,
    .mp-video-controls-left,
    .mp-video-controls-right
) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-controls-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    inline-size: 100%;
    padding-inline: var(--mp-video-controls-main-padding-inline);
}

:where(.mp-video-modal, .mp-video-player) .mp-video-controls-left,
:where(.mp-video-modal, .mp-video-player) .mp-video-controls-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-controls-left {
    flex: 1 1 100%;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-controls-right {
    flex: var(--mp-video-controls-right-flex);
    justify-content: var(--mp-video-controls-right-justify);
    align-items: var(--mp-video-controls-right-align);
}

/* Keep controls touch-friendly and prevent tiny click targets. */
:where(.mp-video-modal, .mp-video-player) :is(
    .mp-video-control-btn,
    .mp-video-playlist-toggle-btn,
    .mp-video-download-btn
) {
    min-inline-size: 44px;
    min-block-size: 44px;
    flex-shrink: 0;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-time-display {
    white-space: nowrap;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-settings-menu {
    inline-size: min(90vw, 18rem);
    max-inline-size: calc(100vw - 1rem);
    inset-inline-end: 0;
    max-block-size: min(70dvh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

[dir="rtl"] :where(.mp-video-modal, .mp-video-player) .mp-video-settings-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-playlist-sidebar {
    inline-size: var(--mp-video-playlist-sidebar-width);
    max-inline-size: 100%;
}

.mp-video-modal .mp-video-channel-overlay {
    max-inline-size: calc(100% - 1.5rem);
    overflow: hidden;
}

.mp-video-modal {
    --mp-video-channel-name-max: 11rem;
}

.mp-video-modal .mp-video-channel-name {
    display: inline-block;
    min-inline-size: 0;
    max-inline-size: var(--mp-video-channel-name-max);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-video-modal .mp-video-recommendation-card {
    flex-wrap: wrap;
    align-items: center;
}

.mp-video-modal .mp-video-recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Keep floating controls and panels safe within viewport/safe-area bounds. */
:where(.mp-video-modal, .mp-video-player) .mp-video-controls-wrapper {
    padding-inline-start: max(0.5rem, env(safe-area-inset-left));
    padding-inline-end: max(0.5rem, env(safe-area-inset-right));
    padding-block-end: max(0.5rem, env(safe-area-inset-bottom));
}

:where(.mp-video-modal, .mp-video-player) .mp-video-modal-close-top,
:where(.mp-video-modal, .mp-video-player) .mp-video-shortcuts-info-btn {
    inset-inline-start: max(0.5rem, env(safe-area-inset-left));
}

:where(.mp-video-modal, .mp-video-player) .mp-video-playlist-content {
    max-block-size: calc(100% - 3.25rem);
    overscroll-behavior: contain;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-controls-right > * {
    min-inline-size: 0;
}

:where(.mp-video-modal, .mp-video-player) .mp-video-autoplay-wrap {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex: var(--mp-video-autoplay-flex);
    justify-content: var(--mp-video-autoplay-justify);
}

:where(.mp-video-modal, .mp-video-player) .mp-video-autoplay-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] :where(.mp-video-modal, .mp-video-player) .mp-video-modal-close-top,
[dir="rtl"] :where(.mp-video-modal, .mp-video-player) .mp-video-shortcuts-info-btn {
    inset-inline-start: auto;
    inset-inline-end: max(0.5rem, env(safe-area-inset-right));
}

/* Theater mode should stay fluid without relying on overflow-x clipping. */
body.mp-theater-mode-active {
    overflow-x: visible;
}

body.mp-theater-mode-active .mp-video-player .mp-video-wrapper {
    inline-size: min(100%, calc(100vw - 1rem)) !important;
    max-inline-size: min(100%, 100rem) !important;
    margin-inline: auto !important;
}

body.mp-theater-mode-active .mp-video-player .mp-core-section {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

/* Fixed-width legacy panels: convert to fluid viewport-safe sizing. */
.mehrazi-player .mp-speed-dropdown,
.mehrazi-player .mp-sort-menu,
.mehrazi-player .mp-actions-menu,
.mehrazi-player .mp-dropdown__menu,
.mp-video-player .mp-settings-panel {
    inline-size: min(100vw - 1rem, 18rem);
    min-inline-size: min(100%, 11.5rem);
    max-inline-size: 100%;
}

.mehrazi-player .mp-notification {
    inline-size: min(90vw, 18.75rem);
    max-inline-size: calc(100vw - 1rem);
}

.mehrazi-player .mp-queue-panel {
    inline-size: min(100vw - 1rem, 20rem);
    max-inline-size: calc(100vw - 1rem);
    max-block-size: min(70dvh, 25rem);
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    right: max(0.5rem, env(safe-area-inset-right));
}

[dir="rtl"] .mehrazi-player .mp-queue-panel {
    right: auto;
    left: max(0.5rem, env(safe-area-inset-left));
}

.mehrazi-player .mp-mini-player {
    inline-size: min(100vw - 1rem, 20rem);
    max-inline-size: calc(100vw - 1rem);
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: max(0.5rem, env(safe-area-inset-left));
}

[dir="rtl"] .mehrazi-player .mp-mini-player {
    left: auto;
    right: max(0.5rem, env(safe-area-inset-right));
}

.mp-video-player.is-mini {
    inline-size: min(100vw - 1rem, 22.5rem) !important;
    max-inline-size: calc(100vw - 1rem) !important;
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
}

[dir="rtl"] .mp-video-player.is-mini {
    right: auto !important;
    left: max(0.5rem, env(safe-area-inset-left)) !important;
}

/* Hero guards for archive/single templates that still carry older fixed widths. */
.mehrazi-player .mp-hero-content,
.mehrazi-archive-wrapper .mp-hero-content,
.mehrazi-video-archive .mp-hero-content {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.mehrazi-player .mp-hero-visual,
.mehrazi-archive-wrapper .mp-hero-visual,
.mehrazi-video-archive .mp-hero-visual {
    inline-size: min(100%, 20rem);
    max-inline-size: 100%;
}

.mehrazi-player .mp-hero-cover-art,
.mehrazi-archive-wrapper .mp-hero-cover-art,
.mehrazi-video-archive .mp-hero-cover-art {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1 / 1;
}

/* Phone baseline: stack low-priority controls and keep actions tap-friendly. */
:where(.mehrazi-single-video) .mp-action-btn {
    flex: 1 1 100%;
    justify-content: center;
}

@media (pointer: coarse) {
    :where(.mp-video-modal, .mp-video-player) :is(
        .mp-video-ab-repeat-group,
        .mp-ab-repeat-group
    ) .mp-ab-btn {
        min-inline-size: 44px !important;
        min-block-size: 44px !important;
        padding-inline: 0.625rem !important;
    }
}

/* Tablet (>=640px): two archive columns and larger single cover art budget. */
@media (min-width: 640px) {
    :where(.mp-archive-modern, .mp-template-shell--archive.mp-archive-modern) {
        --mp-archive-modern-grid-cols: 2;
    }

    .mehrazi-player-app.mp-single-shell {
        --mp-single-cover-size: min(16rem, 70vw);
        --mp-single-related-card-size: min(11rem, 44vw);
    }

    :where(.mehrazi-single-video) .mp-action-btn {
        flex: 0 1 auto;
    }

    :where(.mp-video-modal, .mp-video-player) {
        --mp-video-controls-main-padding-inline: 0.75rem;
        --mp-video-controls-right-align: center;
        --mp-video-autoplay-flex: 0 1 auto;
        --mp-video-autoplay-justify: flex-start;
    }

    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) :is(
        .mp-podcast-grid:not(.mp-view-list),
        .mp-podcast-grid--responsive
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Tablet landscape (>=768px): inline modal controls and 3-column archive grid. */
@media (min-width: 768px) {
    :where(.mp-archive-modern, .mp-template-shell--archive.mp-archive-modern) {
        --mp-archive-modern-grid-cols: 3;
    }

    .mehrazi-player-app.mp-single-shell {
        --mp-single-cover-size: min(20rem, 42vw);
        --mp-single-related-card-size: min(12rem, 28vw);
    }

    .mp-template-main--archive {
        --mp-template-main-archive-padding: 2rem;
    }

    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) :is(
        .mp-podcast-grid:not(.mp-view-list),
        .mp-podcast-grid--responsive
    ) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(.mp-video-modal, .mp-video-player) {
        --mp-video-controls-right-flex: 1 1 auto;
        --mp-video-controls-right-justify: flex-end;
        --mp-video-playlist-sidebar-width: min(24rem, 70vw);
    }

    :where(.mp-video-modal, .mp-video-player) .mp-video-controls-main {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    :where(.mp-video-modal, .mp-video-player) .mp-video-controls-left {
        flex: 1 1 auto;
        flex-wrap: nowrap;
    }

    .mp-video-modal { --mp-video-channel-name-max: 14rem; }

    .mehrazi-player .mp-queue-panel {
        inline-size: min(24rem, 70vw);
    }

    .mehrazi-player .mp-mini-player {
        inline-size: min(22rem, 60vw);
    }

}

/* Desktop (>=1024px): 4-column archive grid and roomier control spacing. */
@media (min-width: 1024px) {
    :where(.mp-archive-modern, .mp-template-shell--archive.mp-archive-modern) {
        --mp-archive-modern-grid-cols: 4;
    }

    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) :is(
        .mp-podcast-grid:not(.mp-view-list),
        .mp-podcast-grid--responsive
    ) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    :where(.mp-video-modal, .mp-video-player) .mp-video-controls-main {
        gap: 0.75rem;
    }

    :where(.mp-video-modal, .mp-video-player) .mp-video-controls-right {
        gap: 0.5rem;
    }

    .mp-video-modal { --mp-video-channel-name-max: 18rem; }

    .mehrazi-player .mp-mini-player {
        inline-size: min(24rem, 40vw);
    }

}

/* Wide desktop (>=1280px): larger containers without hard jumps. */
@media (min-width: 1280px) {
    .mp-video-modal { --mp-video-channel-name-max: 20rem; }
}

/* ==========================================================================
   Runtime Responsive Hardening
   Final mobile-first overrides after legacy player/video bundles.
   ========================================================================== */

:where(.mehrazi-player, .mp-video-player, .mp-video-modal) {
    --mp-control-hit-size: clamp(44px, 10vw, 48px);
    --mp-control-icon-size: clamp(16px, 4vw, 20px);
    --mp-video-main-play-size: clamp(48px, 13vw, 56px);
}

/* Rich-content overflow safety for all template surfaces. */
:where(
    .mp-template-shell,
    .mehrazi-player-app,
    .mehrazi-single-video,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive
) :is(
    iframe,
    embed,
    object,
    table,
    pre,
    .wp-block-table,
    .wp-block-embed,
    .wp-block-embed__wrapper,
    .wp-caption
) {
    max-inline-size: 100%;
}

:where(
    .mp-template-shell,
    .mehrazi-player-app,
    .mehrazi-single-video,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive
) table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(
    .mp-template-shell,
    .mehrazi-player-app,
    .mehrazi-single-video,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive
) pre {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

:where(.mp-template-shell, .mehrazi-player-app) :is(.alignwide, .alignfull) {
    max-inline-size: 100%;
    margin-inline: auto;
}

:where(.mehrazi-player:not(.mp-video-player)) {
    --mp-audio-cover-size: clamp(4rem, 24vw, 6.5rem);
    --mp-audio-play-size: clamp(2.75rem, 12vw, 3.5rem);
}

:where(.mehrazi-player, .mp-video-player, .mp-video-modal) :is(
    .mehrazi-player-container,
    .mp-video-player-container,
    .mp-core-section,
    .mp-controls-grid,
    .mp-controls-secondary,
    .mp-controls-main,
    .mp-controls-utility,
    .mp-video-controls-wrapper,
    .mp-video-progress-container,
    .mp-video-controls-main,
    .mp-video-controls-left,
    .mp-video-controls-right,
    .mp-video-volume-container,
    .mp-video-settings-container
) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* Audio player hardening */
:where(.mehrazi-player:not(.mp-video-player)) .mp-visual-section {
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.75rem, 3vw, 1rem);
}

:where(.mehrazi-player:not(.mp-video-player)) .mp-controls-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.5rem, 2.5vw, 0.875rem);
}

:where(.mehrazi-player:not(.mp-video-player)) :is(
    .mp-controls-secondary,
    .mp-controls-main,
    .mp-controls-utility
) {
    flex: 1 1 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

:where(.mehrazi-player:not(.mp-video-player)) .mp-controls-main {
    order: -1;
}

:where(.mehrazi-player:not(.mp-video-player)) :is(
    .mp-play,
    .mp-prev,
    .mp-next,
    .mp-shuffle,
    .mp-smart-shuffle,
    .mp-repeat,
    .mp-mute,
    .mp-like-toggle,
    .mp-share,
    .mp-download,
    .mp-toggle-playlist,
    .mp-speed-btn,
    .mp-pip-toggle,
    .mp-fullscreen-toggle,
    .mp-eq-toggle,
    .mp-info-toggle,
    .mp-sleep-timer,
    .mp-queue-toggle,
    .mp-actions-toggle
) {
    min-inline-size: var(--mp-control-hit-size);
    min-block-size: var(--mp-control-hit-size);
    flex: 0 0 auto;
}

/* Video player + modal hardening */
:where(.mp-video-player, .mp-video-modal) .mp-video-controls-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.375rem, 2vw, 0.625rem);
    padding-inline: clamp(0.625rem, 2.8vw, 1rem);
    padding-block-end: clamp(0.625rem, 2.6vw, 1rem);
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-video-controls-left,
    .mp-video-controls-right
) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.375rem, 2vw, 0.625rem);
    flex: 1 1 100%;
    justify-content: flex-start;
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-video-control-btn,
    .mp-video-shortcuts-info-btn,
    .mp-video-center-play,
    .mp-video-playlist-toggle-btn,
    .mp-video-download-btn
) {
    inline-size: var(--mp-control-hit-size) !important;
    block-size: var(--mp-control-hit-size) !important;
    min-inline-size: 44px;
    min-block-size: 44px;
    flex: 0 0 auto;
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-settings-advanced,
    .mp-video-settings-section.mp-settings-advanced
) :is(
    .mp-advanced-actions,
    .mp-video-advanced-actions
) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-settings-advanced,
    .mp-video-settings-section.mp-settings-advanced
) :is(
    .mp-advanced-actions,
    .mp-video-advanced-actions
) :is(
    .mp-video-control-btn,
    .mp-prev,
    .mp-next,
    .mp-video-skip-back,
    .mp-video-skip-forward,
    .mp-shortcuts-toggle
) {
    inline-size: var(--mp-control-hit-size) !important;
    block-size: var(--mp-control-hit-size) !important;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0 !important;
    border-radius: 999px !important;
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-settings-advanced,
    .mp-video-settings-section.mp-settings-advanced
) :is(
    .mp-advanced-actions,
    .mp-video-advanced-actions
) .mp-video-autoplay-wrap {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.25rem;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-modal-close-top {
    inline-size: var(--mp-control-hit-size);
    block-size: var(--mp-control-hit-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.25rem, 5vw, 1.5rem);
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-controls-main .mp-play,
    .mp-video-play-pause
) {
    inline-size: var(--mp-video-main-play-size) !important;
    block-size: var(--mp-video-main-play-size) !important;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-time-display {
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: clamp(0.72rem, 2.4vw, 0.82rem);
}

:where(.mp-video-player, .mp-video-modal) .mp-video-volume-slider-wrap {
    flex: 1 1 clamp(4.5rem, 18vw, 8.75rem);
    min-inline-size: clamp(4.5rem, 16vw, 6rem);
    max-inline-size: 8.75rem;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-volume-slider-wrap--desktop {
    display: none;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu {
    inline-size: min(100vw - 1rem, 18rem);
    max-inline-size: calc(100vw - 1rem);
}

:where(.mp-video-player, .mp-video-modal) :is(
    .mp-settings-panel,
    .mp-video-settings-menu
) button {
    inline-size: auto !important;
    block-size: auto !important;
    min-inline-size: 44px;
    min-block-size: 36px;
    padding-inline: 0.625rem !important;
    padding-block: 0.375rem !important;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-playlist-sidebar {
    inline-size: min(86vw, 20rem);
    max-inline-size: calc(100vw - 1rem);
}

:where(.mp-video-player, .mp-video-modal) .mp-video-recommendation-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
}

:where(.mp-video-player, .mp-video-modal) .mp-video-recommendation-thumb {
    inline-size: clamp(4.5rem, 22vw, 6rem);
    block-size: auto;
    aspect-ratio: 16 / 9;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-gradient-bottom {
    block-size: clamp(6rem, 20vw, 8.75rem);
}

:where(.mp-video-player, .mp-video-modal) .mp-play-big {
    inline-size: clamp(3.25rem, 16vw, 5rem);
    block-size: clamp(3.25rem, 16vw, 5rem);
    min-inline-size: 44px;
    min-block-size: 44px;
}

:where(.mp-video-player, .mp-video-modal) .mp-play-big svg {
    inline-size: clamp(1.5rem, 6vw, 2.25rem);
    block-size: clamp(1.5rem, 6vw, 2.25rem);
    margin-inline-start: clamp(1px, 0.4vw, 4px);
}

:where(.mp-video-player, .mp-video-modal) .mp-dt-icon {
    inline-size: clamp(3rem, 14vw, 5rem);
    block-size: clamp(3rem, 14vw, 5rem);
}

:where(.mp-video-player, .mp-video-modal) .mp-dt-icon svg {
    inline-size: clamp(1.25rem, 5vw, 2rem);
    block-size: clamp(1.25rem, 5vw, 2rem);
}

:where(.mp-video-player, .mp-video-modal) .mp-preview-video {
    inline-size: clamp(6rem, 28vw, 10rem);
    block-size: auto;
    aspect-ratio: 16 / 9;
}

:where(.mp-video-player, .mp-video-modal) .mp-buffering-spinner {
    inline-size: clamp(2.75rem, 12vw, 3.75rem);
    block-size: clamp(2.75rem, 12vw, 3.75rem);
}

@media (min-width: 640px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-main {
        order: 0;
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-controls-secondary,
        .mp-controls-main,
        .mp-controls-utility
    ) {
        flex: 1 1 0;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-secondary {
        justify-content: flex-start;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-utility {
        justify-content: flex-end;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu {
        inline-size: min(90vw, 20rem);
    }
}

@media (min-width: 768px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-grid {
        flex-wrap: nowrap;
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-controls-secondary,
        .mp-controls-main,
        .mp-controls-utility
    ) {
        flex-wrap: nowrap;
        flex: 1 1 0;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-controls-main {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-controls-left {
        flex: 1 1 auto;
        flex-wrap: nowrap;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-controls-right {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-volume-slider-wrap--desktop {
        display: block;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu {
        inline-size: min(90vw, 22rem);
    }
}

@media (min-width: 1024px) {
    :where(.mp-video-player, .mp-video-modal) {
        --mp-control-hit-size: 48px;
        --mp-video-main-play-size: clamp(52px, 5vw, 60px);
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-recommendation-thumb {
        inline-size: clamp(5.25rem, 12vw, 6.5rem);
    }
}

@media (min-width: 1280px) {
    :where(.mehrazi-player:not(.mp-video-player)) {
        --mp-audio-cover-size: clamp(5rem, 12vw, 7rem);
    }

    :where(.mp-video-player, .mp-video-modal) .mp-preview-video {
        inline-size: clamp(7rem, 10vw, 10.5rem);
    }
}

/* Mobile compact mode for heavy video control rows. */
@media (max-width: 767px) {
    :where(.mp-video-player, .mp-video-modal) {
        --mp-control-hit-size: 42px;
    }

    /* Hide only on the primary bar; keep items available inside settings panel. */
    :where(.mp-video-player, .mp-video-modal) :is(
        .mp-video-controls-left > .mp-video-skip-back,
        .mp-video-controls-left > .mp-video-skip-forward,
        .mp-controls-main > .mp-prev,
        .mp-controls-main > .mp-next,
        .mp-video-controls-right > .mp-video-autoplay-wrap,
        .mp-video-controls-right > .mp-video-download-btn,
        .mp-video-controls-right > .mp-video-share-btn,
        .mp-video-controls-right > .mp-shortcuts-toggle,
        .mp-controls-secondary > .mp-shortcuts-toggle,
        .mp-controls-utility > .mp-action-buttons,
        .mp-video-controls-wrapper > .mp-video-shortcuts-info-btn
    ) {
        display: none !important;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-controls-left {
        flex: 1 1 auto;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-controls-right {
        flex: 0 1 auto;
        margin-inline-start: auto;
        justify-content: flex-end;
    }

    :where(.mp-video-player, .mp-video-modal) :is(
        .mp-video-controls-left,
        .mp-video-controls-right,
        .mp-controls-secondary,
        .mp-controls-main,
        .mp-controls-utility
    ) {
        gap: 0.375rem;
    }
}

@media (max-width: 479px) {
    :where(.mp-video-player, .mp-video-modal) .mp-video-progress-container {
        padding-inline: 0.5rem !important;
        padding-block-end: 0.5rem !important;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-controls-main {
        padding-inline: 0.5rem !important;
        padding-block-end: 0.5rem !important;
    }

    :where(.mp-video-player, .mp-video-modal) .mp-video-time-display {
        font-size: 0.72rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-controls-secondary,
        .mp-controls-main,
        .mp-controls-utility
    ) {
        gap: 0.375rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-now-playing-title {
        font-size: 0.95rem;
    }
}

@media (max-height: 520px) {
    :where(.mp-video-player, .mp-video-modal) :is(
        .mp-video-settings-menu,
        .mp-settings-panel
    ) {
        max-block-size: min(78dvh, 18rem);
    }
}

/* Touch devices: keep audio volume slider usable without hover. */
@media (hover: none), (pointer: coarse) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-volume-slider {
        inline-size: clamp(3.75rem, 24vw, 5.5rem);
        overflow: visible;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-volume-wrap:hover .mp-volume-slider {
        inline-size: clamp(3.75rem, 24vw, 5.5rem);
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-volume-handle {
        opacity: 1;
    }
}

/* Podcast/audio player: responsive hardening */
:where(.mehrazi-player:not(.mp-video-player)) {
    --mp-audio-settings-inline: min(100vw - 1rem, 21rem);
}

:where(.mehrazi-player:not(.mp-video-player)) .mehrazi-player-container {
    inline-size: 100%;
    max-inline-size: 100%;
}

:where(.mehrazi-player:not(.mp-video-player)) .mp-info-wrap {
    min-inline-size: 0;
    flex: 1 1 auto;
}

:where(.mehrazi-player:not(.mp-video-player)) :is(
    .mp-now-playing-title,
    .mp-now-playing-artist
) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

:where(.mehrazi-player:not(.mp-video-player)) .mp-time-display {
    min-inline-size: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
}

:where(.mehrazi-player:not(.mp-video-player)) .mp-settings-wrap {
    position: relative;
}

:where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
    inline-size: var(--mp-audio-settings-inline);
    max-inline-size: calc(100vw - 1rem);
    max-block-size: min(72dvh, 24rem);
    overflow: auto;
    overscroll-behavior: contain;
    right: auto;
    left: auto;
    inset-inline-end: 0;
    inset-inline-start: auto;
}

[dir="rtl"] :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

:where(.mehrazi-player:not(.mp-video-player)) :is(
    .mp-settings-actions,
    .mp-advanced-actions
) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

:where(.mehrazi-player:not(.mp-video-player)) :is(
    .mp-settings-actions,
    .mp-advanced-actions
) > * {
    min-inline-size: 0;
    max-inline-size: 100%;
}

:where(.mehrazi-player:not(.mp-video-player)) :is(
    .mp-settings-actions,
    .mp-advanced-actions
) :is(
    button,
    a,
    .mp-btn,
    .mp-audio-enhance,
    .mp-download
) {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
}

@media (max-width: 639px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-grid {
        gap: 0.5rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-wrap {
        margin-inline-start: auto;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
        inline-size: min(100vw - 0.75rem, 19rem);
        max-inline-size: calc(100vw - 0.75rem);
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-settings-actions,
        .mp-advanced-actions
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-visual-section {
        align-items: flex-start;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-cover-wrap {
        inline-size: clamp(3.75rem, 22vw, 4.5rem);
        block-size: clamp(3.75rem, 22vw, 4.5rem);
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-time-display {
        font-size: 0.72rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
        inline-size: calc(100vw - 0.75rem);
        max-inline-size: calc(100vw - 0.75rem);
    }
}

@media (max-width: 390px) {
    :where(.mehrazi-player:not(.mp-video-player)) {
        --mp-audio-cover-size: clamp(3.5rem, 21vw, 4.25rem);
        --mp-audio-play-size: clamp(2.5rem, 11vw, 3rem);
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-grid {
        gap: 0.375rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-controls-secondary,
        .mp-controls-main,
        .mp-controls-utility
    ) {
        gap: 0.3125rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-volume-wrap {
        gap: 0.25rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-volume-slider {
        inline-size: clamp(3rem, 18vw, 4rem);
    }

    :where(.mehrazi-player:not(.mp-video-player).mp-minimal-controls) :is(
        .mp-controls-secondary,
        .mp-controls-utility
    ) {
        flex: 0 1 auto;
    }

    :where(.mehrazi-player:not(.mp-video-player).mp-minimal-controls) .mp-controls-main {
        flex: 1 1 auto;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
        max-block-size: min(70dvh, 20rem);
    }
}

@media (max-width: 359px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
        inline-size: calc(100vw - 0.5rem);
        max-inline-size: calc(100vw - 0.5rem);
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-settings-actions,
        .mp-advanced-actions
    ) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-height: 520px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-settings-panel {
        max-block-size: min(78dvh, 18rem);
    }
}

/* Final responsive polish: playlist, waveform progress, compact controls */

:where(.mehrazi-player, .mp-video-player) .mp-playlist-section {
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: min(56dvh, 24rem);
    overscroll-behavior: contain;
}

:where(.mehrazi-player, .mp-video-player) .mp-playlist-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

:where(.mehrazi-player, .mp-video-player) .mp-search-box {
    flex: 1 1 100%;
    max-inline-size: none;
}

:where(.mehrazi-player, .mp-video-player) .mp-playlist-tracks {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

:where(.mehrazi-player, .mp-video-player) .mp-track {
    padding: 0.625rem;
    gap: 0.625rem;
}

:where(.mehrazi-player, .mp-video-player) .mp-track-meta {
    margin-inline-start: auto;
}

:where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
    .mp-progress-track,
    .mp-video-progress-bar
) {
    position: relative;
    overflow: hidden;
}

:where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
    .mp-progress-waveform,
    .mp-video-progress-waveform
) {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(1px, 1fr);
    align-items: end;
    gap: 1px;
    opacity: 0.72;
    pointer-events: none;
}

:where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
    .mp-progress-waveform,
    .mp-video-progress-waveform
) .mp-wave-bar {
    display: block;
    inline-size: 100%;
    min-block-size: 16%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    transition: background-color 0.14s linear, opacity 0.14s linear;
    opacity: 0.72;
}

:where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
    .mp-progress-waveform,
    .mp-video-progress-waveform
) .mp-wave-bar.is-played {
    background: var(--mp-video-progress-color, #ff0000);
    opacity: 1;
}

:where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
    .mp-progress-played,
    .mp-video-progress-played
) {
    z-index: 2;
}

:where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
    .mp-progress-buffered,
    .mp-video-progress-buffered
) {
    z-index: 1;
}

:where(.mp-video-player, .mp-video-player-container).is-live-stream :is(
    .mp-core-section,
    .mp-video-controls-wrapper,
    .mp-video-overlay-play,
    .mp-video-title-overlay,
    .mp-shortcuts-guide,
    .mp-video-shortcuts-guide,
    .mp-timeline-preview,
    .mp-video-center-play,
    .mp-video-channel-overlay,
    .mp-video-shortcuts-info-btn,
    .mp-video-modal-title
) {
    display: none !important;
}

:where(.mp-video-player, .mp-video-player-container).is-live-stream .mp-video-live-strip {
    display: inline-flex !important;
}

@media (max-width: 767px) {
    :where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
        .mp-controls-secondary > .mp-smart-shuffle,
        .mp-controls-secondary > .mp-shuffle,
        .mp-controls-secondary > .mp-repeat,
        .mp-controls-secondary > .mp-toggle-playlist,
        .mp-video-controls-right > .mp-video-aspect-toggle,
        .mp-video-controls-right > .mp-video-ab-repeat-group,
        .mp-video-controls-right > .mp-video-playlist-toggle-btn,
        .mp-video-controls-right > .mp-video-download-btn,
        .mp-video-controls-right > .mp-video-share-btn,
        .mp-video-controls-right > .mp-video-autoplay-wrap,
        .mp-controls-utility > .mp-aspect-toggle,
        .mp-controls-utility > .mp-ab-repeat-group,
        .mp-controls-utility > .mp-shortcuts-toggle,
        .mp-controls-utility > .mp-action-buttons
    ) {
        display: none !important;
    }

    :where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
        .mp-controls-grid,
        .mp-video-controls-main
    ) {
        align-items: center;
        justify-content: center;
        gap: 0.375rem 0.5rem;
    }

    :where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
        .mp-controls-main,
        .mp-controls-utility,
        .mp-video-controls-left,
        .mp-video-controls-right
    ) {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (max-width: 479px) {
    :where(.mehrazi-player, .mp-video-player) .mp-playlist-section {
        max-block-size: min(52dvh, 20rem);
    }

    :where(.mehrazi-player, .mp-video-player) .mp-track-cover {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-track-title {
        font-size: 0.85rem;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-track-artist,
    :where(.mehrazi-player, .mp-video-player) .mp-track-duration {
        font-size: 0.72rem;
    }

    :where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
        .mp-progress-percent,
        .mp-video-time-separator
    ) {
        display: none;
    }
}

@media (hover: none), (pointer: coarse) {
    :where(.mp-video-player, .mp-video-modal, .mp-video-player-container) :is(
        .mp-progress-track,
        .mp-video-progress-bar
    ) {
        transition: none !important;
    }

    :where(.mp-video-player, .mp-video-player-container).is-idle :is(
        .mp-core-section,
        .mp-video-controls-wrapper
    ) {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ==========================================================================
   User Theme Overrides: Dark Glass + No Surface Background + Extra Responsive
   ========================================================================== */

/* Keep outer wrappers/background surfaces transparent. */
:where(
    .mp-template-shell--player,
    .mp-template-shell--video-player,
    .mp-layout-shell,
    .mehrazi-player,
    .mp-video-player
) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Legacy single-video wrapper should never paint a white surface. */
.mehrazi-archive-wrapper.mehrazi-single-video.mp-single-video.mp-template-stack.mp-template-stack--spaced {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.mehrazi-archive-wrapper.mehrazi-single-video.mp-single-video.mp-template-stack.mp-template-stack--spaced::before,
.mehrazi-archive-wrapper.mehrazi-single-video.mp-single-video.mp-template-stack.mp-template-stack--spaced::after {
    background: transparent !important;
    background-image: none !important;
}

/* گلس‌مورف بدون بک‌گراند — فقط شفاف + بلور، پس‌زمینهٔ صفحه نمایان */
:where(.mehrazi-player:not(.mp-video-player), .mp-video-player) .mehrazi-player-container,
:where(.mp-video-player, .mp-video-modal) .mp-video-player-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 8px 24px 48px -16px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
}

/* ویدیو استیج بدون پنل تیره */
:where(.mp-video-player, .mp-video-modal) .mp-video-wrapper {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* پنل‌های شناور هم‌سبک گلس بدون بک‌گراند */
:where(.mehrazi-player, .mp-video-player, .mp-video-modal) :is(
    .mp-settings-panel,
    .mp-video-settings-menu,
    .mp-playlist-section,
    .mp-track,
    .mp-video-playlist-sidebar,
    .mp-video-playlist-item
) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 991px) {
    :where(.mehrazi-player, .mp-video-player) .mehrazi-player-container {
        padding: clamp(0.75rem, 2.2vw, 1rem);
    }

    :where(.mehrazi-player, .mp-video-player) .mp-controls-grid {
        gap: 0.5rem;
    }
}

@media (max-width: 767px) {
    :where(.mehrazi-player:not(.mp-video-player)) .mp-controls-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    :where(.mehrazi-player:not(.mp-video-player)) :is(
        .mp-controls-secondary,
        .mp-controls-main,
        .mp-controls-utility
    ) {
        justify-content: center;
        flex-wrap: wrap;
    }

    :where(.mehrazi-player:not(.mp-video-player)) .mp-visual-section {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479px) {
    :where(.mehrazi-player, .mp-video-player, .mp-video-modal) :is(
        .mp-btn,
        .mp-video-control-btn,
        .mp-play,
        .mp-prev,
        .mp-next
    ) {
        min-inline-size: 40px;
        min-block-size: 40px;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-settings-panel,
    :where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu {
        inline-size: min(100vw - 0.75rem, 18.5rem);
    }
}

/* Keep centered transport buttons visible on compact layouts for the new YT-style skins. */
@media (max-width: 767px) {
    .mp-video-player.mp-layout-youtube .mp-video-center-controls > .mp-prev,
    .mp-video-player.mp-layout-youtube .mp-video-center-controls > .mp-next,
    .mp-video-player.mp-layout-youtube .mp-video-center-controls > .mp-video-skip-back,
    .mp-video-player.mp-layout-youtube .mp-video-center-controls > .mp-video-skip-forward,
    .mp-video-modal.mp-layout-youtube .mp-video-center-controls > .mp-video-skip-back,
    .mp-video-modal.mp-layout-youtube .mp-video-center-controls > .mp-video-skip-forward {
        display: inline-flex !important;
    }
}

/* Keep the YouTube-style settings rows full-width in case late responsive layers tighten generic button sizing. */
:where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu.mp-yt-settings-sheet {
    inline-size: min(92vw, 35rem) !important;
    max-inline-size: calc(100vw - 0.75rem) !important;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu.mp-yt-settings-sheet .mp-yt-settings-row {
    inline-size: 100% !important;
    min-inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 3rem !important;
    display: grid !important;
    grid-template-columns: 1.45rem minmax(0, 1fr) auto auto !important;
    justify-content: initial !important;
    align-items: center !important;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu.mp-yt-settings-sheet .mp-yt-settings-row--switch {
    grid-template-columns: 1.45rem minmax(0, 1fr) auto !important;
}

:where(.mp-video-player, .mp-video-modal) .mp-video-settings-menu.mp-yt-settings-sheet :is(
    .mp-yt-settings-label,
    .mp-yt-settings-value,
    .mp-yt-settings-chevron
) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Unified Section System (Archive + Single)
   ========================================================================== */
:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) {
    --mp-unified-panel-bg: rgba(8, 14, 28, 0.72);
    --mp-unified-panel-border: rgba(148, 163, 184, 0.22);
    --mp-unified-panel-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
    --mp-unified-link: var(--mp-primary, #d4af37);
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) :is(
    .mp-ui-block--hero,
    .mp-ui-block--filters,
    .mp-ui-block--grid,
    .mp-ui-block--related,
    .mp-ui-block--info,
    .mp-ui-block--carousels
) {
    border: 1px solid var(--mp-unified-panel-border);
    border-radius: 1rem;
    background: var(--mp-unified-panel-bg);
    box-shadow: var(--mp-unified-panel-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) :is(
    .mp-ui-block--grid,
    .mp-ui-block--related,
    .mp-ui-block--carousels,
    .mp-ui-block--info
) {
    padding: clamp(0.85rem, 1.7vw, 1.25rem);
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) .mp-ui-block--controls {
    display: grid;
    gap: 0.85rem;
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) :is(
    .mp-section-header--archive,
    .mp-section-header--related,
    .mp-single-related-header
) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) :is(
    .mp-section-title--archive,
    .mp-section-title--related,
    .mp-single-section-title.mp-section-title
) {
    margin: 0;
    font-size: clamp(1.02rem, 1.2vw, 1.25rem);
    line-height: 1.35;
    font-weight: 700;
    color: var(--mp-text, #fff);
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) :is(
    .mp-section-link--related,
    .mp-single-related-link,
    .mp-view-all
) {
    color: var(--mp-unified-link);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

:where(
    .mp-ui-page,
    .mehrazi-archive-wrapper,
    .mehrazi-video-archive,
    .mehrazi-single-video,
    .mp-single-video,
    .mehrazi-player-app
) :is(
    .mp-section-link--related,
    .mp-single-related-link,
    .mp-view-all
):hover {
    text-decoration: underline;
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-archive-filters .mp-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-archive-filters .mp-filter-group {
    flex: 1 1 28rem;
    min-inline-size: 0;
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-archive-filters .mp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-archive-filters :is(
    .mp-chip,
    .mp-sort-btn
) {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(17, 24, 39, 0.55);
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-grid-container--archive {
    margin-block-start: 0.85rem;
}

:where(.mehrazi-player-app, .mehrazi-single-video, .mp-single-video) .mp-related-section--horizontal-scroll .mp-related-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block-end: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

:where(.mehrazi-player-app, .mehrazi-single-video, .mp-single-video) .mp-related-section--horizontal-scroll .mp-related-grid::-webkit-scrollbar {
    display: none;
}

:where(.mehrazi-player-app, .mehrazi-single-video, .mp-single-video) .mp-related-section--horizontal-scroll .mp-related-grid > :is(
    .mp-podcast-card,
    .mp-video-card
) {
    flex: 0 0 min(15.5rem, 72vw);
    scroll-snap-align: start;
}

@media (max-width: 920px) {
    :where(
        .mp-ui-page,
        .mehrazi-archive-wrapper,
        .mehrazi-video-archive,
        .mehrazi-single-video,
        .mp-single-video,
        .mehrazi-player-app
    ) :is(
        .mp-ui-block--grid,
        .mp-ui-block--related,
        .mp-ui-block--carousels,
        .mp-ui-block--info
    ) {
        padding: 0.9rem;
    }
}

@media (max-width: 640px) {
    :where(
        .mp-ui-page,
        .mehrazi-archive-wrapper,
        .mehrazi-video-archive,
        .mehrazi-single-video,
        .mp-single-video,
        .mehrazi-player-app
    ) :is(
        .mp-section-header--archive,
        .mp-section-header--related,
        .mp-single-related-header
    ) {
        gap: 0.55rem;
    }

    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-archive-filters .mp-filter-extras,
    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-archive-filters .mp-sort-dropdown {
        inline-size: 100%;
    }

    :where(.mehrazi-player-app, .mehrazi-single-video, .mp-single-video) .mp-related-section--horizontal-scroll .mp-related-grid > :is(
        .mp-podcast-card,
        .mp-video-card
    ) {
        flex-basis: min(13.5rem, 80vw);
    }
}