/* ================================================================
   TERMINAL UI — MyHomeMyLand.LK Design System v2
   Inspired by terminal-industries.com
   Keeps existing colour scheme, overrides layout & interactions
   ================================================================ */

/* ----------------------------------------------------------------
   STICKY GLASS HEADER — fixed at top edge, never moves
   ---------------------------------------------------------------- */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Light mode glass */
    background: rgba(248, 250, 252, 0.82) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06) !important;
    transition:
        box-shadow 0.35s ease,
        background 0.35s ease !important;
    overflow: visible !important;
    z-index: 1000 !important;
}

[data-theme="dark"] .site-header {
    background: rgba(15, 23, 42, 0.82) !important;
    border-bottom: 1px solid rgba(51, 65, 85, 0.55) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.28) !important;
}

/* More opaque + stronger shadow when scrolled */
.site-header.t-scrolled {
    background: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09) !important;
}

[data-theme="dark"] .site-header.t-scrolled {
    background: rgba(15, 23, 42, 0.97) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ── Navbar: 3-column layout ── */
.navbar {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.55rem 1rem !important;
    position: relative;
}

/* Hide old filter bars — filters are now in search overlay */
.filter-bar-desktop {
    display: none !important;
}

.filter-bar-mobile {
    display: none !important;
}

/* Hide inline filters (now replaced by search overlay) */
.t-inline-filters {
    display: none !important;
}

/* ── Logo ── */
.t-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

.t-logo:hover {
    opacity: 0.72 !important;
}

.t-logo-icon {
    font-size: 1.35rem !important;
    color: var(--primary) !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Single-line wordmark — both spans same font, size, weight */
.t-logo-words {
    display: flex !important;
    flex-direction: row !important;
    /* side-by-side on one line */
    align-items: baseline !important;
    gap: 0 !important;
    line-height: 1 !important;
}

.t-logo-top,
.t-logo-bot {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.t-logo-top {
    color: var(--text-primary) !important;
}

.t-logo-bot {
    color: var(--primary) !important;
}

/* ── Desktop pill search bar ── */
.t-nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    background: var(--bg-main) !important;
    border: 1.5px solid var(--border-glass) !important;
    border-radius: 50px !important;
    padding: 0.42rem 0.8rem 0.42rem 1rem !important;
    /* Balanced for icon on right */
    cursor: pointer !important;
    min-width: 200px !important;
    max-width: 270px !important;
    transition: border-color 0.22s, box-shadow 0.22s !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

.t-nav-left:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
}

.t-nav-left:focus-visible {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
}

.t-nav-pill-icon {
    color: var(--primary) !important;
    font-size: 0.95rem !important;
    /* Increased for better visibility */
    flex-shrink: 0 !important;
}

.t-nav-pill-tw {
    display: flex !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 1px !important;
}

/* Desktop: hide search icon (pill handles it) */
@media (min-width: 993px) {
    .t-search-trigger {
        display: none !important;
    }

    /* Let the top search pill grow to fill the header row instead of being
       capped at the base 270px (the flex:1 override was stranded in a
       max-width:992px block that never fires in this desktop-only file). */
    .t-nav-left {
        flex: 0 1 340px !important;
        min-width: 240px !important;
        max-width: 400px !important;
    }
}

/* Mobile: show pill stretched between logo and nav-links */
@media (max-width: 992px) {

    /* Pill goes full-stretch */
    .t-nav-left {
        display: flex !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.38rem 0.65rem 0.38rem 1rem !important;
        /* More left padding, less right for right-icon */
    }

    /* Navbar switches to start-aligned so pill can flex-grow */
    .navbar {
        justify-content: flex-start !important;
        gap: 0.4rem !important;
    }

    /* Logo stays compact */
    .t-logo {
        flex-shrink: 0 !important;
    }

    /* Right buttons stay compact */
    .nav-links {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    /* Pill handles search on mobile — hide icon button */
    .t-search-trigger {
        display: none !important;
    }
}

/* ── Inline filter strip (desktop) ── */
.t-inline-filters {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Rent/Buy pill inside filter strip */
.t-mode-pill {
    display: flex !important;
    background: var(--bg-main) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 50px !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
}

.t-mode-pill .mode-btn {
    padding: 0.28rem 0.65rem !important;
    font-size: 0.72rem !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Search input with icon */
.t-search-field {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: var(--bg-main) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 50px !important;
    padding: 0 0.75rem !important;
    flex: 1 !important;
    min-width: 100px !important;
    transition: border-color 0.2s !important;
}

.t-search-field:focus-within {
    border-color: var(--primary) !important;
}

.t-search-field i {
    color: var(--text-secondary) !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
}

.t-search-field .search-input {
    background: transparent !important;
    border: none !important;
    padding: 0.36rem 0 !important;
    font-size: 0.78rem !important;
    outline: none !important;
    width: 100% !important;
    min-width: 0 !important;
    color: var(--text-primary) !important;
}

.t-search-field .search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.65;
}

/* Compact dropdown selects in filter strip */
.t-fs {
    font-size: 0.75rem !important;
    padding: 0.32rem 1.4rem 0.32rem 0.6rem !important;
    border-radius: 50px !important;
    flex-shrink: 0 !important;
    height: 30px !important;
    min-width: 0 !important;
    max-width: 90px !important;
}

/* Compact action buttons */
.filter-search-btn,
.filter-clear-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

/* ── Right nav links ── */
.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
}

.nav-links a {
    position: relative !important;
    letter-spacing: 0.005em !important;
    font-size: 0.85rem !important;
}

.nav-links a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1.5px !important;
    background: var(--primary) !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1) !important;
    border-radius: 2px !important;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

/* Mobile icon buttons (hidden on desktop) */
.t-mob-search-btn,
.t-mob-filter-btn {
    display: none !important;
}

.t-mob-icon-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-glass) !important;
    background: none !important;
    color: var(--text-primary) !important;
    font-size: 0.78rem !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}

.t-mob-icon-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ── Hamburger button ── */
.t-hamburger {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    border: 1.5px solid var(--border-glass) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.t-hamburger:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
}

.t-hamburger i {
    font-size: 1rem;
    color: #000;
    transition: color 0.2s ease;
}

.t-hamburger:hover i {
    color: #000;
}

.t-hamburger.is-open i {
    color: #000;
}

/* ── Mobile slide-down search bar ── */
.t-mob-search-bar {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem 0.55rem;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    background: transparent;
}

[data-theme="dark"] .t-mob-search-bar {
    border-top-color: rgba(51, 65, 85, 0.45);
}

.t-mob-search-bar.is-open {
    display: flex;
}

.t-mob-search-bar i {
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.t-mob-search-bar .search-input {
    flex: 1 !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    padding: 0.38rem 0.75rem !important;
    height: 32px !important;
}

.t-mob-search-bar .filter-search-btn,
.t-mob-search-bar .filter-clear-btn {
    flex-shrink: 0 !important;
}

/* ----------------------------------------------------------------
   MOBILE NAV OVERLAY + DRAWER
   ---------------------------------------------------------------- */
.t-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8900;
    background: rgba(0, 0, 0, 0.3);
    /* Transparent overlay */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.t-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

.t-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(300px, 82vw);
    height: 100svh;
    height: 100vh;
    z-index: 8901;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-glass);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.14);
}

.t-drawer.is-open {
    transform: translateX(0);
}

.t-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-glass);
    flex-shrink: 0;
}

.t-drawer-head .logo {
    font-size: 1rem !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    letter-spacing: -0.04em !important;
    opacity: 1 !important;
}

.t-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-glass);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.t-close-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.07);
}

.t-drawer-body {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.t-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.22s ease;
    border: 1px solid transparent;
}

.t-nav-link:hover {
    background: rgba(14, 165, 233, 0.07);
    border-color: rgba(14, 165, 233, 0.14);
    color: var(--primary);
    transform: translateX(3px);
}

