/* ============================================================
   Hartanex — design tokens
   ============================================================ */
:root {
    --primary: #0B1F3A;
    --primary-light: #16305A;
    --accent: #FF6A3D;
    --accent-dark: #E5501F;
    --success: #1FA971;
    --warning: #E8A400;
    --danger: #E5484D;

    --text-dark: #10151F;
    --text-body: #4B5468;
    --text-muted: #8891A3;

    --border-color: #E4E8EF;
    --bg-light: #F6F8FB;
    --bg-white: #FFFFFF;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 3px rgba(16, 21, 31, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 21, 31, 0.08);
    --shadow-lg: 0 20px 48px rgba(16, 21, 31, 0.14);

    /* "3D pop" elevation - a visible resting lift plus a deeper hover shadow, used by
       .pop-3d (Popular areas / Properties near you / Latest news / Local agents cards) */
    --shadow-pop-rest: 0 2px 4px rgba(16, 21, 31, 0.06), 0 10px 20px -8px rgba(16, 21, 31, 0.16);
    --shadow-pop-hover: 0 6px 10px rgba(16, 21, 31, 0.07), 0 24px 40px -12px rgba(16, 21, 31, 0.26);

    --max-width: 1280px;
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ---- Futuristic hero tokens (Views/Home/Index.cshtml hero only) ----
       Kept separate from the core palette above rather than replacing it:
       the rest of the site stays on the existing navy/orange brand, while
       the hero gets a deeper "night skyline" treatment layered on top. */
    --void: #05070C;
    --void-2: #0A1120;
    --cyan-glow: #4FE3FF;
    --font-display: 'Space Grotesk', var(--font);
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --glass-fill: rgba(255, 255, 255, 0.07);
    --glass-fill-strong: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
    font-family: var(--font);
    color: var(--text-body);
    background-color: var(--bg-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--text-dark); font-weight: 700; line-height: 1.25; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* ============================================================
   Topbar / Navigation
   ============================================================ */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 2rem;
    height: 72px;
    width: 100%;
    position: sticky;
    top: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
}

.brand-link { text-decoration: none; flex-shrink: 0; }

.logo {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
}
.logo span { color: var(--accent); }

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex: 1;
    justify-content: center;
}

.topbar-nav > a {
    text-decoration: none;
    color: var(--text-body);
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.topbar-nav > a:hover,
.topbar-nav > a.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
}

.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--text-body); font-size: 0.92rem; font-weight: 600; }
.nav-dropdown .caret { font-size: 0.7em; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    min-width: 240px;
    z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    color: var(--text-body);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
}
.nav-dropdown-menu a:hover { background: var(--bg-light); color: var(--primary); }

.actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.actions .signin-link,
.actions > a:not(.list-btn) {
    text-decoration: none;
    color: var(--text-body);
    font-weight: 600;
    font-size: 0.92rem;
}
.actions .signin-link:hover,
.actions > a:not(.list-btn):hover { color: var(--primary); }

.list-btn {
    text-decoration: none;
    background: var(--accent);
    color: white !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.88rem;
    transition: background 0.2s ease, transform 0.15s ease;
}
.list-btn:hover { background: var(--accent-dark); transform: translateY(-1px); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text-dark); border-radius: 2px; }

/* ============================================================
   Hero — futuristic 3D skyline (Views/Home/Index.cshtml only)
   ============================================================ */
.hero {
    position: relative;
    background: radial-gradient(120% 100% at 50% 0%, var(--void-2) 0%, var(--void) 70%);
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 9rem;
    text-align: center;
    color: white;
    overflow: hidden;
}
/* Three.js renders into this canvas as an ambient background layer - see
   wwwroot/js/hero-scene.js. If WebGL is unavailable the script simply never
   runs, and the radial gradient above is the fallback background. */
#heroCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(6,14,28,0.85) 0%, rgba(6,14,28,0.45) 32%, rgba(6,14,28,0.05) 60%, rgba(6,14,28,0.25) 100%);
    pointer-events: none;
}
/* Homepage hero only (.hero, not .hero-page) - the Three.js scene sits behind
   this, so the overlay darkens top+bottom for text contrast while keeping
   the vertical middle clearer to show the skyline. */
