body {
    font-family: 'Poppins', sans-serif;
}

.card {
    box-shadow: none;
    border-radius: unset;
}

.card-initial {
    -webkit-box-shadow: var(--falcon-box-shadow) !important;
    box-shadow: var(--falcon-box-shadow) !important;
    border-radius: .375rem !important;
}

.btn-primary, btn-success, .btn-danger, .btn-warning, .btn-secondary {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn {
    transition: opacity 0.15s ease;
}

.btn:active {
    opacity: 0.65;
}

.chat-indicator-position {
    position: relative !important;
    top: -18px;
    right: 0;
}

.bottom-chat-indicator-position::before {
    position: absolute !important;
    right: 19px !important;
}

.nav-link {
    /*
    padding-left: 1rem !important;
    width: calc(100% + 1rem);

     */
}

.navbar-pwa .notification-indicator::before {
    top: -20px;
    right: -2px;
    z-index: 1;
}


.notification-indicator-danger::before {
    background-color: #f46569 !important;
}

#sideMenu_suggestions.notification-indicator::before {
    top: 10px;
    right: auto;
    left: 10px;
}

#btn_mobile_suggestion.notification-indicator::before {
    top: 4px;
    right: 20px;
}

.notification-indicator-footprints::before {
    top: -11px !important;
    right: 4px !important;
    z-index: 1;
}

.notification-indicator-chat::before {
    top: -19px;
    right: 2px;
    z-index: 1;
}

@media (max-width: 768px) {
    .content {
        padding-bottom: 76px;
    }
}

@media (min-width: 768px) {
    #container-main.pwa-container-main {
        padding-top: 96px;
        /*margin-left: -30px;*/
    }

    .options-container {
        display: flex;
        justify-content: flex-end;
    }
}

/* Mobile menu on the bottom */
/* Default: Hide the mobile bottom nav */
.mobile-bottom-nav {
    display: none;
}

/* Show the mobile bottom nav only on mobile devices */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        /* Above the scrolling feed content (the video mute button is z-index 11)
           so the sound icon never overlaps this fixed footer, but below the
           info/chat panels and modals (1020+) so those still cover it. */
        z-index: 100;
        -webkit-overflow-scrolling: touch;
        backface-visibility: hidden;
        height: 76px !important;
    }

    .mobile-bottom-nav .nav-item {
        width: 76px;
        height: 76px;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
    }

    .mobile-bottom-nav .nav-item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
}

.mobile-bottom-nav .nav-item a {
    color: #9da9bb;
}

.mobile-bottom-nav .nav-item.active a {
    color: #232e3c;
}

/* MAP CSS */
#map {
    height: calc(100vh - 150px);
    /* border: 2px solid red !important; */
}

@media (max-width: 767px) {
    #pwa_map {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #map {
        width: 100vw;
        height: calc(100vh - 150px);
        /* border: 2px solid red !important; */
    }

    #settings, #subscription-info, #subscription-manage {
        padding-top: 74px;
    }
}

#markerLayer img {
    border-radius: 21.5px;
    left: 5px !important;
}

#markerLayer div:not(:first-child) {
    width: 52px !important;
    height: 52px !important;
}

.matchMapBorder {
    border: 3px solid #59e159 !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 6px;
    background: #59e159;
    z-index: 1000;
    border-radius: 21.5px;
}

.suggestionMapBorder {
    border: 3px solid dodgerblue !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 6px;
    background: dodgerblue;
    z-index: 1000;
    border-radius: 21.5px;
}

.eventMapBorder {
    border: 3px solid #e559e5 !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 6px;
    z-index: 1000;
    border-radius: 21.5px;
}

.matchBorder {
    border: 3px solid #59e159 !important;
    background: #59e159;
    z-index: 1000;
}

.suggestionBorder, .blueBorder {
    border: 3px solid dodgerblue !important;
    background: dodgerblue;
    z-index: 999;
}

#current-location-icon {
    position: absolute;
    bottom: 90px;
    left: 25px;
    cursor: pointer;
    z-index: 1000;
    font-size: 24px;
}

.input-container {
    display: flex;
    align-items: center;
    position: relative;
}

.current-location-label {
    background-color: #fdfdfd;
    border: 1px solid #ced4da;
    padding: 2px 10px;
    margin-top: 5px;
    margin-left: 4px;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    position: absolute;
}


[id^='id_share_live_location_'] {
    margin-top: 5px;
}

[id^='form_check_id_share_live_location_'] {
    display: inline-block;
}

.tooltip-trigger {
    background: none;
    border: 0;
    padding: 0 3px;
    cursor: pointer;
}

div[style*="border: 2px solid rgb(26, 115, 232)"] {
    border: none !important; /* Removes the blue outline border for map */
}

