/* built-from-style.css:638751b751e687f8a5143c5414f672e7 by bin/build-public-css.js — do not edit by hand */
:root {
    --primary-50: #f0fdfa;
    --primary-100: #ccfbf1;
    --primary-200: #99f6e4;
    --primary-500: #14b8a6;
    --primary-600: #0f766e;
    --primary-700: #0b544e;
    --primary-900: #063a36;

    --accent-50: #fff7ed;
    --accent-500: #f97316;
    --accent-600: #ea580c;

    --gray-50: #f8fafa;
    --gray-100: #f1f3f4;
    --gray-200: #e6e9ea;
    --gray-300: #d7dbdd;
    --gray-400: #a5adb2;
    --gray-500: #6b7480;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #172023;

    --danger: #dc2626;
    --danger-50: #fef2f2;
    --success: #059669;
    --success-50: #ecfdf5;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(23, 32, 35, 0.06);
    --shadow-md: 0 6px 16px rgba(23, 32, 35, 0.08);
    --shadow-lg: 0 16px 36px rgba(23, 32, 35, 0.14);

    --text: var(--gray-900);
    --muted: var(--gray-500);
    --border: var(--gray-200);
    --bg: var(--gray-50);
    --surface: #ffffff;
    /* Form fields need their own, stronger border + a faint fill so they're clearly visible as
       inputs against a white card — the general --border is deliberately subtle for dividers, but
       that made fields nearly invisible on white in light mode. */
    --field-bg: #f3f6f7;
    --field-border: #bcc6cb;
    color-scheme: light;

    /* Teal used as standalone text/icon color (links, prices, badges) — kept separate
       from --primary-600/700 because those are also used as solid button/header
       backgrounds, which must stay dark+saturated even in dark mode (white text on top). */
    --primary-ink: var(--primary-600);
    --primary-ink-strong: var(--primary-700);
    --primary-tint-bg: var(--primary-50);
    --primary-tint-border: var(--primary-200);
    --avatar-bg: var(--primary-100);
    --accent-tint-bg: var(--accent-50);
    --accent-tint-border: #fed7aa;
    --accent-tint-bg-strong: #ffedd5;
    --focus-ring: var(--primary-100);

    --success-bg: var(--success-50);
    --success-text: #065f46;
    --success-border: #a7f3d0;
    --danger-bg: var(--danger-50);
    --danger-text: #991b1b;
    --danger-border: #fecaca;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --purple-bg: #ede9fe;
    --purple-text: #5b21b6;
    --indigo-bg: #e0e7ff;
    --indigo-text: #3730a3;
    --under-offer-bg: #ffedd5;
    --under-offer-text: #9a3412;
    --reduced-bg: #fce7f3;
    --reduced-text: #9d174d;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text: #eef2f2;
        --muted: #93a0a3;
        --border: #263034;
        --bg: #0b1210;
        --surface: #141b1d;
        --field-bg: #1b2427;
        --field-border: #37454d;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
        color-scheme: dark;

        --gray-50: #0b1210;
        --gray-100: #141b1d;
        --gray-200: #1f2a2d;
        --gray-300: #2b373b;
        --gray-400: #55636b;
        --gray-500: #7c8a90;
        --gray-600: #a3b0b4;
        --gray-700: #c7d0d2;
        --gray-900: #f2f6f6;

        --primary-ink: #5eead4;
        --primary-ink-strong: #5eead4;
        --primary-tint-bg: rgba(20, 184, 166, 0.16);
        --primary-tint-border: rgba(94, 234, 212, 0.4);
        --avatar-bg: rgba(20, 184, 166, 0.22);
        --accent-tint-bg: rgba(249, 115, 22, 0.16);
        --accent-tint-border: rgba(251, 146, 60, 0.4);
        --accent-tint-bg-strong: rgba(249, 115, 22, 0.26);
        --focus-ring: rgba(20, 184, 166, 0.25);

        --success-bg: rgba(16, 185, 129, 0.16);
        --success-text: #6ee7b7;
        --success-border: rgba(110, 231, 183, 0.35);
        --danger-bg: rgba(220, 38, 38, 0.18);
        --danger-text: #fca5a5;
        --danger-border: rgba(252, 165, 165, 0.35);
        --warning-bg: rgba(245, 158, 11, 0.18);
        --warning-text: #fcd34d;
        --purple-bg: rgba(139, 92, 246, 0.18);
        --purple-text: #c4b5fd;
        --indigo-bg: rgba(99, 102, 241, 0.18);
        --indigo-text: #a5b4fc;
        --under-offer-bg: rgba(249, 115, 22, 0.18);
        --under-offer-text: #fdba74;
        --reduced-bg: rgba(219, 39, 119, 0.2);
        --reduced-text: #f9a8d4;
    }
}

:root[data-theme="dark"] {
    --text: #eef2f2;
    --muted: #93a0a3;
    --border: #263034;
    --bg: #0b1210;
    --surface: #141b1d;
    --field-bg: #1b2427;
    --field-border: #37454d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
    color-scheme: dark;

    --gray-50: #0b1210;
    --gray-100: #141b1d;
    --gray-200: #1f2a2d;
    --gray-300: #2b373b;
    --gray-400: #55636b;
    --gray-500: #7c8a90;
    --gray-600: #a3b0b4;
    --gray-700: #c7d0d2;
    --gray-900: #f2f6f6;

    --primary-ink: #5eead4;
    --primary-ink-strong: #5eead4;
    --primary-tint-bg: rgba(20, 184, 166, 0.16);
    --primary-tint-border: rgba(94, 234, 212, 0.4);
    --avatar-bg: rgba(20, 184, 166, 0.22);
    --accent-tint-bg: rgba(249, 115, 22, 0.16);
    --accent-tint-border: rgba(251, 146, 60, 0.4);
    --accent-tint-bg-strong: rgba(249, 115, 22, 0.26);
    --focus-ring: rgba(20, 184, 166, 0.25);

    --success-bg: rgba(16, 185, 129, 0.16);
    --success-text: #6ee7b7;
    --success-border: rgba(110, 231, 183, 0.35);
    --danger-bg: rgba(220, 38, 38, 0.18);
    --danger-text: #fca5a5;
    --danger-border: rgba(252, 165, 165, 0.35);
    --warning-bg: rgba(245, 158, 11, 0.18);
    --warning-text: #fcd34d;
    --purple-bg: rgba(139, 92, 246, 0.18);
    --purple-text: #c4b5fd;
    --indigo-bg: rgba(99, 102, 241, 0.18);
    --indigo-text: #a5b4fc;
    --under-offer-bg: rgba(249, 115, 22, 0.18);
    --under-offer-text: #fdba74;
    --reduced-bg: rgba(219, 39, 119, 0.2);
    --reduced-text: #f9a8d4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Just the device's home-indicator/gesture-bar safe area (0 on desktop) — the old fixed
       bottom tab bar it used to clear has been removed. */
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a {
    color: var(--primary-ink);
    text-decoration: none;
}

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Admin impersonation ("signed in as user") banner — deliberately loud so it's never missed. */
.impersonation-banner {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    background: #7c3aed; color: #fff; padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
    text-align: center;
}
.impersonation-banner .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.impersonation-banner strong { font-weight: 800; }
.impersonation-banner form { margin: 0; }
.impersonation-banner button {
    background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.5);
    padding: 5px 12px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 0.82rem;
}
.impersonation-banner button:hover { background: rgba(255,255,255,0.3); }

/* Base size for nav-link-icon so it's never unconstrained when used standalone (e.g. inside a
   .type-pill or a .meta line). Context rules like .header-nav/.back-link .nav-link-icon override. */
.nav-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------- Header ---------- */

.header {
    background: var(--primary-700);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--shadow-md);
}

.header .logo {
    font-weight: 800;
    font-size: 1.55rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.header .logo span {
    color: var(--accent-500);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    padding: 6px;
    margin: -6px 0;
    cursor: pointer;
    flex-shrink: 0;
}

.header-menu-toggle .icon {
    width: 24px;
    height: 24px;
}

/* This header (logo + nav) had no mobile handling at all before this — .header-nav's plain
   flex row with no wrap just let extra items (Log Out, always the last one, was usually the
   victim) silently overflow past the right edge of the screen with no scrollbar or other hint
   they were even there, on every page that uses this public layout (every page isn't the CRM
   shell, which already has its own hamburger sidebar for exactly this reason). A first pass
   just wrapped the nav in place, which kept everything on-screen but read as a messy, uneven
   two-row jumble. This instead folds it behind a hamburger toggle, matching the CRM sidebar's
   own open/close pattern (assets/js/app.js), so mobile gets one tidy dropdown instead. */
@media (max-width: 640px) {
    .header-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: var(--primary-700);
        padding: 10px 20px 16px;
        box-shadow: var(--shadow-md);
    }

    .header-nav.open {
        display: flex;
    }

    .header-nav a,
    .header-nav .theme-toggle-btn,
    .header-nav .logout-btn {
        width: 100%;
        padding: 10px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        justify-content: flex-start;
    }

    .header-nav .theme-toggle-form:first-child .theme-toggle-btn {
        border-top: none;
    }

    .header-nav .logout-form {
        width: 100%;
    }

    .header-nav .btn-pill {
        width: fit-content;
    }
}

.header-nav a {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.header-nav a:hover {
    color: #fff;
}

.header-nav .nav-link-icon {
    width: 16px;
    height: 16px;
}

/* Separates "Book a Demo" (for agencies) from the Log In / Register pair so they don't read as one group. */
.header-nav-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

/* The mobile dropdown already draws a rule between every item. */
@media (max-width: 640px) {
    .header-nav-divider {
        display: none;
    }
}

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.header-nav .btn-pill {
    background: var(--accent-500);
    color: #fff;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.header-nav .btn-pill:hover {
    background: var(--accent-600);
    color: #fff;
}

/* Log In + Register as a matched pair: outline + solid buttons of the same size. */
.header-auth {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.header-nav .header-auth a {
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
    line-height: 1.2;
}

.header-nav .header-auth-login {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.header-nav .header-auth-login:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.header-nav .header-auth .btn-pill {
    border: 1.5px solid var(--accent-500);
}

/* Mobile dropdown: two equal full-width buttons side by side. */
@media (max-width: 640px) {
    .header-auth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .header-nav .header-auth a {
        width: auto;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 0.95rem;
    }

    .header-nav .header-auth .btn-pill {
        width: auto;
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
    }
}

.logout-form {
    display: inline-flex;
}

.logout-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.logout-btn:hover {
    color: #fff;
}

.theme-toggle-form {
    display: inline-flex;
}

.theme-toggle-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.88);
    padding: 0;
    display: inline-flex;
    cursor: pointer;
}

.theme-toggle-btn:hover {
    color: #fff;
}

.theme-toggle-btn .icon {
    width: 19px;
    height: 19px;
}

/* Both states are always in the DOM (one per theme, "which one to offer switching to"), and
   CSS alone decides which is visible — the toggle click handler (assets/js/app.js) only ever
   flips the [data-theme] attribute, so this needs no JS re-render of icon/label markup at all. */
.theme-toggle-offer-dark,
.theme-toggle-offer-light {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.theme-toggle-offer-light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-offer-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-offer-light {
    display: inline-flex;
}

/* ---------- Layout ---------- */

.container {
    padding: 20px 16px;
    max-width: 900px;
    margin: 0 auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.back-link .nav-link-icon {
    width: 16px;
    height: 16px;
}

.flash, .errors {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.flash {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.flash-success {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    border-width: 1.5px;
}

.flash-success .badge-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.errors {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

.errors ul {
    margin: 0;
    padding-left: 18px;
}

/* ---------- Hero / search ---------- */

/* The banner photo: a light WebP, and a much smaller one on phones (the banner is what Google times the page by). */
:root { --hero-photo: url('../img/hero-bg.webp'); }
@media (max-width: 900px) { :root { --hero-photo: url('../img/hero-bg-sm.webp'); } }

.hero {
    background:
        linear-gradient(165deg, rgba(6, 58, 54, 0.58) 0%, rgba(4, 33, 30, 0.72) 100%),
        var(--hero-photo) center/cover no-repeat;
    color: #fff;
    padding: 64px 16px 100px;
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hero {
        min-height: 520px;
        padding: 80px 16px 120px;
    }
}

.hero::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.18), transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.2), transparent 70%);
    /* Purely decorative — without this, a real click/tap landing in its 320px footprint gets
       swallowed by the blob instead of reaching whatever's actually underneath it. On desktop
       the hero is tall enough that nothing interactive ever sits this low, so this went
       unnoticed; on mobile the hero compresses and the "More Filters" toggle lands right in
       it, silently eating taps there (z-index alone wouldn't fix this — ::after paints last
       among same-stacking-level siblings, i.e. on top, regardless of DOM nesting depth). */
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.hero-kicker {
    display: block;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-500);
    margin: 0 auto 12px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero h1 {
    font-size: clamp(1.9rem, 4.5vw + 1rem, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 auto 14px;
    text-align: center;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.hero p {
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1vw + 0.7rem, 1.2rem);
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Search-box place autocomplete dropdown (body-appended, fixed-positioned). */
.place-suggest-dropdown {
    position: fixed;
    z-index: 4000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 48px -12px rgba(15, 40, 36, 0.35), 0 4px 12px rgba(15, 40, 36, 0.10);
    padding: 8px;
    max-height: 360px;
    overflow-y: auto;
    transform-origin: top center;
    animation: placeSuggestIn 0.14s ease-out;
}
@keyframes placeSuggestIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.place-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition: background 0.12s ease;
}
.place-suggest-item + .place-suggest-item { margin-top: 2px; }
.place-suggest-item:hover,
.place-suggest-item.active {
    background: var(--primary-tint-bg);
}
.place-suggest-pin-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
    transition: background 0.12s ease, color 0.12s ease;
}
.place-suggest-item:hover .place-suggest-pin-wrap,
.place-suggest-item.active .place-suggest-pin-wrap {
    background: var(--primary-600);
    color: #fff;
}
.place-suggest-pin { width: 18px; height: 18px; }
.place-suggest-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.place-suggest-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.place-suggest-sub {
    font-size: 0.8rem;
    color: var(--muted);
}
.place-suggest-count {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}
.place-suggest-item:hover .place-suggest-count,
.place-suggest-item.active .place-suggest-count {
    background: rgba(255, 255, 255, 0.7);
    color: var(--primary-ink);
}

/* Live "N properties on the market" pill under the hero subtitle. */
.hero .hero-count {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: -14px auto 30px;
    padding: 9px 20px;
    border-radius: var(--radius-full);
    background: rgba(8, 28, 25, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    text-shadow: none;
}
.hero .hero-count-num {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -0.01em;
}
.hero .hero-count-text { color: rgba(255, 255, 255, 0.82); }
.hero-count-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
    animation: heroCountPulse 2.2s ease-out infinite;
}
@keyframes heroCountPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-count-dot { animation: none; }
}

.search-form {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: grid;
    gap: 12px;
    color: var(--text);
    box-shadow: var(--shadow-md);
}

/* Grid items default to min-width:auto, a floor at their content's own intrinsic width — for a
   text input, Chrome factors its current VALUE into that, not just its `size` attribute. Type
   a long unbroken value (a title with no spaces, say) into any field on this form and, with no
   override, that one field's intrinsic width becomes the whole grid column's minimum, forcing
   the entire form off the right edge of the screen. min-width:0 removes that floor so a field
   scrolls its own overflowing text internally instead of ever widening the form around it. */
.search-form > * {
    min-width: 0;
}

.hero .search-form {
    box-shadow: var(--shadow-lg);
    margin-bottom: -48px;
    position: relative;
}

.hero-search {
    background: var(--surface);
    border-radius: var(--radius-full);
    padding: 6px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    box-shadow: 0 24px 48px -16px rgba(4, 20, 18, 0.45), var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: -48px;
    position: relative;
}

.hero-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    min-width: 0;
}

.hero-search-field .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}

