/* ============================================================
   vxm — mobile app shell (Netflix-style app experience on web)
   Everything is scoped to ≤991.98px (phones + tablets). Desktop
   is untouched. The native app webview never renders this markup
   (body.html gates on $is_mobileapp). Kill switch:
   config disable_mobile_web_ui = '1'.
   ============================================================ */

/* Inline Lucide icon (vodlix_lucide()) — inherits color, sized per use */
.vxm-ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
/* solid variant — Lucide is outline-only; play/CTA glyphs read better filled */
.vxm-ico.vxi-fill {
    fill: currentColor;
}

/* Long card titles marquee-scroll on one line instead of wrapping/clamping.
   The mobile JS (mobile_nav.html) adds .vxm-marquee + the scroll distance only
   when a title actually overflows; text-indent animation needs no inner span,
   so it survives Vue's v-html re-renders. */
.vxm-marquee {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    animation: vxm-marquee var(--vxm-mq-dur, 12s) ease-in-out infinite;
}
@keyframes vxm-marquee {
    0%, 14%   { text-indent: 0; }
    46%, 62%  { text-indent: calc(-1 * var(--vxm-mq-dist, 0px)); }
    92%, 100% { text-indent: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .vxm-marquee { animation: none; }
}

/* Tab bar markup renders for every visitor — keep it out of the
   desktop flow entirely; the media query below reveals it. */
.vxm-tabbar {
    display: none;
}

/* ============================================================
   Profile & More screen (route /more) — app-style stacked rows.
   Base styles apply at every width (desktop just gets the same
   centered column); the media query only adds mobile tweaks.
   ============================================================ */

.vxm-more {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.vxm-more__title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px;
}

.vxm-more__profileBlock {
    margin-bottom: 24px;
}

.vxm-more__profileLabel {
    color: #9b9ba3;
    font-size: 15px;
    margin-bottom: 14px;
}

.vxm-more__profile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* horizontal switcher — all profiles, scrolls if many (max 5).
   Padding gives the current-profile outline room so overflow-x doesn't
   clip the ring; negative margin keeps the row flush with the edge. */
.vxm-more__profiles {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 5px 5px 4px;
    margin: -5px -5px 0;
    scrollbar-width: none;
}

.vxm-more__profiles::-webkit-scrollbar {
    display: none;
}

.vxm-more__profiles .vxm-more__profile {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.vxm-more__profiles .vxm-more__profile--current .vxm-more__avatar {
    outline: 2px solid var(--vod-primary, #e50914);
    outline-offset: 2px;
}

.vxm-more__profiles .vxm-more__profile[disabled] {
    cursor: default;
}

.vxm-more__avatar {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.vxm-more__avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #cfcfd6;
    font-size: 34px;
}
.vxm-more__avatar--empty .vxm-ico {
    width: 34px;
    height: 34px;
    stroke-width: 1.5;
}

.vxm-more__profileName {
    color: #fff;
    font-weight: 600;
}

.vxm-more__manage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: #cfcfd6;
    font-weight: 600;
    text-decoration: none;
}

.vxm-more__manage:hover {
    color: #fff;
    text-decoration: none;
}

.vxm-more__guest {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.vxm-more__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.vxm-more__heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a8a93;
    margin: 4px 0 2px;
}

.vxm-more__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.vxm-more__row:hover,
.vxm-more__row:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}

.vxm-more__row.text-danger:hover {
    color: #ff6b6b;
}

/* Language picker — native <details>, no JS toggle needed */
.vxm-more__langWrap {
    border-radius: 10px;
}

.vxm-more__rowSummary {
    cursor: pointer;
    list-style: none;
}

.vxm-more__rowSummary::-webkit-details-marker {
    display: none;
}

.vxm-more__langWrap[open] .vxm-more__rowSummary .mdi-chevron-down {
    transform: rotate(180deg);
}

.vxm-more__langList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 4px 2px;
}

.vxm-more__langBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #cfcfd6;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

.vxm-more__langBtn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.vxm-more__langBtn.is-active {
    color: #fff;
    font-weight: 700;
}

/* Pills + category sheet are mobile-only chrome */
.vxm-pills,
.vxm-sheet {
    display: none;
}