#id_search_location {
    border-radius: unset;
}

.autocomplete-item {
    padding: 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

.autocomplete-item-highlight {
    background-color: #e9e9e9;
}

.autocomplete-dropdown-container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    background-color: #fff;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Initially hidden */
    border-radius: 0 0 2px 2px;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-y: auto;
}

.autocomplete-dropdown-container li {
    padding: 0 16px !important;
    line-height: 30px;
    cursor: pointer !important;
    white-space: nowrap;
}

.autocomplete-dropdown-container li:hover {
    background-color: #e9e9e9;
}

.autocomplete-dropdown-container li:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.search-history-label {
    padding: 0rem 1rem;
    font-weight: bold;
    font-style: italic;
    color: #757575;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

/* Info window close button */
.gm-ui-hover-effect {
    width: unset !important;
    height: 17px !important;
    position: absolute !important;
    right: 2px !important;
}

/* Info window close button */
.gm-ui-hover-effect span {
    margin: 0 !important;
    height: 15px !important;
    width: 15px !important;
}

/* END OF MAP CSS */

/* MATCH AND SUGGESTION LIST CSS */
#suggestions_header, #match_header {
    padding: 1rem 1.25rem;
    margin: 0;
}

#ordering .btn.dropdown-toggle {
    border: none !important;
}

@media (max-width: 767px) {
    .container {
        padding-left: 0;
        padding-right: 0;
        overflow-y: auto;
    }

    /* remove shadows */
    #client_suggestions_card, #client_connections_card {
        box-shadow: none;
    }

    #suggestions_header {
        padding-left: unset;
    }

    /* Simplify elements */
    #client_suggestions_card .btn,
    #client_suggestions_card .form-control {
        border: 1px solid #ddd;
    }

    /* Improve readability */
    #client_suggestions_card, #client_connections_card {
        font-size: 16px;
    }

    /* Enhance interactivity */
    #client_suggestions_card .btn {
        min-width: 44px; /* Minimum recommended tap target size */
        /*padding: 10px; /* Increase padding for easier tapping */
    }
}

@media only screen and (max-width: 767px) {
    #container-main #feed {
        /* min-height: calc(100vh - 135px); */
        overflow-x: hidden !important;
        /* margin-top: 75px; */
    }
}

#notifications {
    height: 100%;
    overflow-y: auto !important;
    max-height: -webkit-fill-available;
}

.truncated-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
    max-width: 100%;
}

.fs-33px {
    font-size: 33px;
}

.fs-20px {
    font-size: 20px;
}

.fs-18px {
    font-size: 18px;
}

.fs-17px {
    font-size: 17px;
}

.fs-16px {
    font-size: 16px;
}

.fs-15px {
    font-size: 14px;
}

.fs-14px {
    font-size: 14px;
}

.fs-13px {
    font-size: 13px;
}

.fs-12px {
    font-size: 12px;
}

.fs-11px {
    font-size: 11px;
}

.fs-10px {
    font-size: 10px;
}

.fs-10px {
    font-size: 10px;
}

.fs-dot9rem {
    font-size: .9rem !important;
}

.fs-dot7rem {
    font-size: .7rem !important;
}

.lh-1rem {
    line-height: 1rem;
}

.lh-dot5rem {
    line-height: .5rem;
}

.lh-dot9rem {
    line-height: .9rem;
}

.mt-5px {
    margin-top: 5px;
}

.mt-1px {
    margin-top: 1px;
}

.mt-8px {
    margin-top: 8px;
}

#search-history-container {
    width: calc(80% + 42px);
    left: 2px;
}

#container-main > .text-center > .spinner-border {
    margin-top: 275px !important;
    /*
    width: 4rem !important;
    height: 4rem !important;
     */
}

.mt-15px {
    margin-top: 18px;
}

.btn-md--1 {
    padding: .3rem 1rem;
    font-size: 0.8rem;
    /*border-radius: 0.6rem;*/
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner-colored {
    border: 4px solid transparent;
    border-top-color: #40667C;
    border-right-color: #40667C;
    border-bottom-color: #40667C;
    border-left-color: #DCF1FF;
    border-radius: 50%;
    animation: rotating 1s linear infinite;
}

#dropdown-container {
    overflow: visible;
}

#ordering .dropdown.bootstrap-select {
    width: 100% !important;
}

#ordering .dropdown-item .text {
    width: max-content;
}

/*
Feed
 */
.bg-feed {
    background-color: #DCF1FF;
}

.write-message-box {
    padding-left: 8px;
    padding-right: 8px;
}

.ms-2-5-rem {
    margin-left: 2.5rem !important;
}

#dynamic_carousel_menu_mobile.show {
    inset: -12px auto auto 0 !important;
}

