/* =========================================================
   RILITY SHARED HEADER
   One header / one navigation menu / all screen sizes
   ========================================================= */

.site-header {
    width: 100%;
    height: 88px;
    padding: 0 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    position: absolute;
    top: 0;
    left: 0;

    z-index: 1000;

    background: transparent;

    font-family: "Inter", sans-serif;
}


.site-header,
.site-header a,
.site-header button {
    font-family: "Inter", sans-serif;
}


/* Material Symbols must keep its own icon font.
   Otherwise "menu", "close", etc. render as literal text. */

.site-header .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
}


/* =========================================================
   LOGO
   ========================================================= */

.site-header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


.site-logo {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.site-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.site-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}


.nav-links a {
    color: #222;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;

    transition: color .2s ease;
}


.nav-links a:hover {
    color: #b99b62;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.site-header-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}


/* =========================================================
   ONE HAMBURGER — DESKTOP + MOBILE
   ========================================================= */

.menu-toggle {
    width: 44px;
    height: 44px;

    border: none;
    padding: 0;

    background: rgba(255,255,255,.94);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    color: #171717;

    box-shadow:
        0 4px 18px rgba(0,0,0,.08);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.menu-toggle:hover {
    background: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 7px 24px rgba(0,0,0,.12);
}


.menu-toggle:active {
    transform: scale(.95);
}


.menu-toggle .material-symbols-outlined {
    font-size: 25px;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;

    background: rgba(15,15,20,.18);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index: 19998;
}


.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   FLOATING GLASS MENU
   Same component on desktop and mobile
   ========================================================= */

.mobile-menu {
    position: fixed;

    top: 72px;
    right: 24px;

    width: min(390px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);

    box-sizing: border-box;

    background:
        rgba(255,255,255,.92);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border: 1px solid rgba(255,255,255,.8);

    border-radius: 28px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.20),
        0 4px 18px rgba(0,0,0,.08);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-10px)
        scale(.97);

    transform-origin: top right;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .25s cubic-bezier(.22,1,.36,1);

    z-index: 19999;
}


.mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   MENU HEADER
   ========================================================= */

.mobile-menu-header {
    min-height: 68px;

    padding: 0 18px 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(0,0,0,.07);

    flex-shrink: 0;
}


.mobile-menu-title {
    display: flex;
    align-items: center;
}


.mobile-menu-title img {
    width: auto;
    height: 34px;
}


.mobile-menu-close {
    width: 40px;
    height: 40px;

    padding: 0;
    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,.055);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    color: #222;

    transition:
        background .2s ease,
        transform .2s ease;
}


.mobile-menu-close:hover {
    background: rgba(0,0,0,.09);
}


.mobile-menu-close:active {
    transform: scale(.94);
}


.mobile-menu-close .material-symbols-outlined {
    font-size: 22px;
}


/* =========================================================
   MENU LINKS
   ========================================================= */

.mobile-menu-links {
    padding: 12px;

    overflow-y: auto;

    overscroll-behavior: contain;
}


.mobile-menu a {
    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0 14px;

    border-radius: 15px;

    color: #111;

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    letter-spacing: -.1px;

    transition:
        background .18s ease,
        transform .18s ease;
}


.mobile-menu a:hover {
    background: rgba(109,93,251,.07);
}


.mobile-menu a:active {
    transform: scale(.985);

    background:
        rgba(109,93,251,.11);
}


.mobile-menu a .material-symbols-outlined {
    width: 24px;

    flex-shrink: 0;

    font-size: 21px;

    color: #555;
}


/* =========================================================
   MENU DIVIDER / SECTION
   ========================================================= */

.mobile-menu-divider {
    height: 1px;

    margin: 10px 8px;

    background: rgba(0,0,0,.07);
}


.mobile-menu-section-label {
    padding:
        8px 14px
        5px;

    color: #888;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .08em;
}


/* =========================================================
   PAGE LOCK
   ========================================================= */

