/* GENERATED — do not edit.
 * Extracted from header.php by scripts/extract-inline-css.php.
 * Edit the source template, then re-run the tool.
 * Blocks are concatenated in document order; that order is the cascade.
 */

/* ---- header.php block 1, source line 389 ---- */

        .main-menu .navigation>li.has-child>a::after {
            display: none;
        }

        /* Premium Golden Shiny Navigation Hover and Active Styles */
        @keyframes shiny-gold-sweep {
            0% {
                background-position: 200% center;
            }
            100% {
                background-position: -200% center;
            }
        }

        #header-main .main-menu .navigation > li > a {
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        #header-main .main-menu .navigation > li.current-menu > a,
        #header-main .main-menu .navigation > li > a:hover {
            color: #ebd8b0 !important;
            background: linear-gradient(90deg, #ebd8b0 0%, #fff7d6 25%, #f7d86a 50%, #fff7d6 75%, #ebd8b0 100%) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            animation: shiny-gold-sweep 3s linear infinite !important;
            filter: drop-shadow(0 0 3px rgba(247, 216, 106, 0.7));
            font-weight: 700 !important;
        }

        /* Subtle gold glow line indicator just under the nav link text.
           Placed from the text's centre, not the link's bottom: the link has
           29px of vertical padding, so bottom:-5px hung the bar ~34px below
           the words, where it read as detached from them. In em so it tracks
           the 13-17px font sizes the breakpoints below set. */
        #header-main .main-menu .navigation > li > a::before {
            content: '';
            position: absolute;
            top: calc(50% + 0.95em);
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #ebd8b0, #f7d86a, #ebd8b0, transparent);
            transition: all 0.3s ease;
            transform: translateX(-50%);
            opacity: 0;
            box-shadow: 0 0 8px rgba(247, 216, 106, 0.8);
        }

        #header-main .main-menu .navigation > li.current-menu > a::before,
        #header-main .main-menu .navigation > li:hover > a::before {
            width: 80%;
            opacity: 1;
        }

        .mdi {
            font-size: 42px;
        }

        .inner-mobile-nav #menu-mobile-menu li.menu-item-has-children-mobile>a::after {
            display: none;
        }

        @media only screen and (max-width: 600px) {
            .widget-tabs.style-1 .widget-menu-tab .item-title {
                font-size: 12px;
            }
        }

        /* membership */
        .pricing-container {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: start;
            max-width: 1200px;
            margin-top: 20px;
        }

        .pricing-card {
            background: white;
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            flex: 1;
            min-width: 200px;
            max-width: 350px;
            transition: transform 0.3s ease;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
        }

        .pricing-card.popular {
            border: 2px solid #e92121;
            position: relative;
        }

        .popular-badge {
            position: absolute;
            top: -12px;
            right: 2rem;
            background: #e92121;
            color: white;
            padding: 0.25rem 1rem;
            border-radius: 1rem;
            font-size: 0.875rem;
        }

        .plan-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1f2937;
        }

        .plan-price {
            font-size: 2.5rem;
            font-weight: 700;
            color: #e92121;
            margin-bottom: 0.5rem;
        }

        .plan-duration {
            color: #6b7280;
            margin-bottom: 1rem;
            font-size: 0.875rem;
        }

        .features-list {
            list-style: none;
            margin-bottom: 2rem;
        }

        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: #4b5563;
        }

        .feature-item::before {
            content: "✓";
            color: #3ef53e;
            margin-right: 0.75rem;
            font-weight: bold;
        }

        .subscribe-btn {
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 0.5rem;
            background: #e92121;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .subscribe-btn:hover {
            background: #1d4ed8;
        }

        .subscribe-btn.outlined {
            background: transparent;
            border: 2px solid #e92121;
            color: #e92121;
        }

        .subscribe-btn.outlined:hover {
            background: #2563eb;
            color: white;
        }

        .logo__wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .svg__logo {
            width: 5.5dvw;
            height: 5.5dvw;
        }

        @media only screen and (max-width: 700px) {
            .svg__logo {
                width: 14vw;
                height: auto;
            }
        }

        @media(min-width:640px) and (max-width:768px) {

            .svg__logo {
                width: 13dvw !important;
                height: 13dvw !important;
            }

        }

        @media(max-width:640px) {
            .svg__logo {
                width: 45px !important;
                height: auto !important;
            }
        }

        /* button shimmer */
        .fade-in-delay-3 {
            animation-delay: 0.9s;
        }

        .fade-in {
            animation: fadeIn 1s ease forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .chat-button-compare,
        .add-list {
            padding: 12px 30px;
            font-size: 13px;
            /* Slightly increased for better readability */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;

            color: #FFF;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            z-index: 5;

            /* Enhanced Shadow & Transition */
            box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .add-list {
            background: #1E90FF !important;
        }

        /* Login & Register — dark premium navy blue */
        .chat-button-compare {
            background: linear-gradient(135deg, #0d2143 0%, #050c1a 100%) !important;
            color: #FFF !important;
            box-shadow: 0 4px 15px rgba(13, 33, 67, 0.45) !important;
        }

        /* Compare — gold-outlined glassy style (matches about.php .btn-back) */
        .chat-button-compare.compare-btn {
            background: rgba(6, 17, 33, 0.6) !important;
            color: #ebd8b0 !important;
            border: 1px solid rgba(235, 216, 176, 0.4) !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
        }

        .chat-button-compare:hover,
        .add-list:hover {
            color: #FFF;
        }

        .chat-button-compare.compare-btn:hover {
            background: rgba(235, 216, 176, 0.12) !important;
            border-color: rgba(235, 216, 176, 0.8) !important;
            color: #ebd8b0 !important;
            box-shadow: 0 6px 20px rgba(235, 216, 176, 0.2) !important;
        }

        .chat-button-compare::before,
        .add-list::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(45deg);
            animation: buttonShimmer 4s infinite;
        }

        @keyframes buttonShimmer {
            0% {
                transform: rotate(45deg) translateY(100%);
            }

            100% {
                transform: rotate(45deg) translateY(-100%);
            }
        }

        .fav-icon-wrapper {
            position: relative;
            display: inline-block;
        }

        .fav-count {
            position: absolute;
            top: -9px;
            right: -12px;
            background: #1E90FF;
            color: white;
            font-size: 12px;
            font-weight: 300;
            padding: 0px 6px;
            border-radius: 50%;

        }

        @media(max-width:640px) {

            .header-inner-wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px 15px 16px 15px !important;
                /* Ensure padding for hamburger */
            }

            .header-right {
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .chat-button-compare,
            .add-list {
                padding: 8px 14px !important;
                font-size: 11px !important;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.4px !important;
                white-space: nowrap;
                background: #1E90FF !important;
                color: #FFF;
                border: none;
                border-radius: 50px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                z-index: 5;
            }

            .chat-button-compare {
                background: linear-gradient(135deg, #0d2143 0%, #050c1a 100%) !important;
                color: #FFF !important;
            }

            .chat-button-compare.compare-btn {
                background: rgba(6, 17, 33, 0.6) !important;
                color: #ebd8b0 !important;
                border: 1px solid rgba(235, 216, 176, 0.4) !important;
            }

            .user {
                width: 50px !important;
            }

            .user span {
                display: none !important;
            }

            .btn-add {
                display: none !important;
            }
        }

        /* Extra-small phones (iPhone SE / ≤400px): keep buttons on one row */
        @media (max-width: 400px) {
            .header-right {
                gap: 4px !important;
            }

            .fav-icon-wrapper i {
                font-size: 19px !important;
            }

            .chat-button-compare,
            .add-list {
                padding: 6px 10px !important;
                font-size: 9.5px !important;
                letter-spacing: 0.2px !important;
            }
        }

        /* Very narrow phones (≤360px): tightest fit */
        @media (max-width: 360px) {
            .chat-button-compare,
            .add-list {
                padding: 5px 8px !important;
                font-size: 9px !important;
                letter-spacing: 0 !important;
            }
        }

        .user span {
            display: inline-flex;
        }

        @media (min-width: 640px) and (max-width: 1023px) {
            .mobile-button i {
                font-size: 24px;
            }

            .chat-button-compare,
            .add-list {
                padding: 12px 30px !important;
            }
        }

        input::placeholder {
            color: #FFF !important;
            /* Change to your desired color */
        }

        /* General User name display styling */
        .user-name-text {
            display: inline-block;
            vertical-align: middle;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 120px;
        }

        .role-suffix {
            display: inline-block;
            vertical-align: middle;
        }

        .user-avatar-group .user {
            width: 54px !important;
            height: 54px !important;
            border-radius: 50% !important;
            overflow: hidden !important;
        }

        @media (min-width: 992px) {
            /* Compact Header Styling for medium/smaller desktop screens */
            #header-main .header-inner-wrap {
                gap: 12px;
            }

            .main-menu {
                flex: 1 1 auto !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                display: flex !important;
                justify-content: center !important;
            }

            .main-menu .navigation {
                gap: 20px !important;
                margin: 0 auto !important;
                justify-content: center !important;
            }

            .main-menu .navigation>li>a {
                font-size: 13px !important;
                padding: 29px 0px;
                white-space: nowrap !important;
            }

            .header-right {
                margin-left: 6px !important;
                gap: 12px !important;
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
            }

            .chat-button-compare,
            .add-list {
                padding: 8px 16px !important;
                font-size: 11px !important;
                letter-spacing: 0.5px;
                white-space: nowrap !important;
                min-width: fit-content;
            }

            .add-list a {
                white-space: nowrap !important;
            }

            /* Logged-in user area compacting */
            .box-user .name {
                font-size: 12px !important;
                gap: 4px !important;
                white-space: nowrap;
            }

            .box-user .name i {
                font-size: 14px !important;
            }

            .user-name-text {
                max-width: 90px;
            }

            .role-suffix {
                opacity: 0.85;
                font-size: 11px;
            }
        }

        /* Relax sizes on large screens */
        @media (min-width: 1360px) {
            .main-menu {
                flex: 1 1 auto !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                display: flex !important;
                justify-content: center !important;
            }

            .main-menu .navigation {
                gap: 5rem !important;
                margin: 0 auto !important;
                justify-content: center !important;
            }

            .main-menu .navigation>li>a {
                font-size: 17px !important;
            }

            .header-right {
                margin-left: 16px !important;
                gap: 16px !important;
            }

            .chat-button-compare,
            .add-list {
                padding: 10px 20px !important;
                font-size: 12px !important;
                letter-spacing: 0.8px;
            }

            .user-name-text {
                max-width: 120px;
            }

            .role-suffix {
                font-size: 12px;
            }
        }

        /* Wider spacing on very large screens */
        @media (min-width: 1600px) {
            .main-menu .navigation {
                gap: 6rem !important;
            }
        }

        /* Desktop below 1920px. The signed-in label "Name (Role) · ID: XXX" on one
           row took ~260px, so the menu had to be squeezed (small text, tight
           gaps) to keep the label on screen. The role and ID now sit on a
           second, smaller line under the name, with the caret at the right,
           which gives the menu its room back. */
        @media (min-width: 992px) and (max-width: 1919px) {
            /* Plain inline text with a forced break before the role, so the box
               is exactly as wide as its longer line (a wrapping flex box sizes
               itself to everything on one row). */
            #header-main .header-right .box-user .name {
                display: inline-block !important;
                white-space: nowrap !important;
                position: relative;
                padding-right: 18px;
                line-height: 1.25;
                text-align: left;
                flex-shrink: 0;
            }

            #header-main .header-right .box-user {
                flex-shrink: 0;
            }

            #header-main .header-right .box-user .name .role-suffix::before {
                content: "\A";
                white-space: pre;
            }

            /* inline, not inline-block: the break has to fall in the label's
               own line, not inside the role's box */
            #header-main .header-right .box-user .name .role-suffix,
            #header-main .header-right .box-user .name .user-sku-id {
                display: inline !important;
                font-size: 11px !important;
                opacity: 0.85;
            }

            #header-main .header-right .box-user .name > i.fa-angle-down {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        /* (The root font size is 10px here, so 1rem = 10px.) */
        /* 992-1199px: the tightest desktop widths (this row overflowed here
           before too); compact everything a little. */
        @media (min-width: 992px) and (max-width: 1199px) {
            .main-menu .navigation {
                gap: 1.1rem !important;
            }

            .main-menu .navigation>li>a {
                font-size: 13px !important;
            }

            #header-main .header-right .box-user .name .user-name-text {
                max-width: 80px;
            }

            .chat-button-compare,
            .add-list {
                padding: 7px 12px !important;
            }
        }

        /* Below 1100px the ID line is the widest part of the label; it stays on
           the profile and dashboard. */
        @media (min-width: 992px) and (max-width: 1099px) {
            #header-main .header-right .box-user .name .user-sku-id {
                display: none !important;
            }
        }

        @media (min-width: 1200px) and (max-width: 1359px) {
            .main-menu .navigation {
                gap: 1.9rem !important;
            }

            .main-menu .navigation>li>a {
                font-size: 14px !important;
            }
        }

        @media (min-width: 1360px) and (max-width: 1439px) {
            .main-menu .navigation {
                gap: 2.3rem !important;
            }

            .main-menu .navigation>li>a {
                font-size: 16px !important;
            }
        }

        @media (min-width: 1440px) and (max-width: 1599px) {
            .main-menu .navigation {
                gap: 2.7rem !important;
            }

            .main-menu .navigation>li>a {
                font-size: 16px !important;
            }
        }

        @media (min-width: 1600px) and (max-width: 1919px) {
            .main-menu .navigation {
                gap: 4.3rem !important;
            }

            .main-menu .navigation>li>a {
                font-size: 16px !important;
            }
        }

        /* Active Role Indicator Styles */
        .user-avatar-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            cursor: pointer;
        }

        .role-label {
            font-family: inherit;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 3px;
            line-height: 1;
            z-index: 10;
            /* Golden text with a slight glow */
            color: #ebd8b0 !important;
            text-shadow:
                0 0 4px rgba(235, 216, 176, 0.65),
                0 0 8px rgba(235, 216, 176, 0.35);
        }

        /* All role labels share the premium golden glow */
        .role-agent,
        .role-buyer,
        .role-fsbo,
        .role-lender {
            color: #ebd8b0 !important;
        }

        @media (max-width: 640px) {
            .user-avatar-group {
                margin-right: 5px;
            }

            .user-avatar-group .user {
                width: 44px !important;
                height: 44px !important;
            }

            .role-label {
                font-size: 8px !important;
                margin-top: 2px !important;
                letter-spacing: 0.2px !important;
            }

            .box-user .name {
                display: none !important;
            }
        }

        .menu-user .wallet-positive-button{
            color: #40dc86 !important;
            
        }
        .menu-user .wallet-zero-button{
            color: #ebd8b0 !important;
        }