.hero-search-select {
    flex: 0 0 auto;
    max-width: 168px;
}

.hero-search-input {
    flex: 1;
}

.hero-search-select select,
.hero-search-input input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.92rem;
    color: var(--text);
    width: 100%;
}

.hero-search-select select {
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px;
}

/* The closed pill needs a transparent background to blend into .hero-search-field, but a
   transparent <select> background leaks into its native dropdown popup too — Chrome then
   falls back to a plain white popup while the text stays whatever --text resolves to, which
   in dark mode is a near-white color on that white popup: unreadable. Options get their own
   explicit, solid, theme-aware colors so the popup is never transparent, regardless of what
   the closed pill looks like. */
.hero-search-select select option {
    background-color: var(--surface);
    color: var(--text);
    font-weight: 500;
    padding: 8px 12px;
}

.hero-search-select select:focus,
.hero-search-input input:focus {
    outline: none;
    box-shadow: none;
}

.hero-search-field:focus-within {
    background: var(--bg);
    border-radius: var(--radius-full);
}

.hero-search-divider {
    width: 1px;
    background: var(--border);
    margin: 8px 0;
    flex-shrink: 0;
}

.hero-filters-toggle-wrap {
    display: flex;
    justify-content: center;
    /* .hero-search has margin-bottom: -48px (deliberate — lets the pill visually overlap
       into the white section below the hero), which also drags whatever follows it up by
       that same 48px in normal block flow. Cancel that pull (+48px) before adding the
       actual visible gap (+16px) we want under the pill. */
    margin-top: 64px;
}

.hero-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-filters-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
}

.hero-filters-toggle .toggle-filters-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.hero-filters-toggle.open .toggle-filters-icon {
    transform: rotate(45deg);
}

.hero-filters-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-top: 14px;
    display: grid;
    gap: 12px;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

/* Custom listing-type picker — replaces the native <select>'s dropdown (which can't be
   themed beyond its own text/background colors: square corners, no shadow, browser-default
   highlight color, no border-radius to match the pill it lives in). The <select> itself
   stays in the DOM as the real form field and as the fallback control if JS never runs. */
.custom-select {
    position: relative;
    flex: 1;
    min-width: 0;
}

.custom-select.js-enhanced .custom-select-native {
    display: none;
}

.custom-select-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    /* This is a button, not text content — an accidental drag-click shouldn't leave the
       label text sitting there highlighted in the browser's selection color. */
    user-select: none;
}

/* Needed because .custom-select-trigger is a real <button>: the site-wide `button:hover`
   rule (solid brand-color fill) is a pseudo-class + element selector, which is MORE specific
   than the plain single-class `.custom-select-trigger` rule above — so without this, hovering
   the trigger repaints it with the default button hover color instead of staying transparent. */
.custom-select-trigger:hover {
    background: transparent;
}

.custom-select.js-enhanced .custom-select-trigger {
    display: flex;
}

.custom-select-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.custom-select.open .custom-select-chevron {
    transform: rotate(180deg);
}

/* position: fixed (not absolute) and positioned via JS (see custom-select.js) rather than
   `top/left` relative to .custom-select — the homepage hero this lives in has `overflow:
   hidden` (needed to clip its own decorative background blobs), which would otherwise clip
   the bottom of this listbox whenever it has more options than fit in the hero's remaining
   height below the search bar. `position: fixed` escapes that ancestor's clipping. */
.custom-select-listbox {
    position: fixed;
    width: max-content;
    /* width:max-content sizes this to whichever option's text is widest with no wrapping —
       fine for short option labels (province names, listing types), but a long one (a lengthy
       property title) can make the whole box wider than a mobile screen, with no horizontal
       scroll to reach the overflow — it just silently runs off the right edge. This caps it to
       the viewport so long labels wrap onto a second line inside the box instead. */
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
}

.custom-select-option {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.1s ease;
    /* Belt-and-braces for the max-width cap above: normal wrapping only breaks at spaces, so a
       single very long unbroken token (garbled data, a URL, anything with no whitespace) would
       still push past the box's edge on its own line. This allows a mid-word break as a last
       resort, only once a token is too wide to fit any other way. */
    overflow-wrap: anywhere;
}

/* A neutral gray hover (not the same teal tint .selected uses below) so the two states never
   read as visually identical when hovering the option that's already selected — and
   --gray-200, not --gray-100, since --gray-100 is literally the same color as the listbox's
   own --surface background in dark mode (both #141b1d), which would make hover invisible
   there specifically even though it showed up fine in light mode. */
.custom-select-option:hover,
.custom-select-option:focus {
    background: var(--gray-200);
    outline: none;
}

.custom-select-option.selected {
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    font-weight: 700;
}

.custom-select-option.selected:hover,
.custom-select-option.selected:focus {
    background: var(--primary-tint-bg);
}

.hero-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-600);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    padding: 0 26px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.hero-search-btn .icon {
    width: 18px;
    height: 18px;
}

.hero-search-btn:hover {
    background: var(--primary-700);
}

.hero-search-btn:active {
    transform: scale(0.97);
}

@media (max-width: 680px) {
    .hero-search {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: 10px;
        gap: 2px;
    }

    .hero-search-divider {
        width: auto;
        height: 1px;
        margin: 2px 12px;
    }

    .hero-search-select,
    .hero-search-input {
        max-width: none;
        width: 100%;
    }

    .hero-search-field:focus-within {
        border-radius: var(--radius-md);
    }

    .hero-search-btn {
        border-radius: var(--radius-md);
        padding: 14px;
        margin-top: 6px;
    }
}

/* .filters-panel (results page) was missing from this list, so its .row divs (Property Type +
   Province, Min/Max Price, Min Beds/Baths) never got the 2-column grid treatment and stacked
   as plain full-width blocks instead — the actual cause of the results page's search/filters
   card looking cramped and unpolished. */
.search-form .row,
.filters-panel .row,
.hero-filters-panel .row {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr — a bare 1fr track's implicit minimum is its content's
       own min-content width (a <select>'s longest option, an input's rendered value), which
       varies by the viewer's actual font rendering. That's invisible on a desktop test but on
       a real phone, with different system font metrics, the two columns' min-content widths
       can sum past the viewport and force the whole form to scroll sideways. minmax(0, 1fr)
       lets the track shrink past that, so overflow is the input's own problem, never the grid's. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* On phones these two-up rows (search filters, settings, the New/Confirm password pair) are too
   cramped side by side and their labels wrap — stack them to one column. Placed after the base
   rule so it wins at narrow widths. */
@media (max-width: 520px) {
    .search-form .row,
    .filters-panel .row,
    .hero-filters-panel .row {
        grid-template-columns: 1fr;
    }
}

.field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--muted);
    margin: 4px 0 18px;
    cursor: pointer;
}

.checkbox-field input {
    width: auto;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--primary-600);
}

.features-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 12px;
}

.more-filters-panel {
    gap: 12px;
}

.toggle-filters-icon {
    transition: transform 0.2s ease;
}

.btn-icon.open .toggle-filters-icon {
    transform: rotate(45deg);
}

/* ---------- Modern search bar + filters panel ---------- */

.search-input-wrap {
    position: relative;
}

.search-input-wrap .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
}

.search-input-wrap input {
    padding-left: 40px;
}

.quick-search-bar {
    display: grid;
    gap: 12px;
}

.featured-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.featured-header .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-header .section-title .icon {
    color: #d97706;
}

#featured-region-form .listing-type-field {
    min-width: 220px;
}

/* Results-page listing-type picklist — same .custom-select JS/markup as the homepage hero
   search, just wrapped in a bordered field to match this page's squared-off input style
   instead of the hero's rounded pill. */
.listing-type-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
}

.listing-type-field > .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}

.listing-type-field .custom-select {
    flex: 1;
    min-width: 0;
}

.filters-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-top: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: grid;
    gap: 12px;
}

/* Collapsible filter panel on the results page: starts collapsed once filters are applied. */
.filters-collapse { display: grid; gap: 12px; }
.filters-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    flex-shrink: 0;
}
.filters-summary-active {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filters-summary-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.2s ease;
}
details.filters-collapse[open] .filters-summary-chevron { transform: rotate(180deg); }
.filters-collapse-body { display: grid; gap: 12px; margin-top: 4px; }

.filters-panel .section-title {
    margin: 0 0 2px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.features-grid .checkbox-field {
    margin: 4px 0;
}

.theme-choice-row {
    display: flex;
    gap: 10px;
}

/* ---------- Forms ---------- */

input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm);
    font-size: 0.94rem;
    background: var(--field-bg);
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input::placeholder, textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea {
    resize: vertical;
    min-height: 90px;
}

/* ---------- Buttons ---------- */

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-600);
    color: #fff;
    border: none;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

button:hover, .btn:hover {
    background: var(--primary-700);
    box-shadow: var(--shadow-sm);
}

button:active, .btn:active {
    transform: translateY(1px);
}

button.secondary, .btn.secondary {
    background: var(--surface);
    color: var(--primary-ink);
    border: 1.5px solid var(--primary-tint-border);
}

button.secondary:hover, .btn.secondary:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
}

button.favorited {
    background: var(--accent-tint-bg);
    color: var(--accent-600);
    border: 1.5px solid var(--accent-tint-border);
}

button.favorited:hover {
    background: var(--accent-tint-bg-strong);
}

button.danger, .btn.danger {
    background: var(--surface);
    color: var(--danger);
    border: 1.5px solid var(--danger-border);
}

button.danger:hover, .btn.danger:hover {
    background: var(--danger-bg);
    box-shadow: none;
}

button.block, .btn.block {
    width: 100%;
}

.btn-icon .icon {
    width: 18px;
    height: 18px;
}

/* Selectable package cards (franchise tier picker on register) — replaces a long-label native
   <select> that rendered badly on mobile. */
.package-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
@media (max-width: 560px) {
    .package-options { grid-template-columns: 1fr; }
}
.package-option {
    position: relative;
    display: block;
    cursor: pointer;
}
.package-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.package-option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.package-option:hover .package-option-card { border-color: var(--primary-500); }
.package-option input:checked + .package-option-card {
    border-color: var(--primary-600);
    background: var(--primary-tint-bg);
    box-shadow: 0 0 0 3px var(--primary-tint-bg);
}
.package-option-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.package-option input:checked + .package-option-card .package-option-check {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}
.package-option-check .icon { width: 13px; height: 13px; }
.package-option-name {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text);
    padding-right: 30px;
}
.package-option-price {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--primary-ink);
}
.package-option-price small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.package-option-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}
.package-option-sub .badge-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Cards / grid ---------- */

.section-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 28px 0 14px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Browsing pages (home featured, search results): wider on desktop so buyers see three homes per row. */
.container.container-browse {
    max-width: 1240px;
}

@media (min-width: 1000px) {
    .container-browse .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Link card that fills the empty end of the last grid row (partials/_grid_filler.php). Shown only at
   the column count where a gap actually exists; hidden on phones (one column never has a gap). */
.grid-filler {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 24px;
    text-align: center;
    color: inherit;
    text-decoration: none;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--primary-tint-bg);
    transition: border-color 0.15s ease;
}

.grid-filler:hover {
    border-color: var(--primary-tint-border, var(--border));
}

.grid-filler-icon .icon,
.grid-filler-icon svg {
    width: 28px;
    height: 28px;
}

.grid-filler-cta {
    font-weight: 700;
    color: var(--primary-ink);
}

@media (min-width: 640px) and (max-width: 999px) {
    .container-browse .grid-filler--2 {
        display: flex;
    }
}

@media (min-width: 1000px) {
    .container-browse .grid-filler--3 {
        display: flex;
        grid-column: span var(--fill-span3);
    }
}