.t-nav-link .t-nav-icon {
    width: 18px;
    text-align: center;
    color: var(--primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.t-nav-link.is-cta {
    background: var(--primary);
    color: white !important;
    border-color: transparent !important;
    justify-content: center;
    margin-top: 0.4rem;
}

.t-nav-link.is-cta:hover {
    background: var(--primary-hover) !important;
    transform: none;
}

.t-drawer-sep {
    height: 1px;
    background: var(--border-glass);
    margin: 0.6rem 0;
}

.t-drawer-foot {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--border-glass);
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   LAYOUT — Offset content below fixed header (no gap)
   ---------------------------------------------------------------- */

/* Push content below sticky header */
.main-container {
    margin-top: var(--t-header-h, 130px) !important;
    height: calc(100svh - var(--t-header-h, 130px)) !important;
}

/* Split mode */
.main-container.split-mode {
    height: calc(100dvh - var(--t-header-h, 130px)) !important;
    margin-top: var(--t-header-h, 130px) !important;
}

/* Form / non-main pages */
.page-container {
    padding-top: calc(var(--t-header-h, 80px) + 20px) !important;
    min-height: 100svh;
}

/* Login/Register centred pages (no header) */
body.no-header .page-container {
    padding-top: 0 !important;
}

/* ----------------------------------------------------------------
   SCROLL REVEAL ANIMATIONS
   ---------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transition:
        opacity 0.65s cubic-bezier(0.39, 0.575, 0.565, 1),
        transform 0.65s cubic-bezier(0.39, 0.575, 0.565, 1);
}

[data-reveal="up"] {
    transform: translate3d(0, 28px, 0);
}

[data-reveal="down"] {
    transform: translate3d(0, -18px, 0);
}

[data-reveal="left"] {
    transform: translate3d(-22px, 0, 0);
}

[data-reveal="right"] {
    transform: translate3d(22px, 0, 0);
}

[data-reveal="scale"] {
    transform: scale(0.94) translate3d(0, 14px, 0);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none !important;
}

[data-delay="100"] {
    transition-delay: 0.1s !important;
}

[data-delay="150"] {
    transition-delay: 0.15s !important;
}

[data-delay="200"] {
    transition-delay: 0.2s !important;
}

[data-delay="300"] {
    transition-delay: 0.3s !important;
}

[data-delay="400"] {
    transition-delay: 0.4s !important;
}

[data-delay="500"] {
    transition-delay: 0.5s !important;
}

/* ================================================================
   PREMIUM PROPERTY CARDS  — complete redesign
   ================================================================ */

/* ── Card shell — liquid-glass premium ──
   Frosted-pane look built from light play alone: a soft translucent
   gradient, a crisp glass border, a specular inset top edge and
   layered depth shadows. Deliberately NO backdrop-filter here — with
   ~90 cards in the grid that many large blur surfaces janks scrolling,
   and the section behind the cards is a flat colour anyway (blur would
   be invisible). The pills ON the image do use real blur (small areas,
   photo behind them). */
.property-card {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(168deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.78) 52%,
            rgba(248, 250, 252, 0.88) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        0 8px 26px rgba(15, 23, 42, 0.09),
        0 2px 6px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition:
        transform 0.35s cubic-bezier(0.34, 1, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease !important;
    will-change: transform;
    cursor: pointer;
}

.property-card:hover,
.property-card:active {
    /* Raise the lifted card above its neighbours so the lift + shadow never get
       clipped or overlap the next card (esp. the tight browse-pane grid). */
    z-index: 6 !important;
}

.property-card:hover {
    /* No vertical lift — the card must NOT move up on hover (or drop back on
       mouse-out). Feedback comes from the shadow + border glow only, which
       don't shift the card's position. */
    transform: none !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.12),
        0 4px 12px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(14, 165, 233, 0.14),
        0 8px 30px rgba(14, 165, 233, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .property-card {
    background: linear-gradient(168deg,
            rgba(37, 50, 71, 0.92) 0%,
            rgba(30, 41, 59, 0.82) 52%,
            rgba(23, 33, 50, 0.92) 100%) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .property-card:hover {
    border-color: rgba(14, 165, 233, 0.35) !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.48),
        0 4px 12px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(14, 165, 233, 0.22),
        0 8px 30px rgba(14, 165, 233, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ── Image container — 16:9 rectangle on mobile, fixed height desktop ── */
.img-container {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

@media (min-width: 993px) {
    .img-container {
        aspect-ratio: unset !important;
        height: 185px !important;
    }
}

/* Scale image on card hover — desktop only, overrides JS swipe on mobile */
@media (min-width: 993px) {
    .property-card:hover .card-slider-wrapper {
        transform: scale(1.04) !important;
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .card-slider-wrapper {
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ── Gradient overlay on image ── */
.pc-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.28) 0%,
            transparent 28%,
            transparent 40%,
            rgba(0, 0, 0, 0.72) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ── Top badge row ── */
.pc-top-row {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

/* Type badge (left) — iOS liquid glass: heavy blur + saturation pulls
   the photo's colours into the pill, a bright 1px edge + specular
   inset top line give it the wet shine, and a diagonal white gradient
   fakes the light hitting curved glass. */
.pc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.14) 48%,
            rgba(255, 255, 255, 0.26) 100%);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.6rem;
    border-radius: 50px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 1px rgba(255, 255, 255, 0.12),
        0 4px 14px rgba(0, 0, 0, 0.22);
    /* Position relative so the ::before shimmer pseudo-element can
       be absolutely-clipped to the badge's rounded corners. The
       shimmer itself only runs on .property-card:active — see below. */
    position: relative;
    overflow: hidden;
}

.pc-type-badge i {
    font-size: 0.65rem;
    opacity: 0.9;
}

/* PNG type icon — shown in its own colours (no white recolor), a touch larger so
   thin-outline PNGs stay visible on the badge. */
.pc-type-ico {
    width: 1.43em;
    height: 1.2em;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Mode badge (right) — blue liquid glass. Translucent brand-blue over
   real backdrop blur (photo tints through), crisp glass edge and a
   specular top line; the blue drop-shadow keeps the RENT/BUY pop. */
.pc-mode-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.32rem 0.75rem;
    border-radius: 50px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    /* Same shimmer setup as .pc-type-badge */
    position: relative;
    overflow: hidden;
}

/* ── Shine sweep on the badges + price — runs ONLY when the parent
   .property-card is being touched/held (:active). Otherwise the pill
   sits still. Each badge has the shimmer pseudo-element always in the
   DOM (so the gradient is ready to go), but transform: translateX
   keeps it off-screen until :active triggers the animation. */
.pc-type-badge::before,
.pc-mode-badge::before,
.pc-price::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        110deg,
        transparent 35%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 65%
    );
    transform: translateX(-110%);
}

/* Trigger the sweep only while the card is being pressed/held. */
.property-card:active .pc-type-badge::before,
.property-card:active .pc-mode-badge::before,
.property-card:active .pc-price::before {
    animation: badge-shimmer 1.4s ease-in-out infinite;
}
/* Slight stagger so the three badges don't shine in unison. */
.property-card:active .pc-mode-badge::before { animation-delay: 0.18s; }
.property-card:active .pc-price::before      { animation-delay: 0.36s; }

@keyframes badge-shimmer {
    0%, 15%  { transform: translateX(-110%); }   /* parked off-screen left */
    55%      { transform: translateX(110%); }    /* shine sweeps across */
    100%     { transform: translateX(110%); }    /* parked off-screen right */
}

.pc-mode-rent {
    background: linear-gradient(135deg,
            rgba(56, 189, 248, 0.85) 0%,
            rgba(14, 165, 233, 0.70) 55%,
            rgba(2, 132, 199, 0.78) 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(255, 255, 255, 0.10),
        0 4px 14px rgba(14, 165, 233, 0.55);
}

.pc-mode-buy {
    background: linear-gradient(135deg,
            rgba(14, 165, 233, 0.85) 0%,
            rgba(2, 132, 199, 0.72) 55%,
            rgba(3, 105, 161, 0.80) 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(255, 255, 255, 0.10),
        0 4px 14px rgba(2, 132, 199, 0.55);
}

/* ── Bottom row: price (left) + dots (right) ── */
.pc-bottom-row {
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    z-index: 3;
    pointer-events: none;
}

/* Price — frosted white liquid glass. High-opacity white keeps the
   blue price legible over any photo; blur + glass edge + specular top
   line match the other pills. */
.pc-price {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #0284c7;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.74) 55%,
            rgba(255, 255, 255, 0.88) 100%);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 0.22rem 0.6rem;
    border-radius: 50px;
    white-space: nowrap;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 4px 12px rgba(0, 0, 0, 0.20);
    /* Position relative + overflow hidden so the ::before shimmer
       (only animated on .property-card:active) is clipped to the
       price pill's rounded shape. */
    position: relative;
    overflow: hidden;
}

.pc-price-per {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 1px;
    color: var(--text-secondary);
}

/* Dots inside bottom row */
.pc-bottom-row .card-slider-dots {
    position: static !important;
    transform: none !important;
    display: flex;
    gap: 4px;
    pointer-events: all;
}

/* ── Stats overlay — sits above price row ── */
.pc-stats-overlay {
    position: absolute;
    /* price pill ≈ 22px tall + 7px bottom gap + 2px spacing */
    bottom: 27px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
    pointer-events: none;
}

.pc-stats-overlay span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.pc-stats-overlay span i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.56rem;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* Stats row below image — hidden everywhere, overlay used instead */
.pc-stats-row {
    display: none !important;
}

/* Slider nav arrows — show on hover */
.card-slider-nav {
    opacity: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    z-index: 4 !important;
    color: #0f172a !important;
    font-size: 0.7rem !important;
}

.img-container:hover .card-slider-nav {
    opacity: 1 !important;
}

.card-slider-prev {
    left: 8px !important;
}

.card-slider-next {
    right: 8px !important;
}

/* ── Info body ── */
.property-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.85rem 0.9rem 0.8rem !important;
    flex: 1 !important;
    min-height: 112px !important;
    gap: 0 !important;
}

/* Title — 2 lines max, consistent height */
.property-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--text-primary) !important;
    margin: 0 0 0.4rem 0 !important;
    /* Exactly 2 lines, same space always */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(0.9rem * 1.35 * 2) !important;
}

/* Location */
.property-location {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--text-secondary) !important;
    font-size: 0.73rem !important;
    font-weight: 500 !important;
    margin: 0 0 0 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.property-location i {
    color: var(--primary) !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

.property-location span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Location sits right under title with small gap */
.property-location {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* Stats row — removed, overlay on image used instead */
.pc-stats-row {
    display: none !important;
}

.pc-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.pc-stat i {
    font-size: 0.72rem !important;
    color: var(--primary) !important;
    margin-bottom: 1px !important;
}

.pc-stat span {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1 !important;
}

.pc-stat small {
    font-size: 0.62rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Vertical divider between stats */
.pc-stat-sep {
    width: 1px !important;
    height: 28px !important;
    background: var(--border-glass) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* ── Override leftover old badge styles that may conflict ── */
.type-tag {
    display: none !important;
}

.mode-badge {
    display: none !important;
}

.price-tag {
    display: none !important;
}

.property-metrics {
    display: none !important;
}

/* ── Grid: make all rows same height ── */
.listings-grid {
    align-items: stretch !important;
}

/* ── Mobile card sizing ── */
@media (max-width: 992px) {

    /* Rounded cards on mobile */
    .property-card {
        border-radius: 10px !important;
    }

    /* ── Consistent 8px horizontal rhythm across the entire card ── */

    /* Image overlay: top badges — 8px from all edges */
    .pc-top-row {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
    }

    /* Type badge — compact */
    .pc-type-badge {
        font-size: 0.6rem !important;
        padding: 0.22rem 0.5rem !important;
        gap: 3px !important;
    }

    /* Mode badge — compact */
    .pc-mode-badge {
        font-size: 0.6rem !important;
        padding: 0.22rem 0.5rem !important;
    }

    /* Price pill — 8px from left edge (via pc-bottom-row padding) */
    .pc-price {
        font-size: 0.78rem !important;
        padding: 0.2rem 0.55rem !important;
    }

    /* Stats overlay — recalculate for mobile price height ~22px */
    .pc-stats-overlay {
        bottom: 30px !important;
        left: 16px !important;
        gap: 5px !important;
    }

    .pc-stats-overlay span {
        font-size: 0.66rem !important;
        gap: 3px !important;
    }

    .pc-stats-overlay span i {
        font-size: 0.6rem !important;
    }

    /* Info body — 8px sides to match image overlay alignment */
    .property-info {
        padding: 0.5rem 0.5rem 0.45rem !important;
        min-height: unset !important;
        gap: 0.2rem !important;
    }

    /* Title */
    .property-title {
        font-size: 0.76rem !important;
        line-height: 1.3 !important;
        min-height: unset !important;
        margin-bottom: 0.18rem !important;
    }

    /* Location */
    .property-location {
        font-size: 0.64rem !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    .property-location i {
        font-size: 0.6rem !important;
    }
}

@media (max-width: 480px) {

    /* Very small screens — tighten slightly */
    .property-info {
        padding: 0.42rem 0.45rem 0.4rem !important;
    }

    .property-title {
        font-size: 0.72rem !important;
    }

    .property-location {
        font-size: 0.6rem !important;
    }

    .pc-price {
        font-size: 0.72rem !important;
        padding: 0.18rem 0.45rem !important;
    }

    .pc-stats-overlay {
        bottom: 28px !important;
        left: 15px !important;
    }

    .pc-bottom-row {
        padding: 0 7px !important;
        bottom: 6px !important;
    }

    .pc-top-row {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
    }

    .pc-type-badge {
        font-size: 0.56rem !important;
        padding: 0.18rem 0.4rem !important;
    }

    .pc-mode-badge {
        font-size: 0.56rem !important;
        padding: 0.18rem 0.4rem !important;
    }
}

/* ----------------------------------------------------------------
   BUTTON GLOW
   ---------------------------------------------------------------- */
/* ================================================================
   BUTTON GLOW
   ---------------------------------------------------------------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.btn-primary:hover::after {
    opacity: 1;
}

/* ----------------------------------------------------------------
   FOOTER ACCENT LINE
   ---------------------------------------------------------------- */
.site-footer {
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    opacity: 0.35;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   THEME TOGGLE SMOOTH SPIN
   ---------------------------------------------------------------- */
.theme-toggle:active {
    transform: rotate(180deg) scale(1.05);
}

/* ----------------------------------------------------------------
   MOBILE BREAKPOINTS
   ---------------------------------------------------------------- */
@media (max-width: 992px) {

    /* Hide footer on mobile — app-style viewport, no room for footer */
    .site-footer {
        display: none !important;
    }

    /* Prevent body from scrolling past the main container — listings page only */
    body.page-listings {
        overflow: hidden !important;
    }

    .site-header {
        top: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* Hide all desktop nav links on mobile */
    .nav-links>a,
    .nav-links>.theme-toggle,
    .nav-links>.btn-primary {
        display: none !important;
    }

    /* Right-aligned nav group on mobile */
    .nav-links {
        display: flex !important;
        width: auto !important;
        /* override style.css width:100% at 768px */
        gap: 0.45rem !important;
        margin-left: auto !important;
        /* push the whole group to the right */
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    /* Specific flex order to match: Logo (1) | Pill (2) | nav-links (3) */
    .t-logo {
        order: 1 !important;
        flex-shrink: 0 !important;
    }

    .t-nav-left {
        order: 2 !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        /* Match other icons */
        padding: 0 0 0 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: var(--bg-main) !important;
        border-radius: 50px !important;
        overflow: hidden !important;
    }

    .nav-links {
        order: 5 !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    /* Pill search icon as a circular button (white icon, blue circle) */
    .t-nav-pill-icon {
        width: 34px !important;
        height: 34px !important;
        background: #0ea5e9 !important;
        color: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.98rem !important;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
        border: 1.5px solid var(--border-glass) !important;
        /* match removal style */
    }

    /* 2-line logo on mobile */
    .t-logo-words {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .t-logo-top,
    .t-logo-bot {
        font-size: 0.82rem !important;
        line-height: 1 !important;
    }

    .t-logo-bot {
        margin-top: -1px !important;
    }

    .t-hamburger {
        display: flex !important;
        order: 4 !important;
    }

    /* Main layout offset */
    .main-container {
        margin-top: var(--t-header-h, 95px) !important;
        height: calc(100vh - var(--t-header-h, 95px)) !important;
        height: calc(100svh - var(--t-header-h, 95px)) !important;
    }

    .main-container.split-mode {
        height: calc(100dvh - var(--t-header-h, 95px)) !important;
        margin-top: var(--t-header-h, 95px) !important;
    }

    /* Less padding on mobile listing scroll */
    .listings-scroll-container {
        padding: 0.5rem !important;
    }

    .listings-section {
        padding: 0 !important;
        padding-bottom: 0.01rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .listings-grid {
        gap: 0.5rem !important;
    }
}


@media (max-width: 480px) {
    .navbar {
        padding: 0.45rem 0.55rem !important;
        gap: 0.3rem !important;
    }

    .t-logo-top,
    .t-logo-bot {
        font-size: 0.75rem !important;
        line-height: 1.05 !important;
    }

    .t-logo-icon {
        font-size: 1.1rem !important;
    }

    .listings-scroll-container {
        padding: 0.4rem !important;
    }

    .listings-grid {
        gap: 0.4rem !important;
    }

    /* Pill slightly smaller on very small screens */
    .t-nav-pill-tw {
        font-size: 0.74rem !important;
    }

    .t-nav-pill-icon {
        font-size: 0.7rem !important;
    }
}

/* ----------------------------------------------------------------
   SMOOTH SCROLL
   ---------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* ----------------------------------------------------------------
   CUSTOM SCROLLBAR ACCENT
   ---------------------------------------------------------------- */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--primary-hover)) !important;
    border-radius: 10px !important;
}

/* ----------------------------------------------------------------
   LISTING COUNT BADGE
   ---------------------------------------------------------------- */
.listings-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    border-radius: 50px;
}

/* ----------------------------------------------------------------
   MAP SECTION STYLE POLISH
   ---------------------------------------------------------------- */
.map-section {
    border-left: 1px solid var(--border-glass);
}

[data-theme="dark"] .map-section {
    border-left-color: var(--border-glass);
}


/* ----------------------------------------------------------------
   FOCUS VISIBLE ACCESSIBILITY
   ---------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ================================================================
   SEARCH TRIGGER BUTTON  — always visible in navbar
   ================================================================ */
.t-search-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--border-glass) !important;
    background: none !important;
    color: var(--text-primary) !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    flex-shrink: 0 !important;
}

.t-search-trigger:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(14, 165, 233, 0.08) !important;
    transform: scale(1.08) !important;
}

/* ================================================================
   ANIMATED SEARCH OVERLAY
   ================================================================ */
.t-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(60px, 10vh, 110px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.t-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Blurred backdrop */
.t-so-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    /* Full transparent but visible overlay */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
}

/* Panel card */
.t-so-panel {
    position: relative;
    z-index: 1;
    width: min(680px, 94vw);
    /* Cap the panel height to the viewport (minus the overlay's top padding)
       and let it scroll its own content. Without this the panel grows past
       the bottom of the screen and the user has no way to reach the buttons
       — especially on phones once the Advanced Search section is open. */
    max-height: calc(100vh - clamp(60px, 10vh, 110px) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-panel);
    border: 1px solid var(--border-glass);
    border-radius: 22px;
    padding: 1.6rem 1.75rem 1.5rem;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: translateY(-32px) scale(0.96);
    transition:
        transform 0.42s cubic-bezier(0.34, 1.5, 0.64, 1),
        opacity 0.3s ease;
    opacity: 0;
}

.t-search-overlay.is-open .t-so-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

[data-theme="dark"] .t-so-panel {
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Head row: mode pill + close */
.t-so-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.3rem;
}

.t-so-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-glass);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.t-so-close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Full-width Rent/Buy pill inside the mobile search overlay.
   The base .t-mode-pill rule has flex-shrink:0 (keeps it small in the
   desktop filter bar). In the overlay we override that so the pill
   stretches across the row and each button claims half the width. */
.t-search-overlay .t-so-head {
    gap: 0.6rem;
}
.t-search-overlay .t-so-head .t-mode-pill {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 3px !important;
}
.t-search-overlay .t-so-head .t-mode-pill .mode-btn {
    flex: 1 1 0 !important;
    padding: 0.55rem 0.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Big search input */
.t-so-input-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.t-so-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;
    animation: t-so-pulse 2.2s ease-in-out infinite;
}

@keyframes t-so-pulse {

    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 0.55;
        transform: translateY(-50%) scale(0.88);
    }
}

.t-so-input {
    width: 100% !important;
    background: var(--bg-main) !important;
    border: 2px solid var(--border-glass) !important;
    border-radius: 50px !important;
    padding: 0.95rem 1.25rem 0.95rem 3.1rem !important;
    font-size: 1.08rem !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    outline: none !important;
    caret-color: var(--primary);
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 1;
}

.t-so-input:focus {
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 4px rgba(14, 165, 233, 0.15),
        0 6px 28px rgba(14, 165, 233, 0.14) !important;
    animation: t-so-glow 2.6s ease-in-out infinite !important;
}

@keyframes t-so-glow {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15), 0 6px 28px rgba(14, 165, 233, 0.14);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.25), 0 10px 40px rgba(14, 165, 233, 0.22);
    }
}

/* Typewriter placeholder overlay */
.t-so-typewriter {
    position: absolute;
    left: 3.1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    font-size: 1.08rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 3.5rem);
}

.t-so-typewriter.is-hidden {
    opacity: 0 !important;
}

.t-tw-cursor {
    display: inline-block;
    color: var(--primary);
    font-weight: 300;
    animation: t-blink 0.85s step-end infinite;
    opacity: 0.9;
    margin-left: 0;
}

@keyframes t-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Filter selects row */
.t-so-filters {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.t-sof {
    font-size: 0.8rem !important;
    padding: 0.45rem 1.7rem 0.45rem 0.75rem !important;
    border-radius: 50px !important;
    height: 34px !important;
    flex: 1 1 auto !important;
    min-width: 80px !important;
    max-width: 140px !important;
}

/* Quick chips */
.t-so-chips {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
}

.t-so-chips-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 0.15rem;
}

.t-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    border: 1px solid var(--border-glass);
    background: var(--bg-main);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.t-chip:hover,
.t-chip.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.09);
    transform: translateY(-1px);
}