/* ---- header.php block 2, source line 1040 ---- */

    #dealRoomLoader {
        position: fixed;
        inset: 0;
        z-index: 99999999;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background:
            radial-gradient(circle at 50% 42%, rgba(44, 28, 84, 0.65) 0%, transparent 55%),
            radial-gradient(circle at 82% 78%, rgba(34, 211, 238, 0.06) 0%, transparent 45%),
            linear-gradient(160deg, #0b0a1a 0%, #07060f 55%, #050409 100%);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        visibility: hidden;
        /* Visual-only: must NOT capture the click that opens the Deal Room. */
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    #dealRoomLoader.active { opacity: 1; visibility: visible; }

    /* Strictly suppress loader and backdrop overlays on dashboard & app internal subpages */
    html.housbe-app-route #dealRoomLoader {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* CHROMIUM BLUR FIX — scoped to the Deal Room loader only.
       The full-screen #dealRoomLoader overlay's backdrop-filter: blur(8px)
       caused GPU viewport dark-blur smearing in Chrome/Edge on logged-in
       sessions. Neutralising it HERE (not site-wide) keeps every other
       glassmorphism element intact. */
    body {
        background-attachment: scroll !important;
    }

    #dealRoomLoader {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* The video IS the loader — fills the whole screen, cropping to cover.
       Starts hidden and fades in only once it has a real frame to paint, so the
       browser's buffering spinner never flashes "before the video". Until then the
       loader's dark backdrop (above) is all that shows. */
    #dealRoomLoader .drl-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.35s ease;
    }
    #dealRoomLoader .drl-video.ready { opacity: 1; }

    /* Phones get their own portrait video (locker.mp4, picked by the script below),
       so the base full-bleed cover above fits mobile screens naturally — no
       shrink-to-card override needed anymore. */

