/* ================================================================
   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;
    }
}

/* 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;
}

/* 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 ── */
.property-card {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.3, 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 {
    transform: translateY(-6px) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(14, 165, 233, 0.12) !important;
}

[data-theme="dark"] .property-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .property-card:hover {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(14, 165, 233, 0.2) !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) */
.pc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    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);
    /* 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;
}

/* Mode badge (right) */
.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: 1.5px solid rgba(255, 255, 255, 0.4);
    /* 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: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.6);
}

.pc-mode-buy {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.6);
}

/* ── 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 */
.pc-price {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #0ea5e9;
    background: #ffffff;
    padding: 0.22rem 0.6rem;
    border-radius: 50px;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* 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);
}

/* 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;
}

.t-so-price-group {
    margin-top: 1rem !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.75rem !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.85rem 0.9rem 0.75rem !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.35rem !important;
    /* Squircle top corners only — bottom sits flush against the slider */
    border-radius: 10px 10px 3px 3px !important;
    overflow: hidden !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;
}

.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: 18px !important;
    height: 18px !important;
    /* Squircle clip on the handle — Apple icon aspect ratio */
    border-radius: 27% !important;
    border: none !important;
    background: #fff !important;
    box-shadow:
        0 2px 8px rgba(14, 165, 233, 0.40),
        0 0 0 2px #0ea5e9 !important;
    cursor: pointer !important;
    top: -7px !important;
    right: -9px !important;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease !important;
}

.t-so-price-group .noUi-handle:active {
    transform: scale(1.25) !important;
    box-shadow:
        0 4px 14px rgba(14, 165, 233, 0.55),
        0 0 0 2.5px #0ea5e9 !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;
}

/* 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: 60px;
        /* Below fixed header */
        z-index: 990;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }

    .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;
    }
}

/* ================================================================
   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; }

.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.55rem;
    width: 100%;
    background: transparent; border: 0; cursor: pointer;
    padding: 0.4rem 0;
    color: var(--text-primary); font-weight: 700; font-size: 0.95rem;
    font-family: inherit;
}
.t-so-adv-toggle:hover { color: var(--primary); }
.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 */
}