/* Language selector styled like the attached mockup */
.language-dropdown {
    position: relative;
    display: inline-block;
}

.language-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 32px;
    padding: 8px 12px;
    cursor: pointer;
    /* font-weight removed - using centralized typography system */
    color: #1f2d3d;
    box-shadow: 0 8px 20px rgba(18,28,45,0.06);
    border: 1px solid rgba(18,28,45,0.06);
    white-space: nowrap;
}

    .language-btn img {
        width: 28px;
        height: 20px;
        border-radius: 3px;
        object-fit: cover;
    }

.language-menu {
    display: none;
    position: absolute;
    top: 52px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(18,28,45,0.08);
    min-width: 220px;
    z-index: 2000;
    padding: 8px;
}

/* RTL/LTR positioning for language menu */
[dir="rtl"] .language-menu {
    right: 0;
}

[dir="ltr"] .language-menu {
    left: 0;
}

.language-menu.active {
    display: block;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    /* font-weight removed - using centralized typography system */
    color: #22303b;
    text-transform: uppercase;
    /* font-size removed - using centralized typography system */
    border-radius: 8px;
}

    .language-option img {
        width: 28px;
        height: 20px;
        border-radius: 3px;
    }

    .language-option:hover {
        background: #f6f8fb;
    }

    /* explicit check element on the right */
    .language-option .lang-check {
        display: none;
        color: #28a745;
        /* font-weight and font-size removed - using centralized typography system */
    }

[dir="rtl"] .language-option .lang-check {
    margin-right: auto;
}

[dir="ltr"] .language-option .lang-check {
    margin-left: auto;
}

.language-option.active .lang-check {
    display: inline-block;
}

/* Header RTL/LTR Support */
.Header {
    padding-left: 156px;
    padding-right: 156px;
    position: relative;
}

/* Mobile */
@@media (max-width: 768px) {
    .Header {
        padding-left: 20px;
        padding-right: 20px;
        flex-wrap: wrap;
    }
}

/* Small Mobile */
@@media (max-width: 480px) {
    .Header {
        padding-left: 16px;
        padding-right: 16px;
    }
}

[dir="rtl"] .Header {
    direction: rtl;
}

[dir="ltr"] .Header {
    direction: ltr;
}

/* Reverse flex direction for RTL tabs */
[dir="rtl"] .Tabs {
    flex-direction: row-reverse;
}

/* For English LTR, also reverse to maintain right-to-left navigation order */
[dir="ltr"] .Tabs {
    flex-direction: row-reverse;
}

/* Reverse button order for RTL */
[dir="rtl"] .Buttons {
    flex-direction: row-reverse;
}

/* Text alignment based on direction */
[dir="rtl"] .header-text {
    text-align: right;
}

[dir="ltr"] .header-text {
    text-align: left;
}

/* Language button spacing */
.lang-arrow {
    margin-left: 5px;
    flex-shrink: 0;
}