/* ---- header.php block 3, source line 1257 ---- */

    #idvPendingModal {
        position: fixed;
        inset: 0;
        z-index: 9999990; /* above menus & popups, below #dealRoomLoader */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(4, 7, 18, 0.78);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }
    #idvPendingModal.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.idv-modal-open { overflow: hidden; }

    #idvPendingModal .idv-card {
        position: relative;
        width: 100%;
        max-width: 430px;
        max-height: calc(100vh - 40px);  /* fallback for engines without dvh */
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        text-align: center;
        background: linear-gradient(168deg, #101d3a 0%, #0a1226 55%, #070c1a 100%);
        border: 1px solid rgba(235, 216, 176, 0.28);
        border-radius: 22px;
        padding: 36px 28px 26px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
        transform: translateY(16px) scale(0.97);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #idvPendingModal.active .idv-card { transform: none; }

    #idvPendingModal .idv-close {
        position: absolute;
        top: 14px; right: 14px;
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        color: #cbd5e1;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }
    #idvPendingModal .idv-close:hover { background: rgba(255, 80, 90, 0.18); border-color: rgba(255, 80, 90, 0.45); color: #fff; }

    /* Pulsing status icon */
    #idvPendingModal .idv-icon-wrap {
        position: relative;
        width: 78px; height: 78px;
        margin: 0 auto 18px;
    }
    #idvPendingModal .idv-icon {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: linear-gradient(145deg, rgba(247, 216, 106, 0.16), rgba(235, 216, 176, 0.05));
        border: 1px solid rgba(247, 216, 106, 0.45);
        color: #f7d86a;
        font-size: 30px;
        box-shadow: 0 0 22px rgba(247, 216, 106, 0.22);
    }
    #idvPendingModal .idv-pulse {
        position: absolute; inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(247, 216, 106, 0.5);
        animation: idvPulse 2.4s ease-out infinite;
    }
    #idvPendingModal .idv-pulse-2 { animation-delay: 1.2s; }
    @keyframes idvPulse {
        0%   { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(1.65); opacity: 0; }
    }

    #idvPendingModal .idv-title {
        margin: 0 0 8px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 0.3px;
        background: linear-gradient(90deg, #ebd8b0 0%, #fff7d6 50%, #f7d86a 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    #idvPendingModal .idv-sub {
        margin: 0 auto 22px;
        max-width: 330px;
        color: #9aa7bd;
        font-size: 13.5px;
        line-height: 1.55;
    }

    /* Progress steps */
    #idvPendingModal .idv-steps {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        margin-bottom: 22px;
    }
    #idvPendingModal .idv-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        min-width: 64px;
    }
    #idvPendingModal .idv-dot {
        width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #64748b;
    }
    #idvPendingModal .idv-step.done .idv-dot {
        background: rgba(52, 211, 153, 0.14);
        border-color: rgba(52, 211, 153, 0.55);
        color: #34d399;
    }
    #idvPendingModal .idv-step.current .idv-dot {
        background: rgba(247, 216, 106, 0.14);
        border-color: rgba(247, 216, 106, 0.6);
        color: #f7d86a;
        box-shadow: 0 0 12px rgba(247, 216, 106, 0.35);
        animation: idvGlowDot 1.8s ease-in-out infinite;
    }
    @keyframes idvGlowDot {
        0%, 100% { box-shadow: 0 0 6px rgba(247, 216, 106, 0.25); }
        50%      { box-shadow: 0 0 16px rgba(247, 216, 106, 0.5); }
    }
    #idvPendingModal .idv-step-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: #8a94a6;
        text-transform: uppercase;
    }
    #idvPendingModal .idv-step.done .idv-step-label { color: #34d399; }
    #idvPendingModal .idv-step.current .idv-step-label { color: #f7d86a; }
    #idvPendingModal .idv-line {
        flex: 0 1 46px;
        height: 1px;
        margin-top: 15px;
        background: rgba(255, 255, 255, 0.14);
    }
    #idvPendingModal .idv-line.done { background: linear-gradient(90deg, rgba(52, 211, 153, 0.6), rgba(247, 216, 106, 0.5)); }

    /* Info rows */
    #idvPendingModal .idv-info {
        text-align: left;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    #idvPendingModal .idv-info-row {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        color: #aeb9cc;
        font-size: 13px;
        line-height: 1.5;
    }
    #idvPendingModal .idv-info-row i {
        color: #ebd8b0;
        font-size: 14px;
        margin-top: 2px;
        flex-shrink: 0;
    }
    #idvPendingModal .idv-info-row strong { color: #e6ecf5; font-weight: 600; }

    #idvPendingModal .idv-btn {
        width: 100%;
        padding: 13px 18px;
        border: none;
        border-radius: 50px;
        background: linear-gradient(135deg, #f7d86a 0%, #ebd8b0 100%);
        color: #101d3a;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: 0 6px 18px rgba(247, 216, 106, 0.22);
    }
    #idvPendingModal .idv-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(247, 216, 106, 0.32); }

    #idvPendingModal .idv-help {
        margin-top: 14px;
        color: #7a8598;
        font-size: 12px;
    }
    #idvPendingModal .idv-help a { color: #ebd8b0; text-decoration: none; }
    #idvPendingModal .idv-help a:hover { text-decoration: underline; }

    /* Badge affordance: the site's own .menu-user .dropdown-item::after rule already
       renders a gold chevron on every menu item, so only the cursor is needed here. */
    .idv-pending-badge { cursor: pointer; }

    @media (max-width: 480px) {
        #idvPendingModal { padding: 14px; }
        #idvPendingModal .idv-card { padding: 30px 18px 22px; border-radius: 18px; }
        #idvPendingModal .idv-title { font-size: 18.5px; }
        #idvPendingModal .idv-sub { font-size: 12.5px; }
        #idvPendingModal .idv-step { min-width: 56px; }
        #idvPendingModal .idv-line { flex-basis: 26px; }
        #idvPendingModal .idv-step-label { font-size: 10px; }
        #idvPendingModal .idv-info-row { font-size: 12.5px; }
    }

    @media (prefers-reduced-motion: reduce) {
        #idvPendingModal .idv-pulse,
        #idvPendingModal .idv-step.current .idv-dot { animation: none; }
        #idvPendingModal .idv-card { transition: none; }
    }