.hero .hero-overlay {
    background: linear-gradient(to bottom, rgba(5,7,12,0.55) 0%, rgba(5,7,12,0.05) 30%, rgba(5,7,12,0.1) 65%, rgba(5,7,12,0.75) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--cyan-glow);
    margin-bottom: 1.25rem;
}
.hero-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan-glow);
    box-shadow: 0 0 8px 2px rgba(79,227,255,0.7);
}
.hero h1 {
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
    color: white;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.hero p { font-size: 1.15rem; color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto; }

/* Floating glass search panel - sits below the hero image as its own block.
   Sibling of .hero (not nested); positive top margin gives it breathing
   room under the hero's bottom edge instead of overlapping the image. */
.hero-search-glass {
    position: relative;
    z-index: 10;
    max-width: 980px;
    margin: 2rem auto 0;
    padding: 1.5rem 1.75rem 1.75rem;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-search-glass .search-tabs { border-bottom-color: rgba(255,255,255,0.14); margin-bottom: 1.25rem; }
.hero-search-glass .search-tab { color: rgba(255,255,255,0.55); }
.hero-search-glass .search-tab.active { color: white; border-bottom-color: var(--cyan-glow); }
.hero-search-glass .search-tab:hover:not(.active) { color: rgba(255,255,255,0.85); }
.hero-search-glass .form-group label { color: rgba(255,255,255,0.75) !important; }
.hero-search-glass .form-group input,
.hero-search-glass .form-group select,
.hero-search-glass .hx-search-bar .form-group input,
.hero-search-glass .hx-search-bar .form-group select {
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: white !important;
    caret-color: white !important;
}
.hero-search-glass .form-group input::placeholder { color: rgba(255,255,255,0.45) !important; }

/* Chrome/Edge autofill has its own internal background renderer that ignores
   normal CSS (even background + !important) - this is the standard trick to
   defeat it: an absurdly long background-color transition means the browser's
   own autofill tint never has time to visibly paint, and -webkit-text-fill-color
   (not "color") is what actually controls autofilled text color in WebKit/Blink.
   Both the modern standard :autofill and the older -webkit-autofill are
   targeted, since which one a given Chrome/Edge version actually exposes can vary. */
.hero-search-glass .form-group input:-webkit-autofill,
.hero-search-glass .form-group input:-webkit-autofill:hover,
.hero-search-glass .form-group input:-webkit-autofill:focus,
.hero-search-glass .form-group input:-webkit-autofill:active,
.hero-search-glass .form-group input:autofill,
.hero-search-glass .form-group input:autofill:hover,
.hero-search-glass .form-group input:autofill:focus,
.hero-search-glass .form-group input:autofill:active {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(15,23,42,0.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(15,23,42,0.95) inset !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
    caret-color: white !important;
}
.hero-search-glass .form-group input:focus,
.hero-search-glass .form-group select:focus {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--cyan-glow);
    box-shadow: 0 0 0 3px rgba(79,227,255,0.18);
}
/* Text selection (highlighting) inside the input - browsers use their own
   default blue-on-white selection colors unless told otherwise, which would
   otherwise be the ONLY moment the (actually-white) text became readable if
   the background override above were ever fighting something and losing. */
.hero-search-glass .form-group input::selection {
    background: rgba(79,227,255,0.35);
    color: white;
}
.hero-search-glass .location-suggestions { background: #0f1729; border-color: var(--glass-border); }
.hero-search-glass .location-suggestion-item:hover,
.hero-search-glass .location-suggestion-item.active { background: rgba(255,255,255,0.06); }
.hero-search-glass .location-suggestion-name { color: white; }
.hero-search-glass .filter-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
    color: white;
}
.hero-search-glass .filter-btn:hover { border-color: var(--cyan-glow); color: var(--cyan-glow); }
.hero-search-glass .hx-radius-row { border-top-color: rgba(255,255,255,0.14); }
.hero-search-glass .hx-radius-label { color: rgba(255,255,255,0.75); }
.hero-search-glass .hx-radius-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.8); }
.hero-search-glass .hx-radius-pill:hover { border-color: var(--cyan-glow); color: white; }
.hero-search-glass .hx-radius-pill.active { background: var(--cyan-glow); border-color: var(--cyan-glow); color: #062430; }

@media (max-width: 768px) {
    .hero-search-glass { margin: 1.5rem 1rem 0; padding: 1.25rem; }
}

/* Used by the smaller .hero-page hero variant (Auction / Commercial / New
   Projects / Buy / Rent / Search). The homepage .hero below uses its own
   .hero-slide markup instead (clickable slides linking to each featured
   property) - see the rules further down. */
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* Direct-child combinator (>) is important here - the OLD admin-photo
   slideshow puts <img> directly inside .hero-slideshow, but the NEW
   featured-property slideshow (_HeroPropertySlideshow.cshtml) nests its
   <img> two levels deep inside a <a class="hero-slide">. Without the ">",
   this rule would also match those nested images and force them to
   opacity:0 permanently (they'd never get animation-duration/delay, since
   those are only set on the parent <a> - this was a real bug: the property
   photo stayed invisible while its caption, a sibling <span> and NOT an
   <img>, rendered fine on top, making the hero look like a black box with
   a caption floating on it). */
.hero-slideshow > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    animation-name: heroFade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes heroFade {
    0%   { opacity: 0; transform: scale(1.02); }
    4%   { opacity: 1; }
    22%  { opacity: 1; transform: scale(1.14); }
    26%  { opacity: 0; transform: scale(1.16); }
    100% { opacity: 0; }
}
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Clickable slideshow of Featured properties - used by BOTH the
   homepage hero and every .hero-page (Buy/Rent/Search/NewProjects/Auction/
   Commercial) via Views/Shared/_HeroPropertySlideshow.cshtml. Scoped to the
   shared .hero-slideshow container class (not .hero specifically) so it
   works under either hero variant.
   Each slide is a full <a> (not just an <img>) linking straight to that
   property, so a click always goes somewhere sensible. Only the slide
   that's actually visible is clickable at any moment - pointer-events is
   flipped inside the same @keyframes as the opacity fade, so an invisible
   stacked slide never steals a click meant for the one on top. Hovering
   anywhere in the slideshow pauses the whole rotation via animation-play-state,
   so a visitor gets a stable target to click rather than a moving one.
   The photo fills the entire frame (object-fit: cover) - an earlier version
   tried showing the whole uncropped house with a blurred backdrop filling
   the gaps, but the blurred/darkened backdrop could read as plain black
   space on photos with dark edges, which looked broken. A full-bleed cover
   fill is the standard property-portal treatment for exactly this reason -
   it always looks intentional regardless of the photo's content. */
.hero-slideshow .hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    overflow: hidden;
    animation-name: heroSlideFade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.hero-slideshow .hero-slide-fg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.hero-slideshow .hero-slide:hover .hero-slide-fg { transform: scale(1.05); }
.hero-slideshow:hover .hero-slide { animation-play-state: paused; }

/* Only one featured property - stay fully visible, no fade cycle to run. */
.hero-slideshow .hero-slide-single {
    animation: none;
    opacity: 1;
    pointer-events: auto;
}

.hero-slideshow .hero-slide-caption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: min(70%, 340px);
    padding: 10px 16px;
    background: rgba(5,7,12,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-md);
    font-family: var(--font);
    text-align: left;
}
.hero-slideshow .hero-slide-caption strong { font-size: 1.05rem; font-weight: 800; color: white; }
.hero-slideshow .hero-slide-caption span { font-size: 0.82rem; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes heroSlideFade {
    0%   { opacity: 0; pointer-events: none; }
    4%   { opacity: 1; pointer-events: auto; }
    22%  { opacity: 1; pointer-events: auto; }
    26%  { opacity: 0; pointer-events: none; }
    100% { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slideshow .hero-slide { animation: none; opacity: 0; }
    .hero-slideshow .hero-slide:first-child { opacity: 1; pointer-events: auto; }
}

/* Smaller hero variant for listing pages (New Projects / Auction / Commercial) */
.hero-page {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% 0%, var(--void-2) 0%, var(--void) 70%);
}
.hero-page .hero-content { max-width: 640px; }
.hero-page .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--cyan-glow);
    margin-bottom: 0.9rem;
}
.hero-page .hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan-glow);
    box-shadow: 0 0 8px 2px rgba(79,227,255,0.7);
}
.hero-page h1 { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; margin: 0 0 0.7rem; color: white; letter-spacing: -0.01em; }
.hero-page p { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin: 0; }
@media (max-width: 768px) {
    .hero-page { min-height: 440px; padding: 2.5rem 1.25rem; }
    .hero-page h1 { font-size: 2rem; }
    .hero-page p { font-size: 0.95rem; }
}