[dir="rtl"] .lang-arrow {
    margin-left: 0;
    margin-right: 5px;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    background: var(--Primary-500, #6A5D8B);
    border: none;
    color: white;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
}

/* Side Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

/* Side Menu Panel */
.mobile-side-menu {
    position: fixed;
    top: 0;
    width: 320px;
    max-width: 85%;
    height: 100%;
    background: white;
    z-index: 9999;
    box-shadow: -2px 0 12px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 24px;
    display: none;
    flex-direction: column;
    gap: 24px;
}

[dir="rtl"] .mobile-side-menu {
    right: 0;
    transform: translateX(100%);
    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
}

[dir="ltr"] .mobile-side-menu {
    left: 0;
    transform: translateX(-100%);
}

.mobile-side-menu.active {
    display: flex;
    transform: translateX(0);
}

/* Close button in side menu */
.mobile-menu-close {
    align-self: flex-end;
    background: transparent;
    border: none;
    color: #666;
    /* font-size removed - using centralized typography system */
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Side menu sections */
.mobile-menu-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-menu-section-title {
    /* font-size and font-weight removed - using centralized typography system */
    color: #999;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.mobile-menu-item {
    padding: 12px 16px;
    color: #666;
    /* font-size and font-weight removed - using centralized typography system */
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

    .mobile-menu-item:hover,
    .mobile-menu-item:active {
        background: #F3F2F6;
    }

    .mobile-menu-item.active {
        color: #111;
        /* font-weight removed - using centralized typography system */
        background: #F3F2F6;
    }

.mobile-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #E6E6E6;
}

    .mobile-menu-buttons .ContactUs {
        width: 100%;
        height: 48px;
    }

/* Language items in mobile menu */
.mobile-menu-item img {
    display: inline-block;
    vertical-align: middle;
}

[dir="ltr"] .mobile-menu-item img {
    margin-right: 12px;
}

[dir="rtl"] .mobile-menu-item img {
    margin-left: 12px;
    margin-right: 0;
}

@@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    /* Hide desktop navigation on mobile */
    .Tabs {
        display: none !important;
    }
    /* Hide buttons except Profile on mobile */
    .Buttons > .ContactUs,
    .Buttons > form {
        display: none !important;
    }
    /* Keep profile visible */
    .Buttons .Profile {
        display: flex !important;
    }
    /* Adjust header layout */
    .Header {
        justify-content: space-between;
    }

    .Buttons {
        flex: 0 0 auto;
    }

    .hero-BlueSquare {
        right: 2%;
        top: -6%;
    }
}

/* Tablet adjustments */
@@media (max-width: 1024px) {


    .Tabs {
        gap: 16px;
    }

        .Tabs > a {
            /* font-size removed - using centralized typography system */
            padding: 8px 12px;
        }

    .Buttons {
        gap: 8px;
    }

    .ContactUs {
        padding-left: 12px;
        padding-right: 12px;
        /* font-size removed - using centralized typography system */
    }

    .hero-BlueSquare {
        right: 2%;
        top: -6%;
    }

    .Licenses {
        align-self: auto !important;
    }
}

/* Logo responsive */
@@media (max-width: 768px) {
    .Image1 {
        width: 55px !important;
        height: 38px !important;
    }

    .hero-BlueSquare {
        right: 2%;
        top: -6%;
    }

    .Licenses {
        align-self: auto !important;
    }
}

@@media (max-width: 480px) {
    .Image1 {
        width: 48px !important;
        height: 33px !important;
    }

    .mobile-menu-toggle {
        width: 40px !important;
}

/* Logo transparent background */
img[alt="Aqar360"],
img[data-uid="fkAvulGTIz8vmOfs"],
div[data-uid="nB2ABHQbGJfENqXi"] img {
    background: transparent !important;
    background-color: transparent !important;
}

div[data-uid="nB2ABHQbGJfENqXi"] {
    background: transparent !important;
    background-color: transparent !important;
}
        height: 40px !important;
    }

    .Profile {
        width: 40px !important;
        height: 40px !important;
    }

    .mobile-side-menu {
        padding: 20px 16px;
    }

    .hero-BlueSquare {
        right: 2%;
        top: -6%;
    }
    /* .Licenses {
			align-self: auto !important;
		} */
}

/* Additional responsive styles for navigation links to prevent word breaking */
@@media (max-width: 1200px) {
    .Tabs > a {
        white-space: nowrap;
        /* font-size removed - using centralized typography system */
    }

    .mobile-menu-toggle {
        display: flex;
    }
    /* Adjust header layout for mobile based on language direction */
    [dir="rtl"] .Header {
        flex-direction: row-reverse;
        justify-content: space-between !important;
    }

    [dir="ltr"] .Header {
        flex-direction: row;
        justify-content: space-between !important;
    }
    /* Ensure logo and menu button are at opposite ends */
    [dir="rtl"] .Image1 {
        order: 2;
    }

    [dir="rtl"] .mobile-menu-toggle {
        order: 1;
    }

    [dir="ltr"] .Image1 {
        order: 1;
    }

    [dir="ltr"] .mobile-menu-toggle {
        order: 3;
    }
    /* Hide desktop navigation on mobile */
    .Tabs {
        display: none !important;
    }
    /* Hide all buttons including Profile and Language on mobile */
    .Buttons {
        display: none !important;
    }
    /* Hide language dropdown form on mobile */
    #langForm {
        display: none !important;
    }
}