/* ---- header.php block 4, source line 1602 ---- */

        /* Custom Variables */
        :root {
            --primary-neon: #FF0000;
            /* Red */
            --secondary-neon: #1E90FF;
            /* Dodger Blue */
            --dark-bg: #050505;
            --logo-size: 160px;
            --ring-thickness: 4px;
        }

        /* 1. Global Preloader Container Styling */
        #preloader-housbe-ultimate {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            z-index: 99999;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 1;
            transition: opacity 0.8s ease-out;
            overflow: hidden;
            /* Auto-disable touch blocking after 1s — CSS-only, no JS needed */
            animation: preloaderUnblock 0.01s 1s forwards;
        }

        @keyframes preloaderUnblock {
            to { pointer-events: none; }
        }

        /* 2. Background Carousel */
        .carousel-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            opacity: 0.4;
            /* Low opacity for background */
            transform: scale(1.1);
            /* Slight zoom to avoid edges */
        }

        .carousel-row {
            flex: 1;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .track {
            display: flex;
            width: max-content;
            gap: 20px;
        }

        .img-card {
            width: 300px;
            height: 200px;
            flex-shrink: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .img-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(30%);
            /* Slight desaturation for elegance */
        }

        /* Animations */
        .scroll-right .track {
            animation: scrollRight 40s linear infinite;
        }

        .scroll-left .track {
            animation: scrollLeft 45s linear infinite;
        }

        @keyframes scrollRight {
            0% {
                transform: translateX(-50%);
            }

            100% {
                transform: translateX(0);
            }
        }

        @keyframes scrollLeft {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* 3. Frosted Glass Overlay */
        .glass-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(4px);
            /* The frosted effect */
            background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
            z-index: 1;
        }

        /* 4. Logo Wrapper (Center) */
        .logo-wrapper-flux {
            position: relative;
            width: var(--logo-size);
            height: var(--logo-size);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            /* Above overlay */
        }

        /* 5. The Dual-Color Rotating Ring */
        .rotating-ring-ultimate {
            position: absolute;
            width: calc(var(--logo-size) + 50px);
            height: calc(var(--logo-size) + 50px);
            border-radius: 50%;
            border: var(--ring-thickness) solid transparent;
            border-top-color: var(--primary-neon);
            border-bottom-color: var(--secondary-neon);
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.3), 0 0 20px rgba(30, 144, 255, 0.3);
            animation: spin 2s linear infinite;
        }

        /* Inner Pulsing Ring */
        .pulsing-ring-inner {
            position: absolute;
            width: calc(var(--logo-size) + 20px);
            height: calc(var(--logo-size) + 20px);
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: pulseRing 3s ease-out infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulseRing {
            0% {
                transform: scale(0.8);
                opacity: 0.5;
                border-color: var(--secondary-neon);
            }

            100% {
                transform: scale(1.5);
                opacity: 0;
                border-color: var(--primary-neon);
            }
        }

        /* 6. Logo Styling */
        .housbe-logo-ultimate {
            width: var(--logo-size);
            height: auto;
            position: relative;
            z-index: 10;
            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
            animation: logoFloat 3s ease-in-out infinite alternate;
        }

        @keyframes logoFloat {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-5px);
            }
        }

        /* Diagonal Opening Transition Styles - REPLACED with Split Reveal */
        .bg-panel-side {
            position: absolute;
            top: 0;
            height: 100%;
            width: 51%;
            /* Slight overlap to prevent gap */
            background-color: var(--dark-bg);
            z-index: -2;
            transition: transform 1.5s cubic-bezier(0.8, 0, 0.2, 1);
            /* Dramatic ease */
            transition-delay: 0.2s;
            /* Slight delay to let content fade first */
            will-change: transform;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            /* Shadow for depth */
        }

        .bg-panel-side.left {
            left: 0;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }

        .bg-panel-side.right {
            right: 0;
            border-left: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Active State for Opening */
        .preloader-loaded {
            pointer-events: none !important; /* Allow scrolling/touches to pass through during exit animation */
        }

        .preloader-loaded .bg-panel-side.left {
            transform: translateX(-100%);
        }

        .preloader-loaded .bg-panel-side.right {
            transform: translateX(100%);
        }

        /* Fade out content before opening with enhanced animation */
        .preloader-loaded .carousel-wrapper {
            opacity: 0;
            transform: scale(1.2);
            /* Zoom in effect */
            transition: opacity 0.6s ease-out, transform 1.5s ease-out;
        }

        .preloader-loaded .glass-overlay {
            opacity: 0;
            transition: opacity 0.6s ease-out;
        }

        .preloader-loaded .logo-wrapper-flux {
            opacity: 0;
            transform: scale(0.8);
            /* Shrink effect */
            transition: opacity 0.4s ease-in, transform 0.4s ease-in;
        }

/* ---- header.php block 5, source line 2646 ---- */

                                                                                .cls-1 {
                                                                                    fill: none;
                                                                                }

/* ---- header.php block 6, source line 2813 ---- */

                                                                                    .cls-1 {
                                                                                        fill: none;
                                                                                    }

/* ---- header.php block 7, source line 3091 ---- */

            /* ══════════════════════════════════════════════════════
               Role Modal — Premium Golden Galaxy 3D
               ══════════════════════════════════════════════════════ */
            /* Modal Overlay */
            .role-modal-overlay {
                display: none;
                /* Hidden by default */
                position: fixed;
                inset: 0;
                background: rgba(4, 9, 18, 0.62);
                /* Dark shade */
                backdrop-filter: blur(14px);
                /* Frosted glass effect */
                -webkit-backdrop-filter: blur(14px);
                z-index: 3000000;
                justify-content: center;
                align-items: center;
                padding: 20px;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .role-modal-overlay.active {
                display: flex;
                /* or block, but flex centers content */
                opacity: 1;
            }

            /* Modal Container — dark navy + gold galaxy with 3D gold border */
            .role-modal-container {
                position: relative;
                width: 100%;
                max-width: 540px;
                background:
                    radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
                    radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.16) 0%, transparent 55%),
                    linear-gradient(160deg, rgba(14, 30, 55, 0.97) 0%, rgba(6, 17, 33, 0.98) 100%) !important;
                border: 1px solid rgba(170, 200, 240, 0.32);
                border-radius: 22px;
                padding: 30px 30px 32px;
                isolation: isolate;
                overflow: hidden;
                box-shadow:
                    0 18px 40px rgba(0, 0, 0, 0.55),
                    0 28px 60px rgba(0, 0, 0, 0.35),
                    0 0 30px rgba(120, 170, 240, 0.16),
                    inset 0 1px 0 rgba(255, 255, 255, 0.14),
                    inset 0 0 22px rgba(120, 170, 240, 0.08);
                color: #fff;
                transform: scale(0.96) translateY(12px);
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                max-height: calc(100vh - 40px);
            }

            .role-modal-overlay.active .role-modal-container {
                transform: scale(1) translateY(0);
            }

            /* Rotating galaxy starfield layer */
            .role-modal-stars {
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background-image:
                    radial-gradient(circle, rgba(255, 255, 255, 0.45) 1px, transparent 1px),
                    radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px),
                    radial-gradient(circle, rgba(235, 216, 176, 0.28) 1px, transparent 1px);
                background-size: 100px 100px, 150px 150px, 120px 120px;
                animation: roleGalaxyRotate 80s infinite linear;
                pointer-events: none;
                z-index: 0;
                opacity: 0.55;
            }

            @keyframes roleGalaxyRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* Decorative corner glows */
            .role-modal-glow {
                position: absolute;
                width: 320px;
                height: 320px;
                border-radius: 50%;
                pointer-events: none;
                z-index: 0;
                filter: blur(40px);
            }
            .role-modal-glow-1 {
                top: -130px;
                right: -110px;
                background: radial-gradient(circle, rgba(235, 216, 176, 0.20) 0%, transparent 70%);
            }
            .role-modal-glow-2 {
                bottom: -140px;
                left: -120px;
                background: radial-gradient(circle, rgba(43, 93, 153, 0.22) 0%, transparent 70%);
            }

            /* Scrollable content sits above the galaxy layers (scrollbar hidden) */
            .role-modal-content {
                position: relative;
                z-index: 2;
                text-align: center;
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .role-modal-content::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
            }

            /* Close Button — gold accent */
            .role-close-btn {
                position: absolute;
                top: 2px;
                right: 2px;
                width: 38px;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(235, 216, 176, 0.08);
                border: 1px solid rgba(235, 216, 176, 0.25);
                border-radius: 50%;
                color: rgba(235, 216, 176, 0.85);
                font-size: 22px;
                line-height: 1;
                cursor: pointer;
                z-index: 5;
                transition: all 0.25s ease;
            }

            .role-close-btn:hover {
                color: #061121;
                background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%);
                border-color: rgba(235, 216, 176, 0.6);
                transform: rotate(90deg);
                box-shadow: 0 0 18px rgba(235, 216, 176, 0.5);
            }

            /* Header — shiny gold sweep heading */
            .role-modal-header { text-align: left; }
            .role-modal-header h2 {
                margin: 0 0 6px;
                line-height: 1.25;
                font-size: 24px;
                font-weight: 700;
                letter-spacing: 0.2px;
                background: linear-gradient(90deg, #ebd8b0 0%, #fff7d6 25%, #f7d86a 50%, #fff7d6 75%, #ebd8b0 100%);
                background-size: 200% auto;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                animation: shiny-gold-sweep 3s linear infinite;
                filter: drop-shadow(0 0 6px rgba(247, 216, 106, 0.45));
            }

            .role-modal-header p {
                margin: 0 0 20px;
                font-size: 13.5px;
                color: rgba(225, 235, 250, 0.7);
                letter-spacing: 0.3px;
            }

            /* Stacked neon cards — one glow colour per role (--rgb drives border, halo, icon tint) */
            .role-cards-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .role-card {
                --rgb: 59, 130, 246;
                --hi: #9cc4ff;
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 14px 16px;
                border-radius: 14px;
                text-decoration: none;
                transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
                position: relative;
                overflow: hidden;
                background:
                    radial-gradient(130% 160% at 0% 50%, rgba(var(--rgb), 0.16) 0%, transparent 60%),
                    linear-gradient(165deg, rgba(11, 26, 46, 0.92) 0%, rgba(5, 14, 28, 0.94) 100%);
                border: 1.5px solid rgba(var(--rgb), 0.85);
                box-shadow:
                    0 0 0 1px rgba(var(--rgb), 0.12),
                    0 0 12px rgba(var(--rgb), 0.45),
                    0 0 30px rgba(var(--rgb), 0.18),
                    inset 0 0 20px rgba(var(--rgb), 0.12);
                text-align: left;
            }

            .role-card:hover,
            .role-card:focus-visible {
                transform: translateY(-3px);
                border-color: rgb(var(--rgb));
                outline: none;
                box-shadow:
                    0 0 0 1px rgba(var(--rgb), 0.25),
                    0 0 20px rgba(var(--rgb), 0.70),
                    0 0 48px rgba(var(--rgb), 0.32),
                    0 12px 26px rgba(0, 0, 0, 0.5),
                    inset 0 0 28px rgba(var(--rgb), 0.20);
            }

            /* Role colours, matching the cards on login.php */
            .card-buyer     { --rgb: 251, 191, 36;  --hi: #ffe27a; }
            .card-agent     { --rgb: 34, 211, 238;  --hi: #8af3ff; }
            .card-homeowner { --rgb: 255, 107, 122; --hi: #ff9aa4; }
            .card-lender    { --rgb: 167, 139, 250; --hi: #d2b8ff; }
            .card-guest     { --rgb: 99, 102, 241;  --hi: #a5a8ff; }

            /* Icon tile — tinted glass square with a glowing glyph */
            .role-icon-box {
                flex-shrink: 0;
                font-size: 20px;
                color: var(--hi);
                width: 46px;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                background: radial-gradient(circle at 50% 30%, rgba(var(--rgb), 0.30) 0%, rgba(var(--rgb), 0.08) 75%);
                border: 1.5px solid rgba(var(--rgb), 0.75);
                box-shadow:
                    0 0 12px rgba(var(--rgb), 0.45),
                    inset 0 0 12px rgba(var(--rgb), 0.22);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .role-icon-box i {
                color: var(--hi) !important;
                filter: drop-shadow(0 0 5px rgba(var(--rgb), 0.9));
            }
            /* .role-cards-grid prefix out-ranks a legacy .role-card:hover .role-icon-box in footer.php */
            .role-cards-grid .role-card:hover .role-icon-box {
                transform: scale(1.06);
                background: radial-gradient(circle at 50% 30%, rgba(var(--rgb), 0.38) 0%, rgba(var(--rgb), 0.12) 75%);
                box-shadow:
                    0 0 20px rgba(var(--rgb), 0.7),
                    inset 0 0 14px rgba(var(--rgb), 0.3);
            }

            /* Text Content */
            .role-text-content {
                text-align: left;
                flex: 1;
                min-width: 0;
            }

            .role-text-content h3 {
                margin: 0;
                font-size: 16px;
                font-weight: 700;
                color: #fff;
                letter-spacing: 0.2px;
            }
            .role-card:hover .role-text-content h3 {
                color: var(--hi);
            }

            .role-text-content p {
                margin: 3px 0 0;
                font-size: 12.5px;
                line-height: 1.4;
                color: rgba(225, 235, 250, 0.62);
            }

            /* Hover arrow — role colour */
            .role-card-arrow {
                flex-shrink: 0;
                font-size: 14px;
                color: var(--hi) !important;
                opacity: 0;
                transform: translateX(-6px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
            .role-card:hover .role-card-arrow,
            .role-card:focus-visible .role-card-arrow {
                opacity: 1;
                transform: translateX(0);
            }

            @media (max-width: 600px) {
                .role-modal-container {
                    padding: 26px 18px 28px;
                    border-radius: 18px;
                }

                /* Bigger tap target, pulled inward off the rounded corner */
                .role-close-btn {
                    top: 12px;
                    right: 12px;
                    width: 42px;
                    height: 42px;
                    font-size: 24px;
                    background: rgba(235, 216, 176, 0.12);
                    border-color: rgba(235, 216, 176, 0.4);
                }

                /* Push heading clear of the close button */
                .role-modal-header {
                    padding-top: 34px;
                }

                .role-modal-header h2 {
                    font-size: 20px;
                    padding: 0 46px 0 0;
                }

                .role-modal-header p {
                    margin-bottom: 20px;
                }

                .role-cards-grid {
                    grid-template-columns: 1fr;
                    gap: 12px;
                }

                .role-card {
                    padding: 14px;
                    gap: 12px;
                }

                .role-icon-box {
                    width: 44px;
                    height: 44px;
                    font-size: 18px;
                }

                /* Arrow always subtly visible on touch devices */
                .role-card-arrow {
                    opacity: 0.55;
                    transform: translateX(0);
                }

                /* Tone down the heavy galaxy on small screens for performance */
                .role-modal-stars {
                    opacity: 0.35;
                }
            }

            #loginPopupBtn,
            #registerPopup {
                background: linear-gradient(135deg, #0d2143 0%, #050c1a 100%) !important;
                box-shadow: 0 0 0 1px rgba(13, 33, 67, 0.6), 0 0 15px rgba(13, 33, 67, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
                border: 1px solid rgba(255, 255, 255, 0.15) !important;
                border-radius: 50px !important;
                transition: transform 0.2s ease, box-shadow 0.2s ease !important;
            }

            #loginPopupBtn:hover,
            #registerPopup:hover {
                transform: scale(1.02) !important;
                box-shadow: 0 0 0 1px rgba(13, 33, 67, 0.9), 0 0 25px rgba(13, 33, 67, 0.8), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
            }

            .navigation a:hover {
                text-shadow: 0 0 15px rgba(31, 182, 217, 0.8);
                transition: text-shadow 0.3s ease;
            }

            .gradient-text {
                background: linear-gradient(90deg, #8b5cf6 0%, #d946ef 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            /* Hamburger (mobile menu toggle) — premium gold to match the theme */
            .mobile-button i,
            .mobile-button i.fa-bars {
                background: linear-gradient(135deg, #ebd8b0 0%, #fff7d6 50%, #f7d86a 100%) !important;
                -webkit-background-clip: text !important;
                background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                color: #f7d86a !important;
                filter: drop-shadow(0 0 2px rgba(247, 216, 106, 0.45));
            }

            /* Profile Dropdown Overrides — Dark Glassmorphism */
            .menu-user {
                background: linear-gradient(160deg, rgba(40, 44, 55, 0.98) 0%, rgba(30, 33, 42, 0.99) 100%) !important;
                backdrop-filter: blur(30px) saturate(150%) !important;
                -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                border-radius: 24px !important;
                padding: 14px 12px 12px !important;
                min-width: 320px !important;
                box-shadow: 
                    0 30px 60px rgba(0, 0, 0, 0.55),
                    0 0 1px rgba(255, 255, 255, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    inset 0 0 20px rgba(0, 0, 0, 0.15) !important;
                top: 115% !important;
                display: flex !important;
                flex-direction: column !important;
                max-height: 90vh !important;
                overflow-y: auto !important;
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
                /* Force own GPU compositing layer so blur renders inside fixed header */
                will-change: transform;
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
                isolation: isolate;
            }

            /* Prevent background content/text overlapping on mobile devices */
            @media (max-width: 991px) {
                .menu-user {
                    background: linear-gradient(160deg, rgba(39, 43, 54, 0.99) 0%, rgba(28, 31, 40, 0.995) 100%) !important;
                    backdrop-filter: blur(40px) saturate(150%) !important;
                    -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
                }
            }


            /* Custom scrollbar for dropdown */
            .menu-user::-webkit-scrollbar {
                width: 6px;
            }

            .menu-user::-webkit-scrollbar-track {
                background: transparent;
            }

            .menu-user::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.15);
                border-radius: 10px;
            }

            .menu-user::-webkit-scrollbar-thumb:hover {
                background: rgba(255, 255, 255, 0.25);
            }

            /* Welcome text hidden to save vertical space so the whole menu fits */
            .menu-user .welcome-text {
                display: none !important;
            }

            /* Grouped panels (Account / Properties / Leads / System) — items
               share one bordered container with thin dividers between them */
            .menu-user .menu-group {
                background: rgba(0, 0, 0, 0.18) !important;
                border: 1px solid rgba(255, 255, 255, 0.18) !important;
                border-radius: 14px !important;
                padding: 2px 6px !important;
                margin-bottom: 8px !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
            }

            .menu-user .welcome-text span.highlight {
                color: #a78bfa !important;
                font-weight: 600 !important;
            }

            .menu-user .dropdown-item {
                display: flex !important;
                align-items: center !important;
                position: relative !important;
                padding: 11px 38px 11px 14px !important;
                margin-bottom: 7px !important;
                border-radius: 12px !important;
                color: #ebd8b0 !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                text-decoration: none !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                background: rgba(0, 0, 0, 0.18) !important;
                border: 1px solid rgba(255, 255, 255, 0.18) !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
                white-space: nowrap !important;
                height: auto !important;
                line-height: 1.3 !important;
            }


            .menu-user .dropdown-item:last-child {
                margin-bottom: 5px !important;
            }

            .menu-user .dropdown-item:hover {
                transform: translateY(-2px) !important;
                background: rgba(255, 255, 255, 0.06) !important;
                border-color: rgba(255, 255, 255, 0.12) !important;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
                color: #fff7d6 !important;
            }

            /* Items inside a grouped panel: no individual card — just a thin
               divider between rows, and a flat hover (no lift) */
            .menu-user .menu-group .dropdown-item {
                background: transparent !important;
                border: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
                border-radius: 0 !important;
                margin-bottom: 0 !important;
                box-shadow: none !important;
            }

            .menu-user .menu-group .dropdown-item:last-child {
                border-bottom: none !important;
                margin-bottom: 0 !important;
            }

            .menu-user .menu-group .dropdown-item:hover {
                transform: none !important;
                background: rgba(255, 255, 255, 0.06) !important;
                box-shadow: none !important;
            }

            /* Chevron right suffix */
            .menu-user .dropdown-item::after {
                content: '\f105' !important;
                font-family: 'Font Awesome 6 Free' !important;
                font-weight: 900 !important;
                position: absolute !important;
                right: 18px !important;
                color: rgba(235, 216, 176, 0.85) !important;
                font-size: 19px !important;
                transition: all 0.3s ease !important;
            }

            .menu-user .dropdown-item:hover::after {
                color: #fff7d6 !important;
                transform: translateX(4px) !important;
            }

            .menu-user .dropdown-item i,
            .menu-user .dropdown-item svg {
                margin-right: 12px !important;
                width: 21px !important;
                height: 21px !important;
                font-size: 19px !important;
                color: #ebd8b0 !important;
                fill: currentColor !important;
                flex-shrink: 0 !important;
                transition: all 0.3s ease !important;
            }

            .menu-user .dropdown-item:hover i,
            .menu-user .dropdown-item:hover svg {
                color: #fff7d6 !important;
                fill: #fff7d6 !important;
            }

            /* Smart SVG Path Styling for Stroke and Fill Elements */
            .menu-user .dropdown-item svg path,
            .menu-user .dropdown-item svg rect,
            .menu-user .dropdown-item svg line,
            .menu-user .dropdown-item svg circle,
            .menu-user .dropdown-item svg polygon {
                transition: all 0.3s ease !important;
            }

            /* For elements that are stroke-based — follow the item's accent color */
            .menu-user .dropdown-item svg [stroke] {
                stroke: currentColor !important;
            }
            .menu-user .dropdown-item:hover svg [stroke] {
                stroke: #fff7d6 !important;
            }

            /* For elements that are fill-based — follow the item's accent color */
            .menu-user .dropdown-item svg [fill]:not([fill="none"]),
            .menu-user .dropdown-item svg path:not([stroke]) {
                fill: currentColor !important;
            }
            .menu-user .dropdown-item:hover svg [fill]:not([fill="none"]),
            .menu-user .dropdown-item:hover svg path:not([stroke]) {
                fill: #fff7d6 !important;
            }

            /* Wallet item specific styles (inheriting status colors) */
            .menu-user .dropdown-item[href="wallet.php"] {
                background: rgba(0, 0, 0, 0.20) !important;
                border-color: rgba(255, 255, 255, 0.05) !important;
            }

            /* Zero Balance - Neutral / premium gold (red is reserved for errors) */
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-zero-button) {
                background: rgba(235, 216, 176, 0.06) !important;
                border-color: rgba(235, 216, 176, 0.22) !important;
                color: #ebd8b0 !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-zero-button) i {
                color: #ebd8b0 !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-zero-button) #ai-balance {
                color: #ebd8b0 !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-zero-button)::after {
                color: rgba(235, 216, 176, 0.7) !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-zero-button):hover {
                background: rgba(235, 216, 176, 0.1) !important;
                border-color: rgba(235, 216, 176, 0.35) !important;
            }

            /* Positive Balance - Green */
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-positive-button) {
                background: rgba(16, 185, 129, 0.05) !important;
                border-color: rgba(16, 185, 129, 0.18) !important;
                color: #10b981 !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-positive-button) i {
                color: #10b981 !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-positive-button) #ai-balance {
                color: #10b981 !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-positive-button)::after {
                color: rgba(16, 185, 129, 0.6) !important;
            }
            .menu-user .dropdown-item[href="wallet.php"]:has(.wallet-positive-button):hover {
                background: rgba(16, 185, 129, 0.08) !important;
                border-color: rgba(16, 185, 129, 0.3) !important;
            }

/* Mobile menu — "Create Account" keeps the gold pill but carries a red neon ring,
   so it reads as the primary call to action above "Enter Deal Room".
   #registerMob out-ranks the .gold-account-btn rules inlined by footer.php. */
#registerMob.gold-account-btn {
    box-shadow:
        0 0 0 2px #ff3d4a,
        0 0 14px 2px rgba(255, 61, 74, 0.70),
        0 0 34px rgba(255, 61, 74, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: regMobGlow 3.6s ease-in-out infinite;
}
#registerMob.gold-account-btn:hover,
#registerMob.gold-account-btn:focus-visible {
    animation: none;
    box-shadow:
        0 0 0 2px #ff5560,
        0 0 20px 3px rgba(255, 61, 74, 0.88),
        0 0 46px rgba(255, 61, 74, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@keyframes regMobGlow {
    0%, 100% { box-shadow: 0 0 0 2px #ff3d4a, 0 0 12px 1px rgba(255, 61, 74, 0.55), 0 0 28px rgba(255, 61, 74, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
    50%      { box-shadow: 0 0 0 2px #ff3d4a, 0 0 18px 3px rgba(255, 61, 74, 0.85), 0 0 40px rgba(255, 61, 74, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    #registerMob.gold-account-btn { animation: none; }
}

/* SIGNED-IN LABEL NEVER LEAVES THE SCREEN (2026-10-05).
   Owners' IDs are long: USR- plus up to 18 digits taken from the 24-character
   owner SKU of the new sign-up, about 125px on their own. With them the owner
   header ran 50-150px past the right edge at every desktop width, cutting off
   the ID and the menu caret. inc/header.php marks such an ID .is-long; it is
   left out of the header (it stays on the profile and the dashboard), as the
   992-1099px rule above already does for every ID. */
@media (min-width: 992px) {
    #header-main .header-right .box-user .name .user-sku-id.is-long {
        display: none !important;
    }
}

/* Room for the label, 992-1919px: the right-hand cluster's gaps are 10px
   (were 16), and the empty .btn-add a signed-in visitor gets no longer takes
   a gap of its own. Together with the menu gaps below (0.3rem less in each
   band) that is about 55px, which is what an owner's label was short at
   1200-1600px. */
@media (min-width: 992px) and (max-width: 1919px) {
    #header-main .header-right {
        gap: 10px !important;
    }

    #header-main .header-right > .btn-add:not(:has(*)) {
        display: none;
    }
}

/* And if the row still does not fit (a long name, a narrow laptop), the label
   is what gives way: the name ends in an ellipsis inside the screen instead
   of the label running past it. A row that fits is unchanged; only the label
   can shrink, never the buttons beside it. */
@media (min-width: 992px) and (max-width: 1919px) {
    #header-main .header-right,
    #header-main .header-right .box-user {
        min-width: 0;
    }

    #header-main .header-right .box-user {
        flex-shrink: 1;
    }

    #header-main .header-right > :not(.box-user) {
        flex-shrink: 0;
    }

    #header-main .header-right .box-user .name {
        min-width: 0;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The name gives way, not the verified tick after it: the tick keeps its
       23px (15px + 4px each side), and without a tick the name may use the
       whole line. A percentage only bites once the label has been squeezed;
       with room to spare the full name shows, as before. */
    #header-main .header-right .box-user .name .user-name-text {
        display: inline-block !important;
        max-width: 100% !important;
    }

    #header-main .header-right .box-user .name:has(.hv-badge) .user-name-text {
        max-width: calc(100% - 23px) !important;
    }

    #header-main .header-right .box-user .name .hv-badge {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
}

/* The nationality flag after the tick (inc/nationality.php). From 1100px the
   name gives way for it too: 21px (16px + 1px / 4px either side) on top of the
   tick's 23px. Below 1100px it is left out, like the ID, so the name keeps the
   little room there is; the tick's panel still names the nationality.
   Measured 2026-10-05 at 992-1920px, agent and owner with long names: the row
   stays 30px inside the screen and the flag 10px clear of the caret. */
@media (min-width: 1100px) and (max-width: 1919px) {
    #header-main .header-right .box-user .name:has(.hv-badge):has(.hb-nat) .user-name-text {
        max-width: calc(100% - 44px) !important;
    }
}

@media (min-width: 992px) and (max-width: 1099px) {
    #header-main .header-right .box-user .name .hb-nat {
        display: none !important;
    }
}


/* ═══ SIGNED-IN ACCOUNT CHIP (2026-10-15) ═══════════════════════════════════
   The right-hand side of the main navbar as one floating "command dock": the
   text-size control, the wishlist, Compare and the account chip sit in a
   single glass bar with a gold hairline. The account chip (hb_nav_account()
   in inc/header.php, one builder for every role) has a slow light running
   round its border in the role colour, the photo in a turning metallic ring
   with a halo and an online pulse, the name, a metallic role badge, the User
   ID and the chevron the account menu hangs from.
   Role colours: buyer blue, agent gold, owner emerald, lender violet.
   Selectors go through #header-main .header-right to outrank the older
   width-band rules above (several use !important). Motion stops under
   prefers-reduced-motion. Phones (<=640px) keep the ringed photo only. */
@property --hbn-a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes hbnSpin { to { --hbn-a: 360deg; } }
@keyframes hbnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@keyframes hbnBeat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.18); }
    45%      { transform: scale(.96); }
    65%      { transform: scale(1.1); }
}