/* Search box */
.search-container {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.75rem;
    margin: -3.5rem auto 0;
    max-width: 960px;
    position: relative;
    z-index: 10;
}

.search-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.search-tab {
    background: none;
    border: none;
    text-decoration: none;
    padding: 0.65rem 1.1rem;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}
.search-tab.active { color: var(--primary); border-bottom-color: var(--accent); }
.search-tab:hover:not(.active) { color: var(--text-dark); }

.search-fields {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}
.search-fields-inline { margin-bottom: 2.5rem; }
.form-group { display: flex; flex-direction: column; }
.form-group-wide { grid-column: span 1; }

.location-autocomplete-wrap { position: relative; }
.location-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    max-height: 340px;
    overflow-y: auto;
    z-index: 50;
}
.location-suggestions.open { display: block; }
.location-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.7rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.location-suggestion-item:last-child { border-bottom: none; }
.location-suggestion-item:hover,
.location-suggestion-item.active { background: #f7f8fc; }
.location-suggestion-main { display: flex; flex-direction: column; }
.location-suggestion-name { font-size: 0.92rem; font-weight: 600; color: var(--text-dark); }
.location-suggestion-meta { font-size: 0.76rem; color: var(--text-muted); text-transform: capitalize; }
.location-suggestion-count { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.location-suggestion-empty { padding: 0.9rem 1rem; font-size: 0.85rem; color: var(--text-muted); }

.form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-dark);
}

