/* ==========================================================================
   ui-mobile.css — Mobile-first responsive layer (Phase 1)
   ==========================================================================

   Loaded LAST of all stylesheets (master.blade.php, after ui-theme-overrides.css)
   so it wins cascade ties at equal specificity without needing !important.

   CONVENTIONS (matching ui-system.css / ui-theme-overrides.css):
     - Every rule is scoped under .ui-site-shell so nothing leaks into the
       admin panel, which is scoped .ui-admin-shell.
     - BEM-ish naming: ui-<block>__<element>--<modifier>.
     - Every transition/animation is paired with a prefers-reduced-motion
       block, matching the 31 existing blocks in ui-theme-overrides.css.

   DESKTOP-SAFETY RULE — every declaration in this file is either:
     (a) inside a max-width media query, or
     (b) a clamp() whose CEILING equals the current desktop value.
   Desktop therefore computes identically to before this file existed.

   CANONICAL BREAKPOINTS — the codebase has drifted (991.98px 19x vs 991px 1x;
   575.98px 11x vs 575px 3x, while responsive.css uses integer ranged bands).
   New code uses the dominant .98 set only:

       sm   max-width: 575.98px    phone portrait
       md   max-width: 767.98px    large phone / small tablet
       lg   max-width: 991.98px    tablet — bottom nav + drawer boundary
                                   (matches Bootstrap's navbar-expand-lg)

   Custom properties cannot be used inside @media conditions, so these values
   are repeated literally below rather than tokenised.

   Z-INDEX BUDGET (existing values it must coexist with):
       98      .scroll_btn                 style.css:2287
       1030    .ui-filters-backdrop
       1035    .ui-bottom-nav              (tucked away while a sheet is open —
                                            the backdrop sits below it)
       1040    .ui-listings-filters sheet
       1055    Bootstrap modal             — intentionally ABOVE the bottom nav so
                                             the listing quick-view modal covers it
       9999    .menu_fix sticky header     style.css:430-435
       99998   .ui-dashboard-backdrop
       99999   .dashboard_sidebar          style.css:3895

   ...but only two of those layers are actually siblings. .ui-main-content sets
   position: relative; z-index: 1 (ui-theme-overrides.css:37-42), so it is a
   STACKING CONTEXT, and everything rendered into @section('content') — the
   filter sheet, the dashboard drawer and both backdrops — is confined to it.
   Their z-indexes only order them against each other; against anything outside
   main they all collapse to a single global layer of 1. Only .ui-bottom-nav and
   the header live outside main. See §1's .has-sheet-open rule.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — fluid spacing, tap targets, nav metrics
   --------------------------------------------------------------------------
   ui-system.css:47-51 defines --ui-space-* as static rem values. Redeclared
   here as clamp() with the ceiling pinned to the original value, so desktop is
   byte-identical and only narrow viewports tighten up.
   -------------------------------------------------------------------------- */

.ui-site-shell {
    --ui-space-xs: clamp(0.375rem, 0.33rem + 0.2vw, 0.5rem);    /* was 0.5rem  */
    --ui-space-sm: clamp(0.5rem, 0.44rem + 0.3vw, 0.75rem);     /* was 0.75rem */
    --ui-space-md: clamp(0.875rem, 0.78rem + 0.5vw, 1.25rem);   /* was 1.25rem */
    --ui-space-lg: clamp(1.25rem, 0.98rem + 1.2vw, 2rem);       /* was 2rem    */
    --ui-space-xl: clamp(1.75rem, 1.3rem + 2vw, 3rem);          /* was 3rem    */
    --ui-space-2xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);        /* new         */

    /* Fluid body copy. Ceiling 1rem matches --font-size-body in
       ui-theme-overrides.css:10832, so desktop text does not change size. */
    --font-size-body: clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);

    /* WCAG 2.5.8 minimum target size. */
    --ui-tap-target: 44px;

    --ui-bottom-nav-h: 3.75rem;
    --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ui-safe-left: env(safe-area-inset-left, 0px);
    --ui-safe-right: env(safe-area-inset-right, 0px);
}