/* ── the dock ─────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    #header-main .header-right {
        position: relative;
        align-items: center;
        gap: 8px !important;
        padding: 5px 5px 5px 7px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(22, 36, 62, .82) 0%, rgba(8, 15, 28, .86) 100%);
        border: 1px solid rgba(235, 216, 176, .16);
        box-shadow: 0 16px 36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .45);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    /* a gold sheen along the top edge */
    #header-main .header-right::before {
        content: '';
        position: absolute;
        left: 16%;
        right: 16%;
        top: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(243, 210, 122, .9), transparent);
        pointer-events: none;
    }
    #header-main .header-right > .btn-add:empty { display: none !important; }

    /* text size, in the dock's own glass */
    #header-main .header-right .hb-fs-ctl {
        height: 40px;
        padding: 0 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .04) !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    /* Compare: an icon and the label, gold hairline that warms on hover */
    #header-main .header-right .chat-button-compare.compare-btn {
        height: 40px;
        gap: 7px;
        padding: 0 16px 0 13px !important;
        border-radius: 999px;
        font-size: 11.5px !important;
        letter-spacing: 1.2px;
        color: #f3dfae !important;
        background: linear-gradient(180deg, rgba(243, 210, 122, .1), rgba(243, 210, 122, .02)) !important;
        border: 1px solid rgba(243, 210, 122, .38) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    }
    #header-main .header-right .chat-button-compare.compare-btn:hover {
        color: #1a1204 !important;
        background: linear-gradient(180deg, #fbe7a6, #e2b65a) !important;
        border-color: #fbe7a6 !important;
        box-shadow: 0 6px 18px rgba(243, 195, 79, .35), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
    }
    #header-main .header-right .compare-btn .hbn-cmp-ico {
        font-size: 13px;
        color: #f3c34f;
    }
    #header-main .header-right .chat-button-compare.compare-btn:hover .hbn-cmp-ico { color: #1a1204; }
    /* the old diagonal shimmer greys the button inside the dock */
    #header-main .header-right .chat-button-compare.compare-btn::before { display: none !important; }
}