@media (min-width: 768px) {
    .write-message-box {
        padding-left: 12px;
        padding-right: 12px;
        border-width: 0 0 1px 0;
        border-color: #D8E2EE;
        border-style: solid;
        border-bottom-width: 1px;
    }
}


.feed-width {
    max-width: 470px;
    width: 100%;
    margin: 0 auto;
}

.avatar-recently-viewed {
    position: unset !important;
}

.avatar-brand-profile {
    width: 120px;
    height: 120px;
    top: -60px
}

.avatar-recently-viewed-desktop {
    height: 4rem !important;
    width: 4rem !important;
}

.heart-container {
    position: relative;
    display: inline-block;
    font-size: 20px;
}

.heart-like {
    font-size: 20px !important;
}

.heart-container img {
    width: 1em;
    height: auto;

}

.post-likes {
    font-weight: 500;
}

.post-action-count {
    font-size: 0.85rem !important;
}

.member-rating-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: inherit;
    text-decoration: none !important;
    color: inherit !important;
}

.ai-badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.375rem;
    background-color: #d9f0fb;
    color: #1b74e4;
    vertical-align: middle;
}

.member-rating-badge .fa-star,
.member-rating-badge svg.svg-inline--fa,
.member-rating-badge svg {
    font-size: 0.9em;
    height: 0.9em;
    width: 0.9em;
    vertical-align: -0.1em;
}

.member-star-gold {
    color: #d4a017;
}

.heart-container img.first-heart {
    transform: scale(1);
}

.heart-container img.second-heart {
    position: absolute;
    top: 10px;
    left: 7px;
    z-index: 1;
    transform: scale(0.75);
}

#recently_viewed_string {
    position: relative;
}

.color-black {
    color: #0B1828;
}

.color-blue {
    color: #2A7BE4;
}

.color-light-blue {
    color: #659ce1;
}

.color-green {
    color: #00864E;
}

.color-red {
    color: #E63756;
}

.text-warning {
    color: #C46632 !important;
    font-weight: 600;
    font-size: 16px;
}

.alert-warning {
    background-color: #FEF0E8;
    border-color: #FEF0E8;
    padding: .75rem 1rem;
}

.alert-info-notifications {
    background-color: #f9fafd;
    border-color: #f9fafd;
    color: #000;
    padding: .75rem 1rem;
}

.color-gray-2 {
    color: #4D5969;
}

.color-gray-3 {
    color: #748194;
}

.color-gray-4 {
    color: #5D6E82;
}

.bg-light-gray {
    background: #EEF3F8;
}

.badge-xl {
    padding: .37em .8em;
}

.right-0 {
    right: 0;
}

.left-0 {
    left: 0;
}

.w-80 {
    width: 80%;
}

.recently-views-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    width: auto;
    align-items: center;
    gap: 15px;
    padding-top: 16px;
    min-height: 80px;
}

.status-icon {
    position: absolute;
    bottom: 9px;
    right: 7px;
    transform: translate(50%, 50%);
    transition: transform 0.5s ease;
}

.status-heart-container img {
    width: 1em;
    height: auto;

}

.status-heart-container img.first-heart {
    transform: scale(1);
}

.status-heart-container img.second-heart {
    position: absolute;
    top: 3px;
    left: 7px;
    z-index: 1;
    transform: scale(0.7);
}

.tab-heart-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1em;
}

.tab-heart-container img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tab-heart-container img.first-heart {
    z-index: 1;
}

.tab-heart-container img.second-heart {
    top: 10px;
    left: 18px;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0.7);
}

.dropup .dropup-content {
    top: auto;
    bottom: 100%;
    transform: translate3d(0, -100%, 0);
}

.post-author-name {
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 21px;
    color: #0B1828;
}

.post-meta {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.post-body-text, .no-result-text {
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 21px;
    color: #0B1828;
}

/*
carousel
 */
.carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 29px;
}

.carousel-inner {
    background-color: #0a1422;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-item {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* No custom transition here — Bootstrap drives the slide via its own
       .carousel-item-start/.carousel-item-end transforms. A custom one
       fights that and stutters. */
}

/* Bootstrap keeps the active slide AND the incoming/outgoing slides
   visible during the transition. The old CSS only showed .active, so
   the next slide stayed display:none mid-slide and the dark
   .carousel-inner background flashed through as a black frame between
   pictures. Show the transitioning items too. */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: flex;
}

.carousel-item img,
.carousel-item video,
.collaboration-item img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Fill the letterbox around a contained image with a blurred, scaled copy of
   the same image (set as the .carousel-blur-bg background) instead of the flat
   dark bar, so a set of mismatched aspect ratios looks nicer. */
.carousel-blur-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(22px);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
}

