/* 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;
}

/* REMOVED: nine media blocks that had been written with a DOUBLED at-sign. A doubled at-sign is
   Razor's escape for a literal one; this file is served statically, so nothing ever unescaped it and
   Chrome discarded all nine blocks whole — verified against document.styleSheets: 12 media rules
   parsed, from 12 correctly-written blocks plus these 9.

   They were NOT repaired to `@media`, because reviving them is a regression, not a fix. All nine
   style the SUPERSEDED header — .Header / .Tabs / .Buttons / .ContactUs / .Profile / .Image1 /
   .mobile-menu-toggle / .hero-BlueSquare / .Licenses / .mobile-side-menu. The live client header is
   #mainHeader / .mobile-header-container / .nav-links / .nav-actions / .header-toolbar-trailing, and
   the 12 WORKING media queries below already cover it at every breakpoint. Not one of those class
   names appears in any markup that loads this stylesheet.

   What the nine would have done, had they been repaired (this file is global — it loads for the whole
   Client area from Areas/Client/Views/Shared/_Layout.cshtml, so its bare class selectors collide with
   unrelated pages):
     · `.Tabs { display: none !important }` at <=768px AND at <=1200px would have blanked the seven
       `class="Tabs tabs-container"` form sections on Areas/Client/Views/Client/AddUnits.cshtml —
       the whole post-a-listing form, gone below 1200px.
     · `#langForm { display: none !important }` at <=1200px would have removed the ONLY language
       switcher (#topBar, العربية | English) on mobile and tablet.
     · `.Header` padding / flex-direction / justify-content would have distorted the
       `class="Header set-new-password-header"` row in the Set New Password modal.
     · Everything else matched nothing.

   Four `img[alt="Aqar360"] / [data-uid] { background: transparent }` rules went with them: they had
   been pasted INSIDE the 480px block (splitting a `.mobile-menu-toggle` rule in half), and they are
   redundant anyway — #headerLogo, #headerLogoMobile and their container div each carry an inline
   `background: transparent !important`, which outranks any stylesheet rule.

   Three rules — .Profile, .mobile-side-menu, .hero-BlueSquare — had LEAKED OUT of that same broken
   480px block through the split braces and were applying globally at every width instead of the
   <=480px their author intended. They went too; none of the three matches any element on any page
   that loads this stylesheet.

   Deleting is the provably behaviour-preserving option: the parser already discarded this text, and
   a before/after CSSOM diff shows no other change. Un-doubling the at-signs is the dangerous one. */

[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;
}

/* 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;
    }
}

/* 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(106, 93, 139);
    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: #6a5d8b !important;
        color: #ffffff !important;
        border-color: #6a5d8b !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(106, 93, 139, 0.20);
    }
}

#mainHeader #loginButton.login-toolbar-surface-solid:hover {
    background-color: #5a4d80 !important;
    border-color: #5a4d80 !important;
    box-shadow: 0 6px 16px rgba(106, 93, 139, 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;
}