/*
 Theme Name:   LEMEXI Child
 Theme URI:    https://lemexi.com
 Description:  LEMEXI brand layer over the parent real-estate theme. Mobile-first, iOS-feel, B/W base with purple accent.
 Author:       LEMEXI
 Author URI:   https://lemexi.com
 Template:     homez
 Version:      4.0.0
 Text Domain:  homez-child
*/

/* ════════════════════════════════════════════════════════════════════
   LEMEXI — Design tokens
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* Surfaces */
    --lmx-bg:                 #ffffff;
    --lmx-surface:            #ffffff;
    --lmx-surface-elevated:   #ffffff;
    --lmx-surface-soft:       #f7f7fb;
    --lmx-surface-glass:      rgba(255,255,255,0.82);

    /* Text */
    --lmx-text:               #181A20;
    --lmx-text-muted:         rgba(24,26,32,0.62);
    --lmx-text-subtle:        rgba(24,26,32,0.42);
    --lmx-text-inverse:       #ffffff;

    /* Borders */
    --lmx-border:             rgba(24,26,32,0.08);
    --lmx-border-strong:      rgba(24,26,32,0.14);

    /* Accent (brand purple — hover/active/focus moments only) */
    --lmx-accent:             #6A3CF0;
    --lmx-accent-hover:       #5530D0;
    --lmx-accent-soft:        rgba(106,60,240,0.08);
    --lmx-accent-glow:        rgba(106,60,240,0.25);

    /* Geometry */
    --lmx-radius-sm:          8px;
    --lmx-radius:             12px;
    --lmx-radius-lg:          16px;
    --lmx-radius-xl:          20px;
    --lmx-radius-pill:        999px;

    /* Shadow */
    --lmx-shadow-xs:          0 1px 2px rgba(24,26,32,0.04);
    --lmx-shadow-sm:          0 1px 3px rgba(24,26,32,0.06), 0 1px 2px rgba(24,26,32,0.04);
    --lmx-shadow:             0 4px 12px rgba(24,26,32,0.06), 0 2px 6px rgba(24,26,32,0.04);
    --lmx-shadow-md:          0 8px 24px rgba(24,26,32,0.08), 0 4px 12px rgba(24,26,32,0.05);
    --lmx-shadow-lg:          0 16px 40px rgba(24,26,32,0.12), 0 8px 20px rgba(24,26,32,0.06);

    /* Motion */
    --lmx-ease:               cubic-bezier(0.4, 0, 0.2, 1);
    --lmx-ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
    --lmx-fast:               150ms;
    --lmx-base:               220ms;
    --lmx-slow:               360ms;

    /* Typography */
    --lmx-font:               'Poppins', -apple-system, 'SF Pro Display', 'Inter', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   Header logo → LEMEXI wordmark — ONLY in the top header, ONLY on the
   front page.
   Scoping is THREE layers deep so we don't leak the swap anywhere:
     1. `body.home`        — front page only (not Properties / Submit / etc.)
     2. `#apus-header`     — desktop header wrapper (unique id in DOM)
     3. `#apus-header-mobile` — mobile header wrapper (unique id in DOM)
   `#apus-footer` is a completely separate id, so the footer logo is
   never matched. The original L+LEMEXI from /uploads/2023/01/logo-dark.svg
   stays in place everywhere else.
   ════════════════════════════════════════════════════════════════════ */
body.home #apus-header .logo-main img,
body.home #apus-header-mobile .logo a img,
body.home #apus-header-mobile .logo > img {
    content: url('assets/lemexi-wordmark.svg');
    width: auto !important;
    object-fit: contain;
}
/* Desktop — sane size; the tight viewBox keeps it visually dense. */
body.home #apus-header .logo-main img {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 200px !important;
}
/* Mobile — slightly smaller and capped at 60vw so it never pushes
   past the burger / user icon on narrow phones. */
body.home #apus-header-mobile .logo a img,
body.home #apus-header-mobile .logo > img {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 60vw !important;
}

/* ════════════════════════════════════════════════════════════════════
   Brand color overrides (replaces parent theme coral #EB6753)
   The parent template.css hardcodes coral in a few spots that bypass
   the --homez-* CSS variables — we force the brand purple here.
   These run on every viewport (NOT inside the mobile @media).
   ════════════════════════════════════════════════════════════════════ */

.property-item .property-thumbnail-wrapper .action-item [class*="btn"][class*="added"],
.property-item .property-thumbnail-wrapper .action-item [class*="btn"][class*="remove"],
.property-grid-v6 .property-thumbnail-wrapper .action-item [class*="btn"][class*="added"],
.property-grid-v6 .property-thumbnail-wrapper .action-item [class*="btn"][class*="remove"] {
    background-color: var(--lmx-accent) !important;
}

/* FEATURED pill — parent's template.css line 11975:
   `.featured-property { background-color: #EB6753 }`. Repaint to brand. */
.featured-property,
.property-item .featured-property,
.property-grid .featured-property,
.title-wrapper .featured-property,
.featured-icon {
    background-color: var(--lmx-accent) !important;
    color: #fff !important;
}
.featured-icon {
    background: transparent !important;       /* it's a tiny lightning icon, not a pill */
    color: var(--lmx-accent) !important;
}

.yelp-list .yelp-circle.perfect {
    border-color: var(--lmx-accent) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Layout swap (every viewport):
   - Counter widgets (250 / 10K+ / 900+) → hidden in place.
     CRITICAL: these widgets sit INSIDE the same Elementor top-section
     as the hero heading + search form + revslider. Hiding the whole
     section (with :has) would nuke the hero too — so we target just
     the counter widgets themselves, leaving the section intact.
   - "Trusted by ..." + brand carousel section → hidden in full
     (it lives in its own section, safe to drop).
   - functions.php injects the testimonials marquee where Trusted by
     used to be: hero/search → ... → testimonials → footer.
   ════════════════════════════════════════════════════════════════════ */

/* Hide counter widgets only — keep the surrounding section alive */
.elementor-widget-counter {
    display: none !important;
}
/* Also flatten the column that held only counters so it doesn't leave
   an empty band of padding below the search row. */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-counter:only-child),
