/* =============================================================================
   The Rivlin Group — Main Stylesheet
   Brand: Approachable Luxury | Las Vegas Real Estate
   Fonts: Montserrat (headlines) · Source Sans 3 (body)
   ============================================================================= */

/* =============================================================================
   1. Custom Properties (Design Tokens)
   ============================================================================= */

:root {
    /* Brand colors */
    --color-navy:       #282460;
    --color-blue:       #1B81C1;
    --color-blue-light: #CEE8F2;
    --color-cyan:       #06B7D8;
    --color-orange:     #FE8100;
    --color-steel:      #87A2B6;
    --color-yellow:     #FFEB12;

    /* Neutrals */
    --color-white:      #ffffff;
    --color-off-white:  #F8F9FA;
    --color-gray-100:   #F3F4F6;
    --color-gray-200:   #E5E7EB;
    --color-gray-400:   #9CA3AF;
    --color-gray-600:   #4B5563;
    --color-gray-900:   #111827;

    /* Typography */
    --font-headline: 'Montserrat', system-ui, sans-serif;
    --font-body:     'Source Sans 3', system-ui, sans-serif;

    /* Font sizes (fluid) */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --container-max:    1280px;
    --container-pad:    clamp(1rem, 4vw, 2rem);
    --header-height:    72px;
    --border-radius:    6px;
    --border-radius-lg: 12px;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
    --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg:  0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
    --shadow-xl:  0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);

    /* Transitions */
    --transition: 200ms ease;
    --transition-slow: 350ms ease;
}


/* Font-display swap — fallback in case Google Fonts CSS doesn't set it */
@font-face { font-family: 'Montserrat'; font-display: swap; src: local('Montserrat'); }
@font-face { font-family: 'Source Sans 3'; font-display: swap; src: local('Source Sans 3'); }

/* =============================================================================
   2. Reset & Base
   ============================================================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-gray-900);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-navy); }
a:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: 2px; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-navy);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  3vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.screen-reader-text:focus {
    clip: auto; height: auto; width: auto; overflow: visible;
    background: var(--color-navy); color: var(--color-white);
    padding: var(--space-2) var(--space-4); z-index: 100000; top: 0; left: 0;
}


/* =============================================================================
   3. Layout Utilities
   ============================================================================= */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-20); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: clamp(var(--space-20), 8vw, var(--space-24)); }

.section--navy  { background: var(--color-navy); color: var(--color-white); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--color-white); }

.section--light { background: var(--color-gray-100); }
.section--blue-light { background: var(--color-blue-light); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.flex { display: flex; gap: var(--space-4); }
.flex--center { align-items: center; }
.flex--between { justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }

.text-center { text-align: center; }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.font-bold { font-weight: 700; }
.font-headline { font-family: var(--font-headline); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* =============================================================================
   4. Buttons
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--color-blue);
    color: var(--color-white);
    border-color: var(--color-blue);
}
.btn--primary:hover {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.btn--secondary {
    background: transparent;
    color: var(--color-blue);
    border-color: var(--color-blue);
}
.btn--secondary:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

.btn--outline {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    color: #1B2A4A;
    border: 2px solid #1B2A4A;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.btn--outline:hover {
    background: #1B2A4A;
    color: #ffffff;
}

.btn--ghost {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn--ghost:hover {
    background: var(--color-white);
    color: var(--color-navy);
}

.btn--orange {
    background: var(--color-orange);
    color: var(--color-white);
    border-color: var(--color-orange);
}
.btn--orange:hover { background: #e07400; border-color: #e07400; color: var(--color-white); }

.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--full { width: 100%; }


/* =============================================================================
   5. Site Header
   ============================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    height: var(--header-height);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 100%;
}

.site-header__logo { flex-shrink: 0; display: flex; align-items: center; min-width: 160px; }
.site-header__logo img { height: 44px; width: auto; max-width: none; }

/* Agent badge on subdomains */
.site-header__agent-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-left: 2px solid var(--color-gray-200);
    margin-left: var(--space-2);
}
.site-header__agent-thumb {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-blue-light);
}
.site-header__agent-name {
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-navy);
    white-space: nowrap;
}

/* Navigation */
.site-nav { flex: 1; }

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: center;
}

.site-nav__item { position: relative; }

.site-nav__link {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius);
    transition: color var(--transition), background-color var(--transition);
    white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--color-navy);
    background: var(--color-gray-100);
}
.site-nav__item.current-menu-item .site-nav__link {
    color: var(--color-blue);
}

/* Nav dropdown */
.site-nav__link--parent {
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-headline); font-size: var(--text-sm); font-weight: 500;
    color: var(--color-gray-600); padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm); transition: color .15s, background .15s;
    white-space: nowrap;
}
.site-nav__link--parent:hover,
.site-nav__link--parent:focus-visible { color: var(--color-navy); background: var(--color-gray-100); }
.site-nav__link--parent svg { width: 12px; height: 12px; transition: transform .2s; }
.site-nav__item--has-children[data-open] .site-nav__link--parent svg { transform: rotate(180deg); }

.site-nav__submenu {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    padding: var(--space-1) 0; min-width: 220px; z-index: 100;
    list-style: none; margin: 0;
}

/* Dropdown separator */
.site-nav__separator { list-style: none; }
.site-nav__separator-line {
    height: 1px; background: var(--color-gray-200); margin: var(--space-1) var(--space-3);
}
.site-nav__item--has-children[data-open] .site-nav__submenu { display: block; }
/* My Account dropdown — CSS hover trigger (no JS toggle needed) */
.trg-account-dropdown:hover .site-nav__submenu,
.trg-account-dropdown:focus-within .site-nav__submenu { display: block; }

.site-nav__sublink {
    display: block; padding: var(--space-2) var(--space-3);
    font-family: var(--font-headline); font-size: var(--text-sm); font-weight: 500;
    color: var(--color-gray-700); transition: color .15s, background .15s; white-space: nowrap;
}
.site-nav__sublink:hover,
.site-nav__sublink:focus-visible { color: var(--color-navy); background: var(--color-gray-100); }

/* Header CTAs */
.site-header__cta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* Phone — outlined pill button with click-to-call */
.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 2px solid var(--color-navy);
    border-radius: 50px;
    color: var(--color-navy);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.site-header__phone:hover {
    background: var(--color-navy);
    color: #ffffff;
}
.site-header__phone:hover .site-header__phone-icon {
    stroke: #ffffff;
}
.site-header__phone-icon {
    flex-shrink: 0;
    stroke: var(--color-navy);
    transition: stroke 0.2s ease;
}

/* Hamburger */
.site-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--border-radius);
    flex-shrink: 0;
}
.site-header__hamburger:hover { background: var(--color-gray-100); }

.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-navy);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
    transform-origin: center;
}

.site-header__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
    .site-header__hamburger { display: flex; }
    .site-nav { display: none; }
    .site-nav.is-open {
        display: block;
        position: fixed;
        top: var(--header-height);
        left: 0; right: 0; bottom: 0;
        background: var(--color-white);
        overflow-y: auto;
        padding: var(--space-4);
        z-index: 999;
        border-top: 1px solid var(--color-gray-200);
    }
    .site-nav.is-open .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
    .site-nav.is-open .site-nav__link { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); }
    .site-nav.is-open .site-nav__submenu {
        position: static; box-shadow: none; padding: 0 0 0 var(--space-4); min-width: 0;
    }
    .site-nav.is-open .site-nav__item--has-children[data-open] .site-nav__submenu { display: block; }
    .site-nav.is-open .site-nav__sublink { font-size: var(--text-base); padding: var(--space-2) var(--space-4); }
    .site-nav.is-open .site-nav__link--parent { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); width: 100%; text-align: left; }
}

@media (max-width: 768px) {
    .site-header__phone { font-size: 17px; padding: 10px 22px; }
}
@media (max-width: 640px) {
    .site-header__cta { gap: var(--space-2); }
}


/* =============================================================================
   6. Site Footer
   ============================================================================= */

.site-footer { background: var(--color-navy); color: var(--color-white); margin-top: auto; }

.footer-main { padding-block: var(--space-16); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--space-10);
}

@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

.footer-logo-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.50);
    border-radius: 8px;
    padding: 10px 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 0;
}
.footer-logo-pill img { display: block; width: 200px; height: auto; }

.footer-tagline {
    font-family: var(--font-headline);
    font-weight: 500;
    color: var(--color-steel);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.footer-phone,
.footer-email {
    display: block;
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}
.footer-phone:hover, .footer-email:hover { color: var(--color-cyan); }

.footer-social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.footer-social a {
    color: var(--color-steel);
    transition: color var(--transition);
}
.footer-social a:hover { color: var(--color-white); }

.footer-brokerage-logo {
    display: block;
    max-width: 130px;
    margin-top: var(--space-5);
    opacity: 0.8;
}

.footer-heading {
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-steel);
    margin-bottom: var(--space-4);
}

.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a {
    color: rgba(255,255,255,.7);
    font-size: var(--text-sm);
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--color-white); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--space-6);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.footer-legal { font-size: var(--text-xs); color: var(--color-steel); }

.footer-legal-links { display: flex; gap: var(--space-4); }
.footer-legal-links a { font-size: var(--text-xs); color: var(--color-steel); }
.footer-legal-links a:hover { color: var(--color-white); }

.mls-disclaimer {
    font-size: 0.65rem;
    color: rgba(255,255,255,.35);
    line-height: 1.5;
    max-width: 900px;
    margin-bottom: 0;
}


/* =============================================================================
   7. Listing Cards
   ============================================================================= */

.listing-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.listing-card__photo {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-gray-200);
}
.listing-card__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.listing-card:hover .listing-card__photo img { transform: scale(1.04); }

.listing-card__badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    gap: var(--space-2);
    z-index: 1;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge--new     { background: var(--color-orange); color: var(--color-white); }
.badge--reduced { background: var(--color-navy);   color: var(--color-white); }
.badge--pending { background: var(--color-yellow); color: var(--color-gray-900); }
.badge--sold    { background: var(--color-gray-600); color: var(--color-white); }
.badge--open    { background: var(--color-cyan);   color: var(--color-white); }

.listing-card__favorite {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px; height: 36px;
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: background-color var(--transition);
    color: var(--color-gray-400);
}
.listing-card__favorite:hover { background: var(--color-white); color: var(--color-orange); }
.listing-card__favorite.is-favorited { color: #EF4444; }
.listing-card__favorite.is-favorited svg { fill: #EF4444; stroke: #EF4444; }

.listing-card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }

.listing-card__price {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: var(--space-1);
}

.listing-card__address {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.listing-card__stats {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-3);
    margin-top: auto;
    overflow: hidden;
    flex-wrap: wrap;
}

.listing-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
}
.listing-stat__label { font-weight: 400; color: var(--color-gray-400); font-size: var(--text-xs); }

.listing-card__dom {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-steel);
    white-space: nowrap;
}


/* =============================================================================
   8. Area / Neighborhood Cards
   ============================================================================= */

.area-card {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.area-card__photo {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.area-card:hover .area-card__photo { transform: scale(1.06); }

.area-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(40,36,96,.85) 0%, rgba(40,36,96,.1) 60%, transparent 100%);
    transition: background var(--transition);
}
.area-card:hover .area-card__overlay { background: linear-gradient(to top, rgba(40,36,96,.92) 0%, rgba(40,36,96,.2) 60%, transparent 100%); }

.area-card__content {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    padding: var(--space-5);
    color: var(--color-white);
}

.area-card__name {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.area-card__stats {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.75);
}


/* =============================================================================
   9. Section Headings
   ============================================================================= */

.section-header { margin-bottom: var(--space-10); }
.section-header--center { text-align: center; }

.section-label {
    display: inline-block;
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-blue);
    margin-bottom: var(--space-2);
}

.section-title { margin-bottom: var(--space-3); }

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 56ch;
}
.section-header--center .section-subtitle { margin-inline: auto; }


/* =============================================================================
   10. Search Bar
   ============================================================================= */

.search-bar {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-3);
    box-shadow: var(--shadow-xl);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.search-bar__input {
    flex: 1;
    min-width: 220px;
    border: none;
    outline: none;
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    color: var(--color-gray-900);
    background: transparent;
}
.search-bar__input::placeholder { color: var(--color-gray-400); }

.search-bar__divider {
    width: 1px;
    height: 28px;
    background: var(--color-gray-200);
    flex-shrink: 0;
}

.search-bar select {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}



/* =============================================================================
   11. Stats / Proof Bar
   ============================================================================= */

.stats-bar { background: var(--color-navy); padding-block: var(--space-12); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8);
    text-align: center;
}

.stat-item__number {
    font-family: var(--font-headline);
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: 800;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-item__label {
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-steel);
}


/* =============================================================================
   12. Forms
   ============================================================================= */

.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: var(--space-2);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-size: var(--text-base);
    color: var(--color-gray-900);
    background: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27,129,193,.15);
}
.form-control::placeholder { color: var(--color-gray-400); }

.form-control--select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); }