.carousel-item > img,
.carousel-item > video {
    position: relative;
    z-index: 1;
}

.carousel-indicators [data-bs-target] {
    margin-right: 2px;
    margin-left: 2px;
}

.carousel-indicators {
    bottom: -41px;
}

.carousel-indicators li {
    background-color: #6e88ab !important;
    border-radius: 50%;
    width: 8px !important;
    height: 8px !important;
    display: inline-block;
}

.carousel-indicators li.active {
    background-color: #2A7BE4 !important;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    width: 35px;
    height: 35px;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    z-index: 20;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 767px) {
    .carousel {
        margin-bottom: 32px;
    }

    .carousel-indicators li {
        width: 11px !important;
        height: 11px !important;
    }

    .carousel-indicators {
        bottom: -45px;
    }

    .carousel-indicators [data-bs-target] {
        margin-right: 3px;
        margin-left: 3px;
    }
}


/* Custom video controllers */

.carousel-video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.video-poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    pointer-events: none;
}

.video-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.video-loading-spinner.is-visible {
    display: flex;
}

.info-panel [id^="comment_groups_container_"] {
    padding-bottom: 55px;
}

.video-loading-spinner .spinner-border {
    width: 3em;
    height: 3em;
    border-width: 0.3em;
    animation-duration: 1.4s;
}

.play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background: transparent;
    color: white;
    font-size: 3em;
    cursor: pointer;
    z-index: 10;
}

.progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.5); /* background of the progress bar container */
    cursor: pointer;
}

.feed-mute-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11; /* above the play button (10) and progress bar */
}

.progress-bar {
    height: 100%;
}

.post_media_add_dropzone {
    height: 112px;
    width: 100%;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill: none; stroke: %232A7BE4; stroke-width: 4; stroke-dasharray: 12 12'/></svg>");

    input {
        height: 100%;
        opacity: 0;
    }
}


/* uploading overlay */
.upload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    color: #fff;
    font-size: 1.5rem;
}

/* overlay message */
.upload-message {
    text-align: center;
}

.upload-progress-wrapper {
    width: 280px;
    margin: 12px auto 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 0;
    background: #2c7be5;
    border-radius: 6px;
    transition: width 0.2s ease;
}

.upload-progress-percent {
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    color: #fff; /* text color */
    font-size: 1.5rem;
}

/* overlay message */
.overlay-message {
    text-align: center;
}

.post-card-body {
    /*
    display: flex;
    flex-direction: column;
    align-items: center;
     */
}

.mention {
    color: #2c7be5;
    font-weight: 500;
    text-decoration: none;
}
.mention:hover {
    text-decoration: none;
}
a.mention:hover {
    color: #1a68d1;
}

.mention-autocomplete {
    background-color: #ffffff;
    color: #2a2f5b;
    border: 1px solid #d8e2ef;
    border-radius: 0.375rem;
    padding: 0.25rem 0;
}
.mention-autocomplete-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: #2a2f5b;
    text-decoration: none;
    cursor: pointer;
}
.mention-autocomplete-item.active,
.mention-autocomplete-item:hover {
    background-color: #eaf3ff;
    color: #2a2f5b;
    text-decoration: none;
}
.mention-autocomplete-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
}
.mention-autocomplete-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #748194;
    color: #ffffff;
    font-weight: 600;
}
.mention-autocomplete-meta {
    flex-grow: 1;
    min-width: 0;
}
.mention-autocomplete-handle {
    font-weight: 600;
    color: #2a2f5b;
    line-height: 1.2;
}
.mention-autocomplete-name {
    font-size: 0.85em;
    color: #748194;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mention-autocomplete-empty {
    padding: 0.5rem 0.75rem;
    color: #748194;
    font-style: italic;
}

.media-item-draft {
    bottom: -13px;
    right: 42px;
    transform: translate(50%, -50%);
    font-size: 0.6em;
    padding: 0.25em 0.4em;
}

.lh-1 {
    line-height: 1;
}

#post_box {
    height: 128px;
    min-height: 0;
    overflow-y: auto;
    resize: vertical;
    transition: height 0.3s;
    padding: 1.5rem 1rem;
}

.h-56 {
    height: 56px !important;
}

@media only screen and (max-width: 767px) {
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
}

#clear_location:hover {
    cursor: pointer;
}

#recent_views_header {
    background-color: rgb(237 242 249) !important;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.post-edit-header {
    padding: 6px 0;
}

/*
End of Feed
 */

/*

 */
.bg-success-subtle {
    background-color: #d9f8eb !important;
}

.bg-danger-subtle {
    background-color: #fbdbe1 !important;
}

/* Link Preview */
.link-preview {
    padding: 8px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f9f9f9;
}

