/* ============================================================
   Header – "Talk to us" phone pill + Login / SignUp button
   ============================================================ */

/* --- Talk to us phone pill --- */
.talk-to-us {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #f1f1f1;
    border-radius: 50px;
    padding: 4px 16px 4px 4px !important;
    text-decoration: none;
    transition: background 0.25s ease;
}

.talk-to-us:hover {
    background: #e7e7e7;
}

.talk-to-us__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.talk-to-us__icon svg {
    width: 14px;
    height: 14px;
    position: static !important;
    transform: none !important;
    float: none !important;
    max-width: none !important;
    max-height: none !important;
}

.talk-to-us__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.talk-to-us__label {
    font-size: 11px;
    font-weight: 500;
    color: #8a8a8a;
}

.talk-to-us__number {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* keep the pill text colour stable when nav-link hover rules apply */
.talk-to-us:hover .talk-to-us__number {
    color: #111;
}

/* --- Login / SignUp button --- */
.btn-login-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffb307;
    color: #000000 !important;
    border-radius: 50px;
    padding: 8px 20px !important;
    font-size: 14px;
    font-weight: 600;
    margin-left: 12px;
    white-space: nowrap;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.btn-login-signup:hover {
    background: #e89e00;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(255, 179, 7, 0.35);
}

/* --- Logged-in account button: clean, equal-size circle (icon only) --- */
#navbar_main .account-dropdown .nav-item.dropdown > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    margin-left: 12px;
    background: #f1f1f1;
    border-radius: 50% !important;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    transition: background 0.25s ease;
}

#navbar_main .account-dropdown .nav-item.dropdown > .dropdown-toggle:hover {
    background: #e7e7e7;
}

#navbar_main .account-dropdown .dropdown-toggle img.rounded-circle {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
}

/* drop the chevron + name so it reads as one tidy circle */
#navbar_main .account-dropdown .dropdown-toggle svg.bi-chevron-down {
    display: none;
}

/* --- Account dropdown menu: compact, right-aligned card (NOT the full-width megamenu) --- */
#navbar_main .account-dropdown .dropdown-menu.account-menu {
    min-width: 190px;
    margin-top: 10px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(7, 30, 87, 0.14);
    overflow: hidden;
    /* Right-align under the avatar. The theme keeps dropdowns display:block (fade on hover),
       and dropdown-menu-end only works with Popper — so anchor to the right edge manually
       to stop the menu spilling past the viewport (horizontal-scroll bug when logged in). */
    right: 0;
    left: auto;
}
#navbar_main .account-dropdown .dropdown-menu.account-menu .dropdown-item {
    font-size: 14px;
    color: #2e3d64;
    transition: background 0.2s ease, color 0.2s ease;
}
#navbar_main .account-dropdown .dropdown-menu.account-menu .dropdown-item:hover {
    background: #f4f8ff !important;
    color: #20a8ff;
}

/* --- Medium desktops (992–1200px): keep the bar from overflowing --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .talk-to-us {
        gap: 7px;
        padding: 4px 12px 4px 4px !important;
    }

    .talk-to-us__number {
        font-size: 13px;
    }

    .btn-login-signup {
        margin-left: 10px;
        padding: 8px 16px !important;
    }
}

/* --- Mobile / tablet off-canvas menu (<992px) --- */
@media (max-width: 991.98px) {
    /* let the right-side controls sit full width, stacked under the nav links */
    #navbar_main .account-dropdown {
        width: 100%;
        padding: 8px 20px 4px;
        margin-top: 8px;
        border-top: 1px solid #eee;
        flex-direction: column;
        align-items: stretch !important;
    }

    #navbar_main .account-dropdown .nav-item {
        width: 100%;
    }

    /* phone pill: full-width row, left aligned with the nav links */
    .talk-to-us {
        display: flex;
        justify-content: flex-start;
        margin: 10px 0;
        padding: 8px 16px 8px 8px !important;
    }

    .talk-to-us__label {
        display: block;
    }

    /* Login / SignUp: full-width pill button */
    .btn-login-signup {
        display: flex;
        width: 100%;
        margin: 8px 0 4px;
        padding: 12px 20px !important;
        font-size: 15px;
    }

    /* account circle stays a circle, just nudged into the column */
    #navbar_main .account-dropdown .nav-item.dropdown > .dropdown-toggle {
        margin: 10px 0;
    }
}