body {
    font-family: 'Open Sans', sans-serif;
    min-height: 100%!important;
}
/* Top Navbar Menu */
.navbar{
    /*padding:1rem;*/
    font-size: 1.05rem;
}

.navbar-brand img{
    max-width: 180px;
    max-height: 42px;
}

/* In case we want extra/smaller padding for the logo*/
/*.navbar-brand{*/
/*    padding-top:.2rem;*/
/*    padding-bottom:.2rem;*/
/*}*/

.error-container{
    min-width: 350px;
}

.button-search {
    color: #DDD;
    background: none;
    position: absolute;
    right: 0;
    cursor: pointer;
    outline: none;
    border: none;
}

.home-user-avatar{
    width: 32px;
    height: 32px;
    margin-left:0.5rem;
}

/* Login Register pages  */
.login,
.image {
    min-height: 100vh
}

.bg-image {
    background-size: cover;
    background-position: center center
}

.brand-logo{
    width: 200px;
}

.rounded-lg{
    border-radius: 0.4rem!important;
}

.hidden{
    display: none!important;
}

.table-hover-primary-soft .table-hover-item {
    transition: background-color .12s ease, color .12s ease;
}

/* Dropzone preview boxes + other general fixes */
.audio-preview-item {
    padding-right: 36px;
}

.video-preview-item{
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    width: 240px;
    height: 240px;
    background: linear-gradient(145deg, #f4f6f8, #e8edf2);
}

.video-preview-item .video-preview {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    z-index: 10;
    /* Show the whole frame (no cropping of heads/edges) instead of filling. */
    object-fit: contain;
    background: #000;
}

.video-preview-item [data-dz-name],
.video-preview-item [data-dz-size] {
    display: none;
}

.video-preview-item.is-encoding .video-preview {
    filter: saturate(0.85) brightness(0.82);
}

.dz-preview.is-video-processing .dz-progress {
    display: none;
}

.video-encoding-overlay {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: calc(100% - 20px);
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    background: rgba(18, 22, 28, 0.78);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
    backdrop-filter: none;
}

.video-encoding-overlay .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12em;
}

.video-encoding-overlay span:not(.sr-only) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-preview-placeholder {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    color: #505965;
    background: linear-gradient(145deg, #f8fafc, #e8edf2);
}

.video-preview-placeholder-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 50%;
    color: #303640;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(30, 38, 48, 0.12);
}

.video-preview-placeholder-icon ion-icon {
    font-size: 1.65rem;
}

.video-preview-placeholder-title {
    max-width: 180px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #303640;
}

.video-preview-placeholder-subtitle {
    max-width: 190px;
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #727c89;
}

.dropzone-previews.dropzone {
    background: none!important;
}

.dropzone .dz-preview {
    position: relative;
}

.dropzone .dz-preview .dz-remove {
    align-items: center!important;
    background: rgba(0, 0, 0, .56)!important;
    border-radius: 999px!important;
    color: transparent!important;
    display: flex!important;
    font-size: 0!important;
    height: 24px!important;
    justify-content: center!important;
    line-height: 1!important;
    opacity: .88;
    overflow: hidden!important;
    position: absolute!important;
    right: 6px!important;
    text-decoration: none!important;
    text-indent: -999px!important;
    top: 6px!important;
    transition: opacity .16s ease, background-color .16s ease;
    width: 24px!important;
    z-index: 20;
}

.dropzone .dz-preview:hover .dz-remove,
.dropzone .dz-preview:focus-within .dz-remove {
    opacity: 1;
}

.dropzone .dz-preview .dz-remove::before {
    color: #fff;
    content: "\00d7";
    font-size: 18px;
    left: 50%;
    line-height: 1;
    position: absolute;
    text-indent: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dropzone .dz-preview .dz-remove:hover,
.dropzone .dz-preview .dz-remove:focus {
    background: var(--primary, #d10054)!important;
}

.sticky {
    position: sticky;
    top: 1.5rem;
}

.sticky-sm{
    position: sticky;
    top:1rem;
}

.min-h-75{
    min-height: 75%;
}

.sticky-profile-widgets {
    position: sticky;
    top: 1rem;
}

.sticky-widgets {
    position: sticky!important;
    padding-top: .5rem!important;
}

.pointer-cursor{
    cursor:pointer;
}

.avatar-placeholder i{
    font-size: 2.8rem;
}

.avatar-placeholder i:hover{
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-menu .icon-wrapper{
    width: 2.6rem;
}
.side-menu .nav{
    flex-wrap:nowrap;
}

.side-menu .nav-item i{
    font-size: 2.0rem!important;
}

.side-menu .user-avatar, .sidebar .user-avatar{
    width: 50px;
    height: 50px;
}

/* Toasts */
.toast-container {
    position: fixed;
    z-index: 1055;
    margin: .5rem!important;
}

.top-right {
    top: 0;
    right: 0
}

.top-left {
    top: 0;
    left: 0
}

.top-center {
    transform: translateX(-50%);
    top: 0;
    left: 50%
}

.bottom-right {
    right: 0;
    bottom: 0
}

.bottom-left {
    left: 0;
    bottom: 0
}

.bottom-center {
    transform: translateX(-50%);
    bottom: 0;
    left: 50%
}

.toast-container>.toast {
    min-width: 200px;
    max-width: 300px;
}

.toast .toast-indicator{
    width:20px;
    height:20px;
}

/* Feed component */
.half-bg {
    background-color: rgba(0,0,0,.45);
}

.post-box .avatar{
    width:48px;
    height: 48px;
}

.post-box .post-content-data p{
    margin-bottom: 0px;
}

.post-details .dropdown .dropdown-toggle:after,.post-details .dropdown .dropdown-toggle:before{
    display: none;
}

.post-box .post-count-details{
    font-size: 15px;
}

.dropdown .dropdown-toggle:after, .dropdown .dropdown-toggle:before{
    display: none;
}

.post-box .post-comments .form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none!important;
}

.suggestions-header i{
    cursor: pointer;
}

.dropdown:not(.dropdown-hover) .dropdown-menu {
    margin-top: 0px!important;
}

/* Dropdown open animation (desktop): show the menu with the material tilt-in transform. */
@media (min-width: 992px) {
    .dropdown.dropdown-hover:hover > .dropdown-menu,
    .dropdown .dropdown-menu.show {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 50px, 5px) !important;
    }
}

/* Mobile/tablet: open dropdowns in place (no downward tilt offset). */
@media (max-width: 1199.98px) {
    .dropdown:not(.nav-item) .dropdown-menu.show {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 0px, 0px) !important;
    }
}

.pswp_video{
    position: relative!important;
}
.pswp_audio{
    position: relative!important;
    width:75%!important;
    height:100px!important;
}

.pswp--zoom-allowed .pswp__img {
    cursor: default !important
}


/* Menu */
.open-menu{
    text-decoration: none!important;
}

.dropleft .dropdown-menu {
    top: 0!important;
    right: 0%!important;
    left: auto!important;
    margin-top: 0!important;
    margin-right: 0!important;
}

.dropright .dropdown-menu {
    top: 0!important;
    right: auto!important;
    left: 0%!important;
    margin-top: 0!important;
    margin-left: 0!important;
}


/* Icons wrapper for backend SVGs includes */
.ion-icon-wrapper{
    display: inline-block;
    width: 1em;
    height: 1em;
    contain: strict;
    fill: currentcolor;
    box-sizing: content-box !important;
}

.input-group-prepend .ion-icon-wrapper{
    width: 20px!important;
    height: 20px!important;
}

.ion-icon-inner, .ion-icon-inner svg{
    display: block;
    height: 100%;
    width: 100%;
}

.icon-large{
    font-size: 32px;
}

.icon-xlarge{
    font-size: 50px;
}

.icon-medium{
    font-size: 24px;
}

.icon-mediumish{
    font-size: 20px;
}

.icon-small{
    font-size: 18px;
}

.icon-xsmall{
    font-size: 11px;
}

.social-media-icon{
    width: 1.4rem;
    height: 1.4rem
}

/* Global nav override */
.page-item, .page-link{
    margin-left:4px;
    width:34px;
    height:34px;
    border-radius: 50%!important;
    text-align: center;
}

.btn-rounded-icon{
    width: 35px!important;
    height: 35px!important;
    padding:0;
    transition: 0.3s;
    border: none!important;
    border-radius: 50%;
    font-size: 20px;
    margin:0;
}

#login-dialog .card-wrapper{
    height: 100%;
}

/* User cards */
.suggestion-header-bg {
    background-color: #50505047;
    background-position: center center!important;
    background-size: cover!important;
    height:128px!important;
    /*border-radius: 1.25rem!important;*/
}

.creator-body{
    margin-top:-50px;
}

.creator-body .avatar{
    width: 100px;
    height: 100px;
}

.suggestion-card-btn{
    width: 30px;
    height: 30px;
}

/*  */

.installer-bg{
    background-color: #f8f9fa;
}


/* */

.checkout-dialog .rounded-circle.user-avatar{
    width:50px;
    height:50px;
}

/*  */

footer .copyRightInfo .d-flex.flex-row.nav{
    margin-left:-1rem;
}

footer .copyRightInfo .nav-link:nth-child(1){
    padding-left:0px!important;
}

footer .text-lg{
    font-size: 1.1rem!important;
}

footer .brand-logo{
    max-width: 180px;
    max-height: 60px;
}

/* Profile / Posts widget */
.recent-media .card-body img{
    width:75px!important;
    height:75px!important;
}

.dropdown:not(.nav-item) .dropdown-menu:before {
    content: none!important;
}


.grayscale {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(95%); /* Chrome 19+ & Safari 6+ */
}

.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

.contact-illustration{
    display:block;
    width: 450px;
    height:auto;
}

.posts-loading-indicator .spinner-border{
    width:2rem;
    height: 2rem;
}

.page-content-wrapper p{
    margin-bottom:.5rem;
}

.page-content-wrapper li p{
    margin:.4rem;
}

.page-content-wrapper h3{
    margin-top:1.5rem;
    margin-bottom: 0.5rem;

}

.page-content-wrapper h4{
    margin-bottom:1rem!important;
}

.min-vh-65{
    min-height: 65vh;
}

.page-link{
    display: flex;
    justify-content: center;
    align-items: center;
}

.w-16{
    width: 16px;
    height: 16px;
}

.w-24{
    width:24px;
    height:24px;
}

.w-32{
    width:32px;
    height:32px;
}

.w-40{
    width:40px;
    height:40px;
}

.text-bold-600{
    font-weight: 600;
}

.blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 8px;
    height: 6px;
    width: 6px;
    transform: scale(1);
    animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.blob.red {
    background: rgba(234, 6, 5, 1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(234, 6, 5, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(234, 6, 5, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(234, 6, 5, 0);
    }
}


.text-orange{
    color:#FD7E14;
}


/* Streams CSS */
.stream-cover, .stream-cover-public{
    max-height: 40px;
    max-width: 150px;
    height:40px;
    width: 80px
}

.stream-chat-no-message{
    height: 300px;
}

.grecaptcha-badge{
    z-index: 100;
}

.captcha-field .text-danger{
    font-size: .875em;
}

.blurred{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

/* Laravel-Bootstrap mobile navigation hack for larger pagination numbers */
@media screen and ( max-width: 400px ){
    li.page-item {

        display: none;
    }
    .page-item:first-child,
    .page-item:nth-child( 2 ),
    .page-item:nth-last-child( 2 ),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {
        display: block;
    }
}

.pagination-compact-wrapper{
    display:flex;
    justify-content:flex-end;
    width:100%;
    min-height:2.9rem;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    box-sizing:border-box;
    align-items:center;
}

.pagination.pagination-compact{
    align-items:center;
    gap:.35rem;
    flex-wrap:nowrap;
    white-space:nowrap;
    margin-left:auto;
    padding-right:.15rem;
}

.pagination.pagination-compact .page-item{
    display:block;
    flex:0 0 auto;
}

.pagination.pagination-compact .page-link{
    min-width:2.25rem;
    height:2.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:.35rem .75rem;
    font-weight:600;
    line-height:1;
    box-sizing:border-box;
}

.pagination.pagination-compact .pagination-status .page-link{
    min-width:4.75rem;
    border-style:dashed;
}

.pagination.pagination-compact .pagination-gap .page-link{
    min-width:2rem;
    border-style:none;
    background:transparent;
}

.max-width-150{
    max-width: 150px;
}

.n-mt-2{
    margin-top:-2rem;
}

.widgets-footer-link{
    font-size: 15px;
}

.widgets-footer .widgets-footer-link:not(:last-child):after {
    content: "\2022";
    margin-left: 15px;
    font-size: 12px;
    display: inline-flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    color: #8a96a3;
}

.swiper-pagination-wrapper{
    margin-top: .7rem;
}

.feed-widgets .swiper-pagination, .search-widgets .swiper-pagination{
    position: relative;
}

.global-announcement-banner{
    border-radius: 0!important;
}

.global-announcement-banner .alert-dismissible .close{
    padding: 0em .3em;
}

.global-announcement-banner .content p{
    margin-bottom: 0px!important;
}

/* This re-centers the text despite the extra right padding */
.global-announcement-banner .announcement-body {
    max-width: calc(100% - 3rem);
    margin: 0 auto;
}

.global-announcement-banner .content{
    color: #fff;
}

.global-announcement-banner.alert-dismissible {
    /*position: relative;*/
}

.global-announcement-banner.alert-dismissible .close {
    color: #fff;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    z-index: 2;
}

.no-long-press {
    /* Disable text selection */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ */

    /* Disable image saving and callout menu on iOS */
    -webkit-touch-callout: none; /* Disable callout menu */
    -webkit-user-drag: none;     /* Disable image dragging */

    /* Allow touch actions like swipe and scroll */
    touch-action: manipulation; /* Prevent double-tap zoom, allow pan and pinch-zoom */
}

.fs-point-85{
   font-size:.83rem;
}

.bottom-0{
    bottom:0;
}
.poll-bar {
    width: 0;
    transition: width 0.8s ease-in-out;
    left: 1%;
    right: 0%;
    top: 10%;
    height: 80%;
    width: 0%;
    border-radius: .25rem
}

.fs-point-75{
    font-size:.75rem;
}

/* CookieConsent small spacing tweaks */
#cc-main .cc-intro {
    margin: 0 0 .75rem 0;
}

#cc-main .cc-moreinfo {
    all: revert;
    margin-bottom: 0.5rem;
    margin-top: 0px;
}

#cc-main .cc-links {
    margin: 0;
    padding-left: 1.2rem;
}

#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper {
    margin-top: .95em;
}

/*a.hashtag { font-weight: 600; }*/
/*a.mention { font-weight: 600; }*/

.collapse:not(.show) {
    margin-top: 10px;
    display: none;
}

/* Suggestion boxes */
.suggestion-box{
    background-color: #FFF!important;
    padding: 0 !important;
    border-top: 1px solid #dee2e6;
}