.form-group input,
.form-group select {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-family: var(--font);
    background: var(--bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,106,61,0.15);
}

.btn-search {
    background: var(--accent);
    color: white;
    padding: 0.8rem 1.75rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-search:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-search-inline {
    display: inline-block;
    text-decoration: none;
    background: var(--primary);
    color: white;
    padding: 0.8rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.92rem;
    margin-top: 1rem;
    transition: all 0.2s ease;
}
.btn-search-inline:hover { background: var(--primary-light); transform: translateY(-1px); }
.btn-search-inline.light { background: var(--accent); }
.btn-search-inline.light:hover { background: var(--accent-dark); }

.dark-btn {
    display: inline-block;
    text-decoration: none;
    background: var(--primary);
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 1rem;
}
.dark-btn:hover { background: var(--primary-light); }

/* ============================================================
   Sections & generic layout
   ============================================================ */
.properties-section {
    max-width: var(--max-width);
    margin: 4.5rem auto;
    padding: 0 2rem;
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.section-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: 0;
}
.section-subtitle { color: var(--text-muted); margin: 0.35rem 0 2rem; font-size: 0.98rem; }

.view-all-link {
    text-decoration: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
}
.view-all-link:hover { color: var(--accent-dark); }

.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.75rem; }

/* ============================================================
   Property cards (grid used on Home / Buy / Rent / Sold / Search)
   ============================================================ */
.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.75rem;
}

.property-card {
    display: block;
    text-decoration: none;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.25s ease;
}
.property-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
}

.property-image {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: var(--bg-light);
}
.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.property-card:hover .property-image img { transform: scale(1.06); }

.property-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background: var(--accent);
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 2;
}
.property-badge.badge-auction { background: var(--danger); }
.property-badge.badge-neutral { background: var(--primary); }
.property-badge.badge-sold { background: #333; }

/* AdSense ad slot wrapper - keeps ad blocks visually consistent with the rest
   of the results grid/sidebar and clearly labelled as sponsored content. */
.ad-slot {
    grid-column: 1 / -1;
    background: var(--bg-light);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    margin: 0.25rem 0;
}
.ad-slot-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.property-info { padding: 1.25rem 1.4rem 1.4rem; }

.property-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
}

.property-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-address {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.property-developer {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    margin: -0.5rem 0 0.7rem;
}

.property-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-body);
}
.feature { display: flex; align-items: center; gap: 0.3rem; font-weight: 500; }

.property-listed-date {
    margin-top: 0.7rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================
   3D tilt effect for property cards - subtle perspective tilt
   that follows the cursor, powered by wwwroot/js/tilt-cards.js.
   Falls back to the plain hover lift (above) with no JS/on touch.
   ============================================================ */
.tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
}
.tilt-card.tilt-active {
    transition: transform 0.1s ease-out;
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.tilt-card .property-image {
    transform: translateZ(0);
}

/* ============================================================
   Generic "card" component — used by Auction / Commercial /
   NewProjects / BuySell / related-properties listing grids
   (these views only style .photo/.tag inline; the wrapper card
   chrome lives here so it matches .property-card visually)
   ============================================================ */
.results-grid,
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.75rem;
}

.card {
    display: block;
    text-decoration: none;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.25s ease;
    color: inherit;
}
.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
}
.card .photo { background-color: var(--bg-light); }
.card-body { padding: 1.25rem 1.4rem 1.4rem; }
.card-body .price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
}
.card-body h3 {
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.card-body p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.9rem; }
.card-body .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-body);
    font-weight: 500;
}

.no-results {
    text-align: center;
    padding: 5rem 1.5rem;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    margin: 2.5rem 0;
}
.no-results h2 { font-size: 1.6rem; margin-bottom: 0.75rem; }
.no-results p { color: var(--text-muted); }
.no-results a { color: var(--accent); font-weight: 700; }