/* Nav active/hover pin: logical start edge so EN (ltr) and AR (rtl) align under label text */
#mainHeader .nav-links .nav-link {
    position: relative;
    display: inline-block;
    unicode-bidi: isolate;
    text-align: start;
}

#mainHeader .nav-link-pin {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    left: auto;
    right: auto;
    width: 0;
    height: 2px;
    transition: width 0.3s ease, background-color 0.22s ease;
    pointer-events: none;
}

#mainHeader[dir="ltr"] .nav-link-pin {
    left: 0;
    right: auto;
}

#mainHeader[dir="rtl"] .nav-link-pin {
    right: 0;
    left: auto;
}

#mainHeader .nav-link:hover .nav-link-pin,
#mainHeader .nav-link.is-active .nav-link-pin {
    width: 100%;
}

#mainHeader[dir="ltr"] .mobile-header-container,
#mainHeader[dir="ltr"] .nav-links,
#mainHeader[dir="ltr"] #topBar .flex {
    direction: ltr !important;
    flex-direction: row;
}

#mainHeader[dir="rtl"] .mobile-header-container,
#mainHeader[dir="rtl"] .nav-links,
#mainHeader[dir="rtl"] #topBar .flex {
    direction: rtl !important;
    flex-direction: row;
}

/* Top bar (phone + language toggle): on narrow screens let the two groups WRAP onto separate lines
   instead of squeezing the toggle until it wraps and overlaps the phone number. */
#mainHeader #topBar .flex.justify-between {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

#mainHeader #topBar #langForm {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Desktop view - ensure header is always visible */
@media (min-width: 1400px) {
    /* Ensure header element is visible and rendered */
    #mainHeader {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99997 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Ensure all header children are visible */
    #mainHeader * {
        visibility: visible !important;
    }
    
    /* Ensure desktop navigation is visible (Tailwind's lg:flex should handle this, but ensure it) */
    .hidden.lg\:flex {
        display: flex !important;
    }
    
    /* Hide mobile menu button on desktop */
    .mobile-menu-btn,
    #mobileMenuButton {
        display: none !important;
    }

    /* Keep nav labels and CTAs on one line (override aqaryon.css .nav-links { flex: 1 } shrink) */
    #mainHeader .mobile-header-container {
        flex-wrap: nowrap;
    }

    /* Logo + desktop nav column: don’t compress link row (RTL/LTR same DOM order) */
    #mainHeader .mobile-header-container > .hidden.lg\:flex.items-center.gap-6 {
        flex-shrink: 0;
    }

    #mainHeader .nav-links {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    #mainHeader .nav-links .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    #mainHeader .nav-actions {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    #mainHeader .nav-actions .action-button,
    #mainHeader .nav-actions #joinPartnerButton {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@@media (max-width: 900px) {
    .Tabs > a {
        /* font-size removed - using centralized typography system */
        padding: 6px 8px;
    }
}

@@media (max-width: 768px) {
    .Tabs > a {
        /* font-size removed - using centralized typography system */
        padding: 4px 6px;
    }
}

/* Mobile header layout: menu (leading) · logo (centre) · cart (trailing).
   The DOM order is menu → logo → cart, so plain `flex-direction: row` +
   justify-between already produces the correct corners in BOTH LTR and RTL
   via natural bidi. No row-reverse here (it used to live in this block and in
   shared/_layout.css; removed because it flips the new layout in RTL). */