/* h6 is the one heading left flat at 0.9375rem (ui-theme-overrides.css:10881);
   give it the same treatment as h1-h5. :where() keeps specificity at (0,1,0)
   so intentional component styles keep winning, per the note at :10810. */
.ui-site-shell :where(h6) {
    font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
}

/* Viewport units: 100vh does not account for mobile browser chrome, causing a
   jump as the toolbar hides. Upgrade in place without editing the original
   rule at ui-theme-overrides.css:26. */
@supports (min-height: 100dvh) {
    .ui-site-shell {
        min-height: 100dvh;
    }
}

/* viewport-fit=cover lets content slide under notches in landscape. Inset the
   content column — not the shell — so decorative backgrounds still bleed edge
   to edge. */
@media (max-width: 991.98px) {
    .ui-site-shell .ui-main-content {
        padding-left: var(--ui-safe-left);
        padding-right: var(--ui-safe-right);
    }
}

/* Both overlays in this file (the filter sheet, §3, and the dashboard drawer,
   §4) are rendered inside <main>, which is a stacking context — so their
   z-indexes are local to it and they paint at a global layer of 1. The sticky
   header is a body-level sibling at z-index 9999 (.menu_fix, style.css:430-435).
   Without this, opening either overlay leaves the header sitting on top of the
   dim backdrop: undimmed, clickable, and outside the JS focus trap.

   Lifting main (rather than tucking the header) avoids fighting .menu_fix's
   1s menu_animate keyframes, which animate transform and would beat a plain
   declaration while running. Gated on .has-sheet-open, which main.js only ever
   sets from the two triggers that are display:none above this width. */
@media (max-width: 991.98px) {
    .ui-site-shell.has-sheet-open .ui-main-content {
        z-index: 10000;
    }
}


/* --------------------------------------------------------------------------
   2. BOTTOM NAVIGATION
   -------------------------------------------------------------------------- */