/* =============================================================================
   13. Modal (Registration Gate)
   ============================================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}
.modal-overlay.is-open { opacity: 1; pointer-events: all; }

.modal-box {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform var(--transition-slow);
    position: relative;
}
.modal-overlay.is-open .modal-box { transform: translateY(0); }

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-600);
    padding: var(--space-1);
    border-radius: var(--border-radius);
    transition: color var(--transition);
}
.modal-close:hover { color: var(--color-gray-900); }

.modal-title {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-2);
}
.modal-subtitle {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.modal-form .form-group {
    margin-bottom: var(--space-4);
}
.modal-form .form-group label {
    display: block;
    font-weight: 600;
    font-family: var(--font-headline);
    color: var(--color-navy);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}
.modal-form .form-group input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.modal-form .form-group input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27,129,193,.15);
}

.modal-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.modal-error {
    color: #dc2626;
    font-size: var(--text-sm);
    min-height: 1.2em;
    margin-bottom: var(--space-3);
}

.modal-legal {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: var(--space-4);
}
.modal-legal a { color: var(--color-blue); text-decoration: underline; }


/* =============================================================================
   14. Utility — Misc
   ============================================================================= */

.price-display {
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--color-navy);
}

.divider {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin-block: var(--space-8);
}

.tag {
    display: inline-flex;
    align-items: center;
    background: var(--color-blue-light);
    color: var(--color-navy);
    border-radius: 100px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font-headline);
}

.notice {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.notice--info    { background: var(--color-blue-light); color: var(--color-navy); }
.notice--success { background: #D1FAE5; color: #065F46; }
.notice--error   { background: #FEE2E2; color: #991B1B; }

/* Listing grid (homepage / generic — search page overrides in Section 23) */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
@media (max-width: 1199px) { .listings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .listings-grid { grid-template-columns: 1fr; } }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-10);
}
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--border-radius);
    border: 1.5px solid var(--color-gray-200);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.page-numbers:hover, .page-numbers.current {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: var(--color-blue-light);
    text-decoration: none;
}


/* =============================================================================
   15. Hero Section
   ============================================================================= */

.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    /* Individual properties — never use shorthand here or it resets size/position */
    background-color: var(--color-navy);
    /* --hero-bg is set via inline style by PHP; gradient is the fallback */
    background-image: var(--hero-bg, linear-gradient(140deg, #1a1650 0%, #282460 45%, #1B5E8A 100%));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28, 24, 80, 0.72) 0%,
        rgba(28, 24, 80, 0.55) 50%,
        rgba(28, 24, 80, 0.70) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-20);
    text-align: center;
}

.hero__label {
    color: var(--color-cyan);
    margin-bottom: var(--space-3);
}

.hero__title {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}

.hero__subtitle {
    font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
    color: rgba(255, 255, 255, .82);
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

/* Hero Search Bar */
.hero-search { max-width: 760px; margin-inline: auto; }

.hero-search__bar {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
    align-items: center;
}

.search-bar__icon {
    flex-shrink: 0;
    color: var(--color-gray-400);
}

.search-bar__select {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-family: var(--font-body);
    white-space: nowrap;
}

.search-bar__submit {
    flex-shrink: 0;
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition);
    white-space: nowrap;
}
.search-bar__submit:hover { background: var(--color-navy); transform: translateY(-1px); }

/* Quick links below search bar */
.hero__quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-6);
}

.hero__quick-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .55);
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 0.7rem;
}

.hero__quick-links a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    padding: var(--space-1) var(--space-3);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.hero__quick-links a:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .5);
    color: var(--color-white);
    text-decoration: none;
}

@media (max-width: 768px) {
    .hero { min-height: 75vh; }
    .hero__content { padding-block: var(--space-16); }
    .search-bar__select,
    .search-bar__divider { display: none; }
    .search-bar__submit { padding: var(--space-3) var(--space-5); }
}


/* =============================================================================
   16. Listing Card — Photo Placeholder & Stub State
   ============================================================================= */

.listing-card__photo-link { display: block; }

.listing-card__photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
    color: var(--color-gray-400);
}

.listing-card__price-link { display: block; text-decoration: none; }
.listing-card__price-link:hover .listing-card__price { color: var(--color-blue); }

.listing-card__city { color: var(--color-gray-600); }
.listing-card__sub  { color: var(--color-gray-400); font-size: var(--text-xs); }

.badge--pool { background: var(--color-blue-light); color: var(--color-navy); }

/* Stub state — mute the card slightly */
.listing-card--stub { opacity: .9; }
.listing-card--stub .listing-card__photo-link { cursor: default; pointer-events: none; }
.listing-card--stub .listing-card__price-link  { cursor: default; pointer-events: none; }

.listing-card__stub-note {
    font-size: 0.65rem;
    color: var(--color-gray-400);
    text-align: center;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-gray-100);
    margin-top: var(--space-2);
}


/* =============================================================================
   17. Area Cards Grid (Homepage)
   ============================================================================= */

.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1024px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .areas-grid { grid-template-columns: 1fr; } }

/* Gradient placeholder when area photo not yet uploaded */
.area-card__photo--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(
        135deg,
        hsl(var(--area-hue, 210deg) 45% 28%) 0%,
        hsl(var(--area-hue, 210deg) 40% 45%) 100%
    );
}


/* =============================================================================
   18. Reviews Section
   ============================================================================= */

.reviews-section { background: var(--color-white); }

.reviews-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.reviews-stars { display: flex; gap: 3px; }

.reviews-rating-text {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
    background: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border: 1px solid var(--color-gray-200);
    transition: box-shadow var(--transition);
}
.review-card:hover { box-shadow: var(--shadow-md); }

.review-card__stars { display: flex; gap: 2px; }

.review-card__text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-gray-900);
    flex: 1;
    font-style: italic;
}

.review-card__footer { margin-top: auto; }

.review-card__author {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-navy);
    margin-bottom: var(--space-1);
}

.review-card__meta {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

.review-card__source {
    font-weight: 600;
    color: var(--color-blue);
}


/* =============================================================================
   19. Seller CTA Section
   ============================================================================= */

.seller-cta { background: var(--color-navy); }

.seller-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

@media (max-width: 900px) {
    .seller-cta__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

.seller-cta__heading {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    color: var(--color-white);
    margin-bottom: var(--space-5);
    line-height: 1.2;
}

.seller-cta__body {
    color: rgba(255, 255, 255, .80);
    font-size: var(--text-lg);
    line-height: 1.65;
    margin-bottom: var(--space-8);
    max-width: 44ch;
}

.seller-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.seller-cta__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-top: var(--space-4);
}

.seller-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.seller-feature__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-cyan);
}

.seller-feature__title {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-1);
}

.seller-feature__desc {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .65);
    line-height: 1.55;
    margin: 0;
}


/* =============================================================================
   20. Team Section
   ============================================================================= */

.team-section { background: var(--color-gray-100); }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--space-6);
    justify-content: center;
}

.team-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.team-card__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-blue-light);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.team-card__photo-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
    color: var(--color-white);
    font-family: var(--font-headline);
    font-size: var(--text-3xl);
    font-weight: 800;
}

.team-card__body {
    padding: var(--space-5) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.team-card__name {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-navy);
}

.team-card__title {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.team-card__phone {
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-blue);
    display: block;
}
.team-card__phone:hover { color: var(--color-navy); }

.team-card__profile { margin-top: var(--space-2); }


/* =============================================================================
   21. Deal Intelligence — Value Score Badges (Phase 2 feature stub)
   Badges are hidden by default. Adding .deal-scores-enabled to <body>
   activates them when TRG_DEAL_SCORE_ENABLED is true in wp-config.php.
   ============================================================================= */

.trg-deal-badge {
    display: none; /* hidden until feature flag activates */
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px var(--space-2);
    border-radius: var(--border-radius);
    white-space: nowrap;
}

/* Activate badges when feature flag is on */
.deal-scores-enabled .trg-deal-badge { display: inline-flex; }

.trg-deal-smoking {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #6EE7B7;
}
.trg-deal-good {
    background: var(--color-blue-light);
    color: #1E40AF;
    border: 1px solid #93C5FD;
}
.trg-deal-fair {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
}
.trg-deal-above {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
}

/* Disclaimer modal for opt-in (hidden until triggered) */
.deal-score-disclaimer {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.deal-score-disclaimer.is-open { display: flex; }
.deal-score-disclaimer__box {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-xl);
}

/* =============================================================================
   23. Search Results Page
   ============================================================================= */

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */

.breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}
.breadcrumbs li:not(:last-child)::after {
    content: '\203A';
    margin-left: var(--space-2);
    color: var(--color-gray-400);
}
.breadcrumbs a { color: var(--color-blue); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--color-gray-900); font-weight: 600; }

/* ── Breadcrumbs on navy .page-identity background ─────────────────── */
.page-identity .breadcrumbs ol {
    color: rgba(255, 255, 255, 0.75);
}
.page-identity .breadcrumbs a {
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
}
.page-identity .breadcrumbs a:hover {
    color: var(--color-white);
    text-decoration: underline;
}
.page-identity .breadcrumbs li:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.45);
}
.page-identity .breadcrumbs [aria-current] {
    color: var(--color-white);
    font-weight: 600;
}

/* ── Search Header ────────────────────────────────────────────────────────── */

.search-header {
    padding-block: var(--space-4) var(--space-3);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}
.search-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.search-header__title {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
    line-height: 1.2;
}
.search-header__count {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: var(--space-1) 0 0;
}
.search-header__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ── Filter Bar ───────────────────────────────────────────────────────────── */

.filter-bar {
    position: sticky;
    top: var(--header-height);
    z-index: 90;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 0;
}
.filter-bar__form {
    padding: var(--space-2) 0;
}
.filter-bar__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}
.filter-bar__group { position: relative; }

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-900);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    min-width: 100px;
}
.filter-select:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
}
.filter-select--active {
    border-color: var(--color-blue);
    background-color: var(--color-blue-light);
}

.filter-bar__all-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 0.5rem 0.85rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
    position: relative;
}
.filter-bar__all-filters-btn:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-900);
}
.filter-bar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-navy);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.filter-bar__submit {
    margin-left: auto;
    white-space: nowrap;
}

/* ── Filter Modal ─────────────────────────────────────────────────────────── */

.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}
.filter-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

.filter-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.filter-modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.filter-modal.is-open .filter-modal__panel {
    transform: translateX(0);
}

.filter-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}
.filter-modal__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}
.filter-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-500);
    padding: 4px;
    border-radius: var(--border-radius);
    transition: color 0.15s ease;
}
.filter-modal__close:hover { color: var(--color-gray-900); }

.filter-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

.filter-modal__section {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}
.filter-modal__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.filter-modal__section-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3) 0;
}

.filter-modal__row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.filter-modal__row:last-child { margin-bottom: 0; }

.filter-modal__field {
    flex: 1;
}
.filter-modal__field label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.filter-modal__field select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 0.55rem 2rem 0.55rem 0.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-900);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
.filter-modal__field select:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
}

.filter-modal__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-modal__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.filter-modal__pill:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
}
.filter-modal__pill.is-active {
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
}

.filter-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-gray-200);
    flex-shrink: 0;
    background: var(--color-white);
}
.filter-modal__reset {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-blue);
    cursor: pointer;
    padding: 0.5rem 0;
    font-weight: 600;
}
.filter-modal__reset:hover { text-decoration: underline; }
.filter-modal__apply {
    min-width: 160px;
    text-align: center;
}

/* ── Filter Modal: Pill group labels ──────────────────────────────────────── */

.filter-modal__pill-group {
    margin-bottom: var(--space-3);
}
.filter-modal__pill-group:last-child { margin-bottom: 0; }
.filter-modal__pill-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

/* ── Filter Modal: Number inputs (year built) ─────────────────────────────── */

.filter-modal__field input[type="number"] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-900);
}
.filter-modal__field input[type="number"]::-webkit-inner-spin-button,
.filter-modal__field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.filter-modal__field input[type="number"]:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
}

.filter-modal__input {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-900);
}
.filter-modal__input:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
}
.filter-modal__hint {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: var(--space-1) 0 0;
}

/* ── Filter Modal: More Filters toggle ────────────────────────────────────── */

.filter-modal__more-toggle {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
    text-align: center;
}
.filter-modal__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-blue);
    cursor: pointer;
    padding: 0.5rem 0;
}
.filter-modal__more-btn:hover { text-decoration: underline; }
.filter-modal__more-chevron {
    transition: transform 0.2s ease;
}
.filter-modal__more-btn.is-expanded .filter-modal__more-chevron {
    transform: rotate(180deg);
}
.filter-modal__more-body {
    padding-top: var(--space-4);
}

/* ── Filter Modal: Conditional fields (HOA fee, Builder) ──────────────────── */

.filter-modal__conditional {
    display: none;
}
.filter-modal__conditional.is-visible {
    display: block;
}

/* ── Filter Modal: School header + info icon ──────────────────────────────── */

.filter-modal__school-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.filter-modal__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    color: var(--color-gray-500);
    cursor: help;
    position: relative;
    flex-shrink: 0;
}
.filter-modal__info-icon:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gray-900);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: var(--border-radius);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

/* ── Filter Modal: Building Multi-Select ──────────────────────────────────── */

.fm-building-multi {
    position: relative;
}
.fm-building-multi__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    background: var(--color-white);
    color: var(--color-gray-900);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fm-building-multi__trigger:hover {
    border-color: var(--color-gray-400);
}
.fm-building-multi__trigger:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27, 129, 193, 0.15);
}
.fm-building-multi__trigger svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}
.fm-building-multi__trigger.is-open svg {
    transform: rotate(180deg);
}
.fm-building-multi__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 240px;
    overflow-y: auto;
}
.fm-building-multi__dropdown.is-open {
    display: block;
}
.fm-building-multi__list {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
}
.fm-building-multi__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background 0.1s;
}
.fm-building-multi__item:hover {
    background: var(--color-off-white);
}
.fm-building-multi__checkbox {
    flex-shrink: 0;
    accent-color: var(--color-blue);
}
.fm-building-multi__loading {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}
.fm-building-multi__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.fm-building-multi__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 10px;
    font-size: var(--text-xs);
    background: var(--color-blue-light);
    color: var(--color-navy);
    border-radius: 100px;
    white-space: nowrap;
}
.fm-building-multi__pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-navy);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.fm-building-multi__pill-remove:hover {
    opacity: 1;
}