/* Generic page header banner used by Auction/Commercial/NewProjects */
.page-header {
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    text-align: center;
}
.page-header h1 { color: white; font-size: 2rem; margin-bottom: 0.6rem; }
.page-header p { color: rgba(255,255,255,0.82); }
.page-header strong { color: white; }

/* ============================================================
   Map CTA / popular areas / list CTA (homepage)
   ============================================================ */
.map-cta-section { margin-top: 0; }
.map-cta {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.map-cta-text { max-width: 520px; }
.map-cta-text p { color: var(--text-muted); margin-top: 0.5rem; }
.map-cta #homeMapToggleBtn { flex-shrink: 0; cursor: pointer; border: none; }

.home-map-wrap { margin-top: 1.5rem; }
.home-map {
    width: 100%;
    height: 60vh;
    min-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    z-index: 1;
    position: relative;
    background: #eef1f5;
}
.home-map-fullbtn {
    display: inline-block;
    margin-top: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}
.home-map-fullbtn:hover { text-decoration: underline; }

.popular-areas-section { margin-top: 4rem; }
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.1rem;
}
.area-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}
.area-card-flag {
    width: 42px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(16, 21, 31, 0.18);
}
.area-card-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.area-card strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-card span { color: var(--text-muted); font-size: 0.82rem; }
.area-card:hover .area-card-body span { color: var(--accent); }

/* Extra depth for the Popular areas tilt (.tilt-card, powered by
   wwwroot/js/tilt-cards.js) - the flag icon floats forward off the card
   surface while tilting, on top of the generic 3D rotation, so this section
   reads as more overtly "3D" than a plain hover lift. */
.area-card.tilt-card .area-card-flag { transition: transform 0.15s ease-out; }
.area-card.tilt-card.tilt-active { border-color: var(--cyan-glow); box-shadow: 0 14px 34px rgba(79,227,255,0.22), var(--shadow-lg); }
.area-card.tilt-card.tilt-active .area-card-flag { transform: translateZ(26px) scale(1.08); }

/* ============================================================
   "3D pop" cards - Popular areas, Properties near you, Latest
   news and Local agents all sit visibly raised off the page at
   rest, then lift further and deepen their shadow on hover, so
   every box in these sections reads as a distinct floating card.
   ============================================================ */
.pop-3d {
    box-shadow: var(--shadow-pop-rest);
    transform: translateY(0) scale(1);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    will-change: transform;
}
.pop-3d:hover,
.pop-3d:focus-visible {
    box-shadow: var(--shadow-pop-hover);
    transform: translateY(-6px) scale(1.015);
    border-color: var(--accent);
}
.pop-3d:active { transform: translateY(-2px) scale(1.005); }

/* ============================================================
   Latest property news
   ============================================================ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}
.news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.25s ease;
}

.news-image {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-light);
}
.news-body { padding: 1.1rem 1.25rem 1.3rem; }
.news-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.news-body h3 {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.6rem;
    color: var(--text-dark);
}
.news-read { font-size: 0.78rem; color: var(--text-muted); }

.list-cta-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    padding: 4rem 2rem;
    margin-top: 4rem;
    text-align: center;
    color: white;
}
.list-cta { max-width: 560px; margin: 0 auto; }
.list-cta h2 { color: white; font-size: 2rem; margin-bottom: 0.6rem; }
.list-cta p { color: rgba(255,255,255,0.8); margin-bottom: 0.5rem; }

/* ============================================================
   Agents grid
   ============================================================ */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.75rem;
}
.agent-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all 0.25s ease;
}
.agent-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.agent-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.agent-name { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); }
.agent-photo {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
}
.agent-stars { margin-bottom: 0.4rem; }
.agent-stars .star { color: var(--border-color); font-size: 0.95rem; }
.agent-stars .star.filled { color: var(--warning); }
.agent-role { font-size: 0.85rem; color: var(--text-muted); margin: 0.2rem 0 0.4rem; }
.agent-location { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.1rem; }
.btn-contact-agent {
    width: 100%;
    padding: 0.65rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-contact-agent:hover { background: var(--primary-light); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--primary);
    color: #ffffff;
    padding: 3.5rem 2rem 2rem;
    margin-top: 4rem;
}
.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.footer-brand .logo { color: white; font-size: 1.4rem; }
.footer-brand p { color: rgba(255,255,255,0.65); font-size: 0.88rem; margin-top: 0.75rem; max-width: 260px; }
.footer-section h3 { margin-bottom: 1rem; font-size: 0.95rem; color: white; }
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 0.65rem; }
.footer-section a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}
.footer-section a:hover { color: white; }
.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.75rem;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