.card {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* A visible lift off the page: the old --shadow-sm (0.06 alpha) plus the very light --border
       left white cards almost edgeless on the near-white light background. This layered shadow
       reads clearly in light mode and is effectively invisible on the dark background, where the
       border does the separating. */
    box-shadow: 0 1px 3px rgba(23, 32, 35, 0.09), 0 8px 20px -8px rgba(23, 32, 35, 0.12);
    border: 1px solid var(--border);
    display: block;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.card .thumb {
    width: 100%;
    height: 175px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    position: relative;
}

.card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

a.card:hover .thumb img {
    transform: scale(1.06);
}

.card .body {
    padding: 14px;
}

.card .price {
    font-weight: 800;
    color: var(--primary-ink-strong);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.card .tag {
    display: inline-block;
    background: var(--accent-tint-bg);
    color: var(--accent-600);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.card .title {
    font-weight: 700;
    margin: 5px 0 3px;
    color: var(--text);
    font-size: 0.98rem;
}

/* No bare .meta rule existed before this — every other property comes from the specific
   scoped rules below (.card .meta, .hero .meta, etc.) or plain inherited/browser defaults.
   This exists purely so a long unbroken word inside one (a title with no spaces, typed as a
   single run of characters) wraps onto a new line instead of forcing the whole page wider —
   the same class of overflow bug as .list-row .info strong above, just for plain <p>/<span>
   captions instead of list rows. */
.meta {
    overflow-wrap: break-word;
    word-break: break-word;
}

.card .meta {
    color: var(--muted);
    font-size: 0.83rem;
}

.card-address {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 0.83rem;
    margin-top: 2px;
}

.card-address .icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.card-description {
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.4;
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.card-specs span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-specs .icon {
    width: 15px;
    height: 15px;
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

.status-awaiting_payment { background: var(--purple-bg); color: var(--purple-text); }
.status-pending { background: var(--warning-bg); color: var(--warning-text); }
.status-active { background: var(--success-bg); color: var(--success-text); }
.status-rejected { background: var(--danger-bg); color: var(--danger-text); }
.status-sold, .status-rented { background: var(--indigo-bg); color: var(--indigo-text); }
.status-under_offer { background: var(--under-offer-bg); color: var(--under-offer-text); }
.status-reduced { background: var(--reduced-bg); color: var(--reduced-text); }
.status-expired { background: var(--gray-100); color: var(--gray-700); }

/* Same amber identity as .featured-badge (the on-photo ribbon), but inline — sits next to the
   status pill in a table cell rather than pinned absolute over an image. */
.featured-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin-left: 4px;
}

.featured-inline-badge .icon {
    width: 11px;
    height: 11px;
}

/* Sits directly on a photo, so it needs its own solid, high-contrast colors
   regardless of theme — the translucent .status-pill tokens above are tuned
   for flat card/table backgrounds and read as barely-there over an image. */
.card-status-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-shadow: var(--shadow-sm);
    color: #fff;
}
.card-status-badge.status-under_offer { background: #c2410c; }
.card-status-badge.status-sold,
.card-status-badge.status-rented { background: #3730a3; }
.card-status-badge.status-reduced { background: #be185d; }

/* ---------- Property detail ---------- */

.detail-page {
    max-width: 1100px;
}

.back-to-listings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.back-to-listings:hover {
    color: var(--text);
}

.back-to-listings .icon {
    width: 16px;
    height: 16px;
}

.detail-gallery {
    display: flex;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    scroll-snap-type: x mandatory;
    box-shadow: var(--shadow-md);
    /* The point of this whole component: swipeable, but no visible scrollbar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.detail-gallery::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 640px) {
    .gallery-slide {
        aspect-ratio: 16 / 9;
    }
}

.gallery-empty {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: var(--gray-100);
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(15, 23, 23, 0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(3px);
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.gallery-arrow:hover {
    background: rgba(15, 23, 23, 0.8);
    transform: translateY(-50%) scale(1.07);
}

/* The global `button:active { transform: translateY(1px); }` rule (style.css, Buttons
   section) REPLACES this button's own `transform: translateY(-50%)` centering the instant
   it's pressed — transform isn't additive across separate rules — so on mousedown the arrow
   jumped out of its vertical-centered position toward the top of the image, then snapped back
   on release. That visible "drop and return" also meant the cursor was no longer over the
   button by the time mouseup fired, so the click's target became whatever was now underneath
   it instead of the arrow itself. Composing both transforms here keeps it centered through
   the press. */
.gallery-arrow:active {
    transform: translateY(-50%) translateY(1px);
}

.gallery-arrow-prev { left: 12px; }
.gallery-arrow-next { right: 12px; }
.gallery-arrow .icon { width: 20px; height: 20px; }

.gallery-counter {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(15, 23, 23, 0.6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    z-index: 3;
    backdrop-filter: blur(3px);
}

.gallery-expand {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 23, 0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(3px);
    padding: 0;
    transition: background 0.15s ease;
}

.gallery-expand:hover { background: rgba(15, 23, 23, 0.8); }
.gallery-expand .icon { width: 16px; height: 16px; }

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 2px;
}

/* The dot still looks 7px, but a transparent 9px border around it makes it a comfortable thumb target. */
.gallery-dot {
    box-sizing: content-box;
    width: 7px;
    height: 7px;
    min-height: 0;
    border-radius: 50%;
    background: var(--border);
    background-clip: padding-box;
    border: 9px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.gallery-dot.active {
    background-color: var(--primary-600); /* colour only: keeps the 7px dot inside its larger tap area */
    transform: scale(1.35);
}

/* ---------- Fullscreen lightbox ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 8, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 56px 16px;
}

.lightbox.open {
    display: flex;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox-close,
.lightbox-arrow {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(3px);
    padding: 0;
    transition: background 0.15s ease;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Same fix as .gallery-arrow:active above, and the actual root cause of the "click next and
   the lightbox closes" bug: .lightbox-arrow centers itself with `transform: translateY(-50%)`,
   which the global `button:active { transform: translateY(1px); }` rule silently replaced
   (not composed) the instant the button was pressed — so the arrow visibly jumped away from
   under the cursor on mousedown and snapped back on release, meaning the click's mouseup
   landed on the backdrop behind it instead of the button, closing the whole lightbox. Enlarging
   the button earlier only reduced how often this was noticeable; this is the actual fix.
   .lightbox-close doesn't need the same override — it's positioned with plain top/right, not
   transform, so it was never affected. */
.lightbox-arrow:active {
    transform: translateY(-50%) translateY(1px);
}

.lightbox-close { top: 18px; right: 18px; width: 46px; height: 46px; }
/* 64px (up from 48px) — the previous size was an easy miss on a real click (not a
   pixel-perfect scripted one), and missing this button means the click lands on the
   full-viewport backdrop behind it, which closes the whole lightbox. A bigger target
   makes that far less likely without changing the "click outside to close" behavior itself. */
.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 64px; height: 64px; }
.lightbox-arrow-prev { left: 14px; }
.lightbox-arrow-next { right: 14px; }
.lightbox-close .icon { width: 20px; height: 20px; }
.lightbox-arrow .icon { width: 26px; height: 26px; }

.lightbox-counter {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 13px;
    border-radius: var(--radius-full);
}

/* ---------- Detail header / two-column layout ---------- */

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 4px;
}

/* Same fix as .search-form > * above, same reason: a flex item's default min-width:auto sizes
   it to fit its content (the title, uninterrupted) before overflow-wrap ever gets a chance to
   break it — this removes that floor so the title wraps inside the available width instead of
   pushing the whole page wider. */
.detail-header > * {
    min-width: 0;
}

.detail-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    overflow-wrap: break-word;
}

.detail-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.detail-location .nav-link-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.detail-price {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--primary-ink-strong);
    background: var(--primary-tint-bg);
    border: 1.5px solid var(--primary-tint-border);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .detail-price {
        font-size: 2.2rem;
    }
}

.detail-section {
    padding: 16px;
    margin-bottom: 16px;
}

.detail-description {
    color: var(--text);
    line-height: 1.6;
}

.detail-layout {
    margin-top: 8px;
}

.detail-sidebar {
    margin-top: 24px;
}

@media (min-width: 960px) {
    .detail-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 32px;
        align-items: start;
    }

    .detail-sidebar {
        margin-top: 0;
        position: sticky;
        top: 88px;
    }
}

/* ---------- CRM record page (client record, etc.) ---------- */

.record-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 55%, var(--primary-500) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin: 14px 0 20px;
    box-shadow: var(--shadow-md);
}

.record-hero .avatar {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.record-hero .avatar-fallback {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.record-hero-info {
    flex: 1;
    min-width: 180px;
}

.record-hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: #fff;
}

.record-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.record-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 11px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Right-aligned row of actions in a table cell (e.g. "Open" + remove) — keeps a rectangular
   button and a round icon button inline and vertically centred instead of the icon button
   (display:flex) dropping onto its own line. */

/* Danger variant of the outline icon button — red icon/border, red tint on hover. */

.section-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.section-icon-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-icon-chip .icon {
    width: 18px;
    height: 18px;
}

.section-card-header h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
}

.section-card-header .count-badge {
    margin-left: auto;
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

/* Rows inside a record section card read as a clean divided list rather than
   boxes-within-a-box — .list-row's own border/shadow are only useful standalone. */

.detail-section .empty-hint {
    color: var(--muted);
    font-size: 0.88rem;
    padding: 6px 0 2px;
}

/* ---------- Document Vault: guided steps, type pills, friendly field chips ---------- */

/* Target only the description text, not the numbered badge (also a span, directly under .guide-step):
   a bare ".guide-step span" is more specific than ".guide-step-number" and was overriding the badge's
   white number with muted grey — near-invisible on the teal circle in light theme. */

.type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.type-pill--file {
    background: var(--gray-100);
    color: var(--muted);
}

.type-pill--template {
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
}

/* An inline-editable row's <summary> styled to look and read exactly like the other action
   buttons beside it (Download/Delete) — plain grey .meta text reads as a caption, not a
   control, and was easy to miss entirely as the way to actually edit a document. */

/* Full-width KPI banner — deliberately NOT part of .stats-row's grid: that grid
   stretches every card to match its tallest sibling, and this value (currency +
   two labels) needs more room than a plain "0 / Active" counter can spare at the
   grid's 140px column floor without text wrapping awkwardly. Giving it the full
   row width instead means it never has to fight the small cards for space. */

.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.spec-grid .spec {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.spec .icon {
    width: 20px;
    height: 20px;
    color: var(--primary-500);
}

.spec strong {
    display: block;
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 800;
}

.badge-verified {
    color: var(--primary-ink);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-icon {
    width: 15px;
    height: 15px;
}

/* ---------- Profile / avatar ---------- */

.profile-header-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

a.profile-header-card:hover {
    box-shadow: var(--shadow-md);
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 1rem;
}

.avatar-lg {
    width: 68px;
    height: 68px;
    font-size: 1.4rem;
}

.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg);
    color: var(--primary-ink-strong);
}

/* ---------- Map ---------- */

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 14px;
    flex-wrap: wrap;
}

.results-header .section-title {
    margin: 0;
}

#toggle-map-view {
    flex-shrink: 0;
    width: auto;
    padding: 9px 16px;
}

.map-box {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    z-index: 1;
}

#property-map {
    margin-bottom: 20px;
}

.map-box-wide {
    height: 320px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
    .map-box-wide {
        height: 420px;
    }
}

.map-box-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
    background: var(--gray-50);
    color: var(--muted);
}

.map-box-placeholder .icon {
    width: 28px;
    height: 28px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.map-box-placeholder strong {
    color: var(--text);
    font-size: 1rem;
}

.map-box-placeholder span {
    font-size: 0.85rem;
    max-width: 380px;
}

/* ---------- Modal ---------- */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-overlay.open {
    display: flex;
}

.modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 22px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-box .field {
    margin-bottom: 14px;
}

.modal-box .actions {
    justify-content: flex-end;
    margin-top: 4px;
}

.featured-popup-box {
    text-align: center;
}

/* ---------- Branded confirm modal (replaces the browser's native confirm() everywhere in the CRM — see assets/js/app.js's data-confirm handler) ---------- */

.confirm-modal-box {
    text-align: center;
    max-width: 380px;
}

.confirm-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--danger-bg);
    color: var(--danger-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-icon .icon {
    width: 26px;
    height: 26px;
}

.confirm-modal-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.confirm-modal-message {
    margin: 0;
    white-space: pre-line;
}

.confirm-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.confirm-modal-actions button {
    width: 100%;
}

.featured-popup-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--primary-tint-bg);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-popup-icon .icon {
    width: 26px;
    height: 26px;
}

.featured-popup-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
}

.pagination a, .pagination span {
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
}