/* ── the wishlist heart ───────────────────────────────────────────────── */
#header-main .header-right .fav-icon-wrapper {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 122, 154, .2), rgba(255, 255, 255, .03) 65%);
    border: 1px solid rgba(255, 140, 166, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
#header-main .header-right .fav-icon-wrapper:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 140, 166, .85);
    box-shadow: 0 0 18px rgba(255, 92, 122, .4), inset 0 1px 0 rgba(255, 255, 255, .12);
}
#header-main .header-right .fav-icon-wrapper i {
    font-size: 17px !important;
    background: linear-gradient(135deg, #ffc2d0, #ff4d6d) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
#header-main .header-right .fav-icon-wrapper:hover i { animation: hbnBeat 1s ease-in-out; }
#header-main .header-right .fav-icon-wrapper .fav-count {
    top: -6px !important;
    right: -6px !important;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font: 800 10.5px/1 'Outfit', sans-serif !important;
    color: #fff !important;
    background: linear-gradient(180deg, #ff6b88, #e0103f) !important;
    border: 2px solid #0b1424;
    box-shadow: 0 3px 10px rgba(224, 16, 63, .55);
}

/* ── the account chip ─────────────────────────────────────────────────── */
#header-main .header-right .box-user .hbn {
    --hbn: #f3c34f; --hbn2: #fff1c4; --hbn-rgb: 243, 195, 79;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 4px 6px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    background:
        radial-gradient(120% 160% at 0% 50%, rgba(var(--hbn-rgb), .24) 0%, transparent 55%),
        linear-gradient(135deg, #16253f 0%, #0b1426 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
#header-main .header-right .box-user .hbn--buyer  { --hbn: #4da3ff; --hbn2: #cfe6ff; --hbn-rgb: 77, 163, 255; }
#header-main .header-right .box-user .hbn--agent  { --hbn: #f3c34f; --hbn2: #fff1c4; --hbn-rgb: 243, 195, 79; }
#header-main .header-right .box-user .hbn--owner  { --hbn: #2fd79a; --hbn2: #c4f7e2; --hbn-rgb: 47, 215, 154; }
#header-main .header-right .box-user .hbn--lender { --hbn: #9d7bff; --hbn2: #e2d8ff; --hbn-rgb: 157, 123, 255; }

/* the light that runs round the border */
#header-main .header-right .box-user .hbn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--hbn-a),
        rgba(var(--hbn-rgb), .22) 0deg, var(--hbn2) 50deg, var(--hbn) 80deg, rgba(var(--hbn-rgb), .22) 140deg,
        rgba(var(--hbn-rgb), .22) 200deg, rgba(var(--hbn-rgb), .55) 260deg, rgba(var(--hbn-rgb), .22) 320deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: hbnSpin 6s linear infinite;
    pointer-events: none;
}
#header-main .header-right .box-user:hover .hbn,
#header-main .header-right .box-user:focus-within .hbn {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--hbn-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}
#header-main .header-right .box-user:hover .hbn::before { animation-duration: 2.2s; }

/* the photo: a turning metallic ring, a halo, an online pulse */
#header-main .header-right .box-user .hbn .hbn-av {
    position: relative;
    margin: 0 !important;
    flex: 0 0 auto;
}
#header-main .header-right .box-user .hbn .hbn-av .user {
    width: 46px !important;
    height: 46px !important;
    padding: 2.5px;
    border-radius: 50% !important;
    background: conic-gradient(from var(--hbn-a), var(--hbn), var(--hbn2), #ffffff, var(--hbn2), var(--hbn), rgba(var(--hbn-rgb), .4), var(--hbn));
    box-shadow: 0 0 0 3px rgba(var(--hbn-rgb), .12), 0 0 18px rgba(var(--hbn-rgb), .55);
    animation: hbnSpin 5s linear infinite;
    overflow: hidden !important;
}
#header-main .header-right .box-user .hbn .hbn-av .user picture,
#header-main .header-right .box-user .hbn .hbn-av .user img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid #0b1426;
    box-sizing: border-box;
    background: #0b1426;
}
#header-main .header-right .box-user .hbn .hbn-online {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #a7f3d0, #10b981);
    border: 2px solid #0b1426;
    animation: hbnPulse 2.2s ease-out infinite;
}