/* Client marketing header: remove harsh box around mobile brand (UA / focus / Tailwind can read as a black frame). */
@media (max-width: 1399px) {
    #mainHeader .header-toolbar-trailing {
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
        gap: 0.125rem;
    }

    #mainHeader .header-bell-toolbar-slot .notification-bell-wrap {
        display: block;
    }

    #mainHeader #mobileLogoContainer,
    #mainHeader #mobileLogoContainer img,
    #mainHeader #mobileLogoContainer #headerLogoMobile {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    #mainHeader #mobileLogoContainer img#headerLogoMobile {
        -webkit-tap-highlight-color: transparent;
        display: block;
        /* The brand PNGs (aqar360-7 / -10) are 500×500 SQUARES: the "Aqar360" wordmark sits in a centre band
           with ~24% transparent padding top/bottom. With object-fit:contain the box stayed square and the mark
           rendered tiny (a 48px box showed only ~25px of actual wordmark). Give it a LANDSCAPE box and
           object-fit:cover so it crops that transparent padding and the wordmark fills the bar height instead.
           42px tall sits comfortably in the 70px mobile toolbar; width≈1.8×height keeps the mark from clipping. */
        height: 42px !important;
        width: 76px !important;
        max-height: 46px !important;
        max-width: min(280px, 86vw) !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    #mainHeader #mobileLogoContainer div#headerLogoMobile {
        border: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Post Listing — choose profile (outside fixed <header>): full-viewport overlay + card layout survives page-specific CSS */
#postListingProfileModal.post-listing-profile-gate {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 2147483646 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

#postListingProfileModal.post-listing-profile-gate > div {
    width: 100% !important;
    max-width: 28rem !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
}

/* Footer: physical button order (Cancel then Continue); dir on inner panel handles RTL text */
#postListingProfileModal.post-listing-profile-gate .post-listing-profile-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
}

#postListingProfileModal.post-listing-profile-gate [dir="rtl"] .post-listing-profile-footer {
    justify-content: flex-start !important;
}

/* Post listing gate: same row layout as profile dropdown (avatar + label + partner type), outside .header-profile-panel */
#postListingProfileModal.post-listing-profile-gate #postListingProfileList button.post-listing-profile-option.header-profile-panel__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    text-align: start;
    box-sizing: border-box;
    margin: 0 0 0.5rem 0;
    padding: 0.625rem 0.875rem;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    color: #111111 !important;
    background-color: #ffffff !important;
    border: 1.5px solid rgb(223, 227, 231);
    border-radius: 0.75rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#postListingProfileModal.post-listing-profile-gate #postListingProfileList button.post-listing-profile-option.header-profile-panel__row:hover {
    background-color: rgb(245, 243, 255) !important;
}

#postListingProfileModal.post-listing-profile-gate #postListingProfileList button.post-listing-profile-option.post-listing-profile-option--selected {
    border-color: rgb(107, 91, 149);
    background-color: rgb(239, 246, 255) !important;
}

#postListingProfileModal.post-listing-profile-gate #postListingProfileList button.post-listing-profile-option.header-profile-panel__row:last-child {
    margin-bottom: 0;
}

/* Post Listing modal: larger Nafath badge (logo + ✓ / ✕) than compact header dropdown */
#postListingProfileModal.post-listing-profile-gate #postListingProfileList .header-profile-panel__row-nafath {
    gap: 0.625rem;
    padding-inline-start: 0.5rem;
}

#postListingProfileModal.post-listing-profile-gate #postListingProfileList .header-profile-panel__row-nafath-logo {
    width: 2.25rem;
    height: 2.25rem;
}

#postListingProfileModal.post-listing-profile-gate #postListingProfileList .header-profile-panel__row-nafath-mark {
    font-size: 1.375rem;
}

/* Shown when at least one profile in the picker is not Nafath-verified */
#postListingProfileModal.post-listing-profile-gate .post-listing-nafath-notice {
    padding: 0.75rem 1.25rem 0.875rem;
    margin: 0;
    border-top: 1.5px solid rgb(232, 235, 237);
    font-size: 0.875rem;
    line-height: 1.45;
    unicode-bidi: isolate;
    color: rgb(185, 28, 28);
    font-weight: 600;
}

