/*
 * The desktop top header: logo, search, wallet, notifications, messages, avatar.
 *
 * MOVED OUT OF app.css AND LOADED DIRECTLY, not through Minify.
 *
 * Every rule here was present in app.css and present in the built bundle -- verified by
 * grepping both -- yet the browser's parsed stylesheet did not contain them:
 * `[...document.styleSheets].some(ss => [...ss.cssRules].some(r => r.selectorText ===
 * '.fx-top-header'))` returned FALSE, and the computed padding was 0px against a rule
 * saying `0 24px !important`.
 *
 * A rule that is in the served text but absent from the parsed sheet means the parser gave
 * up before reaching it -- a syntax error earlier in a 350KB concatenation. Brace counting
 * does not catch that class of fault, which is why the file looked balanced throughout.
 *
 * Rather than hunt one bad character in a generated bundle, the header's CSS is its own
 * file, linked directly. A parse error anywhere in app.css can no longer take the site
 * header with it.
 */

/* ============================================================
   Full-width top header (desktop): Logo · Search · Balance/notif/msg/avatar.
   Sits above the 3-column layout (layouts.user-no-nav). Sticky.
   ============================================================ */
.fx-top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    gap: 20px;
    height: 60px;
    max-height: 60px;
    padding: 0 24px !important;
    background: #ffffff;
    border-bottom: 1px solid #ECEAF0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Very subtle minimal header shadow */
