/**
 * Tamagn Bet — global sticky header (shared main pages).
 * Fixed slim bar height; logo displayed at 150px width (object-fit: contain), overflow visible so
 * the graphic may extend past the bar without changing layout height.
 */

:root {
    --tb-header-bar-max: 80px;
    --tb-header-pad-y: 10px;
    --tb-header-logo-w: 150px;
    /* Layout lane inside the padded bar (nav/buttons align to this) */
    --tb-header-content-h: calc(var(--tb-header-bar-max) - (var(--tb-header-pad-y) * 2));
    /* Floating mobile dropdown begins below sticky bar */
    --tb-mobile-menu-offset: calc(var(--tb-header-bar-max) + env(safe-area-inset-top, 0px) + 10px);
}

/* Reserve layout height — fixed header is out of normal flow */
#tb-global-header-root:has(.tb-site-header) {
    min-height: var(--tb-header-bar-max);
    flex-shrink: 0;
}

.tb-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100vw;
    border-bottom: 1px solid #eef0f4;
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.06);
    transition: box-shadow 0.25s ease;
    overflow: visible;
}

/* Fixed-size slot: does not grow with the image; overflow paints outside */
.tb-site-header .tb-header-logo-wrap {
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    z-index: 2;
    overflow: visible;
    width: var(--tb-header-logo-w);
    min-width: var(--tb-header-logo-w);
    max-width: var(--tb-header-logo-w);
    height: var(--tb-header-content-h);
    max-height: var(--tb-header-content-h);
    display: flex;
    align-items: center;
    align-self: center;
}

.tb-site-header a.logo-container.tb-header-logo-link {
    box-sizing: border-box;
    width: var(--tb-header-logo-w) !important;
    max-width: var(--tb-header-logo-w) !important;
    height: 100% !important;
    max-height: var(--tb-header-content-h) !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

/* Exactly 150px wide; vertically centered in slot; may overflow top/bottom of bar */
.tb-site-header .tb-header-logo-img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    width: var(--tb-header-logo-w) !important;
    max-width: var(--tb-header-logo-w) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.06));
    z-index: 2;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto;
}

/* Single slim row: fixed height; no vertical growth from logo */
.tb-site-header__inner {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    min-height: 0;
    max-height: var(--tb-header-bar-max);
    height: var(--tb-header-bar-max);
    padding-top: var(--tb-header-pad-y) !important;
    padding-bottom: var(--tb-header-pad-y) !important;
    /* Full-bleed bar: edge padding only (no centered max-width container) */
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    overflow: visible;
}

@media (min-width: 768px) {
    .tb-site-header__inner {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 1024px) {
    .tb-site-header__inner {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

/* Theme toggle: always visible in header (buy, banks, agent portal, etc.) */
.tb-site-header__theme-toggle,
.tb-site-header [data-dashboard-theme-toggle] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    position: relative;
    z-index: 2;
}

html.dark .tb-site-header [data-dashboard-theme-toggle] {
    color: #e2e8f0 !important;
}

/* Mobile (<md): logo + theme + hamburger in the bar; bell/lang/auth live in drawer */
@media (max-width: 767.98px) {
    .tb-site-header__desktop-utils,
    .tb-site-header #user-profile,
    .tb-site-header .tb-site-header__auth-cluster {
        display: none !important;
    }

    .tb-site-header__theme-toggle,
    .tb-site-header [data-dashboard-theme-toggle] {
        z-index: 9999;
    }

    .tb-site-header #auth-btns {
        display: none !important;
    }

    /* Sell header: hide guest Login/Signup row only; logged-in toolbar stays */
    .tb-site-header #auth-actions[data-tb-sell-auth-guest="1"] {
        display: none !important;
    }

    .tb-site-header .tb-header-logo-wrap {
        margin-left: 0;
        margin-right: 0;
    }

    .tb-site-header__actions {
        gap: 0.25rem;
    }
}

@media (min-width: 768px) {
    .tb-site-header__desktop-utils {
        display: flex !important;
    }

    .tb-site-header .tb-site-header__auth-cluster {
        display: flex !important;
    }

    /* Restore Tailwind-visible auth row when scripts remove .hidden */
    .tb-site-header #auth-btns:not(.hidden) {
        display: flex !important;
    }

    .tb-site-header #user-profile:not(.hidden) {
        display: flex !important;
    }
}