.t-chip i {
    font-size: 0.65rem;
}

/* Action row */
.t-so-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.t-so-more-btn {
    padding: 0.6rem 1rem;
    border-radius: 50px;
    border: 1px solid var(--border-glass);
    background: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.t-so-more-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.t-so-clear-btn {
    padding: 0.6rem 1rem;
    border-radius: 50px;
    border: 1px solid var(--border-glass);
    background: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    margin-left: auto;
    white-space: nowrap;
}

.t-so-clear-btn:hover {
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.t-so-apply-btn {
    padding: 0.65rem 1.6rem;
    border-radius: 50px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.22s ease;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.38);
    white-space: nowrap;
}

.t-so-apply-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 7px 26px rgba(14, 165, 233, 0.5);
}

/* ── Inline filters grid inside search overlay panel ── */
.t-so-filters {
    margin-top: 0.5rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--border-glass) !important;
}

.t-so-filters-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.45rem 0.5rem !important;
}

.t-so-filter-group .t-pill-select-wrapper {
    display: flex !important;
    align-items: center !important;
    background-color: var(--bg-main) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 50px !important;
    padding: 0 0.55rem !important;
    height: 32px !important;
    transition: all 0.2s ease !important;
}

.t-so-filter-group .t-pill-select-wrapper:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.t-so-filter-group .t-pill-select-wrapper i:first-child {
    color: #0ea5e9 !important;
    font-size: 0.75rem !important;
    margin-right: 0.35rem !important;
    flex-shrink: 0 !important;
}