/* ── Search Layout (map + results grid) ───────────────────────────────────── */

.search-page { background: var(--color-off-white); }

.search-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 180px);
}

.search-layout__map {
    position: sticky;
    top: 130px; /* header + filter bar */
    height: calc(100vh - 130px);
}
.search-map {
    width: 100%;
    height: 100%;
}

.search-layout__results {
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
}

.search-layout--grid-only {
    grid-template-columns: 1fr;
}
.search-layout--grid-only .search-layout__map { display: none; }
.search-layout--grid-only .search-layout__results {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
}

/* ── Listings Grid (search page variant — higher specificity than Section 14) */

.search-page .listings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.search-layout:not(.search-layout--grid-only) .listings-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Card highlight on map hover */
.listing-card.is-highlighted {
    box-shadow: 0 0 0 2px var(--color-blue), var(--shadow-lg);
}

/* ── Map Markers ──────────────────────────────────────────────────────────── */

.map-marker {
    background: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.15s ease;
    transform: translateY(0);
}
.map-marker:hover,
.map-marker.is-active {
    background: var(--color-blue);
    transform: translateY(-2px) scale(1.1);
    z-index: 10 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* ── Map Popup ────────────────────────────────────────────────────────────── */

.map-popup {
    display: block;
    width: 200px;
    text-decoration: none;
    color: inherit;
}
.map-popup__photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
}
.map-popup__body { padding: 8px; }
.map-popup__price {
    font-weight: 700;
    font-size: 15px;
    color: #1B2A4A;
}
.map-popup__address {
    font-size: 12px;
    color: #666;
    margin: 2px 0 4px;
}
.map-popup__stats {
    font-size: 12px;
    color: #444;
}
.map-popup__link {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #1B2A4A;
    font-weight: 600;
    text-decoration: none;
}
.map-popup__link:hover { text-decoration: underline; }
.map-popup:hover .map-popup__link { text-decoration: underline; }

/* Map loading state */
.search-map.is-loading { opacity: 0.6; }
.map-is-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: map-shimmer 1.5s infinite;
}
@keyframes map-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mapbox popup overrides */
.mapboxgl-popup-content {
    padding: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.mapboxgl-popup-close-button {
    font-size: 18px;
    padding: 4px 8px;
    color: var(--color-white);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) 0 var(--space-4);
}
.search-pagination__numbers {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.search-pagination__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1.5px solid var(--color-gray-200);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition);
}
.search-pagination__link:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}
.search-pagination__link--current {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
}
.search-pagination__ellipsis {
    padding: 0 var(--space-1);
    color: var(--color-gray-400);
}

/* ── JS-driven search pagination (.trg-page-btn) ───────────────────── */

.trg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) 0 var(--space-4);
    flex-wrap: wrap;
}

.trg-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1.5px solid var(--color-gray-200);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    cursor: pointer;
    background: var(--color-white);
    transition: all var(--transition);
}

.trg-page-btn:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.trg-page-btn.active,
.trg-page-btn.is-active,
.trg-page-btn[aria-current="page"] {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
}

.trg-page-btn.prev-next {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0 var(--space-4);
}

.trg-page-ellipsis {
    color: var(--color-gray-400);
    padding: 0 var(--space-1);
    font-size: var(--text-sm);
}

/* ── No Results ───────────────────────────────────────────────────────────── */

.search-no-results {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}
.search-no-results svg { margin-bottom: var(--space-4); }
.search-no-results h2 {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    color: var(--color-navy);
    margin: 0 0 var(--space-2);
}
.search-no-results p {
    color: var(--color-gray-600);
    margin: 0 0 var(--space-4);
}
.search-no-results__suggestions {
    list-style: none;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}
.search-no-results__suggestions li::before {
    content: '\2022';
    margin-right: var(--space-2);
    color: var(--color-gray-400);
}
.search-no-results__suggestions a { color: var(--color-blue); }

/* ── Map Toggle Button ────────────────────────────────────────────────────── */

.search-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Responsive: Tablet ───────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .search-page .listings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .search-layout:not(.search-layout--grid-only) .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 1024px) {
    .search-layout {
        grid-template-columns: 1fr;
    }
    .search-layout__map {
        position: relative;
        top: auto;
        height: 40vh;
    }
    .search-page .listings-grid,
    .search-layout:not(.search-layout--grid-only) .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive: Mobile ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .filter-bar {
        position: relative;
        top: auto;
    }
    .filter-bar__row {
        gap: var(--space-2);
        flex-wrap: wrap;
    }
    .filter-bar__group { flex: 1 1 calc(50% - var(--space-2)); }
    .filter-bar__group--sqft { display: none; }
    .filter-select { min-width: unset; width: 100%; }
    .filter-bar__all-filters-btn { flex: 1 1 calc(50% - var(--space-2)); justify-content: center; }
    .filter-bar__submit { flex: 1 1 100%; margin-left: 0; }

    .filter-modal__panel { max-width: 100%; }
    .filter-modal__more-btn { width: 100%; justify-content: center; }

    .search-header__row { flex-direction: column; align-items: flex-start; }
    .search-header__controls { width: 100%; justify-content: flex-start; }
    .search-header__title { font-size: var(--text-xl); }

    .search-page .listings-grid,
    .search-layout:not(.search-layout--grid-only) .listings-grid {
        grid-template-columns: 1fr;
    }
    .search-layout__map { height: 30vh; }
    .search-pagination { flex-wrap: wrap; }
}


/* =============================================================================
   22. Print
   ============================================================================= */

@media print {
    .site-header, .site-footer, .site-header__hamburger { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { color: #000; }
    .container { max-width: 100%; padding: 0; }
}


/* =============================================================================
   24. Listing Detail Page
   ============================================================================= */

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.listing-detail {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--container-pad) var(--space-16);
}
.listing-detail__main {
    min-width: 0;
    overflow: hidden;
}
/* ── Gallery ────────────────────────────────────────────────────────────────── */

.listing-gallery { margin-bottom: var(--space-6); }

.gallery__hero {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--color-gray-100);
    cursor: pointer;
}
.gallery__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery__hero--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.gallery__placeholder {
    text-align: center;
    color: var(--color-gray-400);
}
.gallery__placeholder svg { margin-bottom: var(--space-2); }
.gallery__placeholder span { display: block; font-size: var(--text-sm); }

.gallery__count {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    pointer-events: none;
}

.gallery__hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    z-index: 2;
    opacity: 0;
}
.gallery__hero:hover .gallery__hero-nav { opacity: 1; }
.gallery__hero-nav:hover { background: rgba(0,0,0,.75); }
.gallery__hero-nav--prev { left: var(--space-3); }
.gallery__hero-nav--next { right: var(--space-3); }

.gallery__fullscreen {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.gallery__fullscreen:hover { background: rgba(0,0,0,.75); }

.gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: var(--space-1);
    -webkit-overflow-scrolling: touch;
}
.gallery__thumbs::-webkit-scrollbar { height: 4px; }
.gallery__thumbs::-webkit-scrollbar-thumb { background: var(--color-gray-200); border-radius: 2px; }

.gallery__thumb {
    flex: 0 0 auto;
    width: 100px;
    height: 66px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition);
    padding: 0;
    background: var(--color-gray-100);
}
.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery__thumb.is-active,
.gallery__thumb:hover {
    border-color: var(--color-blue);
}

/* ── Lightbox ───────────────────────────────────────────────────────────────── */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}
.gallery-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.gallery-lightbox__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: var(--space-2);
    z-index: 2;
}
.gallery-lightbox__close:hover { opacity: .7; }

.gallery-lightbox__stage {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox__stage img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--border-radius);
}

.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    z-index: 2;
}
.gallery-lightbox__nav:hover { background: rgba(255,255,255,.3); }
.gallery-lightbox__nav--prev { left: var(--space-4); }
.gallery-lightbox__nav--next { right: var(--space-4); }

.gallery-lightbox__counter {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: var(--text-sm);
}

/* ── Listing Info ───────────────────────────────────────────────────────────── */

.listing-info {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.listing-info__price-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.listing-info__price {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--text-4xl);
    color: var(--color-navy);
}

.listing-info__status {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
}
.listing-info__status--active {
    background: #dcfce7;
    color: #166534;
}
.listing-info__status--pending {
    background: #fef3c7;
    color: #92400e;
}

.listing-info__address {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
    line-height: 1.4;
}
.listing-info__city {
    color: var(--color-gray-600);
    font-weight: 400;
}
.listing-info__sub {
    color: var(--color-gray-400);
    font-weight: 400;
}

.listing-info__stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.listing-stat-lg {
    background: #CEE8F2;
    border-radius: 8px;
    padding: 12px 18px;
    text-align: center;
    min-width: 0;
}
.listing-stat-lg__value {
    display: block;
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 700;
    color: #282460;
    line-height: 1.2;
}
.listing-stat-lg__label {
    display: block;
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 600;
    color: #1B81C1;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.listing-info__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}
.listing-info__meta span::before {
    content: '';
}
.listing-info__mls,
.listing-info__agent {
    position: relative;
    padding-left: var(--space-4);
}
.listing-info__mls::before,
.listing-info__agent::before {
    content: '\00b7';
    position: absolute;
    left: 0;
    color: var(--color-gray-400);
}

.listing-info__favorite {
    position: static;
    width: auto;
    height: auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
}
.listing-info__favorite:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}
.listing-info__favorite.is-favorited {
    color: #ef4444;
    border-color: #fecaca;
}
.listing-info__favorite.is-favorited svg { fill: #ef4444; stroke: #ef4444; }

/* ── Description ────────────────────────────────────────────────────────────── */

.listing-description {
    margin-bottom: var(--space-8);
}

.listing-description__open-house {
    background: var(--color-blue-light);
    color: var(--color-navy);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.listing-description__heading {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}

.listing-description__remarks {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-100);
}

.listing-description__text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-gray-600);
}
.listing-description__text.is-truncated {
    max-height: 6em;
    overflow: hidden;
    position: relative;
}
.listing-description__text.is-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(transparent, var(--color-white));
}
.listing-description__text.is-expanded { max-height: none; }
.listing-description__text.is-expanded::after { display: none; }

.listing-description__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-blue);
    font-weight: 600;
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    padding: 0;
}
.listing-description__toggle:hover { text-decoration: underline; }

/* ── Grouped Detail Sections (Redfin/Zillow style) ─────────────────────────── */

.listing-details-grouped { margin-bottom: var(--space-8); }

.detail-section { margin-bottom: var(--space-6); }

.detail-section__header {
    background: var(--color-gray-100);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-3);
}
.detail-section__header h3 {
    font-family: var(--font-headline);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-8);
    margin: 0;
    padding: 0;
}
.detail-grid__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
    min-width: 0;
}
.detail-grid__row dt {
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.detail-grid__row dd {
    margin: 0;
    color: var(--color-gray-600);
    min-width: 0;
    font-size: var(--text-sm);
    text-align: right;
}

.trg-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-blue);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0;
}
.trg-expand-btn:hover { text-decoration: underline; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.listing-detail__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    align-self: start;
}

.sidebar-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.sidebar-card__title {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}

/* ── Agent CTA ──────────────────────────────────────────────────────────────── */

.agent-cta {
    text-align: center;
}
.agent-cta__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--space-3);
}
.agent-cta__name {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    color: var(--color-navy);
    margin-bottom: var(--space-1);
}
.agent-cta__tagline {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}
.agent-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Tour Form ──────────────────────────────────────────────────────────────── */

.tour-form .form-group { margin-bottom: var(--space-3); }
.tour-form .form-optional { font-weight: 400; color: var(--color-gray-400); font-size: var(--text-xs); }

.tour-form__error {
    color: #dc2626;
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    min-height: 0;
}
.tour-form__success {
    background: #dcfce7;
    color: #166534;
    padding: var(--space-4);
    border-radius: var(--border-radius);
    font-weight: 600;
    text-align: center;
}

/* ── Mortgage Calculator ────────────────────────────────────────────────────── */

.mortgage-calc__terms {
    display: flex;
    gap: var(--space-2);
}
.mortgage-calc__term {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    background: var(--color-white);
    cursor: pointer;
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: var(--text-sm);
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}
.mortgage-calc__term.is-active {
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: var(--color-white);
}

.mortgage-calc__result {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
}
.mortgage-calc__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-1);
}
.mortgage-calc__payment {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-navy);
}

/* ── Share ───────────────────────────────────────────────────────────────────── */

.sidebar-share { padding: var(--space-4); }

/* ── Listing Action Buttons (Call / Tour / Share) ──────────────────────────── */
.listing-actions__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.btn--text {
    background: none;
    border: none;
    color: var(--color-navy);
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: var(--space-2);
}
.btn--text:hover { color: var(--color-blue); }

.listing-actions__share {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}
.listing-actions__share.is-open {
    display: flex;
}
.listing-actions__share-item {
    display: block;
    width: 75%;
    margin: 6px auto 0;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: #ffffff;
    color: #1B2A4A;
    border: 1px solid #1B2A4A;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.listing-actions__share-item:hover {
    background: #f0f4f8;
}