/* AdSense slot sitting inside the dark footer, above the copyright line -
   overrides .ad-slot's light-theme colours so it reads correctly on --primary. */
.footer-ad-slot {
    max-width: var(--max-width);
    margin: 0 auto 2rem;
}
.footer-ad-slot .ad-slot {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
}
.footer-ad-slot .ad-slot-label { color: rgba(255, 255, 255, 0.5); }
.footer-ad-slot .ad-slot-placeholder-box { color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
    .topbar-nav { position: static; }
    .nav-toggle { display: flex; }
    .topbar-nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--bg-white);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 2rem;
        gap: 0.25rem;
        box-shadow: var(--shadow-md);
    }
    .topbar-nav.open { display: flex; }
    .topbar-nav > a, .nav-dropdown > a { padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); }
    .nav-dropdown-menu { position: static; transform: none; box-shadow: none; border: none; display: block; padding-left: 1rem; }
    .nav-dropdown:hover .nav-dropdown-menu { display: block; }
    .actions .signin-link { display: none; }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .topbar { padding: 0 1.25rem; }
    .hero { padding: 3.5rem 1.25rem 6rem; }
    .hero h1 { font-size: 2.1rem; }
    .hero p { font-size: 1rem; }
    .search-container { margin: -3rem 1rem 0; padding: 1.25rem; }
    .search-fields { grid-template-columns: 1fr; }
    .btn-search { width: 100%; }
    .properties-section { padding: 0 1.25rem; margin: 3rem auto; }
    .property-grid, .results-grid, .agent-grid { grid-template-columns: 1fr; }
    .section-heading { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .footer-content { grid-template-columns: 1fr; }
    .map-cta { padding: 2rem 1.5rem; }
}

/* ============================================================
   Shared property-map pin / legend / popup styles
   (used by the Map Explorer page and the homepage's inline map)
   ============================================================ */
.map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-muted, #666);
    z-index: 2;
    background: #eef1f5;
}
.map-pin-inner {
    width: 34px; height: 34px;
    border: 3px solid white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: box-shadow 0.2s ease;
}
.map-pin-inner span {
    display: block;
    transform: rotate(45deg);
    font-size: 15px;
}
.map-legend-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--bg-light, #f6f8fb);
    border-radius: var(--radius-md, 10px);
}
.map-legend-title { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
.map-legend-items { display: flex; flex-wrap: wrap; gap: 16px; }
.map-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.88rem; color: var(--text-body); }
.map-legend-item input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.map-legend-swatch {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: white;
}
.map-legend-label { font-weight: 600; }
.map-popup { width: 220px; }
.map-popup img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px 6px 0 0; }
.map-popup-body { padding: 10px 4px 2px; }
.map-popup-price { font-weight: 800; font-size: 1rem; color: var(--text-dark); }
.map-popup-title { font-size: 0.85rem; font-weight: 600; margin: 2px 0; }
.map-popup-loc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.map-popup-btn {
    display: block;
    text-align: center;
    background: var(--accent);
    color: white !important;
    text-decoration: none;
    padding: 6px 0;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
}
.map-popup-btn:hover { background: var(--accent-dark); }

/* ---- Night view theme (toggled by the visitor, remembered via localStorage -
   see wwwroot/js/property-map.js). Dark CartoDB basemap + glowing pins. ---- */
.map-night-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.map-night-toggle:hover { border-color: var(--primary); color: var(--primary); }
.property-map.map-night .map-pin-inner {
    box-shadow: 0 0 14px 3px var(--glow, rgba(79,227,255,0.6)), 0 3px 8px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.85);
}
.property-map.map-night .leaflet-popup-content-wrapper,
.property-map.map-night .leaflet-popup-tip {
    background: #0f1729;
    color: rgba(255,255,255,0.9);
}
.property-map.map-night .map-popup-price,
.property-map.map-night .map-popup-title { color: white; }
.property-map.map-night .map-popup-loc { color: rgba(255,255,255,0.55); }
.property-map.map-night .leaflet-control-zoom a {
    background: #0f1729;
    color: white;
    border-color: rgba(255,255,255,0.15);
}
.property-map.map-night .map-loading { background: #05070c; color: rgba(255,255,255,0.6); }

/* Compact floating variant of the night toggle, used inside the smaller
   split-view map (Buy/Rent/Search list pages) where there's no legend bar
   to dock it in - see Views/Shared/_SplitResults.cshtml. */
.split-map-night-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 401; /* above Leaflet's own panes (max ~400) */
}
.split-map-night-toggle .map-night-toggle {
    box-shadow: var(--shadow-md);
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
}