.t-so-filter-group .filter-select {
    width: 100% !important;
    font-size: 0.72rem !important;
    padding: 0 !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    background-size: 0.7rem !important;
    padding-right: 1.1rem !important;
}

/* ════════════════════════════════════════════════════════════════
   CUSTOM ANIMATED FILTER DROPDOWNS (overlay pills)
   Native <select> truncates text ("Type: Al", "Sort: Newes") in the
   narrow pills and can't be animated. JS (search-partial.php) swaps in
   a custom trigger + a body-portaled animated panel; the native select
   stays in the DOM (hidden) as the value source so the sync layer +
   fetch keep working.
   ════════════════════════════════════════════════════════════════ */
/* Hide the native select once enhanced (kept functional, just invisible) */
.t-pill-select-wrapper.t-dd-ready .filter-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
}

.t-dd-trigger {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
}

.t-dd-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-dd-caret {
    flex-shrink: 0;
    font-size: 0.6rem;
    color: var(--text-secondary);
    transition: transform 0.22s ease, color 0.22s ease;
}

.t-pill-select-wrapper.t-dd-open {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.t-pill-select-wrapper.t-dd-open .t-dd-caret {
    transform: rotate(180deg);
    color: #0ea5e9;
}

/* Portaled options panel — fixed so the overlay's overflow can't clip it */
.t-dd-panel {
    position: fixed;
    z-index: 12000;
    min-width: 150px;
    max-width: 260px;
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 0.3rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top center;
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
    visibility: hidden;
}

.t-dd-panel.t-dd-up {
    transform-origin: bottom center;
    transform: translateY(8px) scale(0.97);
}

.t-dd-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
}