/* ── Inline Mortgage Calculator (main content area) ───────────────────────── */
.listing-calc {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}
.listing-calc__title {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-4);
}
.listing-calc__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (max-width: 640px) {
    .listing-calc__fields { grid-template-columns: 1fr; }
}

/* ── Tour Form Actions (logged-in confirm/cancel) ─────────────────────────── */
.tour-form__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ── Back to Matches sticky pill ──────────────────────────────────────────── */
.trg-back-to-matches {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    left: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: opacity 0.2s;
}
.trg-back-to-matches:hover { opacity: 0.9; }
@media (max-width: 768px) {
    .trg-back-to-matches { display: none; }
}

/* ── Map ────────────────────────────────────────────────────────────────────── */

.listing-detail__map {
    margin-bottom: var(--space-8);
}
.listing-map {
    height: 280px !important;
    max-height: 280px !important;
    width: 100%;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

/* ── Similar Homes ──────────────────────────────────────────────────────────── */

.similar-homes {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-200);
}
.similar-homes__title {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-6);
}
.similar-homes__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.similar-homes__more {
    text-align: center;
    margin-top: var(--space-6);
}

/* ── Listing Detail Responsive ──────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .similar-homes__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1024px) {
    .listing-detail {
        grid-template-columns: 1fr;
    }
    .listing-detail__sidebar {
        position: static;
    }
    .similar-homes__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .listing-info__price {
        font-size: var(--text-3xl);
    }
    .listing-info__stats {
        flex-wrap: wrap;
        gap: 8px;
    }
    .listing-stat-lg {
        padding: 10px 14px;
    }
    .listing-stat-lg__value {
        font-size: 20px;
    }
    .gallery__hero-nav {
        opacity: 1;
        width: 36px;
        height: 36px;
    }
    .gallery__hero {
        aspect-ratio: 4 / 3;
    }
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .similar-homes__grid {
        grid-template-columns: 1fr;
    }
    .listing-map {
        height: 220px;
    }
    .modal-form__row {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   25. High-Rise Pages
   ============================================================================= */

/* ── Hub Page ─────────────────────────────────────────────────────────────── */

/* ── Browse by Building Section ──────────────────────────────────────────── */

.highrise-hub__browse {
    border-top: 1px solid var(--color-gray-200);
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-off-white);
}

.highrise-hub__browse-heading {
    font-family: var(--font-headline);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-navy);
    text-align: center;
    margin: 0 0 var(--space-8);
}

.highrise-hub__browse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .highrise-hub__browse-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .highrise-hub__browse-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .highrise-hub__browse-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Building Grid ───────────────────────────────────────────────────────── */

.building-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

/* ── Building Card ───────────────────────────────────────────────────────── */

.building-card {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.building-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.building-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.building-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.building-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.building-card:hover .building-card__image img {
    transform: scale(1.05);
}

/* Branded gradient placeholder when no hero photo */
.building-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 50%, var(--color-cyan) 100%);
    color: rgba(255, 255, 255, 0.4);
    transition: opacity var(--transition-slow);
}

.building-card:hover .building-card__placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.building-card__body {
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.building-card__name {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-3);
    line-height: 1.25;
}

.building-card__stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-4);
}

.building-card__count {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    font-weight: 500;
}

.building-card__price {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-blue);
}

.building-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color var(--transition), gap var(--transition);
}

.building-card:hover .building-card__cta {
    color: var(--color-navy);
    gap: var(--space-2);
}


/* ── Building Detail Page ────────────────────────────────────────────────── */

.highrise-building {
    padding-bottom: var(--space-12);
}

/* ─── Band 1: Navy identity — reusable across building + community pages ── */
.page-identity {
    background: var(--color-navy);
    padding: 18px 0 16px;
    border-bottom: 3px solid var(--color-blue);
}
.page-identity .container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.page-identity__title {
    font-family: var(--font-headline);
    font-size: clamp(20px, 2.8vw, 28px);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.2px;
}
.page-identity__stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.page-identity__stat {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1;
}
/* Dot separator between stats */
.page-identity__stat + .page-identity__stat::before {
    content: '\00B7';
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.35);
}
.page-identity__stat--count {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
}
.page-identity__stat--price {
    color: rgba(255, 255, 255, 0.72);
}

/* ─── Band 2: Light blue feature highlights ──────────────────────────────── */
.page-highlights {
    background: var(--color-blue-light);
    padding: 9px 0;
}
.page-highlights__tagline {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-navy);
    line-height: 1.55;
    margin: 0;
}
.page-highlights__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.page-highlights__feature {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--color-navy);
    border-radius: 20px;
    padding: 4px 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-navy);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.page-highlights__feature::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-navy);
    flex-shrink: 0;
}

/* ── Building Info ───────────────────────────────────────────────────────── */

.building-info {
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.building-info__description {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-gray-600);
    max-width: 800px;
    margin-bottom: var(--space-8);
}

.building-info__description p {
    margin: 0 0 var(--space-4);
}

.building-info__details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
}

.building-info__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.building-info__label {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.building-info__value {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-navy);
}

.building-info__amenities-wrap {
    margin-top: var(--space-2);
}

.building-info__amenities-title {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-3);
}

.building-info__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.building-info__amenity {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-blue-light);
    color: var(--color-navy);
    border-radius: 100px;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Building Listings Section ───────────────────────────────────────────── */

.building-listings {
    padding: 20px 0 var(--space-10);
}

.building-listings__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.building-listings__title {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}

.building-listings__count {
    font-weight: 400;
    color: var(--color-gray-400);
}

.building-listings__sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.building-listings__sort-btn {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition);
}

.building-listings__sort-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.building-listings__sort-btn--active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.building-listings__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
@media (max-width: 1199px) { .building-listings__grid { grid-template-columns: repeat(3, 1fr); } }

.building-listings__empty {
    text-align: center;
    padding: var(--space-12) 0;
    color: var(--color-gray-600);
}

.building-listings__empty p {
    margin: 0 0 var(--space-2);
}

/* ── Building Map ────────────────────────────────────────────────────────── */

.building-map-section {
    margin: 0 0 40px;
}
.building-map-section h2 {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-blue-light);
}
.building-map-address {
    color: var(--color-steel);
    font-size: 14px;
    margin: 0 0 12px;
}
.building-map {
    width: 100%;
    height: 360px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-blue-light);
}

/* ── Building CTA ────────────────────────────────────────────────────────── */

.building-cta {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
    margin-top: var(--space-4);
}

.building-cta h2 {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-3);
}

.building-cta p {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
    margin: 0 auto var(--space-6);
    line-height: 1.6;
}


/* ── High-Rise Responsive ────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .building-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .building-listings__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .building-info__details {
        grid-template-columns: repeat(2, 1fr);
    }
}

.similar-buildings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .similar-buildings { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .building-grid,
    .building-listings__grid {
        grid-template-columns: 1fr;
    }
    .building-info__details {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-identity {
        padding: 14px 0 12px;
    }
    .page-identity__title {
        font-size: 19px;
    }
    .page-identity__stat {
        font-size: 12px;
    }
    .page-highlights__tagline {
        font-size: 13px;
    }
    .building-listings__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .building-listings__sort {
        flex-wrap: wrap;
    }
    .similar-buildings {
        grid-template-columns: 1fr;
    }
    .building-map {
        height: 260px;
    }
}

/* Building guide content */
.building-guide {
    padding: var(--space-8) 0;
    line-height: 1.7;
    color: var(--color-gray-600);
}
.building-guide h2 {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-blue-light);
}
.building-guide p { margin-bottom: var(--space-4); }
.building-guide ul {
    margin: 0 0 var(--space-4) var(--space-6);
    list-style: disc;
}
.building-guide li { margin-bottom: var(--space-2); }

/* Building FAQ */
.building-faq {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-gray-200);
}
.building-faq > h2 {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-6);
}
.faq-item { margin-bottom: 24px; }
.faq-item h3 {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}
.faq-item p {
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Building contact form */
.building-contact {
    background: var(--color-blue-light);
    border-radius: var(--radius-md);
    padding: 32px;
    margin: 40px 0;
}
.building-contact h2 {
    color: var(--color-navy);
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: 8px;
}
.building-contact > p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (max-width: 640px) {
    .contact-form__row { grid-template-columns: 1fr; }
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    background: #fff;
    transition: border-color var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-blue);
}
.contact-form textarea { margin-bottom: var(--space-3); resize: vertical; }
.contact-form button { margin-top: var(--space-2); }
.contact-form__success {
    margin-top: var(--space-3);
    padding: 12px 16px;
    background: #d4edda;
    color: #155724;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.contact-form__error {
    margin-top: var(--space-3);
    padding: 12px 16px;
    background: #FFF3E0;
    color: #E65100;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

/* Similar buildings grid */
.building-similar {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-gray-200);
}
.building-similar > h2 {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-4);
}
.similar-building-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    text-decoration: none;
    display: block;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.similar-building-card:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-sm);
}
.similar-building-card strong {
    display: block;
    color: var(--color-navy);
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    margin-bottom: 4px;
}
.similar-building-card span {
    color: var(--color-gray-600);
    font-size: 13px;
}
.building-similar__all {
    color: var(--color-blue);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: var(--text-sm);
}
.building-similar__all:hover { text-decoration: underline; }


/* =============================================================================
   26. Lifestyle & Amenities (Listing Detail)
   ============================================================================= */

.lifestyle-section {
    padding: var(--space-10) 0;
    border-top: 1px solid var(--color-gray-200);
}

.lifestyle-section__title {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-8);
}

/* ── Walk Score Badges ───────────────────────────────────────────────────── */

.walkscore-badges {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.walkscore-badge {
    flex: 1;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
}

.walkscore-badge__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-steel);
    margin-bottom: var(--space-3);
}

/* Score color coding */
.walkscore-badge__score[data-score^="9"],
.walkscore-badge__score[data-score^="8"] {
    background: #2d8a4e;
}
.walkscore-badge__score[data-score^="7"],
.walkscore-badge__score[data-score^="6"] {
    background: var(--color-blue);
}
.walkscore-badge__score[data-score^="5"],
.walkscore-badge__score[data-score^="4"] {
    background: var(--color-orange);
}

.walkscore-badge__label {
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-1);
}

.walkscore-badge__max {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-bottom: var(--space-1);
}

.walkscore-badge__desc {
    font-size: var(--text-xs);
    color: var(--color-gray-600);
}

.walkscore-footer {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: var(--space-2) 0 var(--space-8);
    text-align: center;
}
.walkscore-footer a {
    color: var(--color-gray-400);
    text-decoration: underline;
}
.walkscore-footer a:hover {
    color: var(--color-blue);
}

/* ── Walk Score Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .walkscore-badges {
        flex-direction: row;
        gap: var(--space-3);
    }
    .walkscore-badge {
        padding: var(--space-4) var(--space-3);
    }
    .walkscore-badge__score {
        width: 56px;
        height: 56px;
        font-size: var(--text-xl);
    }
}


/* =============================================================================
   26. Consumer Portal (/my-account/)
   ============================================================================= */

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.portal {
    padding: var(--space-8) 0 var(--space-16);
}
.portal__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.portal__header {
    margin-bottom: var(--space-6);
}
.portal__title {
    font-family: var(--font-headline);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-1);
}
.portal__greeting {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    margin: 0;
}

/* ── Tab Nav ────────────────────────────────────────────────────────────────── */

.portal-tabs {
    display: flex;
    gap: var(--space-6);
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--space-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.portal-tabs__link {
    font-family: var(--font-headline);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-gray-400);
    text-decoration: none;
    padding: var(--space-3) var(--space-1);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.portal-tabs__link:hover {
    color: var(--color-navy);
}
.portal-tabs__link.is-active {
    color: var(--color-navy);
    border-bottom-color: var(--color-blue);
}

/* ── Tab Content ────────────────────────────────────────────────────────────── */

.portal-tab {
    min-height: 300px;
}

/* ── Empty State ────────────────────────────────────────────────────────────── */

.portal-empty {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    color: var(--color-gray-400);
}
.portal-empty svg {
    margin-bottom: var(--space-4);
    stroke: var(--color-gray-400);
}
.portal-empty__title {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-gray-600);
    margin: 0 0 var(--space-2);
}
.portal-empty__text {
    font-size: var(--text-base);
    margin: 0 0 var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Saved Search Cards ─────────────────────────────────────────────────────── */

.portal-searches {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.portal-search-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    background: var(--color-white);
    transition: box-shadow var(--transition);
}
.portal-search-card:hover {
    box-shadow: var(--shadow-sm);
}
.portal-search-card__info {
    flex: 1;
    min-width: 0;
}
.portal-search-card__name {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-navy);
    margin: 0 0 var(--space-1);
}
.portal-search-card__summary {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-1);
}
.portal-search-card__date {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: 0;
}
.portal-search-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.portal-search-card__alert-label {
    display: flex;
    align-items: center;
}
.portal-search-card__alert {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
    color: var(--color-gray-600);
    cursor: pointer;
}
.portal-search-card__delete {
    color: var(--color-gray-400);
    padding: var(--space-2);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition), background var(--transition);
}
.portal-search-card__delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* ── Account Form ───────────────────────────────────────────────────────────── */