#postListingProfileModal.post-listing-profile-gate .post-listing-nafath-notice__lead,
#postListingProfileModal.post-listing-profile-gate .post-listing-nafath-notice__rest {
    color: inherit;
    font-weight: inherit;
}

#postListingProfileModal.post-listing-profile-gate .post-listing-nafath-notice__lead + .post-listing-nafath-notice__rest::before {
    content: ' ';
}

/* Post Listing: rows without Nafath verification are not selectable */
#postListingProfileModal.post-listing-profile-gate #postListingProfileList button.post-listing-profile-option.post-listing-profile-option--nafath-disabled {
    opacity: 0.52;
    cursor: not-allowed !important;
}

#postListingProfileModal.post-listing-profile-gate #postListingProfileList button.post-listing-profile-option.post-listing-profile-option--nafath-disabled:hover {
    background-color: #ffffff !important;
    border-color: rgb(223, 227, 231) !important;
}

/* Header action cluster: Cart + Bell lead the cluster, then Post / Join / Login (explicit order 1/2/3).
   dir=ltr on the cluster keeps the visual order identical in EN and AR. */
.nav-actions--ltr-toolbar {
    direction: ltr !important;
    flex-wrap: nowrap;
    flex-shrink: 0;
    unicode-bidi: isolate;
}

@media (min-width: 1400px) {
    #mainHeader .header-toolbar-trailing {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    #mainHeader .nav-actions--ltr-toolbar {
        display: flex !important;
        flex-direction: row !important;
    }

    #mainHeader[dir="ltr"] .header-toolbar-trailing .nav-actions--ltr-toolbar {
        order: 1 !important;
    }

    #mainHeader[dir="ltr"] .header-toolbar-trailing #headerEshopCartLink {
        order: 2 !important;
    }

    #mainHeader[dir="ltr"] .header-toolbar-trailing .header-bell-toolbar-slot {
        order: 3 !important;
    }

    #mainHeader[dir="rtl"] .header-toolbar-trailing .nav-actions--ltr-toolbar {
        order: 1 !important;
    }

    #mainHeader[dir="rtl"] .header-toolbar-trailing #headerEshopCartLink {
        order: 2 !important;
    }

    #mainHeader[dir="rtl"] .header-toolbar-trailing .header-bell-toolbar-slot {
        order: 3 !important;
    }

    #mainHeader[dir="ltr"] .nav-actions--ltr-toolbar #postListingButton {
        order: 1 !important;
    }

    #mainHeader[dir="ltr"] .nav-actions--ltr-toolbar #joinPartnerButton {
        order: 2 !important;
    }

    #mainHeader[dir="ltr"] .nav-actions--ltr-toolbar #headerProfileDropdownRoot {
        order: 3 !important;
    }

    #mainHeader[dir="rtl"] .nav-actions--ltr-toolbar #postListingButton {
        order: 3 !important;
    }

    #mainHeader[dir="rtl"] .nav-actions--ltr-toolbar #joinPartnerButton {
        order: 2 !important;
    }

    #mainHeader[dir="rtl"] .nav-actions--ltr-toolbar #headerProfileDropdownRoot {
        order: 1 !important;
    }
}

