/* ---------------------------------------------------------------------------
 * mobilebar.css — mobile shell: bottom tab bar, filters sheet, menu drawer,
 * and the header collapse. Markup lives in templates/mobilebar.php.
 *
 * EVERYTHING here is inside the max-width:900px media query except the hide
 * rule at the top. That rule is load-bearing: mobilebar.php and header.php add
 * elements to shared markup (.top-icon, and .mb-sheet-head injected by JS), and
 * without a default display:none they render unstyled on DESKTOP. That bug has
 * happened twice - if you add another shared element, add it to that rule too.
 * ------------------------------------------------------------------------ */

.mb-bar, .mb-scrim, .mb-menu, .mb-sheet-head, .mb-sheet-foot,
.mb-gender, .mb-gender-menu, .top-icon { display: none; }

@media (max-width: 900px) {
    body { padding-bottom: 78px; }

    /* floating pill, inset from the screen edges — reads as a designed control
       rather than a system bar welded to the bottom */
    .mb-bar {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; z-index: 9800;
        left: 5px; right: 5px; bottom: 3px;
        /* #101825 sampled straight off the reference screenshot. SOLID and no
           backdrop-filter on purpose: any alpha or blur pulls the navy page
           through and shifts the rendered colour off the hex. */
        background: #101825;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 20px;
        box-shadow: 0 14px 40px rgba(0,0,0,.55);
    }
    .mb-tab {
        appearance: none; background: none; border: 0; cursor: pointer;
        font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .01em;
        color: var(--muted, #97a1bb); text-decoration: none;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 5px; height: 68px; position: relative;
    }
    .mb-tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .mb-tab.is-active { color: var(--accent); }
    .mb-badge {
        position: absolute; top: 10px; left: 50%; margin-left: 4px;
        min-width: 16px; height: 16px; border-radius: 999px;
        background: var(--accent); color: #fff;
        font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
        padding: 0 4px;
    }

    /* raised primary action. No label: at 56px the circle IS the label, and a
       word underneath is what made the first attempt look misaligned. */
    .mb-tab.is-fab { overflow: visible; gap: 0; }
    .mb-fab-c {
        display: flex; align-items: center; justify-content: center;
        width: 56px; height: 56px; border-radius: 50%;
        margin-top: -34px;
        background: linear-gradient(140deg, var(--accent), var(--accent-deep));
        border: 4px solid #101825;
        box-shadow: 0 8px 24px -4px rgba(255,45,120,.65);
        color: #fff;
    }
    .mb-tab.is-fab svg { width: 25px; height: 25px; stroke-width: 2.1; }
    .mb-tab.is-fab .mb-badge { top: -30px; left: 60%; }

    /* header collapses to logo + search icon + hamburger */
    .top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
    .top .online-pill,
    .top .top-right { display: none; }
    /* hamburger - logo - gender pill, in one row. Reordering with flex `order`
       keeps the DOM order sensible for screen readers and avoids touching the
       template. */
    .top { position: relative; }
    .top .logo { order: 2; flex: 1; text-align: center; margin: 0; font-size: 17px; }
    .top-icon[data-mb-menu-open] { order: 1; }
    .mb-gender { order: 3; }

    /* The header search icon is GONE on mobile: the bottom bar's Search tab
       fires the same data-search-toggle, sits in thumb reach instead of the
       far top corner, and two controls for one action was the duplication
       Wayne flagged. The .searchbar itself still expands via html.mb-search —
       only this second trigger is dropped. */
    .top .top-icon[data-search-toggle] { display: none; }
    .top .searchbar { display: none; }
    html.mb-search .top .searchbar {
        display: flex; order: 10; width: 100%; margin-top: 8px;
    }
    .top-icon {
        appearance: none; background: rgba(255,255,255,.05); cursor: pointer;
        border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
        width: 38px; height: 38px; flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--text, #e8ecf6);
    }
    .top-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

    /* The category nav (.nav2) is styled for mobile in header.css — shown as one
       horizontal swipeable strip, not hidden. It used to be display:none here
       (with the gender pill standing in for it); that pill is now dropped and the
       strip is back, so this file no longer touches .nav2. */

    /* Injected by mobilebar.js — the sidebar has no close control of its own.
       Holds BOTH the title row and the staged-filter chip row, as one sticky
       block: two separate sticky elements would need a hardcoded `top` offset
       for the second one, which breaks the moment the title row's height
       changes. Children don't need their own entry in the hide rule at the top
       of this file — a hidden parent hides them. */
    .mb-sheet-head {
        position: sticky; top: -20px; z-index: 2;
        display: block;
        margin: -20px -14px 10px; padding: 12px 14px;
        background: var(--sidebar, #0d1729);
        border-bottom: 1px solid rgba(255,255,255,.07);
        font-size: 15px; font-weight: 800;
    }
    .mb-sheet-head-row { display: flex; align-items: center; justify-content: space-between; }

    /* staged picks, so you can see and drop them without scrolling back up
       through eight collapsed sections */
    .mb-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .mb-sheet-chips[hidden] { display: none; }
    .mb-chip {
        appearance: none; cursor: pointer;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 8px 6px 11px; border-radius: 999px;
        background: rgba(255,45,120,.15); border: 1px solid rgba(255,45,120,.55);
        font: inherit; font-size: 11.5px; font-weight: 700; color: var(--accent);
    }
    .mb-chip i {
        font-style: normal; font-size: 14px; line-height: 1;
        opacity: .75; padding: 0 1px;
    }
    .mb-sheet-head-row button {
        appearance: none; background: rgba(255,255,255,.06); cursor: pointer;
        border: 1px solid rgba(255,255,255,.1); border-radius: 9px;
        width: 32px; height: 32px; font-size: 20px; line-height: 1;
        color: var(--text, #e8ecf6);
    }

    .mb-scrim {
        display: block; position: fixed; inset: 0; z-index: 9600;
        background: rgba(3,4,9,.6); opacity: 0; pointer-events: none;
        transition: opacity .2s;
    }
    html.mb-open .mb-scrim { opacity: 1; pointer-events: auto; }
    html.mb-open, html.mb-open body { overflow: hidden; }

    /* the real sidebar, raised as a bottom sheet — thumb-reachable, unlike a
       left drawer, and it keeps the grid visible above it */
    .mb-drawer {
        position: fixed !important; left: 0; right: 0; bottom: 0; top: auto;
        width: auto !important; max-width: none !important;
        max-height: 92vh;   /* was 86vh — a taller cap so the full filter list fits without the last section hiding under the Show-results bar on shorter phones */
        /* site.css gives .sidebar `min-height:100vh` for the desktop rail. The
           mobile sheet IS that same .sidebar element, and min-height beats the
           max-height above — so the sheet was forced to full viewport height,
           which is what put the content at the top and left the big dead space
           below it on tall screens (iPad especially). Reset it so the sheet is
           the height of its content (still capped at 86vh, still scrolls if the
           facet list is long) and sits at the bottom as intended. */
        min-height: 0 !important;
        z-index: 9700;
        margin: 0 !important;
        /* NO bottom padding. The old calc(80px + safe-area) existed to clear the
           pill bar, but bottom padding inside a scroll container is where a
           `position: sticky; bottom: 0` footer comes to rest — which is what left
           the Clear/Show bar floating mid-list with sections visible underneath
           it. The footer supplies its own safe-area padding instead. */
        padding: 20px 14px 0 !important;
        background: var(--sidebar, #0d1729);
        border: 1px solid rgba(255,255,255,.08); border-bottom: 0;
        border-right: 0 !important;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -20px 60px rgba(0,0,0,.55);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateY(100%); transition: transform .24s ease;
    }
    .mb-drawer::before {
        content: ""; position: sticky; top: -12px; display: block;
        width: 38px; height: 4px; margin: -8px auto 12px;
        border-radius: 999px; background: rgba(255,255,255,.22);
    }
    /* site.css hides .sidebar entirely below its breakpoint, which beats every
       position rule here — so it stays hidden until the sheet is open. */
    html.mb-open-filters .mb-drawer { display: block !important; transform: none; }

    /* Filters sheet content — same markup as the desktop sidebar (promoted by
       mobilebar.js, not duplicated), restyled here as touch-first filter
       tiles instead of the desktop's compact link list. All scoped under
       .mb-drawer so site.css's desktop sidebar rules are untouched. Class
       names (.side-sec, .side-list, .chip, .n, .lbl, .fi, .side-more) come
       straight from templates/sidebar.php. */
    .mb-drawer .side-h { display: none; } /* "Cams Filters" — redundant with the injected sheet head above */

    .mb-drawer .side-sec {
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        margin-bottom: 10px;
        overflow: hidden;
        background: rgba(255,255,255,.02);
    }
    .mb-drawer .side-sec summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; gap: 8px;
        padding: 13px 14px; font-size: 14px; font-weight: 700;
    }
    .mb-drawer .side-sec summary::-webkit-details-marker { display: none; }
    .mb-drawer .sec-t { display: flex; align-items: center; gap: 9px; flex: 1; }
    .mb-drawer .sec-i { width: 17px; height: 17px; flex: 0 0 auto; }
    /* chevron, rotates open — summary has no native indicator once the
       marker's hidden above */
    .mb-drawer .side-sec summary::after {
        content: ""; width: 8px; height: 8px; flex: 0 0 auto;
        border-right: 2px solid var(--muted, #97a1bb); border-bottom: 2px solid var(--muted, #97a1bb);
        transform: rotate(45deg); transition: transform .18s;
    }
    .mb-drawer .side-sec[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }

    /* list rows -> two-up tappable tiles instead of a dense single column */
    .mb-drawer .side-list {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        padding: 2px 14px 14px;
    }
    .mb-drawer .side-list a {
        display: flex; align-items: center; justify-content: space-between; gap: 6px;
        padding: 11px 12px; border-radius: 11px;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
        font-size: 12.5px; font-weight: 600; color: var(--text, #e8ecf6);
        text-decoration: none;
    }
    .mb-drawer .side-list a .lbl { display: flex; align-items: center; gap: 6px; overflow: hidden; }
    .mb-drawer .side-list a .lbl span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mb-drawer .side-list a .n { font-size: 11px; font-weight: 700; color: var(--muted, #97a1bb); flex: 0 0 auto; }
    /* .on is the existing "active filter" class from sidebar.php's $cur() helper */
    .mb-drawer .side-list a.on { background: rgba(255,45,120,.16); border-color: var(--accent); color: var(--accent); }
    .mb-drawer .side-list a.on .n { color: var(--accent); }
    /* "More countries →" is GONE from the sheet. It navigates to the world map,
       which abandons the selection you are in the middle of building — a
       trapdoor in a panel whose only job is staging filters. The world map is
       still one tap away in the Categories drawer and the menu, so nothing is
       lost. The staged-gender handler for .side-more stays in mobilebar.js: it
       is correct, and it means un-hiding this rule restores a working link
       rather than the old picks-eating one. */
    .mb-drawer .side-list a.side-more { display: none; }

    .mb-drawer .chipwrap { display: flex; flex-wrap: wrap; padding: 2px 14px 14px; gap: 8px; }
    .mb-drawer .chip {
        padding: 10px 16px; border-radius: 999px;
        font-size: 13px; font-weight: 700; text-decoration: none;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
        color: var(--text, #e8ecf6);
    }
    .mb-drawer .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

    /* Sticky commit bar, injected by mobilebar.js. Taps in the sheet are STAGED
       on mobile, not navigated, so this button is the only thing that actually
       loads a new grid — it has to stay visible while you scroll the facets. */
    .mb-sheet-foot {
        position: sticky; bottom: 0; z-index: 2;
        display: flex; align-items: center; gap: 10px;
        /* Sides bleed to the sheet edge; bottom margin is ZERO on purpose — see
           the .mb-drawer padding note. Solid background, not a gradient: the
           gradient let list rows show through the top of the bar. */
        margin: 14px -14px 0;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        background: var(--sidebar, #0d1729);
        border-top: 1px solid rgba(255,255,255,.08);
    }

    /* The pill bar steps aside while the filters sheet is open. It has to: the
       bar is z-index 9800 against the sheet's 9700, so the raised FAB drew on
       top of the Show-results button, and 71px of the sheet's height was being
       spent on navigation nobody can use mid-selection. The sheet is a modal
       now — × , the scrim, Escape and Show results are the ways out. Deleting
       this one rule restores tap-Filters-again-to-close. */
    html.mb-open-filters .mb-bar { display: none; }
    .mb-sheet-show {
        appearance: none; flex: 1; cursor: pointer;
        background: linear-gradient(140deg, var(--accent), var(--accent-deep)); border: 0; border-radius: 12px;
        padding: 14px; font-size: 14.5px; font-weight: 800; color: #fff;
        box-shadow: 0 8px 20px -4px rgba(255,45,120,.55);
    }
    .mb-sheet-n { font-weight: 700; opacity: .82; }
    .mb-sheet-clear {
        appearance: none; cursor: pointer; flex: 0 0 auto;
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
        border-radius: 12px; padding: 14px 16px;
        font-size: 13.5px; font-weight: 700; color: var(--muted, #97a1bb);
    }

    /* menu drawer, from the right */
    /* Opens from the LEFT, matching the hamburger's position in the header.
       A panel that flies in from the opposite side to the button that opened
       it reads as unrelated. */
    .mb-menu {
        display: block; position: fixed; top: 0; left: 0; bottom: 0;
        width: min(80vw, 310px); z-index: 9900;   /* above the tab bar, which
                                                     used to overlap the list */
        background: var(--card, #12172a);
        border-right: 1px solid rgba(255,255,255,.08);
        display: flex; flex-direction: column;
        transform: translateX(-100%); transition: transform .22s ease;
    }
    html.mb-open-menu .mb-menu { transform: none; }
    .mb-menu-top {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07);
        flex: 0 0 auto;
    }
    .mb-menu-logo { font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
    .mb-menu-logo b { color: var(--accent); }
    .mb-close {
        appearance: none; background: rgba(255,255,255,.05); cursor: pointer;
        border: 1px solid rgba(255,255,255,.09); border-radius: 9px;
        width: 30px; height: 30px; font-size: 19px; line-height: 1;
        color: var(--text, #e8ecf6);
    }

    .mb-menu-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 14px; }
    .mb-menu h3 {
        margin: 14px 6px 4px; font-size: 10px; font-weight: 800;
        letter-spacing: .11em; text-transform: uppercase; color: var(--muted, #97a1bb);
    }
    .mb-menu-body a {
        display: flex; align-items: center; gap: 11px;
        padding: 9px 8px; border-radius: 9px;
        font-size: 14.5px; font-weight: 600;
        color: var(--text, #e8ecf6); text-decoration: none;
    }
    .mb-menu-body a svg {
        width: 17px; height: 17px; flex: 0 0 auto;
        stroke: var(--muted, #97a1bb); fill: none; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .mb-menu-body a:active { background: rgba(255,255,255,.05); }
    .mb-menu-body a.is-active { background: rgba(255,45,120,.13); color: var(--accent); }
    .mb-menu-body a.is-active svg { stroke: var(--accent); }

    .mb-menu-foot {
        flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 14px;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255,255,255,.07);
    }
    .mb-menu-foot a { font-size: 12px; color: var(--muted, #97a1bb); text-decoration: none; }
    /* Compact on purpose: at the same width as the hamburger the logo stays
       centred, and the active view is already stated by the H1. Colour carries
       the "something is selected" signal instead of a word. Add a <span> label
       inside the button if you'd rather spend the width. */
    .mb-gender {
        appearance: none; background: rgba(255,255,255,.05); cursor: pointer;
        border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
        height: 38px; padding: 0 7px; flex: 0 0 auto;
        display: inline-flex; align-items: center; gap: 3px;
        color: var(--text, #e8ecf6);
    }
    .mb-gender svg {
        width: 18px; height: 18px; stroke: currentColor; fill: none;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    }
    .mb-gender i {
        width: 6px; height: 6px; margin-top: -3px;
        border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
        transform: rotate(45deg); transition: transform .18s;
    }
    .mb-gender.is-picked { color: var(--accent); border-color: rgba(255,45,120,.5); background: rgba(255,45,120,.12); }
    html.mb-gender-open .mb-gender i { transform: rotate(-135deg); margin-top: 2px; }

    /* Anchored to .top (position: relative above), not fixed — it has to travel
       with the header rather than sit at a viewport offset. Above the tab bar's
       9800 so it is never clipped, below the menu drawer's 9900. */
    .mb-gender-menu {
        display: none; position: absolute; z-index: 9850;
        top: calc(100% - 4px); right: 12px;
        min-width: 168px; padding: 6px;
        background: var(--card, #12172a);
        border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
        box-shadow: 0 18px 46px rgba(0,0,0,.6);
    }
    html.mb-gender-open .mb-gender-menu { display: block; }
    .mb-gender-menu a {
        display: block; padding: 10px 12px; border-radius: 9px;
        font-size: 14.5px; font-weight: 600; white-space: nowrap;
        color: var(--text, #e8ecf6); text-decoration: none;
    }
    .mb-gender-menu a:active { background: rgba(255,255,255,.05); }
    .mb-gender-menu a.is-active { background: rgba(255,45,120,.13); color: var(--accent); }

    @media (prefers-reduced-motion: reduce) {
        .mb-drawer, .mb-menu, .mb-scrim { transition: none; }
    }
}

/* Tablets / foldables (iPad ~834px, Galaxy Fold ~884px). The bottom bar spans
   full width here (Wayne's choice — keep it edge-to-edge), so the phone-sized
   icons and 10px labels look small and lost with big gaps between them. Scale
   the whole bar up for this width band so it reads at tablet size. Phones
   (<700px) keep the compact sizing; desktop (>900px) has no bar at all.
   Placed after the max-width:900px block so it wins for its narrower range. */
@media (min-width: 700px) and (max-width: 900px) {
    /* Keep the header pinned on scroll (like desktop). The mobile rules above set
       .top to position:relative — fine on a phone where every row counts, but on a
       tablet there's room to keep it visible. Sticky still anchors the absolutely-
       positioned gender menu, so nothing else has to change. z-index stays below
       the drawers/scrim (9600+) so an open filter sheet still covers it. */
    .top { position: sticky; top: 0; z-index: 50; }

    /* Hamburger (and any .top-icon button) is a 19px glyph in a 38px box — right
       for a phone, small on a tablet. Bump both to a comfortable tablet size. */
    .top-icon { width: 44px; height: 44px; }
    .top-icon svg { width: 24px; height: 24px; }

    body { padding-bottom: 94px; }              /* clear the taller bar */
    .mb-tab { height: 80px; gap: 7px; font-size: 12.5px; }
    .mb-tab svg { width: 27px; height: 27px; }
    .mb-badge {
        min-width: 18px; height: 18px;
        font-size: 11px; line-height: 18px;
    }
    /* Raised primary action scales with the rest. margin-top keeps it sitting
       the same proportion above the taller bar; the border is the "notch" ring
       cut out of the bar, so it grows too. */
    .mb-fab-c {
        width: 66px; height: 66px;
        margin-top: -40px; border-width: 5px;
    }
    .mb-tab.is-fab svg { width: 30px; height: 30px; }
    .mb-tab.is-fab .mb-badge { top: -34px; }
}