.elementor-column.elementor-col-33:has(.elementor-widget-counter) {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hide Trusted by + brand-carousel section in full */
.elementor-element-408ce28,
.elementor-top-section:has(.elementor-widget-apus_element_brands) {
    display: none !important;
}

/* ── Testimonials marquee ── */
.lmx-testimonials {
    padding: 56px 0 64px;
    background: var(--lmx-surface);
    overflow: hidden;
    position: relative;
}
.lmx-testimonials__heading {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: var(--lmx-text);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
}
.lmx-testimonials__sub {
    font-size: 14px;
    text-align: center;
    color: var(--lmx-text-muted);
    margin: 0 0 28px;
}
.lmx-testimonials__marquee {
    /* Native horizontal scroll. The auto-advance (JS: scrollLeft += rAF)
       AND the manual mouse-drag / touch-swipe all drive the SAME native
       scroll position — no CSS transform, no WAAPI. That is the key: the
       old Safari hover flicker came from pausing a transform animation, and
       there is none here. Auto-motion runs on desktop AND mobile; it only
       pauses while the user is actively dragging/swiping, never on hover. */
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    /* Vertical breathing room so a hovered card's lift + border + shadow are
       NOT clipped by the scroll container (overflow-y must stay hidden for the
       horizontal scroll, so we give the cards padding to grow into). */
    padding: 22px 0;
    cursor: grab;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    scrollbar-width: none;            /* hide scrollbar, still scrollable */
    /* fade-out at both edges */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}
.lmx-testimonials__marquee::-webkit-scrollbar { display: none; }
.lmx-testimonials__marquee.lmx-grab { cursor: grabbing; }
.lmx-testimonials__track {
    display: flex;
    gap: 16px;
    width: max-content;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
/* Each card is an <a> linking to the real Google review */
.lmx-testimonials__card {
    flex: 0 0 360px;
    width: 360px;
    padding: 24px 26px 22px;
    background: var(--lmx-surface);
    border: 1px solid var(--lmx-border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(24,26,32,0.04);
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--lmx-text);
    transition: transform var(--lmx-base) var(--lmx-ease),
                box-shadow var(--lmx-base) var(--lmx-ease),
                border-color var(--lmx-base) var(--lmx-ease);
}
.lmx-testimonials__card:hover,
.lmx-testimonials__card:focus-visible {
    /* The strip pauses on hover, so a gentle lift + accent border reads as
       "clickable". Shadow kept tight so it fits the marquee's 22px padding
       and never clips. */
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(24,26,32,0.10);
    border-color: var(--lmx-accent);
    outline: none;
}
.lmx-testimonials__stars {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 10px;
    color: var(--lmx-accent);
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
}
.lmx-testimonials__quote {
    font-size: 14px;
    line-height: 1.55;
    color: var(--lmx-text);
    margin: 0 0 14px;
    font-weight: 400;
    flex: 1;
}
.lmx-testimonials__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--lmx-text);
    line-height: 1.2;
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.lmx-testimonials__google {
    font-size: 11px;
    font-weight: 500;
    color: var(--lmx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Phones: smaller cards. The auto-scroll AND finger-swipe both run through
   the shared native scroll defined on .lmx-testimonials__marquee above —
   nothing size-specific is needed for the motion itself. */
@media (max-width: 768px) {
    .lmx-testimonials { padding: 40px 0 48px; }
    .lmx-testimonials__heading { font-size: 22px; }
    .lmx-testimonials__card {
        flex: 0 0 82%;
        width: 82%;
        max-width: 320px;
        padding: 20px;
    }
    /* lighter edge fade so swiped cards stay readable to the edges */
    .lmx-testimonials__marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
    }
    /* No hover lift on touch — avoids a sticky :hover state after a tap */
    .lmx-testimonials__card:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(24,26,32,0.04);
        border-color: var(--lmx-border);
    }
}

/* ════════════════════════════════════════════════════════════════════
   Global — typography + smoothing + reset corrections
   ════════════════════════════════════════════════════════════════════ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--lmx-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--lmx-text);
}

/* Prevent horizontal scroll on mobile */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Tap highlight = brand accent, not default blue */
a, button, [role="button"] {
    -webkit-tap-highlight-color: var(--lmx-accent-soft);
}

/* Visible but elegant focus ring (a11y) */
:focus-visible {
    outline: 2px solid var(--lmx-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — applies at ≤ 1199.98px (Bootstrap xl breakpoint)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {

    /* ── Body / layout ── */
    body {
        /* honour iPhone notch + home indicator */
        padding-bottom: env(safe-area-inset-bottom);
    }
    .container,
    .container-fluid {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* ── Mobile header — sticky frosted glass ── */
    #apus-header-mobile {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--lmx-surface-glass);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--lmx-border);
        padding: 10px 0;
        transition: box-shadow var(--lmx-base) var(--lmx-ease);
    }
    #apus-header-mobile .container { padding: 0 12px; }
    #apus-header-mobile .logo img {
        max-height: 54px;        /* was 36px — ×1.5 per request */
        width: auto;
        display: block;
        margin: 0 auto;
    }
    #apus-header-mobile .btn-showmenu,
    #apus-header-mobile .btn-menu-account {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--lmx-radius);
        color: var(--lmx-text);
        background: transparent;
        border: 0;
        transition: background var(--lmx-fast) var(--lmx-ease),
                    color      var(--lmx-fast) var(--lmx-ease),
                    transform  var(--lmx-fast) var(--lmx-ease);
    }
    #apus-header-mobile .btn-showmenu:active,
    #apus-header-mobile .btn-menu-account:active {
        background: var(--lmx-accent-soft);
        color: var(--lmx-accent);
        transform: scale(0.94);
    }
    #apus-header-mobile .btn-showmenu i,
    #apus-header-mobile .btn-menu-account i {
        font-size: 22px;
    }
    /* Top-row menu (user submenu) — clean stack */
    #apus-header-mobile .top-wrapper-menu .inner-top-menu {
        right: 0;
        left: auto;
        border-radius: var(--lmx-radius-lg);
        box-shadow: var(--lmx-shadow-md);
        border: 1px solid var(--lmx-border);
        padding: 8px;
        min-width: 220px;
        background: var(--lmx-surface);
    }

    /* ── Off-canvas mobile menu — modernise ── */
    #navbar-offcanvas,
    .offcanvas-mobile,
    .navbar-offcanvas {
        background: var(--lmx-surface);
    }
    .offcanvas-mobile .nav-link,
    #navbar-offcanvas .nav > li > a {
        padding: 14px 18px;
        font-size: 16px;
        font-weight: 500;
        color: var(--lmx-text);
        border-radius: var(--lmx-radius);
        transition: background var(--lmx-fast) var(--lmx-ease),
                    color      var(--lmx-fast) var(--lmx-ease);
    }
    #navbar-offcanvas .nav > li > a:active,
    #navbar-offcanvas .nav > li.active > a {
        background: var(--lmx-accent-soft);
        color: var(--lmx-accent);
    }

    /* ════════════════════════════════════════════════════════
       Property search / filter widget — modern iOS-style
       Real DOM (homez parent):
         .widget-property-search-form
           form.filter-listing-form
             ul.tab-list.nav-tabs
               li > label > input[type=radio] + span      ← All/For Sale/For Rent
             .search-form-inner
               .form-group-title  > i.flaticon-home + input.form-control
               .form-group-search > a.advance-search-btn
                                  + button.btn-submit.btn-theme
       ════════════════════════════════════════════════════════ */
    /* Outer "floating" white card around the whole search widget.
       The grey strip the user disliked was the *inner* tab-bar
       background — that one is killed above (transparent pill row). */
    .widget-property-search-form {
        background: var(--lmx-surface) !important;
        border: 1px solid var(--lmx-border) !important;
        border-radius: var(--lmx-radius-lg) !important;
        padding: 14px !important;
        box-shadow: var(--lmx-shadow-md) !important;
    }
    /* Defensively flatten parent-theme wrappers *inside* the card so
       no inherited grey panel leaks through, but keep the outer card. */
    .widget-property-search-form form.filter-listing-form,
    .widget-property-search-form .search-form-inner,
    .widget-property-search-form .main-inner,
    .widget-property-search-form .content-main-inner,
    .widget-property-search-form .list-fileds,
    .widget-property-search-form .form-group-search {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* — Pill segmented tabs (All / For Sale / For Rent) —
       Parent theme renders this as
         ul.tab-list.nav-tabs
           li > label > input[type=radio] + span     ← span has ::before line
       Parent's ::before is the orange underline that grows from 0 → 100%
       on :checked; we kill it and replace the visual with a black pill.

       The bar itself is transparent — no grey strip behind the labels. */
    .widget-property-search-form ul.tab-list.nav-tabs {
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: inline-flex;
        gap: 4px;
        margin: 0 0 14px 0 !important;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        list-style: none;
    }
    .widget-property-search-form ul.tab-list.nav-tabs::-webkit-scrollbar { display: none; }
    .widget-property-search-form ul.tab-list > li {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none;
        background: transparent !important;
    }
    .widget-property-search-form ul.tab-list > li label {
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        position: relative;
        cursor: pointer;
        border: 0 !important;
    }
    /* Hide radio (parent already does display:none but we lock it down) */
    .widget-property-search-form ul.tab-list > li label input[type="radio"] {
        display: none !important;
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    /* The visible pill — text vertically centered with line-height = height
       (idiomatic CSS pattern, no flex baseline drift on iOS Safari). */
    .widget-property-search-form ul.tab-list > li label > span {
        display: inline-block !important;
        min-width: 72px;
        height: 36px;
        line-height: 36px !important;     /* = height → text on the centerline */
        padding: 0 18px !important;
        border-radius: var(--lmx-radius-pill) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--lmx-text-muted) !important;
        white-space: nowrap;
        background: transparent !important;
        border: 0 !important;
        text-align: center;
        position: relative;
        vertical-align: middle;
        transition: background var(--lmx-fast) var(--lmx-ease),
                    color      var(--lmx-fast) var(--lmx-ease),
                    transform  var(--lmx-fast) var(--lmx-ease);
    }
    /* KILL parent's underline pseudo (the orange growing bar) */
    .widget-property-search-form ul.tab-list > li label > span::before,
    .widget-property-search-form ul.tab-list > li label > span::after,
    .widget-property-search-form ul.tab-list > li::before,
    .widget-property-search-form ul.tab-list > li::after,
    .widget-property-search-form ul.tab-list > li.active::before,
    .widget-property-search-form ul.tab-list > li.active::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        width: 0 !important;
        height: 0 !important;
    }
    .widget-property-search-form ul.tab-list > li label:active > span {
        transform: scale(0.96);
    }
    /* :checked state — proper black pill, white text */
    .widget-property-search-form ul.tab-list > li label input[type="radio"]:checked + span {
        background: var(--lmx-text) !important;
        color: var(--lmx-text-inverse) !important;
        box-shadow: var(--lmx-shadow-xs);
    }

    /* — Search row: keyword input + advanced + submit — */
    .widget-property-search-form .search-form-inner { margin: 0; }
    .widget-property-search-form .main-inner { margin: 0; }
    .widget-property-search-form .list-fileds {
        row-gap: 10px;
        column-gap: 14px;   /* clear horizontal breathing room between
                               input column and Advanced+Submit column;
                               .form-group-search has padding-left:0 forced
                               above, killing Bootstrap's gutter on that
                               side, so the gap must come from the row. */
    }
    .widget-property-search-form .form-group { margin-bottom: 0 !important; }

    /* Keyword input — pill with icon prefix.
       Parent CSS already absolutely-positions the <i> at left:15px and
       gives a sibling input padding-left:45px. We keep that contract
       and just restyle the wrapper + lock down the input metrics so
       the placeholder sits perfectly centered, not above the field. */
    .widget-property-search-form .form-group-title .form-group-inner {
        position: relative;     /* matches parent */
        background: var(--lmx-surface);
        border: 1px solid var(--lmx-border);
        border-radius: var(--lmx-radius);
        height: 52px;
        overflow: hidden;       /* clip any descender outside the shell; the
                                   typeahead dropdown is unclipped by the
                                   dedicated !important rule below */
        box-shadow: var(--lmx-shadow-xs);
        transition: border-color var(--lmx-fast) var(--lmx-ease),
                    box-shadow   var(--lmx-fast) var(--lmx-ease);
    }
    .widget-property-search-form .form-group-title .form-group-inner:focus-within {
        border-color: var(--lmx-accent);
        box-shadow: 0 0 0 4px var(--lmx-accent-glow);
    }
    /* The keyword field hosts the typeahead live-search dropdown (.tt-menu),
       which is absolutely positioned BELOW the input. The overflow:hidden
       above (added to keep the pill clean) was clipping that dropdown, so the
       property suggestions were invisible even though they rendered in the DOM.
       Once typeahead initialises it wraps the input in .twitter-typeahead — at
       that point let the wrapper overflow so suggestions show. The input's own
       fixed 50px metrics already keep the field itself clipped to the pill, and
       border-radius still clips the wrapper background, so the pill looks the
       same. (Bug: autocomplete suggestions stopped appearing — 2026-06-06.) */
    /* Let the keyword field's wrapper overflow so the typeahead suggestions
       dropdown (.tt-menu, abs-positioned below the input) is visible. A theme
       inline rule `.widget-property-search-form .form-group .form-group-inner
       { overflow:hidden !important }` clips it, so we override with !important
       and scope to the ONLY group that hosts the autocomplete input — the
       select fields keep their clipping untouched. (:has is supported in all
       current browsers; the select2 dropdowns render on <body> so they are
       unaffected either way.) */
    .widget-property-search-form .form-group .form-group-inner:has(.apus-autocompleate-input) {
        overflow: visible !important;
    }
    /* The keyword field sits in a full-width column on the first row; its
       dropdown drops DOWN into the second row where the select-field columns
       live. Those columns come later in the DOM and painted ON TOP of the
       suggestions. Lift the keyword field's whole column into its own stacking
       context above the siblings, and beat typeahead's inline z-index:100 on
       the menu so the suggestions are actually visible. */
    .widget-property-search-form .row > [class*="col-"]:has(.apus-autocompleate-input) {
        position: relative;
        z-index: 60;
    }
    .widget-property-search-form .twitter-typeahead .tt-menu {
        z-index: 999 !important;
    }
    /* iOS-Safari hardening for the autocomplete dropdown going off-screen.
       In Chrome the menu is already perfect: the typeahead wrapper computes to
       display:block / width:100%, and the menu is border-box, width:100%,
       left:0 — so it tracks the input exactly (276px on a 390px viewport).
       But iOS Safari (a) doesn't always honour the parent's `form.form-search
       .twitter-typeahead { display:block; width:100% }` over typeahead's inline
       `display:inline-block`, which lets the wrapper shrink to the typed text
       and drags the abs-positioned menu off to one side, and (b) doesn't clip
       the x-axis when overflow-y:auto pairs with overflow-x:visible, so long
       suggestion rows spill past the right edge. Enforce exactly what Chrome
       already does, with !important, so Safari can't deviate. (Bug: mobile
       suggestion dropdown overflowed the screen on iPhone Safari — 2026-06-06.) */
    .widget-property-search-form .twitter-typeahead {
        display: block !important;
        width: 100% !important;
        position: relative !important;
    }
    .widget-property-search-form .twitter-typeahead .tt-menu {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        /* The parent gives the menu `border-radius:0 0 8px 8px` (square TOP
           corners) and `top:46px`, so it tucks under the rounded input pill and
           its square white corners poke out past the pill's rounded bottom edge
           — that's the "white bleeding past the field border" on the phone.
           Detach it into its own rounded card with a small gap so nothing
           touches the pill, round ALL corners, and clip the rows to the card. */
        top: 100% !important;
        margin-top: 8px !important;
        border-radius: 12px !important;
        border: 1px solid var(--lmx-border) !important;
        box-shadow: 0 12px 32px rgba(24, 26, 32, 0.12) !important;
        overflow-x: hidden !important;   /* iOS Safari won't auto-clip x; force it */
        overflow-y: auto !important;     /* keep long lists scrollable */
    }
    /* Suggestion rows wrap instead of forcing the menu wider than its box. */
    .widget-property-search-form .twitter-typeahead .tt-menu .tt-suggestion,
    .widget-property-search-form .twitter-typeahead .tt-menu a.media,
    .widget-property-search-form .twitter-typeahead .tt-menu h4 {
        white-space: normal !important;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    /* Keep parent's position:absolute; left:15px on the icon; just recolor */
    .widget-property-search-form .form-group-title .form-group-inner > i {
        font-size: 18px;
        color: var(--lmx-text-subtle) !important;
        line-height: 1;
    }
    /* Input: fixed metrics so the placeholder stays inside the pill.
       Every dimension is forced with !important + box-sizing:border-box
       because the parent ships height:auto on .form-control which lets
       the line-box grow past the wrapper on iOS Safari. */
    .widget-property-search-form .form-group-title input.form-control,
    .widget-property-search-form .form-group-title input.apus-autocompleate-input,
    .widget-property-search-form .form-group-title .form-group-inner > input {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        height: 46px !important;             /* = pill 48px - 2*1px border; matches the select2 fields (46px). A 50px input spilled ~3px below the 48px pill and its white bg broke the rounded bottom corners. */
        min-height: 46px !important;
        max-height: 46px !important;
        line-height: 46px !important;        /* = height → text on the centerline */
        padding: 0 14px 0 46px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 16px !important;          /* iOS no-zoom on focus */
        font-weight: 500;
        color: var(--lmx-text);
        outline: 0 !important;
        vertical-align: middle;
        -webkit-appearance: none;
        appearance: none;
    }
    .widget-property-search-form .form-group-title input.form-control::placeholder,
    .widget-property-search-form .form-group-title input.apus-autocompleate-input::placeholder {
        color: var(--lmx-text-subtle);
        font-weight: 400;
        line-height: 46px;       /* iOS Safari sometimes ignores inherited line-height on ::placeholder */
        vertical-align: middle;
    }

    /* Advanced + Submit cluster */
    .widget-property-search-form .form-group-search { margin: 0; }
    .widget-property-search-form .form-group-search .d-md-flex {
        display: flex !important;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
    }
    .widget-property-search-form .advance-link { flex: 0 0 auto; }
    /* Advanced button — soft grey chip on the white card so it doesn't
       blend into the input pill or the card. Both the card and the input
       are #ffffff, so a white-on-white button looks like floating text. */
    .widget-property-search-form a.advance-search-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 52px;
        padding: 0 20px;
        border-radius: var(--lmx-radius);
        background: var(--lmx-surface-soft);   /* #f7f7fb */
        border: 1px solid var(--lmx-border-strong);
        color: var(--lmx-text);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--lmx-fast) var(--lmx-ease),
                    color      var(--lmx-fast) var(--lmx-ease),
                    border-color var(--lmx-fast) var(--lmx-ease),
                    transform  var(--lmx-fast) var(--lmx-ease);
    }
    .widget-property-search-form a.advance-search-btn i {
        font-size: 16px;
        color: var(--lmx-text-muted);
    }
    .widget-property-search-form a.advance-search-btn:hover,
    .widget-property-search-form a.advance-search-btn:active {
        background: var(--lmx-accent-soft);
        border-color: var(--lmx-accent);
        color: var(--lmx-accent);
    }
    .widget-property-search-form a.advance-search-btn:hover i,
    .widget-property-search-form a.advance-search-btn:active i {
        color: var(--lmx-accent);
    }
    .widget-property-search-form a.advance-search-btn:active {
        transform: scale(0.97);
    }

    /* Submit button — full-width on mobile, brand black → purple on hover */
    .widget-property-search-form button.btn-submit,
    .widget-property-search-form button.btn-submit.btn.btn-theme {
        flex: 1 1 auto;
        height: 52px;
        min-height: 52px;
        min-width: 52px;
        border-radius: var(--lmx-radius);
        background: var(--lmx-text);
        color: var(--lmx-text-inverse);
        border: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: var(--lmx-shadow-sm);
        transition: background var(--lmx-fast) var(--lmx-ease),
                    transform  var(--lmx-fast) var(--lmx-ease),
                    box-shadow var(--lmx-fast) var(--lmx-ease);
    }
    .widget-property-search-form button.btn-submit i {
        font-size: 18px;
        line-height: 1;
    }
    /* "no-text" submit shows only the magnifier icon — add a label on mobile */
    .widget-property-search-form button.btn-submit.no-text::after {
        content: "Search";
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    .widget-property-search-form button.btn-submit:hover,
    .widget-property-search-form button.btn-submit:focus {
        background: var(--lmx-accent);
        color: var(--lmx-text-inverse);
        box-shadow: 0 6px 20px var(--lmx-accent-glow);
    }
    .widget-property-search-form button.btn-submit:active {
        transform: scale(0.97);
    }

    /* — Advanced popup ("More Filter") —
       Parent theme positions this absolutely below the search row
       (`position: absolute; top: 100%`) so on mobile a stray white
       strip sits flush under the Search button. The actual popup is
       opened by magnific-popup which clones the element into an
       overlay, so hiding the original in the flow doesn't break
       opening — the cloned copy is unaffected. */
    .widget-property-search-form > form > .search-form-inner > .advance-search-wrapper,
    .widget-property-search-form .advance-search-wrapper {
        display: none !important;
    }
    /* When the magnific overlay re-renders the popup, our own rules
       below kick in to keep it on-brand. (`.mfp-content` is the
       overlay's content host injected by magnific-popup.) */
    .mfp-content .advance-search-wrapper,
    .mfp-content .advance-search-wrapper-fields {
        display: block !important;
        border-radius: var(--lmx-radius-lg);
        background: var(--lmx-surface);
        box-shadow: var(--lmx-shadow-lg);
        border: 1px solid var(--lmx-border);
    }
    .widget-property-search-form .advance-search-top {
        padding: 16px 18px;
        border-bottom: 1px solid var(--lmx-border);
    }
    .widget-property-search-form .advance-title {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: var(--lmx-text);
    }
    .widget-property-search-form .close-advance-popup {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--lmx-surface-soft);
        color: var(--lmx-text);
        cursor: pointer;
        transition: background var(--lmx-fast) var(--lmx-ease);
    }
    .widget-property-search-form .close-advance-popup:active {
        background: var(--lmx-accent-soft);
        color: var(--lmx-accent);
    }
    .widget-property-search-form .inner-search-advance { padding: 16px; }
    .widget-property-search-form .heading-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--lmx-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 6px;
        display: block;
    }
    .widget-property-search-form select.form-control,
    .widget-property-search-form .nice-select {
        height: 48px !important;
        border-radius: var(--lmx-radius) !important;
        border: 1px solid var(--lmx-border) !important;
        background: var(--lmx-surface);
        font-size: 16px;
        padding: 0 14px !important;
    }

    /* ════════════════════════════════════════════════════════
       Mobile hero — replaces broken RevSlider
       RevSlider's _tpt.prepareModuleHeight() leaves height: 0 on
       iOS in many cases, so on mobile we hide it entirely and
       render a CSS scroll-snap carousel from functions.php.
       ════════════════════════════════════════════════════════ */
    .widget-revslider,
    .elementor-widget-apus_element_revslider {
        display: none !important;
    }

    /* The hero is injected inside whatever Elementor column hosted the
       broken RevSlider — that column can be narrow (e.g. 80px), which
       would collapse our cards. We break out of the parent's width by
       pinning the section to the viewport (100vw, recentered with a
       translateX trick) and sizing cards in vw units, not %. */
    .lmx-mobile-hero {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        margin-top: 0 !important;
        margin-bottom: 28px !important;
        padding: 0 !important;
        background: transparent;
        box-sizing: border-box;
    }
    .lmx-mobile-hero__track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        padding: 4px 16px 16px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100vw;
        max-width: 100vw;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box;
    }
    .lmx-mobile-hero__track::-webkit-scrollbar { display: none; }
    .lmx-mobile-hero__card {
        flex: 0 0 85vw !important;     /* viewport-based, immune to parent width */
        width: 85vw !important;
        height: auto;
        scroll-snap-align: start;
        position: relative;
        aspect-ratio: 4 / 5;
        min-height: 380px;             /* fallback if aspect-ratio is unsupported */
        border-radius: var(--lmx-radius-lg) !important;
        overflow: hidden !important;
        background: var(--lmx-surface-soft);
        box-shadow: var(--lmx-shadow-md);
        text-decoration: none !important;
        color: var(--lmx-text-inverse);
        display: block !important;
        isolation: isolate;
        box-sizing: border-box;
    }
    .lmx-mobile-hero__card img {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        border-radius: 0 !important;     /* parent theme rounds some imgs to circles — block it */
        margin: 0 !important;
        padding: 0 !important;
        transition: transform var(--lmx-slow) var(--lmx-ease-out);
        z-index: 0;
        display: block;
    }
    .lmx-mobile-hero__card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.72) 100%);
        z-index: 1;
    }
    .lmx-mobile-hero__card:active img { transform: scale(1.04); }
    .lmx-mobile-hero__body {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 2;
        color: #fff;
    }
    .lmx-mobile-hero__price {
        display: inline-block;
        padding: 4px 10px;
        background: var(--lmx-accent);
        border-radius: var(--lmx-radius-pill);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.01em;
        margin-bottom: 8px;
        box-shadow: 0 4px 14px var(--lmx-accent-glow);
    }
    .lmx-mobile-hero__title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 4px 0;
        color: #fff;
        text-shadow: 0 1px 8px rgba(0,0,0,0.35);
        letter-spacing: -0.01em;
    }
    .lmx-mobile-hero__meta {
        font-size: 13px;
        opacity: 0.92;
        font-weight: 500;
        margin: 0;
        color: #fff;
    }

    /* ════════════════════════════════════════════════════════
       Property cards — refined for mobile
       ════════════════════════════════════════════════════════ */
    .property-item {
        border-radius: var(--lmx-radius-lg);
        overflow: hidden;
        background: var(--lmx-surface);
        box-shadow: var(--lmx-shadow);
        border: 1px solid var(--lmx-border);
        transition: transform var(--lmx-base) var(--lmx-ease),
                    box-shadow var(--lmx-base) var(--lmx-ease),
                    border-color var(--lmx-base) var(--lmx-ease);
        margin-bottom: 16px;
    }
    .property-item:hover,
    .property-item:active {
        transform: translateY(-2px);
        box-shadow: var(--lmx-shadow-md);
        border-color: var(--lmx-border-strong);
    }

    .property-item .property-thumbnail-wrapper {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--lmx-surface-soft);
    }
    .property-item .property-thumbnail-wrapper img,
    .property-item img.attachment-property-thumb,
    .property-item img.wp-post-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover;
        display: block;
        transition: transform var(--lmx-slow) var(--lmx-ease-out);
    }
    .property-item:hover .property-thumbnail-wrapper img {
        transform: scale(1.04);
    }

    /* Floating featured tag */
    .property-item .label-featured,
    .property-item .featured,
    .property-item [class*="featured-label"],
    .property-item .property-label.featured {
        background: var(--lmx-accent);
        color: var(--lmx-text-inverse);
        padding: 5px 12px;
        border-radius: var(--lmx-radius-pill);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        box-shadow: 0 2px 8px var(--lmx-accent-glow);
        line-height: 1.3;
    }

    /* Status / Price labels at top corners */
    .property-item .property-thumbnail-wrapper .property-label,
    .property-item .property-thumbnail-wrapper [class*="status-label"] {
        background: rgba(255,255,255,0.92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: var(--lmx-text);
        padding: 5px 11px;
        border-radius: var(--lmx-radius-pill);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Card body */
    .property-item .property-item-content,
    .property-item .item-content,
    .property-item .property-info {
        padding: 16px;
    }
    .property-item .property-title,
    .property-item h3,
    .property-item h2 {
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: var(--lmx-text) !important;
        margin: 0 0 4px 0 !important;
    }
    .property-item .property-title a { color: var(--lmx-text); }
    .property-item .property-title a:hover { color: var(--lmx-accent); }

    .property-item .property-address,
    .property-item .address,
    .property-item .location {
        font-size: 13px;
        color: var(--lmx-text-muted);
        margin: 0 0 10px 0;
    }

    /* Price pill — parent paints the wrapper black with white text
       (`.property-grid.v7 .property-price`). Don't touch color here —
       overriding it to dark blends with the dark pill on mobile and
       hides the number ("black square" bug). Tune typography only. */
    .property-item .price-text,
    .property-item .price,
    .property-item .property-price {
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* Card meta row (beds / baths / area) */
    .property-item .property-meta,
    .property-item .property-features,
    .property-item ul.amenities {
        display: flex;
        gap: 14px;
        padding: 12px 16px;
        margin: 0;
        border-top: 1px solid var(--lmx-border);
        color: var(--lmx-text-muted);
        font-size: 13px;
        list-style: none;
    }

    /* Action icons (heart / compare) */
    .property-item .property-thumbnail-wrapper .action-item {
        gap: 6px;
    }
    .property-item .action-item [class*="btn"] {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.92);
        color: var(--lmx-text);
        border: 0;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: var(--lmx-shadow-sm);
        transition: background var(--lmx-fast) var(--lmx-ease),
                    color      var(--lmx-fast) var(--lmx-ease),
                    transform  var(--lmx-fast) var(--lmx-ease);
    }
    .property-item .action-item [class*="btn"]:active {
        transform: scale(0.92);
    }
    .property-item .action-item [class*="btn"][class*="added"],
    .property-item .action-item [class*="btn"][class*="remove"] {
        background: var(--lmx-accent);
        color: var(--lmx-text-inverse);
    }

    /* ════════════════════════════════════════════════════════
       Buttons — tap targets, animations, brand hover
       ════════════════════════════════════════════════════════ */
    .btn,
    button.btn,
    a.btn {
        min-height: 44px;
        border-radius: var(--lmx-radius);
        font-weight: 600;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: background var(--lmx-fast) var(--lmx-ease),
                    color      var(--lmx-fast) var(--lmx-ease),
                    transform  var(--lmx-fast) var(--lmx-ease),
                    box-shadow var(--lmx-fast) var(--lmx-ease);
    }
    .btn:active { transform: scale(0.97); }

    .btn.btn-theme {
        background: var(--lmx-text);
        color: var(--lmx-text-inverse);
        border: 0;
    }
    .btn.btn-theme:hover,
    .btn.btn-theme:focus {
        background: var(--lmx-accent);
        color: var(--lmx-text-inverse);
        box-shadow: 0 6px 20px var(--lmx-accent-glow);
    }
    .btn.btn-theme.btn-inverse {
        background: var(--lmx-accent);
    }
    .btn.btn-theme.btn-inverse:hover {
        background: var(--lmx-accent-hover);
    }

    /* ════════════════════════════════════════════════════════
       Elementor counter widget (250 / 10K+ / 900+)
       Parent renders:
         .elementor-counter
           .elementor-counter-title
           .elementor-counter-number-wrapper
             span.elementor-counter-number-prefix
             span.elementor-counter-number              ← the digits
             span.elementor-counter-number-suffix       ← e.g. "K+", "+"
       On narrow viewports the spans wrap onto separate lines
       ("10" / "K+" / "Property Ready"). Lock them inline and
       trim font-size so all three columns fit side-by-side.
       ════════════════════════════════════════════════════════ */
    .elementor-counter {
        text-align: center;
    }
    .elementor-counter .elementor-counter-number-wrapper {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline;
        justify-content: center;
        gap: 0;
        white-space: nowrap;
        line-height: 1;
    }
    .elementor-counter .elementor-counter-number-prefix,
    .elementor-counter .elementor-counter-number,
    .elementor-counter .elementor-counter-number-suffix {
        display: inline !important;
        font-size: 32px !important;
        font-weight: 800 !important;
        color: var(--lmx-text);
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .elementor-counter .elementor-counter-title {
        font-size: 13px !important;
        font-weight: 500;
        color: var(--lmx-text-muted);
        margin-top: 6px;
    }

    /* Smaller phones: tighten further (≤ 380px ≈ iPhone 12 mini) */
    @media (max-width: 380px) {
        .elementor-counter .elementor-counter-number-prefix,
        .elementor-counter .elementor-counter-number,
        .elementor-counter .elementor-counter-number-suffix {
            font-size: 26px !important;
        }
        .elementor-counter .elementor-counter-title {
            font-size: 12px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
       Sections — breathing room, headings
       ════════════════════════════════════════════════════════ */
    section,
    .elementor-section.elementor-top-section {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .elementor-section.elementor-section-height-default { min-height: auto; }

    h1, .h1 { font-size: 32px !important; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
    h2, .h2 { font-size: 26px !important; line-height: 1.2;  font-weight: 700; letter-spacing: -0.015em; }
    h3, .h3 { font-size: 20px !important; line-height: 1.25; font-weight: 700; }

    /* Hero text safety */
    .elementor-heading-title { word-break: break-word; }

    /* ════════════════════════════════════════════════════════
       Sliders — full bleed, proper aspect on phone
       ════════════════════════════════════════════════════════ */
    .rev_slider_wrapper,
    .slider-revolution {
        max-height: 70vh !important;
    }

    /* ════════════════════════════════════════════════════════
       Images — never overflow, lazy fade-in
       ════════════════════════════════════════════════════════ */
    img {
        max-width: 100%;
        height: auto;
    }
    img[loading="lazy"] {
        opacity: 0;
        animation: lmxFadeIn var(--lmx-base) var(--lmx-ease) forwards;
    }
    img[loading="lazy"][src]:not([src=""]) {
        opacity: 1;
    }

    /* ════════════════════════════════════════════════════════
       Forms — generic improvements
       ════════════════════════════════════════════════════════ */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    textarea {
        font-size: 16px;
        border-radius: var(--lmx-radius);
        border: 1px solid var(--lmx-border);
        padding: 12px 14px;
    }
    .form-control:focus {
        outline: 0;
        border-color: var(--lmx-accent);
        box-shadow: 0 0 0 4px var(--lmx-accent-glow);
    }
    label {
        font-weight: 600;
        font-size: 13px;
        color: var(--lmx-text-muted);
        margin-bottom: 6px;
    }

    /* ════════════════════════════════════════════════════════
       Footer — calmer on mobile
       ════════════════════════════════════════════════════════ */
    footer .widget-title,
    .apus-footer .widget-title {
        font-size: 15px !important;
        margin-bottom: 14px;
    }
    .apus-footer .menu li a {
        padding: 8px 0;
        font-size: 14px;
    }

} /* /@media ≤ 1199.98px */

/* ════════════════════════════════════════════════════════════════════
   Keyframes
   ════════════════════════════════════════════════════════════════════ */
@keyframes lmxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lmxFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Property visibility toggle (My Properties dashboard)
   iOS-style switch: track + thumb, brand-purple when ON.
   ════════════════════════════════════════════════════════════════════ */
.lmx-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
.lmx-toggle__input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none;
}
.lmx-toggle__track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    background: var(--lmx-border-strong, rgba(24,26,32,0.18));
    border-radius: 999px;
    transition: background var(--lmx-fast, 150ms) var(--lmx-ease, cubic-bezier(0.4,0,0.2,1));
    flex-shrink: 0;
}
.lmx-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(24,26,32,0.18);
    transition: transform var(--lmx-fast, 150ms) var(--lmx-ease, cubic-bezier(0.4,0,0.2,1));
}
.lmx-toggle__input:checked + .lmx-toggle__track {
    background: var(--lmx-accent, #6A3CF0);
}
.lmx-toggle__input:checked + .lmx-toggle__track .lmx-toggle__thumb {
    transform: translateX(18px);
}
.lmx-toggle__input:focus-visible + .lmx-toggle__track {
    box-shadow: 0 0 0 3px var(--lmx-accent-glow, rgba(106,60,240,0.25));
}
.lmx-toggle:active .lmx-toggle__thumb {
    transform: translateX(0) scale(0.92);
}
.lmx-toggle__input:checked + .lmx-toggle__track + ,
.lmx-toggle__input:checked + .lmx-toggle__track .lmx-toggle__thumb {
    /* combined :checked + :active */
}
.lmx-toggle.is-busy {
    opacity: 0.6;
    pointer-events: none;
}
.lmx-toggle.is-error .lmx-toggle__track {
    background: #d72d40 !important;
    animation: lmxShake 0.4s var(--lmx-ease, cubic-bezier(0.4,0,0.2,1));
}
@keyframes lmxShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* Label next to the switch on the mobile variant */
.lmx-toggle__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--lmx-text-muted, rgba(24,26,32,0.62));
}
.lmx-toggle__input:checked ~ .lmx-toggle__label {
    color: var(--lmx-accent, #6A3CF0);
}

/* "Not applicable" placeholder for non-toggleable statuses */
.lmx-toggle-na {
    color: var(--lmx-text-subtle, rgba(24,26,32,0.42));
    font-size: 18px;
    line-height: 1;
    cursor: help;
}

/* Header label for the Visibility column — matches sibling headers */
.lmx-visibility-col-head,
.lmx-visibility-wrapper {
    min-width: 96px;
    text-align: center;
}

/* Mobile variant: stretched + larger label, sits above the action row */
.lmx-toggle--mobile {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--lmx-border, rgba(24,26,32,0.08));
    margin-bottom: 10px;
}
.lmx-toggle--mobile .lmx-toggle__label { margin-left: 4px; }

/* ════════════════════════════════════════════════════════════════════
   Hero Slides admin UI (frontend dashboard, admin-only)
   ════════════════════════════════════════════════════════════════════ */
.lmx-hero-admin {
    font-family: var(--lmx-font, -apple-system, 'SF Pro Display', 'Inter', sans-serif);
    color: var(--lmx-text, #181A20);
}
.lmx-hero-admin--denied {
    padding: 24px;
    background: rgba(215,45,64,0.06);
    border: 1px solid rgba(215,45,64,0.2);
    border-radius: 12px;
    color: #a01a2b;
}
.lmx-hero-admin__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.lmx-hero-admin__hint {
    font-size: 13px;
    color: var(--lmx-text-muted, rgba(24,26,32,0.62));
    margin: 0 0 18px 0;
}
.lmx-hero-admin__empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--lmx-text-muted, rgba(24,26,32,0.62));
    background: var(--lmx-surface-soft, #f7f7fb);
    border-radius: 12px;
}
.lmx-hero-admin__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Single slide row */
.lmx-slide-row {
    display: grid;
    grid-template-columns: 24px 96px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: var(--lmx-surface, #fff);
    border: 1px solid var(--lmx-border, rgba(24,26,32,0.08));
    border-radius: 12px;
    transition: border-color 150ms, box-shadow 150ms;
}
.lmx-slide-row:hover {
    border-color: var(--lmx-border-strong, rgba(24,26,32,0.14));
    box-shadow: 0 2px 10px rgba(24,26,32,0.05);
}
.lmx-slide-row__handle {
    color: var(--lmx-text-subtle, rgba(24,26,32,0.42));
    cursor: grab;
    font-size: 18px;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}
.lmx-slide-row__thumb {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--lmx-surface-soft, #f7f7fb);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lmx-slide-row__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.lmx-slide-row__noimg {
    color: var(--lmx-text-subtle, rgba(24,26,32,0.42));
    font-size: 22px;
}
.lmx-slide-row__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--lmx-text, #181A20);
    margin-bottom: 4px;
}
.lmx-slide-row__meta {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--lmx-text-muted, rgba(24,26,32,0.62));
    margin-bottom: 4px;
}
.lmx-slide-row__price {
    font-weight: 700;
    color: var(--lmx-accent, #6A3CF0);
}
.lmx-slide-row__url {
    font-size: 12px;
    color: var(--lmx-text-subtle, rgba(24,26,32,0.42));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}
.lmx-slide-row__url:hover { color: var(--lmx-accent, #6A3CF0); }
.lmx-slide-row__actions {
    display: flex;
    gap: 6px;
}

/* Buttons used in this UI */
.lmx-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: var(--lmx-surface-soft, #f7f7fb);
    color: var(--lmx-text, #181A20);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, color 150ms, transform 150ms;
}
.lmx-btn:active { transform: scale(0.97); }
.lmx-btn--primary { background: var(--lmx-text, #181A20); color: #fff; }
.lmx-btn--primary:hover { background: var(--lmx-accent, #6A3CF0); }
.lmx-btn--danger { background: rgba(215,45,64,0.08); color: #b22033; }
.lmx-btn--danger:hover { background: rgba(215,45,64,0.18); }
.lmx-btn--ghost { background: transparent; color: var(--lmx-text-muted, rgba(24,26,32,0.62)); }
.lmx-btn--ghost:hover { background: var(--lmx-surface-soft, #f7f7fb); color: var(--lmx-text, #181A20); }

/* Modal */
.lmx-modal[hidden] { display: none !important; }
.lmx-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lmx-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24,26,32,0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.lmx-modal__panel {
    position: relative;
    background: var(--lmx-surface, #fff);
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(24,26,32,0.25);
}
.lmx-modal__x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--lmx-text-muted, rgba(24,26,32,0.62));
    border-radius: 8px;
}
.lmx-modal__x:hover {
    background: var(--lmx-surface-soft, #f7f7fb);
    color: var(--lmx-text, #181A20);
}
.lmx-modal__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px 0;
}
.lmx-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--lmx-border, rgba(24,26,32,0.08));
}

/* Form fields inside modal */
.lmx-field {
    margin-bottom: 14px;
}
.lmx-field > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lmx-text-muted, rgba(24,26,32,0.62));
    margin-bottom: 6px;
}
.lmx-field input[type="text"],
.lmx-field input[type="url"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--lmx-border, rgba(24,26,32,0.08));
    background: #fff;
    font-size: 15px;
    outline: 0;
    box-sizing: border-box;
}
.lmx-field input:focus {
    border-color: var(--lmx-accent, #6A3CF0);
    box-shadow: 0 0 0 4px var(--lmx-accent-glow, rgba(106,60,240,0.25));
}
.lmx-field-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}
.lmx-field--inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}
.lmx-field--inline > span { font-size: 14px; }
.lmx-req { color: #d72d40; }

/* Image picker */
.lmx-image-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lmx-image-picker__preview {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--lmx-border, rgba(24,26,32,0.08));
}

.lmx-form-msg {
    background: rgba(215,45,64,0.08);
    color: #b22033;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .lmx-slide-row {
        grid-template-columns: 24px 72px 1fr;
        grid-template-rows: auto auto auto;
        gap: 10px;
    }
    .lmx-slide-row__thumb { width: 72px; height: 56px; }
    .lmx-slide-row__visibility {
        grid-column: 2 / 4;
        grid-row: 2;
    }
    .lmx-slide-row__actions {
        grid-column: 2 / 4;
        grid-row: 3;
    }
    .lmx-field-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Footer branding: "© POWERED BY LEMEXI <year>" with chameleon-style
   animated gradient text (blue <-> purple). Replaces the legacy
   "© LEMEXI - All rights reserved" line.
   ========================================================================= */
.lemexi-powered-by {
    display: inline-block;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}
.lemexi-chameleon-text,
.text-copyright .lemexi-chameleon-text,
.apus-footer .lemexi-chameleon-text,
.elementor-widget-container .lemexi-chameleon-text {
    display: inline-block !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    font-size: 13px !important;
    /* Base = brand ink black (#181A20). A narrow blue->purple band centered
       at 50% of the tile slides slowly across, so the text mostly reads as
       solid black with a chameleon shimmer drifting through. */
    background-image: linear-gradient(
        110deg,
        #181A20 0%,
        #181A20 38%,
        #1A56DB 44%,
        #7E3AF2 49%,
        #9B6DFF 52%,
        #7E3AF2 55%,
        #1A56DB 60%,
        #181A20 66%,
        #181A20 100%
    ) !important;
    background-size: 200% 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    /* Base position (no !important): an !important here would BEAT the chameleon
       animation in the cascade and freeze it — the dashboard footer animates this. */
    background-position: 50% 0;
}
/* The dark footer (inner pages e.g. /team/ — body WITHOUT .home) needs a WHITE
   base; the #181A20 base above is invisible on black. The HOMEPAGE footer
   (body.home) is WHITE, so it MUST keep the dark base — hence body:not(.home).
   Without this scope the white base also hit the home footer and the line went
   invisible on white. Keep the blue->purple shimmer in both cases. */
/* 2026-06-12: footers are the WHITE footer-7 site-wide (dark-base shimmer above),
   EXCEPT the Dashboard which keeps its classic dark footer-1 — there the Powered By
   line needs the WHITE base to read on the dark background. Scope to footer-1 only. */
/* Dashboard / Manager footer (dark footer-1): render the credit line as a SOLID
   light-lavender color — NO background-clip/transparent fill. On Safari the
   clip-text + transparent-fill technique can flash the glyphs invisible on the
   dark background; a solid color is always visible and on-brand. */
/* Dashboard / Manager footer (dark footer-1): animated chameleon shimmer — the SAME
   working technique as the homepage footer's .lmx-ft__cham (clip-text + will-change,
   which is what keeps Safari from flashing the glyphs invisible). Lavender base so it
   reads on the dark footer, with a bright violet/white band drifting through. */
/* Dashboard footer "POWERED BY LEMEXI" — EXACT copy of the homepage footer's working
   chameleon (.lmx-ft__cham): grey base (#8a909d, reads on the white dashboard footer)
   with a violet band drifting through. Fully self-contained (overrides the static rule
   above) and — crucially — sets NO static background-position: a competing
   `background-position:!important` is what froze the animation on Safari. The keyframes
   own the position; translateZ(0) promotes a layer so Safari repaints the clipped text. */
.footer-dashboard .lemexi-chameleon-text,
.apus-footer[class*="footer-dashboard"] .lemexi-chameleon-text {
    /* NOTE: do NOT use the `background:` shorthand here — it resets background-position
       to 0 0 with !important, which beats the animation and freezes it. Longhands only. */
    background-color: transparent !important;
    background-image: linear-gradient(110deg,#8a909d 0%,#8a909d 36%,#9B6DFF 44%,#7E3AF2 49%,#B89CFF 52%,#7E3AF2 55%,#9B6DFF 60%,#8a909d 64%,#8a909d 100%) !important;
    background-size: 200% 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: lmxChamDash 5s linear infinite !important;
    will-change: background-position;
    transform: translateZ(0);
}
@keyframes lmxChamDash { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .footer-dashboard .lemexi-chameleon-text { animation: none !important; background-position: 50% 0 !important; }
}

/* Force font-display: swap on every @font-face the theme/plugins declared
   without it. font-display:swap = browser uses a system fallback IMMEDIATELY,
   then swaps when the webfont arrives. Prevents FOIT (invisible text) and
   shaves ~780 ms off FCP per Lighthouse.

   These re-declarations MUST use real font URLs (not `src: local(...)`),
   otherwise we accidentally null out the family when our decl wins the
   cascade. URLs are absolute because relative paths resolve from this
   child theme's CSS file, not the parent theme. */
@font-face {
    font-family: 'flaticon_realton';
    font-display: swap;
    src: url('/wp-content/themes/homez/fonts/flaticon_realton.woff2') format('woff2'),
         url('/wp-content/themes/homez/fonts/flaticon_realton.woff')  format('woff'),
         url('/wp-content/themes/homez/fonts/flaticon_realton.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'themify';
    font-display: swap;
    src: url('/wp-content/themes/homez/fonts/themify.woff') format('woff'),
         url('/wp-content/themes/homez/fonts/themify.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Inter @font-face removed 2026-05-28: we strip WC's Inter font (320 KB)
   entirely via lemexi_strip_wc_storefront_fonts() in functions.php. The
   font stack on body falls through to -apple-system / system-ui — no
   webfont needed. See [[lemexi-hostinger-migration]]. */

/* Avatar fit: show the WHOLE face in the circle instead of cropping to
   center. `object-fit: contain` shrinks the image inside the round mask
   so even portrait shots where the head sits high (typical) are visible
   in full. A soft tinted background fills any letterbox space. */
img.avatar,
img.wp-user-avatar,
.author-avatar img,
.contact-avatar img,
.lmx-avatar img {
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--lmx-surface-soft, #f5f5f7) !important;
}

/* Hero headline "Own where others vacation" — single line on desktop,
   allowed to wrap and center-align on tablet/mobile so it doesn't
   overflow the narrower column and the search form stays readable. */
.elementor-element-11d1c00 .elementor-heading-title {
    white-space: nowrap;
    font-size: clamp(28px, 4.4vw, 64px);
    line-height: 1.1;
}
@media (max-width: 991px) {
    .elementor-element-11d1c00,
    .elementor-element-11d1c00 .elementor-widget-container,
    .elementor-element-11d1c00 .elementor-heading-title {
        text-align: center !important;
    }
    .elementor-element-11d1c00 .elementor-heading-title {
        white-space: normal !important;
        font-size: clamp(28px, 5.6vw, 44px) !important;
        padding: 0 12px;
    }
}

/* ── Hero section: tablet/mobile layout fix ──────────────────────────
   The two-column Elementor hero (heading+search | carousel) keeps its
   desktop widths on tablets, which makes the carousel hang half off
   screen and the inner Bootstrap grid (col-md-8/col-md-4) overflow the
   form's container. Force the columns to stack and the form's inner
   grid to a single full-width column below 992px. */
@media (max-width: 991px) {
    /* Stack any Elementor columns inside top-level hero sections */
    .elementor-section.elementor-top-section
        > .elementor-container
        > .elementor-column,
    .elementor-top-section > .elementor-container > .elementor-row > .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Search widget: Bootstrap row children inside .list-fileds.
       Actual DOM on this page:
         .col-12.col-md-12.col-xl-12  → search input (form-group-title)         → 100%
         .col-12.col-md-6.col-xl-6    → Locations / Status / Types / Rooms     → 50% (2×2)
         .col-12.col-md-12.col-xl-12.form-group-search → Advanced + Submit row → 100%
       NOTE: ancestor is .widget-property-search-form (NOT the Elementor
       widget class). Earlier the rule below was a blanket [class*="col-"]
       forcing 100% — which stacked the four select fields into 1×4 on phone.
       Now we explicitly grant col-md-6 children 50% width. */
    /* Homez's bundled bootstrap.css sets `.col-12 { width: 100% }` (not
       Bootstrap-standard `max-width`). Without `width: 50% !important`
       below, the col-md-6 children stayed 100% wide → 1×4 stack. */
    .widget-property-search-form .row.list-fileds > .col-12.col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .widget-property-search-form .row.list-fileds > .col-12.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .widget-property-search-form .row.list-fileds {
        row-gap: 10px;
    }
    /* Advanced + Submit row should keep horizontal layout but each
       child takes half-and-half so nothing overflows the card. */
    .widget-property-search-form .form-group-search .d-md-flex {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
    }
    .widget-property-search-form .form-group-search .advance-link,
    .widget-property-search-form .form-group-search a.advance-search-btn {
        flex: 1 1 140px;
        min-width: 0;
        width: 100%;
        justify-content: center;
    }
    .widget-property-search-form .form-group-search button.btn-submit {
        flex: 1 1 140px;
        min-width: 0;
        width: 100%;
    }

    /* Carousel column: breathing room above when stacked below the form */
    .lmx-hero-carousel,
    .elementor-widget-image-carousel,
    .elementor-widget-slides {
        margin-top: 24px;
    }
}

/* Smaller phone: tighten section paddings so the hero doesn't
   horizontal-scroll on iOS Safari. */
@media (max-width: 600px) {
    .elementor-section.elementor-top-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .elementor-element-11d1c00 .elementor-heading-title {
        padding: 0 !important;
        /* Single line on phones: "Own where others vacation" is 24 chars,
           so we scale font with viewport width to keep it on one line
           even at 360px wide. min(7.3vw, ...) is the actual fit budget. */
        font-size: clamp(20px, 7.3vw, 32px) !important;
        white-space: nowrap !important;
        text-wrap: balance;
        letter-spacing: -0.01em;
    }
    /* Carousel right under the search form — no decorative gap.
       The hero Elementor section ships with a tall min-height/padding
       to look balanced on desktop; on phone that just creates dead
       space between the search card and the property carousel. */
    .elementor-section.elementor-top-section {
        min-height: 0 !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .lmx-hero-carousel,
    .elementor-widget-image-carousel,
    .elementor-widget-slides {
        margin-top: 12px !important;
    }
    /* Kill the inter-column gap Elementor adds when stacking */
    .elementor-section.elementor-top-section .elementor-row,
    .elementor-section.elementor-top-section .elementor-container {
        row-gap: 12px !important;
    }
}

/* =========================================================================
   Footer cleanup overrides:
   1) Hide the "Follow Us" heading in the footer (data-id 4bbcf72).
   2) Hide the entire "Apps" column (Keep Yourself Up to Date + Apps heading +
      Apple Store button + Google Play button).
   3) Tighten vertical padding between the CTA section and the LEMEXI block.
   ========================================================================= */

/* 1) Remove "Follow Us" heading text in footer (we already have icons + branding) */
.apus-footer .elementor-element-4bbcf72 {
    display: none !important;
}

/* 2) Remove the Apps column widgets:
      - "Keep Yourself Up to Date" heading  (data-id add1bca)
      - "Apps" heading                       (data-id 9de913e)
      - Apple Store button                   (data-id 705ea37)
      - Google Play button                   (data-id 1e41bcf)
*/
.apus-footer .elementor-element-add1bca,
.apus-footer .elementor-element-9de913e,
.apus-footer .elementor-element-705ea37,
.apus-footer .elementor-element-1e41bcf {
    display: none !important;
}

/* =========================================================================
   Homepage section hiders.
   Hide the "Featured Homes" carousel (US property-types: Apartments/Offices…)
   — irrelevant to Lemexi's Albania-focused market. Section ID 3523486.
   Hide the legacy "Real Estate Inquiry Form" section (b274282) — replaced
   by .lmx-cta-add-property which is injected just before it in PHP.
   ========================================================================= */
.elementor-element.elementor-element-3523486,
.elementor-element.elementor-element-b274282 {
    display: none !important;
}

/* =========================================================================
   "Submit your property" CTA section — replaces the old Inquiry Form.
   Plain white background, matches the rest of the site's tone.
   ========================================================================= */
.lmx-cta-add-property {
    background: #ffffff;
    color: #181A20;
    padding: 80px 24px;
    text-align: left;
}
.lmx-cta-add-property .lmx-cta-container {
    max-width: 760px;
    margin: 0 auto;
}
.lmx-cta-add-property .lmx-cta-headline {
    font-size: clamp(28px, 4.5vw, 42px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 14px;
    color: #181A20;
    letter-spacing: -0.01em;
}
.lmx-cta-add-property .lmx-cta-sub {
    font-size: 16px;
    line-height: 1.55;
    color: #6b7280;
    margin: 0 0 30px;
    max-width: 620px;
}
/* Reuse Apus theme button (.btn.btn-theme.btn-inverse.btn-submit) so it
   matches the hamburger-menu "Submit Property" button exactly — same icon
   font (flaticon-up-right-arrow), same pill shape, same hover behaviour.
   We only constrain its width so it doesn't span the full container on
   desktop. */
.lmx-cta-add-property .lmx-cta-submit {
    max-width: 320px;
    width: 100%;
}

@media (max-width: 600px) {
    .lmx-cta-add-property { padding: 60px 18px; }
    .lmx-cta-add-property .lmx-cta-submit { max-width: 100%; }
}

/* 2) Apple Store / Google Play buttons — stop overlap, wrap nicely */
.btn-app,
.apus-footer .btn-app {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    margin: 0 10px 12px 0 !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    background: #181A20 !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
}
.btn-app .app-icon,
.apus-footer .btn-app .app-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.btn-app .inner,
.apus-footer .btn-app .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
}
.btn-app .sub,
.apus-footer .btn-app .sub {
    font-size: 10px !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
}
.btn-app .name-app,
.apus-footer .btn-app .name-app {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Force the column wrap so widgets stack instead of overlapping */
.apus-footer .elementor-widget-wrap {
    flex-wrap: wrap !important;
    row-gap: 8px;
}

/* On narrow screens make app buttons take a clean half-row each */
@media (max-width: 480px) {
    .btn-app,
    .apus-footer .btn-app {
        width: auto !important;
        max-width: 100%;
    }
}

/* 3) Trim padding between CTA section ("Become A Real Estate Agent") and
      the footer LEMEXI block on mobile. */
@media (max-width: 768px) {
    .elementor-element-ba2b31b {
        padding-bottom: 30px !important;
    }
    .elementor-element-d0c48c2,
    .apus-footer > .elementor-section:first-of-type {
        padding-top: 24px !important;
    }
}

/* =========================================================================
   Footer social icons — clean override of broken Elementor block.
   High specificity + !important to defeat Apus parent-theme rules.
   ========================================================================= */
ul.lemexi-social-icons,
.widget-socials ul.lemexi-social-icons {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}
ul.lemexi-social-icons li,
.widget-socials ul.lemexi-social-icons li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
}
ul.lemexi-social-icons li a,
.widget-socials ul.lemexi-social-icons li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background: #f4f4f6 !important;
    color: var(--lmx-text, #181A20) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: 0 !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
ul.lemexi-social-icons li a:hover,
ul.lemexi-social-icons li a:focus,
.widget-socials ul.lemexi-social-icons li a:hover,
.widget-socials ul.lemexi-social-icons li a:focus {
    background: var(--lmx-accent, #6A3CF0) !important;
    color: #fff !important;
    transform: translateY(-2px);
}
ul.lemexi-social-icons li a svg,
.widget-socials ul.lemexi-social-icons li a svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    fill: currentColor !important;
}

/* =========================================================================
   Hero carousel (replaces legacy RevSlider on the homepage).
   Layout: full-width hero with cover image; the title/price panel sits
   bottom-left over a soft gradient scrim. Auto-advancing crossfade.
   ========================================================================= */
html.lmx-has-hero-carousel .elementor-widget-apus_element_revslider,
html.lmx-has-hero-carousel .widget-revslider {
    display: none !important;
}
.lmx-hero-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 420px;
    max-height: 720px;
    overflow: hidden;
    /* Placeholder = soft sky->ground gradient, NOT solid #181A20. The hero
       image only paints at LCP; a black fill flashed as a "black spot" during
       load on mobile. This neutral gradient reads as the image loading and is
       covered when the slide image arrives. (Mirrored in functions.php
       #lmx-critical + assets/critical-home.css so it wins at every load stage.) */
    background: linear-gradient(180deg, #dbe6ef 0%, #c5d0da 40%, #aab4be 70%, #8f99a3 100%);
    isolation: isolate;
}
@media (max-width: 767.98px) {
    /* Phone: show the photo BIG on top, then attach the solid black text plate
       BELOW it (a clean photo + footer card) instead of the plate covering most
       of the photo. The slide keeps its absolute crossfade; INSIDE each slide a
       flex column splits it: the image grows to fill the upper area, the plate
       sits under it. Container is made taller (3/4) to give the photo room. */
    .lmx-hero-carousel {
        aspect-ratio: 3 / 5;          /* taller, so the photo (flex:1) gets the big share */
        min-height: 0; max-height: none;
    }
    .lmx-hero-slide__link {            /* stays absolute inset:0 (fills the slide) */
        display: flex !important; flex-direction: column !important;
    }
    .lmx-hero-slide__img {
        position: relative !important; inset: auto !important;
        flex: 1 1 auto !important; min-height: 0;
        width: 100% !important; height: auto !important;
        object-fit: cover;
        transform: none !important;    /* no Ken-Burns zoom on phone */
    }
    .lmx-hero-slide__panel {
        position: relative !important; left: auto !important; right: auto !important; bottom: auto !important;
        flex: 0 0 auto !important;
        padding: 16px 18px 20px;
    }
}
/* Kill the leftover demo "black spot": the hero section (b4fc1fa) ships an
   Elementor motion-effects (parallax) layer holding the dark photo
   bg-slider7.jpg. It briefly covers the section in dark before Elementor's JS
   slides it off-screen — a black flash that "animates away". The homepage now
   uses our own white hero + carousel, so this photo is never wanted. Remove it
   at every cascade stage (also in #lmx-critical + critical-home.css). */
.elementor-element-b4fc1fa,
.elementor-element-b4fc1fa > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
}
.lmx-hero-track { position: absolute; inset: 0; }
.lmx-hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.lmx-hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.lmx-hero-slide__link {
    display: block; position: absolute; inset: 0;
    text-decoration: none; color: #fff;
}
.lmx-hero-slide__img {
    position: absolute; inset: 0;
    width: 100% !important;
    /* !important beats the theme's `.elementor img{height:auto}` (higher
       specificity) which left the photo ~37px short of the container -> the
       grey placeholder showed as a line below it. Fill the carousel fully. */
    height: 100% !important;
    object-fit: cover;
    transform: scale(1);
    transition: transform 8s ease-out;
}
.lmx-hero-slide.is-active .lmx-hero-slide__img { transform: scale(1.04); }
.lmx-hero-slide__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 40px) clamp(20px, 5vw, 40px);
    /* Tablet / desktop / landscape (>=768px): no solid plate, but a soft bottom-up
       scrim so price/title/desc stay legible over BRIGHT photo areas (e.g. a sunlit
       building). The photo still shows fully at the top; only the lower band darkens.
       Text shadow stays as a backstop for the title edges. */
    background: linear-gradient(to top, rgba(24,26,32,0.85) 0%, rgba(24,26,32,0.55) 38%, rgba(24,26,32,0.18) 72%, rgba(24,26,32,0) 100%);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 26px rgba(0,0,0,0.55);
    color: #fff;
    display: flex; flex-direction: column; gap: 6px;
}
/* Mobile portrait (<768px): a deep near-black footer plate, NO grey — a whisper
   (~6%) of brand purple, not a grey scrim. No text shadow needed on the plate. */
@media (max-width: 767.98px) {
    .lmx-hero-slide__panel {
        background: linear-gradient(to top, #1b1630 0%, #181A20 72%);
        text-shadow: none;
    }
}
.lmx-hero-slide__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lmx-hero-slide__price {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.lmx-hero-slide__price * {
    color: inherit !important;
    font: inherit !important;
}
.lmx-hero-slide__title {
    margin: 0;
    font-size: clamp(22px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
    /* Keep the property name on ONE line — truncate long (incl. translated) titles. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Phones: the panel is narrow, so wrap to a readable 2 lines instead of shrinking tiny. */
@media (max-width: 767.98px) {
    .lmx-hero-slide__title {
        white-space: normal;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: clamp(17px, 5vw, 22px);
        line-height: 1.2;
    }
}
.lmx-hero-slide__specs {
    font-size: clamp(13px, 1.3vw, 15px);
    opacity: 0.85;
    margin-top: 2px;
}
.lmx-hero-slide__specs strong { font-weight: 600; }
.lmx-hero-slide__desc {
    max-width: 520px;
    margin: 6px 0 2px;
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.5;
    opacity: 0.94;
}
/* LMX design system: accent button, 12px control radius (matches the search
   filter, Featured cards, +Property — one button style everywhere). */
.lmx-hero-slide__cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 13px 24px;
    align-self: flex-start;
    background: #6A3CF0; color: #fff;
    border-radius: 12px;
    font-weight: 700; font-size: 14px;
    transition: transform 200ms, background 200ms;
}
.lmx-hero-slide__cta svg { stroke: currentColor; }
.lmx-hero-slide__link:hover .lmx-hero-slide__cta {
    background: #5530D0; color: #fff;
    transform: translateY(-2px);
}
/* ─────────────────────────────────────────────────────────────────────
   Hero carousel dots — Apple/iOS-style pagination indicators.

   Design contract:
   • Visual: clean 8 px dot (6 px on phone). Active dot stretches to a
     pill shape, not a giant circle.
   • Hit area: a full 24×24 px target around the visual (WCAG 2.2 §2.5.8)
     achieved via box-sizing:content-box + transparent padding +
     background-clip:content-box (only the inner content shows the dot
     colour, the padding is invisible).
   • Container is auto-sized to fit dots — no big dark blob, no overflow
     on mobile with 4-6 dots. max-width:100% with safety inset clamps
     prevent it from extending past the carousel edge.
   ───────────────────────────────────────────────────────────────────── */

/* Outer wrapper: a fixed-width "window" that visually clips overflowing
   dots when there are many slides. The track inside translates so the
   active dot stays roughly centered → user always sees a context of
   ~5 dots around the active one, regardless of total count. */
.lmx-hero-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    z-index: 2;
    /* Window: shows up to ~5 dots × (8+16) px + gap. Anything wider
       stays inside but scrolls via .lmx-hero-dots__track translateX */
    max-width: 130px;
    overflow: hidden;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

/* Inner track that holds all dots and shifts under the window. */
.lmx-hero-dots__track {
    display: flex;
    gap: 2px;
    transition: transform 240ms ease;
    will-change: transform;
}

.lmx-hero-dot {
    /* Hit area = 8 px visual + 2*8 px transparent padding = 24×24 */
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 8px;
    border: 0;
    background: rgba(255, 255, 255, 0.55);
    background-clip: content-box;       /* paint only inside the 8×8 box */
    border-radius: 50%;
    cursor: pointer;
    transition: width 220ms ease, background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
    flex-shrink: 0;                     /* never compress dots */
}

.lmx-hero-dot.is-active {
    /* Stretch to a 24×8 pill — clean iOS look, not a blown-up circle */
    width: 24px;
    background: #ffffff;
    background-clip: content-box;
    border-radius: 999px;
}

/* Edge dots (the ones near the visible window's boundary when many
   slides) shrink to tiny ones for the iOS-style fade effect. JS adds
   these classes; they're optional decoration, layout works without. */
.lmx-hero-dot.is-edge-1 {
    transform: scale(0.7);
    opacity: 0.7;
}
.lmx-hero-dot.is-edge-2 {
    transform: scale(0.45);
    opacity: 0.45;
}

.lmx-hero-dot:hover {
    background: rgba(255, 255, 255, 0.85);
    background-clip: content-box;
}

/* Mobile/tablet (<768 px): show MAX 4 dots, with active sliding through.
   Width math: 3 inactive (22px) + 1 active (~24px) + 3 gaps (1px) +
   container padding (16px) = ~109px. Round to 120px for safety with
   active-state width animation. JS code reads this width and limits
   perWindow accordingly — anything beyond 4 stays off-canvas. */
@media (max-width: 767.98px) {
    .lmx-hero-dots {
        /* Bottom-right of carousel, NOT over the View Details button */
        left: auto;
        right: clamp(12px, 3.5vw, 18px);
        bottom: clamp(20px, 5vw, 30px);
        transform: none;
        padding: 4px 6px;
        gap: 1px;
        /* HARD cap: 4 visible dots, rest scroll-clipped by overflow:hidden */
        max-width: 120px;
    }
    .lmx-hero-dot {
        width: 6px;
        height: 6px;
        padding: 8px;
    }
    .lmx-hero-dot.is-active {
        width: 18px;
    }
}

/* Tiny phones (<360 px): max 3 dots. Width math:
   2 inactive (22px) + 1 active (~22px) + 2 gaps + 12px padding = ~80px */
@media (max-width: 359.98px) {
    .lmx-hero-dots {
        right: 10px;
        padding: 3px 5px;
        gap: 0;
        max-width: 92px;
    }
    .lmx-hero-dot {
        width: 5px;
        height: 5px;
        padding: 7px;
    }
    .lmx-hero-dot.is-active {
        width: 14px;
    }
}

/* =========================================================================
   Hero-toggle in My Properties — orange so it reads as "featured / promote",
   not the same purple as visibility.
   ========================================================================= */
.lmx-hero-wrapper { min-width: 60px; }
.lmx-hero-toggle .lmx-toggle__input:checked + .lmx-toggle__track {
    background: #F08C2B !important;  /* lemexi accent-warm */
}
.lmx-hero-toggle .lmx-toggle__input:focus-visible + .lmx-toggle__track {
    box-shadow: 0 0 0 3px rgba(240, 140, 43, 0.30);
}
.lmx-hero-col-head { font-weight: 600; }
.lmx-toggle.lmx-toggle--ok .lmx-toggle__track {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}
.lmx-toggle.lmx-toggle--error .lmx-toggle__track {
    background: #d72d40 !important;
    animation: lmxShake 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Property card image gallery CSS REMOVED 2026-06-01 22:15.
   See matching note in functions.php (slim galleryPropery slick init
   was disabled per user request). No card-hover slideshow on the
   homepage; cards display only their static featured image. */

/* ════════════════════════════════════════════════════════
   /pricing/ (page 41) — redesign 2026-06-03
   ────────────────────────────────────────────────────────
   - Hide the "Pricing / Home / Pricing" breadcrumb header
   - Restyle the three package cards with modern shadows + hover lift
   - On mobile (<768px) convert the row into a horizontal scroll-snap
     carousel so cards don't stack vertically off-screen
   ════════════════════════════════════════════════════════ */

/* 1. Hide breadcrumb section on Pricing only */
.page-id-41 .breadcrumb-page,
.page-id-41 .apus-breadscrumb {
    display: none !important;
}

/* Tighten the gap left by hidden breadcrumb */
.page-id-41 .apus-main-content {
    padding-top: 32px;
}

/* 2. Hero heading + subtitle on pricing */
.page-id-41 .elementor-widget-heading .elementor-heading-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #181A20;
    letter-spacing: -0.01em;
    text-align: center;
}

/* 3. Package cards — modern look */
.page-id-41 .elementor-element-f77b694 .elementor-column.elementor-col-33 {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
    overflow: hidden;
}
.page-id-41 .elementor-element-f77b694 .elementor-column.elementor-col-33:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(24, 26, 32, 0.10);
}

/* 4. Mobile (<768px): cards become horizontal scroll-snap carousel.
   The Elementor section's children become flex items that overflow
   horizontally with snap points centered on each card. No JS. */
@media (max-width: 768px) {
    .page-id-41 .elementor-element-f77b694 > .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;            /* Firefox */
        gap: 14px;
        padding: 4px 16px 24px;           /* breathing room + scroll-shadow */
        margin: 0;
        scroll-padding-inline: 16px;
    }
    .page-id-41 .elementor-element-f77b694 > .elementor-container::-webkit-scrollbar {
        display: none;                    /* Safari/Chrome */
    }
    .page-id-41 .elementor-element-f77b694 .elementor-column.elementor-col-33 {
        flex: 0 0 86vw !important;
        max-width: 86vw !important;
        width: 86vw !important;
        scroll-snap-align: center;
        margin: 0 !important;
    }
    /* Light hint that more is to the right — fade scrim on container edges.
       Implemented via a pseudo-overlay on the parent section. */
    .page-id-41 .elementor-element-f77b694 {
        position: relative;
    }
    .page-id-41 .elementor-element-f77b694::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0));
        pointer-events: none;
        z-index: 2;
    }
    /* Slim card padding on mobile so price headlines don't wrap */
    .page-id-41 .elementor-element-f77b694 .elementor-column .elementor-widget-wrap {
        padding: 24px 20px !important;
    }
}

/* Optional: at tablet (768-991px), keep the row but tighten gutters */
@media (min-width: 769px) and (max-width: 991px) {
    .page-id-41 .elementor-element-f77b694 .elementor-column.elementor-col-33 {
        padding: 0 8px;
    }
}

/* =========================================================================
   Properties page (id 1370), mobile/tablet: the "Map View / Properties View"
   toggle (.mobile-groups-button, d-lg-none) sat at the very top, ABOVE the
   filter. Reorder the half-map section so it reads: filter -> toggle -> list.
   ========================================================================= */
@media (max-width: 991.98px) {
    .page-id-1370 .inner.layout-type-half-map-v3 {
        display: flex;
        flex-direction: column;
    }
    .page-id-1370 .inner.layout-type-half-map-v3 > .properties-filter-top-half-map3 { order: 1; }
    .page-id-1370 .inner.layout-type-half-map-v3 > .mobile-groups-button { order: 2; }
    .page-id-1370 .inner.layout-type-half-map-v3 > .row.layout-type-half-map-v3 { order: 3; }
    /* Map View sits right under Search as a full-width LMX button (part of the
       filter block), not a small centred pill in a grey strip. */
    .page-id-1370 .mobile-groups-button {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        background: transparent !important;
    }
    /* Landscape phone + tablet (768-991px): the theme's md grid crams the fields
       into a messy horizontal row. Stack them full-width like the phone layout. */
    .page-id-1370 .filter-listing-form .list-fileds > [class*="col-"],
    .page-id-1370 .filter-listing-form .row.list-fileds > [class*="col-"],
    .page-id-1370 .filter-listing-form .content-main-inner > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 10px;
    }
    .page-id-1370 .filter-listing-form .form-group-search .d-md-flex {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }
    /* The Advanced button column has `flex: 1 1 140px` from the theme's
       HORIZONTAL layout — in our forced column that 140px flex-basis became a
       140px HEIGHT, leaving ~88px of dead space and a big gap before Search.
       Reset every item in the column to content height so Search + Map View
       sit right under Advanced. */
    .page-id-1370 .filter-listing-form .form-group-search .d-md-flex > * {
        flex: 0 0 auto !important;
        margin-top: 0 !important;   /* Search had margin-top:15px -> uneven gap */
        margin-bottom: 0 !important;
    }
    /* Style only the visible toggle button — DON'T force display, or the hidden
       "Properties View" (shown only in map mode) would appear too. */
    .page-id-1370 .mobile-groups-button .btn {
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px !important;
        padding: 14px 20px !important;
        font-weight: 700;
    }
    /* In MAP mode the "Properties View" (back/hide) button is shown — pin it to
       the BOTTOM of the screen so it's always reachable over the map, not stuck
       up in the filter area. (It's display:none in list mode, so this is inert
       there.) */
    /* Hide the theme's own "Properties View" close button — it vanished in iOS
       portrait (filter hidden / fullscreen map covers it). We use our own
       body-level button (.lmx-map-close, styled below) instead. */
    .page-id-1370 .mobile-groups-button .btn-view-listing { display: none !important; }
}

/* Our own map-close button — created at <body> when the map opens (the theme's
   "Properties View" vanished in iOS portrait). Max z-index over the fullscreen
   map; JS lifts `bottom` above the Safari toolbar. */
.lmx-map-close {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 2147483000;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #181A20; color: #fff; border: 0; border-radius: 12px;
    padding: 15px 20px; font-weight: 700; font-size: 15px; font-family: inherit;
    line-height: 1; box-shadow: 0 10px 30px rgba(24,26,32,.35); cursor: pointer;
}
.lmx-map-close[hidden] { display: none; }
.lmx-map-close svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Properties filter — align the controls to the LMX look (12px radius, not the
   theme's 45px pills). Search stays brand purple; inputs/selects/Advanced get
   the 12px control radius like the homepage search. Scoped to the page. */
body.page-id-1370 .filter-listing-form .form-control,
body.page-id-1370 .filter-listing-form input.apus-autocompleate-input,
body.page-id-1370 .filter-listing-form .advance-search-btn,
body.page-id-1370 .filter-listing-form a.advance-search-btn,
body.page-id-1370 .filter-listing-form .btn-submit,
body.page-id-1370 .filter-listing-form button.btn-submit,
/* Beat the theme's exact 45px pill rule (template.css, specificity 0,6,1
   !important, loaded after us) by matching it verbatim + a body.page-id-1370
   prefix -> 0,7,2. Match the homepage's 12px LMX controls. */
body.page-id-1370 form.form-search.style5 .content-main-inner .select2-container--default.select2-container .select2-selection--single,
body.page-id-1370 form.form-search.style5 .content-main-inner .select2-container--default.select2-container .select2-selection {
    border-radius: 12px !important;
}

/* =========================================================================
   Homepage: ONE consistent section rhythm on desktop. The Elementor sections
   shipped jumbled vertical padding (5 / 100 / 220 / 50 / 20px) — most visibly
   a huge empty gap between Featured and the testimonials. Normalise the four
   visible content sections to 72px top/bottom. Mobile is already uniform 16px
   (critical-home.css), so this is desktop-only. Hero, header and footer keep
   their own spacing. IDs from the live homepage (page 25).
   ========================================================================= */
@media (min-width: 768px) {
    .home .elementor-element-7d26903,   /* Our Featured Properties */
    .home .elementor-element-7b0f793,   /* testimonials marquee */
    .home .elementor-element-c1f2742 {  /* contact / Grow-your-business CTA */
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
}
/* 4e50a05 is an EMPTY orphan section (no text, just empty heading/text-editor +
   a 72px spacer) that left a ~216px void between Featured and the testimonials —
   the big "too much space" gap. Collapse it (all viewports). */
.home .elementor-element-4e50a05 { display: none !important; }

/* Header primary menu: tighter item spacing so all links sit on ONE row (the menu
   column is ~482px; default padding/margin pushed the last items onto a 2nd line). */
@media (min-width: 992px) {
    #apus-header .main-menu .navbar-nav { flex-wrap: nowrap; }
    #apus-header .main-menu .navbar-nav > li { margin-right: 6px !important; }
    #apus-header .main-menu .navbar-nav > li > a { padding-left: 10px !important; padding-right: 10px !important; }
}