.navbar.sticky-nav,
.navbar.sticky-nav.top,
.fx-header-subtle {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
body.fx-theme-dark .fx-top-header,
body.fx-theme-dark .navbar.sticky-nav,
body.fx-theme-dark .navbar.sticky-nav.top,
body.fx-theme-dark .fx-header-subtle {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Mobile navbar padding alignment with feed header and 24px logo text */
@media (max-width: 991.98px) {
    .navbar.sticky-nav.top {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .navbar.sticky-nav.top .app-navbar-inner {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .navbar.sticky-nav.top.app-navbar-home .navbar-toggler,
    .navbar.sticky-nav.top .fx-mob-menu {
        margin-right: 12px !important;
    }
    .navbar.sticky-nav.top .navbar-brand .fx-logo-text,
    .navbar.sticky-nav .navbar-brand .fx-logo-text,
    .app-navbar-home .navbar-brand .fx-logo-text,
    .fx-logo-text {
        font-size: 24px !important;
        font-weight: 800 !important;
        letter-spacing: .1px !important;
        line-height: 1.1 !important;
    }
}
/* The ONE and only header offset lives here (desktop): push the container below the 60px fixed
   header and lock it to the viewport, so the left/right rails stay put and ONLY the feed scrolls.
   Nothing inside needs its own 60px. Mobile uses its own top bar, so this is desktop-only. */
@media (min-width: 768px) {
    body .flex-fill > .container-xl {
        padding-top: 60px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body .flex-fill > .container-xl > .main-wrapper {
        height: auto !important;
        max-height: none !important;
        min-height: calc(100vh - 60px) !important;
    }
    /* LEFT rail: sticky positioning below top header */
    .fx-layout-sidebar {
        position: -webkit-sticky !important;
        position: sticky !important;
        /* Kept in step with the copy in liquid-sidebar.css, which loads later and wins. */
        top: 60px !important;
        align-self: flex-start !important;
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 10px !important;
        scrollbar-width: none;
    }
    .fx-layout-sidebar::-webkit-scrollbar { width: 0; display: none; }
    /* Content holder */
    .fx-layout-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .fx-layout-content > .container,
    .fx-layout-content > .container > .row {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
    /* FEED column (.second) */
    .fx-layout-content .row > .second {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* RIGHT rail (.suggestions-wrapper): STICKY below top header */
    /*
        THE STICKY BEHAVIOUR IS DEFINED ONCE, in the 1004px block below.

        It used to be repeated here in full, and because this is the wider media query it
        came later in the cascade and overrode the more specific block on every desktop
        screen -- so the column pinned wherever THIS said, and editing the block that looked
        authoritative did nothing at all. Two rules for one element is a trap laid for
        whoever edits it next; there is one now.

        What remains here is only what the narrower range needs, and the values match.
    */
    .fx-layout-content .row > .suggestions-wrapper,
    .suggestions-wrapper.min-vh-100 {
        min-height: 0 !important;
    }
    .fx-layout-content .row > .suggestions-wrapper::-webkit-scrollbar { width: 0; display: none; }
}

/* 3-Column Layout: Left sidebar no right border, Right sidebar no left border, Middle (.second) has left & right borders */
@media (min-width: 1004px) {
    .fx-layout-content .row > .second {
        flex: 0 0 62.821% !important;
        max-width: 62.821% !important;
        width: 62.821% !important;
        /*
            No border on the LEFT: the sidebar beside it already draws one, and two lines a
            pixel apart read as a double rule rather than as one divider.
        */
        border-left: none !important;
        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    body.fx-theme-dark .fx-layout-content .row > .second,
    body.fx-theme-dark .second {
        border-left: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .fx-layout-content .row > .suggestions-wrapper,
    .suggestions-wrapper.min-vh-100 {
        flex: 0 0 37.179% !important;
        max-width: 37.179% !important;
        width: 37.179% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        /*
            Pinned to the header's own height, with no padding above it.
            
            At 70px it sat a further ten pixels down and carried another ten inside, so the
            column started twenty pixels below the header for no reason -- visible as a gap
            beside a feed that begins right under it.
        */
        top: 60px !important;
        align-self: flex-start !important;
        height: auto !important;
        /* Measured from the header's own height, so the column can use the rest of it. */
        max-height: calc(100vh - 60px) !important;
        padding-top: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
        border-left: none !important;
    }
}

body.fx-theme-light .fx-glass-sidebar,
body.fx-theme-light .fx-glass-sidebar.side-menu-theme-light {
    background: #ffffff !important;
    border-right: none !important;
    box-shadow: none !important;
}
body.fx-theme-dark .fx-glass-sidebar,
body.fx-theme-dark .fx-glass-sidebar.side-menu-theme-dark {
    background: #18191a !important;
    border-right: none !important;
    box-shadow: none !important;
}
body.fx-theme-light .suggestions-wrapper,
body.fx-theme-light .fx-layout-content .row > .suggestions-wrapper,
body.fx-theme-dark .suggestions-wrapper,
body.fx-theme-dark .fx-layout-content .row > .suggestions-wrapper {
    border-left: none !important;
}

/* Progressive Media Loading & Shimmer Placeholders */
.fx-media-shimmer-box, .fx-media-figure {
    background-color: #f0f2f5 !important;
    background-image: linear-gradient(90deg, #f0f2f5 0px, #e4e6eb 40px, #f0f2f5 80px) !important;
    background-size: 600px 100% !important;
    animation: fx-shimmer-media 1.5s infinite linear !important;
}
body.fx-theme-dark .fx-media-shimmer-box,
body.fx-theme-dark .fx-media-figure {
    background-color: #242526 !important;
    background-image: linear-gradient(90deg, #242526 0px, #3a3b3c 40px, #242526 80px) !important;
}
@keyframes fx-shimmer-media {
    0% { background-position: -200px 0; }
    100% { background-position: 400px 0; }
}
.fx-media-img {
    opacity: 0;
    transition: opacity 0.25s ease-in-out !important;
}
.fx-media-img.fx-img-loaded {
    opacity: 1 !important;
}
body.fx-theme-dark .fx-top-header {
    background: #18191a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
/* LEFT: logo — fixed width so the search stays visually centred */
.fx-top-header .fx-th-logo {
    flex: 0 0 auto;
    min-width: 200px;
    gap: 12px !important;
    color: inherit;
}
.fx-top-header .fx-th-logo-img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    display: block;
    object-fit: contain;
}
.fx-top-header .fx-th-logo-text {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
body.fx-theme-light .fx-top-header .fx-th-logo-text { color: #17171c; }
body.fx-theme-dark .fx-top-header .fx-th-logo-text { color: #ffffff; }

/* CENTER: search — takes the middle, capped so it doesn't sprawl */
.fx-top-header .fx-th-search {
    flex: 1 1 auto;
    max-width: 520px !important;
    margin: 0 24px !important;
}
.fx-top-header .fx-th-search .search-box-wrapper { position: relative; margin: 0; }
.fx-top-header .fx-th-search .form-control {
    height: 38px !important;
    border-radius: 10px !important;
    padding-left: 18px !important;
    font-size: 14px !important;
    background: #f0f2f5 !important;
    border: 1px solid transparent !important;
    color: #16151a !important;
    transition: all 0.2s ease !important;
}
body.fx-theme-dark .fx-top-header .fx-th-search .form-control {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f3f7 !important;
}
.fx-top-header .fx-th-search .form-control:focus {
    background: #ffffff !important;
    border-color: var(--primary, #d10054) !important;
    box-shadow: 0 0 0 3px rgba(209, 0, 84, 0.12) !important;
}
body.fx-theme-dark .fx-top-header .fx-th-search .form-control:focus {
    background: #18191a !important;
    border-color: var(--primary, #d10054) !important;
    box-shadow: 0 0 0 3px rgba(209, 0, 84, 0.2) !important;
}
.fx-top-header .fx-th-search .input-group-text {
    background: transparent !important;
    border: none !important;
    padding-right: 6px !important;
}
.fx-top-header .fx-search-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
}
.fx-top-header .fx-search-svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #65676b !important;
    stroke-width: 2.2 !important;
    fill: none !important;
    transition: stroke 0.15s ease !important;
}
body.fx-theme-dark .fx-top-header .fx-search-svg {
    stroke: #b0b3b8 !important;
}
.fx-top-header .fx-search-btn:hover .fx-search-svg {
    stroke: var(--primary, #d10054) !important;
}

/* RIGHT: balance + icons + avatar */
.fx-top-header .fx-th-right {
    flex: 0 0 auto;
    gap: 16px !important;
    margin-left: auto;
}

/* Premium Wallet Card */
.fx-top-header .fx-wallet-card--v2,
.fx-wallet-card--v2 {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    /* Tightened with the smaller amount text so the saved width is real, not just
       absorbed by the padding. Height stays 36px to match the icons beside it. */
    padding: 2px 4px 2px 9px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
body.fx-theme-dark .fx-top-header .fx-wallet-card--v2,
body.fx-theme-dark .fx-wallet-card--v2 {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.fx-wallet-card--v2 .fx-wallet-card-amount {
    /* Smaller than the 13.5px it used to be: the balance pill was eating enough of the
       header that the search and the icons to its right were pushed off the edge at
       narrower widths. A shorter pill gives that room back.
       nowrap so a long balance never wraps the pill onto two lines. */
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    color: #1c1e21 !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    white-space: nowrap !important;
}
body.fx-theme-dark .fx-wallet-card--v2 .fx-wallet-card-amount {
    color: #f4f3f7 !important;
}
.fx-wallet-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--primary, #d10054) !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
    flex-shrink: 0 !important;
}
.fx-wallet-add-btn:hover {
    filter: brightness(1.08) !important;
    transform: scale(1.06) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.fx-add-plus {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-top: -1px !important;
    display: inline-block !important;
}

/* Icon Buttons: Notification & Messenger with thin theme border */
.fx-top-header .fx-th-icons { gap: 10px !important; }
.fx-top-header .fx-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #65676b !important;
    transition: all 0.15s ease !important;
}
.fx-top-header .fx-icon-btn:hover,
.fx-top-header .fx-icon-btn.active {
    background: #f0f2f5 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--primary, #d10054) !important;
}
body.fx-theme-dark .fx-top-header .fx-icon-btn {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #b0b3b8 !important;
}
body.fx-theme-dark .fx-top-header .fx-icon-btn:hover,
body.fx-theme-dark .fx-top-header .fx-icon-btn.active {
    background: #3a3b3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--primary, #d10054) !important;
}
.fx-top-header .fx-badge-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #e41e3f !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    border: 2px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 4px !important;
}
body.fx-theme-dark .fx-top-header .fx-badge-count {
    border-color: #18191a !important;
}

/* Premium Wallet Settings Page Available Balance Card */
.fx-wallet-balance-card {
    background: linear-gradient(135deg, rgba(209, 0, 84, 0.04) 0%, rgba(209, 0, 84, 0.01) 100%), #ffffff !important;
    border: 1px solid rgba(209, 0, 84, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    position: relative;
    overflow: hidden;
}
body.fx-theme-dark .fx-wallet-balance-card {
    background: linear-gradient(135deg, rgba(209, 0, 84, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%), #1e222d !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
.badge-soft-success {
    background: rgba(40, 167, 69, 0.12) !important;
    color: #28a745 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}
body.fx-theme-dark .badge-soft-success {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}
.fx-active-pulse {
    width: 7px;
    height: 7px;
    background-color: #28a745;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    animation: fx-pulse-green 1.8s infinite;
}
body.fx-theme-dark .fx-active-pulse {
    background-color: #34d399;
}
@keyframes fx-pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Segmented Deposit / Withdraw Button Switcher */
.fx-wallet-tab-segmented {
    background: #f0f2f5 !important;
    border: 1px solid #e4e6eb !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 4px !important;
}
body.fx-theme-dark .fx-wallet-tab-segmented {
    background: #18191a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.fx-wallet-tab-btn {
    height: 42px !important;
    border-radius: 999px !important;
    color: #65676b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}
body.fx-theme-dark .fx-wallet-tab-btn {
    color: #b0b3b8 !important;
}
.fx-wallet-tab-btn.active {
    color: #ffffff !important;
    box-shadow: none !important;
    background: #d10054 !important;
}
.fx-wallet-tab-btn.active:hover {
    color: #ffffff !important;
    box-shadow: none !important;
    background: #ab0045 !important;
}
.fx-wallet-tab-btn:not(.active):hover {
    color: var(--primary, #d10054) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
body.fx-theme-dark .fx-wallet-tab-btn:not(.active):hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.fx-top-header .fx-th-avatar {
    display: inline-flex !important;
    line-height: 0;
}
.fx-top-header .fx-th-avatar img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid transparent !important;
    transition: border-color 0.15s ease !important;
}
.fx-top-header .fx-th-avatar:hover img {
    border-color: var(--primary, #d10054) !important;
}
.fx-right-avatar-dot {
    width: 10px !important;
    height: 10px !important;
    background: #31a24c !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
}


/* ============================================================
   MOVED HERE FROM app.css, for the same reason the header was.
   ============================================================

   The live typeahead dropdown sits at line ~5250 of app.css -- past the point where the
   browser stops applying rules from the bundle. Its `position: absolute` and its panel
   styling never reached the element, so clicking the search box produced an unstyled block
   instead of a dropdown.

   It belongs with the header's CSS anyway: the search box is a header component, and this
   file is loaded with a plain <link> rather than through Minify, so nothing upstream can
   drop it.
   ============================================================ */

/* ============================================================
   Live typeahead search dropdown (users + posts as you type)
   ============================================================ */
.search-box-wrapper.fx-live-search { position: relative; }
.fx-live-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto;
}
body.fx-theme-dark .fx-live-search-dropdown {
    background: #242526; border-color: rgba(255,255,255,.1);
    box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.fx-live-search-hint,
.fx-live-search-empty {
    padding: 14px 16px; color: #8a96a3; font-size: .9rem;
}
.fx-live-search-loading {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; color: #8a96a3; font-size: .88rem;
}
.fx-live-spinner {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(138,150,163,.35); border-top-color: #d10054;
    animation: fxLiveSpin .7s linear infinite; display: inline-block;
}
@keyframes fxLiveSpin { to { transform: rotate(360deg); } }
.fx-live-sec-title {
    padding: 10px 16px 4px; font-size: .7rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: #8a96a3;
}
.fx-live-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px; text-decoration: none; color: inherit;
    transition: background-color .12s ease;
}
.fx-live-item:hover { background: rgba(138,150,163,.1); text-decoration: none; color: inherit; }
body.fx-theme-dark .fx-live-item:hover { background: rgba(255,255,255,.06); }
.fx-live-avatar {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    background: rgba(138,150,163,.25);
}
.fx-live-avatar-ph { display: inline-block; }
.fx-live-meta { display: flex; flex-direction: column; min-width: 0; }
.fx-live-name { font-weight: 700; font-size: .9rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-live-handle { font-size: .8rem; color: #8a96a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-live-more .fx-live-name { color: #d10054; }
.fx-live-search-ico { position: relative; }
.fx-live-search-ico::before {
    content: "\1F50D"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}

/* Remove the xl corner rounding (per request) — no rounded-xl corners site-wide. */


/* ============================================================
   d-none, restated for the header's own elements
   ============================================================

   The notification and message badges are hidden with Bootstrap's `.d-none` when their count
   is zero -- the Blade puts the class on directly:

       class="fx-badge-count ... {{ $fxNotifTotal > 0 ? '' : 'd-none' }}"

   That is correct, but `.d-none` is defined in the bundled stylesheet, and rules from the
   later part of that bundle are not reaching the page (see update 2324). So the class was
   applied and did nothing, and both badges sat there reading "0".

   Restating it here costs one rule and removes the dependency. The selector is deliberately
   narrow -- `.fx-badge-count.d-none` only, not `.fx-top-header .d-none` -- so this cannot
   become a second global definition of a Bootstrap utility, and cannot catch the header's
   other four `d-none` elements.

   SAFE AGAINST THE LIVE COUNTER: incrementNotificationsCount() in app.js shows a badge with
   `removeClass('d-none')`. Once that class is gone this rule no longer matches, so
   !important cannot pin a badge shut when a real notification arrives.
   ============================================================ */
.fx-top-header .fx-badge-count.d-none {
    display: none !important;
}


/* ============================================================
   The brand X, and the mobile logo wordmark
   ============================================================

   `.fx-brand-x { color: #d10054 }` lives at line ~5280 of app.css -- inside the stretch of
   that bundle whose rules are not reaching the page (see 2322, 2324, 2325). So the X in
   "VVIP Fans" rendered in the surrounding text colour instead of the brand pink, in all
   three places the wordmark appears: the desktop header, the mobile brand header, and
   template/header.

   NOT SCOPED to .fx-top-header, deliberately. The same class is used by
   elements/feed/mobile-brand-header and template/header, and scoping it here would fix the
   desktop header while leaving the other two wrong. This file is linked from both layouts,
   so an unscoped rule reaches all three.
   ============================================================ */
.fx-brand-x {
    color: #d10054;
}


/* ============================================================
   The Suggestions panel's header: title and controls on one line
   ============================================================

   VERTICAL centring, not horizontal. The first attempt set `text-align: center` on the
   title, which centred the words across the row and left them sitting higher than the
   tag/refresh/arrow controls beside them -- the text appeared to float up. What was wanted
   was the two sides aligned with each other on the same baseline.

   `align-items: center` on the header does that: the title and the control group are the
   two flex children, and this makes them share a centre line whatever their heights.

   The title keeps its natural width and its left position; nothing about the horizontal
   arrangement changes.

   IN THIS FILE, not app.css, even though the panel is not part of the header. app.css goes
   through the Minify bundle; this file is linked directly with its own ?v= stamp (2330),
   which is the difference between rules that reliably arrive and rules that sometimes do
   not. Worth revisiting once the bundle is understood.
   ============================================================ */
.suggestions-header,
.suggestions-box .suggestions-header {
    align-items: center !important;
}


/* ============================================================
   A gap between the header and the Suggestions panel
   ============================================================

   The right column is sticky at `top: 60px` -- flush against the 60px header, with nothing
   between them, so the panel's top edge touched the header's bottom border.

   Both numbers move together: the sticky offset decides where the column parks when it
   sticks, and the padding decides where its content sits before it does. Changing only one
   makes the gap appear or disappear as the page scrolls.

   !important because the rules being adjusted are themselves !important, in
   liquid-sidebar.css.
   ============================================================ */
@media (min-width: 768px) {
    .fx-layout-content .row > .suggestions-wrapper,
    .suggestions-wrapper.min-vh-100 {
        top: 66px !important;
        padding-top: 6px !important;
        /*
         * max-height follows the offset. The original is calc(100vh - 60px), matched to a
         * 60px top; leaving it there while the column parks 6px lower would let the panel
         * run 6px past the bottom of the viewport once it is tall enough to scroll.
         */
        max-height: calc(100vh - 66px) !important;
    }
}


/* ============================================================
   MOBILE: the post header's name row
   ============================================================

   On a phone the creator's name, verified tick, any badge (Reel, Pending, Expiring) and the
   timestamp were overlapping: the name column is capped at `max-width: 150px` while the
   badges on the right have no limit at all, so on a narrow screen the right-hand group took
   the space it wanted and the left was squeezed under it.

   Three changes, all scoped to the header row so nothing else in the post is touched:

     - the name column takes the free space instead of a fixed 150px, and is allowed to
       shrink (min-width: 0 -- a flex item defaults to min-width: auto and will not shrink
       below its content, which is what forced the overlap);

     - the badge group refuses to shrink and wraps instead, so a long badge pushes itself
       onto its own line rather than into the name;

     - the badges' right padding drops from pr-3 (1rem) to something a phone can afford.

   Desktop is unchanged: there is room for all of it at 768px and above.
   ============================================================ */
@media (max-width: 767.98px) {
    .post-box .post-details > .d-flex.justify-content-between {
        align-items: flex-start;
        gap: 8px;
    }

    /* The name + username column. */
    .post-box .post-details > .d-flex.justify-content-between > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .post-box .post-details .max-width-150 {
        max-width: 100% !important;
    }

    /*
     * The badge group. The timestamp has moved to the username line below (see
     * post-box.blade.php), so this holds only badges and the 3-dot menu and needs far less
     * room than the 55% the first version gave it.
     */
    .post-box .post-details > .d-flex.justify-content-between > .d-flex {
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        max-width: 45%;
    }



    .post-box .post-details > .d-flex.justify-content-between > .d-flex .pr-3 {
        padding-right: 0 !important;
    }

    /* Badges themselves: never wider than the room they have. */
    .post-box .post-details .badge {
        white-space: nowrap;
        font-size: .68rem;
    }
}


/* ============================================================
   The post header's username line: handle + timestamp
   ============================================================

   The timestamp sits beside the @username at every width now, the way Facebook does it
   (post-box.blade.php). These rules are deliberately NOT inside a media query: there is one
   copy of the timestamp in the markup and it shows on every screen.

   The username truncates, the timestamp does not -- a shortened handle is still useful,
   "5d ag..." is not. `min-width: 0` is what permits the truncation: a flex item defaults to
   `min-width: auto` and will not shrink below its content.
   ============================================================ */
.post-box .fx-post-userline {
    min-width: 0;
}

.post-box .fx-post-userline > a:first-child {
    min-width: 0;
    flex: 0 1 auto;
}

.post-box .fx-post-time-inline {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .78rem;
}


/* ============================================================
   MOBILE: the reel card's header
   ============================================================

   post-reel-box builds its header differently from post-box: there, `.post-details` holds
   the name and handle and the Reel badge sits in a separate flex beside it, so the rules
   written for `.post-details > .d-flex.justify-content-between` (update 2335) do not match
   here at all.

   Same problem, same shape of fix: let the name side take the free space and shrink, cap
   the badge side so it cannot crowd it.
   ============================================================ */
@media (max-width: 767.98px) {
    /* The row holding avatar + details, and the row holding badge + menu. */
    .post-box.post-reel-single-card .post-header > .d-flex {
        gap: 8px;
    }

    .post-box.post-reel-single-card .post-header > .d-flex > .d-flex:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .post-box.post-reel-single-card .post-details {
        min-width: 0;
    }

    .post-box.post-reel-single-card .post-details .max-width-150 {
        max-width: 100% !important;
    }

    /* Badge + 3-dot menu: never more than their share. */
    .post-box.post-reel-single-card .post-header > .d-flex > .d-flex:last-child {
        flex: 0 0 auto;
        max-width: 40%;
    }

    .post-box.post-reel-single-card .post-header .badge {
        white-space: nowrap;
        font-size: .68rem;
    }
}

/* ============================================================
   Wallet pill inside the TOP HEADER only.

   liquid-sidebar.css sets .fx-wallet-btn to a fixed 40px height for the sidebar's own
   pill. In the header the card is 36px, so that 40px made the pill taller than the icons
   next to it. Scoped to .fx-top-header so the sidebar pill keeps the height it was given.
   ============================================================ */
.fx-top-header .fx-wallet-btn {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 2px !important;
}



/* Desktop Landing Header: Standard 64px professional height & perfect vertical alignment */
@media (min-width: 992px) {
    .navbar.app-navbar-home,
    .navbar.app-navbar-home.sticky-nav,
    .navbar.app-navbar-home.app-navbar-top,
    .navbar.app-navbar-home.app-navbar-scrolled {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: -64px !important;
    }
    body.is-home-page .fx-ad-slot--landing-top {
        margin-top: 64px !important;
    }
    .app-navbar-home .app-navbar-inner {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .app-navbar-home .navbar-brand {
        display: inline-flex !important;
        align-items: center !important;
        height: 64px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
    .app-navbar-home .navbar-brand img {
        max-height: 36px !important;
        height: auto !important;
        width: auto !important;
        vertical-align: middle !important;
        margin: 0 !important;
    }
    .app-navbar-home .navbar-collapse {
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .app-navbar-home .app-navbar-guest-links,
    .app-navbar-home .app-navbar-auth-links {
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        gap: 16px !important;
    }
    .app-navbar-home .app-navbar-guest-links .nav-item,
    .app-navbar-home .app-navbar-auth-links .nav-item {
        display: flex !important;
        align-items: center !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .app-navbar-home .app-navbar-guest-links .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        line-height: 38px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #16151a !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }
    .app-navbar-home .app-navbar-guest-links .nav-link:hover {
        color: #e51d54 !important;
        background-color: rgba(229, 29, 84, 0.06) !important;
    }
    .app-navbar-home .app-navbar-guest-links .btn,
    .app-navbar-home .app-navbar-guest-links .btn.btn-round {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        line-height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 22px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        box-shadow: 0 2px 8px rgba(229, 29, 84, 0.28) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }
    .app-navbar-home .app-navbar-guest-links .btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(229, 29, 84, 0.38) !important;
    }
    body.fx-theme-dark .app-navbar-home .app-navbar-guest-links .nav-link,
    .navbar-dark.app-navbar-home .app-navbar-guest-links .nav-link {
        color: #e4e6eb !important;
    }
    body.fx-theme-dark .app-navbar-home .app-navbar-guest-links .nav-link:hover,
    .navbar-dark.app-navbar-home .app-navbar-guest-links .nav-link:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
    .app-navbar-home .app-navbar-auth-links .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 12px !important;
        margin: 0 !important;
    }
    .app-navbar-home .app-navbar-auth-links .navbar-user-dropdown {
        display: flex !important;
        align-items: center !important;
        height: 64px !important;
    }
    .app-navbar-home .navbar-user-avatar {
        width: 36px !important;
        height: 36px !important;
        object-fit: cover !important;
    }
}

/* VVIP Fans Universal Logo Styling */
.rf-navbar-brand-logo {
    max-height: 36px !important;
    width: auto !important;
    vertical-align: middle !important;
    display: block !important;
}
@media (max-width: 991.98px) {
    .rf-navbar-brand-logo {
        max-height: 36px !important;
    }
}
.mobile-brand-header .rf-mob-brand-logo {
    max-height: 36px !important;
    width: auto !important;
    display: block !important;
}
.fx-top-header .rf-desktop-th-logo {
    max-height: 42px !important;
    width: auto !important;
    display: block !important;
}

/* VVIP Fans Icon State & Dark/Light Mode Adaptability */
.bookmark-btn-feed .rf-bm-active { display: none !important; }
.bookmark-btn-feed .rf-bm-idle { display: inline-flex !important; }
.bookmark-btn-feed.active .rf-bm-active { display: inline-flex !important; }
.bookmark-btn-feed.active .rf-bm-idle { display: none !important; }

/* Ensure icons inherit proper theme colors */
.bookmark-btn-feed .rf-bm-active svg,
.bookmark-btn-feed.active svg {
    color: var(--primary, #f70194) !important;
    fill: currentColor !important;
}