.t-dd-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s ease, color 0.14s ease;
}

.t-dd-option:hover {
    background: rgba(14, 165, 233, 0.10);
}

.t-dd-option.is-selected {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.08);
}

.t-dd-option .t-dd-text {
    flex: 1 1 auto;
}

.t-dd-option .t-dd-check {
    flex-shrink: 0;
    font-size: 0.72rem;
    opacity: 0;
}

.t-dd-option.is-selected .t-dd-check {
    opacity: 1;
}

/* Staggered option entrance */
.t-dd-panel.open .t-dd-option {
    animation: tddOptIn 0.22s ease both;
}

@keyframes tddOptIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.t-so-price-group {
    margin-top: 0.75rem !important;
    padding: 0 !important;
    width: calc(100% + 1.2rem) !important;
    margin-left: -0.6rem !important;
}

.t-so-price-group label {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.45rem !important;
    display: block !important;
    padding-left: 0.5rem !important;
    letter-spacing: 0.02em !important;
}

/* Apple G2 squircle card wrap around whole slider area */
.t-so-price-group .price-slider-container {
    padding: 0.6rem 0.9rem 0.65rem !important;
    background: var(--bg-main) !important;
    border: 1px solid var(--border-glass) !important;
    /* G2 squircle: border-radius ~22.4% of height — Apple iOS icon formula */
    border-radius: 18px !important;
    /* Smooth the edges further with a tiny inset shadow so the curve 'bleeds in' like Apple UI */
    box-shadow: 0 0 0 1px var(--border-glass), inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Histogram canvas also gets squircle top corners to sit flush in the card */
.price-histogram {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    margin-bottom: 0.3rem !important;
    /* Squircle top corners only — bottom sits flush against the slider */
    border-radius: 10px 10px 3px 3px !important;
    overflow: hidden !important;
}

/* Big mobile search overlay: drop the squircle "card" around the price slider
   (background / border / shadow / radius) — same treatment as the apartment bid
   slider — leaving just the histogram + slider + min/max inputs. Scoped to the
   overlay so the apartment "Make an Offer" drawer + sticky panel keep their card. */
.t-search-overlay .t-so-price-group .price-slider-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ...and flatten the Min/Max price input pills inside it too — transparent,
   no border (the resting box-shadow/focus ring is dropped as well). */
.t-search-overlay .t-so-price-group .price-input-box,
.t-search-overlay .t-so-price-group .price-input-box:focus-within {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Price Slider — track */
.t-so-price-group .noUi-target {
    background: var(--border-glass) !important;
    height: 4px !important;
    border: none !important;
    box-shadow: none !important;
    /* Pill-end track — fully rounded ends = G2 on a thin rect */
    border-radius: 100px !important;
    overflow: visible !important;
        margin-top: 14px !important;

}

.t-so-price-group .noUi-connect {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
    border-radius: 100px !important;
}

/* Apple-squircle handle: 18×18 circle with squircle clip-path */
.t-so-price-group .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: none !important;
    /* Reference look: a solid BLUE CENTRE DOT sitting inside a WHITE circle
       (radial gradient = blue dot + white ring around it), with a faint
       outer ring, a soft drop shadow, and a soft blue glow halo. */
    background: radial-gradient(circle at center,
        #0ea5e9 0,
        #0ea5e9 6px,
        #ffffff 6.75px,
        #ffffff 100%) !important;
    /* Subtle blue glow ringing the circle: a tight inner glow + a soft wide
       falloff, both in the brand blue, plus a small depth shadow. */
    box-shadow:
        0 0 0 1px rgba(14, 165, 233, 0.20),
        0 1px 4px rgba(0, 0, 0, 0.12),
        0 0 9px 2px rgba(14, 165, 233, 0.38),
        0 0 18px 6px rgba(14, 165, 233, 0.20) !important;
    cursor: pointer !important;
    top: -8px !important;
    right: -10px !important;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease !important;
}

.t-so-price-group .noUi-handle:active,
.t-so-price-group .noUi-handle:hover {
    transform: scale(1.12) !important;
    box-shadow:
        0 0 0 1px rgba(14, 165, 233, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.16),
        0 0 12px 3px rgba(14, 165, 233, 0.50),
        0 0 26px 9px rgba(14, 165, 233, 0.26) !important;
}

.t-so-price-group .noUi-handle::before,
.t-so-price-group .noUi-handle::after {
    display: none !important;
}

.t-so-price-group .price-display {
    color: #0ea5e9 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    margin-top: 0.9rem !important;
    letter-spacing: 0.01em !important;
}

/* ─── Airbnb-style Min / Max price input pills ─── */
.t-so-price-group .price-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    margin-top: 0.7rem !important;
}

.t-so-price-group .price-input-box {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    padding: 0.5rem 0.7rem !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-glass) !important;
    border-radius: 12px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* Whole box lights up blue when the inner input is focused */
.t-so-price-group .price-input-box:focus-within {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.t-so-price-group .price-input-cap {
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-secondary) !important;
}

.t-so-price-group .price-input-control {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.25rem !important;
}

.t-so-price-group .price-input-cur {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    flex-shrink: 0 !important;
}

.t-so-price-group .price-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.01em !important;
}