.ui-site-shell .ui-bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {

    .ui-site-shell .ui-bottom-nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid var(--ui-color-border, rgba(15, 23, 42, 0.08));
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1);
        padding-bottom: var(--ui-safe-bottom);
        transform: translateY(0);
        transition: transform var(--ui-transition, 180ms ease),
                    visibility var(--ui-transition, 180ms ease);
    }

    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .ui-site-shell .ui-bottom-nav {
            background: rgba(255, 255, 255, 0.82);
            -webkit-backdrop-filter: blur(var(--ui-blur, 18px));
            backdrop-filter: blur(var(--ui-blur, 18px));
        }
    }

    /* Applied by main.js when scrolling down, removed when scrolling up.
       visibility keeps the tucked bar out of the tab order — a transform alone
       leaves it focusable, so tabbing past the footer would land on links that
       are off-screen. It is in the transition list above so it defers to the
       end of the slide-out and applies immediately on the way back in. */
    .ui-site-shell .ui-bottom-nav.is-tucked {
        transform: translateY(calc(100% + 1px));
        visibility: hidden;
    }

    .ui-site-shell .ui-bottom-nav__list {
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
        list-style: none;
        min-height: var(--ui-bottom-nav-h);
    }

    .ui-site-shell .ui-bottom-nav__item {
        flex: 1 1 0;
        min-width: 0;              /* let long labels ellipsis instead of overflowing */
    }

    .ui-site-shell .ui-bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Containing block for the .is-active pip below — without it the pip
           anchors to .ui-bottom-nav and centres on the whole bar. */
        position: relative;
        gap: 0.15rem;
        min-height: var(--ui-tap-target);
        height: 100%;
        padding: 0.4rem 0.25rem;
        text-decoration: none;
        color: var(--ui-color-muted, #6b7280);
        transition: color var(--ui-transition, 180ms ease);
    }

    .ui-site-shell .ui-bottom-nav__icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem;
        line-height: 1;
    }

    .ui-site-shell .ui-bottom-nav__label {
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ui-site-shell .ui-bottom-nav__link.is-active {
        color: var(--ui-color-primary, #6366f1);
    }

    /* Active pip sits above the icon rather than under the label, so it reads
       as a tab indicator and never collides with descenders. */
    .ui-site-shell .ui-bottom-nav__link.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 1.5rem;
        height: 3px;
        border-radius: 0 0 3px 3px;
        transform: translateX(-50%);
        background: var(--ui-color-primary, #6366f1);
    }

    .ui-site-shell .ui-bottom-nav__link:focus-visible {
        outline: 2px solid var(--ui-color-primary, #6366f1);
        outline-offset: -3px;
        border-radius: var(--ui-radius-sm, 10px);
    }

    /* Unread count pill. Uses its own id (#bottomnav-unread-badge) — reusing
       #nav-unread-badge from navbar.blade.php:35 would duplicate an id. */
    .ui-site-shell .ui-bottom-nav__badge {
        position: absolute;
        top: -0.35rem;
        left: 55%;
        min-width: 1.05rem;
        padding: 0 0.25rem;
        border-radius: 999px;
        background: var(--ui-danger, #f43f5e);
        color: #fff;
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.05rem;
        text-align: center;
    }

    /* Clearance so the fixed bar never covers the footer's last row. */
    .ui-site-shell {
        padding-bottom: calc(var(--ui-bottom-nav-h) + var(--ui-safe-bottom));
    }

    /* Lift the back-to-top button clear of the bar (style.css:2287 puts it at
       bottom: 20px; z-index: 98). */
    .ui-site-shell .scroll_btn {
        bottom: calc(var(--ui-bottom-nav-h) + var(--ui-safe-bottom) + 0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-site-shell .ui-bottom-nav,
    .ui-site-shell .ui-bottom-nav__link {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   3. LISTINGS FILTERS — off-canvas sheet below lg
   --------------------------------------------------------------------------
   listings.blade.php:57 is col-lg-3, so below 992px a visitor scrolls past a
   search box, three selects and the whole amenity checkbox list (lines 65-138)
   before reaching a single result. Below lg the aside becomes a bottom sheet.
   -------------------------------------------------------------------------- */

.ui-site-shell .ui-filters-trigger,
.ui-site-shell .ui-filters-sheet__close,
.ui-site-shell .ui-filters-backdrop {
    display: none;
}

@media (max-width: 991.98px) {

    /* The desktop container creates a lower stacking context (z-index: 1).
       If it remains on mobile, the sheet's z-index cannot rise above the
       sibling backdrop, leaving a glass layer over every filter control. */
    .ui-site-shell .ui-listings-page > .container {
        z-index: auto;
    }

    .ui-site-shell .ui-filters-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* .ui-listings-toolbar switches to align-items: stretch below this width
           (ui-theme-overrides.css:4188), which would stretch the button to the full
           height of the intro block sharing its flex line. */
        align-self: center;
        gap: 0.45rem;
        min-height: var(--ui-tap-target);
        padding: 0.55rem 1rem;
        border: 1px solid var(--ui-color-border, rgba(15, 23, 42, 0.08));
        border-radius: var(--ui-radius-sm, 10px);
        background: var(--ui-color-surface, #fff);
        color: var(--ui-color-text, #0f172a);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
    }

    .ui-site-shell .ui-filters-trigger:focus-visible {
        outline: 2px solid var(--ui-color-primary, #6366f1);
        outline-offset: 2px;
    }

    .ui-site-shell .ui-filters-trigger__count {
        min-width: 1.25rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background: var(--ui-color-primary, #6366f1);
        color: #fff;
        font-size: 0.6875rem;
        line-height: 1.25rem;
    }

    .ui-site-shell .ui-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(15, 23, 42, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--ui-transition, 180ms ease), visibility var(--ui-transition, 180ms ease);
    }

    .ui-site-shell .ui-filters-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* The filter sheet's select2 selects now render their dropdown *inside* the
       sheet via dropdownParent (main.js), so it is covered by the sheet's own
       stacking context (1040 > backdrop 1030) and stays tappable. This rule is a
       safety net that also keeps the dropdown above the sheet's close button. */
    .ui-site-shell .ui-listings-filters .select2-dropdown {
        z-index: 1055; /* above the sheet's own content; outside <body> appended dropdowns still resolve here */
    }

    /* Fixed rather than transformed-in-place: the aside sits inside a Bootstrap
       column, so it must escape that flow to span the viewport.

       top: auto is load-bearing. The desktop rule is position: sticky with
       top: var(--ui-chrome-nav-offset) (ui-theme-overrides.css:3988-3989, 96px),
       and that top survives the switch to fixed. With top, bottom and a
       max-height all resolved the box is over-constrained, so bottom is dropped
       and the "bottom sheet" would anchor 96px below the top of the viewport. */
    .ui-site-shell .ui-listings-filters {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        margin: 0;
        border-radius: var(--ui-radius-lg, 24px) var(--ui-radius-lg, 24px) 0 0;
        padding-bottom: calc(var(--ui-space-lg) + var(--ui-safe-bottom));
        box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.28);
        transform: translateY(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 240ms ease, visibility 240ms ease;
    }

    .ui-site-shell .ui-listings-filters.is-open {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Grab handle — a purely visual affordance that the sheet is draggable-ish. */
    .ui-site-shell .ui-listings-filters::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        margin: 0.35rem auto var(--ui-space-sm);
        border-radius: 999px;
        background: var(--ui-color-border, rgba(15, 23, 42, 0.18));
    }

    /* With the aside fixed, its col-lg-3 wrapper has zero in-flow height but still
       contributes a row gutter, leaving dead space above the first card. Zero the
       *following* column's gutter rather than the wrapper's — the wrapper's own
       margin-top is what cancels .row's negative margin-top, and display:none is
       out (it would hide the sheet subtree with it). */
    .ui-site-shell .ui-listings-page > .container > .row > .col-lg-3 + .col-lg-9 {
        margin-top: 0;
    }

    /* Absolutely positioned rather than floated into __head: __head's layout is
       owned by ui-theme-overrides.css, which this phase does not touch. The sheet
       is position:fixed here, so it is the containing block. */
    .ui-site-shell .ui-filters-sheet__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: var(--ui-space-xs);
        right: var(--ui-space-xs);
        z-index: 1;
        width: var(--ui-tap-target);
        height: var(--ui-tap-target);
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--ui-color-muted, #6b7280);
        cursor: pointer;
    }

    /* Keeps the "Filters" heading clear of the close button. */
    .ui-site-shell .ui-listings-filters__head {
        padding-right: calc(var(--ui-tap-target) + var(--ui-space-xs));
    }

    .ui-site-shell .ui-filters-sheet__close:focus-visible {
        outline: 2px solid var(--ui-color-primary, #6366f1);
        outline-offset: 2px;
    }

    /* Locks background scroll while the sheet or drawer is open. */
    .ui-site-shell.has-sheet-open {
        overflow: hidden;
    }

    /* The sheet (1040) sits above the bottom nav (1035) but the backdrop (1030)
       sits below it, so without this the nav stays visible and tappable outside
       the sheet's focus trap. Tuck it away for the duration instead. */
    .ui-site-shell.has-sheet-open .ui-bottom-nav {
        transform: translateY(calc(100% + 1px));
        visibility: hidden;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-site-shell .ui-listings-filters,
    .ui-site-shell .ui-filters-backdrop {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   4. DASHBOARD SIDEBAR — real off-canvas drawer below lg
   --------------------------------------------------------------------------
   Previously non-functional: main.js:330-337 called addClass('.menu_show')
   (stray leading dot) against .menu_icon/.menu_show, neither of which existed
   anywhere in the project. Below 992px the full 15-item sidebar rendered as a
   block above every dashboard page's content.
   -------------------------------------------------------------------------- */

.ui-site-shell .ui-dashboard-drawer-toggle,
.ui-site-shell .ui-dashboard-backdrop {
    display: none;
}

@media (max-width: 991.98px) {

    .ui-site-shell .ui-dashboard-drawer-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: var(--ui-tap-target);
        margin-bottom: var(--ui-space-md);
        padding: 0.55rem 1rem;
        border: 1px solid var(--ui-color-border, rgba(15, 23, 42, 0.08));
        border-radius: var(--ui-radius-sm, 10px);
        background: var(--ui-color-surface, #fff);
        color: var(--ui-color-text, #0f172a);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
    }

    .ui-site-shell .ui-dashboard-drawer-toggle:focus-visible {
        outline: 2px solid var(--ui-color-primary, #6366f1);
        outline-offset: 2px;
    }

    .ui-site-shell .ui-dashboard-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99998;            /* just under .dashboard_sidebar (99999) */
        background: rgba(15, 23, 42, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--ui-transition, 180ms ease), visibility var(--ui-transition, 180ms ease);
    }

    .ui-site-shell .ui-dashboard-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Selector deliberately includes the .ui-user-sidebar compound: the (0,3,0)
       rule at ui-theme-overrides.css:5042 sets `overflow: hidden` and a `padding`
       shorthand, both of which would outrank a bare (0,2,0) .dashboard_sidebar
       rule — leaving a 15-item drawer unscrollable and losing the safe-area pad.
       Equal specificity + later load order is what wins here. */
    .ui-site-shell .dashboard_sidebar,
    .ui-site-shell .dashboard_sidebar.ui-user-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(19rem, 86vw);
        max-width: 86vw;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        margin: 0;
        padding: 1.25rem 1rem calc(1.5rem + var(--ui-safe-bottom)) calc(1rem + var(--ui-safe-left));
        border-radius: 0;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 240ms ease, visibility 240ms ease;
    }

    .ui-site-shell .dashboard_sidebar.menu_show,
    .ui-site-shell .dashboard_sidebar.ui-user-sidebar.menu_show {
        transform: translateX(0);
        visibility: visible;
    }

    /* Present in sidebar.blade.php:2 but hidden by style.css:3929 with nothing
       ever un-hiding it. It becomes the drawer's close control. */
    .ui-site-shell .dashboard_sidebar .close_icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        width: var(--ui-tap-target);
        height: var(--ui-tap-target);
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.06);
        color: var(--ui-color-text, #0f172a);
        cursor: pointer;
    }

    .ui-site-shell .dashboard_sidebar .close_icon:focus-visible {
        outline: 2px solid var(--ui-color-primary, #6366f1);
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-site-shell .dashboard_sidebar,
    .ui-site-shell .dashboard_sidebar.ui-user-sidebar,
    .ui-site-shell .ui-dashboard-backdrop {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   5. TOUCH TARGETS & STICKY-NAV DEFECTS
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* responsive.css:640 sizes this 35x35px — under the 44px minimum. */
    .ui-site-shell .navbar-toggler {
        min-width: var(--ui-tap-target);
        min-height: var(--ui-tap-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* style.css:430-435 sets position: fixed with no top/left/width, so the
       sticky nav collapses to content width and floats mid-viewport. */
    .ui-site-shell .main_menu.menu_fix {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Tapping a parent nav item must reveal its submenu. style.css:508-512
       reveals .menu_droapdown on :hover only, with no click handler and no
       focus fallback, leaving child items unreachable on touch. main.js adds
       .is-open; :focus-within is the no-JS fallback. (Class spelling
       "droapdown" is the real one in the theme.) */
    .ui-site-shell .main_menu .nav-item.has-dropdown:focus-within > .menu_droapdown,
    .ui-site-shell .main_menu .nav-item.has-dropdown.is-open > .menu_droapdown {
        top: 100%;
        opacity: 1;
        visibility: visible;
    }

    /* Inside the collapsed panel the submenu should push content rather than
       overlay it — absolute positioning there hides items off-panel. Covers the
       :focus-within fallback too, or a keyboard user with JS off gets an
       absolutely-positioned submenu overflowing the panel. */
    .ui-site-shell .main_menu #navbarSupportedContent .nav-item.has-dropdown:focus-within > .menu_droapdown,
    .ui-site-shell .main_menu #navbarSupportedContent .nav-item.has-dropdown.is-open > .menu_droapdown {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
        margin-top: 0.25rem;
        box-shadow: none;
    }

    .ui-site-shell .main_menu .has-dropdown > .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .ui-site-shell .main_menu .has-dropdown > .nav-link .ui-nav-caret {
        transition: transform var(--ui-transition, 180ms ease);
    }

    .ui-site-shell .main_menu .has-dropdown.is-open > .nav-link .ui-nav-caret {
        transform: rotate(180deg);
    }
}

@media (max-width: 767.98px) {

    /* ui-theme-overrides.css:361-363 compresses these to padding: .2rem, which
       leaves an unreachably small target. Restore height without re-showing the
       labels that rule intentionally hides. */
    .ui-site-shell .ui-chrome-topbar__row a,
    .ui-site-shell .wsus__topbar_right > a,
    .ui-site-shell .ui-chrome-topbar__account {
        min-height: var(--ui-tap-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-site-shell .main_menu .has-dropdown > .nav-link .ui-nav-caret {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   6. SECTION RHYTHM & CONTENT DENSITY
   --------------------------------------------------------------------------
   Fluid vertical rhythm on phones. Kept inside max-width queries so desktop
   section spacing is untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .ui-site-shell .ui-main-content > section {
        padding-top: var(--ui-space-2xl);
        padding-bottom: var(--ui-space-2xl);
    }

    /* Tables are the least phone-friendly element in the theme; the existing
       approach is horizontal scroll (ui-theme-overrides.css:5298 et al), so
       make that consistent and discoverable rather than clipping. */
    .ui-site-shell .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Full-bleed primary actions read better than centred half-width buttons. */
    .ui-site-shell .ui-listings-filters .common_btn,
    .ui-site-shell .ui-listings-filters button[type="submit"] {
        width: 100%;
        min-height: var(--ui-tap-target);
    }

    /* On its own wrapped flex line the trigger should claim the full width. */
    .ui-site-shell .ui-filters-trigger {
        flex: 1 1 100%;
        align-self: stretch;
    }
}

@media (max-width: 575.98px) {

    /* iOS zooms the page when focusing an input under 16px. Pin form controls to
       exactly 16px on the smallest screens to prevent that jump. select2 hides the
       real <select> and renders its own markup, so it needs naming explicitly. */
    .ui-site-shell input,
    .ui-site-shell select,
    .ui-site-shell textarea,
    .ui-site-shell .select2-container .select2-selection__rendered,
    .ui-site-shell .select2-container .select2-search__field,
    .select2-container .select2-search__field {
        font-size: 1rem;
    }

    /* Checkboxes and radios are excluded on purpose: min-height stretches them as
       replaced elements, which would turn the amenity filter list into a column of
       44px-tall boxes. */
    .ui-site-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .ui-site-shell select,
    .ui-site-shell textarea,
    .ui-site-shell .form-control:not(.form-check-input) {
        min-height: var(--ui-tap-target);
    }

    /* Status card keeps a comfortable tap target and lets the transition line
       wrap instead of forcing a scroll on very narrow phones. */
    .ui-site-shell .ui-listing-detail .listing_det_side_status {
        padding: 1rem 1.125rem;
        gap: 0.7rem;
    }

    .ui-site-shell .ui-listing-detail .listing_det_side_status .ui-listing-header__pill--status {
        font-size: 0.875rem;
    }
}


/* --------------------------------------------------------------------------
   7. FLOATING WIDGETS — chatbot clearance over the bottom nav
   --------------------------------------------------------------------------
   The chatbot toggle and panel (ui-theme-overrides.css "Chatbot Widget") are
   fixed to the viewport bottom at z-index 9999/9998 — far above the bottom
   nav's 1035. Below lg the nav is full-width, but the widget's own mobile
   rules only carve 16-24px of clearance (ui-theme-overrides.css:14689-14705),
   so the toggle overlaps the nav's rightmost item ("Sign in" / "Account") and
   steals a tap target. The panel's 80-92px bottom also sits barely clear of
   the 60px bar. Lift both above it; the panel bottoms out 1.5rem clear so its
   input row is never hidden behind the bar.

   Scoped under .ui-site-shell so the admin shell, which has no bottom nav,
   keeps the widget's original positioning.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .ui-site-shell .chatbot-toggle {
        bottom: calc(var(--ui-bottom-nav-h) + var(--ui-safe-bottom) + 0.75rem);
    }

    .ui-site-shell .chatbot-panel {
        bottom: calc(var(--ui-bottom-nav-h) + var(--ui-safe-bottom) + 1.5rem);
        /* Keep the panel clear of the top of the short viewports (landscape
           phones): the raised bottom coerces the fixed 520px height upward,
           so clamp with the nav factored in. */
        max-height: calc(100vh - var(--ui-bottom-nav-h) - var(--ui-safe-bottom) - 6rem);
    }
}