@media (max-width: 1399px) {
    #mainHeader .header-toolbar-trailing {
        direction: ltr !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
    }

    #mainHeader[dir="ltr"] .header-toolbar-trailing #headerEshopCartLinkMobile {
        order: 1 !important;
    }

    #mainHeader[dir="ltr"] .header-toolbar-trailing .header-bell-toolbar-slot {
        order: 2 !important;
    }

    #mainHeader[dir="rtl"] .header-toolbar-trailing .header-bell-toolbar-slot {
        order: 1 !important;
    }

    #mainHeader[dir="rtl"] .header-toolbar-trailing #headerEshopCartLinkMobile {
        order: 2 !important;
    }

    .nav-actions--ltr-toolbar.active {
        direction: ltr !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        z-index: 100200 !important;
    }

    .nav-actions--ltr-toolbar.active .action-button,
    .nav-actions--ltr-toolbar.active #joinPartnerButton {
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    /* Drawer: the bell sits in a clean centered row (override the inline display:grid that stranded it). */
    .nav-actions--ltr-toolbar.active .header-bell-cluster-slot {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 100%;
    }

    .nav-actions--ltr-toolbar.active .notification-bell-wrap {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0 auto;
    }

    .nav-actions--ltr-toolbar.active #bellButton {
        position: relative !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0 !important;
    }

    .nav-actions--ltr-toolbar.active #clientMsgUnreadBadge {
        position: absolute !important;
        top: 0.125rem !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        left: auto !important;
        right: 0.125rem !important;
        width: auto !important;
        min-width: 1.125rem !important;
        height: 1.125rem !important;
        padding: 0 0.25rem !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Drawer bg is white; the bell icon is styled text-white for the purple header bar — recolor it dark so it's visible (the red unread badge keeps its own colour). */
    .nav-actions--ltr-toolbar.active .header-bell-cluster-slot #bellIcon {
        color: #372a58 !important;
        stroke: #372a58 !important;
    }
}

/* Login: white hero chip is desktop toolbar only (lg+). On mobile, actions are in the drawer — keep purple like solid bar. */
@media (max-width: 1399px) {
    #loginButton.login-toolbar-surface-light {
        background-color: #6b5b95 !important;
        color: #ffffff !important;
        border-color: #6b5b95 !important;
    }

    #loginButton.login-toolbar-surface-light span {
        color: #ffffff !important;
    }

    #loginButton.login-toolbar-surface-light svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }
}

/* Login/profile toolbar button: hover feedback (parity with Post Listing / Join action buttons). */
#mainHeader #loginButton {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (min-width: 1400px) {
    #mainHeader #loginButton.login-toolbar-surface-light:hover {
        background-color: #f1edf9 !important;
        box-shadow: 0 6px 16px rgba(107, 91, 149, 0.20);
    }
}

#mainHeader #loginButton.login-toolbar-surface-solid:hover {
    background-color: #5a4d80 !important;
    border-color: #5a4d80 !important;
    box-shadow: 0 6px 16px rgba(107, 91, 149, 0.28);
}

/* Marketing footer blurb: follow logical start edge and wrap whole words where possible */
footer p.text-gray-400.leading-relaxed.text-lg {
    text-align: start;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
}

/* Cart visibility: 1400px toolbar breakpoint (Tailwind lg=1024 leaves a dead zone where both carts hide). */
#headerEshopCartLink {
    display: none !important;
}

#mainHeader #headerEshopCartLinkMobile {
    display: inline-flex !important;
}

@media (min-width: 1400px) {
    #headerEshopCartLink {
        display: inline-flex !important;
    }

    #mainHeader #headerEshopCartLinkMobile {
        display: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Header responsive-visibility guard (toolbar consistency across the app).

   Some page stylesheets ship a STANDALONE, INCOMPLETE Tailwind build that
   redefines the bare utilities `.flex { display:flex }` / `.hidden { display:none }`
   but omits the responsive `lg:` variants — e.g. client-new-ad-license.css and
   Partner/NewAdLicense.css. Because that page CSS loads AFTER the global CSS,
   its bare `.flex`/`.hidden` win the source-order cascade over the header's
   `lg:flex`/`lg:hidden`, so at desktop width the desktop nav/logo collapse and
   the mobile logo leaks in (the "broken header / 2 logos" report).

   Re-asserting the intended breakpoint behaviour with `#mainHeader` (ID + 2
   classes) raises specificity above any bare utility class, so it wins
   regardless of which stylesheet loads last. Scoped to the header only — does
   not touch page content. */