/* Small connector dash between the two boxes (Airbnb cue) */
.t-so-price-group .price-input-sep {
    flex: 0 0 10px !important;
    height: 1.5px !important;
    border-radius: 2px !important;
    background: var(--border-glass) !important;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .t-search-overlay {
        padding-top: clamp(50px, 8vh, 80px);
    }

    .t-so-panel {
        padding: 1.1rem;
        border-radius: 18px;
        /* Use mobile-friendly viewport units (dvh accounts for the URL bar). */
        max-height: calc(100dvh - clamp(50px, 8vh, 80px) - 0.8rem);
    }

    .t-so-input {
        font-size: 0.92rem !important;
        padding: 0.82rem 1rem 0.82rem 2.8rem !important;
    }

    .t-so-typewriter {
        font-size: 0.92rem;
        left: 2.8rem;
    }

    .t-so-search-icon {
        left: 0.9rem;
        font-size: 0.88rem;
    }

    .t-sof {
        font-size: 0.72rem !important;
        padding: 0.38rem 1.4rem 0.38rem 0.6rem !important;
        height: 30px !important;
    }

    .t-so-chips-label {
        display: none;
    }

    .t-so-actions {
        flex-wrap: wrap;
    }

    .t-so-clear-btn {
        margin-left: 0;
        order: -1;
    }

    .t-so-filters-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* ================================================================
   NEW DESKTOP VISIBLE FILTER BAR
   ================================================================ */
.t-desktop-filter-bar {
    display: none;
    /* Hidden by default (mobile) */
}

@media (min-width: 993px) {
    .t-desktop-filter-bar {
        display: block;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-glass);
        padding: 0.65rem 2rem;
        position: sticky;
        top: 54px;
        /* Below fixed header */
        z-index: 990;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        overflow-anchor: none;
    }

    .t-dfb-inner {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .t-dfb-divider {
        width: 1px;
        height: 24px;
        background: var(--border-glass);
        margin: 0 0.2rem;
    }

    .t-dfb-search {
        flex: 1;
        min-width: 0;
    }
}

/* ================================================================
   DESKTOP FILTER BAR — refined controls (DESKTOP ONLY).
   Everything below is double-isolated: it lives in @media (min-width:993px)
   AND is scoped under .t-desktop-filter-bar (which is display:none on mobile),
   so none of it can touch the mobile search overlay / mobile UI.
   ================================================================ */
@media (min-width: 993px) {
    .t-desktop-filter-bar {
        padding: 0.72rem 2rem;
        box-shadow: 0 8px 22px -12px rgba(15, 23, 42, 0.18);
    }

    .t-dfb-inner {
        gap: 0.55rem;
    }

    /* One shared control height so the whole row lines up cleanly. */
    .t-desktop-filter-bar .t-mode-pill,
    .t-desktop-filter-bar .t-dfb-search,
    .t-desktop-filter-bar .filter-select,
    .t-desktop-filter-bar .btn-primary,
    .t-desktop-filter-bar .btn-secondary {
        height: 40px;
        box-sizing: border-box;
    }

    /* Search — turn the bare input into a proper pill field with icon + ring. */
    .t-desktop-filter-bar .t-dfb-search {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0 1rem;
        /* Grow to fill the row but keep a solid minimum so it can never
           collapse to the icon when the selects/buttons get wide. */
        flex: 1 1 170px;
        min-width: 130px;
        background: var(--bg-main);
        border: 1.5px solid var(--border-glass);
        border-radius: 50px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .t-desktop-filter-bar .t-dfb-search:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.13);
    }
    .t-desktop-filter-bar .t-dfb-search > i {
        color: var(--primary);
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    .t-desktop-filter-bar .t-dfb-search .search-input {
        flex: 1;
        min-width: 0;
        height: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.85rem;
        color: var(--text-primary);
    }
    .t-desktop-filter-bar .t-dfb-search .search-input::placeholder {
        color: var(--text-secondary);
        opacity: 0.7;
    }

    /* Selects — consistent height + a clearer hover/focus ring. */
    .t-desktop-filter-bar .filter-select {
        /* A native <select> reports a large intrinsic width here, which (×4)
           overflowed the row and crushed the search field + buttons. Pin a
           sensible basis and let them shrink a little on narrow desktops. */
        flex: 0 1 132px;
        width: auto;
        min-width: 90px;
        padding: 0 2rem 0 0.95rem;
        font-size: 0.82rem;
        font-weight: 600;
        background-color: var(--bg-main);
        border: 1.5px solid var(--border-glass);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .t-desktop-filter-bar .filter-select:hover {
        border-color: rgba(14, 165, 233, 0.5);
    }
    .t-desktop-filter-bar .filter-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.13);
    }

    /* Rent/Buy pill — larger targets, brand-blue active segment. */
    .t-desktop-filter-bar .t-mode-pill {
        flex: 0 0 auto;
        align-items: center;
        padding: 3px;
        border: 1.5px solid var(--border-glass);
        background: var(--bg-main);
    }
    .t-desktop-filter-bar .t-mode-pill .mode-btn {
        height: 32px;
        padding: 0 1rem;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .t-desktop-filter-bar .t-mode-pill .mode-btn.mode-active {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
    }

    /* Action buttons — consistent height, tighter, brand-consistent. */
    .t-desktop-filter-bar .btn-primary,
    .t-desktop-filter-bar .btn-secondary {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0 1.35rem;
        font-size: 0.85rem;
        font-weight: 600;
    }
    .t-desktop-filter-bar .btn-primary {
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.28);
    }
    .t-desktop-filter-bar .btn-secondary {
        background: var(--bg-main);
        border: 1.5px solid var(--border-glass);
    }
    .t-desktop-filter-bar .btn-secondary:hover {
        border-color: rgba(14, 165, 233, 0.5);
        background: var(--bg-main);
    }

    .t-desktop-filter-bar .t-dfb-divider {
        height: 26px;
    }
}

/* ================================================================
   SUBTLE BACK BAR — sits directly below the fixed header on subpages.
   Uses the brand primary blue; intentionally low-key so it doesn't
   compete with page content. Pointer events fall through except on
   the pill itself, so it doesn't block clicks on the page below.
   ================================================================ */