/* App-like navigation feel: native cross-fade between page loads
   (View Transitions API — progressive; unsupported browsers just
   navigate normally). Scoped to all viewports on purpose: desktop
   benefits too and it cannot break layout. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
}

@media (max-width: 991.98px) {

    :root {
        --vxm-tabbar-h: 56px;
        --vxm-header-h: 68px;
    }

    /* ---- Netflix-style filter pills under the top bar -------- */
    .vxm-pills {
        position: fixed;
        top: var(--vxm-header-h);
        inset-inline: 0;
        z-index: 1029; /* just under the tab bar / header */
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px 10px;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .vxm-pills.is-hidden {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    /* many pills (Live TV + group pages) scroll horizontally like the app */
    .vxm-pills {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .vxm-pills::-webkit-scrollbar {
        display: none;
    }

    /* the pills' Categories sheet replaces the cateselector block
       (title + Genres dropdown) on the movies / tv-shows homes and
       on the per-category pages */
    body.page-movies .vxb,
    body.page-tv_shows .vxb,
    body.page-video_categories .vxb,
    body.page-series_categories .vxb,
    body.page-all-movies .vxb,
    body.page-all-tv-shows .vxb {
        display: none !important;
    }

    /* group pages: the pills carry the breadcrumb, so hide the server
       heading + breadcrumb row (the pills replace them) */
    body.page-content_list_group .breadcrumbs,
    body.page-content_list_group .insidePadding.mb-5.d-flex.align-items-center {
        display: none !important;
    }

    .vxm-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 7px 14px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px;
        background: rgba(10, 10, 15, 0.35);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .vxm-pill:hover,
    .vxm-pill:focus {
        color: #fff;
        text-decoration: none;
    }

    .vxm-pill.is-active {
        background: rgba(255, 255, 255, 0.18);
        border-color: transparent;
    }

    .vxm-pill--reset {
        padding: 7px 9px;
    }

    .vxm-pill--menu .mdi,
.vxm-pill--menu .vxm-ico {
        font-size: 15px;
        line-height: 1;
    }

    /* ---- Categories bottom sheet ----------------------------- */
    .vxm-sheet.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040; /* above tab bar, below Bootstrap modals */
    }

    .vxm-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .vxm-sheet__panel {
        position: absolute;
        bottom: 0;
        inset-inline: 0;
        max-height: 75dvh;
        display: flex;
        flex-direction: column;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 16px 16px 0 0;
        background: #17171c;
    }

    .vxm-sheet__title {
        font-size: 17px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
    }

    .vxm-sheet__list {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .vxm-sheet__link {
        padding: 13px 4px;
        color: #cfcfd6;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .vxm-sheet__link:hover,
    .vxm-sheet__link:focus {
        color: #fff;
        text-decoration: none;
    }

    .vxm-sheet__closeBtn {
        align-self: center;
        margin-top: 14px;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #000;
        font-size: 22px;
        cursor: pointer;
    }

    /* ---- bottom tab bar ---------------------------------- */
    .vxm-tabbar {
        position: fixed;
        bottom: 0;
        inset-inline: 0;
        z-index: 1030; /* below Bootstrap modals (1050) */
        display: flex;
        align-items: stretch;
        height: calc(var(--vxm-tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--mobile-bottomNavigationBarColor,
                    var(--vod-body-back-color, #0b0b0f));
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        /* own compositor layer: keeps the fixed bar stable while rails
           and the hero trailer animate behind it */
        transform: translateZ(0);
    }

    .vxm-tabbar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        color: #9b9ba3;
        font-size: 10px;
        line-height: 1.2;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .vxm-tabbar__item:hover,
    .vxm-tabbar__item:focus {
        color: #cfcfd6;
        text-decoration: none;
    }

    .vxm-tabbar__item.is-active {
        color: #fff;
    }

    .vxm-tabbar__item i {
        font-size: 22px;
        line-height: 1;
    }
    .vxm-tabbar__item .vxm-ico {
        width: 23px;
        height: 23px;
    }
    /* active tab: fill the icon slightly for weight (Lucide is stroke-only) */
    .vxm-tabbar__item.is-active .vxm-ico {
        stroke-width: 2.4;
    }

    .vxm-tabbar__item span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
        padding-inline: 4px;
    }

    .vxm-tabbar__avatar {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        object-fit: cover;
    }

    .vxm-tabbar__item.is-active .vxm-tabbar__avatar {
        outline: 2px solid #fff;
        outline-offset: 1px;
    }

    /* Content must never hide behind the fixed bar. The clearance goes on the
       in-flow content wrapper, NOT on body: body is the scroll container here
       (vodlix.css sets overflow-x:hidden, which promotes overflow-y to auto),
       and a scroll container's OWN padding-bottom is dropped from the scrollable
       area — iOS Safari especially — so body padding left the last row hidden
       behind the bar. .contentHolder is a normal in-flow block, so its bottom
       padding reliably reserves the space. :has() keeps it off the pages where
       body.html renders no bar at all (login, signup, profiles gate, webview).
       +16px so the last row has breathing room and isn't read as clipped. */
    body:has(.vxm-tabbar) .contentHolder {
        padding-bottom: calc(var(--vxm-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* The giant transparent LCP-hack image makes Chromium paint a
       ghost duplicate of the fixed tab bar near the top of the
       viewport (its 99vw×99vh composited layer captures the bar's
       first paint). Verified: removing the image removes the ghost.
       The LCP trick is dispensable on mobile. */
    img.vx-lcp-hack {
        display: none;
    }

    /* ---- hide website chrome (app look) ------------------- */
    /* Footer */
    footer.vxf,
    .vxf {
        display: none !important;
    }

    /* Burger + drawer (replaced by the More screen), header
       search (Search tab), language + user dropdowns (both
       move into Profile & More) */
    .vxh__burger,
    .vxh-drawer,
    .vxh__search,
    .vxh__lang,
    .vxh__user {
        display: none !important;
    }

    /* ---- Search screen — app-style big rounded input -------- */
    /* Redundant "All results / <keyword>" heading (also masks the
       pre-existing "/ null" empty-query cosmetic bug on mobile) */
    body.page-search #searchPage h2.h3 {
        display: none;
    }

    body.page-search #searchPage .text-right {
        text-align: start !important;
    }

    body.page-search #searchPage .serachBlock {
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
    }

    body.page-search #searchPage .searchHolder {
        /* vodlix.css pins .searchHolder to width:18%!important (header widget
           sizing) — the search page input must be full-bleed like the app.
           position:relative so the magnify button anchors to the field box
           (NOT display:flex — that stretched the holder taller than the input
           and floated the icon above it). */
        width: 100% !important;
        position: relative;
        overflow: visible;
        text-align: start;
    }

    body.page-search #searchPage .searchBlock {
        width: 100%;
        /* .searchBlock wraps only the input (52px), so a ::before glyph
           anchored here centres reliably — .searchHolder is taller and
           floated the standalone icon above the field */
        position: relative;
    }

    body.page-search #searchPage .searchBlock::before {
        content: "\F0349"; /* mdi-magnify */
        font-family: "Material Design Icons";
        position: absolute;
        inset-inline-start: 14px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        color: #9b9ba3;
        font-size: 20px;
        line-height: 1;
        pointer-events: none;
    }

    body.page-search #searchPage .searchBlock input.form-control {
        width: 100%;
        height: 52px;
        border: 0;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 16px;
        /* leave room for the magnify button pinned on the left */
        padding-inline: 46px 16px;
    }

    /* the standalone magnify button is redundant once the glyph lives on the
       field wrapper's ::before */
    body.page-search #searchPage .searchBtn1 {
        display: none;
    }

    body.page-search #searchPage .btn-group {
        display: flex;
        gap: 8px;
        margin-left: 0 !important;
        width: 100%;
    }

    body.page-search #searchPage .btn-group .btn {
        flex: 1 1 0;
        min-width: 0;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }

    /* recommended-suggestions heading (empty search state) */
    body.page-search .vxm-search-suggest-head {
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        margin: 6px 0 12px;
    }

    /* ---- My List / content-list screens ---------------------- */
    body.page-content_list #lists h2.h3 {
        text-align: center;
        font-weight: 600 !important;
    }

    body.page-content_list #lists .text-center.pt-4 {
        padding: 90px 16px;
        color: #9b9ba3;
        font-size: 16px;
    }

    /* ---- Editors-pick hero: app-style boxed card ------------- */
    /* Design mode comes from config('mobile_editors_pick_design') —
       the same knob the native app reads. The component adds
       .vxe-mob-portrait (default: still 2:3 card, no trailer) or
       .vxe-mob-landscape (16:9 card, trailer allowed, info below). */

    /* Shared card frame — only on the home screens where the hero is
       the first thing under the transparent header + pills */
    body.page-home #new-editorpick,
    body.page-movies #new-editorpick,
    body.page-tv_shows #new-editorpick,
    body.page-content_list_group #new-editorpick {
        margin-top: calc(var(--vxm-header-h) + 58px);
        margin-inline: 16px !important; /* swiper-container sets its own margins */
        width: calc(100% - 32px) !important;
        border-radius: 16px;
        /* the featured swiper forces overflow:visible for the desktop
           billboard bleed — that leaks the next slide past the card */
        overflow: hidden !important;
    }

    /* Group hero: it renders inside #vxe-ep-mount > .vxe-ep-standalone, which
       carries a -42px desktop-overlap margin that swallows the card's own
       margin-top (and margin-collapses through the mount). So clear the
       header+pills on the MOUNT (padding, collapse-proof) and neutralise the
       negative overlap + the card margin here. */
    body.page-content_list_group #vxe-ep-mount {
        padding-top: calc(var(--vxm-header-h) + 58px);
    }
    body.page-content_list_group #new-editorpick {
        margin-top: 0 !important;
    }
    body.page-content_list_group .featureSlider.vxe-ep-standalone {
        margin-top: 0 !important;
    }

    /* -- portrait: Netflix-style 2:3 poster card ---------------- */
    /* the featured swiper sizes slides for the desktop billboard
       (fixed width/height) — pin everything to the card box */
    .vxe-mob-portrait .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    .vxe-mob-portrait .swiper-slide .relative,
    .vxe-mob-portrait .relative {
        height: auto !important;
    }

    .vxe-mob-portrait .ratio-16x9,
    .vxe-mob-portrait .ratio.ratio-16x9 {
        aspect-ratio: 2 / 3;
        width: 100% !important;
        height: auto !important; /* billboard CSS pins a viewport height */
        padding-top: 0 !important;
        padding-bottom: 0 !important; /* the ratio classes use padding hacks */
    }

    .vxe-mob-portrait .ratio-16x9 img,
    .vxe-mob-portrait .ratio.ratio-16x9 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* the slide carries an xs-only fallback button block below the
       artwork (pre-app-shell design); the billboard overlay is the
       real UI in both card modes — kill the duplicate */
    .vxe-mob-portrait .swiper-slide > div.d-lg-none.d-md-none.d-sm-none,
    .vxe-mob-landscape .swiper-slide > div.d-lg-none.d-md-none.d-sm-none {
        display: none !important;
    }

    /* portrait: no trailer — hide the video + its controls */
    .vxe-mob-portrait video,
    .vxe-mob-portrait .vxe-controls {
        display: none !important;
    }

    /* the hero art is tappable → More Info (bound in editorpick.html);
       position:relative so the logo overlay anchors to the card */
    .vxe-mob-portrait .relative,
    .vxe-mob-landscape .relative {
        cursor: pointer;
        position: relative !important;
    }

    /* -- landscape: 16:9 card, info block below (native app look) */
    .vxe-mob-landscape .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    .vxe-mob-landscape .swiper-slide .relative,
    .vxe-mob-landscape .relative {
        height: auto !important;
    }

    .vxe-mob-landscape .ratio-16x9,
    .vxe-mob-landscape .ratio.ratio-16x9 {
        aspect-ratio: 16 / 9;
        width: 100% !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 16px;
        overflow: hidden;
    }

    .vxe-mob-landscape .ratio-16x9 img,
    .vxe-mob-landscape .ratio.ratio-16x9 img,
    .vxe-mob-landscape .ratio-16x9 video,
    .vxe-mob-landscape .ratio.ratio-16x9 video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vxe-mob-landscape .swiperInfo.vxe-billboard {
        position: static !important;
        background: none !important;
        padding: 14px 4px 0 !important;
        min-height: 0 !important;
    }

    /* overlay scrims make no sense once the info sits below the card — and
       since .relative now spans the buttons too, the bottom scrim was
       darkening the poster AND dimming the Play/More Info buttons */
    .vxe-mob-landscape .relative::before,
    .vxe-mob-landscape .relative::after,
    .vxe-mob-portrait .relative::before,
    .vxe-mob-portrait .relative::after {
        display: none !important;
    }

    /* ---- shared hero (portrait + landscape) app-style ------- */
    /* content logo overlaid top-left on the artwork (instead of a
       centered title); the info block (buttons) sits below the card */
    .vxe-mob-portrait .swiperInfo.vxe-billboard,
    .vxe-mob-landscape .swiperInfo.vxe-billboard {
        position: static !important;
        background: none !important;
        min-height: 0 !important;
        padding: 12px 0 0 !important; /* buttons span the full card width */
    }

    /* The logo + mute sit at the BOTTOM of the media card. They're siblings
       of the media inside .relative, which also spans the buttons below — so
       anchor them to the media's bottom using the card's deterministic 16:9
       height (card width = viewport − 32px inset). */
    .vxe-mob-landscape .relative {
        --vxe-media-h: calc((100vw - 32px) * 0.5625);
    }
    .vxe-mob-portrait .relative {
        --vxe-media-h: calc((100vw - 32px) * 1.5); /* 2:3 poster */
    }

    /* Bootstrap makes .row/.col position:relative — force static so the
       absolutely-positioned logo below anchors to .relative (the card),
       not its column */
    .vxe-mob-portrait .swiperInfo .row,
    .vxe-mob-landscape .swiperInfo .row,
    .vxe-mob-portrait .swiperInfo [class*="col-"],
    .vxe-mob-landscape .swiperInfo [class*="col-"] {
        position: static !important;
        align-items: flex-start !important;
        /* full-width buttons — kill Bootstrap row/col gutters */
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* logo overlay: landscape only — the backdrop/trailer has no title, so
       the content logo goes bottom-left. Portrait posters already bake in the
       title/logo, so overlaying a second one just duplicates it. */
    .vxe-mob-portrait .slideLogo {
        display: none !important;
    }
    .vxe-mob-landscape .slideLogo {
        position: absolute;
        top: calc(var(--vxe-media-h) - 58px);
        bottom: auto;
        inset-inline-start: 14px;
        z-index: 3;
        margin: 0 !important;
        max-width: 55%;
    }

    /* mute: bottom-right of the media card (landscape only) */
    .vxe-mob-landscape .vxe-controls {
        top: calc(var(--vxe-media-h) - 52px) !important;
        bottom: auto !important;
        inset-inline-end: 12px;
    }
    .vxe-mob-portrait .slideLogo img.innerSlideLogo,
    .vxe-mob-landscape .slideLogo img.innerSlideLogo {
        max-height: 46px;
        max-width: 100%;
        width: auto;
        object-fit: contain;
    }

    /* drop the big title text + description on the mobile hero — the
       logo carries the branding, buttons carry the action */
    .vxe-mob-portrait .slideTitle,
    .vxe-mob-landscape .slideTitle,
    .vxe-mob-portrait .text_description,
    .vxe-mob-landscape .text_description,
    .vxe-mob-portrait .text_description1,
    .vxe-mob-landscape .text_description1 {
        display: none !important;
    }

    /* remove the Trailer button in BOTH modes (the play-speed anchor) */
    .vxe-mob-portrait .sldieBtns a:has(.mdi-play-speed),
    .vxe-mob-landscape .sldieBtns a:has(.mdi-play-speed) {
        display: none !important;
    }

    /* two equal buttons below the card, app-style */
    .vxe-mob-portrait .sldieBtns,
    .vxe-mob-landscape .sldieBtns {
        display: flex !important;
        gap: 10px;
        width: 100%;
    }

    .vxe-mob-portrait .sldieBtns .btn,
    .vxe-mob-landscape .sldieBtns .btn {
        flex: 1 1 0;
        min-width: 0;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-weight: 600;
        padding: 0 12px !important;
        margin: 0 !important;
    }

    /* Play — red filled (reference look) */
    .vxe-mob-portrait .sldieBtns .btn-editors-pick,
    .vxe-mob-landscape .sldieBtns .btn-editors-pick {
        background: var(--vod-primary, #e50914) !important;
        border: 0 !important;
        color: #fff !important;
    }

    /* More Info — ghost/translucent (reference look) */
    .vxe-mob-portrait .sldieBtns .btn-secondary,
    .vxe-mob-landscape .sldieBtns .btn-secondary {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 0 !important;
        color: #fff !important;
    }

    /* ---- Details screens (movie / series) — app-style ------- */
    /* Full-bleed card, Netflix-style full-width play CTA with the
       action circles (my list / rate / share) spread beneath it. */
    body.page-video_details .detailsContainer,
    body.page-series_details .detailsContainer {
        padding-inline: 0 !important;
        max-width: 100%;
    }

    /* The dedicated detail PAGE renders the block as `.videoDetails.detail`
       (rgb(18,18,18) + 8px radius) — a raised card that reads right in the
       modal but wrong on a full page. On mobile it IS the page, so drop the
       surface entirely and let it sit flush on the black background. (Targets
       .videoDetails directly — the page variant has no `.card` class.) */
    body.page-video_details .detailsContainer .videoDetails,
    body.page-series_details .detailsContainer .videoDetails,
    body.page-video_details .detailsContainer .card,
    body.page-series_details .detailsContainer .card {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Movie details: the block overlays the buttons/meta (.overlapData) on a
       stretched .detailsThumb — .overlapData has `margin:-8vw 0 0; height:100%`
       and the ratio is forced `height:100%`, which leaves a big black gap
       between the 16:9 media and the bottom-anchored content. On mobile, make
       the media a real 16:9 box and let the content flow below it. */
    body.page-video_details .detailsThumb {
        height: auto !important;
    }
    body.page-video_details .detailsThumb .ratio-16x9 {
        height: auto !important;
        aspect-ratio: 16 / 9;
        padding-top: 0 !important;
        border-radius: 12px;
        overflow: hidden;
    }
    /* Keep the bottom shade (gradient) — the title logo now overlays the media
       bottom like the series / editors-pick hero and needs it for contrast;
       only the side shade is dropped. */
    body.page-video_details .detailsThumb .innerRightShade {
        display: none !important;
    }
    body.page-video_details .detailsThumb .innerShade {
        display: block !important;
    }
    /* Overlay the title logo on the artwork (editors-pick style): pull the
       content block up so the logo sits on the media bottom, with the Play
       button + actions flowing below it. Mirrors the series hero (same -16vw
       negative margin). The media stays a clean 16:9. */
    body.page-video_details .videoDetails .overlapData {
        margin: -16vw 0 0 !important;
        height: auto !important;
        padding: 0 !important;
    }
    /* Series hero: the overlapData keeps its .insidePadding 16px inset, which
       pushed the logo / Play / action row to x31 while the description below
       sits at x15 — misaligned. Zero just its horizontal padding so the series
       hero shares the same left/right margin as everything else (vertical
       spacing/overlay untouched — series has no -8vw gap issue). */
    body.page-series_details .videoDetails .overlapData {
        padding-inline: 0 !important;
    }
    body.page-video_details .overlapData .row {
        margin: 0 !important;
    }
    body.page-video_details .overlapData [class*="col-"] {
        padding-inline: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* The meta row (year · rating · runtime) sat flush against the action-icon
       labels — looked cramped. Give it breathing room above. (Movie only; the
       series hero's negative-margin overlay already leaves a gap here.) */
    body.page-video_details .vxm-meta {
        margin-top: 20px !important;
    }

    /* The lower content section (description / meta / categories / episodes)
       sits in a Bootstrap .row whose col gutter indented it ~16px further right
       than the logo, Play button and action row above — so the text block
       didn't share their left edge. Zero the row margin + col padding so the
       whole details column lines up on one left/right margin (symmetrical). */
    body.page-video_details .videoDetails > .insidePadding,
    body.page-series_details .videoDetails > .insidePadding {
        padding-inline: 0 !important;
    }
    body.page-video_details .videoDetails > .insidePadding > .row,
    body.page-series_details .videoDetails > .insidePadding > .row {
        margin-inline: 0 !important;
    }
    body.page-video_details .videoDetails > .insidePadding > .row > [class*="col-"],
    body.page-series_details .videoDetails > .insidePadding > .row > [class*="col-"] {
        padding-inline: 0 !important;
    }
    /* ...but the "More Like This" grid (col-6 cards) needs its gutter back —
       the rule above made the related cards touch. (The description/meta cols
       are col-12, so they stay flush-aligned to the page margin.) */
    body.page-video_details .videoDetails > .insidePadding > .row:has(> .col-6),
    body.page-series_details .videoDetails > .insidePadding > .row:has(> .col-6) {
        margin-inline: -6px !important;
    }
    body.page-video_details .videoDetails > .insidePadding > .row > .col-6,
    body.page-series_details .videoDetails > .insidePadding > .row > .col-6 {
        padding-inline: 6px !important;
    }
    /* Clean, uniform related cards: drop the boxy dark bg + the ragged
       description / maturity-date line — thumbnail + title reads far cleaner. */
    body.page-video_details .cardBg,
    body.page-series_details .cardBg { background: transparent !important; }
    body.page-video_details .cardBg .vid-description,
    body.page-series_details .cardBg .vid-description,
    body.page-video_details .cardBg p:has(.badge-secondary),
    body.page-series_details .cardBg p:has(.badge-secondary) { display: none !important; }

    /* On mobile this is a page, not an overlay — the X is confusing */
    body.page-video_details .series-detail-close,
    body.page-series_details .series-detail-close {
        display: none;
    }

    /* app-style action stack (reference: Play → secondary → icon row):
       Play primary full-width first, Trailer secondary full-width below,
       then the action circles (watchlist / like / share) in an even row */
    body.page-video_details .detailsIcon,
    body.page-series_details .detailsIcon {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px 10px;
    }

    body.page-video_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]),
    body.page-series_details .detailsIcon .playResumeBtn:not([data-stats-event="trailer_play"]) {
        order: 1;
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px; /* space between the play glyph and the "Play"/"Resume" label */
        height: 50px;
        border-radius: 8px;
        font-size: 17px;
        font-weight: 700;
        margin-right: 0 !important;
    }

    /* ---- Prime-style labeled action row (26.158.4) ----------------------
       Below the primary Play button the actions become labeled icon columns:
       Trailer · My List · Like · Not for me · Share. Desktop is untouched —
       .vxm-actCol is display:contents there and .vxm-actLabel is hidden (see
       the component <style> defaults); these rules only restructure the row
       on mobile. */

    /* each labeled column: a circle on top, a caption underneath.
       .vxr__optBtn is the like/dislike button once the reveal is unfolded. */
    body.page-video_details .detailsIcon .vxm-actCol,
    body.page-series_details .detailsIcon .vxm-actCol,
    body.page-video_details .detailsIcon .vxr__optBtn,
    body.page-series_details .detailsIcon .vxr__optBtn {
        order: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }
    body.page-video_details .detailsIcon .vxm-actCol--list,
    body.page-series_details .detailsIcon .vxm-actCol--list { order: 3; }
    body.page-video_details .detailsIcon .vxm-actCol--share,
    body.page-series_details .detailsIcon .vxm-actCol--share { order: 6; }

    /* Prime-style: plain, bright, borderless icons (no ring / no fill), a
       larger glyph in pure white. The `.rundedBtn` base pins a 42px max + 2px
       border + grey fill — all reset here so the glyph stands on its own. */
    body.page-video_details .detailsIcon .vxm-actCol > .rundedBtn,
    body.page-video_details .detailsIcon .vxm-actCol > .boxBtn,
    body.page-series_details .detailsIcon .vxm-actCol > .rundedBtn,
    body.page-series_details .detailsIcon .vxm-actCol > .boxBtn,
    body.page-video_details .detailsIcon .vxr__optBtn > i,
    body.page-series_details .detailsIcon .vxr__optBtn > i,
    body.page-video_details .detailsIcon .vxr__optBtn > .vxm-ico,
    body.page-series_details .detailsIcon .vxr__optBtn > .vxm-ico {
        box-sizing: border-box !important;
        width: auto !important;
        /* match the 24px glyph so the My List / Share buttons are the same
           height as the trailer / like / dislike icon cells — otherwise a 34px
           box pushed their labels ~10px lower than the rest of the row. */
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: none !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        color: #fff !important;
        font-size: 24px !important;
    }
    /* the button-based icons (My List / Share) carry the glyph in an inner
       <i> — size + brighten it (base `.rundedBtn i` pins 1.5rem). */
    body.page-video_details .detailsIcon .vxm-actCol > .rundedBtn i,
    body.page-video_details .detailsIcon .vxm-actCol > .boxBtn i,
    body.page-series_details .detailsIcon .vxm-actCol > .rundedBtn i,
    body.page-series_details .detailsIcon .vxm-actCol > .boxBtn i,
    body.page-video_details .detailsIcon .vxm-actCol > .rundedBtn .vxm-ico,
    body.page-video_details .detailsIcon .vxm-actCol > .boxBtn .vxm-ico,
    body.page-series_details .detailsIcon .vxm-actCol > .rundedBtn .vxm-ico,
    body.page-series_details .detailsIcon .vxm-actCol > .boxBtn .vxm-ico {
        /* fixed 24px — `width:auto` on an SVG is unreliable (it collapsed the
           nested Share glyph to 0); a fixed box is also smaller + uniform. */
        width: 24px !important;
        height: 24px !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 24px !important;
        line-height: 1 !important;
        color: #fff !important;
    }

    /* Unified action-row glyph size — a fixed 24px box for EVERY icon in the
       row (My List, Share, Like, Not-for-me, Trailer). `width:auto` on an SVG
       is unreliable and collapsed the Share glyph (nested in a .fill-height
       div) to 0×0; a fixed box also makes the icons a touch smaller + uniform.
       Clears the 34px min/max box constraints from the rules above. */
    body.page-video_details .detailsIcon .vxm-actCol .vxm-ico,
    body.page-series_details .detailsIcon .vxm-actCol .vxm-ico,
    body.page-video_details .detailsIcon .vxr__optBtn .vxm-ico,
    body.page-series_details .detailsIcon .vxr__optBtn .vxm-ico,
    body.page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] .vxm-ico,
    body.page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] .vxm-ico {
        width: 24px !important;
        height: 24px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        font-size: 24px !important;
        color: #fff !important;
    }

    /* captions — bright and crisp (Prime-style), not the old dim grey */
    body.page-video_details .detailsIcon .vxm-actLabel,
    body.page-series_details .detailsIcon .vxm-actLabel {
        display: block;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.92);
        text-align: center;
        white-space: nowrap;
    }
    /* the like/dislike buttons carry a hover-tooltip ::after bubble by default
       (position:absolute; opacity:0). On mobile repurpose it as the static
       caption under the icon, and drop the tooltip caret ::before. */
    body.page-video_details .detailsIcon .vxr__optBtn::after,
    body.page-series_details .detailsIcon .vxr__optBtn::after {
        content: attr(aria-label);
        position: static;
        transform: none;
        opacity: 1;
        padding: 0;
        border-radius: 0;
        background: none;
        color: rgba(255, 255, 255, 0.92);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        pointer-events: none;
    }
    body.page-video_details .detailsIcon .vxr__optBtn::before,
    body.page-series_details .detailsIcon .vxr__optBtn::before { display: none !important; }

    /* Trailer: the pill button becomes a labeled column like the rest */
    body.page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"],
    body.page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] {
        order: 2;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        height: auto;
        width: auto;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        font-weight: 400;
    }
    body.page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > i,
    body.page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > i,
    body.page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > .vxm-ico,
    body.page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > .vxm-ico {
        width: auto !important;
        height: 34px;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px !important;
        color: #fff !important;
        margin: 0 !important;
    }
    body.page-video_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > span,
    body.page-series_details .detailsIcon .playResumeBtn[data-stats-event="trailer_play"] > span {
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.92);
    }

    /* unfold the like/dislike reveal into two flat labeled columns */
    body.page-video_details .detailsIcon .vxr,
    body.page-series_details .detailsIcon .vxr,
    body.page-video_details .detailsIcon .vxr__pop,
    body.page-series_details .detailsIcon .vxr__pop {
        display: contents;
    }
    body.page-video_details .detailsIcon .vxr__trigger,
    body.page-series_details .detailsIcon .vxr__trigger { display: none !important; }
    /* Prime order is Like (4) then Not-for-me (5); the pop's DOM order is
       dislike, like — so bump like ahead by position (language-agnostic). */
    body.page-video_details .detailsIcon .vxr__pop .vxr__optBtn:nth-child(1),
    body.page-series_details .detailsIcon .vxr__pop .vxr__optBtn:nth-child(1) { order: 5; }
    body.page-video_details .detailsIcon .vxr__pop .vxr__optBtn:nth-child(2),
    body.page-series_details .detailsIcon .vxr__pop .vxr__optBtn:nth-child(2) { order: 4; }

    /* the trailer-preview mute / play circles don't belong in the action row */
    body.page-video_details .detailsIcon .playPausePage,
    body.page-video_details .detailsIcon .playPauseModal,
    body.page-video_details .detailsIcon .trailerPlayPauseBtn,
    body.page-series_details .detailsIcon .iframePlayPauseSeries,
    body.page-series_details .detailsIcon .trailerPlayPauseBtn { display: none !important; }

    /* Live TV (live_v2) keeps the ORIGINAL responsive layout — only the
       bottom tab bar is added (it's out of the immersive-hide list below).
       The tab bar's body padding-bottom keeps the channel list clear. */

    /* ---- immersive pages: no tab bar ---------------------- */
    /* Live TV (live_v2) is a browse screen (channel list), reached from the
       Live TV pill — it keeps the tab bar. Only true fullscreen playback and
       the standalone EPG guide hide it. */
    body.page-watch_video .vxm-tabbar,
    body.page-live_details .vxm-tabbar,
    body.page-epg .vxm-tabbar {
        display: none;
    }

    /* immersive pages hide the bar → no clearance needed (mirrors the
       .contentHolder tab-bar clearance above) */
    body.page-watch_video .contentHolder,
    body.page-live_details .contentHolder,
    body.page-epg .contentHolder {
        padding-bottom: 0 !important;
    }

    /* ---- Watch page — app-style portrait player -------------- */
    /* NB: the watch page renders with a blank-layout body (no page-watch_video
       class) — scope on .watchVideoPage (#wrapper) instead. Full-bleed 16:9
       player at the top, clear of the fixed header; title + actions below. */
    /* header here is in-flow (not the fixed .vxh), so no top cushion needed —
       the player sits right under it */
    .watchVideoPage .watchVideoInner {
        padding-inline: 0 !important;
        padding-top: 0 !important;
    }
    /* the player sits in #playerApp > .row > .col-12 — kill the Bootstrap
       gutters so the 16:9 player is edge-to-edge */
    .watchVideoPage #playerApp,
    .watchVideoPage #playerApp .row,
    .watchVideoPage #playerApp [class*="col-"] {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
    }
    .watchVideoPage .player-ratio {
        border-radius: 0;
    }
    /* title / rating / comments: keep readable side padding */
    .watchVideoPage .video-title-container,
    .watchVideoPage #commentsDiv,
    .watchVideoPage #watchVideo > .clearfix {
        padding-inline: 16px;
    }
    /* title row: wrap cleanly instead of colliding the actions + view count */
    .watchVideoPage .video-title-container {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 14px !important;
    }
    .watchVideoPage .video-title-container h1 {
        flex: 1 1 100%;
        margin-right: 0 !important;
    }

    /* ---- top spacing under the fixed header + pills ---------- */
    /* body.html wraps content in .contentHolder.pt-5.mt-5. On home
       the hero card carries its own top margin, so the holder needs
       none; the movies/tv-shows homes start with the heading + rails
       and must clear the fixed header + pills row instead. */
    body.page-home .contentHolder.pt-5 {
        padding-top: 0 !important;
    }

    /* home without an editors pick (body.notEditorPick) needs the
       cushion too — nothing else provides it */
    body.page-home.notEditorPick .contentHolder.pt-5,
    body.page-movies .contentHolder.pt-5,
    body.page-tv_shows .contentHolder.pt-5,
    body.page-video_categories .contentHolder.pt-5,
    body.page-series_categories .contentHolder.pt-5,
    body.page-all-movies .contentHolder.pt-5,
    body.page-all-tv-shows .contentHolder.pt-5 {
        padding-top: calc(var(--vxm-header-h) + 58px) !important;
    }

    /* group pages: when a hero card is present (#new-editorpick) it brings
       its own top margin (like home) — zero the holder; when there's no
       hero, the rails need the header+pills cushion instead */
    body.page-content_list_group .contentHolder.pt-5:has(#new-editorpick) {
        padding-top: 0 !important;
    }
    body.page-content_list_group .contentHolder.mt-5:has(#new-editorpick) {
        margin-top: 0 !important;
    }
    body.page-content_list_group .contentHolder.pt-5:not(:has(#new-editorpick)) {
        padding-top: calc(var(--vxm-header-h) + 58px) !important;
    }

    /* More screen: the header is fixed, so clear it — but the desktop
       pt-5 + mt-5 stacked a huge gap above the "Profile & More" title */
    body.page-more .contentHolder.pt-5 {
        padding-top: 0 !important;
    }
    body.page-more .contentHolder.mt-5 {
        margin-top: 0 !important;
    }
    body.page-more .vxm-more {
        padding-top: calc(var(--vxm-header-h) + 12px);
    }

    /* ---- header logo: bigger + firmly left on the app shell ---------- */
    /* the app pages hide search/lang/user, so the logo has room to breathe */
    .vxh__logo {
        margin-inline-start: 4px;
    }
    .vxh__logo img {
        height: 30px !important;
        max-width: 150px !important;
        width: auto;
    }

    body.page-home .contentHolder.mt-5,
    body.page-movies .contentHolder.mt-5,
    body.page-tv_shows .contentHolder.mt-5 {
        margin-top: 0 !important;
    }

    /* ============================================================
       Profiles gate (/profiles) + Edit profile (/profiles/{id}/edit)
       — native-app redesign. The desktop markup scales its fonts with
       vw (≈9px on a phone) and boxes everything in a raised card; these
       rules rebuild both as clean, app-style screens. All scoped to the
       page body class, so desktop is untouched.
       ============================================================ */

    /* ---- "Who's watching?" gate ------------------------------- */
    /* header is fixed here (this page has no tab bar) — clear it and drop
       the desktop contentHolder pt-5/mt-5 stack */
    body.page-profiles .contentHolder.pt-5 { padding-top: 0 !important; }
    body.page-profiles .contentHolder.mt-5 { margin-top: 0 !important; }

    /* stop vertically-centering the column (it buried the heading under
       the fixed header) — top-align and clear the header instead */
    body.page-profiles #profilesHolder .vh100 {
        height: auto !important;
        min-height: calc(100vh - var(--vxm-header-h)) !important;
        justify-content: flex-start !important;
        padding: calc(var(--vxm-header-h) + 24px) 16px 40px;
    }

    body.page-profiles .profileHeading {
        font-size: 26px !important;
        font-weight: 700;
        color: #fff;
        text-align: center;
        margin: 0 0 28px !important;
    }

    /* the profile grid: even columns, no vw margins */
    body.page-profiles #profilesHolder .fullWidth { margin-bottom: 26px !important; }
    body.page-profiles #profilesHolder .container { padding-inline: 0; }
    body.page-profiles #profilesHolder .row.justify-content-center {
        margin-inline: -6px !important;
    }
    body.page-profiles #profilesHolder .row.justify-content-center > [class*="col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 150px !important;
        margin: 0 0 6px !important;      /* overrides the inline `margin:0 1vw 0 0` */
        padding: 0 6px 14px !important;
    }

    /* square, rounded, Netflix-style tiles */
    body.page-profiles .profileTopBox { margin-bottom: 10px !important; }
    body.page-profiles .profileBlock {
        border-radius: 14px !important;
        overflow: hidden;
        transition: transform 0.12s ease;
    }
    body.page-profiles .profileBlock:active { transform: scale(0.96); }
    /* neutralize the desktop hover ring+scale (it sticks after a tap on touch) */
    body.page-profiles .profileTopBox:hover,
    body.page-profiles .profileText:hover ~ .profileTopBox {
        border: 0 !important;
        transform: none !important;
    }

    /* the "Add Profile" tile: dashed placeholder + centered plus */
    body.page-profiles .profileBlock[data-target="#addProfile"] {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px dashed rgba(255, 255, 255, 0.22) !important;
    }
    body.page-profiles .profileBlock[data-target="#addProfile"] .vxm-ico {
        width: 36px;
        height: 36px;
        color: #cfcfd6;
    }

    body.page-profiles .profileText {
        font-size: 14px !important;
        font-weight: 500;
        color: #cfcfd6;
        margin-bottom: 2px !important;
    }

    body.page-profiles .profileManageBtn {
        font-size: 14px !important;
        letter-spacing: 0.04em !important;
        padding: 12px 32px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #cfcfd6 !important;
        background: transparent !important;
    }

    /* manage-mode edit/delete overlay circles */
    body.page-profiles .editOptions { gap: 10px; border-radius: 14px; }
    body.page-profiles .editOptions .btn {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* ---- PIN gate (locked profile) — kill the vw-scaled fonts ---- */
    body.page-profiles .profile-pin-prompt-status { font-size: 14px !important; }
    body.page-profiles .profile-pin-prompt-label {
        font-size: 20px !important;
        line-height: 1.35;
        padding: 0 16px;
        margin: 0.4em 0 1em;
    }
    body.page-profiles .profile-pin-prompt .pin-number-input {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
        margin: 6px !important;
    }

    /* ---- Edit profile screen ---------------------------------- */
    /* header is hidden on this page — trim the desktop pt-5/mt-5 stack */
    body.page-edit_profile .contentHolder.pt-5 { padding-top: 14px !important; }
    body.page-edit_profile .contentHolder.mt-5 { margin-top: 0 !important; }
    body.page-edit_profile .insidePadding { padding-inline: 16px !important; }
    body.page-edit_profile .editProfileContainer { margin-bottom: 28px !important; }

    /* flush the raised card onto the black bg (app look), like details */
    body.page-edit_profile .card {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    body.page-edit_profile .card > h2.h4 {
        font-size: 20px;
        font-weight: 700 !important;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }
    body.page-edit_profile h2.h4 {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #fff;
    }
    body.page-edit_profile .backIcon {
        flex: 0 0 auto;
        height: 40px;
        width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* stack the avatar preview above the form (side-by-side is cramped) */
    body.page-edit_profile .editProfileContainer .row > .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        justify-content: center;
        margin-bottom: 18px;
    }
    body.page-edit_profile .editProfileContainer .row > .col-4 .topBox { width: 120px; }
    body.page-edit_profile .editProfileContainer .row > .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    body.page-edit_profile .profileBlock { border-radius: 16px !important; overflow: hidden; }

    /* filled, app-style form fields */
    body.page-edit_profile .form-control {
        height: 52px;
        border: 0 !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
        font-size: 16px !important;   /* iOS: 16px+ prevents focus zoom */
        padding: 0 16px !important;
    }

    /* action buttons: bigger tap targets, app-style */
    body.page-edit_profile .clearfix.text-right {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    body.page-edit_profile .clearfix.text-right .btn {
        flex: 1 1 auto;
        min-height: 46px;
        border-radius: 12px !important;
        font-weight: 600;
        font-size: 14px;
    }

    /* custom-avatar upload row — the native file input (.input-file) has no
       styling of its own, so its default "Choose File" chrome was showing
       through the (now translucent) overlay label. Visually hide the native
       input and turn the label into the whole tap target (its `for=` still
       opens the picker). */
    body.page-edit_profile .custom-file {
        position: relative;
        height: auto;
        display: block;
    }
    body.page-edit_profile .custom-file .input-file {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    body.page-edit_profile .custom-file-input-label {
        position: static !important;
        height: auto !important;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 12px;
        border: 1px dashed rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05) !important;
        color: #cfcfd6 !important;
        cursor: pointer;
    }
    body.page-edit_profile .dropbox { margin-top: 10px; }
    body.page-edit_profile .dropbox .btn {
        width: 100%;
        min-height: 46px;
        border-radius: 12px !important;
    }

    /* avatar collection grid → 4 per row (col-6 = 2 is oversized on a phone) */
    body.page-edit_profile .row:has(.imgFull) { margin-inline: -5px !important; }
    body.page-edit_profile .row:has(.imgFull) > [class*="col-"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-inline: 5px !important;
    }
    body.page-edit_profile .row:has(.imgFull) .profileBlock { border-radius: 12px !important; }
    body.page-edit_profile .imgFull { border-radius: 12px; }

    /* ---- shared app-style modal box (Add Profile / Set PIN / Remove PIN)
       Scoped by id so the full-screen PIN gate (#staticBackdrop, which
       uses .modal-content.bg-transparent) is never touched. ------------ */
    body.page-profiles #addProfile .modal-dialog,
    body.page-edit_profile #setPin .modal-dialog,
    body.page-edit_profile #removePassword .modal-dialog {
        max-width: 440px;
        margin: 0 auto;
        min-height: calc(100% - 1rem);
        display: flex;
        align-items: center;
        padding: 12px;
    }
    body.page-profiles #addProfile .modal-content,
    body.page-edit_profile #setPin .modal-content,
    body.page-edit_profile #removePassword .modal-content {
        background: #17171c !important;
        border: 0 !important;
        border-radius: 18px !important;
        width: 100%;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    }
    body.page-profiles #addProfile .modal-header,
    body.page-edit_profile #removePassword .modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 18px 20px;
    }
    body.page-profiles #addProfile .modal-title,
    body.page-edit_profile #removePassword .modal-title {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
    }
    body.page-profiles #addProfile .modal-body,
    body.page-edit_profile #removePassword .modal-body { padding: 20px; }
    body.page-profiles #addProfile .modal-footer,
    body.page-edit_profile #removePassword .modal-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 14px 20px 18px;
        gap: 10px;
    }
    body.page-profiles #addProfile .modal-footer > *,
    body.page-edit_profile #removePassword .modal-footer > * { margin: 0 !important; }
    body.page-profiles #addProfile .form-control {
        height: 52px;
        border: 0 !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
        font-size: 16px !important;
        padding: 0 16px !important;
    }
    body.page-profiles #addProfile .modal-footer .btn,
    body.page-edit_profile #removePassword .modal-footer .btn {
        flex: 1 1 0;
        min-height: 48px;
        border-radius: 12px !important;
        font-weight: 700;
        font-size: 15px;
    }
}