.pagination a:hover {
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

.pagination .active {
    background: var(--primary-600);
    color: #fff;
    border-color: var(--primary-600);
}

/* Ellipsis between windowed page numbers — a plain separator, not a bordered box. */
.pagination .pagination-gap {
    border: none;
    padding: 7px 2px;
    color: var(--muted);
    font-weight: 700;
}

/* ---------- Customizable dashboard widgets ---------- */
/* The board is a bounded "canvas" — GridStack lays widgets out freely inside it (drag + resize). */

/* Chart cog — always available on chart widgets so anyone can switch chart type. */
/* When the cog sits before grip/remove, don't let margin-left:auto also push those — reset. */

/* ---------- Dashboard / admin rows ---------- */

/* Agency Members list — give each member row calm vertical rhythm (name, email, a status line,
   then role) instead of meta lines mashed together, so it reads like a proper directory record. */
/* One tidy status line: presence · last login. Items align on a shared baseline with a muted
   dot separator, and wrap cleanly on narrow screens instead of colliding. */
/* The value that matters — the actual login date — carries normal ink weight so it reads as
   data, while the "Last login" label and the relative "(2 days ago)" stay muted context. */

/* .list-row's info column can run tall (name, email, a verified badge, presence, sometimes a
   role picker) while .actions is short — align-items:center then centers those short buttons
   against the middle of a much taller block, which on a narrow screen (where there's no spare
   width to fit both side by side anyway) reads as buttons floating over the text. Letting the
   row wrap and pushing .actions onto its own full-width line below fixes both at once. */

/* .custom-select-trigger is transparent by default — everywhere else it's used, an ancestor
   (.hero-search-select, .listing-type-field) supplies the bordered field look. This is the
   first standalone use, so the trigger needs to carry that box itself, matching the plain
   input/select style it replaces (see the global `select` rule) so the closed state looks
   identical to before — only the open dropdown (now the on-brand listbox, not the browser's
   native popup) actually changes. */

/* ---------- Data table (Clients, and anything else that reads better as a grid than a
   stacked list of cards) ---------- */

.table-responsive {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    white-space: nowrap;
}

.data-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 700;
    padding: 12px 16px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.data-table tbody tr:last-of-type td {
    border-bottom: none;
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}

.data-table tbody tr:hover {
    background: var(--primary-tint-bg);
}

/* Phones: a client's name + several pills (Manual, finance, "1 new match") wrap instead of overflowing. */

.data-table .count-badge {
    display: inline-block;
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

/* Dense listings action row: the two secondary toggle actions (Share, Feature/Unfeature) render
   icon-only so all five controls — Edit, Share, status dropdown, Feature, Delete — stay on one
   line instead of wrapping to a ragged second row. The label stays in the DOM for screen readers,
   and each button also carries aria-label + title. On the mobile card layout the labels come back
   (see the <=700px block), where there's room. */

/* Wide screens have room for the words, so "Share" / "Feature" aren't bare icons there either. */

/* Required fields get a red asterisk on their label, so agents know up front what must be filled in. */
.field:has(> :is(input, select, textarea)[required]) > label::after,
.field:has(> .custom-select :is(select)[required]) > label::after {
    content: " *";
    color: var(--danger-text);
    font-weight: 700;
}

/* My Listings: Edit, Share, status, Feature and Delete (bin icon) keep to one tidy line on a
   laptop-width screen or wider; the table gives this column the room and wraps the listing title
   instead. Narrower screens still wrap, and phones get the stacked card layout below. */

/* Below ~700px a multi-column data table can only ever be read by scrolling sideways — turn
   each row into its own card instead, with column headers as inline labels (from a `data-label`
   attribute the PHP template sets per <td>). The first and last column are always left un-
   labelled: first is the row's own identity (name/title — needs no "Client:" prefix restating
   the obvious), last is the actions cell, which reads fine as plain buttons with no label. */
@media (max-width: 700px) {
    .table-responsive {
        overflow-x: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .data-table {
        white-space: normal;
    }

    .data-table thead {
        display: none;
    }

    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .data-table td {
        border-bottom: 1px solid var(--border);
        padding: 8px 0;
    }

    .data-table td:first-child {
        padding-top: 0;
    }

    .data-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-table td[data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }

    .data-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted);
    }

    /* On the stacked mobile card there's room for full labels again, so bring the Share/Feature
       text back rather than leaving bare icons. */

    /* The label-left/content-right split above assumes one short value (a price, a date) —
       fine for those, but a cell with real multi-part content (a status pill, a Featured
       badge, and a wrapped sentence about when either expires) gets squeezed into a narrow
       right-hand column and wraps one word per line. .cell-rich stacks the label above
       instead, so that content gets the card's full width to lay out in. */
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Footer ---------- */

/* Public pages: header / main / footer as a full-height column, so the footer always sits at the
   bottom of the screen on short pages (empty inbox, login) and simply follows long ones. */
.site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 0;
}

.site-body > .header {
    flex-shrink: 0;
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    background: linear-gradient(165deg, var(--primary-900) 0%, #04211e 100%);
    color: rgba(255, 255, 255, 0.7);
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    position: relative;
}

.footer-top {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 16px 8px;
    display: grid;
    gap: 28px;
}

@media (min-width: 640px) {
    .footer-top {
        grid-template-columns: 240px 1fr;
    }
}

.footer-brand .footer-logo {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.footer-brand .footer-logo span {
    color: var(--accent-500);
}

.footer-brand p {
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    max-width: 320px;
    margin: 10px 0 0;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
}

@media (min-width: 640px) {
    .footer-columns {
        /* auto-fit (not a hardcoded repeat(4, ...)) lets the browser drop to 3/2 columns
           as space tightens instead of forcing a ~960px+ minimum total width — a fixed
           4-column minimum overflowed .site-footer's overflow:hidden and silently clipped
           the Legal column at viewports roughly 640-960px wide (common laptop/browser
           window sizes), cutting off "Terms & Conditions" etc. */
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 24px 32px;
    }
}

.footer-col h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 12px;
}

.footer-col h4 .icon {
    width: 15px;
    height: 15px;
    color: var(--accent-500);
    flex-shrink: 0;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    padding: 5px 0;
    transition: color 0.15s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-provinces {
    position: relative;
    max-width: 1100px;
    margin: 24px auto 0;
    padding: 20px 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-provinces h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px;
}

.footer-provinces h4 .icon {
    width: 13px;
    height: 13px;
    color: var(--accent-500);
    flex-shrink: 0;
}

.footer-provinces-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-provinces-links a {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.48);
    padding: 3px 0;
    transition: color 0.15s ease;
}

/* A *trailing* dot (not a leading one) — it rides along at the end of whichever line its own
   link lands on, so a line that wraps always starts flush-left with plain text, never with a
   stray "· " hanging off the front of it. */
.footer-provinces-links a:not(:last-child)::after {
    content: "\00b7";
    display: inline-block;
    color: rgba(255, 255, 255, 0.22);
    margin: 0 12px;
}

.footer-provinces-links a:hover {
    color: var(--accent-500);
}

/* Mobile: each footer section collapses into a tap-to-open dropdown (accordion). Only active once
   footer-accordion.js adds .footer-accordion — so without JS the links stay visible (no dead-end). */
@media (max-width: 680px) {
    .site-footer.footer-accordion .footer-col h4,
    .site-footer.footer-accordion .footer-provinces h4 {
        cursor: pointer;
        margin-bottom: 0;
        padding: 12px 0;
        user-select: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .site-footer.footer-accordion .footer-col h4::after,
    .site-footer.footer-accordion .footer-provinces h4::after {
        content: "";
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex-shrink: 0;
        opacity: 0.7;
    }
    .site-footer.footer-accordion .footer-col.is-open h4::after,
    .site-footer.footer-accordion .footer-provinces.is-open h4::after {
        transform: rotate(-135deg);
    }
    /* Collapse the section body; reveal only when open. */
    .site-footer.footer-accordion .footer-col > a { display: none; }
    .site-footer.footer-accordion .footer-col.is-open > a { display: block; }
    .site-footer.footer-accordion .footer-col.is-open > a:first-of-type { margin-top: 10px; }
    .site-footer.footer-accordion .footer-provinces .footer-provinces-links { display: none; }
    .site-footer.footer-accordion .footer-provinces.is-open .footer-provinces-links { display: flex; margin-top: 12px; }
    /* Each section reads as one stacked, divided row on mobile. */
    .site-footer.footer-accordion .footer-columns { grid-template-columns: 1fr; gap: 0; }
    /* Make "Browse by Province" just another accordion row directly below Legal — drop its extra
       top margin/padding/border (and the footer's bottom padding) so the divider spacing is even. */
    .site-footer.footer-accordion .footer-top { padding-bottom: 0; }
    .site-footer.footer-accordion .footer-provinces {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }
}

.mode-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.mode-tab {
    background: rgba(4, 33, 30, 0.62);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, color 0.15s ease;
}

.mode-tab:hover {
    background: rgba(4, 33, 30, 0.8);
    border-color: #fff;
}

.mode-tab.active {
    background: #fff;
    color: var(--primary-700);
    border-color: #fff;
}

/* .hero p's white/shadowed styling is meant for text sitting directly on the hero photo —
   without this override it leaks (via the plain descendant selector) onto any .meta text
   dynamically inserted deeper inside the hero, e.g. inside the white province-map card,
   rendering it invisible (white text on a white card). Same fix, same reason, for the map
   card's own hint text below it — .hero p (a class + element selector) otherwise beats
   .sa-map-hint (a single class) on specificity regardless of source order. */
.hero .meta,
.hero .sa-map-hint {
    color: var(--muted);
    text-shadow: none;
}

/* ---------- "Search by Map" province picker ---------- */

.sa-map-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-top: 14px;
    box-shadow: var(--shadow-lg);
    /* South Africa's outline is nearly as tall as it is wide, so scaling the SVG to the full
       card width (on a wide desktop card, several hundred px) made the country view dramatically
       taller than the province drill-down view. Switching between them then hid/showed two very
       differently-sized boxes, and everything below the card reflowed upward by the difference —
       scrollY itself never moved, but visually it read as the page jumping. Capping the SVG's own
       size (below) mostly closes that gap; this min-height guarantees no reflow either way. */
    min-height: 540px;
}

@media (max-width: 680px) {
    /* The 540px reservation above is sized for desktop, where the country SVG (bounded to
       400px tall) is the taller of the two views. On a narrow card the SVG shrinks with the
       card's width (it keeps its aspect ratio), but the province view's Leaflet canvas below
       doesn't — it's a fixed height — so on mobile the province view becomes the taller one
       instead, by a wide margin, and the leftover reservation shows up as blank space under
       the country map. Shrinking the canvas here closes most of that gap from both sides. */
    .sa-map-card {
        min-height: 420px;
    }

    .sa-map-canvas {
        height: 220px;
    }
}

.sa-map-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary-ink);
    margin-bottom: 10px;
}

.sa-map-svg-wrap {
    position: relative;
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 140% at 30% 15%, rgba(94, 234, 212, 0.22), transparent 60%),
        radial-gradient(120% 140% at 80% 90%, rgba(249, 115, 22, 0.1), transparent 55%),
        linear-gradient(180deg, #f0fdfa 0%, #e3f4f1 100%);
}

.sa-map-svg {
    display: block;
    /* South Africa's outline is close to 1:1 (roughly as tall as it is wide), so letting this
       scale to the card's full width made it grow just as tall — several hundred px on a wide
       desktop card. Bounding both dimensions keeps it a sensible, consistent size at any card
       width; the flex-centered wrap keeps it centred in the leftover space either way. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 400px;
    filter: drop-shadow(0 10px 20px rgba(6, 58, 54, 0.18));
}

.sa-province-path {
    stroke: #f7fdfc;
    stroke-width: 1.6;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.2s ease, filter 0.15s ease;
    outline: none;
}

.sa-province-path:hover,
.sa-province-path:focus-visible {
    fill: var(--accent-500) !important;
    filter: drop-shadow(0 4px 10px rgba(234, 88, 12, 0.45));
}

.sa-map-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    /* Deliberately a fixed colour, not var(--gray-900) — that token flips from near-black to
       near-white in dark mode (it means "primary text colour", not "dark surface"), which
       silently turned this into a near-white pill with hardcoded white text on top of it. The
       tooltip itself needs to look the same dark chip in both themes. */
    background: #172023;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    z-index: 5;
}

.sa-map-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #172023;
}

.sa-map-hint {
    text-align: center;
    color: var(--muted);
    font-size: 0.84rem;
    margin: 14px 0 0;
}

.sa-map-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--primary-ink);
    font-weight: 700;
    font-size: 0.86rem;
    padding: 0;
    margin-bottom: 14px;
    cursor: pointer;
}

.sa-map-back-btn:hover {
    /* The generic button:hover rule (solid fill + shadow, meant for real filled buttons)
       otherwise wins back the background/shadow on hover even though .sa-map-back-btn's own
       base rule already cleared them at rest — same specificity trap as any plain <button>
       styled to look like a text link: a bare `button:hover` selector still out-specifies a
       single class selector for whichever properties the class's own :hover block leaves
       untouched. */
    background: none;
    box-shadow: none;
    color: var(--primary-ink-strong);
}

.sa-map-canvas {
    width: 100%;
    height: 340px;
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 140% at 30% 15%, rgba(94, 234, 212, 0.22), transparent 60%),
        linear-gradient(180deg, #f0fdfa 0%, #e3f4f1 100%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--primary-tint-border);
}

.sa-map-province-actions {
    margin-top: 14px;
}

@keyframes sa-map-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-map-fade-in {
    animation: sa-map-fade-in 0.25s ease;
}

.sa-town-marker-dot {
    display: block;
    width: 14px;
    height: 14px;
    background: var(--accent-500);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(23, 32, 35, 0.4);
}

/* Several towns too close to tell apart: one numbered bubble; click to zoom in until they split. */
.sa-town-cluster span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent-500);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 2px 8px rgba(23, 32, 35, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.sa-town-cluster:hover span {
    transform: scale(1.1);
}

.sa-town-list-popup .leaflet-popup-content span + a {
    margin-top: 8px;
}

.sa-map-reset {
    padding: 6px 12px;
    font: 700 0.78rem/1 inherit;
    color: var(--primary-ink);
    background: #fff;
    border: 1px solid var(--primary-tint-border);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(23, 32, 35, 0.15);
    cursor: pointer;
}

.sa-map-reset:hover {
    background: var(--primary-tint, #f0fdfa);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
    margin: 10px 14px;
    font-family: inherit;
}

.leaflet-popup-content a {
    display: block;
    font-weight: 700;
    color: var(--primary-ink);
}

.leaflet-popup-content span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

/* ---------- Ribbon / auction badge ---------- */

.gallery-wrap {
    position: relative;
}

.ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fcd34d 0%, #f97316 55%, #ea580c 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 7px 14px 7px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 16px rgba(194, 65, 12, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 2;
    pointer-events: none;
}

.ribbon .icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.auction-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-600);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

/* Bottom-right — the other three corners are already claimed by .ribbon (top-left),
   .auction-badge (top-right) and .card-status-badge (bottom-left, non-active statuses only). */
.featured-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.featured-badge .icon {
    width: 11px;
    height: 11px;
}

.auction-box {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-900));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 18px;
    margin: 16px 0;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.auction-box.auction-live {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
}

.auction-box.auction-ended {
    background: var(--gray-600);
}

.auction-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 6px;
}