.t-back-bar {
    position: fixed;
    top: var(--t-header-h, 64px);
    left: 0;
    right: 0;
    z-index: 19;
    padding: 0.2rem 0.7rem 0;
    pointer-events: none;
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
}
.t-back-link {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--text-secondary, #475569);
    text-decoration: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border-glass, #e2e8f0);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}
[data-theme="dark"] .t-back-link {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}
.t-back-link i { font-size: 0.7rem; opacity: 0.85; transition: transform 0.15s ease; }
.t-back-link:hover {
    color: var(--primary, #0ea5e9);
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}
.t-back-link:hover i { transform: translateX(-2px); }
.t-back-link:focus-visible {
    outline: 2px solid var(--primary, #0ea5e9);
    outline-offset: 2px;
}
/* Reserve room under the header on pages with a back bar so the
   first row of content isn't hidden behind it. */
body.has-back-bar { --t-backbar-h: 24px; }
body.has-back-bar .page-container,
body.has-back-bar main.page-container,
body.has-back-bar .profile-container,
body.has-back-bar .dash-page,
body.has-back-bar .form-page { padding-top: calc(var(--t-header-h, 64px) + var(--t-backbar-h, 24px)) !important; }

@media (max-width: 768px) {
    .t-back-bar { padding: 0.15rem 0.55rem 0; }
    .t-back-link { width: 24px; height: 24px; }
    .t-back-link i { font-size: 0.66rem; }
    body.has-back-bar { --t-backbar-h: 22px; }
}

/* ================================================================
   NAVBAR FILTER BUTTON (Integrated next to search)
   ================================================================ */
.t-nav-filter-btn {
    display: none !important;
    /* Hidden on desktop */
}

@media (max-width: 992px) {
    .t-nav-filter-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #000 !important;
        border: 1.5px solid var(--border-glass) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        font-size: 0.85rem !important;
        transition: all 0.22s ease !important;
        box-shadow: none !important;
        order: 3 !important;
    }

    .t-nav-filter-btn:hover {
        border-color: #0ea5e9 !important;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
    }

    .t-nav-filter-btn i {
        font-size: 0.85rem !important;
    }
}

/* ================================================================
   ACTIVE FILTERS BAR  — mobile only, inside fixed header
   ================================================================ */
.t-active-bar {
    display: none !important;
    /* default hidden */
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.8rem;
    border-top: 1px solid var(--border-glass);
    min-height: 24px;
    max-height: 24px;
    overflow: hidden;
    background: var(--bg-main);
}

.t-active-bar.has-filters {
    display: flex !important;
}

/* Scrollable pill row */
.t-active-pills {
    display: flex;
    gap: 0.32rem;
    align-items: center;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.t-active-pills::-webkit-scrollbar {
    display: none;
}

/* Individual pill */
.t-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.08rem 0.25rem 0.08rem 0.45rem;
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
    animation: t-apill-in 0.2s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes t-apill-in {
    from {
        opacity: 0;
        transform: scale(0.75);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* X button inside each pill */
.t-apill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    font-size: 0.5rem;
    line-height: 1;
    transition: background 0.15s;
}

.t-apill-remove:hover {
    background: rgba(255, 255, 255, 0.5);
}

.t-apill-remove:active {
    background: rgba(255, 255, 255, 0.65);
}

/* Clear-all circle button */
.t-active-clear {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-secondary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    opacity: 0.55;
    transition: opacity 0.18s, background 0.18s;
    flex-shrink: 0;
}

.t-active-clear:hover {
    opacity: 1;
    background: #ef4444;
}

.t-active-clear:active {
    transform: scale(0.9);
}

/* Desktop — never show this bar */
@media (min-width: 993px) {
    .t-active-bar {
        display: none !important;
    }
}

/* ================================================================
   DRAWER LANGUAGE SWITCHER
   ================================================================ */
.t-drawer-lang {
    padding: 0.55rem 1rem 0.55rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.t-drawer-lang-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.t-drawer-lang-opts {
    display: flex;
    gap: 0.45rem;
}

.t-drawer-lang-btn {
    flex: 1;
    padding: 0.45rem 0.5rem;
    border-radius: 50px;
    border: 1px solid var(--border-glass);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-family: 'Noto Sans Sinhala', 'Outfit', sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s ease;
    line-height: 1.3;
}

.t-drawer-lang-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.07);
}

.t-drawer-lang-btn.t-drawer-lang-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Currency picker reuses the language row layout, but the
   right-hand side is a single select. */
.t-drawer-currency-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    border-radius: 9px;
    padding: 0.4rem 1.8rem 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%2364748b' d='M5 8l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 14px;
    min-width: 130px;
    max-width: 180px;
}
.t-drawer-currency-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Country "browse as" simulation row — full-width select + Select button. */
.t-drawer-country-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.t-drawer-country-controls .t-drawer-country-select {
    flex: 1 1 auto;
    min-width: 0;        /* let long country names ellipsize, not overflow */
    max-width: none;     /* override the currency select's 180px cap */
}

.t-drawer-country-btn {
    flex: 0 0 auto;
    padding: 0.42rem 1rem;
    border-radius: 9px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.08s ease;
}

.t-drawer-country-btn:hover { filter: brightness(1.08); }
.t-drawer-country-btn:active { transform: translateY(1px); }
.t-drawer-country-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.t-drawer-sim-tag {
    margin-left: 0.45rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.42rem;
    border-radius: 50px;
    background: rgba(14, 165, 233, 0.12);
    color: var(--primary);
    text-transform: uppercase;
}

.t-drawer-lang-btn.t-drawer-lang-active span {
    opacity: 0.85;
}

/* ================================================================
   ADVANCED SEARCH — country + Google Places + extra filters
   Lives inside #t-search-overlay; reuses .country-picker (defined
   in list-apartment.php) but we redefine it here to avoid coupling.
   ================================================================ */
.t-so-adv {
    margin-top: 0.85rem;
    border-top: 1px solid var(--border-glass);
    padding-top: 0.85rem;
}
.t-so-adv-toggle {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%;
    background: var(--bg-main); cursor: pointer;
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    color: var(--text-primary); font-weight: 700; font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.t-so-adv-toggle:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}
.t-so-adv-toggle:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
/* The leading sliders icon picks up the brand blue */
.t-so-adv-toggle > i:first-child { color: #0ea5e9; font-size: 0.9rem; }
.t-so-adv-toggle > span { flex: 1; text-align: left; }
.t-so-adv-caret { transition: transform 0.25s ease; font-size: 0.8rem; color: var(--text-secondary); }
.t-so-adv[aria-open="true"] .t-so-adv-caret,
.t-so-adv-toggle[aria-expanded="true"] .t-so-adv-caret { transform: rotate(180deg); }
.t-so-adv-body { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.85rem; }
.t-so-adv-body[hidden] { display: none; }
.t-so-adv-row { display: flex; flex-direction: column; gap: 0.4rem; }
.t-so-adv-row-head { display: flex; align-items: center; justify-content: space-between; }
.t-so-adv-label {
    font-size: 0.78rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.t-so-adv-chip {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
}
.t-so-adv-hint {
    color: var(--text-secondary); font-size: 0.75rem;
    margin-top: 0.2rem;
}
.t-so-adv-address {
    position: relative;
    display: flex; align-items: center;
    border: 1px solid var(--border-glass);
    background: var(--bg-main);
    border-radius: 10px;
    padding: 0.4rem 0.5rem 0.4rem 2.1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.t-so-adv-address:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.t-so-adv-address-icon {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: 0.85rem;
}
.t-so-adv-address-input {
    flex: 1; border: 0; outline: 0; background: transparent;
    color: var(--text-primary); font-family: inherit; font-size: 0.92rem;
    padding: 0.35rem 0;
}
.t-so-adv-address-clear {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-secondary); padding: 0.25rem 0.45rem;
    border-radius: 6px; opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
}
.t-so-adv-address.has-value .t-so-adv-address-clear {
    opacity: 1; pointer-events: auto;
}
.t-so-adv-address-clear:hover { color: var(--primary); background: rgba(79, 70, 229, 0.08); }
.t-so-adv-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; background: var(--border-glass);
    border-radius: 999px; outline: none; cursor: pointer;
}
.t-so-adv-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2); cursor: pointer;
}
.t-so-adv-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2); cursor: pointer;
}
.t-so-adv-range-ticks {
    display: flex; justify-content: space-between;
    font-size: 0.7rem; color: var(--text-secondary);
    margin-top: 0.2rem;
}
.t-so-adv-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem;
}
.t-so-adv-features { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.t-so-adv-feature-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--bg-main); color: var(--text-primary);
    font-family: inherit; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s ease;
}
.t-so-adv-feature-chip:hover { border-color: var(--primary); color: var(--primary); }
.t-so-adv-feature-chip.is-active {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
}
.t-so-adv-feature-chip i { font-size: 0.78rem; }

/* Country picker (mirrors list-apartment.php so it works inside the overlay) */
.country-picker { position: relative; }
.country-picker-native {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    margin: 0; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}
.country-picker-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 10px;
    border: 1px solid var(--border-glass); background: var(--bg-main);
    color: var(--text-primary); font-family: inherit; font-size: 0.92rem;
    cursor: pointer; text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;
}
.country-picker-trigger:hover { border-color: var(--primary); }
.country-picker.open .country-picker-trigger {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.country-picker-current { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-picker-caret { font-size: 0.72rem; color: var(--text-secondary); transition: transform 0.2s; flex-shrink: 0; }
.country-picker.open .country-picker-caret { transform: rotate(180deg); }
.country-picker-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: var(--bg-card, var(--bg-main));
    border: 1px solid var(--border-glass); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    max-height: 320px; display: flex; flex-direction: column; overflow: hidden;
}
.country-picker-panel[hidden] { display: none; }
.country-picker-search-wrap {
    position: relative; padding: 0.5rem; border-bottom: 1px solid var(--border-glass);
    background: var(--bg-main);
}
.country-picker-search-icon {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: 0.8rem; pointer-events: none;
}
.country-picker-search {
    width: 100%; padding: 0.5rem 0.6rem 0.5rem 2rem;
    border-radius: 8px; border: 1px solid var(--border-glass);
    background: var(--bg-main); color: var(--text-primary);
    font-family: inherit; font-size: 0.88rem; box-sizing: border-box;
}
.country-picker-search:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}
.country-picker-list { list-style: none; margin: 0; padding: 0.25rem 0; overflow-y: auto; flex: 1 1 auto; }
.country-picker-option {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.8rem; cursor: pointer; font-size: 0.9rem;
    color: var(--text-primary); user-select: none;
}
.country-picker-option:hover,
.country-picker-option.active {
    background: rgba(79, 70, 229, 0.1); color: var(--primary);
}
.country-picker-option.selected { font-weight: 600; }
.country-picker-option .flag { font-size: 1.05rem; flex-shrink: 0; }
.country-picker-option .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-picker-option .check { color: var(--primary); opacity: 0; font-size: 0.78rem; }
.country-picker-option.selected .check { opacity: 1; }
.country-picker-empty { padding: 0.85rem; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }

/* Make sure Google's pac-container (autocomplete dropdown) appears above
   the search overlay, which uses a high z-index of its own. */
.pac-container { z-index: 100000 !important; border-radius: 10px; }