/* name and tick; metallic role badge and ID */
#header-main .header-right .box-user .hbn .name.hbn-meta {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    gap: 5px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-align: left;
    position: static;
    overflow: visible !important;
}
#header-main .header-right .box-user .hbn .hbn-line1 {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 700 14.5px/1.1 'Outfit', sans-serif;
    letter-spacing: .1px;
}
#header-main .header-right .box-user .hbn .hbn-meta .user-name-text {
    max-width: 130px !important;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 55%, var(--hbn2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#header-main .header-right .box-user .hbn .hbn-line2 {
    display: flex;
    align-items: center;
    gap: 7px;
}
#header-main .header-right .box-user .hbn .role-label.hbn-role {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    font: 800 9.5px/1 'Outfit', sans-serif !important;
    letter-spacing: .8px !important;
    text-transform: uppercase;
    color: #0b1220 !important;
    text-shadow: none !important;
    background: linear-gradient(180deg, var(--hbn2) 0%, var(--hbn) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 2px 8px rgba(var(--hbn-rgb), .4);
}
#header-main .header-right .box-user .hbn .hbn-role i {
    font-size: 8.5px !important;
    color: #0b1220 !important;
    opacity: .85;
}
#header-main .header-right .box-user .hbn .hbn-meta .user-sku-id {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font: 600 10.5px/1 ui-monospace, Consolas, monospace !important;
    letter-spacing: .3px;
    color: rgba(226, 232, 240, .55) !important;
    opacity: 1 !important;
}
#header-main .header-right .box-user .hbn .hbn-meta .user-sku-id::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--hbn-rgb), .8);
}