.auction-status {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.auction-timer {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.auction-dates {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.auction-current-bid {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.92rem;
}

.auction-current-bid strong {
    font-size: 1.05rem;
}

.bond-result-primary {
    text-align: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.bond-monthly-figure {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-ink-strong);
    letter-spacing: -0.02em;
}

.bond-result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}

.bond-result-grid strong {
    display: block;
    font-size: 0.92rem;
    margin-top: 2px;
    color: var(--text);
}

.footer-bottom {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
    .footer-bottom {
        justify-content: space-between;
    }
}

.footer-bottom-logo {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}

.footer-bottom-logo span {
    color: var(--accent-500);
}

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    transition: color 0.15s ease;
}

.footer-credit span {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    transition: color 0.15s ease;
}

.footer-credit:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-credit:hover span {
    color: var(--accent-500);
}

/* ---------- Messaging ---------- */

.message-bubble {
    max-width: 80%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}

.message-bubble.mine {
    background: var(--primary-600);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message-bubble.theirs {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.message-bubble .meta {
    font-size: 0.68rem;
    opacity: 0.75;
    margin-top: 5px;
}

.chat-log {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* ---------- Presence (Teams-style online/away/offline dots) ---------- */

.presence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.presence-online {
    background: #22c55e;
}

.presence-away {
    background: #f59e0b;
}

.presence-offline {
    background: #9ca3af;
}

.avatar-presence-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.avatar-presence-wrap .presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--surface);
}

.presence-dot-inline {
    vertical-align: middle;
    margin-left: 2px;
}

.presence-label {
    text-transform: capitalize;
}

/* ---------- Unified chat shell (Teams-style rail + pane) ---------- */

.chat-page {
    padding-left: 0;
    padding-right: 0;
    max-width: 1200px;
}

.chat-shell {
    display: flex;
    height: calc(100vh - 220px);
    min-height: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.chat-rail {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.chat-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    gap: 8px;
}

.chat-new {
    display: flex;
    gap: 6px;
}

.chat-new-btn {
    padding: 5px 10px;
    font-size: 0.78rem;
}

.chat-rail-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.chat-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--radius-sm);
    position: relative;
    color: var(--text);
}

.chat-rail-item:hover {
    background: var(--surface);
}

.chat-rail-item.active {
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
}

.chat-rail-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--primary-ink-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-rail-icon .icon {
    width: 17px;
    height: 17px;
}

.chat-rail-icon-support {
    background: var(--accent-tint-bg);
    color: var(--accent-600);
}

.chat-rail-info {
    min-width: 0;
    flex: 1;
}

.chat-rail-info strong {
    display: block;
    font-size: 0.87rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-rail-preview {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-rail-unread {
    flex-shrink: 0;
}

.chat-rail-empty {
    padding: 14px 10px;
}

.chat-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-pane-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-pane-back {
    display: none;
}

.chat-pane-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-pane-title strong {
    font-size: 0.95rem;
}

.chat-pane-members {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}

.chat-pane .chat-log {
    flex: 1;
    max-height: none;
    padding: 14px 16px;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-composer-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.chat-composer textarea {
    resize: none;
    min-height: 42px;
    max-height: 140px;
}

.chat-attach-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    cursor: pointer;
}

.chat-attach-btn:hover {
    color: var(--primary-ink);
    border-color: var(--primary-tint-border);
}

.chat-attach-btn .icon {
    width: 19px;
    height: 19px;
}

.chat-image-preview {
    align-items: center;
    gap: 8px;
}

.chat-image-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.chat-image-preview button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.chat-image {
    display: block;
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    object-fit: cover;
}

.chat-pane-delete-form {
    margin-left: auto;
    flex-shrink: 0;
}

.chat-pane-form,
.chat-pane-empty {
    padding: 20px;
    overflow-y: auto;
}

.chat-pane-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
}

@media (max-width: 720px) {
    .chat-shell {
        height: calc(100vh - 180px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .chat-rail {
        width: 100%;
    }

    .chat-page.has-active-chat .chat-rail {
        display: none;
    }

    .chat-page:not(.has-active-chat) .chat-pane {
        display: none;
    }

    .chat-pane-back {
        display: inline-flex;
    }
}

/* ---------- CRM shell (agency members' backend pages) ---------- */

/* .crm-logo .crm-logo-tag (two classes) deliberately outweighs .crm-logo span (one class +
   one type) so this doesn't inherit the "Find" half-logo's orange accent color. */

/* Group headings in the agency sidebar (Sales, Deals & Paperwork, …). Inherits the sidebar's
   text colour and fades it, so it also reads correctly on an agency's branded sidebar. */


/* Sub-sections shown indented beneath an expanded top-level item (e.g. Accounting). */

/* "Continue with Google" sign-in button + the "or" divider above it, on the auth pages. */
.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    margin: 16px 0;
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, rgba(148, 163, 184, 0.3));
}
.oauth-divider span { padding: 0 12px; }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    color: #3c4043;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .15s, background .15s;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2); }

/* Plan listing-allowance banner on the CRM Listings page. */

/* "What's nearby" (schools/shops/healthcare) on the public listing page. */
.nearby-amenities { margin-top: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.nearby-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.02rem; }
.nearby-title .icon { width: 18px; height: 18px; color: var(--primary-ink); }
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.nearby-cat h5 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.nearby-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nearby-cat li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.nearby-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-dist { flex-shrink: 0; color: var(--primary-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.nearby-note { margin: 12px 0 0; font-size: 0.78rem; }

/* Generic CRM modal (native <dialog>), e.g. the New Property Alert window. */

/* Buyer finance-position pills on client records (cash / pre-approved / needs approval). */

/* Proof-document attachment cells in the trust ledger and income/expense tables. */

/* Overview pages (dashboard, listing/client tables) use the room on big monitors; forms stay at 1100px so lines don't get too long to read. */

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    box-shadow: var(--shadow-sm);
    /* Grid stretches every card in a row to match the tallest one (the commission card's
       wrapped text is often taller than a plain "0 / Active" card) — without centering,
       a short card's content sits pinned to the top and reads as an empty box once that
       top edge scrolls out from under the sticky header. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 108px;
}

.stat-card {
    min-width: 0;
}

.stat-card strong {
    display: block;
    /* Shrinks on phones so big amounts ("R 1 234 567.89") stay inside a half-width card. */
    font-size: clamp(1.05rem, 4.4vw, 1.6rem);
    overflow-wrap: anywhere;
    font-weight: 800;
    color: var(--primary-ink-strong);
    line-height: 1.15;
}

.stat-card span {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.3;
}

/* Explicit 2-column track (not auto-fit) — with only 2-3 cards, auto-fit was reserving
   extra empty column tracks on wide screens, so the actual cards rendered small and
   left-aligned with a big dead gap to the right instead of filling the row. */

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    transition: box-shadow 0.2s ease;
}

.chart-card:hover {
    box-shadow: var(--shadow-md);
}

.chart-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* Per-graph type switcher: a cog on the chart card header opens a small menu of chart types. */
.chart-cog-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.chart-cog { display: inline-flex; width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.chart-cog:hover { background: var(--primary-tint-bg); color: var(--primary-ink); }
.chart-cog svg { width: 16px; height: 16px; }
.chart-cog-menu { position: absolute; right: 0; top: 36px; z-index: 40; min-width: 132px; display: flex; flex-direction: column; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.chart-cog-menu[hidden] { display: none; }
.chart-cog-opt { text-align: left; padding: 8px 11px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text); font-family: inherit; }
.chart-cog-opt:hover { background: var(--primary-tint-bg); }
.chart-cog-opt.active { color: var(--primary-ink); font-weight: 800; }

/* Chart.js sizes the canvas from this wrapper's own box (maintainAspectRatio:false in
   the JS options) rather than guessing an aspect ratio from canvas width alone — the old
   CSS-only "max-height" approach rendered noticeably small/squashed on wide chart cards. */

@media (max-width: 880px) {

    /* Title and search both compete for a narrow topbar on mobile — the title still shows
       page context in the tab/nav, so it's the one that gives way here. */
}

/* Leads Kanban board — this page trades the normal centered/capped .container width for the
   full CRM content width (it's the only page that benefits: 5 columns need real room). Grid
   with minmax() self-adapts across the whole width range with no breakpoint needed: on a
   wide desktop the 5 columns stretch evenly to fill the page and there's no scrollbar at
   all; once the viewport can't fit all 5 at their floor width, it falls back to a normal
   horizontal scroll (the usual mobile Kanban pattern) automatically. The 242px below is the
   measured, fixed (not viewport-relative) height of everything above the board: topbar +
   content padding + the "Leads" title + subtitle line + the content area's own bottom
   padding — so the board's own height exactly fills the rest of the viewport and only each
   column scrolls internally, never the outer page. */

/* Phone-only pieces of the Leads page — hidden on desktop, where the full board shows. */

/* Lead actions bottom sheet (phones) */

/* The document page itself stays a true-to-size 700px box always (see the comment above it in
   agency-documents/preview.php) — the drag-to-position logo feature depends on matching the
   real PDF's rendered width exactly. Below 700px available width, JS applies a CSS transform
   to scale the whole box down uniformly (never stretches it back up past its real size) and
   this wrapper's height is set to match in script, since a transform doesn't affect layout
   flow on its own. */

/* The buyer's name opens the lead (conversation / client / edit) — as does a click anywhere else on the card. */

/* Edit/Delete are icon-only circles (fixed 38px), unlike the stage select and View Client/
   Convert button above them — stacking them one-per-row like everything else in this column
   left a lot of dead space and read as disconnected floating buttons. A compact row fits them
   both without fighting the column layout above. */

/* Property Defect Disclosure */

/* ---------- Book a Demo (/book-demo) + Admin Demo Bookings ---------- */

.demo-container {
    max-width: 760px;
}

.demo-container > .detail-section,
.demo-form > .detail-section {
    margin-bottom: 16px;
}

.demo-referrer-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-tint-bg);
    border-color: var(--accent-tint-border);
    color: var(--accent-600);
}

.demo-referrer-flash .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* The details form sits inside a .card already — drop .search-form's own box so it isn't a card-in-a-card. */
.search-form.demo-fields {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.demo-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Visually hidden but still in the form — bots fill it, people never see it. */
.demo-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Slot picker */
.demo-date-chips {
    display: none;
}

.demo-slot-picker.js-enabled .demo-date-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin-bottom: 6px;
    scrollbar-width: thin;
}

.demo-date-chip {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0;
    min-width: 62px;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    line-height: 1.15;
}

.demo-date-chip:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    box-shadow: none;
}