@media (max-width: 768px) {
    .t-so-adv-grid { grid-template-columns: 1fr; }
    .country-picker-panel { max-height: 55vh; }
    .country-picker-option { padding: 0.7rem 0.85rem; font-size: 0.92rem; }
    .country-picker-search { font-size: 16px; }
    .t-so-adv-address-input { font-size: 16px; } /* prevent iOS zoom */
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP HEADER / SEARCH TWEAKS (index + apartment)
   This file is loaded only ≥993px (media-gated <link>), so everything
   here is desktop-only and never touches mobile. It loads after
   desktop.css, so these win on equal specificity.
   ════════════════════════════════════════════════════════════════════ */

/* Trim the header to just Login + Sign Up: drop Explore and List Property
   (both the plain logged-out link and the logged-in btn-primary variant). */
.nav-links a[href="index.php"],
.nav-links a[href="list-apartment.php"] {
    display: none !important;
}

/* Two search bars → one. Remove the "Search areas…" input that sat next to
   the Rent/Buy toggle in the filter bar; the header pill is the search now. */
.t-desktop-filter-bar .t-dfb-search {
    display: none !important;
}

/* Widen that main header search pill (was 200–270px). */
.t-nav-left {
    min-width: 360px !important;
    max-width: 560px !important;
}

/* The filter bar carries more controls now (Baths, Sort, Furnished,
   Completion, Min area). Keep it to a SINGLE row (no wrap) so it doesn't grow
   taller than the layout budget and push the page past 100vh — that extra
   height was what put a vertical scrollbar down the right side of the map.
   If the controls don't all fit, they scroll horizontally within the bar
   instead of the whole page scrolling. */
.t-desktop-filter-bar .t-dfb-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.t-desktop-filter-bar .t-dfb-inner > * { flex-shrink: 0; }

/* Final desktop listing layout override: one page scrollbar model only.
   The map stays fixed/clipped and the filter row never creates its own scroll. */
@media (min-width: 993px) {
    html,
    body.page-listings {
        height: 100%;
        overflow: hidden !important;
    }

    .t-desktop-filter-bar {
        padding: 0.62rem 1.2rem;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)),
            var(--bg-panel);
        box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.45);
    }

    .t-desktop-filter-bar .t-dfb-inner {
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.44rem;
        overflow: visible;
    }

    .t-desktop-filter-bar .t-dfb-inner > * {
        flex-shrink: 1;
    }

    .t-desktop-filter-bar .filter-select {
        flex: 0 1 116px;
        min-width: 82px;
        max-width: 136px;
        height: 38px;
        padding-left: 0.76rem;
        padding-right: 1.45rem;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.34);
        background-color: rgba(255, 255, 255, 0.82);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        font-size: 0.74rem;
        font-weight: 650;
        text-overflow: ellipsis;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    }

    [data-theme="dark"] .t-desktop-filter-bar {
        background:
            linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.9)),
            var(--bg-panel);
    }

    [data-theme="dark"] .t-desktop-filter-bar .filter-select {
        background-color: rgba(15, 23, 42, 0.72);
        border-color: rgba(148, 163, 184, 0.28);
    }

    .t-desktop-filter-bar .filter-select:hover,
    .t-desktop-filter-bar .filter-select:focus {
        background-color: var(--bg-card);
        border-color: rgba(14, 165, 233, 0.55);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
    }

    .t-desktop-filter-bar .t-mode-pill,
    .t-desktop-filter-bar .btn-secondary,
    .t-desktop-filter-bar .t-dfb-divider {
        flex-shrink: 0;
    }

    .t-desktop-filter-bar .t-mode-pill {
        height: 38px;
        padding: 3px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.36);
        background: rgba(15, 23, 42, 0.05);
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
    }

    .t-desktop-filter-bar .t-mode-pill .mode-btn {
        height: 30px;
        padding-inline: 0.82rem;
        border-radius: 999px;
        letter-spacing: 0.04em;
    }

    .t-desktop-filter-bar .btn-secondary {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.42rem;
        width: auto;
        min-width: 82px;
        height: 38px;
        padding-inline: 0.9rem;
        border-radius: 999px;
        color: #dc2626 !important;
        border: 1px solid rgba(220, 38, 38, 0.2) !important;
        background: rgba(254, 242, 242, 0.82) !important;
        box-shadow: 0 1px 2px rgba(127, 29, 29, 0.08);
        opacity: 1 !important;
        visibility: visible !important;
    }

    .t-desktop-filter-bar .btn-secondary:hover {
        color: #b91c1c !important;
        border-color: rgba(220, 38, 38, 0.32) !important;
        background: rgba(254, 226, 226, 0.95) !important;
        transform: none;
    }

    .t-desktop-filter-bar .btn-secondary i {
        font-size: 0.78rem;
    }

    .t-desktop-filter-bar #dfb-apply {
        display: none !important;
    }

    .map-section,
    #map {
        overflow: hidden !important;
    }
}

/* Dense premium desktop cards: remove blank body space without changing mobile. */
@media (min-width: 993px) {
    .listings-section {
        padding: 1rem !important;
    }

    .listings-grid {
        gap: 0.85rem !important;
        align-items: start !important;
        grid-auto-rows: auto !important;
    }

    /* Liquid-glass shell (matches the base card rules above): slate rim
       as the glass edge, specular inset top line, soft layered depth. */
    .property-card {
        border-radius: 12px !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        box-shadow:
            0 10px 24px rgba(15, 23, 42, 0.08),
            0 2px 6px rgba(15, 23, 42, 0.05),
            0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
        align-self: start !important;
    }

    .property-card:hover {
        /* No vertical lift — card stays put on hover (shadow/border only). */
        transform: none !important;
        box-shadow:
            0 18px 38px rgba(15, 23, 42, 0.14),
            0 0 0 1px rgba(14, 165, 233, 0.16),
            0 8px 28px rgba(14, 165, 233, 0.10),
            0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
    }

    .img-container {
        height: 172px !important;
    }

    .pc-top-row {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
    }

    .pc-type-badge,
    .pc-mode-badge {
        padding-block: 0.22rem !important;
        font-size: 0.62rem !important;
    }

    .pc-bottom-row {
        bottom: 6px !important;
        padding-inline: 7px !important;
    }

    .pc-price {
        padding: 0.2rem 0.55rem !important;
        font-size: 0.88rem !important;
    }

    .pc-stats-overlay {
        bottom: 27px !important;
        left: 12px !important;
        gap: 5px !important;
    }

    .property-info {
        padding: 0.48rem 0.68rem 0.54rem !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        gap: 0.16rem !important;
    }

    .property-title {
        font-size: 0.84rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        min-height: 0 !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .property-location {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
        gap: 0.32rem !important;
    }

    .property-location i {
        font-size: 0.66rem !important;
    }

    [data-theme="dark"] .property-card {
        border-color: rgba(148, 163, 184, 0.22) !important;
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.28),
            0 2px 6px rgba(0, 0, 0, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
    }
}

/* Desktop-only scrollbar: thinner, solid brand blue. */
@media (min-width: 993px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 transparent;
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #0ea5e9;
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #0ea5e9;
    }
}

/* Extra-tight desktop listing rail: minimal space between cards and scrollbar. */
@media (min-width: 993px) {
    .listings-section {
        padding: 0.55rem 0.28rem 0.55rem 0.55rem !important;
    }

    .listings-scroll-container {
        height: 100%;
        overflow-y: auto;
        padding: 0 0.16rem 0 0 !important;
        scrollbar-gutter: stable;
    }

    .listings-grid {
        column-gap: 0.42rem !important;
        row-gap: 0.48rem !important;
        padding: 0 !important;
    }

    .property-card {
        border-radius: 10px !important;
    }

    .img-container {
        height: 166px !important;
    }

    .property-info {
        padding: 0.38rem 0.52rem 0.42rem !important;
        gap: 0.1rem !important;
    }

    .property-title {
        font-size: 0.8rem !important;
        line-height: 1.14 !important;
    }

    .property-location {
        font-size: 0.67rem !important;
        line-height: 1.08 !important;
    }
}