.link-preview-image-container {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.link-preview img.preview-image-small {
    max-width: 100px;
    margin-right: 10px;
    border-radius: 8px;
}

.link-preview-content {
    flex: 1;
    text-align: left;
    width: 100%;
}

.link-preview-content h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.link-preview img.preview-image-small {
    max-width: 100px;
    margin-right: 10px;
    border-radius: 8px;
}

.link-preview img.preview-image {
    max-width: 100%;
    border-radius: 8px;
}

.link-preview-img {
    padding: 8px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: normal;
    background-color: #f9f9f9;
}

.link-preview-img img.preview-image-small {
    max-width: 100px;
    margin-right: 10px;
}

.link-preview-img img.preview-image {
    max-width: 100%;
}

.link-preview-content {
    text-align: left;
}

.link-preview-content h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.link-preview-footer {
    text-align: left;
    margin-top: 10px;
    width: 100%;
}

.link-preview-footer p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.link-preview-footer a {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
}

.link-preview-footer a:hover {
    text-decoration: underline;
}

a.notification-indicator-danger:hover {
    color: #748194;
}

.preview-image {
    width: 100%;
}

.link-preview-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 3px;
}

.favicon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.site-name {
    font-size: 14px;
    color: #666;
    overflow-wrap: anywhere;
}

.generating-preview {
    display: inline-flex;
    align-items: center;
    color: #0b57d0;
    flex-direction: row-reverse;
}

.spinner-preview {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    animation: spin 1s linear infinite;
    margin-left: 3px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* End of Link Preview */

.search-input-group-inline .input-group-text {
    background-color: #EEF3F8;
    border: 1px solid #ced4da;
    border-right: none;
    padding: 0.58rem 0.8rem 0.57rem 1rem;
    display: flex;
    align-items: center;
}

.no-right-border {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none !important;
}

.no-left-border {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none !important;
}

.search-form-right-side-button {
    margin-right: -14px;
    margin-left: 9px;
}

.search-input-group .form-control {
    border-left: none;
    flex-grow: 1;
    width: auto; /* Ensure the input does not take full width */
}

.clean-icon-button {
    right: 9px;
    top: 53%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
}

.clean-location-icon-button {
    position: absolute;
    right: 9px;
    top: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    z-index: 1;
}

.search-form {
    display: flex;
    align-items: center;
}

.search-form-options {
    display: flex;
    min-width: 73px;
    justify-content: end;
}

.search-field {
    background-color: #EEF3F8;
    border: 1px solid #ced4da;
    border-left: none;
    box-shadow: none !important;
    padding-left: 3px;
    flex-grow: 1;
    width: auto;
}

/* For most modern browsers */
.search-field::placeholder {
    color: #748194;
    opacity: 1;
    font-size: 14px;
}

/* For Internet Explorer */
.search-field:-ms-input-placeholder {
    color: #748194;
    font-size: 14px;
}

/* For Microsoft Edge */
.search-field::-ms-input-placeholder {
    color: #748194;
    font-size: 14px;
}

/* Sorting on matches page*/
.icon-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 5px; /* Adjust spacing as needed */
}

/* End of sorting on matches page*/

.avatar-44 {
    height: 2.75rem;
    width: 2.75rem;
}

.avatar-48 {
    height: 3rem !important;
    width: 3rem !important;
}

.avatar-64 {
    height: 4rem !important;
    width: 4rem !important;
}

.avatar-3xl {
    height: 3.75rem;
    width: 3.75rem;
}

#match_group_tabs .nav-link {
    font-weight: 500 !important;
    padding: .5rem .75rem;
}

#match_group_tabs .badge-soft-dark {
    background-color: #EEF0F2;
    margin-left: 5px;
}

.match-group-square {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
}

#match_group_tabs_wrapper, .recently-views-container {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
}

#match_group_tabs_wrapper .nav-tabs {
    display: inline-flex;
    min-width: 100%;
    border-bottom: 1px solid var(--falcon-border-color);
    position: relative;
}

#match_group_tabs_wrapper .nav-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--falcon-border-color);
}

#match_group_tabs_wrapper .nav-link.active {
    margin-bottom: 1px;
    border-bottom: 2px solid var(--falcon-primary);
}


#match_group_tabs_wrapper::-webkit-scrollbar {
    display: none;
}

/* Full-bleed the tab underline on the Discover / Connections cards so the blue
   active strip and the gray bottom line reach the card edges like the feed. The
   wrapper inherits a 1rem gutter inset from its .row parent; zeroing it lets the
   nav-tabs border start at the left edge, while the wrapper overflow-x clips the
   right at the card edge. Tab labels keep their own .nav-link padding, so they
   stay readable. The row separators (.divider) already full-bleed via their own
   negative margins, so they need no override here. */
