.tk-score-tooltip-trigger { position: relative; z-index: 1; }

.tk-score-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 32px));
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    padding: 0.85rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 9999;
}

.tk-score-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #1c1c1c;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-score-tooltip-trigger:hover .tk-score-tooltip,
.tk-score-tooltip-trigger:focus-within .tk-score-tooltip,
.tk-score-tooltip-trigger.active .tk-score-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.tk-score-tooltip-title { margin-bottom: 0.7rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: #f8fafc; font-weight: 700; font-family: 'Inter', 'Segoe UI', sans-serif; }
.tk-score-tooltip ul { margin: 0; padding: 0; list-style: none; }
.tk-score-tooltip li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.9rem; color: rgba(226, 232, 240, 0.72); font-family: 'Inter', 'Segoe UI', sans-serif; }
.tk-score-tooltip li:last-child { border-bottom: none; padding-bottom: 0; }
.tk-score-tooltip li span { display: inline-flex; align-items: center; gap: 0.5rem; color: #e2e8f0; }
.tk-score-tooltip li span i { font-size: 1rem; color: #ffb31a; }
.tk-score-tooltip li strong { color: #f8fafc; font-weight: 700; }

/* Scoped helpers for seller badge and score */
.seller-score-info { display: flex; align-items: center; gap: 0.5rem; }
.seller-score-info i { font-size: 1rem; color: #6b7280; cursor: help; }

/* Ensure sub-menu positioning doesn't get overridden */
.tb-header .sub-menu { z-index: 1500; }

/* Ensure expert content displays properly */
.tb-switch-profile .tb-expert-content {
    overflow: visible !important;
    position: relative;
}

/* Make the role switch card readable against the dark navigation theme. */
.tb-userlogin .sub-menu .tb-switch-profile {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-content {
    padding: 20px 22px !important;
    border: 1px solid rgba(255, 179, 26, 0.16) !important;
    border-radius: 14px !important;
    background: #1c1c1c !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-content h2 {
    margin: 0 !important;
    color: #f8fafc !important;
    font: 700 1rem/1.4 "Urbanist", sans-serif !important;
    letter-spacing: 0.01em;
}

.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-content p {
    margin: 8px 0 14px !important;
    color: rgba(226, 232, 240, 0.72) !important;
    font: 400 0.875rem/1.5 "Open Sans", sans-serif !important;
}

.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-anchor {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 179, 26, 0.28) !important;
    border-radius: 9px !important;
    color: #ffb31a !important;
    font: 700 0.875rem/1.2 "Urbanist", sans-serif !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-anchor:hover,
.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-anchor:focus-visible {
    background: rgba(255, 179, 26, 0.12) !important;
    border-color: rgba(255, 179, 26, 0.65) !important;
    color: #ffd166 !important;
    transform: translateY(-1px);
}

.tb-userlogin .sub-menu .tb-switch-profile .tb-expert-anchor i {
    color: currentColor !important;
    font-size: 16px !important;
}

/* Badge progress card styling for dropdown menu */
.tk-next-badge-card {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    position: relative;
    z-index: 1;
}

.tk-next-badge-card .tk-score-tooltip-trigger {
    position: relative;
    display: block;
    z-index: 1;
}

.tk-next-badge-card .tk-score-tooltip-trigger > div:first-child {
    display: block;
    width: 100%;
    height: 8px;
    background: #E8E8E8;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.tk-next-badge-card .tk-score-tooltip-trigger > div:first-child > div {
    display: block;
    height: 8px;
    background: linear-gradient(90deg, #4f91ff 0%, #2ac7ff 100%);
    transition: width 0.3s ease;
}

.tk-next-badge-card .tk-score-tooltip {
    left: unset;
    right: 0;
    transform: none;
    bottom: calc(100% + 8px);
}

.tk-next-badge-card .small {
    display: block;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #6B7280;
}

/* Mobile view tooltip positioning fix */
@media (max-width: 768px) {
    .tk-score-tooltip {
        left: auto;
        right: 0;
        transform: none;
        bottom: calc(100% + 8px);
    }

    .tk-score-tooltip::before {
        left: auto;
        right: 16px;
        transform: translateX(0) rotate(45deg);
    }

    .tk-score-tooltip-trigger:hover .tk-score-tooltip,
    .tk-score-tooltip-trigger:focus-within .tk-score-tooltip,
    .tk-score-tooltip-trigger.active .tk-score-tooltip {
        transform: none;
    }
}

/* Center user profile dropdown on small screens without affecting desktop */
/* @media (max-width: 768px) {
    .tb-userlogin .sub-menu {
        left: 1% !important;
        right: auto !important;
        transform: translateX(-65%) !important;
        margin-left: 0 !important;
    }
} */

/* ---- Account dropdown (Upwork-style account menu) ---------------------------------------------------------------
   Boxed profile header (photo, name, role, Verified) -> optional badge chip -> one segmented Professional | Customer
   switch -> badge progress -> link rows with icon tiles -> Log out (red on hover). Everything sits on one 8px gutter.
   Selectors carry an extra "ul" and li padding uses !important because main.css forces `.sub-menu li { padding: 0 !important }`. */
.tb-userlogin ul.sub-menu { padding: 0 0 8px; overflow: visible; }

/* Profile box */
.tb-userlogin ul.sub-menu li.tk-menu-user {
    display: flex; align-items: center; gap: 12px; width: auto; margin: 8px 8px 6px; padding: 12px !important; list-style: none;
    border: 1px solid rgba(255, 179, 26, 0.2); border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 179, 26, 0.12) 0%, rgba(255, 179, 26, 0.03) 100%) !important;
}
.tb-userlogin ul.sub-menu .tk-menu-user__avatar { flex: 0 0 52px; width: 52px; min-width: 52px; max-width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #ffb31a; box-shadow: 0 0 0 3px rgba(255, 179, 26, 0.15); }
.tb-userlogin ul.sub-menu .tk-menu-user__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.25; }
.tb-userlogin ul.sub-menu .tk-menu-user__text strong { color: #fff; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-userlogin ul.sub-menu .tk-menu-user__text small { margin-top: 3px; color: #ffcf66; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.tb-userlogin ul.sub-menu .tk-menu-user__verified { flex: 0 0 auto; align-self: flex-start; padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(115, 224, 138, 0.14); line-height: 1.2; font-size: 11.5px; gap: 5px; }

/* Badge chip (only when the professional has a badge) */
.tb-userlogin ul.sub-menu .tk-menu-identity {
    display: block; margin: 0 8px 8px; padding: 0; line-height: 1.2; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.03);
}
.tb-userlogin ul.sub-menu .tk-menu-identity .tk-menu-identity__badge,
.tb-userlogin ul.sub-menu .tk-menu-identity .tk-badge-pill.moved-to-submenu {
    position: static !important; inset: auto !important; transform: none !important; z-index: auto !important;
    display: flex !important; align-items: center; justify-content: flex-start !important; width: 100% !important; height: auto !important;
    padding: 8px 12px !important; gap: 12px; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: inherit !important;
    text-align: left; font-size: inherit; line-height: 1.2;
}
.tb-userlogin ul.sub-menu .tk-menu-identity .tk-menu-identity__badge:hover { background: rgba(255, 255, 255, 0.05) !important; }
.tb-userlogin ul.sub-menu .tk-menu-identity__icon { flex: 0 0 38px; width: 38px; height: 38px; max-width: none; object-fit: contain; border-radius: 0; }
.tb-userlogin ul.sub-menu .tk-menu-identity__text strong { font-size: 14.5px; }
.tb-userlogin ul.sub-menu .tk-menu-identity__text small { margin-top: 2px; }

/* Segmented profile switch */
.tb-userlogin ul.sub-menu li.tb-switch-profile { padding: 0 !important; }
.tb-userlogin ul.sub-menu li.tb-switch-profile .tb-expert-content {
    display: block !important; flex: 1 1 100%; width: 100%; padding: 4px 8px 12px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
.tb-userlogin ul.sub-menu .tk-profile-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); }
.tb-userlogin ul.sub-menu .tk-profile-seg form { display: contents; margin: 0; }
.tb-userlogin ul.sub-menu .tk-profile-seg .tk-profile-seg__item,
.tb-userlogin ul.sub-menu li.tb-switch-profile .tk-profile-seg a.tk-profile-seg__item {
    display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 38px; margin: 0 !important; padding: 8px 10px !important;
    border: 0 !important; border-radius: 9px !important; box-shadow: none !important; background: transparent !important; color: #aeb8c6 !important;
    font: 700 13.5px/1.2 "Urbanist", sans-serif !important; text-decoration: none !important; box-sizing: border-box; transform: none !important; transition: background-color .15s ease, color .15s ease;
}
.tb-userlogin ul.sub-menu .tk-profile-seg .tk-profile-seg__item.is-active { background: #ffb31a !important; color: #1a1a1a !important; }
.tb-userlogin ul.sub-menu li.tb-switch-profile .tk-profile-seg a.tk-profile-seg__item:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; }

/* Badge progress: label left, percentage right, slim dark track */
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) { padding: 6px 16px 14px !important; line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 6px; }
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) .small { line-height: 1.3; }
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) > div > .small.text-muted:first-child { margin-bottom: 8px; color: #cfd6e0 !important; font-size: 13px; font-weight: 700; }
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) .tk-score-tooltip-trigger { position: relative; margin-top: 0 !important; }
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) .tk-score-tooltip-trigger > div:first-child { height: 6px !important; background: #2b2b2b !important; border-radius: 999px; }
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) .tk-score-tooltip-trigger > div:first-child > div { height: 6px !important; background: linear-gradient(90deg, #ffb31a, #ffd166) !important; }
.tb-userlogin ul.sub-menu li.tb-account-settings:not(:has(a)) .small.text-muted.mt-1 { position: absolute; right: 0; top: -28px; margin: 0 !important; color: #ffb31a !important; font-size: 12.5px; font-weight: 700; }

/* Link rows: rounded hover pill, icon in a small tile that turns solid gold on hover. */
.tb-userlogin ul.sub-menu li.tb-account-settings > a,
.tb-userlogin ul.sub-menu li.tb-logout a {
    display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); min-height: 46px; margin: 2px 8px; padding: 7px 8px; line-height: 1.3; color: #e6e9ee !important; text-decoration: none !important;
    font-size: 14.5px; font-weight: 600; border-radius: 12px; transition: background-color .15s ease, color .15s ease;
}
.tb-userlogin ul.sub-menu li.tb-account-settings > a i,
.tb-userlogin ul.sub-menu li.tb-logout a i {
    flex: 0 0 24px; width: 24px; height: 24px; padding: 0; margin: 0; display: grid; place-items: center;
    background: transparent !important; font-size: 20px; line-height: 1; color: #ffb31a !important; transition: color .15s ease;
}
.tb-userlogin ul.sub-menu li.tb-account-settings > a:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.tb-userlogin ul.sub-menu li.tb-account-settings > a:hover i { background: transparent !important; color: #fff !important; }

/* Log out: calm by default, red on hover */
.tb-userlogin ul.sub-menu li.tb-logout { margin-top: 6px; padding-top: 6px !important; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tb-userlogin ul.sub-menu li.tb-logout a i { background: transparent !important; color: #f87171 !important; }
.tb-userlogin ul.sub-menu li.tb-logout > form,
.tb-userlogin ul.sub-menu li.tb-logout > form:hover { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.tb-userlogin ul.sub-menu li.tb-logout a:hover,
.tb-userlogin ul.sub-menu li.tb-logout:hover > form > a {
    background: rgba(248, 113, 113, 0.12) !important; color: #ff9b9b !important; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.32) !important;
}
.tb-userlogin ul.sub-menu li.tb-logout a:hover i { background: transparent !important; color: #ff6b6b !important; }
.tb-userlogin ul.sub-menu li.tb-logout:hover,
.tb-userlogin ul.sub-menu li.tb-logout:focus-within { background: transparent !important; }

/* No tint on the list items themselves when hovered: only the rounded link rows and buttons react. */
.tb-userlogin ul.sub-menu li:hover,
.tb-userlogin ul.sub-menu li:focus-within,
.tb-userlogin ul.sub-menu li.tb-switch-profile:hover,
.tb-userlogin ul.sub-menu li.tb-switch-profile:focus-within,
.tb-userlogin ul.sub-menu li.tb-switch-profile:hover .tb-expert-content { background: transparent !important; box-shadow: none !important; }
.tb-userlogin ul.sub-menu li.tk-menu-user:hover { background: linear-gradient(135deg, rgba(255, 179, 26, 0.12) 0%, rgba(255, 179, 26, 0.03) 100%) !important; }

/* ---- Final polish ------------------------------------------------------------------------------------------------ */
/* Log out: same calm look as the other rows, red only on hover. */
.tb-userlogin ul.sub-menu li.tb-logout a i { color: #ffb31a !important; }
.tb-userlogin ul.sub-menu li.tb-logout a:hover i,
.tb-userlogin ul.sub-menu li.tb-logout:hover > form > a i { color: #ff6b6b !important; }

/* Badge: a small round icon on the corner of the profile photo (click to download), no text. */
.tb-userlogin ul.sub-menu .tk-menu-user__photo { position: relative; flex: 0 0 52px; width: 52px; height: 52px; }
.tb-userlogin ul.sub-menu .tk-menu-user__photo .tk-menu-identity__badge,
.tb-userlogin ul.sub-menu .tk-menu-user__photo .tk-badge-pill.moved-to-submenu {
    position: absolute !important; right: -9px !important; bottom: -9px !important; left: auto !important; top: auto !important; transform: none !important;
    display: grid !important; place-items: center; width: 30px !important; height: 30px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 2px solid #1c1c1c !important; border-radius: 50% !important; background: #1c1c1c !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important; cursor: pointer;
}
.tb-userlogin ul.sub-menu .tk-menu-user__photo .tk-menu-identity__icon { width: 24px !important; height: 24px !important; flex: none; max-width: none; object-fit: contain; filter: none; transition: transform .15s ease; }
.tb-userlogin ul.sub-menu .tk-menu-user__photo .tk-menu-identity__badge:hover .tk-menu-identity__icon { transform: scale(1.18); }

/* ---- Badge progress tooltip (next badge requirements) -------------------------------------------------------------
   Compact popover that opens BELOW the bar and spans the menu width, so it is never cut off by the top of the screen.
   Overrides the inline positioning, the 32px inherited line height and main.css' `.sub-menu li` padding/hover rules. */
.tb-userlogin ul.sub-menu .tk-score-tooltip {
    top: calc(100% + 12px) !important; bottom: auto !important; left: 0 !important; right: 0 !important; transform: none !important;
    width: auto !important; max-width: none !important; padding: 12px 14px !important; border-radius: 12px !important;
    background: #232323 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
    line-height: 1.4 !important; text-align: left; z-index: 20;
}
.tb-userlogin ul.sub-menu .tk-score-tooltip::before {
    bottom: auto !important; top: -7px; left: 28px !important; transform: rotate(45deg) !important; width: 12px; height: 12px;
    background: #232323 !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, 0.1) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.tb-userlogin ul.sub-menu .tk-score-tooltip-title { margin: 0 0 6px !important; color: #ffb31a !important; font-size: 11px !important; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3 !important; }
.tb-userlogin ul.sub-menu .tk-score-tooltip ul { margin: 0; padding: 0; }
.tb-userlogin ul.sub-menu .tk-score-tooltip li {
    display: block !important; width: auto !important; padding: 7px 0 !important; background: transparent !important; box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12.5px !important; line-height: 1.4 !important; color: #dbe1ea !important;
}
.tb-userlogin ul.sub-menu .tk-score-tooltip li:last-child { border-bottom: 0; padding-bottom: 0 !important; }
.tb-userlogin ul.sub-menu .tk-score-tooltip li:hover { background: transparent !important; }
.tb-userlogin ul.sub-menu .tk-score-tooltip li > span { display: flex !important; align-items: flex-start; gap: 9px !important; color: inherit !important; }
.tb-userlogin ul.sub-menu .tk-score-tooltip li > span span { flex: 1 1 auto; min-width: 0; color: inherit !important; }
.tb-userlogin ul.sub-menu .tk-score-tooltip li i { flex: 0 0 16px; width: 16px; margin-top: 1px; font-size: 14px !important; line-height: 1.4; text-align: center; }