@media (min-width: 1400px) {
    #mainHeader .hidden.lg\:flex { display: flex !important; }
    #mainHeader .hidden.lg\:inline-flex { display: inline-flex !important; }
    #mainHeader .lg\:hidden { display: none !important; }
}

/* 1024–1399: full desktop lg: utilities activate too early — force mobile toolbar.
   Measured: the full nav needs ~1309px+ even compacted (guest), more when logged in,
   so collapse to the hamburger below 1400 instead of cramming the row. */
@media (min-width: 1024px) and (max-width: 1399px) {
    #mainHeader .mobile-header-container > .hidden.lg\:flex {
        display: none !important;
    }

    #mainHeader .header-toolbar-trailing .nav-actions.nav-actions--ltr-toolbar.hidden.lg\:flex {
        display: none !important;
    }

    #mainHeader .header-toolbar-trailing {
        display: flex !important;
        align-items: center;
        gap: 0.125rem;
    }

    #mainHeader .mobile-menu-btn,
    #mainHeader #mobileMenuButton {
        display: flex !important;
    }

    #mainHeader #mobileLogoContainer {
        display: flex !important;
    }

    #mainHeader .mobile-header-container > .mobile-menu-btn {
        order: 1;
    }

    #mainHeader .mobile-header-container > #mobileLogoContainer {
        order: 2;
    }

    #mainHeader .mobile-header-container > #headerEshopCartLinkMobile {
        order: 3;
    }
}

@media (max-width: 1023px) {
    #mainHeader .mobile-header-container > .mobile-menu-btn {
        order: 1;
    }

    #mainHeader .mobile-header-container > #mobileLogoContainer {
        order: 2;
    }

    #mainHeader .mobile-header-container > #headerEshopCartLinkMobile {
        order: 3;
    }
}

/* Compact desktop toolbar: tighter gaps so 1400–1540 fits without clipping */
@media (min-width: 1400px) and (max-width: 1540px) {
    #mainHeader .mobile-header-container > .hidden.lg\:flex.items-center.gap-6 {
        gap: 0.75rem !important;
    }

    #mainHeader .nav-links {
        gap: 1rem !important;
    }

    #mainHeader .nav-actions--ltr-toolbar {
        gap: 0.375rem !important;
    }

    #mainHeader .nav-links .nav-link {
        font-size: 0.875rem !important;
    }

    #mainHeader .nav-actions .action-button,
    #mainHeader .nav-actions #joinPartnerButton {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
        font-size: 0.8125rem !important;
    }

    #mainHeader #joinPartnerButton {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #mainHeader #headerLogo {
        width: 4.25rem !important;
        max-width: 4.25rem !important;
    }

    #mainHeader .container.mx-auto {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Footer counterpart of the same guard: the incomplete page builds ship a bare
   `.flex-col` / `.items-center` with no `md:` variant, which strands the footer
   bottom bar vertical (and centred) instead of `md:flex-row` / `md:items-start`
   at desktop. `footer .` scoping keeps it off page content; the extra classes
   out-specify the bare utilities regardless of load order. */
@media (min-width: 768px) {
    footer .flex.flex-col.md\:flex-row { flex-direction: row; }
    footer .flex.flex-col.items-center.md\:items-start { align-items: flex-start; }
}

@supports (text-wrap: pretty) {
    footer p.text-gray-400.leading-relaxed.text-lg {
        text-wrap: pretty;
    }
}

/* Listing:PostingEnabled = false — the post-listing entry points stay visible but read as unavailable.
   Clicks still reach the handler (it opens the "coming soon" dialog), so pointer-events must stay on.
   The markup drops the hover:bg-white / hover:text utilities in this state, so there is no hover flip
   to override here — overriding it instead produced white text on the white hover background. */
.post-listing-btn--soon {
    opacity: 0.6;
    cursor: default;
}

.post-listing-soon-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 9999px;
    background: #FFD700;
    color: #3B325C;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}