.portal-account {
    max-width: 560px;
}
.portal-account__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.portal-account__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.portal-account__field label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-gray-900);
    margin-bottom: var(--space-1);
}
.portal-account__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: border-color var(--transition);
}
.portal-account__input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27, 129, 193, .15);
}
.portal-account__input[readonly] {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    cursor: not-allowed;
}
.portal-account__hint {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: var(--space-1) 0 0;
}
.portal-account__field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: 400;
    font-size: var(--text-sm);
    cursor: pointer;
}
.portal-account__field--checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.portal-account__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.portal-account__status {
    font-size: var(--text-sm);
    font-weight: 600;
}
.portal-account__status--success { color: #16a34a; }
.portal-account__status--error   { color: #dc2626; }

/* ── Portal Login Form ──────────────────────────────────────────────────────── */

.portal-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-8) var(--container-pad);
}
.portal-login__card {
    width: 100%;
    max-width: 480px;
    padding: var(--space-8) var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.portal-login__title {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-2);
}
.portal-login__subtitle {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-6);
}
.portal-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.portal-login__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-size: var(--text-base);
    font-family: var(--font-body);
    text-align: center;
}
.portal-login__input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27, 129, 193, .15);
}
.portal-login__submit {
    width: 100%;
}
.portal-login__message {
    font-size: var(--text-sm);
    min-height: 1.4em;
    margin: 0;
}
.portal-login__message--success { color: #16a34a; }
.portal-login__message--error   { color: #dc2626; }

.portal-login__divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}
.portal-login__divider::before,
.portal-login__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}
.portal-login__register-text {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-3);
}
.portal-login__register-btn {
    width: 100%;
}

/* ── Save Search Modal ──────────────────────────────────────────────────────── */

.save-search-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility var(--transition), opacity var(--transition);
}
.save-search-modal.is-open {
    visibility: visible;
    opacity: 1;
}
.save-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}
.save-search-modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    margin: var(--space-4);
}
.save-search-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}
.save-search-modal__title {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}
.save-search-modal__close {
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition);
}
.save-search-modal__close:hover { color: var(--color-gray-900); }

.save-search-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.save-search-modal__field label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-gray-900);
    margin-bottom: var(--space-1);
}
.save-search-modal__input,
.save-search-modal__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    font-size: var(--text-base);
    font-family: var(--font-body);
}
.save-search-modal__input:focus,
.save-search-modal__select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27, 129, 193, .15);
}
.save-search-modal__summary {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin: 0;
}
.save-search-modal__submit {
    width: 100%;
}
.save-search-modal__message {
    font-size: var(--text-sm);
    text-align: center;
    min-height: 1.4em;
    margin: 0;
}
.save-search-modal__message--success { color: #16a34a; }
.save-search-modal__message--error   { color: #dc2626; }

/* ── Header Account Link ────────────────────────────────────────────────────── */

.site-header__account {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-navy);
    text-decoration: none;
    transition: color var(--transition);
}
.site-header__account:hover {
    color: var(--color-blue);
}

/* ── Filter Bar — Save Search Button ────────────────────────────────────────── */

.filter-bar__save-search {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* ── Portal Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .portal-tabs {
        gap: var(--space-4);
        padding-bottom: 0;
    }
    .portal-tabs__link {
        font-size: var(--text-sm);
    }
    .portal-search-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .portal-search-card__actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .portal-account__row {
        grid-template-columns: 1fr;
    }
    .site-header__account {
        display: none;
    }
}


/* =============================================================================
   ZIP Code Pills (Tier 1 Filter Bar)
   ============================================================================= */

.filter-bar__group--zip { flex: 0 1 auto; min-width: 120px; max-width: 280px; }
.zip-pills {
    display: flex; flex-wrap: nowrap; gap: 4px; align-items: center;
    border: 1px solid var(--color-gray-200); border-radius: var(--border-radius);
    padding: 4px 8px; background: #fff; height: 36px;
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    scrollbar-width: thin;
}
.zip-pills::-webkit-scrollbar { height: 3px; }
.zip-pills::-webkit-scrollbar-thumb { background: var(--color-gray-200); border-radius: 2px; }
.zip-pills__pill {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    background: var(--color-blue-light); color: var(--color-navy);
    border-radius: 12px; padding: 2px 8px; font-size: 0.8rem;
    font-weight: 600; white-space: nowrap;
}
.zip-pills__remove {
    background: none; border: none; cursor: pointer; color: inherit;
    font-size: 1rem; line-height: 1; padding: 0 2px;
    opacity: 0.6; transition: opacity var(--transition);
}
.zip-pills__remove:hover { opacity: 1; }
.zip-pills__input {
    border: none; outline: none; width: 70px; min-width: 50px; flex-shrink: 0;
    font-size: 0.85rem; background: transparent;
}


/* =============================================================================
   Google Places Autocomplete Dropdown Override
   ============================================================================= */

.pac-container {
    border-radius: var(--border-radius); box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-200); z-index: 10000;
    font-family: var(--font-body); min-width: 280px;
}
.pac-item { padding: 8px 12px; font-size: 0.9rem; cursor: pointer; }
.pac-item:hover { background: var(--color-blue-light); }
.pac-item-query { font-weight: 600; color: var(--color-navy); }


/* =============================================================================
   Draw Boundary Toolbar (Map Overlay)
   ============================================================================= */

.map-count-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: auto;
    transform: none;
    background: rgba(27, 42, 74, 0.92);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    z-index: 11;
    pointer-events: none;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    letter-spacing: 0.01em;
}

.draw-toolbar {
    position: absolute; top: 60px; left: 10px; z-index: 10;
    display: flex; gap: 6px; align-items: center;
}
.draw-toolbar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: var(--color-white); color: var(--color-navy);
    border: 2px solid var(--color-navy); border-radius: 20px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow-sm);
    transition: background 0.2s, color 0.2s;
}
.draw-toolbar__btn:hover {
    background: var(--color-navy); color: var(--color-white);
}
.draw-toolbar__btn.is-active {
    background: var(--color-navy); color: var(--color-white);
    border-color: var(--color-navy);
    outline: 2px solid var(--color-orange); outline-offset: 2px;
}
.draw-toolbar__btn--clear { color: var(--color-gray-600); }
.draw-toolbar__notice {
    font-size: 0.8rem; font-weight: 600; color: var(--color-blue);
    background: rgba(27, 129, 193, 0.1); border-radius: var(--border-radius);
    padding: 4px 10px;
}

/* Draw boundary: grid is replaced with JS-built cards, no CSS filter needed */