/* Right cluster: language, theme, auth — pinned to the far right with even spacing */
.tb-site-header__actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    gap: clamp(10px, 1.5vw, 14px);
    min-width: 0;
}

.tb-nav-pill.tb-nav-pill--active {
    color: #006aff;
    background-color: #e8f2ff;
    font-weight: 600;
}

/* ─── Language globe toggle ─── */
.tb-lang-toggle {
    position: relative;
    cursor: pointer;
}
.tb-lang-toggle:active {
    transform: scale(0.92);
}

/* ─── FCM notification bell (permission chrome) ─── */
.tb-fcm-nav-bell {
    position: relative;
    cursor: pointer;
}
.tb-fcm-nav-bell:active:not(:disabled) {
    transform: scale(0.92);
}
.tb-fcm-nav-bell:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}
.tb-fcm-nav-bell.tb-fcm-bell--granted:not(:disabled) {
    color: #006aff;
}
.tb-fcm-nav-bell.tb-fcm-bell--denied:not(:disabled) {
    color: #dc2626;
}
.tb-fcm-nav-bell.tb-fcm-bell--unsupported {
    color: #94a3b8;
}

/* ─── Profile avatar trigger ─── */
.tb-avatar-trigger {
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px rgba(0, 106, 255, 0.15);
    cursor: pointer;
}
.tb-avatar-trigger:hover,
.tb-avatar-trigger:focus-visible {
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px rgba(0, 106, 255, 0.35);
}
.tb-avatar-trigger:focus-visible {
    outline: none;
}

/* ─── Profile dropdown panel ─── */
.tb-profile-dropdown {
    transform-origin: top right;
}
.tb-profile-dropdown:not(.hidden) {
    animation: tb-dropdown-enter 0.18s ease-out forwards;
}
@keyframes tb-dropdown-enter {
    from { opacity: 0; transform: scale(0.92) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Ensure the dropdown parent never clips the absolutely-positioned panel */
.tb-profile-menu { overflow: visible; }

/* ─── Sell nav CTA (header actions + desktop nav) ─── */
.tb-site-header .nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: #006aff;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 106, 255, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    white-space: nowrap;
}

.tb-site-header .nav-cta-btn svg {
    stroke: #ffffff;
}

.tb-site-header .nav-cta-btn:hover {
    transform: translateY(-2px);
    background: #0053b3;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 106, 255, 0.4);
}

.tb-site-header .nav-cta-btn--active {
    background: #0053b3;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px #e8f2ff, 0 4px 15px rgba(0, 106, 255, 0.35);
}

.tb-header-sell-cta-wrap {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tb-site-header .nav-cta-btn,
    .tb-site-header .nav-cta-btn:hover {
        transition: none;
        transform: none;
    }
}

@media (min-width: 769px) and (max-width: 1023.98px) {
    .tb-site-header .nav-cta-btn {
        padding: 7px 14px;
        font-size: 0.8125rem;
        gap: 6px;
    }

    .tb-site-header .nav-cta-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ==========================================================================
   FORCE CTA BUTTON VISIBILITY ON MOBILE HEADERS (STRICTLY SCOPED)
   ========================================================================== */
@media (max-width: 768px) {
    .tb-site-header #navSellProp,
    .tb-site-header .nav-cta-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 4px !important;
        margin-right: 8px;
    }

    .tb-site-header #navSellProp span {
        font-size: 11px;
    }

    .tb-header-sell-cta-wrap {
        display: flex !important;
        flex-shrink: 0;
        min-width: 0;
    }

    .tb-site-header__actions {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .tb-site-header .nav-cta-btn svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }
}
/* ==========================================================================
   END OF MOBILE CTA VISIBILITY — DO NOT DISTURB LISTING CARDS
   ========================================================================== */

/* Desktop nav: smooth underline on hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .tb-site-header__nav a.tb-nav-pill {
        position: relative;
    }
    .tb-site-header__nav a.tb-nav-pill:not(.tb-nav-pill--active)::after {
        content: "";
        position: absolute;
        left: 0.625rem;
        right: 0.625rem;
        bottom: 0.35rem;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, #006aff, transparent);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition: transform 0.35s ease-out, opacity 0.35s ease-out;
        pointer-events: none;
    }
    .tb-site-header__nav a.tb-nav-pill:not(.tb-nav-pill--active):hover::after {
        transform: scaleX(1);
        opacity: 1;
    }
}