body.menu-open {
    overflow: hidden;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        height: 82px;
        padding: 0 25px;
    }


    .site-header-center {
        display: none;
    }


    .mobile-menu {
        top: 68px;
        right: 12px;

        width:
            calc(100vw - 24px);

        max-height:
            calc(100vh - 82px);

        border-radius: 24px;
    }


    .mobile-menu-links a {
        min-height: 50px;
        font-size: 14px;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .mobile-menu {
        top: 68px;
        right: 12px;

        width:
            calc(100vw - 24px);

        border-radius: 22px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.menu-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu a:focus-visible {
    outline: 2px solid #6d5dfb;
    outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {

    .mobile-menu,
    .mobile-menu-overlay,
    .menu-toggle,
    .mobile-menu-close,
    .mobile-menu a {
        transition: none;
    }

}

/* =========================================================
   AI NEW BADGE
   ========================================================= */

.nav-ai {
    position: relative;
}

.new-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 5px;
    padding: 2px 6px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #d8b46a 0%,
            #e9a66f 45%,
            #d98ca8 100%
        );

    color: #fff;

    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;

    vertical-align: top;

    box-shadow:
        0 3px 10px rgba(210,150,110,.28);
}

.mobile-ai-link .new-pill {
    margin-left: auto;
    font-size: 8px;
}

/* ==========================================================
   HEADER — PREVENT PAGE TRANSITION FLICKER
========================================================== */

.site-header {
    opacity: 1;
    visibility: visible;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Keep header visually stable during page rendering */
html {
    background: #fff;
}

body {
    margin: 0;
    background: #fff;
}


/* =========================================================
   FINAL UNIFIED MOBILE MENU STATE
   The menu must remain hidden until JS adds .active.
   ========================================================= */
.mobile-menu {
    display: flex;
}

.mobile-menu:not(.active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .mobile-menu {
        display: flex;
    }
}


/* Keep the navigation trigger reliably clickable. */
.site-header {
    z-index: 20001;
}

.menu-toggle {
    position: relative;
    z-index: 20002;
}


/* =========================================================
   MOBILE MENU — FAST OPEN
   ========================================================= */

@media (max-width: 768px) {

    .mobile-menu {
        transition:
            opacity .12s ease,
            visibility .12s ease,
            transform .12s ease;

        will-change: opacity, transform;
    }

    .mobile-menu-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        transition:
            opacity .10s ease,
            visibility .10s ease;
    }

    .menu-toggle {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}



/* =========================================================
   MOBILE MENU TOGGLE — MINIMAL
   ========================================================= */

.menu-toggle,
.mobile-menu-toggle,
#menuToggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.menu-toggle span,
.mobile-menu-toggle span,
#menuToggle span {
    background: currentColor;
}


/* =========================================================
   MENU TOGGLE — LINES ONLY
   No circle, background, border, or shadow
   Applies to mobile + desktop
   ========================================================= */

.menu-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;

    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.menu-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.menu-toggle span {
    background: currentColor !important;
    box-shadow: none !important;
}


/* =========================================================
   FINAL MENU TOGGLE — HAMBURGER LINES ONLY
   Desktop + Mobile
   ========================================================= */

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.menu-toggle:active,
.menu-toggle.active {
    background: none !important;
    background-color: transparent !important;

    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Remove any pseudo-element that may be creating the square */
.menu-toggle::before,
.menu-toggle::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Keep only the actual hamburger lines */
.menu-toggle span {
    background: currentColor !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Don't let the button itself create a visible rectangle */
@media (min-width: 769px) {
    .menu-toggle {
        background: transparent !important;
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
    }
}


/* =========================================================
   MENU TOGGLE — ICON ONLY
   Desktop + Mobile
   ========================================================= */

.menu-toggle {
    width: 25px !important;
    height: 25px !important;

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #171717 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.menu-toggle:active {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}

/* Material Symbols hamburger itself */
.menu-toggle .material-symbols-outlined {
    font-size: 25px !important;
    line-height: 1 !important;

    background: transparent !important;
    color: #171717 !important;

    padding: 0 !important;
    margin: 0 !important;

    box-shadow: none !important;
}



/* ============================================================
   SEARCH PAGE HEADER MODE
   The canonical header becomes the MLS/search header.
   ============================================================ */

.site-header-search {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 0 20px;
}


/* Normal pages */
.site-header-nav {
    display: flex;
}


/* Search pages */
body.search-page .site-header {
    position: sticky;
    top: 0;
    height: 88px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    z-index: 10000;
}

body.search-page .site-header-nav {
    display: none;
}

body.search-page .site-header-search {
    display: flex;
}


/* Search toolbar inside the canonical header */

.site-header-search .properties-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    min-width: 0;
}


/* Search input */

.site-header-search .search-box {
    height: 48px;
    width: 320px;
    flex-shrink: 1;
}


/* Keep filter controls compact inside the header */

.site-header-search .filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}


/* Search page mobile */

@media (max-width: 1200px) {

    .site-header-search .properties-toolbar {
        gap: 8px;
    }

    .site-header-search .search-box {
        width: 220px;
    }

    .site-header-search .filter-button {
        padding-left: 12px;
        padding-right: 12px;
    }

}


@media (max-width: 900px) {

    body.search-page .site-header {
        height: 82px;
        padding: 0 25px;
    }

    body.search-page .site-header-search {
        display: none;
    }

    body.search-page .site-header-nav {
        display: none;
    }

}


/* ============================================================
   RILITY AUTH MODAL
   ============================================================ */

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal[hidden] {
    display: none;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, .48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.auth-modal-card {
    position: relative;
    z-index: 1;
    width: min(92vw, 440px);
    padding: 38px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .20);
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f5f4f1;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-modal-header img {
    width: 110px;
    height: auto;
    margin-bottom: 20px;
}

.auth-modal-header h2 {
    margin: 0;
    color: #171717;
    font-size: 28px;
    font-weight: 600;
}

.auth-modal-header p {
    margin: 8px 0 0;
    color: #777;
    font-size: 14px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.auth-name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-field label {
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.auth-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #d8d5ce;
    border-radius: 9px;
    background: #fff;
    color: #171717;
    font: inherit;
    outline: none;
}

.auth-field input:focus {
    border-color: #b99b62;
    box-shadow: 0 0 0 3px rgba(185, 155, 98, .12);
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
    padding: 13px 18px;
    border: 0;
    border-radius: 9px;
    background: #171717;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.auth-submit:hover {
    background: #292929;
}

.auth-submit:disabled {
    opacity: .6;
    cursor: wait;
}

.auth-form-error {
    padding: 11px 12px;
    border-radius: 8px;
    background: #fff0f0;
    color: #a52626;
    font-size: 13px;
}

.auth-switch {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 22px;
    color: #777;
    font-size: 13px;
}

.auth-switch button {
    padding: 0;
    border: 0;
    background: none;
    color: #9b7d45;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.header-auth {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 10px;
}

.header-auth-button {
    border: 0;
    border-radius: 20px;
    padding: 9px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.header-auth-signin {
    background: transparent;
    color: #222;
}

.header-auth-signup {
    background: #171717;
    color: #fff;
}

.header-user {
    border: 0;
    border-radius: 20px;
    padding: 8px 12px;
    background: #f5f4f1;
    color: #222;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.header-user .material-symbols-outlined {
    font-size: 20px;
}

.header-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
    border: 1px solid #eee;
}

.header-user-menu[hidden] {
    display: none;
}

.header-user-email {
    padding: 8px 9px 10px;
    color: #777;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.header-user-menu button {
    width: 100%;
    padding: 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.header-user-menu button:hover {
    background: #f5f4f1;
}

@media (max-width: 600px) {

    .header-auth-button {
        padding: 8px 10px;
        font-size: 12px;
    }

    .header-auth {
        margin-right: 4px;
    }

    .auth-modal-card {
        padding: 32px 22px;
    }

    .auth-name-fields {
        grid-template-columns: 1fr;
    }

}


.auth-form-error.success {
    background: #f1f8f3;
    color: #27633a;
}


body.auth-modal-open {
    overflow: hidden;
}

.auth-modal {
    isolation: isolate;
}


/* Auth modal interaction/layering fix */

.auth-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.auth-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    cursor: pointer;
}

.auth-modal-card {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

.auth-modal-close {
    z-index: 2 !important;
    pointer-events: auto !important;
}

#auth-switch-button {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    cursor: pointer;
}

.header-user[hidden],
.header-auth-button[hidden] {
    display: none !important;
}

.header-admin-link {
    display: block;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.header-admin-link:hover {
    background: rgba(0, 0, 0, 0.05);
}



/* =========================================================
   GLOBAL SITE HEADER EDGE RULE
   Desktop: 50px
   Mobile: 25px
   Applies to every shared site header, including search/MLS.
   ========================================================= */

.site-header {
    padding-left: 50px !important;
    padding-right: 50px !important;
}

@media (max-width: 900px) {
    .site-header {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}