/* ── Map style toggle (Map / Satellite) ──────────────────────────────────── */
.map-style-toggle {
    position: absolute;
    top: 10px;
    right: 48px;
    bottom: auto;
    left: auto;
    display: flex;
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
}
.map-style-btn {
    padding: 5px 14px;
    border: none;
    background: transparent;
    border-radius: 17px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
.map-style-btn.active {
    background: #1B2A4A;
    color: #ffffff;
}
.map-style-btn:hover:not(.active) {
    color: #1B2A4A;
}

/* =============================================================================
   Search Input Sprint — Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .filter-bar__group--zip { min-width: 100px; }
    .draw-toolbar { top: auto; bottom: 10px; }
}


/* =============================================================================
   Agent Portal v1.8
   ============================================================================= */

/* ── Portal Header ──────────────────────────────────────────────────────── */
.trg-portal-header {
    padding: 14px 24px;
    border-bottom: 0.5px solid #e5e5e5;
    background: #fff;
}
.trg-portal-logo {
    height: 36px;
    width: auto;
    display: block;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.ap { padding: 32px 0; }
.ap__inner { max-width: 1200px; }
.ap__view[hidden] { display: none; }

/* ── Stat Cards ─────────────────────────────────────────────────────────── */
.ap__stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-bottom: 24px;
}
.ap__stat-card {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 10px; padding: 20px; text-align: center;
}
.ap__stat-value {
    display: block; font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 28px; font-weight: 700; color: var(--color-navy, #282460);
}
.ap__stat-label {
    display: block; font-size: 13px; color: #888; margin-top: 4px;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.ap__toolbar {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin-bottom: 20px;
}
.ap__search {
    flex: 1; min-width: 200px; padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e4e9); border-radius: 6px;
    font-size: 14px;
}
.ap__filter-select, .ap__sort-select {
    padding: 8px 12px; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 6px; font-size: 14px; background: #fff;
}
.ap__add-btn { white-space: nowrap; }

/* ── Client Table ───────────────────────────────────────────────────────── */
.ap__table-wrap { overflow-x: auto; }
.ap__table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.ap__table th {
    text-align: left; padding: 10px 12px; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: #888; border-bottom: 2px solid var(--color-border, #e2e4e9);
    white-space: nowrap;
}
.ap__table td {
    padding: 12px; border-bottom: 1px solid #f0f1f5; vertical-align: middle;
}
.ap__table tbody tr:hover { background: #f8f9fb; }

.ap__td-client { display: flex; align-items: center; gap: 10px; }
.ap__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-navy, #282460); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.ap__client-name { display: block; font-weight: 600; }
.ap__client-email { display: block; font-size: 12px; color: #888; }
.ap__client-phone { display: block; font-size: 12px; color: #888; }

.ap__td-num { text-align: center; font-weight: 600; }
.ap__td-date { white-space: nowrap; font-size: 13px; color: #888; }
.ap__td-actions { white-space: nowrap; }
.cd__row-actions { display: inline-flex; align-items: center; gap: 2px; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-navy, #1B2A4A);
    color: var(--color-navy, #1B2A4A);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    margin: 0 3px;
}
.btn-icon:hover {
    background: var(--color-blue-light, #D6EAFA);
    color: var(--color-navy, #1B2A4A);
}

/* ── Status Badges ──────────────────────────────────────────────────────── */
.ap__badge {
    display: inline-block; font-size: 11px; padding: 2px 10px;
    border-radius: 10px; font-weight: 600;
}
.ap__badge--new { background: #e3f2fd; color: #1565c0; }
.ap__badge--active { background: #e8f5e9; color: #2e7d32; }
.ap__badge--inactive { background: #fafafa; color: #999; }

/* ── Engagement Bar ─────────────────────────────────────────────────────── */
.ap__engagement-bar {
    width: 60px; height: 6px; background: #e2e4e9;
    border-radius: 3px; overflow: hidden; display: inline-block;
    vertical-align: middle;
}
.ap__engagement-fill {
    height: 100%; background: var(--color-gold, #c9a96e);
    border-radius: 3px;
}
.ap__engagement-val {
    font-size: 12px; color: #888; margin-left: 6px; vertical-align: middle;
}

/* ── View Header ────────────────────────────────────────────────────────── */
.ap__view-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
}
.ap__view-header h2 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 22px; color: var(--color-navy, #282460); margin: 0;
}
.ap__back-btn {
    background: none; border: none; font-size: 14px; color: #888;
    cursor: pointer; padding: 0;
}
.ap__back-btn:hover { color: var(--color-navy, #282460); }

/* ── Empty State ────────────────────────────────────────────────────────── */
.ap__empty {
    text-align: center; padding: 48px 24px; color: #888;
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 10px;
}
.ap__empty p { margin-bottom: 16px; }
.ap__empty-text { color: #888; font-style: italic; padding: 16px; text-align: center; }

/* ── Admin Link ─────────────────────────────────────────────────────────── */
.ap__admin-link {
    margin-top: 16px; text-align: right; font-size: 13px;
}
.ap__admin-link a { color: var(--color-navy, #282460); }

/* ── Add Client Form ────────────────────────────────────────────────────── */
.ap__add-form {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 10px; padding: 24px; max-width: 600px;
}
.ap__form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 20px;
}
.ap__form-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--color-navy, #282460); margin-bottom: 4px;
}
.ap__form-field input,
.ap__form-field textarea,
.ap__form-field select {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e4e9); border-radius: 6px;
    font-size: 14px; font-family: inherit;
}
.ap__form-actions {
    display: flex; gap: 12px; justify-content: flex-end;
}

/* ── Push Listing ───────────────────────────────────────────────────────── */
.ap__push-toolbar { margin-bottom: 16px; }
.ap__push-toolbar .ap__search { width: 100%; max-width: 500px; }

.ap__push-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-bottom: 20px;
}
.ap__push-card {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; overflow: hidden; position: relative;
}
.ap__push-card.is-selected { border-color: var(--color-gold, #c9a96e); }
.ap__push-card-photo {
    height: 140px; background-size: cover; background-position: center;
    background-color: #eee;
}
.ap__push-card-info { padding: 10px 12px; }
.ap__push-card-price {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 16px; font-weight: 700; color: var(--color-navy, #282460);
}
.ap__push-card-addr { font-size: 13px; color: #555; }
.ap__push-card-stats { font-size: 12px; color: #888; margin-top: 2px; }
.ap__push-card-add {
    display: block; width: 100%; padding: 8px;
    background: #f8f9fb; border: none; border-top: 1px solid #f0f1f5;
    font-size: 13px; font-weight: 600; color: var(--color-navy, #282460);
    cursor: pointer;
}
.ap__push-card-add:hover { background: #eef0f4; }
.ap__push-card.is-selected .ap__push-card-add { color: #999; }

.ap__push-selected {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px; margin-bottom: 16px;
}
.ap__push-selected h3 {
    font-size: 14px; margin: 0 0 8px;
    color: var(--color-navy, #282460);
}
.ap__push-selected-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid #f0f1f5; font-size: 13px;
}
.ap__push-remove {
    background: none; border: none; font-size: 18px; color: #999;
    cursor: pointer; padding: 0 4px;
}
.ap__push-remove:hover { color: #c62828; }

.ap__push-actions {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px;
}
.ap__push-buttons { display: flex; gap: 12px; }
.ap__push-link-result {
    margin-top: 12px; display: flex; gap: 8px; align-items: center;
}
.ap__push-link-result label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ap__push-link-result input {
    flex: 1; padding: 6px 10px;
    border: 1px solid var(--color-border, #e2e4e9); border-radius: 4px;
    font-size: 13px;
}

/* ── Client Detail (standalone mode) ────────────────────────────────────── */
.cd { padding: 24px 0; }

/* Top bar: back link + action buttons — sits ABOVE the 2-col layout */
.cd__topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.cd__back-link { font-size: 13px; color: var(--color-navy, #282460); text-decoration: none; }
.cd__back-link:hover { text-decoration: underline; }
.cd__actions { display: flex; gap: 8px; }

/* 2-column layout wrapper: sidebar + main */
.cd__layout { display: flex; gap: 1.25rem; }
.cd__sidebar { width: 260px; flex-shrink: 0; }
.cd__main { flex: 1; min-width: 0; }

/* Sidebar cards */
.cd__card {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px; margin-bottom: 12px;
}
.cd__avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: #CEE8F2; color: var(--color-navy, #282460);
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 16px; margin: 0 auto 8px;
}
.cd__name {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 15px; font-weight: 500; color: var(--color-navy, #282460);
    text-align: center;
}
.cd__meta { font-size: 13px; color: #888; margin: 2px 0; text-align: center; }
.cd__badge {
    display: inline-block; font-size: 11px; padding: 2px 8px;
    border-radius: 10px; font-weight: 600;
}
.cd__badge--new { background: #e3f2fd; color: #1565c0; }
.cd__badge--active { background: #e8f5e9; color: #2e7d32; }
.cd__badge--inactive { background: #fafafa; color: #999; }

/* Overview card rows */
.cd__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; border-bottom: 1px solid #f0f1f5; font-size: 12px;
}
.cd__row:last-child { border-bottom: none; }
.cd__row-label { color: #888; }
.cd__row-value { color: #333; font-weight: 600; }

/* Assigned agent dropdown */
.cd__agent-select {
    font-size: 12px; font-weight: 600; color: #333;
    padding: 2px 6px; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 4px; background: #fff; max-width: 140px;
}
.cd__reassign-ok { font-size: 11px; color: #2e7d32; margin-left: 4px; }

/* Landing page card */
.cd__landing { font-size: 11px; color: #888; word-break: break-all; }

/* Tabs */
.cd__tabs {
    display: flex; border-bottom: 2px solid var(--color-border, #e2e4e9);
    margin-bottom: 16px;
}
.cd__tab {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    color: #888; background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.cd__tab.is-active {
    color: var(--color-navy, #282460);
    border-bottom-color: var(--color-navy, #282460);
}
.cd__panel { display: none; }
.cd__panel.is-active { display: block; }

/* Activity events */
.cd__event {
    display: flex; gap: 8px; padding: 8px 0;
    border-bottom: 1px solid #f0f1f5; font-size: 13px;
}
.cd__event-icon { flex-shrink: 0; width: 24px; text-align: center; }
.cd__event-time { font-size: 12px; color: #888; }

/* Lists */
.cd__list { list-style: none; padding: 0; margin: 0; }
.cd__list li { padding: 6px 0; border-bottom: 1px solid #f0f1f5; font-size: 13px; }
.cd__empty { color: #999; font-style: italic; font-size: 13px; }
.cd__search-badge {
    display: inline-block; background: #e8eaee; color: #555;
    font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 4px;
}

/* ── Agent Portal Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ap__stats { grid-template-columns: 1fr; gap: 8px; }
    .ap__toolbar { flex-direction: column; }
    .ap__search { min-width: 100%; }
    .ap__table-wrap { font-size: 13px; }
    .ap__push-grid { grid-template-columns: 1fr; }
    .ap__form-grid { grid-template-columns: 1fr; }
    .cd__layout { flex-direction: column; }
    .cd__sidebar { width: 100%; }
    .fp__bar { grid-template-columns: 1fr; }
    .fp__allfilters-grid { grid-template-columns: 1fr; }
    .cd__push-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   Agent Filter Panel v1.9.1
   ============================================================================= */

/* ── Smart Location Search Bar ───────────────────────────────────────── */
.fp__location-bar { margin-bottom: 16px; }
.fp__location-input-wrap { position: relative; }
.fp__location-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-steel, #87A2B6); pointer-events: none;
}
.fp__location-input {
    width: 100%; padding: 10px 12px 10px 36px;
    border: 1px solid var(--color-border, #e2e4e9); border-radius: 8px;
    font-size: 14px; font-family: inherit;
    background: #fff;
}
.fp__location-input:focus {
    border-color: var(--color-blue, #1B81C1); outline: none;
    box-shadow: 0 0 0 3px rgba(27, 129, 193, 0.1);
}
.fp__location-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 320px; overflow-y: auto;
}
.fp__location-group-label {
    padding: 8px 12px 4px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-steel, #87A2B6);
}
.fp__location-item {
    padding: 8px 12px; font-size: 13px; cursor: pointer; color: #333;
}
.fp__location-item:hover { background: var(--color-light-blue, #CEE8F2); }
.fp__location-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.fp__location-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 600;
    background: var(--color-light-blue, #CEE8F2); color: var(--color-navy, #282460);
}
.fp__location-chip-x {
    cursor: pointer; font-size: 14px; line-height: 1; margin-left: 2px;
    opacity: 0.6;
}
.fp__location-chip-x:hover { opacity: 1; }

/* ── Property Type Tabs + VOW row ─────────────────────────────────────── */
.fp__tabs-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 16px; flex-wrap: wrap;
}
.fp__type-tabs {
    display: flex; gap: 6px;
}
.fp__type-tab {
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    border-radius: 20px; cursor: pointer; border: 1px solid var(--color-steel, #87A2B6);
    background: #fff; color: var(--color-steel, #87A2B6);
    transition: all 0.15s;
}
.fp__type-tab.is-active {
    background: var(--color-navy, #282460); color: #fff;
    border-color: var(--color-navy, #282460);
}
.fp__type-tab:hover:not(.is-active) {
    background: var(--color-light-blue, #CEE8F2);
}
.fp__vow-wrap {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    color: var(--color-steel, #87A2B6);
}
.fp__vow-toggle {
    position: relative; display: inline-block; width: 34px; height: 18px;
}
.fp__vow-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.fp__vow-slider {
    position: absolute; inset: 0; background: #ccc; border-radius: 9px;
    cursor: pointer; transition: background 0.2s;
}
.fp__vow-slider::before {
    content: ''; position: absolute; width: 14px; height: 14px;
    left: 2px; top: 2px; background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.fp__vow-toggle input:checked + .fp__vow-slider {
    background: var(--color-orange, #FE8100);
}
.fp__vow-toggle input:checked + .fp__vow-slider::before {
    transform: translateX(16px);
}
.fp__vow-label { font-weight: 600; }
.fp__vow-notice {
    display: none; margin-bottom: 12px; padding: 8px 12px;
    background: rgba(254, 129, 0, 0.08); border-left: 3px solid var(--color-orange, #FE8100);
    font-size: 12px; color: #555; border-radius: 0 4px 4px 0;
}
.fp__vow-notice.is-visible { display: block; }

/* ── Status Pills ─────────────────────────────────────────────────────── */
.fp__status-row {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.fp__status-pill {
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    border-radius: 16px; cursor: pointer;
    border: 1px solid var(--color-steel, #87A2B6);
    background: #fff; color: var(--color-steel, #87A2B6);
    transition: all 0.15s;
}
.fp__status-pill.is-active {
    background: var(--color-navy, #282460); color: #fff;
    border-color: var(--color-navy, #282460);
}
.fp__status-pill:hover:not(.is-active) {
    background: var(--color-light-blue, #CEE8F2);
}

/* ── Sticky Live Count Bar ────────────────────────────────────────────── */
.fp__count-bar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; margin-bottom: 16px; border-radius: 8px;
    background: var(--color-light-blue, #CEE8F2);
    border-bottom: 1px solid var(--color-steel, #87A2B6);
}
.fp__count-bar.is-empty {
    background: rgba(254, 129, 0, 0.08);
    border-bottom-color: var(--color-orange, #FE8100);
}
.fp__count-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp__count-num {
    font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700;
    color: var(--color-navy, #282460);
}
.fp__count-label { font-size: 14px; color: var(--color-navy, #282460); }
.fp__count-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.fp__count-pill {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    background: rgba(40, 36, 96, 0.1); color: var(--color-navy, #282460);
    font-weight: 600;
}
.fp__count-cta {
    padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer;
    font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif;
    background: var(--color-blue, #1B81C1); color: #fff;
    white-space: nowrap; transition: opacity 0.15s;
}
.fp__count-cta:hover { opacity: 0.9; }
.fp__count-cta:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* ── Core Filters ─────────────────────────────────────────────────────── */
.fp__core { margin-bottom: 16px; }
.fp__core-row {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 10px; margin-bottom: 10px;
}
@media (max-width: 1200px) {
    .fp__core-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .fp__core-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shared field styles ──────────────────────────────────────────────── */
.fp__field { }
.fp__field label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--color-steel, #87A2B6); margin-bottom: 3px;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-family: 'Source Sans 3', sans-serif;
}
.fp__field input,
.fp__field select {
    width: 100%; padding: 7px 8px;
    border: 1px solid var(--color-border, #e2e4e9); border-radius: 4px;
    font-size: 13px; font-family: inherit; background: #fff;
}
.fp__field input:focus,
.fp__field select:focus {
    border-color: var(--color-navy, #282460); outline: none;
}
.fp__field--full { grid-column: 1 / -1; }

/* ── Checkbox toggle ──────────────────────────────────────────────────── */
.fp__check {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; cursor: pointer; padding: 4px 0;
}
.fp__check input { margin: 0; accent-color: var(--color-navy, #282460); }

/* ── Collapsible Category Sections ────────────────────────────────────── */
.fp__section {
    margin-bottom: 8px; border-bottom: 1px solid var(--color-border, #e2e4e9);
    overflow-x: hidden;
}
.fp__section-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 0; background: none; border: none;
    cursor: pointer; font-family: inherit;
}
.fp__section-header:hover { opacity: 0.8; }
.fp__section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--color-steel, #87A2B6);
}
.fp__section-arrow {
    font-size: 12px; color: var(--color-steel, #87A2B6);
    transition: transform 0.2s;
}
.fp__section.is-expanded .fp__section-arrow { transform: rotate(90deg); }
.fp__section-body { padding-bottom: 12px; }
.fp__section-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 900px) {
    .fp__section-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Chip groups (multi-select) ───────────────────────────────────────── */
.fp__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    overflow-x: hidden;
}
.fp__chip {
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    border-radius: 16px; cursor: pointer;
    border: 1px solid var(--color-border, #e2e4e9);
    background: #fff; color: #555; transition: all 0.15s;
}
.fp__chip.is-selected {
    background: var(--color-navy, #282460); color: #fff;
    border-color: var(--color-navy, #282460);
}
.fp__chip:hover:not(.is-selected) {
    border-color: var(--color-navy, #282460); color: var(--color-navy, #282460);
}

/* ── Compass grid (House Faces 2×2) ───────────────────────────────────── */
.fp__compass-grid {
    display: grid; grid-template-columns: repeat(2, 60px);
    gap: 6px;
}
.fp__compass-chip {
    width: 60px; height: 48px; display: flex; align-items: center;
    justify-content: center; font-size: 14px; font-weight: 700;
    border-radius: 6px; cursor: pointer;
    border: 1px solid var(--color-border, #e2e4e9);
    background: #fff; color: #555; transition: all 0.15s;
}
.fp__compass-chip.is-selected {
    background: var(--color-navy, #282460); color: #fff;
    border-color: var(--color-navy, #282460);
}

/* ── "All Filters" Expander ───────────────────────────────────────────── */
.fp__allfilters-toggle {
    display: block; width: 100%; padding: 10px;
    margin: 12px 0; border: 2px dashed var(--color-border, #e2e4e9);
    border-radius: 8px; cursor: pointer;
    background: var(--color-light-blue, #CEE8F2);
    color: var(--color-navy, #282460); font-size: 14px; font-weight: 600;
    text-align: center; font-family: inherit;
    transition: border-color 0.15s;
}
.fp__allfilters-toggle:hover { border-color: var(--color-navy, #282460); }
.fp__allfilters-wrap { padding: 12px 0; }
.fp__allfilters-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.fp__allfilters-grid .fp__field label { font-size: 10px; }
.fp__allfilters-grid .fp__field input,
.fp__allfilters-grid .fp__field select { font-size: 12px; padding: 5px 6px; }
@media (max-width: 1200px) {
    .fp__allfilters-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .fp__allfilters-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── VOW-only fields (hidden until VOW toggle ON) ─────────────────────── */
.fp__vow-only { display: none; }

/* ── School autocomplete dropdown ─────────────────────────────────────── */
.fp__school-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 15;
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 0 0 6px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-height: 160px; overflow-y: auto;
}
.fp__school-item {
    padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.fp__school-item:hover { background: var(--color-light-blue, #CEE8F2); }
.fp__school-input { position: relative; }

/* ── Subview: Push Listing card grid ───────────────────────────────────── */
.cd__push-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin: 16px 0;
}
.cd__push-card {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; overflow: hidden; position: relative;
}
.cd__push-card.is-checked { border-color: var(--color-gold, #c9a96e); }
.cd__push-card-check {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 22px; height: 22px; cursor: pointer; accent-color: var(--color-navy, #282460);
}
.cd__push-card-photo {
    height: 130px; background-size: cover; background-position: center;
    background-color: #eee;
}
.cd__push-card-info { padding: 10px 12px; }
.cd__push-card-price {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 16px; font-weight: 700; color: var(--color-navy, #282460);
}
.cd__push-card-addr { font-size: 13px; color: #555; }
.cd__push-card-stats { font-size: 12px; color: #888; margin-top: 2px; }
.cd__push-card-badges { display: flex; gap: 6px; margin-top: 4px; }
.cd__push-card-badge {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    background: #e8eaee; color: #555;
}

/* ── Subview: Push actions (note + send) ───────────────────────────────── */
.cd__push-actions {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px; margin-top: 16px;
}
.cd__push-actions textarea {
    width: 100%; padding: 10px; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical;
    min-height: 60px; margin-bottom: 12px;
}
.cd__push-btns { display: flex; gap: 12px; }
.cd__push-btns .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cd__push-link-result {
    margin-top: 12px; display: flex; gap: 8px; align-items: center;
}
.cd__push-link-result input {
    flex: 1; padding: 6px 10px;
    border: 1px solid var(--color-border, #e2e4e9); border-radius: 4px;
    font-size: 13px;
}

/* ── Subview: Search Builder results list ──────────────────────────────── */
.cd__search-results {
    margin: 16px 0;
}
.cd__search-result-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f0f1f5; font-size: 13px;
}
.cd__search-result-addr { font-weight: 600; }
.cd__search-result-price { color: var(--color-navy, #282460); font-weight: 700; }
.cd__search-result-status { font-size: 11px; color: #888; }

/* ── Subview: Save Search form ─────────────────────────────────────────── */
.cd__save-search {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px; margin-top: 16px;
}
.cd__save-search .fp__field { margin-bottom: 12px; }

/* ── Subview breadcrumb ────────────────────────────────────────────────── */
.cd__subview-breadcrumb {
    font-size: 13px; margin-bottom: 16px;
}
.cd__subview-breadcrumb a {
    color: var(--color-navy, #282460); text-decoration: none;
}
.cd__subview-breadcrumb a:hover { text-decoration: underline; }

@media (max-width: 1366px) {
    .cd__push-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   Agent Portal v1.9.2 — Design Refinements + Push Wizard + Search Builder
   ============================================================================= */

/* ── Canvas backgrounds ─────────────────────────────────────────────── */
.cd__main--push,
.cd__main--search { background: #F4F6F9; border-radius: 10px; padding: 20px; }

/* ── Section headers (navy bg, white text, rounded top) ─────────────── */
.fp__section-header {
    background: #282460; color: #fff; padding: 10px 16px;
    border-radius: 8px 8px 0 0; border: none; width: 100%;
    text-align: left; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center;
}
.fp__section-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: #fff;
}
.fp__section-arrow { color: #fff; font-size: 12px; }

/* ── Section body (white bg, border, rounded bottom) ────────────────── */
.fp__section-body {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-top: none; border-radius: 0 0 8px 8px; padding: 16px;
}

/* ── Core filters: white card wrapper ───────────────────────────────── */
.fp__core {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px; margin-bottom: 16px;
}

/* ── Status pills: rounded, navy active ─────────────────────────────── */
.fp__status-pill {
    border-radius: 20px; padding: 5px 14px; font-size: 12px;
    font-weight: 600; border: 1px solid var(--color-border, #e2e4e9);
    background: #fff; color: #555; cursor: pointer;
    transition: all 0.15s ease;
}
.fp__status-pill.is-active {
    background: #282460; color: #fff; border-color: #282460;
}
.fp__status-pill:hover:not(.is-active) {
    border-color: #282460; color: #282460;
}

/* ── Property type tabs: rounded pill style ─────────────────────────── */
.fp__type-tab {
    border-radius: 20px; padding: 6px 18px; font-size: 13px;
    font-weight: 600; border: 1px solid var(--color-border, #e2e4e9);
    background: #fff; color: #555; cursor: pointer;
    transition: all 0.15s ease;
}
.fp__type-tab.is-active {
    background: #282460; color: #fff; border-color: #282460;
}
.fp__type-tab:hover:not(.is-active) {
    border-color: #282460; color: #282460;
}

/* ── Live count bar: white bg, blue border-bottom, large count ──────── */
.fp__count-bar {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-bottom: 2px solid #1B81C1; border-radius: 8px;
    padding: 12px 16px; margin: 16px 0;
    display: flex; justify-content: space-between; align-items: center;
}
.fp__count-num {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 24px; font-weight: 700; color: #282460;
}
.fp__count-label {
    font-size: 14px; color: #888; margin-left: 6px;
}
.fp__count-pill {
    display: inline-block; background: #E3F2FD; color: #1565c0;
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    margin-left: 6px;
}

/* ── Chips: slate unselected, light-blue selected ───────────────────── */
.fp__chip {
    background: #F1F5F9; color: #555; border: 1px solid transparent;
    border-radius: 20px; padding: 4px 12px; font-size: 12px;
    cursor: pointer; transition: all 0.15s ease;
}
.fp__chip.is-active {
    background: #CEE8F2; color: #282460; border-color: #1B81C1;
}
.fp__compass-chip {
    background: #F1F5F9; color: #555; border: 1px solid transparent;
    border-radius: 50%; width: 36px; height: 36px; font-size: 12px;
    font-weight: 600; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.fp__compass-chip.is-active {
    background: #CEE8F2; color: #282460; border-color: #1B81C1;
}

/* ── All Filters toggle: white bg, dashed border, full-width centered ─ */
.fp__allfilters-toggle {
    display: block; width: 100%; text-align: center;
    padding: 10px; background: #fff; border: 2px dashed var(--color-border, #e2e4e9);
    border-radius: 8px; font-size: 13px; font-weight: 600;
    color: #282460; cursor: pointer; margin: 16px 0;
    transition: border-color 0.15s ease;
}
.fp__allfilters-toggle:hover,
.fp__allfilters-toggle.is-open {
    border-color: #282460;
}

/* ── VOW toggle: orange switch ──────────────────────────────────────── */
.fp__vow-slider {
    background: #ccc;
}
.fp__vow-toggle input:checked + .fp__vow-slider {
    background: #FE8100;
}

/* ── VOW warning bar ────────────────────────────────────────────────── */
.fp__vow-notice {
    display: none; background: #FFF3E0; color: #E65100;
    border: 1px solid #FFE0B2; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; margin-bottom: 12px;
}
.fp__vow-notice.is-visible { display: block; }


/* ── Push Wizard: Step indicator (3 circles + connecting lines) ────── */
.push-step__indicator {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 24px;
}
.push-step__circle {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 13px; font-weight: 700;
    background: #e2e4e9; color: #888;
    transition: all 0.2s ease;
}
.push-step__circle.is-active {
    background: #282460; color: #fff;
}
.push-step__circle.is-done {
    background: #2e7d32; color: #fff;
}
.push-step__line {
    width: 60px; height: 2px; background: #e2e4e9;
    transition: background 0.2s ease;
}
.push-step__line.is-done { background: #2e7d32; }
.push-step__label {
    font-size: 11px; color: #888; text-align: center;
    margin-top: 4px;
}
.push-step__labels {
    display: flex; justify-content: center; gap: 44px;
    margin-top: -4px; margin-bottom: 20px;
}

/* ── Step 2: Header bar (back + counter + next) ──────────────────── */
.push-step2__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e4e9);
}
.push-step2__back,
.push-step2__next {
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: none; background: none; color: #282460;
    padding: 6px 12px;
}
.push-step2__back:hover,
.push-step2__next:hover { text-decoration: underline; }
.push-step2__next { background: #282460; color: #fff; border-radius: 6px; }
.push-step2__next:disabled { opacity: 0.4; cursor: not-allowed; }
.push-step2__counter {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 14px; font-weight: 600; color: #282460;
}

/* ── Step 2: Card grid (4 columns) ─────────────────────────────────── */
.push-step2__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 1200px) { .push-step2__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .push-step2__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .push-step2__grid { grid-template-columns: 1fr; } }

/* ── Step 2: Listing card with select overlay ──────────────────────── */
.listing-card__wrap {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; overflow: hidden; position: relative;
    transition: border-color 0.15s ease;
    display: flex; flex-direction: column;
}
.listing-card__wrap.is-selected {
    border-color: var(--color-gold, #c9a96e);
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.3);
}
.listing-card__wrap.is-disabled {
    opacity: 0.45; pointer-events: none;
}
.listing-card__photo-wrap {
    position: relative; height: 150px; overflow: hidden;
    background: #eee;
}
.listing-card__wrap .listing-card__photo {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.listing-card__status-badge {
    position: absolute; top: 8px; left: 8px;
    background: rgba(40, 36, 96, 0.85); color: #fff;
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 4px; text-transform: uppercase;
}
.listing-card__dom-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgba(255, 255, 255, 0.9); color: #555;
    font-size: 10px; font-weight: 600; padding: 2px 6px;
    border-radius: 4px;
}

/* ── Photo nav arrows (hover reveal) ──────────────────────────────── */
.listing-card__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.75); border: none;
    cursor: pointer; display: none; align-items: center;
    justify-content: center; font-size: 14px; color: #333;
    z-index: 3;
}
.listing-card__nav--prev { left: 6px; }
.listing-card__nav--next { right: 6px; }
.listing-card__photo-wrap:hover .listing-card__nav { display: flex; }

/* ── "See Larger" link ────────────────────────────────────────────── */
.listing-card__enlarge {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 10px;
    padding: 2px 8px; border-radius: 4px; cursor: pointer;
    border: none; display: none; z-index: 3;
}
.listing-card__photo-wrap:hover .listing-card__enlarge { display: block; }

.listing-card__info {
    padding: 10px 12px; flex: 1;
    display: flex; flex-direction: column;
}
.listing-card__wrap .listing-card__price {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 16px; font-weight: 700; color: #282460;
    flex-shrink: 0;
}
.listing-card__addr { font-size: 13px; color: #555; margin-top: 1px; flex-shrink: 0; }
.listing-card__stats { font-size: 12px; color: #888; margin-top: auto; flex-shrink: 0; }

.listing-card__select-btn {
    display: block; width: 100%; padding: 8px;
    background: #f4f6f9; border: none; border-top: 1px solid var(--color-border, #e2e4e9);
    font-size: 12px; font-weight: 600; color: #282460;
    cursor: pointer; text-align: center;
    transition: background 0.15s ease;
}
.listing-card__select-btn:hover { background: #CEE8F2; }
.listing-card__wrap.is-selected .listing-card__select-btn {
    background: #282460; color: #fff;
}

/* ── Select button anchored to bottom via flex ─────────────────────── */
.listing-card__select-btn { margin-top: auto; }

/* ── Sub-type checkboxes row ──────────────────────────────────────── */
.fp__core-subtypes {
    padding: 8px 0 4px; display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.fp__subtype-label {
    font-size: 12px; font-weight: 600; color: #282460;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-right: 4px;
}
.fp__subtype-checks { display: flex; gap: 12px; flex-wrap: wrap; }
.fp__check--inline { font-size: 13px; }

/* ── Load More button ──────────────────────────────────────────────── */
.push-step2__load-more {
    display: block; width: 100%; text-align: center;
    padding: 10px; background: #fff; border: 2px dashed var(--color-border, #e2e4e9);
    border-radius: 8px; font-size: 13px; font-weight: 600;
    color: #282460; cursor: pointer; margin-top: 12px;
}
.push-step2__load-more:hover { border-color: #282460; }

/* ── Lightbox ──────────────────────────────────────────────────────── */
.trg-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.85); display: flex;
    align-items: center; justify-content: center;
}
.trg-lightbox__img {
    max-width: 90vw; max-height: 90vh; object-fit: contain;
    border-radius: 6px;
}
.trg-lightbox__close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.2); border: none;
    color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.trg-lightbox__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.2); border: none;
    color: #fff; font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.trg-lightbox__arrow--prev { left: 16px; }
.trg-lightbox__arrow--next { right: 16px; }

/* ── Step 3: Compose layout ────────────────────────────────────────── */
.push-step3__compose {
    background: #fff; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 20px;
}
.push-step3__field { margin-bottom: 14px; }
.push-step3__field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #282460; margin-bottom: 4px;
}
.push-step3__field input,
.push-step3__field textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 6px; font-size: 14px; font-family: inherit;
}
.push-step3__field textarea { resize: vertical; min-height: 80px; }
.push-step3__field input[readonly] { background: #f8f9fb; }

.push-step3__selected-strip {
    background: #f4f6f9; border-radius: 6px; padding: 10px 14px;
    font-size: 13px; color: #555; margin-bottom: 16px;
}
.push-step3__btns { display: flex; gap: 12px; margin-top: 16px; }

/* ── Textable link card (branded) ──────────────────────────────────── */
.push-step3__link-card {
    background: #f4f6f9; border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 8px; padding: 16px; margin-top: 16px;
}
.push-step3__link-card-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 13px; font-weight: 600; color: #282460; margin-bottom: 8px;
}
.push-step3__link-row {
    display: flex; gap: 8px; align-items: center;
}
.push-step3__link-input {
    flex: 1; padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e4e9);
    border-radius: 6px; font-size: 13px; background: #fff;
}
.push-step3__copy-btn {
    background: #282460; color: #fff; border: none;
    padding: 8px 16px; border-radius: 6px; font-size: 12px;
    font-weight: 600; cursor: pointer;
}
.push-step3__copy-btn:hover { opacity: 0.9; }

/* ── Search builder: Compact list rows ─────────────────────────────── */
.search-compact-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f0f1f5;
}
.search-compact-row__thumb {
    width: 60px; height: 60px; border-radius: 6px;
    object-fit: cover; flex-shrink: 0; background: #eee;
}
.search-compact-row__info { flex: 1; min-width: 0; }
.search-compact-row__price {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 15px; font-weight: 700; color: #282460;
}
.search-compact-row__addr { font-size: 13px; color: #555; }
.search-compact-row__stats { font-size: 12px; color: #888; }

/* ── Step containers (hidden by default) ───────────────────────────── */
.push-step-container { display: none; }
.push-step-container.is-active { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   v1.9.4 additions
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fix 1: Location dropdown styling ─────────────────────────────── */
.fp__location-dropdown {
    max-height: 360px; overflow-y: auto;
    border: 1px solid #e2e4e9; border-radius: 0 0 6px 6px;
    background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.fp__loc-category-header {
    padding: 6px 12px 2px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; color: #ffffff; background: #282460;
    text-transform: uppercase;
}
.fp__loc-category-results {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 10px;
}
.fp__loc-result {
    padding: 4px 10px; background: #F1F5F9; border: 1px solid #E2E8F0;
    border-radius: 4px; cursor: pointer; font-size: 13px; color: #282460;
    white-space: nowrap; font-family: inherit;
}
.fp__loc-result:hover { background: #CEE8F2; border-color: #1B81C1; }

/* ── Card spacer: absorbs variable address height, keeps meta anchored ── */
.listing-card__spacer { flex: 1; min-height: 8px; }

/* ── Divider between stats and view link ─────────────────────────── */
.listing-card__divider {
    border: none; border-top: 1px solid #e2e4e9;
    margin: 6px 0 4px; flex-shrink: 0;
}

/* ── View Listing link on cards ──────────────────────────────────── */
.listing-card__view-link {
    margin-top: 2px; flex-shrink: 0;
}
.listing-card__view-link a {
    font-size: 11px; color: #1B81C1; text-decoration: none;
}
.listing-card__view-link a:hover { text-decoration: underline; }

/* ── Fix 6: Send success state ────────────────────────────────────── */
.push-compose__success {
    text-align: center; padding: 60px 40px;
    background: #fff; border-radius: 8px;
}
.push-compose__success-icon {
    width: 64px; height: 64px; background: #1B81C1; color: #fff;
    border-radius: 50%; font-size: 32px; line-height: 64px;
    margin: 0 auto 24px; font-weight: 700;
}
.push-compose__success h2 {
    color: #282460; font-family: 'Montserrat', Arial, sans-serif;
    font-size: 22px; margin-bottom: 8px;
}
.push-compose__success p { font-size: 15px; color: #555; margin-bottom: 4px; }
.push-compose__success-sub { color: #888 !important; font-size: 13px !important; }
.push-compose__success-actions {
    margin-top: 28px; display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
.push-compose__btn {
    display: inline-block; padding: 10px 24px; border-radius: 6px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
}
.push-compose__btn--primary { background: #282460; color: #fff; }
.push-compose__btn--primary:hover { opacity: 0.9; }
.push-compose__btn--secondary { background: #f4f6f9; color: #282460; border: 1px solid #e2e4e9; }
.push-compose__btn--secondary:hover { background: #CEE8F2; }
.push-compose__error {
    padding: 10px 14px; background: #FEF2F2; color: #991B1B;
    border: 1px solid #FECACA; border-radius: 6px;
    font-size: 13px; margin-bottom: 12px;
}

/* ── v1.9.5 additions ────────────────────────────────────────────── */

/* School autocomplete dropdown */
.fp__school-dropdown {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border: 1px solid #e2e4e9; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 20;
    max-height: 200px; overflow-y: auto;
}
.fp__school-dropdown-item {
    display: block; width: 100%; padding: 8px 12px;
    background: none; border: none; text-align: left;
    font-size: 13px; color: #333; cursor: pointer;
    font-family: inherit;
}
.fp__school-dropdown-item:hover { background: #CEE8F2; }

/* School chips */
.fp__school-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.fp__school-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #CEE8F2; color: #282460; font-size: 12px;
    padding: 2px 8px; border-radius: 4px;
}
.fp__school-chip button {
    background: none; border: none; cursor: pointer;
    color: #282460; font-size: 14px; line-height: 1;
    padding: 0 2px;
}

/* Hero split CTA buttons */
.hero__cta-split {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.hero__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-size: var(--text-base);
    font-weight: 700;
    text-decoration: none;
    padding: 12px 24px;
    border: 2px solid #FE8100;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    min-width: 180px;
    background: #F5F5F0;
    color: #282460;
}
.hero__cta-btn:hover {
    background: #FE8100;
    color: #fff;
    box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
    .hero__cta-split {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
    .hero__cta-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* Hero search bar — animated reveal */
.hero__search-wrap {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}
.hero__search-wrap[aria-hidden="false"] {
    margin-top: 20px;
}

/* Filter error banner (auto-dismiss after 5s) */
.fp__filter-error {
    padding: 10px 14px; background: #FFF3E0; color: #E65100;
    border: 1px solid #FFB74D; border-radius: 6px;
    font-size: 13px; margin-top: 8px;
    animation: fp-error-fade 5s ease forwards;
}
@keyframes fp-error-fade {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Agent Profile Page ────────────────────────────────────────────────────── */
.agent-profile__header {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    margin-bottom: var(--space-8);
}
.agent-profile__photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.agent-profile__photo-placeholder {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-gray-400);
}
.agent-profile__name {
    font-family: var(--font-headline);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-1);
}
.agent-profile__team {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-4);
}
.agent-profile__contact {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.agent-profile__bio {
    margin-bottom: var(--space-8);
    line-height: 1.7;
    color: var(--color-gray-600);
}
.agent-profile__bio h2 {
    font-family: var(--font-headline);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-3);
}
.agent-profile__listings {
    margin-bottom: var(--space-8);
}
.agent-profile__listings h2 {
    font-family: var(--font-headline);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-4);
}
.agent-profile__contact-form {
    max-width: 640px;
    margin-bottom: var(--space-8);
}
.agent-profile__contact-form h2 {
    font-family: var(--font-headline);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-4);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 768px) {
    .agent-profile__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .agent-profile__contact {
        justify-content: center;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   BLOG — Post Single, Archive, Cards, Sidebar
   v3.12.12
   ============================================================ */

/* ── Blog Page Header Band — now uses .page-identity (native) ─ */

/* ── Category Filter Pills ──────────────────────────────────── */
.trg-blog-filter {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-3) 0;
    position: sticky;
    top: var(--header-height);
    z-index: 10;
}
.trg-blog-filter .container {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}
.trg-blog-filter__pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-4);
    border: 1.5px solid var(--color-gray-200);
    border-radius: 20px;
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}
.trg-blog-filter__pill:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}
.trg-blog-filter__pill.is-active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

/* ── Blog Post Grid (Archive / Home) ────────────────────────── */
.trg-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    padding: var(--space-10) 0;
}

/* ── Post Card ──────────────────────────────────────────────── */
.trg-post-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
}
.trg-post-card:hover {
    box-shadow: var(--shadow-md);
}
.trg-post-card__img-link {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.trg-post-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.trg-post-card:hover .trg-post-card__img {
    transform: scale(1.03);
}
.trg-post-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-gray-100);
}
.trg-post-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.trg-post-card__cat {
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-orange);
    text-decoration: none;
    margin-bottom: var(--space-2);
    display: block;
}
.trg-post-card__title {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-3);
    color: var(--color-navy);
}
.trg-post-card__title a {
    color: inherit;
    text-decoration: none;
}
.trg-post-card__title a:hover {
    color: var(--color-orange);
}
.trg-post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trg-post-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}

/* ── Single Post Layout ─────────────────────────────────────── */
.trg-post__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
    align-items: start;
    padding: var(--space-8) 0 var(--space-16);
}
.trg-post__header {
    margin: 0 0 var(--space-6);
    text-align: left;
}
.trg-post__category {
    display: inline-block;
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-orange);
    text-decoration: none;
    margin-bottom: var(--space-4);
}
.trg-post__title {
    font-family: var(--font-headline);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-navy);
    margin: 0 0 var(--space-5);
}
.trg-post__meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    flex-wrap: wrap;
}
.trg-post__sep { color: var(--color-gray-400); }

/* Featured image — full content width */
.trg-post__hero {
    margin-bottom: var(--space-10);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 7;
}
.trg-post__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Legacy wrapper — grid now on .trg-post__layout */

/* ── Post Prose (body content) ──────────────────────────────── */
.trg-post__prose {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-gray-900);
}
.trg-post__prose h1 {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: var(--space-10) 0 var(--space-4);
    line-height: 1.25;
}
.trg-post__prose h2 {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: var(--space-10) 0 var(--space-4);
    line-height: 1.25;
}
.trg-post__prose h3 {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-navy);
    margin: var(--space-8) 0 var(--space-3);
    line-height: 1.3;
}
.trg-post__prose p { margin: 0 0 var(--space-5); }
.trg-post__prose ul,
.trg-post__prose ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-6);
}
.trg-post__prose li { margin-bottom: var(--space-2); }
.trg-post__prose a {
    color: var(--color-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.trg-post__prose a:hover { color: var(--color-orange); }
.trg-post__prose strong { font-weight: 700; color: var(--color-navy); }
.trg-post__prose blockquote {
    border-left: 4px solid var(--color-orange);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
    background: var(--color-gray-100);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-style: italic;
    color: var(--color-gray-600);
}
.trg-post__prose h4 {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-navy);
    margin: var(--space-6) 0 var(--space-2);
    line-height: 1.3;
}
.trg-post__prose hr {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: var(--space-6) 0;
}
.trg-post__prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: var(--space-6) 0;
}

/* Tags */
.trg-post__tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}
.trg-post__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: 20px;
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition);
}
.trg-post__tag:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

/* Post Navigation */
.trg-post__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-200);
}
.trg-post__nav-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.trg-post__nav-link:hover {
    border-color: var(--color-navy);
    box-shadow: var(--shadow-sm);
}
.trg-post__nav-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.trg-post__nav-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.trg-post__nav-link:hover .trg-post__nav-img img {
    transform: scale(1.03);
}
.trg-post__nav-img--placeholder {
    background: var(--color-gray-100);
}
.trg-post__nav-text {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.trg-post__nav-link--next .trg-post__nav-text {
    text-align: right;
}
.trg-post__nav-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-400);
}
.trg-post__nav-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-navy);
    line-height: 1.4;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.trg-post__sidebar {
    position: sticky;
    top: calc( var(--header-height) + var(--space-6) );
}
.trg-sidebar__widget {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.trg-sidebar__widget-title {
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-navy);
    margin: 0 0 var(--space-4);
}
/* CTA widgets */
.trg-sidebar__cta { text-align: center; }
.trg-sidebar__cta--primary { border-top: 3px solid var(--color-orange); }
.trg-sidebar__cta--secondary { border-top: 3px solid var(--color-navy); }
.trg-sidebar__cta-title {
    font-family: var(--font-headline);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 var(--space-2);
}
.trg-sidebar__cta-text {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}
.trg-sidebar__cta-btn {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    font-family: var(--font-headline);
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: opacity var(--transition);
}
.trg-sidebar__cta-btn:hover { opacity: 0.88; }
.trg-sidebar__cta-btn--orange {
    background: var(--color-orange);
    color: var(--color-white);
}
.trg-sidebar__cta-btn--navy {
    background: var(--color-navy);
    color: var(--color-white);
}
/* Recent posts */
.trg-sidebar__recent {
    list-style: none;
    margin: 0;
    padding: 0;
}
.trg-sidebar__recent-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}
.trg-sidebar__recent-item:last-child { border-bottom: none; }
.trg-sidebar__recent-link {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: var(--space-1);
}
.trg-sidebar__recent-link:hover { color: var(--color-orange); }
.trg-sidebar__recent-date {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}
/* Category list */
.trg-sidebar__cats {
    list-style: none;
    margin: 0;
    padding: 0;
}
.trg-sidebar__cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-100);
    transition: color var(--transition);
}
.trg-sidebar__cats li:last-child .trg-sidebar__cat-link { border-bottom: none; }
.trg-sidebar__cat-link:hover,
.trg-sidebar__cat-link.is-active { color: var(--color-orange); }
.trg-sidebar__cat-count {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    background: var(--color-gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}
/* Context-aware links */
.trg-sidebar__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.trg-sidebar__links li { padding: var(--space-2) 0; }
.trg-sidebar__links a {
    font-size: var(--text-sm);
    color: var(--color-blue);
    text-decoration: none;
}
.trg-sidebar__links a:hover { color: var(--color-orange); }

/* ── Blog Empty State ───────────────────────────────────────── */
.trg-blog-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-16);
    color: var(--color-gray-400);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .trg-post__layout {
        grid-template-columns: 1fr 260px;
        gap: var(--space-8);
    }
}

@media (max-width: 768px) {
    .trg-post__layout {
        grid-template-columns: 1fr;
    }
    .trg-post__sidebar {
        position: static;
    }
    .trg-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    .trg-post__title {
        font-size: var(--text-3xl);
    }
    .trg-post__hero { aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
    .trg-blog-grid {
        grid-template-columns: 1fr;
    }
    .trg-post__nav {
        grid-template-columns: 1fr;
    }
}