#client_connections_card #match_group_tabs_wrapper,
#client_suggestions_card #match_group_tabs_wrapper {
    padding-left: 0;
    padding-right: 0;
}

#match_group_tabs {
    display: flex; /* Use inline-flex to prevent wrapping */
    flex-wrap: nowrap;
    gap: 0;
}

#match_group_tabs .nav-item {
    flex-shrink: 0; /* Prevent items from shrinking */
}


.inline-tabs-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
}

.inline-tabs-wrapper .nav-tabs {
    display: inline-flex;
    min-width: 100%;
    border-bottom: 1px solid var(--falcon-border-color);
    position: relative;
}

.inline-tabs-wrapper .nav-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--falcon-border-color);
}

.inline-tabs-wrapper .nav-link.active {
    margin-bottom: 1px;
    border-bottom: 2px solid var(--falcon-primary);
    color: #0B1828;
}


.inline-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.inline-tabs-wrapper.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}

.inline-tabs-wrapper.can-scroll-left {
    -webkit-mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
}

.inline-tabs-wrapper.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}

.inline-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
}

.inline-tabs .nav-item {
    /* Fill the row evenly when the tabs fit (e.g. a profile with no Collab
       tab), but keep natural widths and scroll when they overflow (5+ tabs).
       flex-grow only acts on free space, so the overflow/scroll case is
       unaffected. */
    flex: 1 0 auto;
}

.inline-tabs .nav-link {
    font-weight: 500 !important;
    padding: .5rem .75rem;
    text-align: center;
}

.inline-tabs .badge-soft-dark {
    background-color: #EEF0F2;
    margin-left: 5px;
}

/* Live Collabs tab rows: soft border + a subtle hover lift on the clickable
   (member info panel) variant. */
.live-collab-row {
    border-color: #E3E6ED;
    transition: background-color .12s ease, border-color .12s ease;
}

.live-collab-row.cursor-pointer:hover {
    background-color: #F9FAFD;
    border-color: #D8E2EF;
}


.single-listing-name {
    font-size: 14px;
    color: #0B1828;
    font-weight: 500;
}

.report-broken-link {
    opacity: 0.4;
}

.report-broken-link:hover {
    opacity: 1;
}

#id_fullname.search-field {
    max-width: 100%;
}

.avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.badge-link .badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.badge-certified {
    background-color: #8dc1de;
    border-color: #8dc1de;
    color: #fff;
}

.certified-sign-wrapper {
    position: absolute;
    bottom: -5px;
    right: 53%;
    transform: translateX(122%);
}

#social_urls_section .jform {
    min-height: 40px;
}

.social-logo {
    width: 20px;
    height: 20px;
}

.social-youtube-logo {
    width: 20px;
}

.client-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    min-height: 96px;
    padding: 0.5rem 0;
}

.social-numbers {
    display: flex;
    gap: 1rem;
}