.demo-date-chip.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.demo-date-chip-dow,
.demo-date-chip-month {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.demo-date-chip-day {
    font-size: 1.25rem;
    font-weight: 800;
}

.demo-slot-day + .demo-slot-day {
    margin-top: 14px;
}

.demo-slot-picker.js-enabled .demo-slot-day {
    display: none;
    margin-top: 0;
}

.demo-slot-picker.js-enabled .demo-slot-day.active {
    display: block;
}

.demo-slot-day-heading {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

.demo-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.demo-slot {
    position: relative;
    cursor: pointer;
}

.demo-slot input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.demo-slot span {
    display: block;
    text-align: center;
    padding: 10px 6px;
    border: 1.5px solid var(--primary-tint-border);
    border-radius: var(--radius-sm);
    color: var(--primary-ink);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.demo-slot:hover span {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
}

.demo-slot input:checked + span {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.demo-slot input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.demo-slot-tz {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Online / in-person choice */
.demo-format-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.demo-format-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.demo-format-option:has(input:checked) {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.demo-format-option input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--primary-600);
}

.demo-format-option small {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

/* In person is switched off when the agency is outside the Western Cape. */
.demo-format-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.demo-consent {
    margin: 2px 0 4px;
}

/* Confirmation + manage */
.demo-confirm-card {
    text-align: center;
    padding: 28px 20px;
}

.demo-confirm-card h1 {
    margin: 10px 0 6px;
    font-size: 1.5rem;
    font-weight: 800;
}

.demo-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
}

.demo-confirm-icon .icon {
    width: 28px;
    height: 28px;
}

.demo-confirm-card .demo-summary {
    text-align: left;
    margin: 18px 0;
}

.demo-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.demo-summary {
    margin: 0 0 14px;
    display: grid;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
}

.demo-summary dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.demo-summary dt .icon {
    width: 14px;
    height: 14px;
}

.demo-summary dd {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.demo-status {
    display: inline-block;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    vertical-align: middle;
}

/* Admin */

/* Recent imports popup — a clean card per data dump instead of a cramped table. */

@media (max-width: 560px) {
    .demo-format-options {
        grid-template-columns: 1fr;
    }
}

/* ---------- Admin Users: search + role tabs ---------- */

/* Rows sit inside the tabs card — same divided-list treatment as other record cards. */

/* ---------- CRM Branding: branded sidebar logo ---------- */

/* ---------- CRM Branding editor (/branding) ---------- */

/* Live preview — a miniature CRM, always drawn in light mode so it reads as "the design". */

/* CRM Branding editor: text colour + sidebar style controls */

/* ErfFind wordmark in the Branding preview when no custom logo is set — mirrors .crm-logo. */

/* ---------- Listing video (Edit Listing + public Video Tour) ---------- */


.detail-video video {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-md);
    background: #000;
}

/* Portrait phone videos: keep them phone-shaped and centred rather than a tall black column. */
.detail-video.is-portrait video {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* ---------- Admin → System Health ---------- */

/* Status tokens: good / watch / action needed — always paired with an icon + words, never colour alone. */

/* Sidebar footer: just Log Out (Settings is in the "More" group; Light/Dark lives on the Settings page). */
/* ---------- CRM Calendar (calendar/index.php + assets/js/crm-calendar.js) ---------- */

/* Toolbar: Today ‹ › Title ............ Month | Week | Day | Agenda */

/* Type filter chips */

/* The grid fills the rest of the viewport on desktop and scrolls inside itself. */

/* Day headers: "MON" over a date pill; today's pill in the brand colour. */

/* Time grid */

/* Event cards: a soft wash of the type colour with a solid edge; text always in text tokens. */

/* Short (30 min or less) appointments: time + title on one line so nothing spills out.
   .cal-ev-compact is set by crm-calendar.js from the duration; FullCalendar's own -short class
   only kicks in for even tinier events. */

/* Month: compact "● 09:00 Title" rows, today's date as a pill. */

/* Agenda (list) view */

/* Upcoming side panel */

/* Phones: Agenda is the default view, the grid grows with its content, and the toolbar stacks. */

/* Agenda day heading: "Monday  21 September  [Today]" */

/* ---------- New / Edit Appointment (calendar/form.php + assets/js/appointment-form.js) ---------- */

/* Without this a card grows to its widest child (the scrolling date strip) instead of scrolling it. */

/* Type cards */

/* When */

/* Month picker: on desktop a pop-over anchored under the "Pick a date" button, floating over
   the time grid rather than pushing it down; on phones it opens inline, full width. */

/* A small dot under days the agent already has bookings on. */

/* Who & where */

/* Colleague chips */

/* Summary side card */

/* Read-only view for invited colleagues */

/* "This would double-book…" warning with Book anyway / Choose another time */

:root[data-theme="dark"] .appt-clash-actions .appt-book-anyway {
    color: #1c1405;
}

/* Placed after the base .kanban-* rules on purpose: at equal specificity the later rule wins,
   and these must override the desktop board's column header, actions and scroll boxes. */
/* Phones: stage tabs + one full-height list per stage (no board-in-a-box scrolling), compact
   cards with Call / WhatsApp / "⋯", and a bottom sheet for the rest (see inbox/leads.php).
   Drag-and-drop doesn't exist on touch browsers, so nothing is lost by dropping the board. */
@media (max-width: 700px) {

    /* The tabs already name the stage and its count. */

    /* Call/WhatsApp buttons replace the raw number/email lines; the date moves into the corner. */
}

/* ---------- Admin listings import (Pending Listings → Import listings) ---------- */

/* Agency side: imported listings waiting for photos */

/* ---------- Admin → Savings Calculator (demo tool) ---------- */

@media print {
    body:has(.sc-page) { background: #fff !important; }
}

/* ---------- System Health → Backups ---------- */

/* Admin: per-user password reset (a support tool — sets a new password, never reveals the old). */

/* Owner-only editor: which admin sections a staff admin can open. */

/* Franchise head office <-> branch messaging */

/* ---------- Back to top ---------- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 60;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35), 0 2px 6px rgba(23, 32, 35, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease;
}
.back-to-top:hover { background: var(--primary-700, var(--primary-600)); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 680px) { .back-to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); } }

/* System Health → Errors */
.error-table td { white-space: normal; }
.error-table td:nth-child(2) { min-width: 260px; }
.error-table summary { cursor: pointer; font-weight: 600; word-break: break-word; }
.error-trace { margin: 8px 0 0; padding: 10px; background: var(--gray-100); border-radius: var(--radius-sm); font-size: 0.72rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* ---------- Admin → Launch Checklist ---------- */

/* Admin → Agencies: plan controls */

/* ---------- Agency → Plan & Billing ---------- */

/* ---------- Demo sign-up: admin QR screen + public join pages ---------- */

.join-page { display: flex; justify-content: center; padding-top: 12px; padding-bottom: 24px; }
.join-card { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 24px 20px; }
.join-brand { font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.join-brand span { color: var(--accent-600); }
.join-card h1 { font-size: 1.5rem; margin: 0 0 10px; }
.join-offer { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-tint-bg); color: var(--primary-ink-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.join-offer .icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-600); }
.join-offer div { display: flex; flex-direction: column; gap: 2px; }
.join-offer span { font-size: 0.86rem; }
.join-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.join-form legend { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; padding: 0; }
.join-form .field { margin-bottom: 12px; }
.join-form input { font-size: 16px; } /* 16px stops iPhones zooming in on focus */
.join-form .meta { display: block; font-size: 0.78rem; margin-top: 3px; }
.join-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; margin: 4px 0 16px; cursor: pointer; }
.join-terms input { width: auto; margin-top: 3px; }
.join-submit { padding: 14px; font-size: 1rem; }
.join-foot { text-align: center; margin: 14px 0 0; font-size: 0.8rem; }
.join-code-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.join-code-form input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.6rem; text-align: center; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- CRM dashboard → onboarding checklist ---------- */

/* ---------- CRM → Help ---------- */

/* ---------- Portals (syndication) ---------- */

/* Agency → Website settings */

/* Listing page → the agency's own website */
.agency-site-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.86rem; font-weight: 600; }


/* Sale agreements: sign in ink, never on screen */

/* ---------- Book a Demo landing page (demo/book.php) ---------- */
.dl-hero {
    background:
        linear-gradient(105deg, rgba(4, 33, 30, 0.94) 0%, rgba(6, 58, 54, 0.86) 45%, rgba(6, 58, 54, 0.55) 100%),
        var(--hero-photo) center/cover no-repeat;
    color: #fff;
    padding: clamp(40px, 7vw, 88px) 16px clamp(44px, 7vw, 96px);
}
.dl-hero-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.dl-kicker, .dl-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-500, #f97316); }
.dl-hero h1 { font-size: clamp(2rem, 4.2vw + 0.6rem, 3.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.06; margin: 12px 0 16px; color: #fff; }
.dl-hero-sub { font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 0 26px; }
.dl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-hero .btn, .dl-final .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 1rem; border-radius: 12px; }
.dl-btn-primary { background: var(--accent-500, #f97316); color: #fff; border: 0; box-shadow: 0 10px 28px rgba(249, 115, 22, 0.35); }
.dl-btn-primary:hover { background: var(--accent-600, #ea580c); color: #fff; }
.dl-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.dl-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.dl-hero-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.88); }
.dl-hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.dl-hero-trust .icon { width: 16px; height: 16px; color: #5eead4; }
.dl-offer { background: #fff; color: #111827; border-radius: 20px; padding: 26px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.dl-offer-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9a3412; background: #ffedd5; padding: 4px 10px; border-radius: 999px; }
.dl-offer strong { display: block; font-size: 2.2rem; font-weight: 900; letter-spacing: -0.03em; margin: 12px 0 6px; color: #0f766e; }
.dl-offer p { margin: 0 0 14px; color: #4b5563; line-height: 1.5; }
.dl-offer ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.dl-offer li { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 0.94rem; }
.dl-offer li .icon { width: 17px; height: 17px; color: #0f766e; flex: 0 0 17px; }
.dl-offer .btn { background: #0f766e; color: #fff; padding: 13px; border-radius: 12px; text-align: center; }

.dl-strip { max-width: 1140px; margin: -34px auto 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); overflow: hidden; }
.dl-strip-item { display: flex; flex-direction: column; gap: 3px; padding: 22px 22px; border-left: 1px solid var(--border); }
.dl-strip-item:first-child { border-left: 0; }
.dl-strip-item strong { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.02em; color: var(--primary-ink-strong); }
.dl-strip-item span { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }

.dl-section { max-width: 1140px; margin: 0 auto; padding: clamp(52px, 7vw, 88px) 16px 0; }
.dl-section-head { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.dl-section-head h2, .dl-book-side h2 { font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.12; margin: 8px 0 10px; }
.dl-section-head p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.dl-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dl-feature { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.dl-feature:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08); border-color: var(--primary-200, var(--border)); }
.dl-feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); margin-bottom: 14px; }
.dl-feature-icon .icon { width: 23px; height: 23px; }
.dl-feature h3 { font-size: 1.05rem; margin: 0 0 8px; }
.dl-feature p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.dl-feature em { font-style: normal; font-weight: 700; color: var(--accent-600); }

.dl-pricing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
/* A short pricing row (e.g. the 2 franchise tiers) centred instead of pinned left. */
.dl-price-card { position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 24px 20px; display: flex; flex-direction: column; }
.dl-price-card.featured { border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600), 0 16px 36px rgba(15, 118, 110, 0.14); }
.dl-price-flag { position: absolute; top: -11px; left: 20px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--primary-600); color: #fff; }
.dl-price-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.dl-price { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dl-price small { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.dl-price-card p { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.dl-book { margin-top: clamp(56px, 8vw, 96px); padding: clamp(48px, 7vw, 80px) 16px; background: linear-gradient(180deg, var(--primary-tint-bg) 0%, transparent 100%); scroll-margin-top: 70px; }
.dl-book-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.dl-book-side { position: sticky; top: 90px; }
.dl-checklist { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.dl-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.dl-checklist .icon { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--primary-600); color: #fff; box-sizing: border-box; margin-top: 1px; }
.dl-book-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.dl-book-note .icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--primary-ink-strong); margin-top: 1px; }
.dl-book-form .demo-form > .detail-section { border-radius: 18px; }
.dl-submit { padding: 15px; font-size: 1.05rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.dl-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.dl-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 20px; }
.dl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-weight: 700; font-size: 1.02rem; }
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-tint-bg); position: relative; }
.dl-faq-icon::before, .dl-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--primary-ink-strong); transform: translate(-50%, -50%); transition: transform .2s; }
.dl-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.dl-faq details[open] .dl-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.dl-faq details p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }

.dl-final { max-width: 1140px; margin: clamp(56px, 8vw, 96px) auto clamp(40px, 6vw, 72px); padding: clamp(36px, 6vw, 60px) 20px; text-align: center; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #063a36 0%, #0f766e 100%); }
.dl-final h2 { font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.3rem); font-weight: 900; letter-spacing: -0.03em; margin: 0 0 8px; color: #fff; }
.dl-final p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; }

@media (max-width: 1080px) {
    .dl-features, .dl-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dl-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .dl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -28px 16px 0; }
    .dl-strip-item:nth-child(3) { border-left: 0; }
    .dl-strip-item:nth-child(n+3) { border-top: 1px solid var(--border); }
    .dl-book-inner { grid-template-columns: minmax(0, 1fr); }
    .dl-book-side { position: static; }
}
@media (max-width: 560px) {
    .dl-features, .dl-pricing { grid-template-columns: minmax(0, 1fr); }
    .dl-hero .btn { width: 100%; justify-content: center; }
    .dl-strip-item { padding: 16px; }
    .dl-strip-item strong { font-size: 1.2rem; }
    .dl-final { margin-left: 16px; margin-right: 16px; }
    .dl-pricing { row-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .dl-feature, .dl-faq-icon::after, .dl-faq-icon::before { transition: none; } }

.dl-pricing-note { text-align: center; color: var(--muted); font-size: 0.95rem; max-width: 640px; margin: 22px auto 0; line-height: 1.55; }


/* Admin → Agencies: details on top, actions below (rows carry many action buttons) */

/* Grouped, labelled admin agency actions (Verification / Plan / Franchise / Branding). */

/* ---------- Agency → Website editor (templates & customisation) ---------- */

.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.tpl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; border: 2px solid var(--border); border-radius: 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.tpl-card:hover { border-color: var(--primary-200, var(--primary-500)); }
.tpl-card.selected { border-color: var(--primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-600) 20%, transparent); }
.tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-name { font-weight: 800; font-size: 1rem; padding: 0 4px; }
.tpl-name em { font-style: normal; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: var(--primary-600); color: #fff; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.tpl-blurb { font-size: 0.82rem; color: var(--muted); line-height: 1.45; padding: 0 4px; }
.tpl-font { font-size: 0.8rem; color: var(--muted); padding: 0 4px; }
/* Miniature layout sketches of each template */
.tpl-thumb { display: flex; flex-direction: column; height: 120px; border-radius: 9px; overflow: hidden; background: #f4f5f4; border: 1px solid var(--border); }
.tpl-thumb--coastal { background: #eef7f8; }
.tpl-thumb--luxury { background: #0c0c0c; border-color: #2a2724; }
.tpl-thumb--heritage { background: #faf6ee; }
@media (max-width: 560px) {
    .tpl-grid { grid-template-columns: minmax(0, 1fr); }
}


/* A number box with its unit picker attached (e.g. Erf size in m² or hectares) */

/* ---------- Legal pages (Terms, Privacy Policy, Refund Policy) ---------- */
.legal-doc { max-width: 820px; padding-top: 8px; padding-bottom: 48px; line-height: 1.65; }
.legal-head .section-title { margin-bottom: 4px; }
.legal-updated { color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; }
.legal-summary { font-size: 1.02rem; margin: 0 0 22px; }
.legal-toc { background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 30px; }
.legal-toc strong { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 0.92rem; }
.legal-toc li { break-inside: avoid; padding: 2px 0; }
.legal-toc a { color: var(--primary-ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-doc section { scroll-margin-top: 90px; margin-bottom: 26px; }
.legal-doc h2 { font-size: 1.15rem; margin: 0 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.legal-doc p, .legal-doc li { color: var(--text); }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: var(--primary-ink); }
.legal-table td { white-space: normal; vertical-align: top; }
.legal-foot { color: var(--muted); font-size: 0.92rem; border-top: 1px solid var(--border); padding-top: 16px; }
@media (max-width: 640px) {
    .legal-toc ol { columns: 1; }
}
.results-count { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
/* Portals: feed login fields and the agency's listing feed */
.env-banner { position: sticky; top: 0; z-index: 2000; background: #b45309; color: #fff; text-align: center; font-size: 0.82rem; font-weight: 600; padding: 6px 12px; }
.env-banner-lock { display: inline-block; margin-left: 10px; text-decoration: none; }
.env-banner-lock:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }
.env-banner-sandbox { background: #6d28d9; } /* the sandbox is purple, the demo orange: never mixed up */
.env-banner-tag { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px; background: #fff; color: #6d28d9; font-weight: 800; letter-spacing: 0.08em; }
.env-banner-reset { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 10px; flex-wrap: wrap; justify-content: center; }
.env-banner-confirm:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.env-banner-btn { font: inherit; font-size: 0.78rem; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.env-banner-btn:hover, .env-banner-btn:focus-visible { background: rgba(255, 255, 255, 0.3); }
.env-banner-btn-yes { background: #fff; color: #b45309; border-color: #fff; }
.env-banner-btn-yes:hover, .env-banner-btn-yes:focus-visible { background: #fef3c7; }
/* "Resetting the demo…" page (app/Views/demo-reset/resetting.php) */
/* ---------- Maps (assets/js/maps.js) ---------- */
.erf-map-frame { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); margin-bottom: 20px; }
.erf-map-frame #property-map { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.erf-map-frame:fullscreen { border-radius: 0; display: flex; flex-direction: column; }
.erf-map-frame:fullscreen #property-map { flex: 1; height: auto; }
.erf-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.erf-map-place { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.erf-map-place .icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary-ink); margin-top: 2px; }
.erf-map-place strong { display: block; font-size: 0.95rem; }
.erf-map-place small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.erf-map-directions { white-space: nowrap; }
.leaflet-container { font-family: inherit; background: #eef2f3; }

/* Listing pin: a teal drop with a house, and a soft pulse on the ground under it */
.erf-pin { background: none; border: 0; }
.erf-pin-shape { position: absolute; left: 4px; top: 0; width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #14b8a6, #0f766e); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(15, 118, 110, 0.45); display: grid; place-items: center; }
.erf-pin-shape svg { width: 18px; height: 18px; transform: rotate(45deg); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.erf-pin-pulse { position: absolute; left: 12px; top: 44px; width: 20px; height: 8px; border-radius: 50%; background: rgba(15, 118, 110, 0.35); animation: erf-pin-pulse 2.2s ease-out infinite; }
@keyframes erf-pin-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .erf-pin-pulse { animation: none; } }
.erf-area-label { background: none; border: 0; }
.erf-area-label span { display: inline-block; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.95); color: #0f766e; font-weight: 700; font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); white-space: nowrap; }

/* Search map: price tags that open a photo card */
.erf-price-tag { background: none; border: 0; }
.erf-price-tag span { display: inline-block; transform: translate(-50%, -100%); position: relative; background: #0f766e; color: #fff; font-weight: 700; font-size: 0.78rem; padding: 5px 9px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background 0.15s, transform 0.15s; }
.erf-price-tag span::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.erf-price-tag:hover span, .erf-price-tag:focus span { background: #134e4a; transform: translate(-50%, -100%) scale(1.06); }
.erf-price-tag.approximate span { background: #475569; }
.erf-map-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 14px; }
.erf-map-popup .leaflet-popup-content { margin: 0; width: 240px !important; }
.erf-map-card { display: block; color: inherit; text-decoration: none; }
.erf-map-card-img { display: block; height: 130px; background: #e5e7eb center / cover no-repeat; }
.erf-map-card-body { display: block; padding: 10px 12px 12px; }
.erf-map-card-body strong { display: block; font-size: 1rem; color: #0f766e; }
.erf-map-card-body span { display: block; color: #1f2937; font-size: 0.85rem; margin-top: 2px; line-height: 1.35; }
.erf-map-card-body em { display: block; color: #64748b; font-size: 0.78rem; margin-top: 4px; font-style: normal; }

/* Map controls */
.erf-map-bar { display: flex; gap: 6px; align-items: center; }
.erf-map-seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.erf-map-seg button { border: 0; background: none; color: #334155; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 0; box-shadow: none; }
.erf-map-seg button.on { background: #0f766e; color: #fff; }
.erf-map-btn { width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #334155; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.erf-map-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.erf-map-btn:hover, .erf-map-seg button:not(.on):hover { color: #0f766e; }
.leaflet-bar { border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; color: #334155 !important; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.8) !important; border-radius: 6px 0 0 0; }
.is-satellite .leaflet-control-attribution { background: rgba(255, 255, 255, 0.7) !important; }
/* Search map clusters: a numbered teal bubble for listings close together */
.erf-cluster { background: none; border: 0; }
.erf-cluster span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0f766e; color: #fff; font-weight: 800; font-size: 0.9rem; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.erf-cluster:hover span { transform: scale(1.08); }
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform 0.3s ease-out, opacity 0.3s ease-in; }
/* Files attached to messages */
.chat-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.06); color: inherit; text-decoration: none; max-width: 280px; }
.message-bubble.mine .chat-file { background: rgba(255, 255, 255, 0.18); }
.chat-file:hover { background: rgba(0, 0, 0, 0.1); }
.message-bubble.mine .chat-file:hover { background: rgba(255, 255, 255, 0.28); }
.chat-file-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink); }
.message-bubble.mine .chat-file-icon { background: rgba(255, 255, 255, 0.9); color: #0f766e; }
.chat-file-icon .icon { width: 18px; height: 18px; }
.chat-file-text { min-width: 0; display: flex; flex-direction: column; }
.chat-file-text strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-text small { font-size: 0.75rem; opacity: 0.8; }
.chat-file-preview { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 6px 8px; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; }
.chat-file-preview[hidden] { display: none; }
.chat-file-preview .icon { width: 16px; height: 16px; color: var(--primary-ink); flex: 0 0 16px; }
.chat-file-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-preview button { border: 0; background: none; font-size: 1.1rem; cursor: pointer; padding: 0 4px; min-height: 0; color: var(--muted); box-shadow: none; }
/* Share listing window (listings/_share_modal.php) */
/* Savings Calculator feature comparison */
/* Accounting sub-navigation + period filter */
/* ===== Public profile + Account settings (professional layout) ===== */
.profile-page {
    padding-bottom: 40px;
}

.profile-hero .avatar {
    width: 88px;
    height: 88px;
    font-size: 1.9rem;
}

.profile-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #fff;
}

.profile-hero-sub {
    margin-top: 8px;
    font-size: 0.82rem;
}

.profile-job-title {
    margin-top: 2px;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0.95;
}

.profile-hero-sub span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.profile-hero-sub .icon,
.record-hero-badge .badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Action buttons row under the hero */
.profile-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

/* Stat cards specific to the profile use a slightly tighter min-height */
.profile-stats .stat-card {
    min-height: 88px;
    text-align: center;
    align-items: center;
}

/* Two-column: main content + listings sidebar on wide screens */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 900px) {
    .profile-grid.has-listings,
    .profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.card.profile-card {
    padding: 22px 24px;
    overflow: visible;
}

.card.profile-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.profile-bio {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}

.empty-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Reviews */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-item {
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.review-item:first-child {
    padding-top: 0;
    border-top: none;
}

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.review-head strong {
    font-size: 0.95rem;
}

.review-body {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Listings section */
.profile-listings {
    margin-top: 6px;
}

/* ===== Account settings ===== */

/* Breathing room above the full-width submit button (Save changes / Change password) so it isn't
   flush against the last field. */

/* Avatar upload control */


/* ===== Buyer document library (settings) ===== */

/* Inline rename form in the name cell */

/* Reusable view / remove buttons (settings table + elsewhere) */

/* Add-document form */

/* ===== Documents tab: buyer-provided subsection ===== */

/* A little role tag beside a document name (ID / Pre-approval). */

/* ===== Public "Find an Estate Agent" directory ===== */
.agency-directory .record-hero { margin-bottom: 18px; }

.agency-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.agency-region-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.agency-region-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

.agency-region-chip.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.agency-region-count {
    font-size: 0.72rem;
    background: var(--gray-100);
    color: var(--muted);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

.agency-region-chip.active .agency-region-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.agency-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.card.agency-directory-card {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card.agency-directory-card:hover { transform: none; box-shadow: 0 1px 3px rgba(23, 32, 35, 0.09), 0 8px 20px -8px rgba(23, 32, 35, 0.12); }

/* Buttons row on a directory card ("View listings" + optional "Website"). */
.agency-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
.agency-directory-actions .btn { flex: 1; min-width: 130px; }

/* Public agency page header. */
.agency-public-hero {
    display: flex;
    align-items: center;
    gap: 16px;
}
.agency-public-logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}
.agency-public-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.agency-directory-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agency-directory-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--gray-100);
    flex-shrink: 0;
}

.agency-directory-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

.agency-directory-logo-fallback .icon { width: 22px; height: 22px; }

.agency-directory-name { font-size: 1.02rem; font-weight: 800; }

.agency-directory-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
    flex: 1;
}

.agency-directory-pin { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--primary-ink); }

/* Map popup: agency link + non-linked variant */
.erf-map-card-link { display: block; color: #0f766e !important; font-weight: 700; margin-top: 6px; font-style: normal; }
.erf-map-card-static { cursor: default; }

/* ===== Grouped lead card: property list + indicators ===== */

/* ===== Register: account-type segmented selector ===== */
.acct-type-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .acct-type-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Scoped with .acct-type-seg so these beat the generic `.field label` rule (display:block +
   uppercase), which was clobbering the flex layout and mis-aligning the icon/label. */
.acct-type-seg .acct-type-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 10px 12px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--muted);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.acct-type-seg .acct-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.acct-type-seg .acct-type-opt .icon { width: 20px; height: 20px; flex-shrink: 0; }
.acct-type-seg .acct-type-opt:hover { border-color: var(--primary-500); color: var(--primary-ink); }
.acct-type-seg .acct-type-opt.selected { border-color: var(--primary-600); background: var(--primary-tint-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary-600); }
.acct-fields { display: none; }
.acct-fields.active { display: block; }

/* ===== Franchise announcements ===== */

/* Branch dashboard: head-office updates card (priority, at the top) */

/* ===== Franchise targets & leaderboard ===== */
/* Consolidated "Targets" card on the dashboard — each target is one compact row, not a big banner. */

/* ---------- Auth pages (login): split brand panel + form card ---------- */
.auth-page {
    padding: 48px 16px 64px;
    background:
        radial-gradient(900px 420px at 50% -120px, var(--primary-tint-bg), transparent 70%),
        var(--bg);
}

.auth-shell {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 44px 40px;
    color: #fff;
    background:
        radial-gradient(520px 320px at 110% 110%, rgba(249, 115, 22, 0.22), transparent 60%),
        radial-gradient(420px 300px at -10% -10%, rgba(20, 184, 166, 0.35), transparent 60%),
        linear-gradient(160deg, var(--primary-600), var(--primary-900));
}

.auth-aside-logo {
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
}

.auth-aside-logo span { color: var(--accent-500); }

.auth-aside h2 {
    margin: 0 0 22px;
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.auth-aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.auth-aside li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.auth-aside li .icon {
    width: 34px;
    height: 34px;
    padding: 8px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.auth-aside-foot {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

.auth-main {
    min-width: 0;
    padding: 44px 44px 36px;
}

/* Small EF tile above the heading, same look as the app icon */
.auth-mark {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-bottom: 18px;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #fff;
    background: linear-gradient(145deg, var(--primary-600), var(--primary-700));
    box-shadow: 0 6px 14px rgba(11, 84, 78, 0.28);
}

.auth-mark span + span { color: var(--accent-500); }

.auth-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.auth-subtitle {
    margin: 6px 0 26px;
    color: var(--muted);
    font-size: 0.97rem;
}

.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    font-size: 0.9rem;
}

.auth-alert .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.auth-alert p { margin: 0; }
.auth-alert p + p { margin-top: 4px; }

.auth-form { display: grid; gap: 18px; }

.auth-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-link-sm {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary-ink);
}

.auth-link-sm:hover { text-decoration: underline; }

.auth-input { position: relative; }

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

.auth-input input {
    width: 100%;
    height: 50px;
    padding: 0 46px 0 44px;
    margin: 0;
    font: inherit;
    font-size: 0.98rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--field-border);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input input::placeholder { color: var(--gray-400); }

.auth-input input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18);
}

.auth-input:focus-within .auth-input-icon { color: var(--primary-ink); }

/* Keep browser autofill from painting the fields pale blue */
.auth-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}

.auth-reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 9px;
    color: var(--muted);
    cursor: pointer;
}

.auth-reveal:hover { color: var(--text); background: var(--field-bg); }
/* Stay centred in the field in every state: the site-wide button:active nudge and hover shadow must not apply here. */
.auth-reveal:hover, .auth-reveal:active, .auth-reveal:focus { transform: translateY(-50%); box-shadow: none; }
.auth-reveal:focus { outline: none; }
.auth-reveal:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; }
.auth-reveal .icon { width: 19px; height: 19px; }
.auth-reveal-hide { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal-show { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal-hide { display: inline-flex; }
.auth-reveal-show { display: inline-flex; }

.auth-submit {
    width: 100%;
    height: 50px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(11, 84, 78, 0.25);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-submit:hover { filter: brightness(1.08); box-shadow: 0 10px 22px rgba(11, 84, 78, 0.32); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit .icon { width: 18px; height: 18px; }

.auth-main .oauth-divider { margin: 22px 0 16px; }

.auth-switch {
    margin: 24px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.93rem;
}

.auth-switch a { font-weight: 700; color: var(--primary-ink); }
.auth-switch a:hover { text-decoration: underline; }

.auth-demo {
    margin-top: 26px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--field-bg);
}

.auth-demo-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.auth-demo-title span { font-weight: 500; color: var(--muted); }
.auth-demo-title .icon { width: 15px; height: 15px; color: var(--muted); }
.auth-demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.auth-demo-chip {
    padding: 6px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
}

.auth-demo-chip:hover { border-color: var(--primary-500); }

@media (max-width: 820px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
    .auth-aside { display: none; }
}

@media (max-width: 520px) {
    .auth-page { padding: 24px 12px 40px; }
    .auth-main { padding: 30px 22px 26px; }
    .auth-shell { border-radius: 20px; }
    .auth-title { font-size: 1.55rem; }
}

/* ---------- Admin > All Listings ---------- */

/* One listing found by ID: big card with the actions */

/* Table of listings */

/* Admin agencies: "matching X" note from global search */

/* ---------- Book a Demo: "The ErfFind app" section (video in a phone frame) ---------- */
.dl-app {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 64px);
    align-items: center; padding: clamp(28px, 4vw, 48px);
    border-radius: 28px; border: 1px solid var(--border);
    background:
        radial-gradient(520px 360px at 100% 0%, var(--primary-tint-bg), transparent 70%),
        radial-gradient(420px 300px at 0% 100%, var(--accent-tint-bg), transparent 70%),
        var(--surface);
}
.dl-app-copy h2 { font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.12; margin: 8px 0 12px; }
.dl-app-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 24px; }
.dl-app-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dl-app-points li { display: flex; gap: 14px; align-items: flex-start; }
.dl-app-point-icon {
    display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    background: var(--primary-tint-bg); color: var(--primary-ink-strong);
}
.dl-app-point-icon .icon { width: 21px; height: 21px; }
.dl-app-points strong { display: block; font-size: 1rem; margin: 1px 0 3px; }
.dl-app-points div > span { display: block; color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.dl-app-badge {
    display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; padding: 8px 14px;
    border-radius: 999px; font-size: 0.86rem; font-weight: 700;
    background: var(--primary-tint-bg); color: var(--primary-ink-strong); border: 1px solid var(--primary-tint-border);
}
.dl-app-badge .icon { width: 16px; height: 16px; }

.dl-app-visual { display: flex; justify-content: center; }
/* A simple modern phone: dark bezel, rounded screen, small camera dot */
.dl-phone {
    position: relative; width: min(290px, 78vw); aspect-ratio: 9 / 19.4; padding: 11px;
    border-radius: 46px; background: #0d1413;
    box-shadow: 0 0 0 2px #26302f inset, 0 30px 60px rgba(6, 58, 54, 0.28), 0 10px 22px rgba(0, 0, 0, 0.18);
    transform: rotate(-2deg);
}
.dl-phone::before {
    content: ""; position: absolute; top: 20px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%; background: #05090a; box-shadow: 0 0 0 2px #1b2423; z-index: 2;
}
/* "Coming soon" card floating over the phone's lower corner, like a store badge (until the app is on Google Play) */
.dl-phone-wrap { position: relative; }
.dl-phone-soon {
    position: absolute; left: -34px; bottom: 64px; z-index: 3;
    display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
    border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e8e7);
    box-shadow: 0 18px 40px rgba(6, 58, 54, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
}
.dl-phone-soon-icon {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: var(--accent-tint-bg, #fff1e6); color: var(--accent-500, #f97316);
}
.dl-phone-soon-icon .icon { width: 20px; height: 20px; }
.dl-phone-soon-text { display: flex; flex-direction: column; line-height: 1.25; }
.dl-phone-soon-text small {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-500, #f97316);
}
.dl-phone-soon-text strong { font-size: 0.95rem; color: var(--text, #10201e); }
.dl-phone-video {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 36px; background: #0b544e;
}

@media (max-width: 900px) {
    .dl-app { grid-template-columns: minmax(0, 1fr); }
    .dl-app-visual { order: -1; }
    .dl-phone { transform: none; }
    .dl-phone-soon { left: 50%; bottom: -22px; transform: translateX(-50%); white-space: nowrap; }
    .dl-phone-wrap { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .dl-phone { transform: none; } }

/* ---------- Book a Demo: "A look inside" CRM screenshots ---------- */
.dl-peek { margin-top: clamp(40px, 6vw, 64px); }
.dl-peek-head { text-align: center; margin-bottom: 22px; }
.dl-peek-head h3 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.dl-peek-head p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.dl-shot { margin: 0; }
.dl-shot-bar {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: var(--field-bg); border: 1px solid var(--border); border-bottom: 0; border-radius: 14px 14px 0 0;
}
.dl-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.dl-shot-bar i:first-child { background: #f87171; }
.dl-shot-bar i:nth-child(2) { background: #fbbf24; }
.dl-shot-bar i:nth-child(3) { background: #34d399; }
.dl-shot-bar span { margin-left: 10px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.dl-shot-img {
    overflow: hidden; border: 1px solid var(--border); border-radius: 0 0 14px 14px;
    background: #f8fafa; box-shadow: 0 24px 48px rgba(6, 58, 54, 0.12), 0 6px 14px rgba(0, 0, 0, 0.05);
}
.dl-shot-img img { display: block; width: 100%; height: auto; }
/* The pipeline crop cuts through the second row of cards: fade it out so the cut looks intended. */
.dl-shot-fade { position: relative; }
.dl-shot-fade::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background: linear-gradient(to bottom, rgba(248, 250, 250, 0), #f8fafa 92%); pointer-events: none;
}
.dl-shot figcaption { margin-top: 14px; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
.dl-shot figcaption strong { color: var(--text); }
.dl-shot-main { max-width: 1000px; margin: 0 auto; }
.dl-peek-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.dl-peek-more {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center;
    margin: 30px 0 0; color: var(--muted); font-size: 0.95rem;
}
.dl-peek-more .icon { width: 17px; height: 17px; color: var(--primary-ink); }
.dl-peek-more a { font-weight: 700; color: var(--primary-ink); }
@media (max-width: 760px) {
    .dl-peek-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Book a Demo: decluttered pieces ---------- */
/* Franchise pricing as one compact strip instead of a second pricing section */
.dl-franchise-strip {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px;
    border-radius: 18px; border: 1px solid var(--primary-tint-border); background: var(--primary-tint-bg);
}
.dl-franchise-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--primary-ink-strong); flex-shrink: 0; }
.dl-franchise-icon .icon { width: 22px; height: 22px; }
.dl-franchise-copy { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.dl-franchise-copy strong { font-size: 1.02rem; }
.dl-franchise-copy span { color: var(--muted); font-size: 0.9rem; }
.dl-franchise-tiers { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.dl-franchise-tiers li {
    display: flex; flex-direction: column; padding: 10px 16px; min-width: 170px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.dl-franchise-tiers span { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.dl-franchise-tiers strong { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text); }
.dl-franchise-tiers small { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.dl-franchise-tiers em { font-style: normal; font-size: 0.8rem; color: var(--primary-ink); font-weight: 600; }

/* "What happens next" timeline in the booking aside */
.dl-next { margin: 26px 0 22px; }
.dl-next-title { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.dl-next ol { list-style: none; margin: 0; padding: 0; counter-reset: dlnext; }
.dl-next li { position: relative; padding: 0 0 16px 44px; counter-increment: dlnext; }
.dl-next li::before {
    content: counter(dlnext); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: #fff; background: var(--primary-600);
}
.dl-next li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--primary-tint-border); }
.dl-next strong { display: block; font-size: 0.95rem; }
.dl-next li span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }

/* Optional form fields, folded away */
.dl-more { margin: 4px 0 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--field-bg); }
.dl-more summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; font-weight: 700; font-size: 0.92rem; color: var(--primary-ink);
}
.dl-more summary::-webkit-details-marker { display: none; }
.dl-more summary > span { display: inline-flex; align-items: center; gap: 8px; }
.dl-more summary .icon { width: 17px; height: 17px; transition: transform .2s; }
.dl-more[open] summary .icon { transform: rotate(45deg); }
.dl-more summary small { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.dl-more-body { padding: 4px 14px 6px; }

/* Floating book button */
.dl-sticky {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px;
    background: var(--accent-500); color: #fff; font-weight: 800; font-size: 0.95rem; text-decoration: none;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.38), 0 4px 10px rgba(0, 0, 0, 0.12);
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.dl-sticky .icon { width: 18px; height: 18px; }
.dl-sticky:hover { background: var(--accent-600); color: #fff; }
.dl-sticky.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) {
    .dl-sticky { left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dl-sticky { transition: none; } }
/* The site's own back-to-top button would sit under the floating button on this page */
body:has(.dl-sticky.is-visible) .back-to-top { bottom: 84px; }
/* Phones: feature cards as compact icon + text rows, so the list isn't a long scroll */
@media (max-width: 560px) {
    .dl-features { gap: 10px; }
    .dl-feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px; border-radius: 14px; }
    .dl-feature-icon { grid-row: span 2; width: 40px; height: 40px; margin: 0; border-radius: 11px; }
    .dl-feature-icon .icon { width: 20px; height: 20px; }
    .dl-feature h3 { margin: 0 0 3px; font-size: 0.98rem; }
    .dl-feature p { margin: 0; font-size: 0.9rem; }
}

/* Unread enquiry replies: dot on the mobile menu button + highlighted rows in the Inbox */
.header-menu-toggle { position: relative; }
.menu-toggle-dot {
    position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 0 2px var(--primary-700);
}

/* Buyer profile: "buying journey" badge (from the buyer's settings) */
.record-hero-badge.profile-journey-badge { background: rgba(255, 255, 255, 0.95); color: var(--primary-700); }

/* Leads board: the buyer replied and the agent hasn't opened the conversation yet */

/* ---------- Lead + client chats: attachments and composer ---------- */
.chat-thread { display: flex; flex-direction: column; margin-top: 10px; }
.chat-intro { margin: 0 0 8px; }
.chat-empty { text-align: center; padding: 18px 0; }
.chat-body { overflow-wrap: anywhere; }
.chat-attach-image { display: block; margin: -3px -6px 8px; }
.chat-attach-image img {
    display: block; max-width: 260px; max-height: 260px; width: auto; height: auto;
    border-radius: 10px; object-fit: cover; background: rgba(0, 0, 0, 0.06);
}
.chat-attach-file {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; min-width: 220px;
    border-radius: 10px; text-decoration: none; color: inherit;
    background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.08);
}
.message-bubble.mine .chat-attach-file { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.chat-attach-file > .icon { width: 22px; height: 22px; flex-shrink: 0; }
.chat-attach-file span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-attach-file strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-file small { font-size: 0.72rem; opacity: 0.75; }
.chat-attach-dl { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.chat-attach-file:hover { filter: brightness(0.97); }

.chat-composer { margin-top: 14px; }
.chat-composer textarea {
    width: 100%; min-height: 84px; padding: 12px 14px; font: inherit; resize: vertical;
    border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--surface); color: var(--text);
}
.chat-composer textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16); }
.chat-composer-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.chat-attach-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
    font-size: 0.88rem; font-weight: 600; color: var(--primary-ink); background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
}
.chat-attach-btn .icon { width: 17px; height: 17px; }
.chat-attach-btn:hover { border-color: var(--primary-500); }
.chat-attach-name { font-size: 0.85rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chat-send { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.chat-send .icon { width: 16px; height: 16px; }
.chat-composer-hint { margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); }
.chat-unavailable { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.chat-unavailable .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); margin-top: 2px; }
.chat-unavailable p { margin: 0; }
.count-badge.chat-unread-count { background: #ef4444; color: #fff; }
@media (max-width: 560px) {
    .chat-attach-btn span { display: none; }
    .chat-attach-image img { max-width: 100%; }
}
/* The public layout styles plain forms as rows; the chat composer always stacks. */
form.chat-composer { display: block; width: 100%; max-width: none; }
form.chat-composer > textarea { display: block; }
form.chat-composer .chat-composer-bar { width: 100%; }
form.chat-composer .chat-attach-btn { white-space: nowrap; }
/* Public pages style every form <label>; reset the attach button so it looks the same everywhere. */
form.chat-composer label.chat-attach-btn {
    all: unset; box-sizing: border-box; position: static; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 10px; cursor: pointer; font-size: 0.88rem; font-weight: 600; line-height: 1.2;
    color: var(--primary-ink); background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border);
}
form.chat-composer label.chat-attach-btn:hover { border-color: var(--primary-500); }
form.chat-composer label.chat-attach-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* ---------- Property page: pinned "Enquire" bar on phones/tablets (property_detail.php) ---------- */
.enquire-bar {
    display: none;
}

@media (max-width: 959px) {
    .enquire-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px -10px rgba(23, 32, 35, 0.35);
        transition: transform 0.2s ease;
    }

    .enquire-bar.is-hidden {
        transform: translateY(110%);
    }

    .enquire-bar-price {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .enquire-bar-price strong {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .enquire-bar-price .meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .enquire-bar .btn {
        flex-shrink: 0;
    }

    /* Room so the footer isn't hidden behind the bar, and the back-to-top button sits above it. */
    body.has-enquire-bar {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    body.has-enquire-bar .back-to-top {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* Phone numbers never break mid-number ("073 421 / 5861") in tables and cards. */

/* ---------- Property enquiry form (guests + buyers) ---------- */

.enquiry-form .enq-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 14px;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
}

.enquiry-form .enq-consent input {
    width: auto;
    min-height: 0;
    padding: 0;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---------- Buying position (BuyerPosition helper): lead cards, conversation, filters ---------- */

:root[data-theme="dark"] .pos-pill.pos-serious { background: rgba(22, 163, 74, 0.18); color: #86efac; border-color: rgba(22, 163, 74, 0.35); }
:root[data-theme="dark"] .pos-pill.pos-progress { background: rgba(217, 119, 6, 0.18); color: #fcd34d; border-color: rgba(217, 119, 6, 0.35); }

/* Visitor enquiry confirmation, shown in place of the form (property_detail.php). */
.enquiry-sent {
    text-align: center;
    border-color: #bbf7d0;
}

.enquiry-sent-icon svg,
.enquiry-sent-icon .icon {
    width: 40px;
    height: 40px;
    color: #16a34a;
    margin-bottom: 6px;
}


/* ---------- WhatsApp history on leads/clients (whatsapp/_history.php) ---------- */

/* ---------- Email Branding editor (email-branding/show.php) ---------- */

/* ---------- "Set a password" prompt for enquiry-created buyer accounts (partials/_set_password_prompt.php) ---------- */
.set-password-prompt { padding-top: 12px; padding-bottom: 0; }
.set-password-prompt[hidden] { display: none; }
.set-password-prompt-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border, var(--border));
    border-radius: var(--radius-md);
}
.set-password-prompt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary-ink);
    flex-shrink: 0;
}
.set-password-prompt-icon svg { width: 18px; height: 18px; }
.set-password-prompt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.set-password-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.set-password-prompt-actions .btn, .set-password-prompt-actions button { width: auto; }

/* ---------- Leads: whose lead (agency-wide view for Super Users / managers) ---------- */
:root[data-theme="dark"] .lead-waiting { background: rgba(185, 28, 28, 0.25); color: #fca5a5; }

/* Leads: phone filter button + dismissible "Buyer says" note (inbox/leads.php) */
/* Empty WhatsApp history: one slim line (whatsapp/_history.php) */

/* Feature pickers (Add listing, search "More filters"): big tappable chips instead of 13px checkboxes
   with tiny capitalised labels. The read-only feature list on property pages is untouched. */
.features-grid--pick { gap: 8px; }
.features-grid--pick .checkbox-field {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.25;
}
.features-grid--pick .checkbox-field input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    accent-color: var(--primary-ink);
}
.features-grid--pick .checkbox-field:has(input:checked) {
    border-color: var(--primary-ink);
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

/* New Listing: video picked on the form, uploaded right after the listing saves. */

/* System Health → Backups: live progress while a backup runs. */

/* Listing form: short street/unit number boxes beside the wider name boxes (kept side by side on phones too). */

/* Admin → Users: what each agent is in their agency. */

/* Portals: red count on the sidebar item when a portal turned a listing down. */

/* Portals page, agent view: each of their live listings with a chip per portal. */

/* Leads: a lead that came in from a property portal (e.g. Private Property). */
.type-pill--portal { background: var(--accent-50, #fff7ed); color: var(--accent-600, #ea580c); }

/* ---------- Messaging: chat bubbles, day dividers and composer (team chat, lead and client threads) ---------- */
/* Bubbles size to their text; "mine" uses the agency's own brand colour (--primary-600), "theirs" a soft card. */
.chat-log, .chat-thread { gap: 2px; }
.chat-pane .chat-log { padding: 16px 20px; background: var(--bg, #f6f8f8); }
.message-bubble {
    width: fit-content; max-width: min(75%, 560px); padding: 8px 12px 6px; margin-bottom: 6px;
    border-radius: 16px; font-size: 0.92rem; line-height: 1.45; box-shadow: none; overflow-wrap: anywhere;
}
.message-bubble.mine { align-self: flex-end; margin-left: auto; border-bottom-right-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.message-bubble.theirs { align-self: flex-start; margin-right: auto; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.message-bubble .meta { font-size: 0.68rem; opacity: 0.7; margin-top: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.msg-sender { font-size: 0.74rem; font-weight: 700; color: var(--primary-ink); margin-bottom: 2px; }
.chat-body { white-space: normal; }
/* "Today / Yesterday / Saturday 4 October" dividers */
.chat-day { display: flex; justify-content: center; margin: 12px 0 8px; align-self: stretch; }
.chat-day span {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px;
}

/* Team chat composer: one tidy row (photo, file, growing text box, round send button). These rules win over the
   stacked lead/client composer below, which was making the team chat's buttons wrap above and below the box. */
.chat-pane form.chat-composer {
    display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 12px 16px;
    border-top: 1px solid var(--border); background: var(--surface);
}
.chat-pane form.chat-composer label.chat-attach-btn {
    all: unset; box-sizing: border-box; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.15s, color 0.15s;
}
.chat-pane form.chat-composer label.chat-attach-btn:hover { background: var(--primary-tint-bg); color: var(--primary-ink); }
.chat-pane form.chat-composer label.chat-attach-btn:focus-within { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.chat-pane form.chat-composer label.chat-attach-btn .icon { width: 20px; height: 20px; }
.chat-pane .chat-composer-input { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-pane form.chat-composer textarea {
    width: 100%; min-height: 42px; max-height: 160px; padding: 10px 16px; resize: none; overflow-y: auto;
    border: 1.5px solid var(--field-border); border-radius: 21px; background: var(--field-bg, var(--surface)); font: inherit; line-height: 1.4; color: var(--text);
}
.chat-pane form.chat-composer textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); }
.chat-send-btn {
    flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; background: var(--primary-600); color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: filter 0.15s, transform 0.05s;
}
.chat-send-btn:hover { filter: brightness(1.1); }
.chat-send-btn:active { transform: scale(0.96); }
.chat-send-btn .icon { width: 18px; height: 18px; margin-left: -1px; }

/* Lead and client threads: a little more air, and a softer composer */
.chat-thread { padding: 6px 2px; }
form.chat-composer textarea { border-radius: 14px; }

/* Empty state: no conversation open */
.chat-pane-empty { background: var(--bg, #f6f8f8); }
.chat-empty-card { max-width: 380px; text-align: center; }
.chat-empty-icon {
    display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 14px;
    background: var(--primary-tint-bg); color: var(--primary-ink);
}
.chat-empty-icon .icon { width: 30px; height: 30px; }
.chat-empty-card h2 { margin: 0 0 6px; font-size: 1.2rem; color: var(--text); }
.chat-empty-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.chat-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) {
    .message-bubble { max-width: 86%; }
    .chat-pane .chat-log { padding: 12px; }
    /* More room for the text on phones: smaller attach buttons, tighter spacing */
    .chat-pane form.chat-composer { gap: 4px; padding: 10px; }
    .chat-pane form.chat-composer label.chat-attach-btn { width: 32px; height: 40px; }
    .chat-pane form.chat-composer label.chat-attach-btn .icon { width: 19px; height: 19px; }
    .chat-pane form.chat-composer textarea { padding: 10px 14px; }
}