.suggestion-box .avatar{
    width: 90px;
    height: 90px;
    border: 2px solid #fefefe;
}
/* Desktop: hover reveal */
.suggestion-box .suggestion-card-btn{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}
.suggestion-box:hover .suggestion-card-btn,
.suggestion-box:focus-within .suggestion-card-btn{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile/touch: always show */
@media (hover: none) and (pointer: coarse){
    .suggestion-box .suggestion-card-btn{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* default: keep nav hidden until we know the offset */
:root {
    --ga-h: 0px; /* default: no announcement */
}

/* Only hidden while JS is calculating offset */
html.ga-pending .sticky-nav {
    visibility: hidden;
}

/* Global Announcement */
.sticky-info-bar {
    position: sticky;
    top: 0;
    z-index: 1040; /* above navbar */
}

/* Navbar */
.sticky-nav {
    position: sticky;
    top: var(--ga-h);!important;
    z-index: 1030;
}


.app-navbar {
    min-height: 91px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease;
}

.app-navbar .nav-link,
.app-navbar .navbar-brand,
.app-navbar .btn {
    transition: color 0.24s ease, opacity 0.24s ease;
}

.app-navbar-home {
    z-index: 1030;
    margin-bottom: -91px;
}

.app-navbar-inner {
    transition: min-height 0.24s ease;
}

.app-navbar-home.app-navbar-top {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app-navbar-home.app-navbar-top.navbar-light {
    background: transparent;
    border-bottom-color: transparent;
}

.app-navbar-home.app-navbar-scrolled.navbar-light,
html.home-navbar-scrolled .app-navbar-home.navbar-light {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(20, 19, 43, 0.10);
    box-shadow: 0 0.125rem 0.25rem rgba(20, 19, 43, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app-navbar-home.app-navbar-scrolled.navbar-light {
    background: rgba(255, 255, 255, 0.88);
}

.app-navbar-home .nav-link {
    font-weight: 600;
}

.app-navbar-home .btn.btn-round {
    box-shadow: none;
}


.sticky-nav.navbar-dark.bg-dark {
    background-color: #2f2f31 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.18) !important;
}


@media (max-width: 767.98px) {
    .app-navbar {
        min-height: 56px;
    }

    .app-navbar-home {
        margin-bottom: -78px;
    }

    .app-navbar-home.app-navbar-top.navbar-light {
        background: transparent;
    }

    .app-navbar-home.app-navbar-scrolled.navbar-light,
    html.home-navbar-scrolled .app-navbar-home.navbar-light {
        background: rgba(255, 255, 255, 0.94);
    }

    .sticky-nav .mobile-user-menu {
        position: absolute;
        top: calc(100% - 0.95rem);
        right: 0.45rem;
        z-index: 1040;
        width: min(13.9rem, calc(100vw - 0.9rem));
    }

    .sticky-nav .mobile-user-menu-panel {
        display: block;
        position: static !important;
        float: none;
        width: 100%;
        min-width: 0;
        margin-top: 0 !important;
        transform: none !important;
        inset: auto !important;
    }

    .sticky-nav .mobile-user-menu[hidden] {
        display: none !important;
    }

    .sticky-nav.mobile-user-menu-open .navbar-toggler {
        background: rgba(20, 19, 43, 0.06);
    }

    .sticky-nav.mobile-user-menu-open.navbar-dark .navbar-toggler {
        background: rgba(255, 255, 255, 0.08);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .app-navbar-home .mobile-user-menu {
        position: absolute;
        top: calc(100% - 0.95rem);
        left: 0.45rem;
        right: auto;
        z-index: 1040;
        width: min(13.9rem, calc(100vw - 0.9rem));
    }

    .app-navbar-home .mobile-user-menu-panel {
        display: block;
        position: static !important;
        float: none;
        width: 100%;
        min-width: 0;
        margin-top: 0 !important;
        transform: none !important;
        inset: auto !important;
    }

    .app-navbar-home .mobile-user-menu[hidden] {
        display: none !important;
    }

    .app-navbar-home .mobile-user-menu .navbar-user-menu {
        min-width: 12.75rem;
        margin-top: 0 !important;
        border-radius: 1rem;
    }

    .app-navbar-home.mobile-user-menu-open .navbar-toggler {
        background: rgba(20, 19, 43, 0.06);
    }

    .app-navbar-home.mobile-user-menu-open.navbar-dark .navbar-toggler {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Navbar user menu */
.sticky-nav .navbar-user-toggle {
    gap: 0.625rem;
    min-height: 2.75rem;
    border-radius: 999px;
    padding: 0.45rem 0.35rem;
    padding-inline-start: 0.7rem;
}

.sticky-nav .navbar-user-toggle:hover,
.sticky-nav .navbar-user-toggle:focus,
.sticky-nav .navbar-user-dropdown.show .navbar-user-toggle {
    background: transparent;
}

.sticky-nav .navbar-user-name {
    margin-inline: 0;
    font-weight: 600;
    line-height: 1.2;
}

.sticky-nav .navbar-user-avatar {
    margin-inline: 0;
}

.sticky-nav .navbar-user-menu {
    min-width: 12rem;
    margin-top: 0.65rem !important;
    padding: 0.35rem;
    border-radius: 1.1rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (min-width: 768px) {
    .sticky-nav .navbar-user-dropdown .dropdown-menu {
        margin-top: 13px !important;
    }
}

.sticky-nav .navbar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    padding: 0.58rem 0.72rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sticky-nav .navbar-user-menu .dropdown-item .ion-icon-wrapper,
.sticky-nav .navbar-user-menu .dropdown-item svg {
    flex-shrink: 0;
    color: inherit !important;
    opacity: 0.8;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.sticky-nav .navbar-user-menu .dropdown-item:hover .ion-icon-wrapper,
.sticky-nav .navbar-user-menu .dropdown-item:focus .ion-icon-wrapper,
.sticky-nav .navbar-user-menu .dropdown-item:hover svg,
.sticky-nav .navbar-user-menu .dropdown-item:focus svg,
.sticky-nav .navbar-user-menu .dropdown-item.active .ion-icon-wrapper,
.sticky-nav .navbar-user-menu .dropdown-item.active svg {
    opacity: 1;
}

.sticky-nav .navbar-user-menu .dropdown-divider {
    margin: 0.45rem 0;
}

@media (max-width: 767.98px) {
    .sticky-nav .navbar-user-menu {
        min-width: 12.75rem;
        margin-top: 0.5rem !important;
        border-radius: 1rem;
    }
}

.mobile-bottom-nav .mobile-create-group {
    position: relative;
}

.mobile-bottom-nav .mobile-create-toggle {
    background: transparent;
    border: 0;
    line-height: inherit;
}

.mobile-bottom-nav .mobile-create-toggle::after {
    display: none;
}

.mobile-bottom-nav .mobile-create-dropdown {
    border-radius: 18px;
    bottom: 100% !important;
    box-shadow: 0 -1rem 2.5rem rgba(20, 19, 43, .16), 0 -.35rem 1rem rgba(20, 19, 43, .08);
    left: 50% !important;
    min-width: 12rem;
    overflow: hidden;
    padding: .45rem;
    right: auto !important;
    top: auto !important;
    transform: translate3d(-50%, 1rem, 0) !important;
}

.mobile-bottom-nav .mobile-create-dropdown .dropdown-item {
    border-radius: 14px;
    font-size: .875rem;
    font-weight: 600;
    gap: .7rem;
    margin: .1rem 0;
    padding: .6rem .65rem;
    transition: background-color .16s ease, color .16s ease;
}

.mobile-bottom-nav .side-menu-create-option-icon {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.mobile-bottom-nav .side-menu-create-option-label {
    line-height: 1.2;
}




.app-navbar-home.app-navbar-top.navbar-dark {
    background: transparent;
    border-bottom-color: transparent;
}

.app-navbar-home.app-navbar-scrolled.navbar-dark,
html.home-navbar-scrolled .app-navbar-home.navbar-dark {
    background: rgba(14, 15, 21, 0.86);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.24);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app-navbar-home.app-navbar-scrolled.navbar-dark {
    background: rgba(14, 15, 21, 0.86);
}

@media (max-width: 767.98px) {
    .app-navbar-home.app-navbar-top.navbar-dark {
        background: transparent;
    }

    .app-navbar-home.app-navbar-scrolled.navbar-dark,
    html.home-navbar-scrolled .app-navbar-home.navbar-dark {
        background: rgba(14, 15, 21, 0.92);
    }
}



/* PWA BAnner */


.pwa-install-prompt {
    position: fixed;
    left: 14px;
    right: 14px;
    /* 60px, not 14px: the mobile bottom nav is fixed at the foot of the screen and 14px
       put this banner underneath it. */
    bottom: 60px;
    z-index: 1080;
    max-width: calc(100vw - 28px);
    padding: 10px !important;
}

.pwa-install-prompt__icon {
    width: 50px;
    height: 50px;
    object-fit: cover;
    display: block;
}

.pwa-install-prompt__close {
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (min-width: 768px) {
    .pwa-install-prompt {
        left: auto;
        right: 20px;
        bottom: 20px;
        width: 400px;
    }
}

.custom-info-alert p {
    margin-bottom: 0;
}

/* Age verification */
.age-check-shell {
    align-items: center;
    display: flex;
    min-height: calc(100vh - 120px);
    padding: 56px 0;
}

.age-check-shell > .row {
    width: 100%;
}

.age-check-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    margin: 0 auto;
    max-width: 560px;
    overflow: hidden;
}

.age-check-card .brand-logo {
    max-height: 74px;
    max-width: 230px;
}

.age-check-badge {
    align-items: center;
    background: rgba(248, 249, 250, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 999px;
    color: #6c757d;
    display: inline-flex;
    font-size: 12px;
    justify-content: center;
    line-height: 1;
    padding: 8px 12px;
}

.age-check-actions .btn {
    min-height: 44px;
    white-space: normal;
}

.age-check-copy {
    margin-left: auto;
    margin-right: auto;
    max-width: 410px;
}

@media (max-width: 575.98px) {
    .age-check-shell {
        min-height: calc(100vh - 96px);
        padding: 24px 0;
    }
}

/* ===== FansXpress custom: Facebook-style post media + themed video player ===== */
.post-media .fx-media {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Unchanged from 468: the box is capped by the admin height (image cover-fills
       it). Videos size themselves inside via their own rules below. */
    max-height: var(--fx-max-h, 550px);
    background: #101014;
}

/* Only TALL VIDEO gets a fixed 4:5 frame (cropped). The class is added by JS for
   videos taller than 4:5; images are never tagged, so they keep the 468 cover. */
.post-media .fx-media.fx-media--tall {
    aspect-ratio: 4 / 5;
    max-height: none;
}

/* When the admin sets a fixed post height, pin the media box to exactly that
   height (single posts AND the swiper — the .fx-media--fixed class is added by
   post-box-media-wrapper only when a fixed height is configured). The image fills
   it (cover); the video is centered at its natural size within it. */
.post-media .fx-media.fx-media--fixed {
    /* Disabled on request -- re-enable both lines together if the admin fixed-height
       behaviour is wanted back. The .fx-media--fixed class is still added by
       post-box-media-wrapper, and the --fx-max-h variable is still set, so uncommenting
       these two lines is all that is needed. */
    /* height: var(--fx-max-h, 550px) !important; */
    /* max-height: var(--fx-max-h, 550px) !important; */
}

/* A tall VIDEO keeps its 4:5 frame even when an admin fixed height is set — the
   4:5 cap wins over the admin height for tall videos (images still use the admin
   height above). */
.post-media .fx-media.fx-media--fixed.fx-media--tall {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    /* Cap the 4:5 frame at the admin post height so a tall video does not grow huge.
       The 4:5 aspect keeps the shape; the admin height limits how big it gets. */
    max-height: var(--fx-max-h, 550px) !important;
}

.post-media {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.post-media .fx-media-bg {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(20px) saturate(1.15) brightness(.8) !important;
    transform: scale(1.05) !important;
    z-index: 0 !important;
}

.post-media .fx-media-center {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* IMAGE: contain, full width, capped by the admin post height (--fx-max-h),
   blurred sides for tall images — no crop. */
.post-media .fx-media img.fx-media-item {
    position: relative;
    z-index: 1;
    object-fit: contain !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--fx-max-h, 550px) !important;
    display: block;
    margin: 0 auto;
}

/* VIDEO default (box is natural height): shows fully at its own aspect ratio. */
.post-media .fx-media video.fx-media-item {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* Tall VIDEO only (>4:5): the box is a fixed 4:5 frame and the video fills it,
   cropped (Facebook-style). Images are NOT capped — they keep the cover rule above. */
.post-media .fx-media.fx-media--tall video.fx-media-item {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.post-media .fx-media-gallery {
    height: 100%;
}

.post-media .fx-media-gallery img.fx-media-item,
.post-media .fx-media-gallery video.fx-media-item {
    max-height: 100%;
}

/* ---- Mobile: media edge-to-edge, no side white/dark gaps ----
   The ~2px left/right strip was a small horizontal margin on <body> (user
   verified: `body { margin: 0 -2px }` removes it). We nudge the body 2px each
   side on phones so the page (and thus the media) reaches the true screen edges.
   The media still fills the full width. */
@media (max-width: 767.98px) {
    body {
        margin: 0 -2px !important;
    }
    .post-media .fx-media {
        border-radius: 0 !important;
    }
    .post-media .fx-media video.fx-media-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* MOBILE video sizing (per user): show the video at its ORIGINAL ratio by default, and cap
       ONLY genuinely TALL videos (taller than 4:5) to a 4:5 frame. So short/landscape/square
       clips keep their real shape, and only tall portrait clips are cropped to 4:5.
       .fx-media--tall is added by JS (FxPlayer) from the real dimensions (h/w > 1.25).
       Only .fx-player (video) — images keep their own contain behaviour. */
    .post-media .fx-media.fx-player {
        aspect-ratio: auto;
    }
    .post-media .fx-media.fx-player video.fx-media-item {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    /* Confirmed TALL video (> 4:5) -> pin the box to 4:5 and fill it (crop). */
    .post-media .fx-media.fx-player.fx-media--tall:not(.fx-media--wide) {
        aspect-ratio: 4 / 5;
        max-height: none;
    }
    .post-media .fx-media.fx-player.fx-media--tall:not(.fx-media--wide) video.fx-media-item {
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (min-width: 768px) {
    /* When a fixed admin height is configured, the image fills the box; the video
       keeps its natural size (just capped), so it's never stretched. */
    .post-media .fx-media.fx-media--fixed img.fx-media-item {
        width: 100% !important;
        height: 100% !important;
        max-height: var(--fx-max-h, 550px) !important;
    }

    /* DESKTOP: no 4:5 cover crop for tall videos. The desktop feed column is wide,
       so a 4:5 crop looks bad. A tall video keeps its ORIGINAL ratio exactly like
       the original height-locked-posts.css did: width:100%, natural height, capped by
       the admin post height (no object-fit at all — not cover, not contain). The box
       is not pinned to a fixed height for tall videos; it just gets the max-height, so
       the video sits at its natural size. (The 4:5 crop stays for mobile only.) */
    .post-media .fx-media.fx-media--tall,
    .post-media .fx-media.fx-media--fixed.fx-media--tall {
        height: auto !important;
        aspect-ratio: auto !important;
        max-height: var(--fx-max-h, 550px) !important;
    }
    .post-media .fx-media.fx-media--tall video.fx-media-item {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Centered play button (Facebook-style) */
/* Center controls: skip-back / play / skip-forward, centered over the video. */
.fx-center-controls {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    pointer-events: none;
}
.fx-center-controls > button { pointer-events: auto; }

.fx-seek-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.fx-seek-btn svg { width: 24px; height: 24px; }
.fx-seek-btn .fx-seek-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
/* No colour change on hover -- the button keeps the dark plate it is drawn with. */
/* Skip (5s/10s) buttons show ONLY in fullscreen — never in the feed. In the feed
   only play/pause is revealed on hover/tap. In fullscreen they appear on hover/tap
   (.is-ui-active). And when the clip is under 30s (.fx-no-seek, tagged by the
   player), the skip buttons never show at all, even in fullscreen. */
.fx-seek-btn { opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease; }
.fx-player:fullscreen.is-ui-active .fx-seek-btn { opacity: 1; pointer-events: auto; }
.fx-player:-webkit-full-screen.is-ui-active .fx-seek-btn { opacity: 1; pointer-events: auto; }
.fx-player.fx-no-seek .fx-seek-btn { opacity: 0 !important; pointer-events: none !important; }

.fx-bigplay {
    position: relative;
    z-index: 3;
    width: 64px;
    height: 60px;
    max-height: 60px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, opacity .15s ease;
}

.fx-bigplay ion-icon,
.fx-bigplay svg {
    width: 30px;
    height: 30px;
}
/* play icon nudged right for optical centering; pause stays centered */
.fx-bigplay.is-play svg { margin-left: 3px; }

/* MOBILE: smaller centre play button (50px vs 64px on desktop). */
@media (max-width: 767.98px) {
    .fx-bigplay {
        width: 50px;
        height: 50px;
    }
}

/*
    The centre button does not change colour on hover or tap.

    It used to fill site-pink, which made a play control that reads as part of the site's
    branding rather than as a video control. It keeps the dark plate it is drawn with, in
    every state.
*/
/* The big center button is HIDDEN by default (clean video on scroll autoplay) and
   shows only on hover/tap (.is-ui-active). Exception: a video that has NEVER played
   yet shows it, so the viewer knows it's a video before autoplay kicks in. */
.fx-bigplay {
    opacity: 0;
    pointer-events: none;
}
.fx-player:not(.has-played) .fx-bigplay,
.fx-player.is-ui-active .fx-bigplay {
    opacity: 1;
    pointer-events: auto;
}

/* Themed control bar */
.fx-controls {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    opacity: 0;
    transition: opacity .2s ease;
}

/* The control bar appears AFTER the video has started playing (has-played) and
   only during the "UI active" window (JS-driven, auto-hides after 3s on desktop
   AND mobile). Before first play, no controls — just the big center button. */
.fx-player.has-played.is-ui-active .fx-controls {
    opacity: 1;
}

/* MOBILE: in the normal feed the full control bar (play / seek / CC / PIP / fullscreen)
   is NOT shown at all — only the always-visible quick mute/unmute button remains. The
   full bar appears ONLY in landscape fullscreen. (Portrait fullscreen on a phone still
   hides it; the quick mute + tap still work.) */
@media (max-width: 767.98px) {
    .post-media .fx-media.fx-player .fx-controls {
        display: none !important;
    }
    /* Show the full control bar only when in landscape fullscreen. */
    .fx-player:fullscreen .fx-controls,
    .fx-player:-webkit-full-screen .fx-controls {
        display: none !important;
    }
    @media (orientation: landscape) {
        .fx-player:fullscreen .fx-controls,
        .fx-player:-webkit-full-screen .fx-controls {
            display: flex !important;
        }
    }
}

.fx-btn {
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
}

.fx-btn:hover {
    color: #d10054;
}

/*
    ...except play/pause, which keeps its own colour in every state.

    The rest of the control bar -- mute, settings, CC, picture-in-picture, fullscreen --
    still tints on hover; only the play control is exempt.
*/
.fx-btn.fx-toggle:hover,
.fx-btn.fx-toggle:focus,
.fx-btn.fx-toggle:active {
    color: inherit;
}

.fx-time {
    color: #fff;
    font-size: .75rem;
    white-space: nowrap;
    transition: margin-left .15s ease;
}
/* When the volume slider is open, push the time to the right so the horizontal
   slider pill doesn't cover it (~150px = slider + % width). Driven by the
   JS-managed .is-open class (stays open while hovering the slider); :hover is a
   fallback for browsers without :has(). */
.fx-volume:hover ~ .fx-time,
.fx-volume:has(.fx-volume-pop.is-open) ~ .fx-time {
    margin-left: 118px;
}

.fx-seek {
    flex: 1;
    height: 4px;
    accent-color: #d10054;
    cursor: pointer;
    min-width: 40px;
}

.fx-player:fullscreen {
    max-height: none;
    background: #000;
    width: 100%;
}

/* Fullscreen: show the FULL video at its original ratio (never the feed's 4:5
   crop). High-specificity overrides beat the feed-only .fx-media--tall rules. */
.post-media .fx-media.fx-player:fullscreen,
.fx-player:fullscreen {
    aspect-ratio: auto !important;
}
.post-media .fx-media.fx-player:fullscreen video.fx-media-item,
.post-media .fx-media.fx-media--tall.fx-player:fullscreen video.fx-media-item,
.fx-player:fullscreen video.fx-media-item {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    object-fit: contain !important;
}

/* Fullscreen close (×) — hidden by default, shown ONLY in PORTRAIT fullscreen
   (landscape fullscreen uses the back control instead). Top-right corner. */
.fx-fs-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.fx-fs-close:hover { background: rgba(0, 0, 0, .75); }
.fx-player:fullscreen:not([data-fs-landscape="1"]) .fx-fs-close { display: inline-flex; }
@media (orientation: portrait) {
    .fx-player:fullscreen .fx-fs-close { display: inline-flex; }
}
@media (orientation: landscape) {
    .fx-player:fullscreen .fx-fs-close { display: none; }
}

/* Always-visible quick mute/unmute — MOBILE ONLY, bottom-right on the video, so a
   viewer can toggle sound on an autoplaying feed video without opening the controls.
   Hidden on desktop (the control bar handles volume) and hidden in fullscreen. */
.fx-quickmute {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: none !important;
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
/* No pill background — a soft drop-shadow keeps the icon readable over any video frame. */
.fx-quickmute svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}
@media (max-width: 767.98px) {
    .fx-player .fx-quickmute { display: inline-flex; }
    .fx-player:fullscreen .fx-quickmute { display: none; }
}

/* Landscape "Full-screen" pill (like the reels player). It is NOT shown in the feed.
   It appears ONLY when the viewer is already in (portrait) fullscreen AND the video is
   landscape/square (.fx-media--landscape) — then it sits under the letterboxed video so
   the viewer can rotate to landscape fullscreen. A portrait video never shows it. */
.fx-landscape-pill {
    display: none;
    position: absolute;
    left: 50%;
    top: 60%; /* JS overrides `top` to sit 5px under the video's bottom edge */
    transform: translateX(-50%);
    z-index: 2147483647;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem 1.1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .55) !important;
    color: #ffffff !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    white-space: nowrap;
}
.fx-landscape-pill svg { width: 1rem; height: 1rem; }
/* Only inside fullscreen, only for a landscape/square video. */
.fx-player:fullscreen.fx-media--landscape .fx-landscape-pill { display: inline-flex; }
.fx-player:-webkit-full-screen.fx-media--landscape .fx-landscape-pill { display: inline-flex; }
/* Once rotated to landscape, hide it (the video already fills the screen). */
@media (orientation: landscape) {
    .fx-player:fullscreen .fx-landscape-pill { display: none; }
}

/* Gallery (multi-image/video) slides: same contained + ambient look as single media */
.post-media .fx-media-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.post-media .fx-media-gallery .fx-media-center {
    height: 100%;
    align-items: center;
}

.post-media .fx-media-gallery img.fx-media-item,
.post-media .fx-media-gallery video.fx-media-item {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    margin: 0 auto;
}

/* Fixed-height galleries: media fills the slide height */
.post-media-swiper-fixed-height .fx-media-gallery img.fx-media-item,
.post-media-swiper-fixed-height .fx-media-gallery video.fx-media-item {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Native-height galleries keep their measured height */
.post-media-swiper-native-height .fx-media-gallery img.fx-media-item,
.post-media-swiper-native-height .fx-media-gallery video.fx-media-item {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.post-media-swiper-native-height.is-gallery-height-ready .fx-media-gallery img.fx-media-item,
.post-media-swiper-native-height.is-gallery-height-ready .fx-media-gallery video.fx-media-item {
    width: 100% !important;
    height: var(--post-gallery-native-height) !important;
    object-fit: cover !important;
}

/* Gallery VIDEOS keep their aspect ratio, capped by the admin height, never
   cropped/squashed (images keep cover). */
.post-media-swiper-fixed-height .fx-media-gallery video.fx-media-item,
.post-media-swiper-native-height .fx-media-gallery video.fx-media-item,
.post-media-swiper-native-height.is-gallery-height-ready .fx-media-gallery video.fx-media-item {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--fx-max-h, 550px) !important;
    object-fit: contain !important;
    margin: 0 auto;
}

/* ===== FX player v2: control layout ===== */
.fx-controls {
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .35rem .6rem .45rem;
}

.fx-controls .fx-seek {
    width: 100%;
    flex: none;
}

.fx-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fx-controls-left,
.fx-controls-right {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.fx-btn.fx-cc {
    font-size: .72rem;
    font-weight: 700;
    border: 2px solid #d10054;
    border-radius: .25rem;
    padding: 0 .2rem;
    line-height: 1.15;
}

.fx-btn.fx-cc.is-active {
    border-color: #d10054;
    color: #d10054;
}

/* Volume: vertical slider popup on hover */
.fx-volume {
    position: relative;
    display: flex;
    align-items: center;
}

.fx-volume-pop {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, .92);
    border-radius: .5rem;
    padding: .7rem .45rem;
    display: none;
    z-index: 6;
}

.fx-volume:hover .fx-volume-pop,
.fx-volume-pop:hover {
    display: block;
}

.fx-volume-slider {
    /* Horizontal slider (default look), sits next to the mute icon. */
    width: 90px;
    height: 6px;
    accent-color: #d10054;
    cursor: pointer;
}

/* Quality menu */
.fx-menu {
    position: absolute;
    right: .6rem;
    bottom: 3.2rem;
    z-index: 7;
    background: rgba(20, 20, 20, .95);
    color: #fff;
    border-radius: .6rem;
    min-width: 150px;
    max-height: 320px;
    overflow-y: auto;
    padding: .4rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.fx-menu-header {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    font-size: .85rem;
    padding: .35rem .8rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: .3rem;
}

/* Resolution list: show ~4 rows (Auto, 1440, 1080, 720), scroll the rest */
.fx-menu-items {
    max-height: 128px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.fx-menu-items::-webkit-scrollbar {
    width: 6px;
}

.fx-menu-items::-webkit-scrollbar-track {
    background: transparent;
}

.fx-menu-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
    border-radius: 3px;
}

.fx-menu-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .5);
}

.fx-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    padding: .38rem .9rem;
    font-size: .85rem;
    cursor: pointer;
}

.fx-menu-item:hover {
    background: rgba(255, 255, 255, .08);
}

.fx-menu-item .fx-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #aaa;
    flex: 0 0 auto;
    position: relative;
}

.fx-menu-item.is-selected {
    font-weight: 700;
}

.fx-menu-item.is-selected .fx-radio {
    border-color: #fff;
}

.fx-menu-item.is-selected .fx-radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #fff;
}

/* FX player v2 fixes: bubbles, spacing, volume popup */
.fx-seek-wrap {
    position: relative;
    width: 100%;
    margin-bottom: .5rem;
    padding-top: 1.4rem;
}

.fx-seek-wrap .fx-seek {
    display: block;
    width: 100%;
}

.fx-seek-hover {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: .25rem .35rem;
    border-radius: .3rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Current-time label: left-anchored (NOT centred) so at 0 it sits exactly over
   the thumb's 0 position — its left edge tracks the played percent. JS moves it
   via `left`; no translateX so the "00:00" left edge lines up with the bar start. */
.fx-seek-current {
    position: absolute;
    top: 0;
    left: 0;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: .25rem .35rem;
    border-radius: .3rem;
    white-space: nowrap;
    pointer-events: none;
    background: #fff;
    color: #111;
}

.fx-seek-hover {
    background: rgba(0, 0, 0, .85);
    color: #fff;
    display: none;
}

.fx-seek-hover.is-visible {
    display: block;
}

/* YouTube-style hover preview box: frame thumbnail + time, centred on cursor */
.fx-seek-preview {
    position: absolute;
    bottom: 100%;
    margin-bottom: 8px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .85);
    border-radius: .5rem;
    padding: 4px 4px 2px;
    display: none;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.fx-seek-preview.is-visible {
    display: block;
}
.fx-seek-thumb {
    display: block;
    width: 160px;
    height: 90px;
    border-radius: .35rem;
    background: #000;
    object-fit: cover;
}
.fx-seek-preview-time {
    display: block;
    text-align: center;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 0 2px;
}

/* Locked/PPV media: strictly contained inside the media area so it NEVER bleeds onto post text or header */
.locked-media {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 0 !important;
}

.locked-media.fx-locked-thumb-blur {
    position: relative !important;
    width: 100% !important;
    height: 60vw !important;
    max-height: 480px !important;
    min-height: 320px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 0 !important;
    background-color: #15151b !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* The real blurred cover layer (strictly clipped within the media box) */
.locked-media.fx-locked-thumb-blur .fx-locked-blur-layer {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(20px) brightness(.85) !important;
    transform: scale(1.1) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
/* Small, elegant lock badge centered in the visible middle above bottom bar */
.locked-media.fx-locked-thumb-blur .fx-locked-lock-badge {
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .65) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    pointer-events: none !important;
}
.locked-media.fx-locked-thumb-blur > *:not(.fx-locked-blur-layer):not(.fx-locked-lock-badge) {
    z-index: 2 !important;
}
.locked-media > .position-absolute.bottom-0 {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 5 !important;
}
@media (min-width: 768px) {
    .locked-media.fx-locked-thumb-blur { height: 420px !important; }
}
@media (max-width: 767.98px) {
    .locked-media.fx-locked-thumb-blur { height: 340px !important; min-height: 300px !important; }
}

/* Volume popup: sits right on top of the icon */
.fx-volume-pop {
    bottom: 100%;
    margin-bottom: 2px;
    padding: .55rem .4rem;
}

/* Volume popup: horizontal pill holding the slider + percentage, to the RIGHT
   of the mute icon (FB/default-style horizontal slider). */
.fx-volume-pop {
    bottom: 50%;
    left: 100%;
    top: auto;
    transform: translateY(50%);
    margin-bottom: 0;
    margin-left: 4px;
    padding: .4rem .7rem;
    border-radius: 2rem;
    display: none;
    align-items: center;
    gap: .5rem;
    z-index: 6;
}

.fx-volume .fx-mute {
    position: relative;
    z-index: 7;
}

/* Volume pill renders BELOW the progress bar; popup visibility is JS-controlled */
.fx-controls .fx-seek-wrap {
    position: relative;
    z-index: 8;
}

.fx-volume:hover .fx-volume-pop,
.fx-volume-pop:hover {
    display: none;
}

.fx-volume-pop.is-open,
.fx-volume:hover .fx-volume-pop.is-open,
.fx-volume-pop.is-open:hover {
    display: flex;
}

/* Three-tone seekbar: custom track (background painted by FxPlayer.paintSeekbar) */
.fx-controls .fx-seek {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .3);
    outline: none;
}

.fx-controls .fx-seek::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 5px;
}

.fx-controls .fx-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #d10054;
    border: 2px solid #d10054;
    margin-top: -4px;
    cursor: pointer;
}

.fx-controls .fx-seek::-moz-range-track {
    background: transparent;
    height: 5px;
}

.fx-controls .fx-seek::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d10054;
    border: 2px solid #d10054;
    cursor: pointer;
}

/* Seekbar polish: bubble sits higher, thumb is a solid filled circle */
.fx-seek-wrap {
    padding-top: 1.9rem;
}

.fx-controls .fx-seek::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    background: #d10054 !important;
    border: none;
    box-shadow: 0 0 0 2px #fff;
    margin-top: -4.5px;
}

.fx-controls .fx-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #d10054 !important;
    border: none;
    box-shadow: 0 0 0 2px #fff;
}

/* Thumb: force a solid filled PINK circle (hardcoded hex — some contexts
   don't resolve --primary, leaving the circle looking hollow/white). */
.fx-controls .fx-seek::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #d10054 !important;
    background-color: #d10054 !important;
    border: 2px solid #d10054 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
    margin-top: -5px;
}

.fx-controls .fx-seek::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #d10054 !important;
    background-color: #d10054 !important;
    border: 2px solid #d10054 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
}

/* CC button: lighter weight, proper padding */
.fx-btn.fx-cc {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1.5px solid #d10054;
    border-radius: .3rem;
    padding: .12rem .28rem;
    line-height: 1.2;
}

/* Fullscreen icon size consistent */
.fx-btn.fx-fullscreen ion-icon {
    font-size: 21px;
}

/* Theme-colored horizontal volume slider (custom track, painted by FxPlayer.paintVolume) */
.fx-volume-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 62px !important;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .35);
    outline: none;
    cursor: pointer;
}

/* Volume percentage label next to the slider */
.fx-volume-pct {
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    line-height: 1;
    min-width: 2.4em;
    text-align: right;
}

.fx-volume-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
}

.fx-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #d10054 !important;
    background-color: #d10054 !important;
    border: 2px solid #d10054 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
    cursor: pointer;
}

.fx-volume-slider::-moz-range-track {
    background: transparent;
}

.fx-volume-slider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #d10054 !important;
    background-color: #d10054 !important;
    border: 2px solid #d10054 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
}

/* === FX unified progress bars ===================================== */
/* All upload/progress bars share one fixed Facebook-blue look - they do
   NOT follow the admin theme color on purpose (consistency everywhere). */
.progress-bar,
.dz-preview .dz-upload,
.reel-upload-progress-bar,
.bs-progress-bar {
    background-color: #d10054 !important;
}

.reel-upload-progress.complete .reel-upload-progress-bar,
.bs-progress.is-done .bs-progress-bar {
    background-color: #22c55e !important;
}

.bs-progress.is-done .bs-progress-label {
    color: #22c55e !important;
}

/* === Search: public reels grid ==================================== */
.fx-search-reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
}

.fx-search-reel {
    position: relative;
    display: block;
    aspect-ratio: 9 / 14;
    border-radius: .6rem;
    overflow: hidden;
    background: rgba(138, 150, 163, .18);
}

.fx-search-reel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.fx-search-reel:hover img {
    transform: scale(1.05);
}

.fx-search-reel-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    pointer-events: none;
}

.fx-search-reel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem .5rem .4rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    pointer-events: none;
}

/* Mobile bottom navbar: FB-style hide on scroll down */
.fixed-bottom.fx-nav-anim {
    transition: transform .25s ease;
}

.fixed-bottom.fx-nav-hidden {
    transform: translateY(110%);
}

/* Mobile navbars: monochrome icons (dark theme = white, light theme = black),
   active item keeps the theme color, no pill background, uniform icon sizes */
.mobile-bottom-nav.fx-nav-light .nav-link { color: #111 !important; }
.mobile-bottom-nav.fx-nav-dark .nav-link { color: #fff !important; }

.mobile-bottom-nav .nav-link,
.mobile-bottom-nav .nav-link.active,
.mobile-bottom-nav .nav-link:hover,
.mobile-bottom-nav .nav-link:focus {
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-bottom-nav .nav-link.active {
    color: var(--primary, #d10054) !important;
}

.mobile-bottom-nav .icon-wrapper i,
.mobile-bottom-nav .icon-wrapper ion-icon {
    font-size: 1.75rem !important;
}

.mobile-bottom-nav .mobile-create-toggle svg,
.mobile-bottom-nav .icon-wrapper svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Mobile top navbar: black/white search icon + FB-style hide on scroll */
@media (max-width: 767.98px) {
    .navbar.sticky-nav.top a ion-icon,
    .navbar.sticky-nav.top .ion-icon-wrapper {
        color: inherit !important;
    }

    .navbar.sticky-nav.top.fx-nav-anim {
        transition: transform .25s ease;
    }

    .navbar.sticky-nav.top.fx-top-hidden {
        transform: translateY(-120%);
    }
}

/* Mobile nav icons: force inheritance + active = theme color (no pill) */
.mobile-bottom-nav .nav-link i,
.mobile-bottom-nav .nav-link ion-icon,
.mobile-bottom-nav .nav-link .ion-icon-wrapper {
    color: inherit !important;
    background: transparent !important;
}

.mobile-bottom-nav .nav-link.active,
.mobile-bottom-nav .nav-link.active i,
.mobile-bottom-nav .nav-link.active ion-icon,
.mobile-bottom-nav .nav-link.active .ion-icon-wrapper {
    color: var(--primary, #d10054) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Top search pill: black/white (not theme colored) on mobile */
@media (max-width: 767.98px) {
    .search-box-wrapper .h-pill-primary,
    .search-box-wrapper .h-pill-primary i,
    .search-box-wrapper .h-pill-primary ion-icon,
    .search-box-wrapper .h-pill-primary .ion-icon-wrapper {
        background: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
    }
}

/* === FX mobile app shell (mockup): glassy top + bottom bars ========= */
@media (max-width: 767.98px) {
    /* Top bar: glass */
    .navbar.sticky-nav.top.fx-top-light {
        background: #ffffff !important;         /* SOLID */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none !important;
    }

    .navbar.sticky-nav.top.fx-top-dark {
        background: #18191a !important;         /* SOLID */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none !important;
    }

    .navbar.sticky-nav.top .navbar-toggler {
        display: none !important;
    }

    /* Landing/home has no side-menu drawer (open-menu hidden there), so the
       navbar-toggler IS the mobile menu button (Login/Register or auth items).
       Kept on the LEFT; its dropdown is aligned left below it (not far right). */
    .navbar.sticky-nav.top.app-navbar-home .navbar-toggler {
        display: inline-flex !important;
        order: -2;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        padding: .2rem .4rem .2rem 0;
    }
    /* Phone (<768px): open the menu below the LEFT hamburger, not pinned to the right edge. */
    .app-navbar-home .mobile-user-menu {
        left: 0.45rem !important;
        right: auto !important;
    }
    .app-navbar-home .mobile-user-menu .dropdown-menu-right {
        left: 0 !important;
        right: auto !important;
    }

    .fx-mob-menu {
        order: -2;
        border: none;
        background: transparent;
        padding: .2rem .4rem .2rem 0;
        line-height: 0;
        cursor: pointer;
    }

    .navbar.sticky-nav.top .navbar-brand {
        order: -1;
        margin-right: auto;
        padding-top: 0;
        padding-bottom: 0;
    }

    .fx-mob-actions {
        order: 10;
        gap: 18px;
    }

    .fx-logo-text {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: .1px;
    }

    .fx-top-light .fx-logo-text { color: #17171c; }
    .fx-top-dark .fx-logo-text { color: #fff; }

    /* These are now <button>s (mobile search opens an instant overlay). Strip the native button
       chrome so they render as bare icons exactly like the old <a> did — no grey box/border, and
       no default button padding (that widened each icon and pushed the message icon off-screen). */
    button.fx-mob-icon,
    button.fx-mob-menu {
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        width: auto;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
        line-height: 0;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .fx-mob-menu svg,
    .fx-mob-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }

    .fx-mob-menu svg { width: 24px; height: 24px; stroke-width: 2; }

    .fx-top-light .fx-mob-menu svg,
    .fx-top-light .fx-mob-icon svg {
        stroke: #000;
        color: #000;
        filter: drop-shadow(0 0 1.5px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,.75));
    }

    .fx-top-dark .fx-mob-menu svg,
    .fx-top-dark .fx-mob-icon svg {
        stroke: #fff;
        color: #fff;
        filter: drop-shadow(0 0 1.5px rgba(0,0,0,.35)) drop-shadow(0 0 3px rgba(0,0,0,.22));
    }
}

/*
 * THE STRIP BETWEEN THE PAGE AND THE BOTTOM NAV.
 *
 * The nav lives inside <div class="fixed-bottom" id="fx-mobile-bottom-nav-wrap"> (see
 * layouts/generic.blade.php). That wrapper had NO background of its own anywhere in
 * app.css -- liquid-sidebar.css paints it, but that stylesheet is only loaded by
 * layouts/user-no-nav.blade.php, so on every page using layouts/generic (the landing page
 * included) the wrapper was transparent and whatever sat behind it showed through.
 *
 * `html body` reserves 56px + .5rem for the fixed bar, and the bar itself is 40-56px of
 * solid white. The remainder of that reserved strip was transparent wrapper -- a pale band
 * between the end of the footer and the top of the nav. Chrome's own UI hid it; the
 * Facebook in-app browser, which renders more of the page above its toolbar, did not.
 *
 * Painting the wrapper the nav's own colour closes the seam. The colours are the same two
 * liquid-sidebar.css uses, so the two stylesheets cannot disagree where both are loaded.
 */
@media (max-width: 767.98px) {
    #fx-mobile-bottom-nav-wrap,
    .fixed-bottom:has(.mobile-bottom-nav) {
        background: #ffffff !important;
    }

    body.fx-theme-dark #fx-mobile-bottom-nav-wrap,
    body.fx-theme-dark .fixed-bottom:has(.mobile-bottom-nav) {
        background: #18191a !important;
    }

    /*
     * :has() is not universal. The id selector above covers the same element and needs no
     * :has(), so the wrapper is still painted where :has() is unsupported -- the rule is
     * split rather than relying on one selector that a UA might drop entirely.
     */
}

/* Bottom bar: glass shell */
.mobile-bottom-nav.fx-glass-nav {
    border-top: 1px solid rgba(128,128,128,.20) !important;
    background: #ffffff !important;          /* SOLID — no glass/blur (site-wide, per request) */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
    padding: 6px 6px !important;
    z-index: 2200 !important;   /* bottom nav always on top; full-screen overlays sit below */
}

.mobile-bottom-nav.fx-glass-nav.fx-nav-dark {
    background: #18191a !important;          /* SOLID dark */
    border-top-color: rgba(255,255,255,.10) !important;
}

.fx-glass-nav-inner {
    padding: 4px 4px;
}

.fxm-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px !important;
    border: none;
    background: transparent !important;
    border-radius: 16px;
    position: relative;
    box-shadow: none !important;
}

.fxm-item > svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fx-nav-light .fxm-item > svg {
    stroke: #000;
    color: #000;
}

.fx-nav-dark .fxm-item > svg {
    stroke: #fff;
    color: #fff;
    filter: drop-shadow(0 0 1.5px rgba(0,0,0,.35)) drop-shadow(0 0 4px rgba(0,0,0,.22));
}

/* Active: fixed blue (light) / cyan (dark) - not theme based */
.fx-nav-light .fxm-item.active > svg {
    stroke: #2f6bff !important;
    color: #2f6bff !important;
}

.fx-nav-dark .fxm-item.active > svg {
    stroke: #22d3ee !important;
    color: #22d3ee !important;
}

/* Pink "+" create button: bigger than the other nav icons, no drop-shadow. Defined here
   in app.css (loaded on EVERY page) so the landing/home page — which uses the generic
   layout and does NOT load liquid-sidebar.css — shows the same 40px + as /feed does. */
.fxm-item--plus > svg {
    width: 40px;
    height: 40px;
    stroke: none !important;
}

/* Avatar circle */
.fxm-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.6px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fx-nav-dark .fxm-avatar { border-color: #fff; }

/* Active avatar border = brand colour (was hardcoded blue) so it follows admin theme */
.fx-nav-light .fxm-item.active .fxm-avatar { border-color: #d10054; }
.fx-nav-dark .fxm-item.active .fxm-avatar { border-color: #d10054; }

.fxm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fxm-avatar svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke-width: 1.9;
}

.fx-nav-light .fxm-avatar svg { stroke: #000; }
.fx-nav-dark .fxm-avatar svg { stroke: #fff; }

/* Unread badges (bottom bell + top messages) */
.fxm-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* Notification badge sits snug on the bell icon's top-right (Facebook-style), not high
   above it. The nav item is full-height + flex-centered, so anchoring it to the item top
   floated it way up; these values place it on the icon's upper-right corner. */
.fxm-item .fxm-badge {
    top: 11px;
    right: 24px;
}

/* Feed mobile top bar: ALWAYS pinned to top: 0 */
.fixed-top-m,
.mobile-feed-brand-header,
.fx-mob-topbar,
.fx-mob-topbar.fx-liquid,
.mobile-feed-brand-header.fx-mob-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    justify-content: flex-start;
    gap: 8px;
    z-index: 1030 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    align-items: center;
    overflow: hidden;
}

.fx-mob-topbar.fx-top-light {
    background: #ffffff !important;          /* SOLID — no glass/blur */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.fx-mob-topbar.fx-top-dark {
    background: #18191a !important;          /* SOLID dark */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.fx-mob-topbar .fx-mob-menu {
    border: none;
    background: transparent;
    padding: .2rem .4rem .2rem 0;
    line-height: 0;
    cursor: pointer;
}

.fx-mob-topbar .fx-mob-menu svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.fx-mob-topbar .fx-mob-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.fx-mob-topbar .fx-mob-actions {
    /* 18px between three icons plus the balance chip was more than a narrow phone has to
       give, and the icons on the right were the ones pushed off. */
    gap: 12px;
    /* The actions group must never be the thing that shrinks: the LOGO can give up room
       (it has mr-auto and text to spare), the icons cannot -- a half-clipped tap target
       is what the screenshot showed. */
    flex: 0 0 auto;
}

/* The logo is the flexible one, and it truncates rather than pushing the icons out. */
.fx-mob-topbar .fx-logo-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-mob-topbar .fx-logo-text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .1px;
    text-decoration: none;
}

.fx-mob-topbar.fx-top-light .fx-logo-text { color: #17171c; }
.fx-mob-topbar.fx-top-dark .fx-logo-text { color: #fff; }

.fx-mob-topbar.fx-top-light .fx-mob-menu svg,
.fx-mob-topbar.fx-top-light .fx-mob-icon svg {
    stroke: #000;
    color: #000;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,.75));
}

.fx-mob-topbar.fx-top-dark .fx-mob-menu svg,
.fx-mob-topbar.fx-top-dark .fx-mob-icon svg {
    stroke: #fff;
    color: #fff;
    filter: drop-shadow(0 0 1.5px rgba(0,0,0,.35)) drop-shadow(0 0 3px rgba(0,0,0,.22));
}

.fx-mob-topbar.fx-nav-anim {
    transition: transform .25s ease;
}

.fx-mob-topbar.fx-top-hidden {
    transform: translateY(-120%);
}

/* Slimmer bottom bar */
.mobile-bottom-nav.fx-glass-nav {
    padding: 6px 6px !important;
    min-height: 50px !important;
}

.fx-glass-nav-inner {
    padding: 0 !important;
}

.fxm-item {
    padding: 2px !important;
    min-height: 0 !important;
}

/* Bottom bar: icons at full size, only the blur background kept tight */
.mobile-bottom-nav.fx-glass-nav .fxm-item:not(.fxm-item--plus) > svg {
    width: 30px !important;
    height: 30px !important;
}

.mobile-bottom-nav.fx-glass-nav .fxm-item--plus > svg {
    width: 40px !important;
    height: 40px !important;
}

.mobile-bottom-nav.fx-glass-nav .fxm-avatar {
    width: 30px;
    height: 30px;
}

.mobile-bottom-nav.fx-glass-nav .fxm-item {
    min-width: 44px;
    padding: 0 !important;
}

/* === FX wallet extras: gift codes + crypto demo ==================== */
.fx-wallet-tile {
    width: 100%;
    border: 1px solid rgba(138, 150, 163, .3);
    border-radius: .7rem;
    background: transparent;
    color: inherit;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.fx-wallet-tile:hover {
    border-color: #d10054;
    background: rgba(209,0,84, .05);
}

.fx-wallet-tile-label {
    font-weight: 700;
    font-size: .9rem;
}

.fx-gift-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #d10054;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-crypto-list {
    max-height: 330px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, .28);
    border-radius: 8px;
}
body.fx-theme-dark .fx-crypto-list {
    border: 1px solid rgba(255, 255, 255, .28);
}
.fx-crypto-chev {
    font-size: 20px;
    font-weight: 700;
    margin-right: 10px;
}

.fx-crypto-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .7rem;
    border: none;
    background: transparent;
    color: inherit;
    padding: .55rem .3rem;
    border-bottom: 1px solid rgba(138, 150, 163, .15);
    cursor: pointer;
    text-align: left;
}

.fx-crypto-row:hover {
    background: rgba(138, 150, 163, .08);
}

.fx-crypto-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.fx-crypto-names {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}

.fx-crypto-names small {
    color: rgba(138, 150, 163, .95);
}

.fx-crypto-address {
    border: 1px solid rgba(138, 150, 163, .3);
    border-radius: .5rem;
    padding: .5rem;
    font-size: .8rem;
    word-break: break-all;
}

.fx-crypto-qr {
    width: 140px;
    height: 140px;
    border: 1px dashed rgba(138, 150, 163, .5);
    border-radius: .5rem;
}

/* === Sensitive content blur levels (viewer preference) ============= */
.fx-blur-light .post-media img,
.fx-blur-light .post-media video,
.fx-blur-light .fx-media img,
.fx-blur-light .fx-media video,
.fx-blur-light .post-media-gallery-image,
.fx-blur-light .fx-disc-card img {
    filter: blur(5px) !important;
}

.fx-blur-medium .post-media img,
.fx-blur-medium .post-media video,
.fx-blur-medium .fx-media img,
.fx-blur-medium .fx-media video,
.fx-blur-medium .post-media-gallery-image,
.fx-blur-medium .fx-disc-card img {
    filter: blur(12px) !important;
}

.fx-blur-strong .post-media img,
.fx-blur-strong .post-media video,
.fx-blur-strong .fx-media img,
.fx-blur-strong .fx-media video,
.fx-blur-strong .post-media-gallery-image,
.fx-blur-strong .fx-disc-card img {
    filter: blur(22px) !important;
}

/* Hover (desktop) reveals the media temporarily */
.fx-blur-light .post-media:hover img,
.fx-blur-light .post-media:hover video,
.fx-blur-light .fx-media:hover img,
.fx-blur-light .fx-media:hover video,
.fx-blur-medium .post-media:hover img,
.fx-blur-medium .post-media:hover video,
.fx-blur-medium .fx-media:hover img,
.fx-blur-medium .fx-media:hover video,
.fx-blur-strong .post-media:hover img,
.fx-blur-strong .post-media:hover video,
.fx-blur-strong .fx-media:hover img,
.fx-blur-strong .fx-media:hover video {
    filter: none !important;
}

/* Mobile bottom-nav: uniform stroke SVGs (home/reels/bell), fill on active */
.mobile-bottom-nav.fx-glass-nav .fxm-item:not(.fxm-item--plus) > svg {
    width: 27px !important;
    height: 27px !important;
    stroke-width: 2 !important;
}

/* Active: theme color + fill the shape (like the reels action icons) */
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg {
    color: var(--primary, #d10054) !important;
    stroke: var(--primary, #d10054) !important;
    fill: var(--primary, #d10054) !important;
}
/* keep inner cut-outs readable when filled */
.mobile-bottom-nav.fx-glass-nav .fxm-home.active > svg path:last-child,
.mobile-bottom-nav.fx-glass-nav .fxm-reels.active > svg rect {
    fill: none !important;
}

/* Referrals intro card */
.fx-ref-intro {
    border: 1px solid rgba(138, 150, 163, .25);
    border-radius: .8rem;
    padding: 1.1rem 1.2rem;
    background: rgba(209,0,84, .04);
}

/* User-requested: tighter pb-5/py-5 bottom padding */
.pb-5, .py-5 {
    padding-bottom: .5rem !important;
}

/* === Site footer (footer.blade.php: .fx-footer / .fx-footer-top / .fx-footer-col) =========
 *
 * Redesigned to the approved demo: soft off-white ground, rounded-square social chips,
 * uppercase letter-spaced section headings, a chevron on every link, and the three
 * preference switchers grouped into one inset card with tinted icon tiles.
 *
 * EVERYTHING here is scoped under .fx-footer on purpose. The three switcher partials
 * (dark-mode / direction / language) are SHARED with the side menu, which styles the same
 * .nav-link / .side-menu-label / .icon-wrapper classes. Unscoped rules would repaint it.
 */
.fx-footer {
    background: #F6F7FA !important;
    color: #0F172A !important;
    padding: 44px 0 28px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
    font-size: 14px !important;
    clear: both !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ambient glow, top-right. Decorative only: no pointer events, sits under the content. */
.fx-footer::before {
    content: "" !important;
    position: absolute !important;
    top: -120px !important;
    right: -110px !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(209, 0, 84, 0.10) 0%, rgba(209, 0, 84, 0.04) 45%, transparent 70%) !important;
    filter: blur(28px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.fx-footer > .container {
    position: relative !important;
    z-index: 1 !important;
}

body.fx-theme-dark .fx-footer {
    background: #0E0D12 !important;
    color: #F4F3F7 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Top grid: 4 columns on desktop (Brand, Explore, Support, Preferences) */
.fx-footer-top {
    display: grid !important;
    grid-template-columns: 1.2fr 1.2fr 1.2fr 1.2fr !important;
    gap: 36px !important;
    margin-bottom: 36px !important;
}

@media (max-width: 991.98px) {
    .fx-footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
}

@media (max-width: 575.98px) {
    .fx-footer-top {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }
}

/* Brand column */
.fx-footer-brand {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: flex-start !important;
}

.fx-footer-logo {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Social icons: rounded-square chips, per the demo */
.fx-footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 0 !important;
}

.fx-footer-social-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02) !important;
    color: #334155 !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    text-decoration: none !important;
}

body.fx-theme-dark .fx-footer-social-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #F4F3F7 !important;
    box-shadow: none !important;
}

.fx-footer-social-chip:hover {
    color: var(--primary, #d10054) !important;
    background: rgba(209, 0, 84, 0.06) !important;
    border-color: rgba(209, 0, 84, 0.30) !important;
    box-shadow: 0 4px 12px rgba(209, 0, 84, 0.12) !important;
    transform: none !important;
}

.fx-footer-social-chip:active {
    transform: scale(0.95) !important;
}

.fx-footer-social-chip ion-icon,
.fx-footer-social-chip svg,
.fx-footer-social-chip .ion-icon-wrapper {
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
}

/* Footer columns (Explore / Support / Preferences) */
.fx-footer-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.fx-footer-col h2 {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    margin: 0 0 8px 0 !important;
    padding-left: 4px !important;
    color: #94A3B8 !important;
}

body.fx-theme-dark .fx-footer-col h2 {
    color: #6F6B7D !important;
}

/*
 * Links are a row so the chevron can sit hard right. The chevron is drawn in CSS rather
 * than added as another SVG, so the Blade markup stays as it is.
 */
.fx-footer-col a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    color: #1E293B !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    transition: color .15s ease, background .15s ease !important;
}

.fx-footer-col a::after {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    margin-right: 2px !important;
    border-right: 2px solid #CBD5E1 !important;
    border-bottom: 2px solid #CBD5E1 !important;
    transform: rotate(-45deg) !important;
    transition: border-color .15s ease, transform .15s ease !important;
}

body.fx-theme-dark .fx-footer-col a {
    color: #D8D5E0 !important;
}

body.fx-theme-dark .fx-footer-col a::after {
    border-right-color: #4B4857 !important;
    border-bottom-color: #4B4857 !important;
}

.fx-footer-col a:hover {
    color: #020617 !important;
    background: rgba(15, 23, 42, 0.05) !important;
    text-decoration: none !important;
}

body.fx-theme-dark .fx-footer-col a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.fx-footer-col a:hover::after {
    border-right-color: var(--primary, #d10054) !important;
    border-bottom-color: var(--primary, #d10054) !important;
    transform: rotate(-45deg) translate(2px, 2px) !important;
}

/*
 * Support is the quieter of the two link lists in the demo: smaller, lighter, tighter.
 * Reached through its own modifier rather than :nth-child, so adding a column later
 * cannot silently re-target it.
 */
.fx-footer-col.fx-footer-col-quiet a {
    padding: 7px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

body.fx-theme-dark .fx-footer-col.fx-footer-col-quiet a {
    color: #9E9AAA !important;
}

.fx-footer-col.fx-footer-col-quiet a::after {
    width: 6px !important;
    height: 6px !important;
    border-right-color: #DDE3EC !important;
    border-bottom-color: #DDE3EC !important;
}

/* === Preferences: one inset card holding the three shared switchers ===================== */
.fx-footer-prefs {
    gap: 0 !important;
}

.fx-footer-prefs-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(248, 250, 252, 0.75) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.015) !important;
}

body.fx-theme-dark .fx-footer-prefs-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

/*
 * Each switcher renders as a span.nav-link carrying an .icon-wrapper and a .side-menu-label
 * -- classes that belong to the side menu. Every rule below is written as
 * .fx-footer-prefs-box <selector> and so cannot reach it.
 */
.fx-footer-prefs-box > .nav-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #1E293B !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

body.fx-theme-dark .fx-footer-prefs-box > .nav-link {
    color: #D8D5E0 !important;
}

.fx-footer-prefs-box > .nav-link:hover {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

body.fx-theme-dark .fx-footer-prefs-box > .nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
}

/* Tinted rounded icon tile, as in the demo */
.fx-footer-prefs-box .icon-wrapper {
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 9px !important;
    background: rgba(209, 0, 84, 0.10) !important;
    color: var(--primary, #d10054) !important;
}

.fx-footer-prefs-box .icon-wrapper ion-icon,
.fx-footer-prefs-box .icon-wrapper svg,
.fx-footer-prefs-box .icon-wrapper .ion-icon-wrapper {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}

.fx-footer-prefs-box .side-menu-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    margin-left: 10px !important;
}

/*
 * The iOS-style toggle. The shared partials emit no control of their own, so the track is
 * drawn as ::before on the row and the knob as ::after. Only the two on/off switchers get
 * one; the language row ends in its own pill instead.
 */
.fx-footer-prefs-box > .dark-mode-switcher,
.fx-footer-prefs-box > .rtl-mode-switcher {
    gap: 10px !important;
}

/*
 * ORDER MATTERS HERE. ::before is the row's FIRST child, so without an explicit order the
 * track renders to the LEFT of the icon and label -- which is exactly what it did. The
 * label group is the row's only real element and stays at the default order 0, so the
 * track takes 2 and lands hard right.
 */
.fx-footer-prefs-box > .dark-mode-switcher::before,
.fx-footer-prefs-box > .rtl-mode-switcher::before {
    content: "" !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: #E2E8F0 !important;
    transition: background .2s ease !important;
}

/*
 * The knob is drawn ON the track with a radial gradient rather than as a second
 * absolutely-positioned pseudo-element. The earlier version pinned ::after to `right: 14px`
 * of the ROW, so it floated free of the track and drifted whenever the row's padding or the
 * label's width changed. A gradient cannot come apart from the thing it is painted on.
 */
.fx-footer-prefs-box > .dark-mode-switcher::before {
    background-image: radial-gradient(circle 8px at 10px 50%, #ffffff 0 8px, transparent 8px) !important;
}

.fx-footer-prefs-box > .rtl-mode-switcher::before {
    background-image: radial-gradient(circle 8px at 10px 50%, #ffffff 0 8px, transparent 8px) !important;
}

/*
 * ON state. The switchers have no `is-active` class of their own -- the site records the
 * choice in the app_theme / app_rtl cookies and stamps the BODY, so the body class is the
 * only thing that says which way a toggle is set. Dark mode reads fx-theme-dark; RTL reads
 * the dir attribute the same middleware sets.
 */
body.fx-theme-dark .fx-footer-prefs-box > .dark-mode-switcher::before {
    background-color: #d10054 !important;
    background-image: radial-gradient(circle 8px at 26px 50%, #ffffff 0 8px, transparent 8px) !important;
}

html[dir="rtl"] .fx-footer-prefs-box > .rtl-mode-switcher::before {
    background-color: #d10054 !important;
    background-image: radial-gradient(circle 8px at 26px 50%, #ffffff 0 8px, transparent 8px) !important;
}

/* Off-state track on a dark ground. */
body.fx-theme-dark .fx-footer-prefs-box > .rtl-mode-switcher::before {
    background-color: rgba(255, 255, 255, 0.16) !important;
}

html[dir="rtl"] body.fx-theme-dark .fx-footer-prefs-box > .rtl-mode-switcher::before {
    background-color: #d10054 !important;
}

/* Language row: the trailing pill showing the current language */
.fx-footer-prefs-box .fx-footer-lang-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #475569 !important;
}

body.fx-theme-dark .fx-footer-prefs-box .fx-footer-lang-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #B9B5C4 !important;
}

.fx-footer-prefs-box .fx-footer-lang-pill::after {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    margin-bottom: 2px !important;
    border-right: 2px solid #94A3B8 !important;
    border-bottom: 2px solid #94A3B8 !important;
    transform: rotate(45deg) !important;
}

/* Bottom copyright & 18+ bar */
.fx-footer-bottom {
    padding-top: 20px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #64748B !important;
}

body.fx-theme-dark .fx-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: #9E9AAA !important;
}

.fx-footer-bottom p {
    font-weight: 500 !important;
}

.fx-footer-adult {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #94A3B8 !important;
    opacity: 1 !important;
}

body.fx-theme-dark .fx-footer-adult {
    color: #6F6B7D !important;
}

/*
 * THE WHITE BLOCK BETWEEN THE FOOTER AND THE FIXED BOTTOM NAV.
 *
 * `html body` reserves `padding-bottom: calc(56px + .5rem + inset)` on a phone so the fixed
 * nav cannot cover the last of the page. Body padding sits INSIDE the body box but OUTSIDE
 * every child, so the footer -- the last child -- stops 64px short of the body's bottom
 * edge, and those 64px paint in the BODY's background, which bootstrap.css sets to #fff.
 *
 * Against the footer's #F6F7FA that reads as a white block above the bar. Chrome's own UI
 * covered it; the Facebook in-app browser renders more of the page above its toolbar and
 * did not -- which is the whole difference between the two screenshots.
 *
 * It is not the wrapper (2300 painted that, and it is white as intended) and not the safe
 * area (the inset resolves to 0 without viewport-fit=cover, which is deliberately absent).
 *
 * The footer is the page's last surface, so it should own that strip rather than the body.
 * The negative margin pulls the footer down through the reserve and the matching padding
 * puts its own content back where it was -- nothing moves, and the footer's colour fills
 * the gap. Written with the same expression as the body rule so the two cannot drift apart.
 */
@media (max-width: 767.98px) {
    .fx-footer {
        margin-bottom: calc(-56px - .5rem - env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: calc(28px + 56px + .5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* On a phone the two bottom lines stack left-aligned, as in the demo. */
@media (max-width: 575.98px) {
    .fx-footer-bottom {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}


/* ============================================================
   FxRouter: the navigation progress bar
   ============================================================

   A two-pixel bar pinned under the top edge, shown while a swapped navigation is in
   flight. It exists because a fetch-and-swap gives no browser loading indicator at all --
   without it a tap on a slow connection looks like nothing happened, and people tap again.

   The bar animates to 90% and waits there: the remaining 10% only completes when the swap
   actually finishes, so it never claims to be done before it is. Purely decorative, so it
   takes pointer-events: none and cannot intercept a tap meant for the page.
   ============================================================ */
#fx-router-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

#fx-router-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: 0;
    background: #d10054;
    box-shadow: 0 0 8px rgba(209, 0, 84, .6);
    transition: width .2s ease;
}

#fx-router-progress.is-loading {
    opacity: 1;
}

#fx-router-progress.is-loading::before {
    width: 90%;
    /* Slow crawl to 90%, so a long fetch still looks like progress rather than a stall. */
    transition: width 4s cubic-bezier(.1, .6, .3, 1);
}

/*
 * Respect a reduced-motion preference: the bar still appears and still says "busy", it
 * just stops animating across the screen.
 */
@media (prefers-reduced-motion: reduce) {
    #fx-router-progress::before,
    #fx-router-progress.is-loading::before {
        transition: none;
    }
}

/*
 * While a swap is in flight the outgoing content stays on screen. Dimming it very slightly
 * signals that it is stale without the flash of blanking the page -- the thing a full
 * reload does that this exists to avoid.
 */
body.fx-router-busy .fx-layout-content,
body.fx-router-busy > .flex-fill {
    opacity: .6;
    transition: opacity .15s ease;
}


/* ============================================================
   PWA: the inline "Install app" strip
   ============================================================

   Rendered by elements/pwa-install-inline in three places -- under the header for guests,
   above the stories row for members, and as a row in the slide-out menu. Every copy ships
   with `d-none` and is revealed by PWABanner only when an install is actually possible, so
   nothing here should assume the strip is visible.
   ============================================================ */
/*
 * The strip sits ABOVE the sticky header, not below it.
 *
 * The header is `position: sticky; top: var(--ga-h)`, so it stays in normal flow. Rendered
 * after it, this strip ended up underneath the nav in the flow and the header drew straight
 * over it -- the logo and the Login/Register buttons on top of the strip's own text. Moved
 * above the header in header.blade.php, it occupies its own space and the nav still pins
 * normally once the strip scrolls away.
 *
 * z-index keeps it under the nav rather than over it: while both are on screen the header
 * is the thing that must stay legible, and the strip is a dismissible extra.
 */
.fx-pwa-strip {
    position: relative;
    z-index: 1029;              /* .sticky-nav is 1030 */
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.fx-theme-dark .fx-pwa-strip {
    background: #18191a;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/*
 * No double rule where the strip meets the header. The nav already draws its own bottom
 * border or shadow, so the strip's would stack with it into a two-pixel seam.
 */
.fx-pwa-strip + .navbar.sticky-nav {
    border-top: 0;
}

.fx-pwa-strip-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 16px;
}

.fx-pwa-strip-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

/*
 * min-width: 0 is what allows the text to truncate instead of pushing the button off the
 * end -- a flex item's default min-width is auto, which refuses to shrink below its
 * content.
 */
.fx-pwa-strip-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.fx-pwa-strip-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.fx-theme-dark .fx-pwa-strip-title {
    color: #F4F3F7;
}

.fx-pwa-strip-sub {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.fx-theme-dark .fx-pwa-strip-sub {
    color: #9E9AAA;
}

/*
 * On iOS the button expands the Share-sheet instructions in place. The subtitle then needs
 * to wrap rather than truncate, or the instruction is cut off mid-sentence.
 */
.fx-pwa-strip.is-expanded .fx-pwa-strip-sub {
    white-space: normal;
}

.fx-pwa-strip-btn {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: #d10054;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.fx-pwa-strip-btn:hover {
    filter: brightness(1.07);
    color: #ffffff;
}

.fx-pwa-strip-btn:active {
    transform: scale(0.97);
}

.fx-pwa-strip-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #94A3B8;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: .7;
}

.fx-pwa-strip-close:hover {
    opacity: 1;
}

body.fx-theme-dark .fx-pwa-strip-close {
    color: #6F6B7D;
}

/* On a phone the subtitle is the first thing to go: the icon, title and button matter more
   than the explanation, and three of them do not fit across a 390px screen with it. */
@media (max-width: 480px) {
    .fx-pwa-strip-inner {
        padding: 9px 12px;
        gap: 10px;
    }

    .fx-pwa-strip-icon {
        width: 34px;
        height: 34px;
    }

    .fx-pwa-strip-sub {
        display: none;
    }

    .fx-pwa-strip.is-expanded .fx-pwa-strip-sub {
        display: block;
    }
}

/* The slide-out menu row: no styling of its own -- it inherits the menu's item styles by
   using the same markup. Only the hidden state needs stating, so the row does not flash
   before PWABanner decides. */
.fx-pwa-install-item.d-none {
    display: none !important;
}

/*
 * ONLY THE FIRST STRIP ON A PAGE.
 *
 * The landing page carries two: the guest strip under the site header, and the one under the
 * "Explore creators" button. Both are the same partial in different places, and a guest
 * would otherwise be asked to install twice on one screen.
 *
 * The general sibling combinator collapses every strip that follows another, whatever the
 * markup between them, so whichever comes first in the document wins and the rest never
 * paint. That keeps the rule true no matter which placements a page happens to include --
 * nothing has to know about the others.
 */
.fx-pwa-strip ~ .fx-pwa-strip {
    display: none !important;
}

/* Feed mobile: PWA install strip placed below header */
@media (max-width: 767.98px) {
    .fx-pwa-strip:not(.d-none) {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1035 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    body.fx-theme-dark .fx-pwa-strip:not(.d-none) {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    }

    /* Feed page (logged-in): offset by 40px so it sits right under the fixed mobile header */
    body.logged-in:not(.is-home-page) .fx-pwa-strip:not(.d-none) {
        position: relative !important;
        top: 0 !important;
        margin-top: 40px !important;
    }

    /* Landing page & Guest mode: keep top 0 so it never overlaps or covers the header nav (in both light and dark themes) */
    body.is-home-page .fx-pwa-strip:not(.d-none),
    body.is-guest .fx-pwa-strip:not(.d-none),
    body:not(.logged-in) .fx-pwa-strip:not(.d-none) {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1035 !important;
        margin-top: 0 !important;
    }

    /* On landing page, keep only the header strip and suppress duplicate hero strip */
    body.is-home-page .home-hero .fx-pwa-strip {
        display: none !important;
    }
}

/*
 * MOBILE ONLY: every install prompt, at every placement.
 *
 * 767.98px is the site's own mobile boundary -- the same one that shows the bottom nav and
 * hides the desktop sidebar -- so the prompts appear exactly where the app-style chrome
 * does, rather than at a width invented for them.
 *
 * Done in CSS rather than JS on purpose. PWABanner removes `d-none` when an install becomes
 * possible; if the desktop rule lived in JS the element would already have been revealed and
 * would flash before being hidden again. A media query never renders it at all.
 *
 * !important because it has to beat PWABanner's own `removeClass('d-none')` -- that changes
 * the class list, not the specificity, so without it the JS would win on a desktop.
 */
@media (min-width: 768px) {
    .fx-pwa-strip,
    .fx-pwa-install-item,
    #pwa-install-prompt {
        display: none !important;
    }
}


/* ============================================================
   FACEBOOK / INSTAGRAM IN-APP WEBVIEW: the bottom nav
   ============================================================

   In an in-app WebView the bottom nav was floating ABOVE the content with a band of empty
   page beneath it, instead of sitting on the bottom edge.

   WHY. `.fixed-bottom` is `position: fixed; bottom: 0`, which anchors to the VIEWPORT. These
   WebViews report a viewport that does not account for their own chrome, and they resize it
   as that chrome appears and disappears -- so `bottom: 0` resolves to a line part-way up the
   screen, and the page keeps rendering below it.

   `body.fx-in-app` is stamped by the detection already in template/head.blade.php. Scoped to
   it so no ordinary browser is touched: Chrome and Safari position this correctly today and
   have no reason to change.
   ============================================================ */
@media (max-width: 767.98px) {
    /*
     * dvh is the dynamic viewport height -- it tracks the WebView's chrome as it moves,
     * which is exactly the thing vh does not do. Anchoring the top edge to
     * `100dvh - height` puts the bar on the real bottom edge whatever the host app is
     * currently showing.
     *
     * `bottom: 0` is kept as the first declaration: a WebView too old for dvh ignores the
     * second rule entirely and keeps today's behaviour rather than losing the bar.
     */
    body.fx-in-app #fx-mobile-bottom-nav-wrap,
    body.fx-in-app .fixed-bottom {
        bottom: 0 !important;
        top: auto !important;
        padding-bottom: 0 !important;
    }

    body.fx-in-app .mobile-bottom-nav,
    body.fx-in-app .mobile-bottom-nav.fx-glass-nav {
        padding: 6px 6px !important;
        padding-bottom: 6px !important;
        min-height: 50px !important;
        max-height: 56px !important;
    }

    body.fx-in-app .mobile-bottom-nav .fx-glass-nav-inner {
        align-items: center !important;
        height: 100% !important;
    }

    @supports (height: 100dvh) {
        body.fx-in-app #fx-mobile-bottom-nav-wrap,
        body.fx-in-app .fixed-bottom {
            /* Pin to the bottom of the DYNAMIC viewport, not the static one. */
            position: fixed !important;
            bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        /*
         * And give the page itself the same dynamic height, so the document cannot extend
         * past the bar and leave the empty band the screenshot showed.
         */
        body.fx-in-app {
            min-height: 100dvh;
        }
    }
}


/* ============================================================
   MOBILE: no column borders
   ============================================================

   The layout's content column carries `border-left` and the profile page's own column
   carries `border-right`. Both are there to separate columns from the sidebar beside them
   on a desktop -- but on a phone there is no sidebar, the column is the full width of the
   screen, and the border draws as a stray hairline down one edge of the page.

   Removed in CSS rather than by editing the Blade, because the same classes are what give
   the desktop layout its column separation: taking `border-left` off
   layouts/user-no-nav.blade.php would flatten the desktop feed as well.
   ============================================================ */
@media (max-width: 767.98px) {
    .fx-layout-content,
    .fx-layout-content.border-left,
    .fx-layout-content.border-right {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    /*
     * The profile page's own content column: `<div class="min-vh-100 col-12 col-md-8
     * border-right pr-md-0 px-0">` in pages/profile.blade.php.
     *
     * Matched on those classes rather than on a page-level one, because the profile page
     * has no wrapper class of its own -- there is no .profile-page anywhere in the view.
     * col-md-8 is what makes this specific enough not to catch every bordered column on
     * the site.
     */
    .col-md-8.border-right,
    .fx-layout-content .border-right,
    .fx-layout-content .border-left {
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

/* Manual crypto deposit flow */
.fx-crypto-tabs { border-bottom: 1px solid rgba(138,150,163,.25); gap: .3rem; }
.fx-crypto-tab {
    border: none; background: transparent; color: rgba(138,150,163,.95);
    font-weight: 700; font-size: .9rem; padding: .5rem 1rem; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.fx-crypto-tab.is-active { color: #d10054; border-bottom-color: #d10054; }
.fx-crypto-quote {
    background: rgba(138,150,163,.08); border-radius: .6rem; padding: .8rem 1rem; font-size: .9rem;
}
/* Amount below the minimum (or above max): highlight the input box so the user
   clearly sees the amount isn't allowed. */
.fx-float-group.fx-amount-invalid .fx-float-input,
#fx-crypto-amount.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
    background-image: none !important;
}
.fx-float-group.fx-amount-invalid .fx-float-label {
    color: #dc3545 !important;
}
/* Tip-context note (top-up started from an unaffordable tip) */
.fx-crypto-tipnote {
    background: rgba(209,0,84,.07);
    border: 1px solid rgba(209,0,84,.25);
    border-radius: .6rem; padding: .7rem .85rem; margin-bottom: .6rem;
    font-size: .85rem; line-height: 1.4;
}
.fx-crypto-tipnote-title {
    font-weight: 700; margin-bottom: .2rem; color: #d10054;
}
.fx-crypto-timer { font-size: 2.1rem; font-weight: 800; letter-spacing: 1px; }
.fx-crypto-qrbox {
    width: 190px; height: 190px; border: 1px solid rgba(138,150,163,.25);
    border-radius: .6rem; display: flex; align-items: center; justify-content: center; padding: .4rem;
    background: #fff;
}
.fx-crypto-address-row {
    border: 1px solid rgba(138,150,163,.3); border-radius: .5rem; padding: .5rem .7rem;
}
.fx-crypto-address { font-size: .8rem; word-break: break-all; }

/* ============================================================
   Liquid Glass — floating pill bottom nav + glassy top bars
   (Apple WDC25 "Adopting Liquid Glass" inspired)
   ============================================================ */
.mobile-bottom-nav.fx-liquid {
    position: relative;
    height: 60px;
    margin: 0;
    padding: 0 8px;
    border-radius: 0;
    background: #ffffff !important;            /* SOLID (was rgba .28 = glassy) */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(128,128,128,.20) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .1) !important;
    overflow: visible;
    isolation: isolate;
}

/* Mobile bottom navbar layout & vertical centering fixes */
.mobile-bottom-nav {
    height: 56px !important;
    max-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mobile-bottom-nav .fx-glass-nav-inner {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-bottom-nav .fxm-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    /* No flex basis: each item takes its own width and the bar's own
       justification spaces them, instead of every item being stretched to an
       equal share of the row. */
}

.mobile-bottom-nav .fxm-item.active::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 5% !important;
    right: 20% !important;
    width: 85% !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--primary, #d10054) !important;
    background-color: #d10054 !important;
    z-index: 99 !important;
    transform: none !important;
    display: block !important;
}

body.reel-viewer-open .mobile-bottom-nav .fxm-item.active::after,
body.reels-page-active .mobile-bottom-nav .fxm-item.active::after {
    background: #ffffff !important;
}

/* ONLY while the full-screen reels player is open, the bottom nav goes dark to match
   the dark player (even in light theme). Reverts automatically on close. */
body.reel-viewer-open .mobile-bottom-nav.fx-liquid,
body.reel-viewer-open .mobile-bottom-nav.fx-glass-nav,
body.reel-viewer-open .mobile-bottom-nav {
    background: #0d0e11 !important;
    border-top-color: rgba(255,255,255,.10) !important;
}

body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus),
body.reel-viewer-open .mobile-bottom-nav.fx-nav-light .fxm-item:not(.fxm-item--plus),
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) .fxm-ic,
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg,
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg path,
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) .fxm-ic path {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

body.reel-viewer-open .mobile-bottom-nav .fxm-item.active:not(.fxm-item--plus),
body.reel-viewer-open .mobile-bottom-nav .fxm-item.active:not(.fxm-item--plus) svg,
body.reel-viewer-open .mobile-bottom-nav .fxm-item.active:not(.fxm-item--plus) svg path {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

.mobile-bottom-nav.fx-liquid.fx-nav-dark {
    background: #0d0e11 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .35) !important;
}

/* Seamless bottom navigation bar (blend with Android 3-button system bar) */
.mobile-bottom-nav,
.mobile-bottom-nav.fx-liquid,
.mobile-bottom-nav.fx-glass-nav,
#fx-mobile-bottom-nav-wrap,
.fixed-bottom:has(.mobile-bottom-nav) {
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.fx-theme-light .fixed-bottom,
body.fx-theme-light #fx-mobile-bottom-nav-wrap,
body.fx-theme-light .mobile-bottom-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.fx-theme-dark .fixed-bottom,
body.fx-theme-dark #fx-mobile-bottom-nav-wrap,
body.fx-theme-dark .mobile-bottom-nav {
    background: #0d0e11 !important;
    background-color: #0d0e11 !important;
}

.mobile-bottom-nav.fx-liquid::before,
.mobile-bottom-nav.fx-liquid .fxm-indicator {
    display: none !important;
}

/* Glassy floating top bar (feed mobile brand header) */
.fx-mob-topbar.fx-liquid {
    margin: 0;
    border-radius: 0;
    border: none !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.fx-mob-topbar.fx-liquid.fx-top-dark {
    border: none !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}

/* Crypto deposits: awaiting-payment pill, clickable pending row, tab count */
.fx-dep-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(209,0,84, .12);
    color: #d10054;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.fx-dep-clickable { cursor: pointer; transition: background-color .15s ease; }
.fx-dep-clickable:hover { background: rgba(209,0,84, .06); border-radius: .5rem; }

.fx-crypto-tab { position: relative; }
.fx-dep-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: .4rem;
    padding: 0 5px;
    border-radius: 999px;
    background: #d10054;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    vertical-align: middle;
}

/* === Crypto modal polish: real coin logos, copy feedback, mobile/theme === */
.fx-coin-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.fx-crypto-row .fx-coin-ico { margin-right: .1rem; }

/* Clickable address row (whole row copies) */
.fx-crypto-address-row {
    cursor: pointer;
    border: 1px solid rgba(138, 150, 163, .3);
    border-radius: .6rem;
    padding: .55rem .7rem;
    transition: border-color .15s ease, background-color .15s ease;
}
.fx-crypto-address-row:hover {
    border-color: var(--primary, #d10054);
    background: rgba(138, 150, 163, .06);
}
.fx-crypto-address-row .fx-crypto-address {
    border: none;
    padding: 0;
    background: transparent;
}
.fx-crypto-copy-ico { color: var(--primary, #d10054); flex: 0 0 auto; line-height: 0; }

/* "Address copied!" feedback */
.fx-crypto-copied {
    text-align: center;
    color: #22c55e;
    font-size: .82rem;
    font-weight: 700;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .2s ease, height .2s ease, margin .2s ease;
}
.fx-crypto-copied.is-show {
    height: 1.4rem;
    opacity: 1;
    margin: .2rem 0 .3rem;
}

/* Mobile: keep everything readable + tidy */
@media (max-width: 575.98px) {
    .fx-crypto-timer { font-size: 1.9rem !important; }
    .fx-crypto-qrbox { width: 190px !important; height: 190px !important; }
    #fx-crypto-pay-amount { font-size: 1.05rem; }
    .fx-crypto-row { padding: .65rem .2rem; }
    .fx-coin-ico { width: 32px; height: 32px; font-size: 1rem; }
    .fx-crypto-address { font-size: .74rem; }
    #fx-crypto-modal .modal-dialog { margin: .5rem; }
}

/* === Crypto modal: floating amount label, fee note, paid/cancel, popups === */
/* Floating label (like login) — label is ALWAYS floated up while a coin is
   selected, so the min–max placeholder shows underneath with no overlap. */
.fx-float-group { position: relative; }
.fx-float-input.form-control {
    height: 52px;
}
.fx-float-input.form-control::placeholder { color: rgba(138, 150, 163, .8); }
.fx-float-label {
    position: absolute;
    top: -.58rem;
    left: .6rem;
    margin: 0;
    padding: 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary, #d10054);
    background: #fff;
    border-radius: .2rem;
    pointer-events: none;
    transition: all .15s ease;
}
.deposit-theme-dark .fx-float-label { background: #232838; }

/* Tiny network-fee note */
.fx-crypto-feenote {
    font-size: .68rem;
    line-height: 1.3;
    color: rgba(138, 150, 163, .85);
    margin-top: .1rem;
    text-align: left;
}

/* Address selected (blue highlight after copy) */
.fx-crypto-address.is-selected {
    background: rgba(56, 132, 255, .18);
    border-radius: .3rem;
    box-shadow: 0 0 0 2px rgba(56, 132, 255, .18);
}

/* Pay screen action buttons: cancel low-key, "I've Paid" prominent */
.fx-crypto-pay-actions { gap: .6rem; }
.fx-crypto-cancel-btn {
    flex: 0 0 auto;
    background: transparent;
    color: rgba(138, 150, 163, .95);
    border: 1px solid rgba(138, 150, 163, .35);
    font-weight: 600;
    font-size: .85rem;
}
.fx-crypto-cancel-btn:hover { color: #ef4444; border-color: rgba(239, 68, 68, .5); }
.fx-crypto-paid-btn { flex: 1 1 auto; font-weight: 700; }

/* "Thanks for your payment" popup (overlays the pay pane) */
.fx-crypto-paid-pop {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .96);
    border-radius: .75rem;
    z-index: 5;
    padding: 1.5rem;
    color: #1c1e21;
}
/* Dark theme: the pop lives in the crypto modal which is appended to <body>, so key it off the
   site-wide body.fx-theme-dark (the .deposit-theme-dark container class doesn't reach it) so it
   isn't a jarring white box on dark. Also cover the local deposit-theme-dark wrapper. */
body.fx-theme-dark .fx-crypto-paid-pop,
.deposit-theme-dark .fx-crypto-paid-pop {
    background: rgba(24, 28, 38, .98);
    color: #e4e6eb;
}
#fx-crypto-modal .modal-body { position: relative; }
.fx-crypto-paid-pop.is-show { display: flex; animation: fxPopIn .25s ease; }
@keyframes fxPopIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.fx-crypto-paid-pop-inner { text-align: center; }
.fx-crypto-paid-pop-icon {
    width: 62px; height: 62px; margin: 0 auto .8rem;
    border-radius: 50%;
    background: #22c55e; color: #fff;
    font-size: 2rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(34, 197, 94, .4);
}
/* Title inherits the pop's color (dark text on light, light text on dark). */
.fx-crypto-paid-pop-title { font-weight: 800; font-size: 1.1rem; margin-bottom: .3rem; color: inherit; }
.fx-crypto-paid-pop-text { color: rgba(120, 130, 145, .95); font-size: .85rem; line-height: 1.4; }
body.fx-theme-dark .fx-crypto-paid-pop-text,
.deposit-theme-dark .fx-crypto-paid-pop-text { color: rgba(180, 188, 200, .95); }

/* Cancelled state box (matches screenshot) */
.fx-crypto-cancelled-box {
    border: 1px solid rgba(239, 68, 68, .4);
    background: rgba(138, 150, 163, .06);
    border-radius: .6rem;
    padding: 1.8rem 1rem;
}
.fx-crypto-cancelled-icon {
    width: 60px; height: 60px; margin-bottom: 1rem;
    border-radius: 50%;
    background: #ef4444; color: #fff;
    font-size: 2rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.fx-crypto-cancelled-text { color: #ef4444; font-weight: 700; }
.fx-crypto-close-btn {
    background: transparent;
    color: rgba(138, 150, 163, .95);
    border: 1px solid rgba(138, 150, 163, .35);
    font-weight: 600;
}

/* "Awaiting Confirmation" pill (user tapped I've Paid) */
.fx-dep-badge-paid {
    display: inline-flex;
    align-items: center;
    background: rgba(245, 158, 11, .14);
    color: #f59e0b;
    border-radius: 999px;
    padding: .18rem .6rem;
    font-size: .72rem;
    font-weight: 700;
}
.fx-crypto-paid-pop-icon.fx-q { background: #3b82f6; box-shadow: 0 6px 18px rgba(59, 130, 246, .4); }

/* Delete button on user's expired/cancelled deposits */
.fx-dep-del {
    border: none;
    background: transparent;
    color: rgba(138, 150, 163, .7);
    font-size: 1.25rem;
    line-height: 1;
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    transition: all .15s ease;
}
.fx-dep-del:hover { background: rgba(239, 68, 68, .12); color: #ef4444; }

/* === Wallet quick-add chips (deposit page) === */
.fx-quickadd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-quickadd-chip {
    border: 1px solid rgba(138, 150, 163, .35);
    background: transparent;
    color: #16151a;                 /* explicit so it never inherits a faint colour */
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
body.fx-theme-dark .fx-quickadd-chip { color: #e4e6eb; }
/* Hover/active: just a subtle bg tint + theme-correct text (white in dark, black in light) — no pink fill */
.fx-quickadd-chip:hover,
.fx-quickadd-chip:focus,
.fx-quickadd-chip.is-active {
    border-color: rgba(138, 150, 163, .6) !important;
    background: rgba(138, 150, 163, .12) !important;
    color: #16151a !important;                 /* light theme: black text */
}
body.fx-theme-dark .fx-quickadd-chip:hover,
body.fx-theme-dark .fx-quickadd-chip:focus,
body.fx-theme-dark .fx-quickadd-chip.is-active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;                    /* dark theme: white text */
}
.fx-quickadd {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .12);
}
body.fx-theme-dark .fx-quickadd { border: 1px solid rgba(255, 255, 255, .12); }
.fx-quickadd-edit-btn {
    font-weight: 700;
    padding: 4px 15px !important;
    border: 1px solid;
    border-radius: 5px;
}
.fx-quickadd-save-btn { flex: 0 0 auto; white-space: nowrap; min-width: 72px; }
.fx-quickadd-editor .form-control { min-width: 0; }

/* ===== Gift Drop: feed popup + reminder row ===== */
.fx-giftdrop-modal-content { border: none; border-radius: 18px; overflow: hidden; }
.fx-giftdrop-modal-content .modal-body { padding: 28px 22px 24px; position: relative; }
.fx-giftdrop-close { position: absolute; top: 10px; right: 14px; opacity: .5; }
.fx-giftdrop-icon {
    width: 74px; height: 74px; margin-bottom: 12px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #d10054, #7b2ff7);
    box-shadow: 0 10px 26px rgba(209,0,84, .38);
}
.fx-giftdrop-icon svg { width: 34px; height: 34px; }
.fx-giftdrop-amount { font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin: 4px 0 6px; }
.fx-giftdrop-message { font-size: .9rem; line-height: 1.45; margin-bottom: 16px; }
.fx-giftdrop-later {
    background: transparent;
    border: 1px solid rgba(138, 150, 163, .35);
    color: rgba(138, 150, 163, .95);
    font-weight: 600;
}
.fx-giftdrop-later:hover { color: inherit; }

/* Success state */
.fx-giftdrop-success { display: none; padding: 8px 0 2px; }
.fx-giftdrop-success.is-show { display: block; animation: fxPopIn .25s ease; }
.fx-giftdrop-success-ico {
    width: 60px; height: 60px; margin: 0 auto 10px;
    border-radius: 50%;
    background: #22c55e; color: #fff;
    font-size: 2rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(34, 197, 94, .4);
}
.fx-giftdrop-success-text { font-weight: 700; }

/* Reminder row (slim banner at feed top) */
.fx-giftdrop-reminder {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 10px 12px 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(209,0,84, .12), rgba(123, 47, 247, .12));
    border: 1px solid rgba(209,0,84, .25);
}
.fx-giftdrop-reminder.is-show { display: flex; }
.fx-giftdrop-reminder-ico { color: var(--primary, #d10054); flex: 0 0 auto; line-height: 0; }
.fx-giftdrop-reminder-text { flex: 1 1 auto; font-weight: 600; font-size: .88rem; }
.fx-giftdrop-reminder-btn {
    flex: 0 0 auto;
    border: none;
    background: var(--primary, #d10054);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
}
.fx-giftdrop-reminder-btn:hover { filter: brightness(1.06); }

/* ============================================================
   Liquid Glass — Phase 2: cards, buttons, modals (opt-in, safe)
   Theme-neutral translucent glass so it reads on light AND dark
   without a <body> theme hook. Desktop-emphasised.
   ============================================================ */
@media (min-width: 768px) {
    /* Feed post cards */
    .feed-box .post-box {
        border-radius: 18px;
        margin-bottom: 1rem;
        background: rgba(255, 255, 255, .04);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid rgba(138, 150, 163, .16);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .06);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .feed-box .post-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
        border-color: rgba(209,0,84, .22);
    }
    /* the <hr> separators between posts are redundant once cards float */
    .posts-wrapper .feed-box > hr,
    .feed-box + hr { display: none; }

    /* Feed sidebar widget cards (search, suggestions, hashtags) */
    .feed-widgets .search-box-wrapper,
    .feed-widgets .suggestions-box,
    .feed-widgets .fx-disc-block {
        border-radius: 16px;
    }
}

/* ============================================================
   Uniform feed/profile section spacing: EVERY top-level section
   (post cards, discovery strips "Made For You"/"Exclusive"/"Who To
   Follow", injected reels strips) gets exactly a 3px bottom gap —
   no more uneven margins. Applies on feed AND profile, all widths.
   ============================================================ */
/* every top-level feed/profile section → 3px bottom gap, no top margin.
   Higher-specificity `body` prefix so it beats feed-premium.css's own margins. */
body .feed-box .post-box,
body .posts-wrapper .post-box,
body .fx-disc-block,
body .fx-disc-clone,
body .feed-reels-widget {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}
/* the story row wrapper (px-3 py-2 neutral-bg holding #stories-swiper):
   trim its bottom so the gap after stories is also ~3px */
body .neutral-bg.py-2 {
    padding-bottom: 3px !important;
    margin-bottom: 0 !important;
}
/* Mobile: Normal container padding for Stories, Reels, and Discovery strips */
@media (max-width: 991.98px) {
    body .neutral-bg.py-2 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
    }
    .fx-disc-block,
    .feed-reels-widget {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
}
/* the <hr> spacers between posts collapse to nothing (the 3px comes
   from each card's own bottom margin) */
body .posts-wrapper hr,
body .feed-box hr {
    display: none !important;
}

/* Our own fx-modals → frosted glass content (all screen sizes) */
#fx-crypto-modal .modal-content,
#fx-gift-modal .modal-content,
.fx-giftdrop-modal-content,
#fx-quickadd-editor {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#fx-crypto-modal .modal-content,
#fx-gift-modal .modal-content,
.fx-giftdrop-modal-content {
    border: 1px solid rgba(138, 150, 163, .18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* Glassy primary buttons in our flows (subtle sheen, not a repaint) */
.fx-wallet-tile,
.fx-giftdrop-icon,
.deposit-continue-btn {
    position: relative;
    overflow: hidden;
}
.deposit-continue-btn::after,
.fx-wallet-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.deposit-continue-btn:hover::after,
.fx-wallet-tile:hover::after { transform: translateX(120%); }

/* ============================================================
   Phase 3 — Feed pro-polish (CSS only, no markup changes)
   Tighter density, louder money CTAs, consistent action pills,
   premium locked/PPV card. Theme-neutral so it works light+dark.
   ============================================================ */

/* --- Density: trim vertical rhythm so more content shows --- */
.feed-box .post-box .post-content.mt-3 { margin-top: .6rem !important; }
.feed-box .post-box .post-footer.mt-3 { margin-top: .55rem !important; padding-bottom: 5px; }
.feed-box .post-box .post-header { padding-top: .9rem; }
.feed-box .post-box { padding-bottom: .3rem; }

/* --- Action pills: uniform size + weight --- */
.post-footer .h-pill {
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.post-footer .h-pill:hover { transform: translateY(-1px); }
.post-footer .h-pill ion-icon,
.post-footer .h-pill .ion-icon-wrapper { font-size: 1.25rem; }

/* --- "Send a tip": make it the loud, money-colored CTA --- */
.post-footer .send-a-tip {
    padding: 0 .85rem;
    font-weight: 700;
    color: var(--primary, #d10054) !important;
    background: color-mix(in srgb, var(--primary, #d10054) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary, #d10054) 32%, transparent);
}
.post-footer .send-a-tip:hover {
    background: var(--primary, #d10054);
    color: #fff !important;
}
.post-footer .send-a-tip ion-icon,
.post-footer .send-a-tip .ion-icon-wrapper { color: inherit !important; }

/* --- Like active state pops --- */
.post-footer .react-button.active { background: color-mix(in srgb, var(--primary, #d10054) 12%, transparent); }

/* --- Stat counts: tabular, muted, tidy --- */
.post-count-details { gap: .35rem; font-variant-numeric: tabular-nums; }
.post-count-details .post-reactions-label,
.post-count-details .post-comments-label,
.post-count-details .post-tips-label { color: var(--fx-muted, #8a96a3); font-weight: 500; }

/* --- Locked / PPV card: premium vault look --- */
.locked-media { border-radius: 16px; overflow: hidden; }
.ppv-info-bg {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(10, 13, 20, .55) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 16px !important;
}
.ppv-info-bg .btn-primary {
    font-weight: 800;
    letter-spacing: .01em;
    padding-top: .7rem;
    padding-bottom: .7rem;
    border-radius: 12px;
    box-shadow: 0 8px 22px -8px var(--primary, #d10054);
}
.ppv-info-bg .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ============================================================
   Feed filter bar (All / Photos / Videos / PPV)
   Sticky pill tabs above the feed. Theme-neutral (works on the
   unified glass background), full page reload keeps pagination
   query-string intact (?filter=... appended automatically).
   ============================================================ */
.fx-feed-filters {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: .6rem;
    padding-bottom: .6rem;
    margin-bottom: .4rem;
    background: inherit;
}
.fx-feed-filters-inner {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.fx-feed-filters-inner::-webkit-scrollbar { display: none; }
.fx-feed-filter {
    flex: 0 0 auto;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--fx-muted, #8a96a3);
    background: rgba(138, 150, 163, .10);
    border: 1px solid rgba(138, 150, 163, .16);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fx-feed-filter:hover { color: inherit; text-decoration: none; background: rgba(138, 150, 163, .18); }
.fx-feed-filter.is-active {
    color: #fff;
    background: var(--primary, #d10054);
    border-color: var(--primary, #d10054);
}

/* ============================================================
   Right-rail SUGGESTIONS: compact, fits the rail width cleanly
   (match competitor — card fills the column, fixed aspect, tidy).
   ============================================================ */
@media (min-width: 768px) {
    .feed-widgets .suggestion-box,
    .feed-widgets .suggestions-box {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ============================================================
   Reels PPV / follow / subscription lock overlay
   ============================================================ */
.reel-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.reel-lock-inner {
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
}
.reel-lock-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.8rem;
}
.reel-lock-title { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.reel-lock-overlay .btn { font-weight: 700; border-radius: 999px; padding: .55rem 1.4rem; }

/* Guest "Sensitive Content" teaser — Fansly-style: the reel's own cover, heavily blurred,
   with a centered eye-off + text + dark pill button (NO padlock graphic). */
.reel-viewer-video--blurred {
    filter: blur(28px) brightness(.82);
    transform: scale(1.15);           /* hide blurred edges */
}
.reel-lock-guest { background: rgba(0,0,0,.28); backdrop-filter: none; -webkit-backdrop-filter: none;
    /* symmetric side padding so the centered text never runs under the right action rail */
    padding-left: 4rem; padding-right: 4rem; }
.reel-lock-guest .reel-lock-icon { background: transparent; font-size: 2.2rem; width: auto; height: auto; }
.reel-lock-guest .reel-lock-inner { max-width: 280px; gap: .5rem; }
.reel-lock-guest .reel-lock-title { font-size: 1.1rem; }
.reel-lock-guest .reel-lock-sub { font-size: .8rem; }
.reel-lock-sub { color: rgba(255,255,255,.85); font-size: .82rem; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,.6); margin-bottom: .35rem; }
.reel-lock-guest-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(20,20,24,.72); color: #fff !important;
    border: 1px solid rgba(255,255,255,.14);
    font-weight: 650; border-radius: 10px; padding: .6rem 1.2rem;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.reel-lock-guest-btn:hover { background: rgba(40,40,48,.85); color: #fff !important; }
.reel-lock-guest-btn ion-icon { font-size: 1.05rem; }

/* Grid card locked state */
.reel-grid-media.reel-grid-locked .reel-grid-poster { filter: blur(14px) brightness(.75); transform: scale(1.08); }
.reel-grid-lock {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #fff;
    font-size: 1.5rem;
    text-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.reel-grid-lock-price {
    font-size: .78rem;
    font-weight: 800;
    background: rgba(0,0,0,.5);
    padding: 2px 9px;
    border-radius: 999px;
}
/* CTA text under the padlock: "Follow to unlock" / "Unlock reel for $X" / etc */
.reel-grid-lock-cta {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    max-width: 90%;
    background: rgba(0,0,0,.55);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   Post video thumbnail chooser (create-post composer)
   ============================================================ */
/* The Dropzone tile that holds a chooser becomes a full-width block so the
   chooser (and its scrolling strip) can never push past the composer edge. */
.dropzone-previews .dz-preview.pt-host {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Dropzone's default .dropzone { padding: 20px 20px } pushes the preview
   right ~20px. Keep the top/bottom 20px, drop the left/right so the video
   sits flush with the "New post" heading. */
.fx-post-preview-zone.dropzone {
    padding: 20px 0 !important;
}
/* The video/image inside the chooser tile sits flush-left (no offset) */
.dz-preview.pt-host .video-preview-item,
.dz-preview.pt-host .video-preview-item.is-encoding {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-left: 0 !important;
}
.dz-preview.pt-host .dz-image,
.dz-preview.pt-host > img,
.dz-preview.pt-host > video {
    margin-left: 0 !important;
}

/* --- Upload progress bar (reels-style) + green success tick over the video --- */
.dz-preview.pt-host { position: relative; }
.dz-preview.pt-host .video-preview-item { position: relative; }

.dz-preview.pt-host .dz-progress {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    bottom: 8px !important;                 /* near the bottom of the video */
    width: 200px !important;
    max-width: calc(100% - 16px) !important;
    height: 6px !important;
    margin: 0 !important;
    border-radius: 3px !important;
    background: rgba(0, 0, 0, .5) !important;
    overflow: hidden;
    animation: none !important;              /* kill Dropzone's pulse */
    z-index: 30 !important;
}
.dz-preview.pt-host .dz-progress .dz-upload {
    background: #22c55e !important;          /* GREEN progress fill */
    border-radius: 3px !important;
}
/* % label floating just above the bar, green */
.dz-preview.pt-host .pt-progress-pct {
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: .72rem;
    font-weight: 800;
    color: #22c55e;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
/* Success tick centered over the video, green */
.dz-preview.pt-host .dz-success-mark {
    left: 50% !important;
    top: 40% !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: -27px !important;
    margin-top: -27px !important;
    z-index: 31 !important;
}
.dz-preview.pt-host .dz-success-mark svg path {
    fill: #22c55e !important;
    stroke: #22c55e !important;
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
}
.pt-chooser {
    border: 1px solid rgba(138, 150, 163, .2);
    border-radius: 12px;
    padding: 12px;
    background: rgba(138, 150, 163, .05);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.pt-chooser .pt-strip,
.pt-chooser .pt-scrubber,
.pt-chooser .pt-panel-frame,
.pt-chooser .pt-panel-suggested { max-width: 100%; }

/* Main preview (the actual video/image) in a chooser tile: keep the media's
   REAL aspect ratio, cap only the height, and never crop/dim it. */
.dz-preview.pt-host .video-preview-item,
.dz-preview.pt-host .video-preview-item.is-encoding {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
}
/* never dim the preview in the chooser (kills the "disabled" look) */
.dz-preview.pt-host .video-preview-item.is-encoding .video-preview {
    filter: none !important;
}
.dz-preview.pt-host .video-preview-item .video-preview,
.dz-preview.pt-host video,
.dz-preview.pt-host img,
.dropzone .dz-preview img,
.dropzone .dz-preview video {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 240px !important;
    object-fit: cover !important;
    background: transparent !important;
    filter: none !important;
}
/* Videos in the composer preview show the whole frame (contain); images stay cover. */
.dz-preview.pt-host .video-preview-item .video-preview,
.dz-preview.pt-host video,
.dropzone .dz-preview video {
    object-fit: contain !important;
    background: #000 !important;
}
.pt-chooser-title { font-size: .95rem; }

/* --- Tabs + arrows: identical look to reels --- */
.pt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; margin-bottom: .5rem; }
.pt-tabs { display: flex; flex-wrap: wrap; }
.pt-tab {
    border: 1px solid rgba(138, 150, 163, .4);
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: .78rem;
    padding: .35rem .55rem;
    margin-left: -1px;
    cursor: pointer;
    white-space: nowrap;
}
.pt-tab:first-child { border-radius: .4rem 0 0 .4rem; margin-left: 0; }
.pt-tab:last-child { border-radius: 0 .4rem .4rem 0; }
.pt-tab.active { background: rgba(138, 150, 163, .28); }

.pt-arrows { display: flex; flex-wrap: nowrap; margin-left: .5rem; }
.pt-arrow {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(138, 150, 163, .4);
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -1px;
}
.pt-arrow:first-child { border-radius: .4rem 0 0 .4rem; }
.pt-arrow:last-child { border-radius: 0 .4rem .4rem 0; }
.pt-arrow:disabled { opacity: .4; cursor: default; }

/* --- Suggested frame strip: fixed portrait tiles like reels --- */
.pt-strip {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: .3rem;
    scrollbar-width: none;
}
.pt-strip::-webkit-scrollbar { display: none; }
.pt-frame {
    position: relative;
    flex: 0 0 auto;
    /* width + height are set inline by JS from the media's real aspect ratio;
       only the height is capped here so tall/wide videos both fit tidily. */
    height: 120px;
    border-radius: .55rem;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    padding: 0;
    background: rgba(138, 150, 163, .15);
}
.pt-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Selected: fixed Facebook blue + check badge (matches reels) */
.pt-frame.is-selected { border-color: #d10054; }
.pt-frame .pt-tick {
    position: absolute; top: 5px; left: 5px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #d10054; color: #fff;
    font-size: 13px; font-weight: 700; line-height: 20px; text-align: center;
    display: none;
}
.pt-frame.is-selected .pt-tick { display: block; }

/* --- Choose frame scrubber --- */
.pt-frame-preview { width: 96px; height: 170px; object-fit: cover; border-radius: .55rem; background: #000; display: block; }
.pt-scrubber {
    position: relative;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, .2);
    cursor: pointer;
}
.pt-filmstrip {
    display: flex;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(138, 150, 163, .2);
    border-radius: 5px;
    overflow: hidden;
}
.pt-filmstrip img { height: 100%; flex: 1 1 0; min-width: 0; object-fit: cover; pointer-events: none; }
.pt-handle {
    position: absolute; top: 0; bottom: 0;
    width: 4px; margin-left: -2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
    left: 0;
}
/* Live seconds label that follows the scrubber handle */
.pt-scrubber { overflow: visible; }
.pt-frame-time {
    position: absolute;
    top: -22px;
    left: 0;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Friendly empty-feed state (replaces bare "No posts available")
   ============================================================ */
.fx-empty-feed { padding: 2.5rem 1rem 1rem; max-width: 640px; margin: 0 auto; }
.fx-empty-feed-icon {
    width: 72px; height: 72px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary, #d10054) 12%, transparent);
    color: var(--primary, #d10054);
}
.fx-empty-feed-title { font-weight: 800; margin-bottom: .4rem; }
.fx-empty-feed-sub { color: #8a96a3; font-size: .95rem; margin-bottom: 1.4rem; }
.fx-empty-feed-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.2rem; }
.fx-empty-feed-suggest-head {
    font-size: .78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #8a96a3; text-align: left; margin-bottom: .9rem;
}
.fx-empty-feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (max-width: 575.98px) { .fx-empty-feed-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Dark-theme contrast fixes: elements that hardcode a white
   background and would show white-on-dark in dark mode.
   ============================================================ */
body.fx-theme-dark .suggestion-box {
    background-color: #242526 !important;
    border-top: 1px solid #495057;
}
body.fx-theme-dark .feed-reels-widget { background: transparent !important; }
body.fx-theme-dark .fx-float-label { background: #242526 !important; }

/* The live search dropdown's CSS now lives in public/css/fx-top-header.css,
   loaded directly rather than through Minify. See that file for why. */

.rounded-xl { border-radius: 0 !important; }
.rounded-bottom-xl, .rounded-right-xl { border-bottom-right-radius: 0 !important; }
.rounded-bottom-xl, .rounded-left-xl { border-bottom-left-radius: 0 !important; }
.rounded-top-xl, .rounded-right-xl { border-top-right-radius: 0 !important; }
.rounded-top-xl, .rounded-left-xl { border-top-left-radius: 0 !important; }

/* Kill the tiny (1-5px) horizontal scroll on mobile — some element (100vw / negative
   margin) pokes past the viewport. The feed only scrolls vertically, so clipping the
   x-overflow on the page is safe and removes the stray scrollbar. */
@media (max-width: 991.98px) {
    html, body {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
    }
    /* Hide the vertical scrollbar on mobile (it stole a few px on the right and caused
       100vw overflow). Scroll still works — just no visible bar. */
    html, body { scrollbar-width: none; -ms-overflow-style: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
    /* Any full-width row/container never wider than the viewport */
    .main-wrapper, .container, .container-fluid, .row { max-width: 100% !important; }
    .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Brand "X" in the FansXpress wordmark — brand colour so it pops / feels unique.
   #d10054 so ThemeGenerator recolours it with the admin theme. */
/* .fx-brand-x moved to public/css/fx-top-header.css -- see that file. */

/* ===== Mobile: full-width feed content (Zero 1-2px Side Gap Website-Wide) ===== */
@media (max-width: 991.98px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .flex-fill,
    .main-wrapper,
    .content-wrapper,
    .fx-layout-content,
    .container,
    .container-fluid,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .row,
    .second,
    .feed-box,
    .posts-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    .border-left,
    .border-right,
    .content-wrapper.border-left,
    .content-wrapper.border-right,
    .fx-layout-content.border-left,
    .posts-wrapper .post-box,
    .feed-box .post-box,
    .fx-disc-block {
        border-left: 0 !important;
        border-right: 0 !important;
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        border-radius: 0 !important;
    }

    /* Restore proper side padding for landing page & footer on mobile */
    .fxh .container,
    .home-page .container,
    .fxh .container-fluid,
    .fx-footer .container,
    .fx-footer .container-fluid {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* Mobile bottom nav icon visibility (line vs fill) */
.mobile-bottom-nav .fxm-item .fxm-ic,
.mobile-bottom-nav .fxm-item > svg.fxm-ic {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
    stroke: none !important;
    stroke-width: 0 !important;
    filter: none !important;
}
.mobile-bottom-nav .fxm-item > svg.fxm-ic.fxm-ic-line,
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic.fxm-ic-line { display: inline-block !important; }
.mobile-bottom-nav .fxm-item > svg.fxm-ic.fxm-ic-fill,
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic.fxm-ic-fill { display: none !important; }
.mobile-bottom-nav .fxm-item.active > svg.fxm-ic.fxm-ic-line,
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg.fxm-ic.fxm-ic-line { display: none !important; }
.mobile-bottom-nav .fxm-item.active > svg.fxm-ic.fxm-ic-fill,
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg.fxm-ic.fxm-ic-fill { display: inline-block !important; }

/* Top-left cover image 3-line hamburger menu toggle (Mobile only, transparent background with drop-shadow) */
/*
    The hamburger moves right to make room for the back arrow.

    Both used to sit at 12px from the left edge, on top of each other. Back belongs in the
    corner -- it is where every app puts it and where a thumb reaches for it -- so the menu,
    which is only on this page at all as a convenience, gives way and sits beside it.
*/
.profile-cover-menu-btn {
    position: absolute;
    top: 12px;
    left: 56px;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .profile-cover-menu-btn {
        display: none !important;
    }
}
.profile-cover-menu-btn svg {
    stroke: #ffffff !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) !important;
}
.profile-cover-menu-btn:hover,
.profile-cover-menu-btn:focus {
    background: transparent !important;
    transform: scale(1.08);
}

/* ============================================================
   Reels Mobile Bottom Navbar Guarantee & Fixes
   ============================================================ */
@media (min-width: 768px) {
    #fx-mobile-bottom-nav-wrap,
    .mobile-bottom-nav,
    .fixed-bottom:has(.mobile-bottom-nav) {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    #fx-mobile-bottom-nav-wrap,
    .fixed-bottom,
    .fixed-bottom:has(.mobile-bottom-nav),
    .fixed-bottom .mobile-bottom-nav,
    body.reel-viewer-open .fixed-bottom,
    body.reel-viewer-open #fx-mobile-bottom-nav-wrap,
    body.reels-page-active .fixed-bottom,
    body.reels-page-active #fx-mobile-bottom-nav-wrap {
        z-index: 99999 !important;
        display: block !important;
    }
}

/* ============================================================
   ROOM AT THE BOTTOM FOR THE FIXED NAV

   The nav is position:fixed, so it is out of the document flow entirely and the page does
   not know it exists -- the last thing on any page ended up underneath it, unreadable and
   often unclickable. The space is reserved on the body so every page gets it at once,
   rather than each page remembering to leave room for a bar it does not render.

   The nav is 56px; the extra .5rem stops content ending flush against it. safe-area-inset
   covers the home indicator on an iPhone, where the bar itself sits higher than 56px from
   the physical bottom edge.

   REELS IS EXCLUDED. It is deliberately full-height with the nav floating over the video,
   so padding there would leave a strip of background under the reel.
   ============================================================ */
@media (max-width: 767.98px) {
    /*
        !important, and a matching selector, because an earlier mobile rule sets
        "padding: 0 !important" on html, body to kill horizontal overflow. That is a
        shorthand, so it resets all four sides -- an ordinary padding-bottom here loses to
        it outright, which is exactly what happened the first time: the declaration appeared
        in DevTools with a line through it and the nav went on covering the page.
    */
    html body {
        padding-bottom: calc(56px + .5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /*
        ONLY THE FULL-SCREEN VIEWER IS EXEMPT, not every page with reels on it.

        The viewer covers the whole window with the nav floating over the video, so padding
        there would open a strip of background under it. But the reels LIST and the explore
        page are ordinary scrolling pages -- the nav sits over their last row exactly as it
        does anywhere else, and exempting them by class name hid their final item behind it.

        reel-viewer-open is set while the viewer is open; the other two describe pages that
        merely contain reels.
    */
    html body.reel-viewer-open {
        padding-bottom: 0 !important;
    }
}

/* Force dark theme for bottom nav on Reels page & reel viewer */
body.reel-viewer-open .mobile-bottom-nav,
body.reels-page-active .mobile-bottom-nav,
.reels-page ~ .fixed-bottom .mobile-bottom-nav,
body:has(#reels-feed) .mobile-bottom-nav {
    background: #0d0e11 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus),
body.reels-page-active .mobile-bottom-nav .fxm-item:not(.fxm-item--plus),
body:has(#reels-feed) .mobile-bottom-nav .fxm-item:not(.fxm-item--plus),
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) .fxm-ic,
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg,
body.reel-viewer-open .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg path,
body.reels-page-active .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg,
body.reels-page-active .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg path,
body:has(#reels-feed) .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg,
body:has(#reels-feed) .mobile-bottom-nav .fxm-item:not(.fxm-item--plus) svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

@media (max-width: 991.98px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: auto;
        margin-left: auto;
    }
}

.mobile-bottom-nav .fxm-item.active::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 5% !important;
    right: 20% !important;
    width: 85% !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--primary, #d10054) !important;
    background-color: #d10054 !important;
    z-index: 99 !important;
    transform: none !important;
    display: block !important;
}

@media (min-width: 992px) {
    .dropdown.dropdown-hover:hover > .dropdown-menu, .dropdown .dropdown-menu.show {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 15px, 5px) !important;
    }
}

@media (max-width: 1199.98px) {
    .dropdown:not(.nav-item) .dropdown-menu.show {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 0px, 0px) !important;
        width: 175px !important;
        min-width: 175px !important;
    }
}

@media (max-width: 1199.98px) {
    .dropdown:not(.nav-item) .dropdown-menu {
        display: block;
        opacity: 0;
        top: 0;
        transform-origin: 50% 0;
        pointer-events: none;
        transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0, 37px, 0) !important;
        transition: visibility .25s, opacity .25s, transform .25s;
        backface-visibility: hidden;
        will-change: transform, box-shadow;
        box-shadow: 0 8px 26px -4px rgba(20, 20, 20, .15), 0 8px 9px -5px rgba(20, 20, 20, .06);
        width: 175px !IMPORTANT;
        min-width: 175px !IMPORTANT;
    }
}




/* =========================================================================
   SKELETON LOADERS (replace spinners) — theme-aware, responsive.
   .fx-skeleton is the shimmering base; page-specific layouts compose it.
   A container shows its skeletons while loading and hides them when the real
   content is in (JS toggles a .is-loaded / d-none, or removes the block).
   ========================================================================= */
.fx-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(128, 128, 128, .14);
    border-radius: 6px;
}
.fx-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(128, 128, 128, .22), transparent);
    animation: fxSkeletonShimmer 1.25s ease-in-out infinite;
}
@keyframes fxSkeletonShimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .fx-skeleton::after { animation: none; }
}

/* ---- Post-card skeleton (feed / profile / unlocked / bookmarks / single post) ---- */
.fx-post-skeletons { display: flex; flex-direction: column; gap: 1rem; }
/* The INITIAL / tab-load skeleton fills ~70vh so it doesn't look like a thin sliver (cards
   flex-grow to share the height). The pagination FOOTER skeleton must NOT do this — it sits
   below real content while the next page loads, and a 70vh footer flashing in/out reads as
   "the content vanished". So the tall behaviour is opt-in via .fx-post-skeletons--full. */
.fx-post-skeletons--full { min-height: 70vh; }
.fx-post-skeletons--full .fx-post-skeleton { flex: 1 1 0; }
.fx-post-skeleton {
    background: rgba(128, 128, 128, .06);
    border: 1px solid rgba(128, 128, 128, .16);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.fx-post-skeleton__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.fx-post-skeleton__avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; }
.fx-post-skeleton__head-lines { display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.fx-post-skeleton__line { height: 10px; border-radius: 6px; }
.fx-post-skeleton__line--sm { width: 30%; }
.fx-post-skeleton__line--md { width: 55%; }
/* The media block grows to fill the card so two cards reach the 70vh min-height. */
.fx-post-skeleton__media { width: 100%; flex: 1 1 auto; min-height: 12rem; border-radius: 10px; margin-bottom: 1rem; }
.fx-post-skeleton__foot { display: flex; align-items: center; gap: .6rem; }
.fx-post-skeleton__btn { height: 26px; width: 62px; border-radius: 20px; }
.fx-post-skeleton__btn--right { margin-left: auto; width: 62px; }

/* Mobile: the full-height (initial/tab) skeleton is 30vh and shows only ONE card. */
@media (max-width: 767.98px) {
    .fx-post-skeletons--full { min-height: 30vh; }
    .fx-post-skeleton { padding: .85rem; border-radius: 12px; }
    .fx-post-skeleton__avatar { width: 38px; height: 38px; flex-basis: 38px; }
    .fx-post-skeleton__media { min-height: 10rem; }
    .fx-post-skeleton__btn { width: 54px; }
    /* Show just the first card on mobile (full-height variant only). */
    .fx-post-skeletons--full .fx-post-skeleton:nth-child(n+2) { display: none; }
}

/* ---- Reel-grid skeleton (explore reels / profile reels grid) ---- */
/* Columns are defined together with the real .reels-grid in pages/reels.css, so the skeleton
   ALWAYS matches the number of reels-per-row on the current device (no separate breakpoints).
   This app.css block is a fallback (global) for any page that renders the skeleton without
   reels.css loaded, and it clips to a single row so it never becomes a full-screen block.
   The 9:16 card aspect makes one row's height follow the card width automatically. */
.fx-reel-grid-skeletons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    align-content: start;
    grid-template-rows: auto;  /* first row sizes to the card's 9:16 aspect */
    grid-auto-rows: 0;         /* any extra cards collapse into zero-height rows */
    overflow: hidden;          /* and are clipped, so only ONE row ever shows */
}
.fx-reel-grid-skeleton { aspect-ratio: 9 / 16; border-radius: 10px; }

/* The desktop top header's CSS now lives in public/css/fx-top-header.css,
   loaded directly rather than through Minify. See that file for why. */

body.fx-theme-dark .fx-right-avatar-dot {
    border-color: #18191a !important;
}

/* The header replaces the old in-column right-topbar and sidebar logo, so hide those on desktop
   to avoid duplicates (kept in the DOM for mobile / fallback). */
@media (min-width: 768px) {
    .fx-right-topbar { display: none !important; }
}

/* Left sidebar inner: just fill its 22% column and the full height of the locked layout (the
   container is height-capped to the viewport under the fixed header, and .fx-layout-sidebar is
   height:100% + overflow:hidden above). No position/sticky needed — the whole left rail is held in
   place by the fixed container, and it never scrolls. Width stays the original 22% (liquid-sidebar.css). */
@media (min-width: 768px) {
    .side-menu.fx-glass-sidebar {
        position: static !important;
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   REELS PLAYER TOP BAR & LIBRARY FIX (Update 652)
   ========================================================================== */

/* Top bar: ALWAYS 100% fixed at top, untransformed during vertical swipe */
.reel-top-bar,
.reel-viewer-phone .reel-top-bar,
.reel-viewer-phone.is-swipe-dragging .reel-top-bar,
.reel-viewer-phone.is-swipe-committing .reel-top-bar,
.reel-viewer-phone.is-swipe-resetting .reel-top-bar {
    position: absolute !important;
    top: 0.8rem !important;
    left: 0.8rem !important;
    right: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.reel-top-bar .reel-top-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    pointer-events: auto !important;
}

/* Top bar buttons (Back, Search, 3-Dots): base z-index 1, subtle drop-shadow only */
.reel-top-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: transform 0.16s ease !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.reel-top-btn:hover,
.reel-top-btn:active {
    background: transparent !important;
    transform: scale(1.1) !important;
    color: #ffffff !important;
}

.reel-top-btn ion-icon,
.reel-top-btn svg {
    font-size: 1.35rem !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    color: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75)) !important;
}

/* ==========================================================================
   REELS PLAYER TOP BAR & YOUR LIBRARY OVERLAY FIX (Update 654)
   ========================================================================== */

/* Top bar buttons stay at base z-index 100 */
.reel-top-bar,
.reel-top-btn,
.reel-mobile-close,
.reel-search-btn,
.reel-library-btn {
    z-index: 100 !important;
}

/* Your Library sheet & backdrop overlay ON TOP (z-index 999999) so top row icons are UNDER it */
.reel-sheet.reel-library-sheet,
.reel-library-panel {
    z-index: 999999 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.reel-sheet-backdrop {
    z-index: 99998 !important;
}

/* Hide top bar ONLY when the top "Your Library" sheet itself is open */
.reel-viewer-phone.reel-library-open .reel-top-bar,
.reel-library-open .reel-top-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
}

/* ==========================================================================
   REELS PLAYER SHEETS & SWIPE GUARD (Update 656)
   ========================================================================== */

/* Top sheet (Your Library) height & scrollable fix so no bottom items are cut off/hidden */
.reel-sheet.reel-library-sheet {
    max-height: 85vh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: 1.5rem !important;
}

/* Bottom 3-dot options panel: Positioned at fixed bottom:0, z-index 99999999 to COMPLETELY COVER / OVERLAY the mobile bottom navbar underneath it */
.reel-sheet.reel-more-sheet {
    z-index: 99999999 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    color: #121212 !important;
    border-top-left-radius: 1.2rem !important;
    border-top-right-radius: 1.2rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.45) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

.reel-sheet-backdrop {
    z-index: 99999998 !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-handle {
    background: #c8c8c8 !important;
}

/* Secondary rounded container border wrapping all menu items inside bottom 3-dot panel */
.reel-sheet.reel-more-sheet .reel-sheet-list {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0.85rem !important;
    background: #ffffff !important;
    padding: 0.25rem !important;
    margin: 0.5rem 0.8rem 1.2rem !important;
    overflow: hidden !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    padding: 0.65rem 0.85rem !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-item:last-child {
    border-bottom: none !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-title,
.reel-sheet.reel-more-sheet .reel-sheet-item,
.reel-sheet.reel-more-sheet .reel-sheet-label,
.reel-sheet.reel-more-sheet button,
.reel-sheet.reel-more-sheet a {
    color: #121212 !important;
}

.reel-sheet.reel-more-sheet .reel-sheet-item:hover,
.reel-sheet.reel-more-sheet .reel-sheet-item:active {
    background: rgba(0, 0, 0, 0.06) !important;
}

.reel-sheet.reel-more-sheet ion-icon,
.reel-sheet.reel-more-sheet svg,
.reel-sheet.reel-more-sheet .reel-sheet-ico {
    color: #121212 !important;
    fill: #121212 !important;
    stroke: #121212 !important;
    filter: none !important;
}

/* ============================================================
   REELS PLAYER UNIFIED Z-INDEX & SHEET ISOLATION SYSTEM (Update 675)
   ============================================================ */

/* 1. CLOSED STATES: Backdrop and sheets non-interactive & hidden when closed */
.fx-top-library-sheet.d-none,
.fx-top-library-sheet:not(.is-open),
.reel-sheet.reel-library-sheet.d-none,
.reel-sheet.reel-library-sheet:not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -100 !important;
    transform: translateY(-100%) !important;
}

.fx-bottom-fb-sheet.d-none,
.fx-bottom-fb-sheet:not(.is-open),
.reel-sheet.reel-fb-more-sheet.d-none,
.reel-sheet.reel-fb-more-sheet:not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -100 !important;
    transform: translateY(100%) !important;
}

.reel-sheet-backdrop.d-none,
.reel-sheet-backdrop:not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -100 !important;
}

/* 2. OPEN BACKDROP: Active only when a sheet is open */
.reel-sheet-backdrop.is-open:not(.d-none) {
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9000000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    transform: none !important;
}

/* 3. Base top bar & buttons when NO sheet is open */
.reel-top-bar {
    z-index: 10000 !important;
    position: absolute !important;
    top: 0.8rem !important;
    left: 0.8rem !important;
    right: 0.8rem !important;
    transform: none !important;
    pointer-events: auto !important;
}

.reel-top-btn,
.reel-mobile-close,
.reel-search-btn,
.fx-top-library-btn,
.reel-library-btn {
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. Mobile bottom nav & player viewport with real Mobile Chrome dvh / safe-area support */
@media (max-width: 767.98px) {
    .reel-swipe-stage,
    .reel-swipe-preview {
        bottom: 56px !important;
        bottom: calc(0px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
    }

    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer,
    .reel-viewer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 56px !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        height: calc(100vh - 56px) !important;
        height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
        background: #000000 !important;
        z-index: 2050 !important;
    }

    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-actions,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-actions,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-overlay-text,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-bottom-bar,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer-details,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-overlay-text,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-bottom-bar,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .reel-viewer-details {
        bottom: 0.8rem !important;
        z-index: 2060 !important;
    }

    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) #fx-mobile-bottom-nav-wrap,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .fixed-bottom,
    body.reel-viewer-open:not(.fx-sheet-open):not(.reel-sheet-open) .mobile-bottom-nav,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) #fx-mobile-bottom-nav-wrap,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .fixed-bottom,
    body.reels-page-active:not(.fx-sheet-open):not(.reel-sheet-open) .mobile-bottom-nav,
    body:has(#reels-feed):not(.fx-sheet-open):not(.reel-sheet-open) #fx-mobile-bottom-nav-wrap,
    body:has(#reels-feed):not(.fx-sheet-open):not(.reel-sheet-open) .fixed-bottom,
    body:has(#reels-feed):not(.fx-sheet-open):not(.reel-sheet-open) .mobile-bottom-nav {
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: #0d0e11 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        z-index: 99999 !important;
    }
}

/* 5. Mobile bottom nav WHEN BOTTOM SHEET IS OPEN: Completely hidden & suppressed */
body.fx-bottom-fb-open #fx-mobile-bottom-nav-wrap,
body.fx-bottom-fb-open .fixed-bottom,
body.fx-bottom-fb-open .mobile-bottom-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

#reels-player {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000 !important;
    z-index: 9999999 !important;
}

@media (min-width: 768px) {
    .reel-viewer,
    .reel-viewer-phone {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #000000 !important;
        z-index: 9999999 !important;
    }
}

.mobile-bottom-nav .fxm-item.active::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 5% !important;
    right: 20% !important;
    width: 85% !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--primary, #d10054) !important;
    background-color: #d10054 !important;
    z-index: 99 !important;
    transform: none !important;
    display: block !important;
}

/* 6. TOP SHEET ("Your Library") - 100% ISOLATED STYLE */
.fx-top-library-sheet.is-open:not(.d-none),
.reel-sheet.reel-library-sheet.is-open:not(.d-none) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 85vh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: 2rem !important;
    background: #18191a !important;
    color: #ffffff !important;
    border-bottom-left-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hide top bar ONLY when top "Your Library" sheet itself is open */
.reel-viewer-phone.fx-top-library-open .reel-top-bar,
.reel-viewer-phone.reel-library-open .reel-top-bar,
.fx-top-library-open .reel-top-bar,
.reel-library-open .reel-top-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 7. BOTTOM SHEET (Facebook Reels Options) - 100% ISOLATED STYLE */
.fx-bottom-fb-sheet.is-open:not(.d-none),
.reel-sheet.reel-more-sheet.reel-fb-more-sheet.is-open:not(.d-none) {
    position: fixed !important;
    top: 3.8rem !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - 3.8rem) !important;
    height: calc(100dvh - 3.8rem) !important;
    max-height: calc(100vh - 3.8rem) !important;
    max-height: calc(100dvh - 3.8rem) !important;
    background: #f0f2f5 !important;
    color: #050505 !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.fx-bottom-fb-handle,
.reel-sheet.reel-more-sheet.reel-fb-more-sheet .reel-sheet-handle {
    width: 40px !important;
    height: 4px !important;
    background: #bcc0c4 !important;
    border-radius: 2px !important;
    margin: 10px auto 6px !important;
    flex: 0 0 auto !important;
}

.fx-bottom-fb-scroll-area,
.reel-fb-scroll-area {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    padding: 6px 10px 30px !important;
    margin: 0 !important;
}

.reel-fb-group {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    padding: 2px 0 !important;
}

.reel-fb-group:last-child {
    margin-bottom: 0 !important;
}

/* 8. Requested SVG Icon Styling for Top Library & Bottom 3-Dot Buttons */
.fx-top-library-btn svg,
.reel-library-btn svg,
.fx-bottom-more-btn svg,
.reel-more svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 2px !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
}

/*
    The 3-dot INSIDE the action rail carries no ring -- that circle belongs to the header
    button, which the selector above cannot tell apart from this one. The rail's own sizes
    are set in pages/reels.css, which loads after this file on the reels pages and wins.
*/
.fx-bottom-more-btn.reel-action svg,
.fx-bottom-more-btn.reel-action ion-icon,
.reel-more.reel-action svg,
.reel-more.reel-action ion-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 1.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.reel-fb-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.reel-fb-item:hover,
.reel-fb-item:active {
    background: #e4e6eb !important;
}

.reel-fb-item.is-muted {
    opacity: 0.55 !important;
    cursor: default !important;
}

.reel-fb-ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    color: #050505 !important;
    flex: 0 0 auto !important;
}

.reel-fb-ico svg {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: #050505 !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: none !important;
}

.reel-fb-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.reel-fb-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #050505 !important;
    line-height: 1.2 !important;
}

.reel-fb-subtitle {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #65676b !important;
    line-height: 1.2 !important;
}


/* ---------------------------------------------------------------------------
   Crypto deposit modal above the mobile bottom nav.

   The nav sits at z-index 2200 (see .mobile-bottom-nav) so it stays above
   full-screen overlays, but a Bootstrap modal is only 1050/1040 -- so the deposit
   sheet slid UNDER the menu on mobile and its buttons were unreachable.

   Raised above the nav, backdrop included, so the modal and its actions stay
   usable. Scoped to this one modal: every other overlay keeps the existing
   ordering deliberately.
   --------------------------------------------------------------------------- */
/* Above the mobile bottom nav. NOTE the value: the nav WRAPPER
   (#fx-mobile-bottom-nav-wrap / .fixed-bottom) is z-index 99999 !important under
   767.98px -- not the 2200 on .mobile-bottom-nav itself. An earlier 2400 here was far
   too low and the sheet still sat behind the menu. */
#fx-crypto-modal {
    z-index: 100020 !important;
}

#fx-crypto-modal ~ .modal-backdrop,
body.fx-crypto-open .modal-backdrop {
    z-index: 100010 !important;
}

@media (max-width: 991.98px) {
    /* Clear of the nav and the home indicator, so the bottom actions stay tappable. */
    #fx-crypto-modal .modal-dialog {
        margin-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* --- Pay pane readability -------------------------------------------------- */

/* The warning is important but it is not the headline -- it was crowding the amount,
   which is the number the user actually has to send. */
.fx-crypto-network-note {
    font-size: .72rem;
    line-height: 1.35;
    opacity: .85;
}

.fx-crypto-network-line {
    font-size: .82rem;
}

/* Breathing room above the amount so it reads as its own line, not a continuation
   of the warning text. */
#fx-crypto-pay-amount {
    margin-top: .85rem;
    /* Tap to copy, and still selectable by hand. */
    user-select: text;
    -webkit-user-select: text;
    cursor: pointer;
}

#fx-crypto-pay-amount:hover {
    opacity: .82;
}

#fx-crypto-pay-usd {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

/* The final disclaimer is fine print, so it reads as fine print. */
#fx-crypto-modal .fx-crypto-pay-note {
    font-size: .7rem;
    line-height: 1.35;
    opacity: .8;
}


/* ---------------------------------------------------------------------------
   Crypto deposit: network selector.

   A coin can be sent over several chains and EACH HAS ITS OWN ADDRESS, so this
   choice decides the address shown on the pay step. Sits under the live rate,
   above Continue.
   --------------------------------------------------------------------------- */
.fx-crypto-network-select {
    height: auto;
    padding: .55rem .75rem;
    font-size: .9rem;
}

/* "Change" -- back to the coin list without closing the modal. */
.fx-crypto-change {
    white-space: nowrap;
    cursor: pointer;
}


/* ---------------------------------------------------------------------------
   Crypto pay step.

   SCOPED under .fx-crypto-paycard on purpose. Older rules for the previous layout
   are still in this file and still match -- .fx-crypto-address carries its own
   border/padding, and .fx-crypto-address-row is a bordered box. Inside the card
   those drew a box within a box; they are neutralised here rather than deleted,
   because they still style the other panes.
   --------------------------------------------------------------------------- */
.fx-crypto-paycard {
    border: 1px solid rgba(138, 150, 163, .22);
    border-radius: 16px;
    padding: 0 1.05rem;
    margin: .25rem 0 1rem;
    text-align: left;
    background: rgba(138, 150, 163, .04);
}

.fx-crypto-paycard .fx-crypto-payrow {
    padding: .95rem 0;
    border-bottom: 1px solid rgba(138, 150, 163, .16);
}

.fx-crypto-paycard .fx-crypto-payrow:last-child {
    border-bottom: 0;
}

.fx-crypto-paycard .fx-crypto-payrow-label {
    font-size: .74rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .3rem;
}

/* "You receive" is a footnote to the amount above it, not a row of its own. */
.fx-crypto-paycard .fx-crypto-payrow--sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    border-bottom: 1px solid rgba(138, 150, 163, .16);
}

.fx-crypto-paycard .fx-crypto-payrow--sub .fx-crypto-payrow-label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
}

/* The tappable value + icon. */
.fx-crypto-paycard .fx-crypto-payrow-body {
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    border-radius: 10px;
    margin: 0 -.4rem;
    padding: .25rem .4rem;
    transition: background-color .15s ease;
}

.fx-crypto-paycard .fx-crypto-payrow-body:hover {
    background: rgba(138, 150, 163, .1);
}

.fx-crypto-paycard .fx-crypto-payrow-value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    /* An address has no spaces: it must wrap mid-string or it widens the modal. */
    word-break: break-all;
}

/* NEUTRALISE the inherited box. The address keeps its old class for the other
   panes, so it is overridden here rather than removed from the markup. */
.fx-crypto-paycard .fx-crypto-address,
.fx-crypto-paycard .fx-crypto-address-row {
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

/* A wallet address is read character by character -- monospace makes 0/O and 1/l
   distinguishable, which matters when someone is checking what they pasted. */
.fx-crypto-paycard .fx-crypto-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem !important;
    letter-spacing: .01em;
}

/* The copy control reads as a button, so it is obvious both values are copyable. */
.fx-crypto-paycard .fx-crypto-copy-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(138, 150, 163, .14);
    opacity: .85;
    transition: background-color .15s ease, opacity .15s ease;
}

.fx-crypto-paycard .fx-crypto-payrow-body:hover .fx-crypto-copy-ico {
    background: rgba(209, 0, 84, .14);
    color: var(--primary, #d10054);
    opacity: 1;
}

/* Network is a fact, not an action: no copy affordance, no hover. */
.fx-crypto-paycard #fx-crypto-network {
    font-size: 1rem;
}

/* The warning sits under the card, tied to the Network row above it. */
.fx-crypto-network-note-box {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border: 1px solid rgba(230, 162, 60, .38);
    background: rgba(230, 162, 60, .09);
    border-radius: 13px;
    padding: .8rem .9rem;
    margin-bottom: 1rem;
    font-size: .78rem;
    line-height: 1.45;
    color: #e6a23c;
}

/* d-none must still win over the flex above, or the box shows with no network set. */
.fx-crypto-network-note-box.d-none {
    display: none !important;
}

.fx-crypto-network-note-box .fx-crypto-warn-ico {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: .08rem;
}

.fx-crypto-network-note-box strong {
    display: block;
    margin-bottom: .15rem;
}

/* The detail line is quieter than the heading it explains. */
.fx-crypto-network-note-box .fx-crypto-network-note {
    opacity: .85;
}

/* Closing disclaimer: fine print, and it should read as fine print. */
#fx-crypto-modal .fx-crypto-pay-note {
    font-size: .72rem;
    line-height: 1.45;
    opacity: .62;
}

/* Legacy block from the first version of this card, kept below only so the file
   reads in order. Superseded by the scoped rules above.
   --------------------------------------------------------------------------- */

/* ============================================================
   MESSENGER INPUT: NO SCROLLBAR

   The box grows to fit what is typed (messenger.textAreaAdjust), so the scrollbar had
   nothing to scroll -- it just sat inside the rounded field looking like a defect, and on a
   narrow phone it ate a noticeable slice of an already small input.

   Hidden rather than disabled: overflow-y stays auto so the box can still scroll once it
   hits its maximum height and stops growing, which is the one case where scrolling is real.
   Only the bar itself is taken away, on each engine's own vendor rule.
   ============================================================ */
.messageBoxInput {
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* old Edge */
}

.messageBoxInput::-webkit-scrollbar {   /* Chrome, Safari, and everything else Blink */
    width: 0;
    height: 0;
    display: none;
}

/*
    Story create, on a phone: the page padding, the card's border and card-body's own 1.25rem
    stacked up and left the fields in a narrow strip down the middle. The body gives up most
    of its padding at small widths -- the frame is worth less than the room to type in.
*/
@media (max-width: 575.98px) {
    .story-panel > .card-body {
        padding: .625rem;
    }
}

/* ============================================================
   CREATE PAGES: NO COLUMN GUTTER ON A PHONE

   Bootstrap gives every .col-* a built-in 15px of left and right padding -- the gutter that
   separates columns sitting side by side. On a phone these columns are stacked one above the
   other, so there is nothing to separate: the 30px is spent narrowing the only column on
   screen, on top of the page and panel padding already there.

   Removed only below the breakpoint where the columns actually sit side by side. From md up
   the gutter is doing its job and is left alone.
   ============================================================ */
@media (max-width: 767.98px) {
    .fx-create-col {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
    THE STORIES ROW'S OWN SPACING

    The row carries Bootstrap's px-3 py-2, which are !important utilities -- so this class
    has to be !important too, on a selector at least as specific, or the utilities win.
    Rather than editing the markup's classes, the extra class overrides them where each one
    is wrong and leaves the rest alone.

    DESKTOP: no side padding. The row sits inside a column that already has its own, so the
    1rem on each side was doubling up and pulling the story cards away from the edge the
    posts below them line up against.

    MOBILE: no vertical padding. The row is directly under the search bar and directly above
    the feed, both of which bring their own spacing; the extra half-rem top and bottom just
    pushed the first post further down a screen that has none to spare.
*/
@media (min-width: 768px) {
    .fx-stories-row-flush.px-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .fx-stories-row-flush.py-2 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/*
    The story cards on a phone: full width of their slide, 9:16, pushed clear of what sits
    above them.

    margin-top rather than the wrapper offset tried before. Moving the track with
    position/top shifted the cards without telling the panel around them anything had moved,
    so the panel went on reserving the old height and clipped their top and bottom edges. A
    margin is part of the layout: the row grows to accommodate it and nothing gets cut.

    aspect-ratio with height:auto lets each card size itself from its own width, so the
    thumbnails keep their proportions at any screen size instead of being squeezed to a
    fixed height.
*/
@media (max-width: 767.98px) {
    #stories-swiper .swiper-slide.story-thumb .story-card,
    #stories-swiper .swiper-slide.story-thumb .story-card--add {
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        margin-top: 50px;
    }
}

/*
    THE FOOTER ON A RESTRICTION PAGE, ON A PHONE

    The compact footer is hidden below md site-wide because the bottom nav occupies that
    space. These pages have no bottom nav -- a restricted account has nowhere to navigate to
    -- so it is shown here, which makes it the only route to Contact, Help, Privacy and
    Terms. On a page telling someone their account is gone, those are the links they are most
    likely to want.

    Its layout was never designed to be seen at this width, though: the markup stacks the
    links into a hard-left column with the copyright above them and the theme switches
    floating off on their own. Centred, spaced and wrapped, it reads as a footer rather than
    as a list that fell out of one.
*/
@media (max-width: 767.98px) {
    body.fx-restricted-page footer.d-none {
        display: block !important;
        padding: 1.5rem 1rem 2rem;
        border-top: 1px solid rgba(128, 128, 128, .18);
    }

    body.fx-restricted-page footer .copyRightInfo {
        flex-direction: column !important;
        align-items: center;
        gap: 1rem;
    }

    /* The link row: centred, wrapping, evenly spaced -- not a left-hung column. */
    body.fx-restricted-page footer .copyRightInfo > div:first-child {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .25rem 1.25rem;
        width: 100%;
        margin: 0;
    }

    body.fx-restricted-page footer .copyRightInfo a {
        margin: 0 !important;
        font-size: .875rem;
        opacity: .75;
    }

    body.fx-restricted-page footer .copyRightInfo a:hover { opacity: 1; }

    /* The copyright reads as a caption under the links rather than as one of them. */
    body.fx-restricted-page footer .copyRightInfo > div:first-child > div:first-child {
        order: 2;
        width: 100%;
        margin: .5rem 0 0 !important;
        justify-content: center;
        font-size: .8rem;
        opacity: .55;
    }

    /* The separator pipe belongs to a row that no longer exists at this width. */
    body.fx-restricted-page footer .copyRightInfo > div:first-child > div:first-child span {
        display: none;
    }

    body.fx-restricted-page footer .footer-social-links {
        order: 3;
        margin: 0 !important;
        width: 100%;
        justify-content: center;
    }
}
/* ============================================================
   MENTIONED CREATORS UNDER A POST

   IN app.css, NOT IN feed-premium.css: that file is loaded by the feed page alone, while a
   post box also appears on a profile, on a single post's page and in explore -- so for most
   of the places these cards show up the styling was simply never fetched.

   THE DEFAULT IS LEFT ALONE. The suggestion component's own size is right on a desktop,
   where a half-width card is still wide enough for a cover and a name. Overriding the height
   here shrank the desktop cards for no reason, which is what the previous attempt did.

   Only the phone needs anything, and only the HALF-WIDTH card -- a card half as wide is a
   different shape, not the same one squeezed, and it kept a cover tall enough to swallow the
   tile with the name cut to "Jacque..." beside it.
   ============================================================ */
.fx-mention-cards .suggestion-box {
    border-top: 0;
}

@media (max-width: 767.98px) {
    .fx-mention-cards .col-6 .suggestion-header-bg {
        height: 76px !important;
    }

    .fx-mention-cards .col-6 .suggestion-box .avatar {
        width: 42px;
        height: 42px;
        border-width: 2px;
    }

    /* The avatar's padding was set for a card twice this wide. */
    .fx-mention-cards .col-6 .suggestion-box .card-text > div:first-child {
        padding-left: .5rem !important;
        padding-right: .375rem !important;
    }

    .fx-mention-cards .col-6 .suggestion-box .h6 { font-size: .78rem; }
    .fx-mention-cards .col-6 .suggestion-box .small { font-size: .68rem; }

    /* Tighter gutters, so the pair is not mostly the gap between them. */
    .fx-mention-cards .col-6 { padding: .1875rem !important; }

    /* The full-width card on a phone: shorter than a desktop's, still generous. */
    .fx-mention-cards .col-12 .suggestion-header-bg {
        height: 96px !important;
    }

    .fx-mention-cards .col-12 .suggestion-box .avatar {
        width: 56px;
        height: 56px;
    }
}

/*
    The suggestions heading, back off the header.

    The sticky column's own padding-top was removed so it would pin flush at 60px, which left
    this heading touching the header above it. The space belongs here rather than on the
    column: the column is pinned at the header's height and should stay there, and it is the
    heading inside it that needs room to breathe.
*/
.suggestions-header {
    padding-top: 10px !important;
    align-items: center;
}

/*
    Two blocks in the feed carry Bootstrap padding utilities that leave a gap where none is
    wanted -- .feed-box has pt-4 and .fx-disc has pt-3, and both sit directly under something
    that already provides its own spacing.

    !important, because .pt-4 and .pt-3 are utilities and utilities are written to beat
    component styles; an ordinary declaration on the same element loses to them.
*/
.fx-flush-y {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
    min-vh-100 ON DESKTOP, LESS THE FIXED HEADER.

    Bootstrap's utility means "at least as tall as the window", and the header overlays the
    top 60px of that window -- so a panel using it is 60px taller than the space it can be
    seen in, and its foot sits below the fold.

    min-height, NOT height. The utility sets a floor, and a page with more content than fits
    is supposed to grow past it; replacing it with a fixed height would cut long pages off
    instead. Only the floor moves.

    Scoped to the layout content, deliberately. min-vh-100 is used by the installer and by
    pages that render without this header, and changing what the utility means everywhere
    would break those to fix this.
*/
@media (min-width: 768px) {
    .fx-layout-content.min-vh-100,
    .content-wrapper .min-vh-100,
    .fx-layout-content .min-vh-100 {
        min-height: calc(100vh - 60px) !important;
    }
}

/* ============================================================
   FULL HEIGHT UNDER A FIXED HEADER

   Add fx-h-screen to anything that should fill the window on desktop. The header overlays
   the top 60px rather than taking room in the flow, so a plain 100vh is always that much too
   tall and its foot lands below the fold -- the same fault that hid the messenger's message
   box and the last item in the left rail.

   The pair:

     fx-h-screen      exactly the visible height. For panels that must not scroll the page --
                      a messenger, a full-screen editor.
     fx-minh-screen   at least the visible height. For ordinary pages, which are meant to
                      grow past it when there is more content than fits. This is the one to
                      reach for by default; a fixed height cuts long pages off at the
                      window's edge.

   Both carry !important because nearly every layout rule in this stylesheet already does, so
   one without it simply would not apply.

   Only above 768px, where that header is rendered. Below it, and in the installer, 100vh is
   correct and nothing here touches it.
   ============================================================ */
@media (min-width: 768px) {
    .fx-h-screen {
        height: calc(100vh - 60px) !important;
        height: calc(100dvh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
    }

    .fx-minh-screen {
        min-height: calc(100vh - 60px) !important;
    }

    /* Sticky panels pin below the header rather than at the top of the window. */
    .fx-sticky-under-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 60px !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }
}

/*
    The profile cover has no colour of its own.

    bootstrap.css (compiled from generic.scss) gives it #FAFAFA, which shows as a pale band
    wherever a cover image has not loaded or has not been set -- a light rectangle in the
    middle of a dark page.

    Set in app.css because that loads after the theme bootstrap and on every page; the
    per-page profile stylesheet is not always in the bundle, so the same rule there could not
    be relied on to win.
*/
.profile-cover-bg {
    background-color: transparent !important;
}

/*
    "Last seen" beside the handle.

    It inherited the handle's own size and weight, which gave a passing detail the same
    prominence as the name of the account. Smaller and unbolded, it reads as the aside it is.
*/
.fx-last-seen {
    font-size: .75rem !important;
    font-weight: 400 !important;
}

/*
    .border-right AND .border-left, thinned to match the rest of the layout.

    Bootstrap's own value is a solid #495057 -- heavy, and a different colour from every other
    dividing line on the page, so a column separated by it looked framed rather than divided.
    The rail beside it uses a low-opacity black or white depending on the theme, and these are
    the same thing.

    Expressed as an alpha rather than a fixed colour so one value works on both themes: a
    translucent black over a light page and a translucent white over a dark one read as the
    same weight of line.
*/
body.fx-theme-light .border-right { border-right: 1px solid rgba(0, 0, 0, .08) !important; }
body.fx-theme-light .border-left { border-left: 1px solid rgba(0, 0, 0, .08) !important; }

body.fx-theme-dark .border-right { border-right: 1px solid rgba(255, 255, 255, .08) !important; }
body.fx-theme-dark .border-left { border-left: 1px solid rgba(255, 255, 255, .08) !important; }

/* ============================================================
   A video that is still being converted on a worker.

   Not a spinner and not an overlay: the upload is FINISHED and the post can be published
   right now, so this must not look like something to wait for. It is a quiet line on the
   thumbnail explaining why the post will take another minute to appear for other people.
   ============================================================ */
.video-processing-note {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
}

/* ============================================================
   POST COMPOSER UPLOAD BAR

   The same shape as the reels composer's, so uploading a video means the same thing in both
   places: a full-width track with the real percentage beside it.

   Dropzone's own bar is still there inside each thumbnail. It is a few pixels wide, sits on
   top of the image and never states a figure, which is why an upload that was moving
   normally read as one that had stalled.
   ============================================================ */
.fx-post-upload-progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0 .5rem;
}

.fx-post-upload-progress-track {
    flex: 1 1 auto;
    /* A stated height, not one inherited from a flex row: as a flex child with no
       content of its own the track collapsed, and a track with no height cannot show
       a fill however wide that fill is set. */
    height: 6px;
    min-height: 6px;
    border-radius: 3px;
    background: rgba(138, 150, 163, .28);
    overflow: hidden;
}

.fx-post-upload-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    /* The colour is written out rather than taken from var(--primary): that variable is
       not defined anywhere in this stylesheet, so every use of it was falling through to
       its default and would break outright the day the default was dropped. */
    background: #d10054;
    /* Eased, so a chunked upload's stepped events read as movement rather than as a
       bar that jumps and then freezes. */
    transition: width .15s ease;
}

.fx-post-upload-progress-label {
    min-width: 3.1rem;
    color: #d10054;
    font-weight: 700;
    text-align: right;
    /* Tabular figures: without them the bar shifts sideways as the number grows from
       one digit to three. */
    font-variant-numeric: tabular-nums;
}

/*
    Dropzone's own bar, hidden.

    It draws a second progress bar inside each thumbnail -- the thin green line across the
    frame strip. Two bars for one upload, disagreeing with each other, is worse than either
    alone, and the one that states a figure is the one worth keeping.
*/
.dropzone-previews .dz-preview .dz-progress,
.dz-preview.pt-host .dz-progress {
    display: none !important;
}

/* Finished: green, the same signal the reels composer gives. */
.fx-post-upload-progress.complete .fx-post-upload-progress-bar {
    background: #28a745;
}

.fx-post-upload-progress.complete .fx-post-upload-progress-label {
    color: #28a745;
}

/* ============================================================
   THE BACK ARROW ON A PROFILE

   Sits over the cover image at the top left, the way the rest of the profile's controls sit
   over it. Absolute inside the cover rather than fixed to the viewport: it belongs to the
   header, and a control pinned to the screen would float over the posts as the page scrolls.

   Dark plate and a blur behind the glyph, because a cover is a photograph and a bare white
   arrow disappears against a pale one.
   ============================================================ */
.fx-profile-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease;
}

.fx-profile-back-btn svg {
    width: 22px;
    height: 22px;
}

.fx-profile-back-btn:hover,
.fx-profile-back-btn:focus {
    background: rgba(0, 0, 0, .68);
    outline: none;
}

@media (max-width: 767.98px) {
    .fx-profile-back-btn {
        top: 10px;
        left: 10px;
        width: 34px;
        height: 34px;
    }

    .fx-profile-back-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* The cover has to be a positioning context for the arrow above; without this the button
   would escape to the nearest positioned ancestor and land somewhere unrelated. */
.profile-cover-bg {
    position: relative;
}


/* ============================================================
   SUBSCRIPTION SCOPE (locked posts): what the subscription opens
   ============================================================

   Matches the reel lock's row (.reel-sub-* in pages/reels.css). Icon + count chips instead
   of a sentence: "Subscribe to unlock" beside one locked post reads like a price for THAT
   post, and three small chips answer it at a glance without the paragraph that swamped the
   first version.

   Deliberately quiet -- muted ground, small type -- so the Subscribe button stays the
   loudest thing in the panel. These inform; they do not sell.
   ============================================================ */
.fx-sub-scope {
    /*
     * !important on the layout properties, and text-align as a second line of defence.
     *
     * The row renders inside a Bootstrap .card-body, which carries its own text alignment,
     * and the panel it sits in is built from utility classes. The chips came out
     * left-aligned in the locked-post card even though align-items: center was already
     * declared here -- something in that stack was winning. Rather than hunt the specific
     * selector, the three properties that decide the alignment state it outright, and
     * text-align: center covers the case where the flex context is not what applies.
     */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    text-align: center;
    gap: .35rem;
}

.fx-sub-chips {
    /* Same reasoning as .fx-sub-scope above: stated outright so the surrounding
       card/utility classes cannot leave the chips hanging on the left edge. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem;
    flex-wrap: wrap;
}

.fx-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    color: #6c757d;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.fx-sub-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .85;
}

.fx-sub-chip-n {
    font-variant-numeric: tabular-nums;
}

.fx-sub-note {
    color: #8a9099;
    font-size: .68rem;
    line-height: 1.35;
    text-align: center !important;
    width: 100%;
}

body.fx-theme-dark .fx-sub-chip {
    background: rgba(255, 255, 255, .10);
    color: #cfd3d8;
}

body.fx-theme-dark .fx-sub-note {
    color: rgba(255, 255, 255, .55);
}

/* On a blurred-preview card the panel sits over the image, where muted greys vanish. */
.ppv-info-bg .fx-sub-chip {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.ppv-info-bg .fx-sub-note {
    color: rgba(255, 255, 255, .75);
}


/* ============================================================
   LOCKED PANEL: never taller than the media box it sits in
   ============================================================

   .locked-media has a FIXED height (420px desktop / 340px mobile) and `overflow: hidden`,
   and the actions panel is pinned to its bottom edge. Anything the panel grows by is
   therefore clipped off the TOP of the panel -- the card ground, the attachment counts and
   eventually the Subscribe button disappear while the last few lines stay visible, which
   is exactly what the subscription scope row caused on desktop.

   Desktop is where it showed first because the panel is taller there: the "Subscribers
   only." caption is `d-none d-md-block`, so desktop renders a row that mobile never does.

   Two guards, both cheap:

     - the panel may use at most 80% of the media box, and scrolls internally rather than
       being clipped, so the button can always be reached;
     - the scope row is tightened up (smaller gap, no top margin) so it costs a line rather
       than three.

   Sizing the media box to its content instead would be the other way round, but that box
   is a deliberate fixed-ratio frame shared by every locked card in the feed -- letting one
   card grow would make the feed jump as cards load.
   ============================================================ */
/*
 * NO max-height / overflow-y HERE.
 *
 * Update 2358 put `max-height: 80%; overflow-y: auto` on this panel, reasoning that a
 * taller panel would be clipped by .locked-media's fixed height. That reasoning produced
 * the bug it was meant to prevent: the panel became a SCROLL CONTAINER, so the card
 * ground, the price row and the Subscribe button scrolled out of sight and only the last
 * fragment -- an attachment count and the note -- stayed visible over the image. That is
 * exactly what the desktop screenshot showed.
 *
 * The panel is positioned from the BOTTOM edge, so it grows upward into the media box and
 * there is room for it: the box is 420px on desktop and the panel is nowhere near that.
 * It does not need a height cap at all. Keeping the scope row compact (below) is the whole
 * of what was actually required.
 */

/* The scope row, kept to one line's worth of height. */
.locked-media .fx-sub-scope {
    gap: .2rem;
    margin-top: .35rem !important;
}

.locked-media .fx-sub-chip {
    padding: .15rem .45rem;
    font-size: .72rem;
}

.locked-media .fx-sub-note {
    font-size: .65rem;
    line-height: 1.25;
}


/* ============================================================
   TIP GOAL: progress bar + quick-tip amounts
   ============================================================

   Shown on a post only when its creator set a goal.

   The whole thing is ONE CARD with a divider across it: the progress strip on top, the
   suggested amounts underneath. That framing is what makes it read as a single offer
   rather than a bar with some loose buttons below it, which is how the first attempt came
   out.

   THE TRACK IS TINTED, NOT THE FILL ALONE. A goal at $0 raised has no fill at all, so a
   bar that only colours its progress is invisible on exactly the posts that most need to
   advertise the goal. The track carries the soft tint; the fill sits on top of it a shade
   stronger and grows left to right.

   THE SITE'S OWN PINK -- WRITTEN OUT, not through a custom property.

   This is what made the first attempt render as bare browser defaults. The Minify build
   DROPS ANY DECLARATION WHOSE VALUE USES a CSS custom property: grep the generated bundle
   for "var(" and the count is zero. It is not specific to this block -- the existing
   .fx-crypto-copy-ico loses its colour exactly the same way -- but here it meant every
   coloured line disappeared, leaving square grey buttons with no pink at all.

   So the pink is a literal. If the brand colour changes, the literals in this block are
   what to update.
   ============================================================ */
.fx-tip-goal {
    margin-bottom: .75rem;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.fx-tip-goal-bar {
    position: relative;
    overflow: hidden;
    /* The tinted strip itself -- visible whether or not anything has been raised. */
    background: rgba(209, 0, 84, .09);
}

.fx-tip-goal-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(209, 0, 84, .17);
    transition: width .35s ease;
}

.fx-tip-goal-figures {
    position: relative;   /* above the fill */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
}

.fx-tip-goal-raised {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: #16181c;
    font-variant-numeric: tabular-nums;
}

.fx-tip-goal-raised svg,
.fx-tip-goal-raised ion-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    opacity: .9;
}

.fx-tip-goal-target {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 1.05rem;
    color: #8a9099;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The little "what is this" mark at the end of the strip. */
.fx-tip-goal-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 1.5px solid #d10054;
    border-radius: 50%;
    color: #d10054;
    font-size: .72rem;
    font-weight: 700;
    font-style: normal;
    font-family: Georgia, 'Times New Roman', serif;   /* the serif "i" of the reference */
    line-height: 1;
    cursor: help;
}

body.fx-theme-dark .fx-tip-goal-info {
    border-color: #ff3d8b;
    color: #ff3d8b;
}

/* Amounts: equal share of the row, pill shaped, separated from the strip by the divider. */
.fx-tip-goal-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.fx-tip-goal-amount {
    flex: 1 1 0;
    min-width: 92px;
    padding: .7rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .13);
    background: transparent;
    color: #d10054;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.fx-tip-goal-amount:hover:not(.disabled):not(:disabled) {
    background: rgba(209, 0, 84, .07);
    border-color: #d10054;
}

.fx-tip-goal-amount.disabled,
.fx-tip-goal-amount:disabled {
    color: #b9bdc4;
    border-color: rgba(0, 0, 0, .08);
    cursor: default;
}

/* ---- dark theme ---- */
body.fx-theme-dark .fx-tip-goal {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .11);
}

body.fx-theme-dark .fx-tip-goal-bar {
    background: rgba(209, 0, 84, .16);
}

body.fx-theme-dark .fx-tip-goal-fill {
    background: rgba(209, 0, 84, .30);
}

body.fx-theme-dark .fx-tip-goal-raised {
    color: #f2f4f7;
}

body.fx-theme-dark .fx-tip-goal-target {
    color: rgba(255, 255, 255, .6);
}

body.fx-theme-dark .fx-tip-goal-amounts {
    border-top-color: rgba(255, 255, 255, .09);
}

body.fx-theme-dark .fx-tip-goal-amount {
    border-color: rgba(255, 255, 255, .18);
}

body.fx-theme-dark .fx-tip-goal-amount.disabled,
body.fx-theme-dark .fx-tip-goal-amount:disabled {
    color: rgba(255, 255, 255, .32);
    border-color: rgba(255, 255, 255, .10);
}

/* ============================================================
   Post footer action row -- keeping like / comment / share / tip on ONE line.

   The row is .d-flex.flex-wrap with each group carrying Bootstrap's mr-3 (1rem). On a
   narrow card -- a desktop feed column, or any post whose tip group shows an amount like
   "($220)" rather than a small count -- four groups plus 3rem of gutters overflow, and
   the tip group wraps onto a second line under the hearts. That is the dropped gift icon.

   Fixed by tightening the gutter on this row only, so the four groups fit the width they
   actually have. The bookmark keeps its ml-auto and stays hard right.

   Scoped to .footer-actions so no other mr-3 in the post box is affected.
   ============================================================ */
.footer-actions > .d-flex {
    /* Let the group shrink instead of forcing a wrap, but never collapse its contents. */
    min-width: 0;
}

.footer-actions > div > .d-flex.mr-3 {
    margin-right: .6rem !important;
}

.footer-actions > div > .d-flex.mr-3:last-child {
    margin-right: 0 !important;
}

/* The label next to each icon must not be what breaks the line. */
.footer-actions .post-reactions-label-count,
.footer-actions .post-comments-label-count,
.footer-actions .post-shares-label-count,
.footer-actions .post-tips-label-count {
    white-space: nowrap;
}