/* the chevron the account menu hangs from */
#header-main .header-right .box-user .hbn .hbn-chev {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(var(--hbn-rgb), .26), rgba(var(--hbn-rgb), .07));
    border: 1px solid rgba(var(--hbn-rgb), .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
#header-main .header-right .box-user .hbn .hbn-chev i {
    font-size: 11px !important;
    color: var(--hbn2) !important;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
#header-main .header-right .box-user:hover .hbn .hbn-chev i { transform: rotate(180deg); }

/* ── width bands ──────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1099px) {
    #header-main .header-right .box-user .hbn .hbn-meta .user-sku-id { display: none !important; }
}
@media (min-width: 992px) {
    #header-main .header-right .box-user .hbn .hbn-meta .user-sku-id.is-long { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #header-main .header-right .box-user .hbn .hbn-meta .user-name-text { max-width: 84px !important; }
    #header-main .header-right .chat-button-compare.compare-btn { padding: 0 11px !important; }
}
/* up to 1439px the navbar is tight: the chip drops the ID (it is on the
   dashboard welcome card) and the name is a little shorter */
@media (min-width: 992px) and (max-width: 1439px) {
    #header-main .header-right .box-user .hbn { gap: 8px; padding-right: 5px; }
    #header-main .header-right .box-user .hbn .hbn-meta .user-sku-id { display: none !important; }
    #header-main .header-right .box-user .hbn .hbn-meta .user-name-text { max-width: 100px !important; }
    #header-main .header-right .box-user .hbn .role-label.hbn-role { letter-spacing: .5px !important; }
    /* Compare becomes a round icon button (its name stays as the tooltip) */
    #header-main .header-right .chat-button-compare.compare-btn {
        width: 40px;
        padding: 0 !important;
        font-size: 0 !important;
        letter-spacing: 0;
        gap: 0;
    }
    #header-main .header-right .compare-btn .hbn-cmp-ico { font-size: 15px; }
}
/* phones: just the ringed photo and the chevron, as before */
@media (max-width: 640px) {
    #header-main .header-right .box-user .hbn { gap: 4px; height: 46px; padding: 3px 4px 3px 3px; }
    #header-main .header-right .box-user .hbn .hbn-av .user { width: 38px !important; height: 38px !important; }
    #header-main .header-right .box-user .hbn .name.hbn-meta { display: none !important; }
    #header-main .header-right .box-user .hbn .hbn-chev { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    #header-main .header-right .box-user .hbn::before,
    #header-main .header-right .box-user .hbn .hbn-av .user,
    #header-main .header-right .box-user .hbn .hbn-online,
    #header-main .header-right .fav-icon-wrapper:hover i { animation: none !important; }
}

/* an empty wishlist shows the heart alone, not a red "0" */
#header-main .header-right .fav-icon-wrapper .fav-count[data-count="0"] { display: none !important; }


/* ═══ ACCOUNT MENU — A COLOUR PER TAB (2026-10-15) ═══════════════════════════
   Every tab in the account menu has its own solid colour, set as --mi by the
   small script at the end of inc/header.php (16 distinct hues in menu order;
   Logout is always red, the ID-verification row always amber). The icon sits
   on a solid tile of that colour, the label is white, and the chevron, the
   hover tint and a slim accent bar on the left take the same colour.
   Falls back to the old gold where --mi is not set. */
#header-main .menu-user .dropdown-item {
    color: #f1f4f9 !important;
    gap: 12px;
    padding-left: 10px !important;
}
#header-main .menu-user .dropdown-item > svg:first-child,
#header-main .menu-user .dropdown-item > i:first-child {
    box-sizing: content-box !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 11px !important;
    background: var(--mi, #b8925a) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mi, #b8925a) 45%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .18) !important;
    color: #fff !important;
    fill: #fff !important;
    font-size: 16px !important;
    line-height: 18px !important;
    text-align: center;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease !important;
}
#header-main .menu-user .dropdown-item > i:first-child {
    display: inline-block !important;
}
/* SVG icons: every stroke and fill white on the coloured tile */
#header-main .menu-user .dropdown-item > svg:first-child [stroke]:not([stroke="none"]) { stroke: #fff !important; }
#header-main .menu-user .dropdown-item > svg:first-child [fill]:not([fill="none"]),
#header-main .menu-user .dropdown-item > svg:first-child path:not([stroke]) { fill: #fff !important; }
#header-main .menu-user .dropdown-item:hover > svg:first-child,
#header-main .menu-user .dropdown-item:hover > i:first-child {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mi, #b8925a) 60%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .18) !important;
}
#header-main .menu-user .dropdown-item:hover > svg:first-child [stroke]:not([stroke="none"]) { stroke: #fff !important; }
#header-main .menu-user .dropdown-item:hover > svg:first-child [fill]:not([fill="none"]),
#header-main .menu-user .dropdown-item:hover > svg:first-child path:not([stroke]) { fill: #fff !important; }
#header-main .menu-user .dropdown-item:hover > i:first-child { color: #fff !important; }

/* hover: a wash of the tab colour and an accent bar on the left */
#header-main .menu-user .dropdown-item:hover,
#header-main .menu-user .menu-group .dropdown-item:hover {
    color: #ffffff !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mi, #b8925a) 22%, transparent), color-mix(in srgb, var(--mi, #b8925a) 4%, transparent)) !important;
    box-shadow: inset 3px 0 0 var(--mi, #b8925a) !important;
}
/* the chevron in the tab colour */
#header-main .menu-user .dropdown-item::after {
    color: var(--mi, #b8925a) !important;
    opacity: .9;
}

/* The account menu always fits on screen and scrolls inside itself (2026-10-15).
   It used to be capped at 90vh from just under the navbar, so on a laptop its
   lower tabs (and its scrollbar) sat below the bottom of the screen and could
   not be reached. --hbm-top is where the menu actually starts, measured by the
   script at the end of inc/header.php; 120px is the fallback. Scrolling to its
   end no longer scrolls the page behind it. */
#header-main .menu-user {
    max-height: calc(100vh - var(--hbm-top, 120px) - 14px) !important;
    max-height: calc(100dvh - var(--hbm-top, 120px) - 14px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* The tab for the page being viewed (2026-10-16): a slim gold outline and a
   faint gold glow, kept on hover. .is-current is set by the account-menu script
   at the end of inc/header.php. Inside a grouped panel the row gets its rounded
   corners back so the outline reads as one box. */
#header-main .menu-user .dropdown-item.is-current,
#header-main .menu-user .menu-group .dropdown-item.is-current,
#header-main .menu-user .menu-group .dropdown-item.is-current:hover {
    border: 1px solid rgba(235, 196, 110, .75) !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, rgba(235, 196, 110, .10), rgba(235, 196, 110, .03)) !important;
    box-shadow: 0 0 0 1px rgba(235, 196, 110, .12), 0 0 16px rgba(235, 196, 110, .16),
                inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
#header-main .menu-user .dropdown-item.is-current::after {
    color: #ebd8b0 !important;
    opacity: 1;
}