.divider {
    width: calc(100% + 2.5rem);
    height: 2px;
    background-color: #EEF3F8;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.divider-thin {
    width: calc(100% + 2.5rem);
    height: 1px;
    background-color: #EEF3F8;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.item-listing-row {
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (max-width: 767px) {
    .item-listing-row {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .single-listing-name {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Truncate the name text itself (not the whole line) so the rating badge stays
       visible after a long name and the name never runs under the action button. */
    .suggestion-item .single-listing-name .listing-name {
        display: inline-block;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Uniform width for the suggestion row action buttons (Connect / Approve /
       Sent / Connected) so they line up on one vertical edge across rows whatever
       the label. The labels are single short words, so this width also holds them
       on one line without overlapping the name. */
    .suggestion-item .btn-md--1 {
        min-width: 108px;
        /* Keep the button on one line so the spinner stays inline and the shape
           does not change while a Connect/Approve request is processing. */
        white-space: nowrap;
    }
}

.nav-tabs .nav-link {
    font-weight: 500;
}

.match-list-jform-group {
    height: 37px;
    margin-bottom: -9px;
}

.loading-spinner-lg {
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.chat-contact {
    height: 4.388rem !important;
}

.fs-1-22 {
    font-size: 1.22rem !important;
}

.certified-sign {
    width: 20px !important;
}

.certified-sm {
    width: 18px !important;
}

.certified-lg {
    width: 35px !important;
}

.certified-sign-menu {
    width: 17px;
    margin-bottom: 4px;
}

.certified-modal-limit {
    width: 100px;
}

.dropdown-menu.dropdown-menu-end {
    width: max-content;
}

.fs-1-3 {
    font-size: 1.3rem !important;
}

.fs-1-5 {
    font-size: 1.5rem !important;
}

.benefit-icon {
    width: 20px;
}

.pt-3px {
    padding-top: 3px;
}

/* Subscription */
#subscription-data {
    background: #F9FAFD;
}

.benefits-cancel-desktop .list-group {
    width: 220px;
    margin: 0 auto;
}

.payment-card-img {
    width: 20px;
}

#loading-desktop {
    height: 68px;
}

.extended-hr {
    margin-left: -20px;
    margin-right: -20px;
    border: 2px solid;
}

.stepper-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.stepper-progress-line {
    flex-grow: 1;
    height: 4px;
    background: #EEF3F8;
    margin: 0;
}

.stepper-active {
    background: #2A7BE4;
}

.stepper-pending {
    background: #EEF3F8;
}

.stepper-pending-border {
    border: 2px solid #2A7BE4;
}

.stepper-step {
    display: flex;
    color: #fff;
    font-size: 14px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.subscription-next-list {
    padding-left: 20px;
}

.subscription-next-list > li::marker {
    color: #0B1828;
}

@media (min-width: 768px) {
    #benefits-list > li {
        background: #F9FAFD;
        margin-bottom: 4px;
    }
}

/* collaborations */
.collab-header-img-container {
    height: 5.35rem;
    width: 5.35rem;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.collab-header-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.collab-type-badge {
    background-color: #EEF0F2;
    padding: .3em .5em;
}

.collab-type-name {
    padding-left: 2px;
}

.w-20px {
    width: 20px !important;
}

.margin-x-out-1rem {
    margin-left: -1rem;
    margin-right: -1rem;
}

.border-light-1 {
    border-color: #EEF3F8 !important;
}

.creator-collab-main-info {
    width: 100%;
    height: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.55) 50%, rgba(30, 41, 59, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding-left: 16px;
    color: #FFFFFF;
}

.brand-info-title {
    min-width: 120px !important;
}

.collab_media_add_dropzone {
    height: 112px;
    width: 100%;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill: none; stroke: %23D8E2EE; stroke-width: 4; stroke-dasharray: 12 12'/></svg>");

    input {
        height: 100%;
        opacity: 0;
    }
}

.collab-info-header {
    background-color: #F9FAFD;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    height: 44px;
    display: flex;
    align-items: center;
}

#collab-draft-info-box {
    background-color: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 8px;
    align-items: flex-start !important;
}

#collab-draft-info-box .btn-close {
    margin-top: -4px;
    flex-shrink: 0;
}

#collab_stats {
    background-color: #f9fbfd !important;
    border-radius: 10px;
    margin: 0 12px 4px;
    border: 1px solid #edf1f6;
    padding: 12px !important;
}

#collab-card {
    margin-top: 0 !important;
    border-top: none;
}

#collab-card > .card-body {
    padding-top: 0;
    margin-top: -16px;
}

#collab-card-info .collab-info-header {
    margin-top: 8px !important;
}

#collab-images {
    padding-bottom: 0 !important;
    margin-bottom: -4px;
}

#collab-video {
    padding-bottom: 0 !important;
    margin-bottom: -4px;
}

.w-30 {
    width: 32% !important;
}

.w-33 {
    width: 33% !important;
}

.w-34 {
    width: 34% !important;
}

.w-27pc {
    width: 27% !important;
}

.w-40pc {
    width: 40% !important;
}

.collab-video-item {
    min-height: 100px !important;
    max-height: 250px !important;
}

.info-panel-footer-buttons {
    min-height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

.height-72px {
    height: 72px !important;
}

.width-72px {
    width: 72px !important;
}

.info-panel-footer-buttons .btn-primary {
    padding: .3rem .75rem .175rem .75rem !important;
}

.btn-reveal:focus {
    outline: none;
    box-shadow: none;
}

#btn_mobile_market::before {
    top: 4px;
    right: 18px;
}

#sideMenu_market::before {
    top: 14px;
    right: 188px;
}

@media (min-width: 768px) and (max-width: 1200px) {
    #sideMenu_market::before {
        top: 14px;
        right: 172px;
    }
}

.dropdown-item {
    white-space: nowrap !important;
}

/* Social CTA */
.social-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    font-weight: 600;

    transition: all 0.15s ease;
}

/* compact size */
.social-cta-sm {
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 10px;
}

.social-cta-sm img {
    width: 18px;
    height: 18px;
}

/* Instagram */
.social-cta.instagram {
    color: #c13584;
    border: 1.5px solid #f0c4d8;
    background: #fff;
}

.social-cta.instagram:hover {
    background: #fdf1f6;
}

/* YouTube */
.social-cta.youtube {
    color: #ff0000;
    border: 1.5px solid #ffd6d6;
    background: #fff;
}

.social-cta.youtube:hover {
    background: #fff1f1;
}