/* ============================================================
   Static content pages (About Us / Contact Us / Privacy Policy)
   ============================================================ */
.static-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}
.static-page h2 {
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 2rem 0 0.75rem;
}
.static-page h2:first-child { margin-top: 0; }
.static-page p {
    color: var(--text-body);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.static-page ul {
    margin: 0 0 1rem 1.25rem;
    color: var(--text-body);
    line-height: 1.75;
}
.static-page li { margin-bottom: 0.4rem; }
.static-page .updated-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}
.contact-card {
    background: var(--bg-light, #f6f8fb);
    border-radius: var(--radius-md, 10px);
    padding: 1.5rem;
    text-align: center;
}
.contact-card .contact-icon { font-size: 1.8rem; margin-bottom: 0.5rem; display: block; }
.contact-card strong { display: block; color: var(--text-dark); margin-bottom: 0.3rem; }
.contact-card a { color: var(--accent); text-decoration: none; font-weight: 600; }
.contact-card a:hover { text-decoration: underline; }
.contact-form {
    background: var(--bg-light, #f6f8fb);
    border-radius: var(--radius-lg, 14px);
    padding: 2rem;
}
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text-dark); margin-bottom: 0.4rem; }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border-color, #ddd);
    border-radius: 8px; font-family: inherit; font-size: 0.95rem; margin-bottom: 1rem;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
@media (max-width: 600px) {
    .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Shared booking.com-style search bar (_SearchBar.cshtml)
   Location + km-radius pills + Filters modal trigger, used on
   Home, Search, Map, Buy, Rent, NewProjects, Auction, Commercial.
   ============================================================ */
.hx-search-bar {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.75rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
    position: relative;
    z-index: 10;
}
.hx-search-bar .hx-search-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: end;
}
.hx-search-bar .form-group-wide { min-width: 0; }

.hx-radius-row {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.7rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-color);
}
.hx-radius-row.open { display: flex; }
.hx-radius-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-right: 0.2rem;
}
.hx-radius-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hx-radius-pill {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-body);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.hx-radius-pill:hover { border-color: var(--accent); color: var(--text-dark); }
.hx-radius-pill.active { background: var(--accent); border-color: var(--accent); color: white; }

/* Filters button + modal (_FilterModal.cshtml) */
.filter-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    height: fit-content;
    transition: all 0.15s ease;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }

.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 21, 31, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.filter-overlay.open { display: flex; }
.filter-modal {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.filter-modal-header h3 { font-size: 1.15rem; color: var(--text-dark); }
.filter-modal-header button {
    background: none; border: none; font-size: 1.4rem; line-height: 1;
    cursor: pointer; color: var(--text-muted);
}
.filter-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; }
.filter-section { margin-bottom: 1.5rem; }
.filter-section:last-child { margin-bottom: 0; }
.filter-section h4 { font-size: 0.88rem; color: var(--text-dark); margin-bottom: 0.6rem; }
.filter-section select,
.filter-section input[type="text"],
.filter-section input[type="number"] {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: var(--font);
    width: 100%;
}
.filter-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.filter-grid-2 label { display: block; font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem 1rem;
}
.checkbox-grid label,
.radio-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--text-body);
    cursor: pointer;
}
.radio-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.filter-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}
.clear-link {
    background: none; border: none; color: var(--text-muted);
    font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: underline;
}
.filter-modal-footer .btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.filter-modal-footer .btn-primary:hover { background: var(--accent-dark); }

@media (max-width: 768px) {
    .hx-search-bar { padding: 1.1rem; margin: 0 1rem 2rem; max-width: none; }
    .hx-search-bar .hx-search-row { grid-template-columns: 1fr; }
    .filter-btn, .hx-search-bar .btn-search { width: 100%; }
    .checkbox-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Split list + map results layout (booking.com "map opened" view)
   used by Search, Map, Buy, Rent, NewProjects, Auction, Commercial
   ============================================================ */
.split-results-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    padding: 0 0.25rem;
}
.split-results-heading h2 { font-size: 1.3rem; color: var(--text-dark); }
.split-results-heading .split-results-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.2rem; }
.split-view-toggle {
    display: none;
    gap: 0.4rem;
    background: var(--bg-light);
    border-radius: 999px;
    padding: 0.25rem;
}
.split-view-toggle button {
    border: none;
    background: none;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}
.split-view-toggle button.active { background: var(--primary); color: white; }

.split-results {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto 4rem;
    padding: 0 2rem;
    align-items: start;
}
.split-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 0.5rem;
    align-content: start;
}
.split-list .property-card { min-width: 0; }
.split-list .property-image { height: 150px; }
.split-map-wrap {
    position: sticky;
    top: 90px;
    height: calc(100vh - 140px);
    min-height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #eef1f5;
}
.split-map-wrap .property-map { height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
.split-map-wrap .map-legend-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; margin-top: 0; }

@media (max-width: 1080px) {
    .split-results { grid-template-columns: 1fr; padding: 0 1.25rem; }
    .split-view-toggle { display: inline-flex; }
    .split-map-wrap { position: static; height: 420px; }
    .split-list, .split-map-wrap { display: none; }
    .split-results.show-list .split-list { display: grid; }
    .split-results.show-map .split-map-wrap { display: block; }
}

@media (max-width: 600px) {
    .split-list { grid-template-columns: 1fr; }
}

/* Booking.com-style pulsing "you searched here" marker */
.map-center-pin-inner {
    width: 16px; height: 16px;
    background: #1a73e8;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    position: absolute; top: 3px; left: 3px;
}
.map-center-pin-pulse {
    width: 22px; height: 22px;
    background: rgba(26, 115, 232, 0.35);
    border-radius: 50%;
    position: absolute; top: 0; left: 0;
    animation: mapPinPulse 1.8s ease-out infinite;
}
@keyframes mapPinPulse {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ============================================================
   AdSense - placeholder preview box (inline slots)
   Shown instead of a live ad until AdSense:Enabled + PublisherId
   + the named slot ID are all filled in, so placement can be
   reviewed ahead of AdSense approval.
   ============================================================ */
.ad-slot-placeholder-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 90px;
    border-radius: var(--radius-sm);
    background: repeating-linear-gradient(45deg, #EDF0F5, #EDF0F5 10px, #E4E8EF 10px, #E4E8EF 20px);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
}
.ad-slot-placeholder-box small { font-weight: 500; font-size: 0.72rem; }

/* ============================================================
   AdSense - side-rail column (sitewide, every page)
   The page body is split into a main content column + a narrow
   rail column that sits BESIDE it - never on top of it. Only
   shown on very wide screens so it never squeezes the normal
   layout; below that width the rail simply doesn't render.
   ============================================================ */
.page-shell {
    display: block;
}
.page-main { min-width: 0; }
.page-rail { display: none; }

@media (min-width: 1680px) {
    .page-shell {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        max-width: 1720px;
        margin: 0 auto;
    }
    .page-main { flex: 1; min-width: 0; }
    .page-rail {
        display: block;
        flex-shrink: 0;
        width: 160px;
        position: sticky;
        top: 90px;
    }
    .page-rail-ad {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: 0.6rem 0.6rem 0.75rem;
    }
    .page-rail-ad-close {
        align-self: flex-end;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background: var(--bg-light);
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1;
        cursor: pointer;
    }
    .page-rail-ad-close:hover { background: var(--border-color); color: var(--text-dark); }
    .page-rail-ad-box {
        width: 160px;
        height: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        text-align: center;
        border-radius: var(--radius-sm);
        background: repeating-linear-gradient(45deg, #EDF0F5, #EDF0F5 10px, #E4E8EF 10px, #E4E8EF 20px);
        color: var(--text-muted);
        font-weight: 700;
        font-size: 0.85rem;
    }
    .page-rail-ad-box small { font-weight: 500; font-size: 0.72rem; line-height: 1.4; }
}

/* ============================================================
   Local Agents - homepage horizontal carousel
   (mirrors the "brokers around you" style row: circular photo,
   name, role, location, scrolls horizontally with a next arrow)
   ============================================================ */
.local-agents-section { margin-top: 4rem; }
.local-agents-scroll-wrap { position: relative; }
.local-agents-track {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.5rem 0.25rem 0.25rem;
    scrollbar-width: none;
}
.local-agents-track::-webkit-scrollbar { display: none; }
.local-agent-card {
    scroll-snap-align: start;
    flex: 0 0 200px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.local-agent-photo, .local-agent-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 0.85rem;
    object-fit: cover;
}
.local-agent-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    font-weight: 800;
    font-size: 1.3rem;
}
.local-agent-name { font-size: 0.98rem; font-weight: 700; color: var(--text-dark); }
.local-agent-role { font-size: 0.82rem; color: var(--text-muted); margin: 0.15rem 0 0.6rem; }
.local-agent-location { font-size: 0.78rem; color: var(--text-muted); }
.local-agents-next {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    box-shadow: var(--shadow-md);
    color: var(--text-dark);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.local-agents-next:hover { background: var(--bg-light); }
@media (max-width: 768px) {
    .local-agents-next { display: none; }
}