.segmented {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.segmented::-webkit-scrollbar {
    display: none;
}

.segmented-item {
    border: none;
    background: #EFEFEF;
    color: #262626;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    flex: 0 0 auto;
    max-width: 100%;
    font-weight: 500;
}

.segmented-item:hover {
    background: #E2E2E2;
}

.segmented-item.active {
    background: #E7F0FF;
    color: #1B74E4;
    font-weight: 500;
}

.segmented-item:focus {
    outline: none;
    box-shadow: none;
}

/* FTS search keyword highlight */
.fts-match-keyword {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a73e8;
    background-color: #e8f0fe;
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    margin-top: 2px;
}

#preview_post_form {
    padding-bottom: 55px;
}

/* ---- In-feed "Get Certified" ad card (apps/pwa/feed) ---- */
.feed-ad-cert {
    max-width: 470px;
    width: 100%;
    padding: 11px !important;
}
.feed-ad-cert__inner {
    position: relative;
    border-radius: 18px;
    padding: 22px 24px 28px;
    overflow: hidden;
    background-color: #FAFCFE;
}
.feed-ad-cert__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.feed-ad-cert__label {
    position: relative;
    z-index: 1;
    color: #7B8694;
    font-size: 13px;
    font-weight: 500;
}
.feed-ad-cert__body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 22px;
    margin-top: 14px;
    align-items: center;
}
.feed-ad-cert__icon-col {
    flex: 0 0 132px;
    text-align: center;
}
.feed-ad-cert__badge {
    display: block;
    width: 108px;
    height: 108px;
    margin: 0 auto;
    filter: drop-shadow(0 6px 14px rgba(42, 123, 228, 0.20));
}
.feed-ad-cert__icon-label {
    margin-top: 12px;
    color: #2A7BE4;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
}
.feed-ad-cert__icon-sub {
    color: #181A1C;
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
}
.feed-ad-cert__divider {
    flex: 0 0 1px;
    align-self: stretch;
    background-color: rgba(42, 123, 228, 0.18);
    margin: 6px 0;
}
.feed-ad-cert__text-col {
    flex: 1;
    min-width: 0;
}
.feed-ad-cert__headline {
    color: #181A1C;
    font-weight: 800;
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.feed-ad-cert__cta-strong {
    display: inline-block;
    margin-top: 10px;
    color: #2A7BE4;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none;
}
.feed-ad-cert__cta-strong:hover {
    text-decoration: underline;
    color: #2A7BE4;
}
.feed-ad-cert__sub {
    color: #4F5762;
    font-size: 13.5px;
    line-height: 1.4;
    margin-top: 10px;
}
.feed-ad-cert__more {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    color: #2A7BE4;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}
.feed-ad-cert__more:hover {
    text-decoration: underline;
    color: #2A7BE4;
}
@media (max-width: 480px) {
    .feed-ad-cert__inner {
        padding: 18px 18px 22px;
    }
    .feed-ad-cert__body {
        gap: 14px;
        margin-top: 10px;
    }
    .feed-ad-cert__icon-col {
        flex: 0 0 108px;
    }
    .feed-ad-cert__badge {
        width: 88px;
        height: 88px;
    }
    .feed-ad-cert__icon-label {
        font-size: 17px;
        margin-top: 10px;
    }
    .feed-ad-cert__headline {
        font-size: 17px;
    }
    .feed-ad-cert__cta-strong {
        font-size: 17px;
    }
    .feed-ad-cert__sub {
        font-size: 12.5px;
    }
    .feed-ad-cert__more {
        font-size: 14px;
    }
}

/* Skeleton placeholders shown while a list page loads (feed, matches/suggestions,
   marketplace) and by the feed pull-to-refresh. Kept global (not inline in a page
   template) so the cards are styled before that page's HTML has been injected.
   `.sk` is the shimmering grey block; the wrappers below lay them out to match
   each page so swapping skeletons for real content does not jump. */
#post_list.is-refreshing {
    transition: opacity 0.2s ease;
}

.sk {
    background: #e8ebee;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: sk-shimmer 1.3s ease-in-out infinite;
}

@keyframes sk-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.sk-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.sk-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.sk-line {
    height: 12px;
}

.sk-media {
    width: 100%;
    height: 320px;
    border-radius: 10px;
}

.sk-btn {
    width: 90px;
    height: 34px;
    border-radius: 18px;
    flex-shrink: 0;
}

.sk-thumb {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Feed post card */
.feed-skeleton {
    background: #fff;
    padding: 1rem 1rem 1.25rem;
    border-bottom: 1px solid #edf0f3;
}

/* Matches / suggestions list row */
.list-skeleton {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1rem;
    border-bottom: 1px solid #edf0f3;
}

/* Marketplace collab tile */
.collab-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff;
    padding: 1rem;
    border-bottom: 1px solid #edf0f3;
}