/* =========================================================
   FILME10 SOCIAL CONFIGURATOR - PREMIUM V3
========================================================= */

/* HIDE WORDPRESS ADMIN BAR */

body.f10-social-config-body #wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

body.f10-social-config-body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.f10-social-config-body {
    margin: 0;
    background: #f4f5f7;
    color: #182230;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.f10-social-config-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    min-height: 58px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(15,17,21,.97);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.f10-social-config-header-inner {
    width:
        calc(100% - 32px);

    max-width:
        1080px;

    min-height:
        58px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(180px,1fr)
        auto
        minmax(180px,1fr);

    align-items:
        center;

    gap:
        18px;
}

.f10-social-config-brand {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    text-decoration:
        none;
}

.f10-social-config-brand-mark {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(212,175,55,.48);

    border-radius:
        9px;

    background:
        #1a1d22;

    color:
        #e2b73d;

    font-size:
        9px;

    font-weight:
        950;
}

.f10-social-config-brand-copy {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.05;
}

.f10-social-config-brand-copy strong {
    color:
        #fff;

    font-size:
        12px;

    font-weight:
        900;
}

.f10-social-config-brand-copy small {
    margin-top:
        3px;

    color:
        #c99a24;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .15em;
}

.f10-social-config-header-title {
    text-align:
        center;
}

.f10-social-config-header-title span {
    display:
        block;

    color:
        #b98a19;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .16em;
}

.f10-social-config-header-title strong {
    display:
        block;

    margin-top:
        2px;

    color:
        #f8fafc;

    font-size:
        10px;

    font-weight:
        850;
}

.f10-social-config-close {
    justify-self:
        end;

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.035);

    color:
        #98a2b3;

    font-size:
        18px;

    text-decoration:
        none;
}


/* PAGE */

.f10-social-page {
    min-height:
        calc(100vh - 58px);

    padding:
        24px 16px
        54px;

    background:
        #f4f5f7;
}

.f10-social-shell {
    width:
        100%;

    max-width:
        1080px;

    margin:
        0 auto;
}


/* TOPBAR */

.f10-social-topbar {
    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        12px;
}

.f10-social-back {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #667085;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;
}

.f10-social-back span {
    font-size:
        14px;
}

.f10-social-top-status {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}

.f10-social-top-status > span {
    color:
        #98a2b3;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .12em;
}

.f10-social-top-status strong {
    min-height:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 8px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        950;
}

.f10-social-top-status strong.is-draft {
    background:
        #fff3cd;

    color:
        #8a5a00;
}

.f10-social-top-status strong.is-published {
    background:
        #dcfae6;

    color:
        #067647;
}


/* HERO */

.f10-social-hero {
    overflow:
        hidden;

    margin-bottom:
        14px;

    border:
        1px solid
        #e2e5e9;

    border-radius:
        15px;

    background:
        #fff;

    box-shadow:
        0 6px 20px
        rgba(16,24,40,.055);
}

.f10-social-cover {
    position:
        relative;

    height:
        175px;

    background:
        linear-gradient(
            135deg,
            #171a20,
            #292f3a
        );

    background-size:
        cover;

    background-position:
        center;
}

.f10-social-cover-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            rgba(0,0,0,.24)
        );
}

.f10-social-cover-button {
    position:
        absolute;

    right:
        13px;

    bottom:
        13px;

    z-index:
        2;

    min-height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius:
        8px;

    background:
        rgba(14,16,20,.76);

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        850;

    cursor:
        pointer;
}

.f10-social-cover-button input {
    display:
        none;
}


/* IDENTITY PREVIEW */

.f10-social-identity-preview {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        15px;

    padding:
        0 18px
        17px;
}

.f10-social-avatar-wrap {
    position:
        relative;

    width:
        86px;

    height:
        86px;

    flex:
        0 0 86px;

    margin-top:
        -43px;
}

.f10-social-avatar {
    width:
        86px;

    height:
        86px;

    display:
        block;

    object-fit:
        cover;

    border:
        4px solid
        #fff;

    border-radius:
        50%;

    background:
        #eef1f4;

    box-shadow:
        0 6px 18px
        rgba(16,24,40,.16);
}

.f10-social-avatar-button {
    position:
        absolute;

    right:
        0;

    bottom:
        2px;

    width:
        26px;

    height:
        26px;

    display:
        grid;

    place-items:
        center;

    border:
        3px solid
        #fff;

    border-radius:
        50%;

    background:
        #202631;

    color:
        #fff;

    font-size:
        10px;

    cursor:
        pointer;
}

.f10-social-avatar-button input {
    display:
        none;
}

.f10-social-preview-copy {
    min-width:
        0;

    padding-top:
        10px;
}

.f10-social-preview-label {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #ad7a07;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .14em;
}

.f10-social-preview-copy h1 {
    margin:
        0;

    color:
        #17202d;

    font-size:
        20px;

    line-height:
        1.15;

    font-weight:
        900;
}

.f10-social-preview-username {
    margin-top:
        2px;

    color:
        #667085;

    font-size:
        10px;

    font-weight:
        750;
}

.f10-social-preview-copy p {
    max-width:
        620px;

    margin:
        6px 0 0;

    color:
        #667085;

    font-size:
        9px;

    line-height:
        1.55;
}


/* FORM */

.f10-social-form {
    display:
        grid;

    gap:
        12px;
}

.f10-social-card {
    padding:
        18px;

    border:
        1px solid
        #e2e5e9;

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        0 4px 14px
        rgba(16,24,40,.035);
}

.f10-social-card-head {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding-bottom:
        13px;

    margin-bottom:
        15px;

    border-bottom:
        1px solid
        #f0f1f3;
}

.f10-social-step {
    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        #202631;

    color:
        #ddb137;

    font-size:
        8px;

    font-weight:
        950;
}

.f10-social-card-head h2 {
    margin:
        0;

    color:
        #182230;

    font-size:
        13px;
}

.f10-social-card-head p {
    margin:
        3px 0 0;

    color:
        #98a2b3;

    font-size:
        8px;
}


/* FIELDS */

.f10-social-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px;
}

.f10-social-field-full {
    grid-column:
        1 / -1;
}

.f10-social-field label,
.f10-social-label-row label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #344054;

    font-size:
        8px;

    font-weight:
        850;
}

.f10-social-field input,
.f10-social-field textarea {
    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid
        #dfe3e8;

    border-radius:
        8px;

    outline:
        none;

    background:
        #fafbfc;

    color:
        #1d2939;

    font:
        inherit;

    font-size:
        9px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.f10-social-field input {
    height:
        38px;

    padding:
        0 10px;
}

.f10-social-field textarea {
    min-height:
        90px;

    padding:
        10px;

    resize:
        vertical;

    line-height:
        1.55;
}

.f10-social-field input:focus,
.f10-social-field textarea:focus {
    border-color:
        #d2a12c;

    background:
        #fff;

    box-shadow:
        0 0 0 3px
        rgba(210,161,44,.09);
}

.f10-social-field small {
    display:
        block;

    margin-top:
        5px;

    color:
        #98a2b3;

    font-size:
        7px;

    line-height:
        1.45;
}

.f10-social-field small.is-error {
    color:
        #d92d20;

    font-weight:
        750;
}

.f10-social-label-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.f10-social-label-row > span {
    color:
        #98a2b3;

    font-size:
        7px;
}

.f10-social-username-box {
    display:
        flex;

    align-items:
        center;

    height:
        38px;

    overflow:
        hidden;

    border:
        1px solid
        #dfe3e8;

    border-radius:
        8px;

    background:
        #fafbfc;
}

.f10-social-username-box:focus-within {
    border-color:
        #d2a12c;

    background:
        #fff;

    box-shadow:
        0 0 0 3px
        rgba(210,161,44,.09);
}

.f10-social-username-box > span {
    padding-left:
        10px;

    color:
        #98a2b3;

    font-size:
        9px;

    font-weight:
        850;
}

.f10-social-username-box input {
    height:
        36px;

    border:
        0;

    background:
        transparent;

    box-shadow:
        none !important;
}


/* MESSAGE */

.f10-social-config-message {
    padding:
        9px 11px;

    border-radius:
        8px;

    font-size:
        8px;

    font-weight:
        750;
}

.f10-social-config-message.is-success {
    border:
        1px solid
        #abefc6;

    background:
        #ecfdf3;

    color:
        #067647;
}

.f10-social-config-message.is-error {
    border:
        1px solid
        #fecdca;

    background:
        #fef3f2;

    color:
        #b42318;
}


/* PUBLICATION */

.f10-social-publish-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        16px 18px;

    border:
        1px solid
        #292d35;

    border-radius:
        14px;

    background:
        #15181e;

    color:
        #fff;
}

.f10-social-publish-kicker {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #d6a126;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .14em;
}

.f10-social-publish-card h2 {
    margin:
        0;

    color:
        #fff;

    font-size:
        13px;
}

.f10-social-publish-card p {
    margin:
        4px 0 0;

    color:
        #98a2b3;

    font-size:
        8px;
}

.f10-social-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex:
        0 0 auto;
}

.f10-social-save,
.f10-social-publish {
    min-height:
        35px;

    padding:
        0 12px;

    border-radius:
        8px;

    font-family:
        inherit;

    font-size:
        7px;

    font-weight:
        950;

    letter-spacing:
        .035em;

    cursor:
        pointer;
}

.f10-social-save {
    border:
        1px solid
        #475467;

    background:
        transparent;

    color:
        #fff;
}

.f10-social-publish {
    border:
        1px solid
        #d3a326;

    background:
        #dbae33;

    color:
        #17191d;
}

.f10-social-publish.is-published {
    border-color:
        #f04438;

    background:
        transparent;

    color:
        #f97066;
}

.f10-social-save:disabled,
.f10-social-publish:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}


/* FOOTER */

.f10-social-config-footer {
    border-top:
        1px solid
        #e4e7ec;

    background:
        #fff;
}

.f10-social-config-footer-inner {
    width:
        calc(100% - 32px);

    max-width:
        1080px;

    min-height:
        50px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}

.f10-social-config-footer-inner span {
    color:
        #ad7a07;

    font-size:
        6px;

    font-weight:
        950;

    letter-spacing:
        .14em;
}

.f10-social-config-footer-inner small {
    color:
        #98a2b3;

    font-size:
        7px;
}


/* RESPONSIVE */

@media (max-width: 760px) {

    .f10-social-config-header-inner {
        grid-template-columns:
            1fr
            auto;
    }

    .f10-social-config-header-title {
        display:
            none;
    }

    .f10-social-page {
        padding:
            14px 9px
            38px;
    }

    .f10-social-cover {
        height:
            130px;
    }

    .f10-social-identity-preview {
        display:
            block;

        padding:
            0 13px
            14px;
    }

    .f10-social-avatar-wrap {
        width:
            72px;

        height:
            72px;

        margin-top:
            -36px;
    }

    .f10-social-avatar {
        width:
            72px;

        height:
            72px;
    }

    .f10-social-preview-copy {
        padding-top:
            8px;
    }

    .f10-social-grid {
        grid-template-columns:
            1fr;
    }

    .f10-social-field-full {
        grid-column:
            auto;
    }

    .f10-social-card {
        padding:
            14px 12px;
    }

    .f10-social-publish-card {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .f10-social-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }

    .f10-social-save,
    .f10-social-publish {
        width:
            100%;
    }

    .f10-social-config-footer-inner {
        min-height:
            auto;

        padding:
            12px 0;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;
    }

}


/*
|--------------------------------------------------------------------------
| BASIC MEMBER PROFILE
|--------------------------------------------------------------------------
*/

.f10-basic-member-page {
    min-height: 70vh;
    padding: 50px 20px 80px;
    background: #f6f7f9;
}

.f10-basic-member-shell {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.f10-basic-member-card {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 34px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 15px 45px
        rgba(16, 24, 40, .07);
}

.f10-basic-member-avatar {
    flex: 0 0 125px;
}

.f10-basic-member-avatar img {
    display: block;
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow:
        0 8px 25px
        rgba(16, 24, 40, .16);
}

.f10-basic-member-info {
    min-width: 0;
}

.f10-basic-member-label {
    display: block;
    margin-bottom: 6px;
    color: #c78b00;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
}

.f10-basic-member-info h1 {
    margin: 0;
    color: #101828;
    font-size: 28px;
    line-height: 1.2;
}

.f10-basic-member-username {
    margin-top: 4px;
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.f10-basic-member-since {
    margin:
        14px 0
        0;
    color: #667085;
    font-size: 12px;
}

.f10-basic-member-notice {
    display: inline-flex;
    margin-top: 18px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #f5f6f8;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 600px) {

    .f10-basic-member-card {
        display: block;
        padding: 25px 20px;
    }

    .f10-basic-member-avatar {
        margin-bottom: 18px;
    }

    .f10-basic-member-avatar img {
        width: 105px;
        height: 105px;
    }

    .f10-basic-member-info h1 {
        font-size: 23px;
    }

}


/*
|--------------------------------------------------------------------------
| FILME10 COMMUNITY - PREMIUM COMPACT V2
|--------------------------------------------------------------------------
*/



html body.filme10-community-body {
    margin: 0 !important;
    padding-top: 0 !important;
}

body.filme10-community-body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.filme10-community-body #wpadminbar {
    display: none !important;
}

.filme10-community-body {
    background: #f5f6f8;
    color: #182230;
}

.f10-community-app {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.f10-community-app {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% -120px,
            rgba(212, 175, 55, .075),
            transparent 330px
        ),
        #f5f6f8;
}


/*
|--------------------------------------------------------------------------
| COMMUNITY TOPBAR
|--------------------------------------------------------------------------
*/

.f10-community-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 54px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(13, 15, 19, .97);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.10);
}

.f10-community-topbar-inner {
    width: calc(100% - 32px);
    max-width: 980px;
    height: 54px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(180px,1fr)
        auto
        minmax(180px,1fr);

    align-items: center;
    gap: 18px;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.f10-community-logo {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    text-decoration: none;
}

.f10-community-logo-main {
    color: #fff;

    font-size: 14px;
    font-weight: 950;

    letter-spacing: -.035em;
}

.f10-community-logo-badge {
    padding: 3px 6px;

    border:
        1px solid rgba(212,175,55,.38);

    border-radius: 999px;

    background:
        rgba(212,175,55,.09);

    color: #e1b83e;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .13em;
}


/*
|--------------------------------------------------------------------------
| TOP NAV
|--------------------------------------------------------------------------
*/

.f10-community-topnav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 3px;
}

.f10-community-topnav-link {
    height: 36px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 0 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #98a2b3;

    font-family: inherit;
    font-size: 9px;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .16s ease,
        color .16s ease;
}

.f10-community-topnav-link:hover {
    background:
        rgba(255,255,255,.055);

    color: #fff;
}

.f10-community-topnav-link svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.f10-community-topnav-link.is-disabled {
    opacity: .42;
    cursor: default;
}


/*
|--------------------------------------------------------------------------
| TOPBAR RIGHT
|--------------------------------------------------------------------------
*/

.f10-community-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.f10-community-return {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #98a2b3;

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}

.f10-community-return:hover {
    color: #fff;
}

.f10-community-return svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
}

.f10-community-account {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding: 1px;

    border:
        1px solid rgba(212,175,55,.50);

    border-radius: 50%;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #ebc453,
            #a87309
        );

    text-decoration: none;
}

.f10-community-account img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    border:
        1px solid #111318;

    border-radius: 50%;

    box-sizing: border-box;
}

.f10-community-account > span {
    color: #fff;

    font-size: 9px;
    font-weight: 900;
}

.f10-community-auth {
    min-height: 31px;

    display: inline-flex;
    align-items: center;

    padding: 0 11px;

    border-radius: 7px;

    background: #d7a82c;
    color: #171717;

    font-size: 8px;
    font-weight: 900;

    text-decoration: none;
}

.f10-community-mobile-brand {
    display: none;
}


/*
|--------------------------------------------------------------------------
| COMMUNITY MAIN
|--------------------------------------------------------------------------
*/

.f10-community-main {
    min-height:
        calc(100vh - 54px);
}


/*
|--------------------------------------------------------------------------
| PUBLIC PROFILE PAGE
|--------------------------------------------------------------------------
*/

.f10-public-social-page {
    min-height: 100vh;

    padding:
        20px 14px
        48px;
}

.f10-public-social-shell {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| PROFILE HERO
|--------------------------------------------------------------------------
*/

.f10-public-social-profile {
    position: relative;

    overflow: hidden;

    border:
        1px solid #e4e7ec;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 8px 28px
        rgba(16,24,40,.065);
}


/*
|--------------------------------------------------------------------------
| COVER
|--------------------------------------------------------------------------
*/

.f10-public-social-cover {
    position: relative;

    height: 145px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(212,175,55,.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #1c2028,
            #0c0e12
        );

    background-position: center;
    background-size: cover;
}

.f10-public-social-cover-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.01),
            rgba(0,0,0,.28)
        );
}


/*
|--------------------------------------------------------------------------
| PROFILE IDENTITY
|--------------------------------------------------------------------------
*/

.f10-public-social-header {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding:
        0 19px
        17px;
}


/*
|--------------------------------------------------------------------------
| AVATAR
|--------------------------------------------------------------------------
*/

.f10-public-social-avatar-wrap {
    position: relative;
    z-index: 5;

    width: 82px;
    height: 82px;

    flex:
        0 0 82px;

    margin-top: -41px;
}

.f10-public-social-avatar-ring {
    position: relative;

    width: 82px;
    height: 82px;

    display: grid;
    place-items: center;

    padding: 3px;

    box-sizing: border-box;

    border-radius: 50%;

background: #e4e7ec;
        

    box-shadow:
        0 7px 18px
        rgba(16,24,40,.16),
        0 0 0 3px #fff;
}

/* STORY NOU / NEVĂZUT */

.f10-public-social-avatar-ring.has-story-unseen {
    background:
        conic-gradient(
            from 35deg,
            #f2c94c 0deg,
            #d4af37 100deg,
            #8b5cf6 190deg,
            #6d28d9 285deg,
            #f2c94c 360deg
        );

    box-shadow:
        0 7px 18px rgba(16,24,40,.16),
        0 0 0 3px #fff,
        0 0 18px rgba(139,92,246,.16);
}


/* STORY VĂZUT */

.f10-public-social-avatar-ring.has-story-seen {
    background:
        linear-gradient(
            135deg,
            #cbd0d8,
            #8e96a3
        );

    box-shadow:
        0 7px 18px rgba(16,24,40,.12),
        0 0 0 3px #fff;
}

.f10-public-social-avatar-inner {
    width: 100%;
    height: 100%;

    overflow: hidden;

    padding: 3px;

    box-sizing: border-box;

    border-radius: 50%;

    background: #fff;
}

.f10-public-social-avatar {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    border: 0;
    border-radius: 50%;

    background: #eef1f4;
}






/*
|--------------------------------------------------------------------------
| AVATAR BADGE
|--------------------------------------------------------------------------
*/



.f10-public-social-avatar-add {
    position: absolute;

    z-index: 11;

    right: -1px;
    bottom: 0;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        3px solid #fff;

    border-radius: 50%;

    background: #202631;

    color: #fff;

    box-shadow:
        0 3px 9px
        rgba(16,24,40,.20);

    font-family: inherit;
    font-size: 15px;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| PROFILE MAIN
|--------------------------------------------------------------------------
*/

.f10-public-social-main {
    min-width: 0;
    flex: 1;

    padding-top: 12px;
}

.f10-public-social-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.f10-public-social-kicker {
    display: block;

    margin-bottom: 3px;

    color: #ad7a07;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .15em;
}

.f10-public-social-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;
}

.f10-public-social-title-line h1 {
    margin: 0;

    color: #17202d;

    font-size: 21px;
    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -.025em;
}

.f10-public-social-group-label {
    --f10-group-color: #d4af37;

    min-height: 19px;

    display: inline-flex;
    align-items: center;

    padding: 0 6px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--f10-group-color) 35%,
            transparent
        );

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--f10-group-color) 9%,
            white
        );

    color:
        var(--f10-group-color);

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .06em;

    text-transform: uppercase;
}

.f10-public-social-username {
    margin-top: 3px;

    color: #667085;

    font-size: 10px;
    font-weight: 700;
}

.f10-public-social-bio {
    max-width: 610px;

    margin-top: 8px;

    color: #596579;

    font-size: 10px;

    line-height: 1.55;
}

.f10-public-social-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 9px;

    color: #98a2b3;

    font-size: 8px;
    font-weight: 650;
}


/*
|--------------------------------------------------------------------------
| PROFILE ACTIONS
|--------------------------------------------------------------------------
*/

.f10-public-social-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.f10-public-social-button {
    height: 38px;
min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0 15px;

    box-sizing: border-box;

    border-radius: 10px;

    font-family: inherit;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .035em;

    cursor: pointer;

    text-decoration: none;

    transition:
        transform .15s ease,
        background .15s ease;
}

.f10-public-social-button:hover {
    transform:
        translateY(-1px);
}

.f10-public-social-edit {
    border:
        1px solid #202631;

    background:
        #202631;

    color: #fff;
}

.f10-public-social-friend {
    border:
        1px solid #d5a322;

    background:
        #e2b435;

    color:
        #1b1d20;
}

.f10-public-social-message {
    border:
        1px solid #e1e5ea;

    background: #fff;

    color: #667085;
}

.f10-public-social-message:disabled {
    opacity: .65;

    cursor: default;
}

.f10-public-social-message span {
    padding: 2px 4px;

    border-radius: 4px;

    background: #f2f4f7;

    font-size: 5px;
}


/*
|--------------------------------------------------------------------------
| CREATE POST
|--------------------------------------------------------------------------
*/

.f10-community-create {
    margin-top: 12px;

    padding: 12px;

    border:
        1px solid #e4e7ec;

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 4px 16px
        rgba(16,24,40,.035);
}

.f10-community-create-head {
    display: flex;
    align-items: center;

    gap: 9px;
}

.f10-community-create-head img {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

    object-fit: cover;

    padding: 2px;

    box-sizing: border-box;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #e4b632,
            #805ad5
        );
}

.f10-community-create-post {
    width: 100%;
    height: 36px;

    padding: 0 13px;

    border: 0;
    border-radius: 999px;

    background: #f3f5f7;

    color: #667085;

    font-family: inherit;

    font-size: 9px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}

.f10-community-create-actions {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 5px;

    margin-top: 9px;

    padding-top: 9px;

    border-top:
        1px solid #f0f1f3;
}

.f10-community-create-action {
    min-height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 6px 8px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    font-family: inherit;

    text-align: left;

    cursor: pointer;
}

.f10-community-create-action:hover {
    background: #f7f8fa;
}

.f10-community-create-icon {
    width: 27px;
    height: 27px;

    flex:
        0 0 27px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: #202631;

    color: #ddb137;

    font-size: 12px;
}

.f10-community-create-action strong {
    color: #344054;

    font-size: 9px;
}

.f10-community-create-action small {
    display: none;
}


/*
|--------------------------------------------------------------------------
| PROFILE CONTENT
|--------------------------------------------------------------------------
*/

.f10-public-social-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.7fr)
        minmax(220px,.65fr);

    align-items: start;

    gap: 12px;

    margin-top: 12px;
}

.f10-public-social-side {
    display: grid;

    align-content: start;

    gap: 12px;
}


/*
|--------------------------------------------------------------------------
| PROFILE CARDS
|--------------------------------------------------------------------------
*/

.f10-public-social-card {
    padding: 15px;

    border:
        1px solid #e4e7ec;

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 4px 16px
        rgba(16,24,40,.035);
}

.f10-public-social-section-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 9px;

    margin-bottom: 10px;

    border-bottom:
        1px solid #f0f1f3;
}

.f10-public-social-section-head span {
    display: block;

    margin-bottom: 2px;

    color: #ae7a06;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .14em;
}

.f10-public-social-section-head h2 {
    margin: 0;

    color: #182230;

    font-size: 12px;
    font-weight: 850;
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.f10-public-social-empty {
    min-height: 145px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 18px;

    text-align: center;
}

.f10-public-social-empty > div {
    margin-bottom: 7px;

    font-size: 22px;
}

.f10-public-social-empty strong {
    color: #475467;

    font-size: 10px;
}

.f10-public-social-empty p {
    max-width: 330px;

    margin: 4px auto 0;

    color: #98a2b3;

    font-size: 8px;

    line-height: 1.55;
}

.f10-public-social-mini-empty {
    padding:
        5px 0 8px;

    color: #98a2b3;

    font-size: 8px;

    line-height: 1.55;
}



/*
|--------------------------------------------------------------------------
| SOCIAL POSTS
|--------------------------------------------------------------------------
*/

.f10-social-posts-list {
    display: grid;

    gap: 10px;
}


.f10-social-post-item {
    overflow: hidden;

    border:
        1px solid #e6e9ee;

    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 3px 12px
        rgba(16,24,40,.028);
}


.f10-social-post-head {
    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        11px 12px
        8px;
}


.f10-social-post-head img {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    background:
        #eef1f4;
}


.f10-social-post-head > div {
    min-width: 0;
}


.f10-social-post-head strong {
    display: block;

    color:
        #273142;

    font-size: 9px;

    font-weight: 850;
}


.f10-social-post-head small {
    display: block;

    margin-top: 2px;

    color:
        #98a2b3;

    font-size: 7px;
}


.f10-social-post-text {
    padding:
        4px 12px
        11px;

    color:
        #475467;

    font-size:
        10px;

    line-height:
        1.6;
}


.f10-social-post-media {
    overflow: hidden;

    border-top:
        1px solid #eef0f3;

    background:
        #0f1115;
}


.f10-social-post-media img,
.f10-social-post-media video {
    width: 100%;
    max-height: 460px;

    display: block;

    object-fit: contain;

    background:
        #0f1115;
}






/*
|--------------------------------------------------------------------------
| MESSAGE ACCESS
|--------------------------------------------------------------------------
*/

.f10-social-message-access {
    display: contents;
}

.f10-social-message-help {
    display: none !important;
}

.f10-public-social-message.is-available {
    border-color:
        #d5a322;

    background:
        #fffaf0;

    color:
        #8b6507;
}


/*
|--------------------------------------------------------------------------
| NOTIFICATION BADGE
|--------------------------------------------------------------------------
*/

.f10-community-topnav-link {
    position: relative;
}

.f10-community-notification-badge[hidden] {
    display: none !important;
}

.f10-community-notification-badge {
    position: absolute;

    top: 2px;
    right: 2px;

    min-width: 15px;
    height: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    box-sizing: border-box;

    border:
        2px solid #101216;

    border-radius: 999px;

    background: #e5484d;

    color: #fff;

    font-style: normal;

    font-size: 6px;
    font-weight: 950;
}


/*
|--------------------------------------------------------------------------
| NOTIFICATION PANEL
|--------------------------------------------------------------------------
*/

.f10-social-notifications-panel {
    position: fixed;

    z-index: 3000;

    top: 62px;
    left: 50%;

    width: 360px;
    max-width:
        calc(100vw - 24px);

    overflow: hidden;

    border:
        1px solid #e4e7ec;

    border-radius: 14px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 20px 55px
        rgba(16,24,40,.16);

    opacity: 0;

    visibility: hidden;

    transform:
        translate(
            55px,
            -6px
        );

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}

.f10-social-notifications-panel.is-open {
    opacity: 1;

    visibility: visible;

    transform:
        translate(
            55px,
            0
        );
}

.f10-social-notifications-head {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 0 15px;

    border-bottom:
        1px solid #eef0f3;
}

.f10-social-notifications-head span {
    display: block;

    color: #ac7908;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .14em;
}

.f10-social-notifications-head strong {
    display: block;

    margin-top: 2px;

    color: #182230;

    font-size: 12px;
}

.f10-social-notifications-head button {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid #e4e7ec;

    border-radius: 7px;

    background: #fff;

    color: #667085;

    font-size: 17px;

    cursor: pointer;
}

.f10-social-notifications-list {
    max-height: 430px;

    overflow-y: auto;
}

.f10-social-notification-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f1f3;
    transition:
        background .15s ease,
        transform .15s ease;
}

.f10-social-notification-item.is-clickable {
    cursor: pointer;
}

.f10-social-notification-item.is-clickable:hover {
    background: #f8f9fb;
}

.f10-social-notification-item.is-unread.is-clickable:hover {
    background: #fff7e5;
}

.f10-social-notification-item.is-unread {
    background:
        #fffbf1;
}

.f10-social-notification-avatar {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #202631;

    color: #fff;

    font-size: 7px;
    font-weight: 900;
	
	    cursor: pointer;
    transition: transform .15s ease;
}

.f10-social-notification-avatar.is-profile-link:hover {
    transform: scale(1.06);
}

.f10-social-notification-copy strong.is-profile-link {
    cursor: pointer;
}

.f10-social-notification-copy strong.is-profile-link:hover {
    color: #ad7a07;
    text-decoration: underline;
}

.f10-social-notification-avatar img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.f10-social-notification-copy {
    min-width: 0;
}

.f10-social-notification-copy strong {
    display: block;

    color: #344054;

    font-size: 9px;
}

.f10-social-notification-copy p {
    margin:
        2px 0 0;

    color: #667085;

    font-size: 8px;

    line-height: 1.45;
}

.f10-social-notification-copy small {
    display: block;

    margin-top: 4px;

    color: #98a2b3;

    font-size: 7px;
}

.f10-social-notifications-empty {
    padding: 35px 18px;

    text-align: center;
}

.f10-social-notifications-empty span {
    display: block;

    margin-bottom: 7px;

    color: #b6840b;

    font-size: 20px;
}

.f10-social-notifications-empty strong {
    display: block;

    color: #344054;

    font-size: 10px;
}

.f10-social-notifications-empty p {
    margin:
        5px auto 0;

    color: #98a2b3;

    font-size: 8px;
}



/*
|--------------------------------------------------------------------------
| FRIEND REQUEST ACTIONS
|--------------------------------------------------------------------------
*/

.f10-notification-friend-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 8px;
}


.f10-notification-friend-actions button {
    min-height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 10px;

    border-radius: 7px;

    font-family: inherit;

    font-size: 7px;
    font-weight: 900;

    cursor: pointer;
}


.f10-notification-accept {
    border:
        1px solid #d5a322;

    background:
        #ddb238;

    color:
        #1c1d20;
}


.f10-notification-decline {
    border:
        1px solid #e4e7ec;

    background:
        #fff;

    color:
        #667085;
}


.f10-notification-friend-actions button:disabled {
    opacity: .5;

    cursor: default;
}


/*
|--------------------------------------------------------------------------
| TOAST
|--------------------------------------------------------------------------
*/

.f10-social-toast {
    position: fixed;

    z-index: 5000;

    left: 50%;
    bottom: 24px;

    max-width:
        calc(100vw - 30px);

    padding:
        10px 14px;

    border-radius: 9px;

    background: #182230;

    color: #fff;

    box-shadow:
        0 10px 30px
        rgba(16,24,40,.20);

    font-size: 9px;
    font-weight: 700;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(
            -50%,
            10px
        );

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.f10-social-toast.is-visible {
    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}

.f10-social-toast.is-error {
    background:
        #b42318;
}

.f10-social-toast.is-success {
    background:
        #182230;
}


/*
|--------------------------------------------------------------------------
| MOBILE NOTIFICATIONS
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .f10-social-notifications-panel {
        top: 55px;
        left: 12px;
        right: 12px;

        width: auto;

        transform:
            translateY(-5px);
    }

    .f10-social-notifications-panel.is-open {
        transform:
            translateY(0);
    }

    .f10-social-message-access {
        align-items: flex-start;
    }

    .f10-social-message-help {
        text-align: left;
    }
}


/*
|--------------------------------------------------------------------------
| SOCIAL CONTENT COMPOSER
|--------------------------------------------------------------------------
*/

body.f10-social-modal-open {
    overflow: hidden;
}


.f10-social-composer {
    position: fixed;
    inset: 0;

    z-index: 7000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


.f10-social-composer.is-open {
    opacity: 1;
    visibility: visible;
}


.f10-social-composer-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 13, 18, .56);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


.f10-social-composer-dialog {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.75);

    border-radius: 17px;

    background:
        #fff;

    box-shadow:
        0 30px 90px
        rgba(15,23,42,.28);

    transform:
        translateY(10px)
        scale(.985);

    transition:
        transform .18s ease;
}


.f10-social-composer.is-open
.f10-social-composer-dialog {
    transform:
        translateY(0)
        scale(1);
}


/*
|--------------------------------------------------------------------------
| HEAD
|--------------------------------------------------------------------------
*/

.f10-social-composer-head {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        0 18px;

    border-bottom:
        1px solid #eef0f3;
}


.f10-social-composer-head span {
    display: block;

    color:
        #ad7a07;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .14em;
}


.f10-social-composer-head strong {
    display: block;

    margin-top: 2px;

    color:
        #182230;

    font-size: 14px;
    font-weight: 850;
}


.f10-social-composer-head > button {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid #e4e7ec;

    border-radius: 8px;

    background: #fff;

    color:
        #667085;

    font-size: 19px;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.f10-social-composer-form {
    padding: 17px;
}


.f10-social-composer-form textarea {
    width: 100%;
    min-height: 125px;
    max-height: 280px;

    resize: vertical;

    box-sizing: border-box;

    padding: 14px;

    border:
        1px solid #e4e7ec;

    border-radius: 12px;

    outline: none;

    background:
        #f8f9fb;

    color:
        #182230;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.6;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.f10-social-composer-form textarea:focus {
    border-color:
        #d7ad38;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(215,173,56,.10);
}


/*
|--------------------------------------------------------------------------
| COUNTER
|--------------------------------------------------------------------------
*/

.f10-social-composer-counter {
    margin-top: 5px;

    color:
        #98a2b3;

    font-size: 7px;

    text-align: right;
}


.f10-social-composer-counter.is-limit {
    color:
        #b42318;
}


/*
|--------------------------------------------------------------------------
| MEDIA
|--------------------------------------------------------------------------
*/

.f10-social-composer-media {
    margin-top: 11px;
}


.f10-social-composer-media > label {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px dashed #d5dae2;

    border-radius: 10px;

    background:
        #fafbfc;

    color:
        #667085;

    font-size: 8px;
    font-weight: 800;

    cursor: pointer;

    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease;
}


.f10-social-composer-media > label:hover {
    border-color:
        #d5a322;

    background:
        #fffaf1;

    color:
        #946c0b;
}


.f10-social-composer-preview {
    margin-top: 10px;

    overflow: hidden;

    border:
        1px solid #e4e7ec;

    border-radius:
        11px;

    background:
        #0e1014;
}


.f10-social-composer-preview img,
.f10-social-composer-preview video {
    width: 100%;
    max-height: 320px;

    display: block;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| NOTE
|--------------------------------------------------------------------------
*/

.f10-social-composer-note {
    min-height: 14px;

    margin-top: 9px;

    color:
        #98a2b3;

    font-size: 7px;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.f10-social-composer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin-top: 15px;

    padding-top: 13px;

    border-top:
        1px solid #f0f1f3;
}


.f10-social-composer-footer button {
    min-height: 34px;

    padding:
        0 13px;

    border-radius:
        8px;

    font-family:
        inherit;

    font-size:
        7px;

    font-weight:
        900;

    cursor: pointer;
}


.f10-social-composer-cancel {
    border:
        1px solid #e4e7ec;

    background:
        #fff;

    color:
        #667085;
}


.f10-social-composer-submit {
    border:
        1px solid #d3a022;

    background:
        linear-gradient(
            135deg,
            #e7bc42,
            #cc981b
        );

    color:
        #17191c;

    box-shadow:
        0 5px 13px
        rgba(204,152,27,.16);
}


.f10-social-composer-submit:disabled {
    opacity:
        .55;

    cursor:
        default;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .f10-social-composer {
        padding:
            8px;
    }


    .f10-social-composer-dialog {
        max-height:
            calc(100vh - 16px);

        overflow-y:
            auto;

        border-radius:
            14px;
    }


    .f10-social-composer-head {
        min-height:
            56px;

        padding:
            0 13px;
    }


    .f10-social-composer-form {
        padding:
            13px;
    }


    .f10-social-composer-form textarea {
        min-height:
            105px;
    }

}



/*
|--------------------------------------------------------------------------
| PROFILE THEMES
|--------------------------------------------------------------------------
*/

.f10-public-theme-classic {
    --f10-theme-accent: #d5a322;
}

.f10-public-theme-cinema {
    --f10-theme-accent: #dc2626;
}

.f10-public-theme-cinema
.f10-public-social-cover {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(239,68,68,.28),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #350808,
            #08090b
        );
}

.f10-public-theme-cinema
.f10-public-social-avatar-ring {
    background:
        conic-gradient(
            #ef4444,
            #7f1d1d,
            #f59e0b,
            #ef4444
        );
}


.f10-public-theme-dark {
    --f10-theme-accent: #8b5cf6;

    background:
        #101216;
}

.f10-public-theme-dark
.f10-public-social-cover {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(124,58,237,.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #18131f,
            #060607
        );
}

.f10-public-theme-dark
.f10-public-social-title-line h1 {
    color: #fff;
}

.f10-public-theme-dark
.f10-public-social-bio,
.f10-public-theme-dark
.f10-public-social-username,
.f10-public-theme-dark
.f10-public-social-meta {
    color: #a7adb8;
}


.f10-public-theme-gold {
    --f10-theme-accent: #d4af37;
}

.f10-public-theme-gold
.f10-public-social-cover {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255,230,145,.25),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #171106,
            #624708,
            #b07c0d
        );
}

.f10-public-theme-gold
.f10-public-social-avatar-ring {
    background:
        conic-gradient(
            #fff0a4,
            #d4af37,
            #916100,
            #f4ce62,
            #fff0a4
        );
}


.f10-public-theme-glass {
    --f10-theme-accent: #8b5cf6;

    background:
        rgba(255,255,255,.82);

    backdrop-filter: blur(18px);
}

.f10-public-theme-glass
.f10-public-social-cover {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #4f46e5,
            #a855f7,
            #ec4899
        );
}



@keyframes f10CompactBadgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}


/*
|--------------------------------------------------------------------------
| COMMUNITY FOOTER
|--------------------------------------------------------------------------
*/

.f10-community-footer {
    margin-top: 22px;

    border-top:
        1px solid #e4e7ec;

    background:
        rgba(255,255,255,.72);
}

.f10-community-footer-inner {
    width: calc(100% - 32px);
    max-width: 980px;

    min-height: 58px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.f10-community-footer-brand {
    display: flex;
    align-items: center;

    gap: 6px;
}

.f10-community-footer-brand strong {
    color: #182230;

    font-size: 10px;
}

.f10-community-footer-brand span {
    color: #ad7a07;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .13em;
}

.f10-community-footer-links {
    display: flex;

    gap: 13px;
}

.f10-community-footer-links a {
    color: #667085;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}

.f10-community-footer-links a:hover {
    color: #182230;
}

.f10-community-footer-copy {
    color: #98a2b3;

    font-size: 7px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .f10-community-topbar-inner {
        grid-template-columns:
            1fr auto;

        width:
            calc(100% - 20px);
    }

    .f10-community-topnav {
        display: none;
    }

    .f10-community-return {
        display: none;
    }

    .f10-public-social-page {
        padding:
            12px 9px
            35px;
    }

    .f10-public-social-cover {
        height: 125px;
    }

    .f10-public-social-header {
        padding:
            0 15px
            15px;
    }

    .f10-public-social-avatar-wrap {
        width: 74px;
        height: 74px;

        flex-basis: 74px;

        margin-top: -37px;
    }

    .f10-public-social-avatar-ring {
        width: 74px;
        height: 74px;
    }

    .f10-public-social-title-line h1 {
        font-size: 19px;
    }

    .f10-public-social-layout {
        grid-template-columns: 1fr;
    }

    .f10-community-footer-inner {
        width:
            calc(100% - 22px);
    }
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .f10-community-topbar {
        display: none;
    }

    .f10-community-mobile-brand {
        min-height: 46px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 6px;

        background: #101216;

        color: #fff;
    }

    .f10-community-mobile-brand span {
        font-size: 12px;
        font-weight: 950;
    }

    .f10-community-mobile-brand strong {
        color: #dcb039;

        font-size: 6px;

        letter-spacing: .13em;
    }

    .f10-community-main {
        min-height:
            calc(100vh - 46px);
    }

    .f10-public-social-page {
        padding:
            8px 7px
            28px;
    }

    .f10-public-social-profile {
        border-radius: 12px;
    }

    .f10-public-social-cover {
        height: 105px;
    }

    .f10-public-social-header {
        display: block;

        padding:
            0 13px
            14px;
    }

    .f10-public-social-avatar-wrap {
        width: 68px;
        height: 68px;

        margin-top: -34px;
        margin-bottom: 7px;
    }

    .f10-public-social-avatar-ring {
        width: 68px;
        height: 68px;
    }

    .f10-public-social-main {
        padding-top: 0;
    }

    .f10-public-social-name-row {
        display: block;
    }

    .f10-public-social-title-line h1 {
        font-size: 18px;
    }

    .f10-public-social-actions {
        margin-top: 10px;

        flex-wrap: wrap;
    }

    .f10-community-create {
        padding: 10px;
    }

    .f10-community-create-actions {
        gap: 2px;
    }

    .f10-community-create-action {
        flex-direction: column;

        gap: 4px;

        text-align: center;
    }

    .f10-public-social-card {
        padding: 13px;
    }

    .f10-public-social-layout,
    .f10-public-social-side {
        gap: 8px;
    }

    .f10-public-social-layout {
        margin-top: 8px;
    }

    .f10-community-footer {
        margin-top: 15px;
    }

    .f10-community-footer-inner {
        min-height: auto;

        padding:
            15px 0;

        flex-direction: column;

        justify-content: center;

        gap: 6px;

        text-align: center;
    }
}


/*
|--------------------------------------------------------------------------
| CONFIGURATOR - LIVE PROFILE PREVIEW
|--------------------------------------------------------------------------
*/

.f10-config-preview-section {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfc
        );
    box-shadow:
        0 10px 32px
        rgba(16, 24, 40, .06);
}


.f10-config-preview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}


.f10-config-preview-heading span {
    display: block;
    color: #b27b00;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .15em;
}


.f10-config-preview-heading h2 {
    margin:
        4px 0 0;
    color: #101828;
    font-size: 18px;
}


.f10-config-preview-heading p {
    margin:
        5px 0 0;
    color: #98a2b3;
    font-size: 10px;
}


.f10-config-preview-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding:
        6px 9px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 8px;
    font-weight: 900;
}


.f10-config-preview-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12b76a;
}


/*
|--------------------------------------------------------------------------
| PREVIEW CARD
|--------------------------------------------------------------------------
*/

.f10-config-live-profile {
    overflow: hidden;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 16px 42px
        rgba(16, 24, 40, .12);
    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}


.f10-config-live-cover {
    position: relative;
    height: 185px;
    background:
        linear-gradient(
            135deg,
            #344054,
            #101828
        );
    background-size: cover;
    background-position: center;
}


.f10-config-live-cover-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.48)
        );
}


.f10-config-live-community {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    color: rgba(255,255,255,.88);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .15em;
}


.f10-config-live-body {
    position: relative;
    display: flex;
    gap: 17px;
    padding:
        0 22px
        23px;
}


.f10-config-live-avatar-wrap {
    position: relative;
    flex:
        0 0 105px;
    width: 105px;
    height: 105px;
    margin-top: -52px;
}


.f10-config-live-avatar-ring {
    width: 105px;
    height: 105px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background:
        conic-gradient(
            #ffd867,
            #d69300,
            #6d5dfc,
            #2483ef,
            #ef4aa8,
            #ffd867
        );
    box-shadow:
        0 9px 23px
        rgba(16,24,40,.22),
        0 0 0 4px #fff;
}


.f10-config-live-avatar-ring img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border:
        3px solid #fff;
    border-radius: 50%;
}


.f10-config-live-status {
    position: absolute;
    right: 2px;
    bottom: 5px;
    width: 16px;
    height: 16px;
    border:
        3px solid #fff;
    border-radius: 50%;
    background: #12b76a;
}


.f10-config-live-info {
    min-width: 0;
    padding-top: 17px;
}


.f10-config-live-label {
    display: block;
    color: #b27b00;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .13em;
}


.f10-config-live-info h3 {
    margin:
        4px 0 0;
    color: #101828;
    font-size: 22px;
    line-height: 1.15;
}


.f10-config-live-info strong {
    display: block;
    margin-top: 4px;
    color: #a36f00;
    font-size: 11px;
}


.f10-config-live-info p {
    max-width: 540px;
    margin:
        10px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.65;
}


.f10-config-live-bottom {
    display: flex;
    gap: 22px;
    padding:
        13px 22px;
    border-top: 1px solid #f0f1f3;
    background: #fafbfc;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| LIVE THEMES
|--------------------------------------------------------------------------
*/


/* CLASSIC */

.f10-config-theme-classic
.f10-config-live-cover {
    background:
        linear-gradient(
            135deg,
            #344054,
            #101828
        );
}


/* CINEMA */

.f10-config-theme-cinema {
    background: #101114;
    border-color: #272b33;
}

.f10-config-theme-cinema
.f10-config-live-cover {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(239,68,68,.42),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #390909,
            #08090b
        );
}

.f10-config-theme-cinema
.f10-config-live-avatar-ring {
    background:
        conic-gradient(
            #ef4444,
            #7f1d1d,
            #f59e0b,
            #ef4444
        );
}

.f10-config-theme-cinema
.f10-config-live-info h3 {
    color: #fff;
}

.f10-config-theme-cinema
.f10-config-live-info p {
    color: #98a2b3;
}

.f10-config-theme-cinema
.f10-config-live-bottom {
    border-color: #292d35;
    background: #15171c;
}


/* DARK */

.f10-config-theme-dark {
    background: #0e1015;
    border-color: #292d35;
}

.f10-config-theme-dark
.f10-config-live-cover {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(124,58,237,.35),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #17131f,
            #050506
        );
}

.f10-config-theme-dark
.f10-config-live-avatar-ring {
    background:
        conic-gradient(
            #8b5cf6,
            #3b82f6,
            #111827,
            #8b5cf6
        );
}

.f10-config-theme-dark
.f10-config-live-info h3 {
    color: #fff;
}

.f10-config-theme-dark
.f10-config-live-info p {
    color: #98a2b3;
}

.f10-config-theme-dark
.f10-config-live-bottom {
    border-color: #292d35;
    background: #12141a;
}


/* GOLD */

.f10-config-theme-gold
.f10-config-live-cover {
    background:
        radial-gradient(
            circle at 22% 15%,
            rgba(255,230,150,.34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #171107,
            #634708,
            #bd850c
        );
}

.f10-config-theme-gold
.f10-config-live-avatar-ring {
    background:
        conic-gradient(
            #fff2aa,
            #d4af37,
            #946300,
            #f3cd60,
            #fff2aa
        );
}


/* GLASS */

.f10-config-theme-glass {
    background:
        rgba(255,255,255,.80);
    backdrop-filter:
        blur(20px);
}

.f10-config-theme-glass
.f10-config-live-cover {
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #a855f7,
            #ec4899
        );
}

.f10-config-theme-glass
.f10-config-live-avatar-ring {
    background:
        conic-gradient(
            #60a5fa,
            #a855f7,
            #f472b6,
            #60a5fa
        );
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .f10-config-preview-section {
        padding: 14px;
    }

    .f10-config-live-cover {
        height: 145px;
    }

    .f10-config-live-body {
        display: block;
        padding:
            0 17px
            20px;
    }

    .f10-config-live-avatar-wrap {
        width: 88px;
        height: 88px;
        margin-top: -44px;
    }

    .f10-config-live-avatar-ring {
        width: 88px;
        height: 88px;
    }

    .f10-config-live-info {
        padding-top: 13px;
    }

    .f10-config-live-info h3 {
        font-size: 19px;
    }

}


/*
|--------------------------------------------------------------------------
| PREMIUM THEME SELECTOR V2
|--------------------------------------------------------------------------
*/

.f10-social-themes {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 13px;
}


.f10-social-theme-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}


.f10-social-theme-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.f10-social-theme-premium-card {
    position: relative;
    height: 100%;
    min-height: 206px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid #e4e7ec;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 6px 20px
        rgba(16, 24, 40, .055);

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}


.f10-social-theme-option:hover
.f10-social-theme-premium-card {
    transform:
        translateY(-3px);

    border-color:
        #d0d5dd;

    box-shadow:
        0 13px 30px
        rgba(16, 24, 40, .10);
}


/*
|--------------------------------------------------------------------------
| SELECTED
|--------------------------------------------------------------------------
*/

.f10-social-theme-option
> input:checked
+ .f10-social-theme-premium-card {
    border-color:
        #d4a72c;

    box-shadow:
        0 0 0 2px
        rgba(212, 167, 44, .15),
        0 14px 34px
        rgba(16, 24, 40, .12);

    transform:
        translateY(-2px);
}


.f10-theme-selected-check {
    position: absolute;

    z-index: 20;

    top: 9px;
    right: 9px;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    box-sizing: border-box;

    border:
        2px solid #fff;

    border-radius: 50%;

    background:
        #d5a126;

    color: #fff;

    box-shadow:
        0 4px 11px
        rgba(16, 24, 40, .18);

    font-size: 11px;
    font-weight: 950;

    opacity: 0;

    transform:
        scale(.7);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.f10-social-theme-option
> input:checked
+ .f10-social-theme-premium-card
.f10-theme-selected-check {
    opacity: 1;

    transform:
        scale(1);
}


/*
|--------------------------------------------------------------------------
| MINI PROFILE
|--------------------------------------------------------------------------
*/

.f10-social-theme-premium-card
.f10-social-theme-box {
    position: relative;

    width: 100%;
    height: 105px;

    display: block;

    overflow: hidden;

    border-radius:
        15px 15px 0 0;

    background: #fff;
}


.f10-social-theme-premium-card
.f10-theme-cover {
    position: relative;

    width: 100%;
    height: 67px;

    display: block;

    overflow: hidden;
}


.f10-theme-cover-glow {
    position: absolute;

    width: 70px;
    height: 70px;

    top: -35px;
    right: -18px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.20);

    filter:
        blur(8px);
}


.f10-social-theme-premium-card
.f10-theme-avatar {
    position: absolute;

    left: 13px;
    top: 47px;

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    box-sizing: border-box;

    border:
        3px solid #fff;

    border-radius: 50%;

    box-shadow:
        0 4px 10px
        rgba(16,24,40,.18);
}


.f10-social-theme-premium-card
.f10-theme-avatar i {
    width: 15px;
    height: 15px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.35);
}


.f10-social-theme-premium-card
.f10-theme-lines {
    position: absolute;

    left: 61px;
    right: 12px;
    top: 75px;

    display: block;

    padding: 0;
}


.f10-social-theme-premium-card
.f10-theme-lines i {
    display: block;

    height: 4px;

    margin-bottom: 5px;

    border-radius: 999px;
}


.f10-social-theme-premium-card
.f10-theme-lines i:first-child {
    width: 67%;
}


.f10-social-theme-premium-card
.f10-theme-lines i:last-child {
    width: 42%;
}


/*
|--------------------------------------------------------------------------
| INFO
|--------------------------------------------------------------------------
*/

.f10-theme-premium-info {
    display: block;

    flex: 1;

    padding:
        13px 13px
        9px;
}


.f10-theme-premium-info strong {
    display: block;

    color: #101828;

    font-size: 12px;
    font-weight: 900;

    line-height: 1.2;
}


.f10-theme-premium-info small {
    display: block;

    min-height: 30px;

    margin-top: 5px;

    color: #98a2b3;

    font-size: 8px;
    font-weight: 500;

    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| SELECT STATUS
|--------------------------------------------------------------------------
*/

.f10-theme-select-text {
    display: flex;
    align-items: center;
    gap: 6px;

    padding:
        9px 13px;

    border-top:
        1px solid #f0f1f3;

    background:
        #fafbfc;
}


.f10-theme-select-text i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #d0d5dd;
}


.f10-theme-select-text b {
    color: #98a2b3;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .09em;
}


.f10-social-theme-option
> input:checked
+ .f10-social-theme-premium-card
.f10-theme-select-text {
    background:
        #fffaf0;
}


.f10-social-theme-option
> input:checked
+ .f10-social-theme-premium-card
.f10-theme-select-text i {
    background:
        #d6a126;

    box-shadow:
        0 0 0 3px
        rgba(214, 161, 38, .13);
}


.f10-social-theme-option
> input:checked
+ .f10-social-theme-premium-card
.f10-theme-select-text b {
    color:
        #a66f00;
}


/*
|--------------------------------------------------------------------------
| CLASSIC
|--------------------------------------------------------------------------
*/

.f10-theme-classic
.f10-theme-cover {
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(255,255,255,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #475467,
            #1d2939
        );
}


.f10-theme-classic
.f10-theme-avatar {
    background:
        linear-gradient(
            135deg,
            #98a2b3,
            #475467
        );
}


.f10-theme-classic
.f10-theme-lines i {
    background:
        #d0d5dd;
}


/*
|--------------------------------------------------------------------------
| CINEMA
|--------------------------------------------------------------------------
*/

.f10-theme-cinema
.f10-social-theme-premium-card {
    background:
        #111318;
}


.f10-theme-cinema
.f10-theme-cover {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(239,68,68,.40),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #450909,
            #090a0c
        );
}


.f10-theme-cinema
.f10-theme-avatar {
    background:
        linear-gradient(
            135deg,
            #ef4444,
            #7f1d1d
        );
}


.f10-theme-cinema
.f10-theme-lines i {
    background:
        #52525b;
}


.f10-theme-cinema
.f10-theme-premium-info strong {
    color: #fff;
}


.f10-theme-cinema
.f10-theme-select-text {
    border-color: #292d35;
    background: #181a20;
}


/*
|--------------------------------------------------------------------------
| DARK
|--------------------------------------------------------------------------
*/

.f10-theme-dark
.f10-social-theme-premium-card {
    background:
        #090b10;
}


.f10-theme-dark
.f10-theme-cover {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(124,58,237,.42),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #17131f,
            #050506
        );
}


.f10-theme-dark
.f10-theme-avatar {
    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #2563eb
        );
}


.f10-theme-dark
.f10-theme-lines i {
    background:
        #3f3f46;
}


.f10-theme-dark
.f10-theme-premium-info strong {
    color: #fff;
}


.f10-theme-dark
.f10-theme-select-text {
    border-color: #292d35;
    background: #12141a;
}


/*
|--------------------------------------------------------------------------
| GOLD
|--------------------------------------------------------------------------
*/

.f10-theme-gold
.f10-theme-cover {
    background:
        radial-gradient(
            circle at 22% 12%,
            rgba(255,239,170,.38),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #181106,
            #6c4b08,
            #c58c12
        );
}


.f10-theme-gold
.f10-theme-avatar {
    background:
        linear-gradient(
            135deg,
            #fff1a6,
            #c48a0b
        );
}


.f10-theme-gold
.f10-theme-lines i {
    background:
        #dfbd58;
}


/*
|--------------------------------------------------------------------------
| GLASS
|--------------------------------------------------------------------------
*/

.f10-theme-glass
.f10-social-theme-premium-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(247,245,255,.88)
        );
}


.f10-theme-glass
.f10-theme-cover {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,.35),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #4f46e5,
            #a855f7,
            #ec4899
        );
}


.f10-theme-glass
.f10-theme-avatar {
    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #d946ef
        );
}


.f10-theme-glass
.f10-theme-lines i {
    background:
        rgba(99,102,241,.28);
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .f10-social-themes {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .f10-social-themes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 420px) {

    .f10-social-themes {
        grid-template-columns: 1fr;
    }

}




/*
|--------------------------------------------------------------------------
| SOCIAL SETTINGS
|--------------------------------------------------------------------------
*/

.f10-social-settings-page {
    min-height: calc(100vh - 58px);
    padding: 24px 14px 50px;
    background: #f4f6f8;
}

.f10-social-settings-shell {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.f10-social-settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 14px;
    padding: 20px 22px;

    border: 1px solid #e5e8ed;
    border-radius: 15px;

    background: #fff;

    box-shadow:
        0 7px 24px
        rgba(16,24,40,.04);
}

.f10-social-settings-kicker,
.f10-social-settings-panel-head > span {
    display: block;

    margin-bottom: 5px;

    color: #b27d07;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .13em;
}

.f10-social-settings-hero h1 {
    margin: 0;

    color: #1d2939;

    font-size: 21px;
    font-weight: 900;
}

.f10-social-settings-hero p {
    max-width: 520px;

    margin: 5px 0 0;

    color: #667085;

    font-size: 9px;
    line-height: 1.6;
}

.f10-social-settings-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.f10-social-settings-view {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border: 1px solid #e0e4e9;
    border-radius: 8px;

    background: #fff;

    color: #344054;

    font-size: 7px;
    font-weight: 900;

    text-decoration: none;
}

.f10-social-settings-status {
    min-height: 34px;

    display: inline-flex;
    align-items: center;

    padding: 0 11px;

    border-radius: 8px;

    font-size: 7px;
    font-weight: 950;
}

.f10-social-settings-status.is-public {
    background: #ecfdf3;
    color: #027a48;
}

.f10-social-settings-status.is-draft {
    background: #f2f4f7;
    color: #667085;
}


/*
|--------------------------------------------------------------------------
| LAYOUT
|--------------------------------------------------------------------------
*/

.f10-social-settings-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);

    gap: 14px;
}

.f10-social-settings-nav,
.f10-social-settings-content {
    border: 1px solid #e5e8ed;
    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 6px 20px
        rgba(16,24,40,.035);
}

.f10-social-settings-nav {
    align-self: start;

    padding: 9px;
}

.f10-social-settings-nav button,
.f10-social-settings-nav a {
    width: 100%;
    min-height: 39px;

    display: flex;
    align-items: center;

    gap: 8px;

    box-sizing: border-box;

    padding: 0 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #667085;

    font-family: inherit;

    font-size: 8px;
    font-weight: 800;

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.f10-social-settings-nav button:hover,
.f10-social-settings-nav button.is-active,
.f10-social-settings-nav a:hover {
    background: #f6f7f9;
    color: #182230;
}

.f10-social-settings-nav button.is-active {
    box-shadow:
        inset 3px 0 0
        #d6a42a;
}

.f10-social-settings-nav button span {
    color: #b18013;

    font-size: 6px;
    font-weight: 950;
}

.f10-social-settings-nav-separator {
    height: 1px;

    margin: 8px 5px;

    background: #edf0f3;
}


/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.f10-social-settings-content {
    min-height: 510px;

    padding: 20px;
}

.f10-social-settings-panel {
    display: none;
}

.f10-social-settings-panel.is-active {
    display: block;
}

.f10-social-settings-panel-head {
    margin-bottom: 20px;
    padding-bottom: 14px;

    border-bottom: 1px solid #edf0f3;
}

.f10-social-settings-panel-head h2 {
    margin: 0;

    color: #1d2939;

    font-size: 16px;
    font-weight: 900;
}

.f10-social-settings-panel-head p {
    margin: 4px 0 0;

    color: #98a2b3;

    font-size: 8px;
}

.f10-social-settings-message {
    margin-bottom: 14px;
    padding: 10px 12px;

    border-radius: 8px;

    font-size: 8px;
    font-weight: 750;
}

.f10-social-settings-message.is-success {
    background: #ecfdf3;
    color: #027a48;
}

.f10-social-settings-message.is-error {
    background: #fef3f2;
    color: #b42318;
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.f10-social-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 14px;
}

.f10-social-settings-field-full {
    grid-column: 1 / -1;
}

.f10-social-settings-field label {
    display: block;

    margin-bottom: 6px;

    color: #344054;

    font-size: 8px;
    font-weight: 850;
}

.f10-social-settings-field input,
.f10-social-settings-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 10px 11px;

    border: 1px solid #dfe3e8;
    border-radius: 8px;

    outline: none;

    background: #fafbfc;

    color: #1d2939;

    font-family: inherit;

    font-size: 9px;
}

.f10-social-settings-field textarea {
    resize: vertical;
}

.f10-social-settings-field input:focus,
.f10-social-settings-field textarea:focus {
    border-color: #d2a12c;
    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(210,161,44,.09);
}

.f10-social-settings-field small,
.f10-social-settings-field-meta {
    margin-top: 5px;

    color: #98a2b3;

    font-size: 7px;
}

.f10-social-settings-field-meta {
    display: flex;
    justify-content: space-between;
}

.f10-social-settings-username {
    display: flex;
    align-items: stretch;
}

.f10-social-settings-username > span {
    display: grid;
    place-items: center;

    width: 34px;

    border: 1px solid #dfe3e8;
    border-right: 0;
    border-radius: 8px 0 0 8px;

    background: #f4f6f8;

    color: #667085;

    font-size: 10px;
    font-weight: 800;
}

.f10-social-settings-username input {
    border-radius: 0 8px 8px 0;
}

.f10-social-settings-savebar {
    display: flex;
    justify-content: flex-end;

    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid #edf0f3;
}

.f10-social-settings-save {
    min-height: 36px;

    padding: 0 14px;

    border: 1px solid #c89418;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #e4b63d,
            #c99217
        );

    color: #17191d;

    font-family: inherit;

    font-size: 7px;
    font-weight: 950;

    cursor: pointer;
}











/*
|--------------------------------------------------------------------------
| THEMES
|--------------------------------------------------------------------------
*/

.f10-social-settings-themes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));

    gap: 9px;
}

.f10-social-settings-theme {
    cursor: pointer;
}

.f10-social-settings-theme input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.f10-social-settings-theme-preview {
    min-height: 83px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    box-sizing: border-box;

    padding: 10px;

    border: 2px solid transparent;
    border-radius: 10px;

    background: #f6f7f9;

    transition:
        border-color .16s ease,
        transform .16s ease;
}

.f10-social-settings-theme.is-selected
.f10-social-settings-theme-preview {
    border-color: #d5a326;

    transform: translateY(-2px);
}

.f10-social-settings-theme-preview i {
    height: 28px;

    margin-bottom: 8px;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #262b35,
            #e0b03c
        );
}

.f10-settings-theme-cinema
.f10-social-settings-theme-preview {
    background: #17191d;
    color: #fff;
}

.f10-settings-theme-dark
.f10-social-settings-theme-preview {
    background: #0d0f12;
    color: #fff;
}

.f10-settings-theme-gold
.f10-social-settings-theme-preview {
    background: #fffaf0;
}

.f10-settings-theme-glass
.f10-social-settings-theme-preview {
    background:
        linear-gradient(
            135deg,
            #eff3f8,
            #fff
        );
}


/*
|--------------------------------------------------------------------------
| SWITCHES
|--------------------------------------------------------------------------
*/

.f10-social-settings-switches {
    display: grid;

    gap: 8px;
}

.f10-social-settings-switches > label {
    min-height: 59px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border: 1px solid #e5e8ed;
    border-radius: 10px;

    cursor: pointer;
}

.f10-social-settings-switches > label > div {
    flex: 1;
}

.f10-social-settings-switches strong {
    display: block;

    color: #344054;

    font-size: 9px;
}

.f10-social-settings-switches small {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 7px;
}

.f10-social-settings-switches input {
    display: none;
}

.f10-social-settings-switches label > span {
    position: relative;

    width: 35px;
    height: 19px;

    flex: 0 0 35px;

    border-radius: 999px;

    background: #d0d5dd;

    transition: .18s ease;
}

.f10-social-settings-switches label > span::after {
    content: '';

    position: absolute;

    top: 3px;
    left: 3px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 1px 3px
        rgba(16,24,40,.22);

    transition: .18s ease;
}

.f10-social-settings-switches
input:checked + span {
    background: #d5a326;
}

.f10-social-settings-switches
input:checked + span::after {
    transform: translateX(16px);
}


/*
|--------------------------------------------------------------------------
| PUBLISH
|--------------------------------------------------------------------------
*/

.f10-social-settings-publish-card,
.f10-social-settings-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 16px;

    border: 1px solid #e5e8ed;
    border-radius: 11px;

    background: #fafbfc;
}

.f10-social-settings-publish-card span {
    color: #b27d07;

    font-size: 6px;
    font-weight: 950;
}

.f10-social-settings-publish-card strong,
.f10-social-settings-info-card strong {
    display: block;

    margin-top: 3px;

    color: #1d2939;

    font-size: 11px;
}

.f10-social-settings-publish-card p,
.f10-social-settings-info-card p {
    margin: 4px 0 0;

    color: #98a2b3;

    font-size: 8px;
}

.f10-social-settings-publish {
    min-height: 35px;

    padding: 0 12px;

    border: 1px solid #c89418;
    border-radius: 8px;

    background: #dbab30;

    color: #17191d;

    font-family: inherit;

    font-size: 7px;
    font-weight: 950;

    cursor: pointer;
}

.f10-social-settings-publish.is-unpublish {
    border-color: #f2c9c5;

    background: #fff;

    color: #b42318;
}

.f10-social-settings-info-card {
    margin-top: 10px;

    justify-content: flex-start;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .f10-social-settings-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .f10-social-settings-layout {
        grid-template-columns: 1fr;
    }

    .f10-social-settings-nav {
        display: flex;
        overflow-x: auto;

        gap: 4px;
    }

    .f10-social-settings-nav button,
    .f10-social-settings-nav a {
        width: auto;
        flex: 0 0 auto;
    }

    .f10-social-settings-nav-separator {
        display: none;
    }

    .f10-social-settings-grid,
    .f10-social-settings-themes {
        grid-template-columns: 1fr;
    }

}




/* DARK SOCIAL THEMES */

.f10-public-theme-dark .f10-social-comment-bubble,
.f10-public-theme-cinema .f10-social-comment-bubble,
.f10-public-theme-gold .f10-social-comment-bubble,
.f10-public-theme-glass .f10-social-comment-bubble {
    background: rgba(255,255,255,.07);
}

.f10-public-theme-dark .f10-social-comment-form textarea,
.f10-public-theme-cinema .f10-social-comment-form textarea,
.f10-public-theme-gold .f10-social-comment-form textarea,
.f10-public-theme-glass .f10-social-comment-form textarea {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: inherit;
}

.f10-social-post-item:target {
    scroll-margin-top: 82px;

    border-color: #d4af37;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.12),
        0 8px 28px rgba(16,24,40,.08);
}


.f10-public-social-friend-decline {
    border-color: #e4e7ec;
    background: #fff;
    color: #667085;
}

.f10-public-social-friend-decline:hover {
    border-color: #f04438;
    background: #fff5f4;
    color: #d92d20;
}

.f10-public-social-friend-decline[hidden] {
    display: none !important;
}


/* =========================================================
   PUBLIC PROFILE - FRIENDS
   ========================================================= */

.f10-social-friends-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 10px;
    margin-top: 16px;
}

.f10-social-friend-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: inherit;
}

.f10-social-friend-item img {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #f2f4f7;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, .08),
        0 4px 12px rgba(16, 24, 40, .08);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.f10-social-friend-item span {
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
    color: #344054;
}

.f10-social-friend-item:hover img {
    transform: none;
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, .20),
        0 4px 12px rgba(16, 24, 40, .08);
}

.f10-social-friend-item:hover span {
    color: #b28b16;
}

@media (max-width: 520px) {

    .f10-social-friends-list {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 12px 7px;
    }

    .f10-social-friend-item img {
        width: 46px;
        height: 46px;
    }
}


/* =========================================================
   PUBLIC PROFILE - FAVORITE FILMS
   ========================================================= */

.f10-social-favorite-films {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 9px;
    margin-top: 16px;
}

.f10-social-favorite-film {
    min-width: 0;
    display: block;
    color: inherit;
    text-decoration: none;
}

.f10-social-favorite-film-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 9px;
    background: #101828;
    box-shadow:
        0 5px 14px rgba(16, 24, 40, .12);
}

.f10-social-favorite-film-poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .25s ease,
        opacity .25s ease;
}

.f10-social-favorite-film:hover
.f10-social-favorite-film-poster img {
    transform: scale(1.045);
}

.f10-social-favorite-film-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #fff;
}

.f10-social-favorite-film-info {
    margin-top: 7px;
    min-width: 0;
}

.f10-social-favorite-film-info strong {
    display: -webkit-box;
    overflow: hidden;
    color: #101828;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.f10-social-favorite-film-info span {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 520px) {

    .f10-social-favorite-films {
        gap: 10px 7px;
    }

}


/* =========================================================
   SOCIAL POST COMMENT REPLIES
   ========================================================= */

.f10-social-comment-thread {
    position: relative;
}

.f10-social-comment-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    padding-left: 4px;
}

.f10-social-comment-meta small {
    margin: 0;
}

.f10-social-comment-reply-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    cursor: pointer;
}

.f10-social-comment-reply-button:hover {
    color: #b28b16;
}

.f10-social-comment-replies {
    position: relative;
    margin-left: 46px;
    padding-left: 14px;
    border-left: 2px solid #f0f1f3;
}

.f10-social-comment-item.is-reply {
    margin-top: 8px;
}

.f10-social-comment-item.is-reply
.f10-social-comment-avatar {
    width: 32px;
    height: 32px;
}

.f10-social-comment-item.is-reply
.f10-social-comment-avatar img {
    width: 32px;
    height: 32px;
}

.f10-social-reply-form {
    margin-top: 9px;
}

.f10-social-reply-target {
    margin-bottom: 6px;
    color: #667085;
    font-size: 11px;
}

.f10-social-reply-target strong {
    color: #344054;
}

.f10-social-reply-fields {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.f10-social-reply-fields textarea {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 110px;
    resize: vertical;
    padding: 9px 11px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #101828;
    font: inherit;
    font-size: 12px;
}

.f10-social-reply-fields textarea:focus {
    border-color: #d4af37;
    box-shadow:
        0 0 0 3px rgba(212, 175, 55, .10);
}

.f10-social-reply-fields button {
    min-height: 38px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.f10-social-reply-fields
[data-social-reply-submit] {
    border: 0;
    background: #101828;
    color: #fff;
}

.f10-social-reply-fields
[data-social-reply-cancel] {
    border: 1px solid #e4e7ec;
    background: #fff;
    color: #667085;
}

@media (max-width: 600px) {

    .f10-social-comment-replies {
        margin-left: 30px;
        padding-left: 9px;
    }

    .f10-social-reply-fields {
        flex-wrap: wrap;
    }

    .f10-social-reply-fields textarea {
        flex-basis: 100%;
    }
}


/* =========================================================
   SOCIAL POST DELETE
   ========================================================= */

.f10-social-post-head {
    position: relative;
}

.f10-social-post-delete {
    width: 30px;
    height: 30px;

    margin-left: auto;
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #eaecf0;
    border-radius: 50%;

    background: #fff;
    color: #667085;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.f10-social-post-delete:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
    transform: scale(1.05);
}

.f10-social-post-delete:disabled {
    opacity: .45;
    cursor: wait;
}

.f10-social-post-item {
    transition:
        opacity .22s ease,
        transform .22s ease;
}

/* =========================================================
   FILME10 COMMUNITY - HEADER NOTIFICATION BELL
========================================================= */

.f10-header-social-bell {
    position: relative;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #9ca3af;

    cursor: pointer;
    text-decoration: none;

    transition:
        color .18s ease,
        background-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.f10-header-social-bell:hover {
    background:
        rgba(255,255,255,.07);

    color:
        #ffffff;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);
}


.f10-header-social-bell svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.f10-header-social-bell
.f10-community-notification-badge {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 17px;
    height: 17px;

    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #101828;
    border-radius: 999px;

    background: #ef4444;
    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
    line-height: 1;

    box-shadow:
        0 3px 8px
        rgba(239, 68, 68, .25);
}


/* =========================================================
   FILME10 COMMUNITY - NOTIFICATIONS POSITION
========================================================= */

.f10-social-notifications-panel {
    position: fixed !important;

    width: 360px;
    max-width: calc(100vw - 24px);

    transform:
        translateY(-8px);

    transform-origin:
        top center;
}


.f10-social-notifications-panel.is-open {
    transform:
        translateY(0);
}


@media (max-width: 520px) {

    .f10-social-notifications-panel {
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        max-width: none !important;
    }

}

@media (max-width: 782px) {

    body.admin-bar
    .f10-social-notifications-panel {
        top: 106px !important;
    }

}





.f10-social-name-row,
.f10-config-live-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.f10-social-name-row h1,
.f10-config-live-name-row h3 {
    margin-right: 0;
}

.f10-social-central-badge {
    flex: 0 0 auto;
}


/*
|--------------------------------------------------------------------------
| CENTRAL BADGE ON SOCIAL AVATAR
|--------------------------------------------------------------------------
|
| IMPORTANT:
| Designul badge-ului NU este definit aici.
| Forma, culorile, iconurile și efectele vin din
| sistemul central Filme10 din style.css.
|
*/

.f10-public-social-avatar-wrap {
    position: relative !important;
    overflow: visible !important;
}


/* poziționare comună */

.f10-social-avatar-central-badge {
    position: absolute !important;
    top: 5px !important;
    right: -7px !important;
    z-index: 30 !important;
}


/*
|--------------------------------------------------------------------------
| NORMAL GROUP BADGES
|--------------------------------------------------------------------------
*/

.f10-social-avatar-central-badge
.f10-community-user-rank:not(.f10-owner-rank) {

    color:
        var(
            --rank-color,
            #ffffff
        );

    background:
        var(
            --rank-bg,
            #64748b
        );
}


/*
|--------------------------------------------------------------------------
| OWNER
|--------------------------------------------------------------------------
*/

.f10-social-avatar-central-badge.f10-owner-rank {
    position: absolute !important;

    top: 3px !important;
    right: -8px !important;

    z-index: 40 !important;

    overflow: visible;
}


/* rombul Owner */

.f10-social-avatar-central-badge.f10-owner-rank:has(svg) {

    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;

    padding: 0 !important;

    border-radius: 9px !important;

    transform:
        rotate(45deg) !important;
}


/* iconul rămâne drept în interiorul rombului */

.f10-social-avatar-central-badge.f10-owner-rank:has(svg)
svg {

    width: 16px !important;
    height: 16px !important;

    display: block !important;

    color:
        var(
            --rank-color,
            #ffd76a
        ) !important;

    fill: none !important;
    stroke: currentColor !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform:
        rotate(-45deg) !important;

    position: relative;
    z-index: 3;
}


.f10-social-avatar-central-badge.f10-owner-rank:has(svg)
svg path,
.f10-social-avatar-central-badge.f10-owner-rank:has(svg)
svg circle,
.f10-social-avatar-central-badge.f10-owner-rank:has(svg)
svg rect {

    fill: none !important;
    stroke: currentColor !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .f10-social-avatar-central-badge {
        top: 4px !important;
        right: -6px !important;
    }
}



/* =========================================================
   FILME10 STORIES - VERTICAL CARDS
========================================================= */

.f10-social-stories {
    margin: 14px 0;

    padding: 14px;

    border: 1px solid #e4e7ec;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 6px 22px
        rgba(16,24,40,.045);

    overflow: hidden;
}


.f10-social-stories-track {
    display: flex;

    align-items: stretch;

    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 1px 1px 5px;

    scroll-behavior: smooth;

    scrollbar-width: thin;
}


/* CARD */

.f10-story-tile {
    position: relative;

    flex: 0 0 132px;

    width: 132px;
    height: 210px;

    overflow: hidden;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 16px !important;

    background: #e9edf2;

    box-shadow:
        0 3px 10px
        rgba(16,24,40,.10);

    font-family: inherit;

    cursor: pointer;

    text-align: left;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.f10-story-tile:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(16,24,40,.14);
}


/* STORY IMAGE */

.f10-story-cover {
    position: absolute;

    inset: 0;

    background-color: #252a32;

    background-position: center;
    background-size: cover;

    transform: scale(1.01);
}


.f10-story-dark-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 25%,
            rgba(0,0,0,.06) 50%,
            rgba(0,0,0,.72) 100%
        );
}


/* SMALL AVATAR */

.f10-story-avatar-small {
    position: absolute;

    top: 10px;
    left: 10px;

    z-index: 4;

    width: 38px;
    height: 38px;

    padding: 3px;

    box-sizing: border-box;

    border-radius: 50%;

    background: #1677ff;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.18);
}


.f10-story-avatar-small img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border: 2px solid #fff;
    border-radius: 50%;

    box-sizing: border-box;
}


/* NAME */

.f10-story-title {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 11px;

    z-index: 4;

    color: #ffffff;

    font-size: 12px;
    font-weight: 850;

    line-height: 1.2;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.55);

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   CREATE STORY CARD
========================================================= */

.f10-story-tile-own.no-story {
    background: #ffffff;

    border:
        1px solid #e3e6eb !important;

    box-shadow:
        0 3px 10px
        rgba(16,24,40,.08);
}


.f10-story-own-photo {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 140px;

    overflow: hidden;

    background: #e9edf2;
}


.f10-story-own-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* BOTTOM WHITE AREA */

.f10-story-own-bottom {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 70px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding:
        0 12px 15px;

    box-sizing: border-box;

    background: #ffffff;

    color: #111827;

    text-align: center;
}


.f10-story-own-bottom strong {
    max-width: 105px;

    font-size: 12px;
    font-weight: 850;

    line-height: 1.2;
}


/* LARGE PLUS */

.f10-story-create-plus {
    position: absolute;

    top: -24px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border:
        4px solid #ffffff;

    border-radius: 50%;

    background: #1677ff;

    color: #ffffff;

    font-size: 34px;
    font-weight: 400;

    line-height: 1;

    box-shadow:
        0 2px 7px
        rgba(16,24,40,.16);
}


.f10-story-add-more {
    position: absolute;

    right: 9px;
    bottom: 9px;

    z-index: 8;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #1677ff;

    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.22);

    cursor: pointer;
}


.f10-story-add-more:hover {
    transform: scale(1.06);
}


/* OWN ACTIVE STORY */

.f10-story-tile-own.has-story
.f10-story-own-photo {

    height: 100%;
}


.f10-story-tile-own.has-story
.f10-story-own-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.68) 100%
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .f10-social-stories {
        margin: 10px 0;

        padding: 10px;

        border-radius: 14px;
    }


    .f10-social-stories-track {
        gap: 8px;
    }


    .f10-story-tile {
        flex-basis: 112px;

        width: 112px;
        height: 180px;

        border-radius: 14px !important;
    }


    .f10-story-own-photo {
        height: 118px;
    }


    .f10-story-own-bottom {
        height: 62px;
    }


    .f10-story-create-plus {
        width: 43px;
        height: 43px;

        top: -21px;

        font-size: 30px;
    }


    .f10-story-avatar-small {
        width: 34px;
        height: 34px;
    }


    .f10-story-title,
    .f10-story-own-bottom strong {
        font-size: 11px;
    }
}



/* =========================================================
   FILME10 STORY VIEWER
========================================================= */

body.f10-story-viewer-open {
    overflow: hidden !important;
}


.f10-story-viewer {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;
}


.f10-story-viewer.is-open {
    display: flex;
}


.f10-story-viewer-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(7, 9, 13, .94);

    backdrop-filter:
        blur(8px);
}


.f10-story-viewer-stage {
    position: relative;

    z-index: 2;

    width: min(
        430px,
        calc(100vw - 26px)
    );

    height: min(
        760px,
        calc(100vh - 30px)
    );

    overflow: hidden;

    border-radius: 18px;

    background: #090b0f;

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.48);
}


/* PROGRESS */

.f10-story-viewer-progress {
    position: absolute;

    top: 10px;
    left: 10px;
    right: 10px;

    z-index: 20;

    display: flex;

    gap: 4px;
}


.f10-story-progress-item {
    position: relative;

    flex: 1;

    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.30);
}


.f10-story-progress-item i {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #ffffff;
}


/* HEADER */

.f10-story-viewer-header {
    position: absolute;

    top: 22px;
    left: 14px;
    right: 12px;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.f10-story-viewer-user {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;
}


.f10-story-viewer-user img {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px;

    display: block;

    object-fit: cover;

    border:
        2px solid #ffffff;

    border-radius: 50%;
}


.f10-story-viewer-user div {
    min-width: 0;
}


.f10-story-viewer-user strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 13px;
    font-weight: 850;

    line-height: 1.15;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,.50);

    text-overflow: ellipsis;

    white-space: nowrap;
}


.f10-story-viewer-user small {
    display: block;

    margin-top: 2px;

    color:
        rgba(255,255,255,.78);

    font-size: 10px;
    font-weight: 700;
}


.f10-story-viewer-close {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(0,0,0,.28);

    color: #ffffff;

    font-size: 26px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;
}


/* MEDIA */

.f10-story-viewer-media {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #050608;
}


.f10-story-viewer-media img,
.f10-story-viewer-media video {

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    display: block;

    object-fit: contain;

    background: #050608;
}


.f10-story-viewer-loading {
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
}


/* PREV / NEXT */

.f10-story-viewer-nav {
    position: absolute;

    top: 85px;
    bottom: 0;

    z-index: 12;

    width: 36%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.f10-story-viewer-nav.is-prev {
    left: 0;
}


.f10-story-viewer-nav.is-next {
    right: 0;
}


.f10-story-viewer-nav.is-disabled {
    pointer-events: none;
}


/* LOADING */

.f10-story-viewer.is-loading
.f10-story-viewer-stage {

    opacity: .96;
}


/* MOBILE */

@media (max-width: 700px) {

    .f10-story-viewer-stage {
        width: 100vw;
        height: 100dvh;

        max-width: none;
        max-height: none;

        border-radius: 0;
    }


    .f10-story-viewer-progress {
        top:
            max(
                10px,
                env(safe-area-inset-top)
            );
    }


    .f10-story-viewer-header {
        top:
            max(
                23px,
                calc(
                    env(safe-area-inset-top)
                    +
                    14px
                )
            );
    }
}



/* =========================================================
   FILME10 STORY VIEWER - BOTTOM BAR FINAL
   UN SINGUR SISTEM PENTRU MESSAGE + REACTIONS
========================================================= */


/* ---------------------------------------------------------
   STAGE
--------------------------------------------------------- */

.f10-story-viewer-stage {
    position: relative !important;
}


/* ---------------------------------------------------------
   FOOTER - JOS PESTE STORY
--------------------------------------------------------- */

.f10-story-viewer-footer {
    position: absolute !important;

    top: auto !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;

    z-index: 100 !important;

    width: auto !important;
    max-width: none !important;

    height: 48px !important;
    min-height: 48px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   MESSAGE
--------------------------------------------------------- */

.f10-story-viewer-footer
.f10-story-message-disabled {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    order: 1 !important;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 46px !important;
    min-height: 46px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    transform: none !important;
}


/* INPUT */

.f10-story-viewer-footer
.f10-story-message-disabled input {
    position: static !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 46px !important;

    margin: 0 !important;

    padding: 0 17px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(255,255,255,.32) !important;

    border-radius: 999px !important;

    outline: 0 !important;

    background:
        rgba(7,9,13,.62) !important;

    color: #ffffff !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: normal !important;

    transform: none !important;
}


.f10-story-viewer-footer
.f10-story-message-disabled input::placeholder {
    color:
        rgba(255,255,255,.70) !important;
}


/*
 * SEND rămâne ascuns până facem mesajele.
 */

.f10-story-viewer-footer
.f10-story-message-disabled button {
    display: none !important;
}


/* ---------------------------------------------------------
   REACTIONS CONTAINER
--------------------------------------------------------- */

.f10-story-viewer-footer
.f10-story-reactions {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    order: 2 !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: auto !important;
    max-width: none !important;

    height: 46px !important;
    min-height: 46px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   REACTION BUTTONS
--------------------------------------------------------- */

.f10-story-viewer-footer
.f10-story-reactions button {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 46px !important;

    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(255,255,255,.28) !important;

    border-radius: 50% !important;

    background:
        rgba(7,9,13,.62) !important;

    color: #ffffff !important;

    box-shadow: none !important;

    transform: none !important;

    cursor: pointer !important;
}


/* HOVER */

.f10-story-viewer-footer
.f10-story-reactions button:hover {
    border-color:
        rgba(255,255,255,.48) !important;

    background:
        rgba(255,255,255,.13) !important;

    transform:
        scale(1.05) !important;
}


/* ACTIVE */

.f10-story-viewer-footer
.f10-story-reactions button.is-active {
    border-color:
        rgba(255,255,255,.90) !important;

    background:
        rgba(255,255,255,.18) !important;
}


/* ---------------------------------------------------------
   EMOJI
--------------------------------------------------------- */

.f10-story-viewer-footer
.f10-story-reactions button span {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 21px !important;

    line-height: 1 !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   COUNTER
--------------------------------------------------------- */

.f10-story-viewer-footer
.f10-story-reactions button strong {
    position: absolute !important;

    top: -5px !important;
    right: -4px !important;

    min-width: 16px !important;
    width: auto !important;

    height: 16px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 4px !important;

    box-sizing: border-box !important;

    border-radius: 999px !important;

    background: #ffffff !important;

    color: #111827 !important;

    font-size: 9px !important;
    font-weight: 900 !important;

    line-height: 1 !important;
}


.f10-story-viewer-footer
.f10-story-reactions button strong:empty {
    display: none !important;
}


/* ---------------------------------------------------------
   NAVIGATION MUST NOT COVER FOOTER
--------------------------------------------------------- */

.f10-story-viewer-nav {
    z-index: 20 !important;
}

.f10-story-viewer-footer {
    pointer-events: auto !important;
}


/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */

@media (max-width: 700px) {

    .f10-story-viewer-footer {
        left: 10px !important;
        right: 10px !important;

        bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            ) !important;

        height: 42px !important;
        min-height: 42px !important;

        gap: 5px !important;
    }


    .f10-story-viewer-footer
    .f10-story-message-disabled {

        height: 42px !important;
        min-height: 42px !important;
    }


    .f10-story-viewer-footer
    .f10-story-message-disabled input {

        height: 42px !important;

        padding:
            0 13px !important;

        font-size:
            11px !important;
    }


    .f10-story-viewer-footer
    .f10-story-reactions {

        height: 42px !important;
        min-height: 42px !important;

        gap: 4px !important;
    }


    .f10-story-viewer-footer
    .f10-story-reactions button {

        flex:
            0 0 42px !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }


    .f10-story-viewer-footer
    .f10-story-reactions button span {

        font-size:
            19px !important;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 430px) {

    .f10-story-viewer-footer {
        left: 8px !important;
        right: 8px !important;

        gap: 3px !important;
    }


    .f10-story-viewer-footer
    .f10-story-message-disabled input {

        padding:
            0 11px !important;

        font-size:
            10px !important;
    }


    .f10-story-viewer-footer
    .f10-story-reactions {

        gap: 3px !important;
    }


    .f10-story-viewer-footer
    .f10-story-reactions button {

        flex:
            0 0 38px !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }


    .f10-story-viewer-footer
    .f10-story-reactions button span {

        font-size:
            17px !important;
    }
}


/* =========================================================
   STORY -> MESSENGER
========================================================= */

.f10-story-message {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 7px;
}

.f10-story-message input {
    width: 100%;
    min-width: 0;
    height: 44px;

    padding: 0 15px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;

    outline: none;

    background: rgba(12,14,18,.62);
    backdrop-filter: blur(10px);

    color: #fff;

    font: inherit;
    font-size: 12px;
}

.f10-story-message input::placeholder {
    color: rgba(255,255,255,.72);
}

.f10-story-message input:focus {
    border-color: rgba(212,175,55,.9);
}

.f10-story-message button {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #d4af37;
    color: #111318;

    font-size: 16px;
    font-weight: 900;

    cursor: pointer;
}

.f10-story-message button:disabled,
.f10-story-message input:disabled {
    opacity: .55;
    cursor: not-allowed;
}



/* =========================================================
   STORY MESSENGER - DEFINITIVE CLICK FIX
========================================================= */

body .f10-story-viewer
.f10-story-viewer-stage
.f10-story-viewer-footer {
    position: absolute !important;
    z-index: 5000 !important;
    pointer-events: auto !important;
}

body .f10-story-viewer
.f10-story-viewer-stage
.f10-story-message {
    position: relative !important;
    z-index: 5001 !important;

    pointer-events: auto !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body .f10-story-viewer
.f10-story-viewer-stage
.f10-story-message input {
    position: relative !important;
    z-index: 5002 !important;

    pointer-events: auto !important;

    cursor: text !important;

    user-select: text !important;
    -webkit-user-select: text !important;
}

body .f10-story-viewer
.f10-story-viewer-stage
.f10-story-message button {
    position: relative !important;
    z-index: 5002 !important;

    pointer-events: auto !important;
}

/*
 * Zonele PREV / NEXT nu primesc click
 * în zona footer-ului.
 */
body .f10-story-viewer
.f10-story-viewer-stage
.f10-story-viewer-nav {
    bottom: 80px !important;
    z-index: 10 !important;
}

/*
 * Media rămâne în spatele footer-ului.
 */
body .f10-story-viewer
.f10-story-viewer-stage
.f10-story-viewer-media {
    z-index: 1 !important;
}


/* =========================================================
   COMMUNITY HEADER - MESSENGER / SETTINGS
========================================================= */

.f10-community-header-action {
    position: relative;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #aeb4c0;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.f10-community-header-action:hover {
    color: #d4af37;

    background: rgba(212, 175, 55, .10);
    border-color: rgba(212, 175, 55, .30);

    transform: translateY(-1px);
}


.f10-community-header-action svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* MESSENGER BADGE */

.f10-community-header-messenger
.f10-community-message-badge {
    position: absolute;

    top: -5px;
    right: -6px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 999px;
    border: 2px solid #111318;

    background: #ef4444;
    color: #fff;

    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;

    z-index: 5;
}


.f10-community-header-messenger
.f10-community-message-badge[hidden] {
    display: none !important;
}


/* SETTINGS */

.f10-community-header-settings:hover svg {
    transform: rotate(35deg);
}


.f10-community-header-settings svg {
    transition: transform .25s ease;
}


/* =========================================================
   PUBLIC PROFILE - COVER CHANGE
   ========================================================= */

.f10-public-social-cover {
    position: relative;
}

.f10-public-social-cover-change {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 40px;
    padding: 0 14px;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;

    background: rgba(10, 12, 16, 0.82);
    backdrop-filter: blur(10px);

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.24);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.f10-public-social-cover-change:hover {
    transform: translateY(-1px);

    background: rgba(10, 12, 16, 0.94);

    border-color: rgba(212, 175, 55, 0.65);
}

.f10-public-social-cover-change:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.f10-public-social-cover-change-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    line-height: 1;
}

.f10-public-social-cover-input {
    display: none !important;
}

@media (max-width: 700px) {

    .f10-public-social-cover-change {
        right: 12px;
        bottom: 12px;

        min-height: 38px;
        padding: 0 12px;

        font-size: 12px;
    }
}

/* =========================================================
   PUBLIC PROFILE - COVER EDIT
========================================================= */

.f10-public-social-cover {
    position: relative;
}

.f10-public-social-cover-edit {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 15;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;

    padding:
        0 14px;

    border:
        1px solid rgba(255,255,255,.28);

    border-radius: 10px;

    background:
        rgba(17,20,26,.78);

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.18);

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.f10-public-social-cover-edit:hover {
    transform:
        translateY(-1px);

    background:
        rgba(212,175,55,.94);

    border-color:
        #d4af37;

    color:
        #111318;
}


.f10-public-social-cover-edit:disabled {
    opacity: .65;
    cursor: wait;
}


@media (max-width: 760px) {

    .f10-public-social-cover-edit {
        right: 12px;
        bottom: 12px;

        min-height: 34px;

        padding:
            0 11px;

        font-size: 10px;
    }

}


/* =========================================================
   PUBLIC PROFILE - AVATAR CHANGE BUTTON
========================================================= */

.f10-public-social-avatar-wrap {
    position: relative;
}


.f10-public-social-avatar-add {
    position: absolute;

right: -4px;
bottom: 1px;

    z-index: 30;

    width: 26px;
    height: 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #e3c75b 0%,
            #d4af37 55%,
            #b88b22 100%
        );

    color: #111318;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 8px rgba(0,0,0,.22);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}


.f10-public-social-avatar-add:hover {
    transform: scale(1.08);

    filter: brightness(1.05);

    box-shadow:
        0 4px 10px rgba(0,0,0,.28);
}


.f10-public-social-avatar-input {
    display:
        none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

.f10-public-social-avatar-add {
    width: 26px;
    height: 26px;

    right: 6px;
    bottom: 6px;

    font-size: 16px;
}

}


/* =========================================================
   PUBLIC PROFILE - ONLINE / OFFLINE
========================================================= */

.f10-public-social-presence {
    position: absolute;

    left: 5px;
    bottom: 12px;

    z-index: 31;

    width: 16px;
    height: 16px;

    display: block;

    border: 3px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 2px 6px rgba(0,0,0,.25);
}


.f10-public-social-presence.is-online {
    background: #22c55e;
}


.f10-public-social-presence.is-offline {
    background: #94a3b8;
}


@media (max-width: 760px) {

    .f10-public-social-presence {
        width: 14px;
        height: 14px;

        left: 4px;
        bottom: 9px;

        border-width: 2px;
    }

}


/* PROFILE ONLINE STATUS */

.f10-public-social-presence {
    position: absolute;

    left: 8px;
    bottom: 8px;

    z-index: 20;

    width: 17px;
    height: 17px;

    box-sizing: border-box;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #94a3b8;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .22);
}

.f10-public-social-presence.is-online {
    background: #22c55e;
}

.f10-public-social-presence.is-offline {
    background: #94a3b8;
}


/* =========================================================
   FILME10 COMMUNITY - BLOCKED USERS SETTINGS
========================================================= */

.f10-social-settings-block-section {
    margin-top: 24px;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
    box-shadow:
        0 8px 28px rgba(17, 24, 39, 0.05);
}


/* ---------------------------------------------------------
   SECTION HEADER
--------------------------------------------------------- */

.f10-social-settings-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px;

    border-bottom: 1px solid #eceef1;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );
}


.f10-social-settings-block-title > div {
    min-width: 0;
}


.f10-social-settings-block-title strong {
    display: block;

    margin: 0 0 5px;

    color: #111827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}


.f10-social-settings-block-title small {
    display: block;

    max-width: 620px;

    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
}


.f10-social-settings-block-title > span {
    flex: 0 0 auto;

    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 999px;

    background: rgba(212, 175, 55, 0.08);

    color: #a67c00;
    font-size: 12px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   LIST
--------------------------------------------------------- */

.f10-social-settings-block-list {
    display: flex;
    flex-direction: column;
}


/* ---------------------------------------------------------
   USER ROW
--------------------------------------------------------- */

.f10-social-settings-block-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 78px;
    padding: 14px 20px;

    border-bottom: 1px solid #f0f1f3;

    background: #ffffff;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}


.f10-social-settings-block-user:last-child {
    border-bottom: 0;
}


.f10-social-settings-block-user:hover {
    background: #fafafa;
}


/* ---------------------------------------------------------
   USER MAIN
--------------------------------------------------------- */

.f10-social-settings-block-user-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}


.f10-social-settings-block-user-main img {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

    object-fit: cover;

    background: #eef0f3;

    border: 2px solid #ffffff;

    box-shadow:
        0 0 0 1px #e4e7eb,
        0 4px 12px rgba(17, 24, 39, 0.08);
}


.f10-social-settings-block-user-main > div {
    min-width: 0;
}


.f10-social-settings-block-user-main strong {
    display: block;

    max-width: 420px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #111827;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}


.f10-social-settings-block-user-main small {
    display: block;

    margin-top: 3px;

    color: #8a93a2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   UNBLOCK BUTTON
--------------------------------------------------------- */

.f10-social-settings-unblock {
    flex: 0 0 auto;

    min-height: 38px;

    padding: 0 16px;

    border: 1px solid #e3e6ea;
    border-radius: 10px;

    background: #ffffff;

    color: #22262c;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.f10-social-settings-unblock:hover {
    border-color: #d4af37;

    background: #fffaf0;

    color: #9a7100;

    box-shadow:
        0 5px 16px rgba(212, 175, 55, 0.12);

    transform: translateY(-1px);
}


.f10-social-settings-unblock:active {
    transform: translateY(0);
}


.f10-social-settings-unblock:disabled {
    cursor: default;

    opacity: 0.6;

    transform: none;
    box-shadow: none;
}


/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.f10-social-settings-block-empty {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    color: #9299a5;
    font-size: 12px;
    font-weight: 600;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fcfcfd
        );
}


/* ---------------------------------------------------------
   BLOCKED PANEL SPECIAL TOUCH
--------------------------------------------------------- */

[data-settings-panel="blocked"]
.f10-social-settings-panel-head span {
    color: #b48a10;
}


[data-settings-panel="blocked"]
.f10-social-settings-panel-head h2 {
    color: #14171c;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .f10-social-settings-block-section {
        margin-top: 18px;
        border-radius: 14px;
    }


    .f10-social-settings-block-title {
        padding: 17px 16px;
        gap: 12px;
    }


    .f10-social-settings-block-title small {
        font-size: 11px;
    }


    .f10-social-settings-block-user {
        min-height: 72px;

        padding: 12px 14px;

        gap: 10px;
    }


    .f10-social-settings-block-user-main {
        gap: 10px;
    }


    .f10-social-settings-block-user-main img {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .f10-social-settings-block-user-main strong {
        max-width: 170px;

        font-size: 13px;
    }


    .f10-social-settings-unblock {
        min-height: 36px;

        padding: 0 12px;

        font-size: 11px;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 480px) {

    .f10-social-settings-block-user {
        align-items: flex-start;
        flex-direction: column;
    }


    .f10-social-settings-unblock {
        width: 100%;
    }


    .f10-social-settings-block-user-main strong {
        max-width: 230px;
    }

}


/* =========================================================
   UNAVAILABLE SOCIAL PROFILE
========================================================= */

.f10-social-unavailable-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 70px 24px 90px;
}

.f10-social-unavailable-card {
    min-height: 360px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 50px 30px;

    border: 1px solid #e7e8eb;
    border-radius: 22px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 12px 40px rgba(17, 24, 39, 0.06);
}

.f10-social-unavailable-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50%;

    background: rgba(212, 175, 55, 0.08);
}

.f10-social-unavailable-icon span {
    color: #b58a0c;
    font-size: 30px;
    font-weight: 900;
}

.f10-social-unavailable-card h1 {
    margin: 0;

    color: #17191e;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
}

.f10-social-unavailable-card p {
    margin: 10px 0 0;

    color: #7c8492;
    font-size: 14px;
    line-height: 1.6;
}

.f10-social-unavailable-actions {
    margin-top: 28px;
}

.f10-social-unavailable-back {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;

    border: 1px solid #d4af37;
    border-radius: 11px;

    background: #d4af37;

    color: #17191e;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.f10-social-unavailable-back:hover {
    color: #17191e;

    transform: translateY(-1px);

    box-shadow:
        0 7px 20px rgba(212, 175, 55, .20);
}

@media (max-width: 700px) {

    .f10-social-unavailable-page {
        padding: 35px 15px 60px;
    }

    .f10-social-unavailable-card {
        min-height: 300px;
        padding: 38px 20px;
        border-radius: 17px;
    }

    .f10-social-unavailable-card h1 {
        font-size: 23px;
    }
}


/* =========================================================
   COMMUNITY USER SEARCH
========================================================= */

.f10-community-user-search {
    position: relative;
    width: min(320px, 24vw);
    flex: 0 1 320px;
    z-index: 120;
}

.f10-community-user-search-field {
    position: relative;

    height: 42px;

    display: flex;
    align-items: center;

    border: 1px solid #303238;
    border-radius: 12px;

    background: #1c1e23;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.f10-community-user-search-field:focus-within {
    border-color: rgba(212, 175, 55, .65);
    background: #202228;

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, .08);
}

.f10-community-user-search-field > svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin-left: 13px;

    fill: none;
    stroke: #8f96a3;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.f10-community-user-search-field input {
    width: 100%;
    height: 100%;

    padding: 0 38px 0 10px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.f10-community-user-search-field input::placeholder {
    color: #767d89;
}


/* LOADER */

.f10-community-user-search-loader {
    position: absolute;

    right: 13px;
    top: 50%;

    width: 15px;
    height: 15px;

    margin-top: -7.5px;

    border: 2px solid rgba(255,255,255,.18);
    border-top-color: #d4af37;
    border-radius: 50%;

    animation:
        f10CommunitySearchSpin .65s linear infinite;
}

@keyframes f10CommunitySearchSpin {

    to {
        transform: rotate(360deg);
    }

}


/* RESULTS BOX */

.f10-community-user-search-results {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    width: 390px;
    max-height: 480px;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 7px;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 22px 55px rgba(17, 24, 39, .18);

    z-index: 9999;
}

.f10-community-user-search-results[hidden] {
    display: none !important;
}

.f10-community-user-search-results.is-full-search {
    width: 460px;
    max-height: 620px;
}


/* RESULT HEADER */

.f10-community-search-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 10px 11px;

    border-bottom: 1px solid #eef0f3;

    margin-bottom: 5px;
}

.f10-community-search-results-head strong {
    color: #17191e;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.f10-community-search-results-head span {
    min-width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    border-radius: 999px;

    background: rgba(212,175,55,.11);

    color: #a57900;
    font-size: 11px;
    font-weight: 900;
}


/* USER ROW */

.f10-community-search-user {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 66px;

    padding: 8px 9px;

    border-radius: 11px;

    transition:
        background-color .16s ease;
}

.f10-community-search-user:hover {
    background: #f7f8fa;
}

.f10-community-search-user-main {
    min-width: 0;

    display: flex;
    align-items: center;

    flex: 1;

    gap: 11px;

    color: inherit;
    text-decoration: none;
}


/* AVATAR */

.f10-community-search-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #f2f2f2,
            #e5e7eb
        );

    box-shadow:
        0 0 0 1px #e4e6ea;
}

.f10-community-search-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.f10-community-search-avatar > span {
    color: #8a909c;

    font-size: 16px;
    font-weight: 900;
}


/* INFO */

.f10-community-search-info {
    min-width: 0;
}

.f10-community-search-info strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #15171b;

    font-size: 13px;
    font-weight: 800;
}

.f10-community-search-info small {
    display: block;

    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #8a909b;

    font-size: 11px;
    font-weight: 600;
}


/* FRIEND BUTTON */

.f10-community-search-actions {
    flex: 0 0 auto;
}

.f10-community-search-friend {
    min-height: 34px;

    padding: 0 12px;

    border: 1px solid #d4af37;
    border-radius: 9px;

    background: #d4af37;

    color: #181a1f;

    font-size: 10px;
    font-weight: 900;

    cursor: pointer;

    white-space: nowrap;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}

.f10-community-search-friend:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(212,175,55,.22);
}

.f10-community-search-friend.is-sent {
    border-color: #dde0e5;

    background: #f4f5f7;

    color: #68707d;
}

.f10-community-search-friend.is-received {
    background: #17191e;

    border-color: #17191e;

    color: #ffffff;
}

.f10-community-search-friend.is-friends {
    border-color: #e1e4e8;

    background: #f4f5f6;

    color: #6e7580;

    cursor: default;
}


/* EMPTY */

.f10-community-search-empty {
    min-height: 105px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;

    text-align: center;
}

.f10-community-search-empty strong {
    color: #282b31;

    font-size: 13px;
    font-weight: 800;
}

.f10-community-search-empty span {
    margin-top: 5px;

    color: #939aa6;

    font-size: 11px;
}


/* TABLET */

@media (max-width: 1180px) {

    .f10-community-user-search {
        width: 230px;
        flex-basis: 230px;
    }

    .f10-community-user-search-results {
        width: 370px;
    }

}


/* MOBILE */

@media (max-width: 850px) {

    .f10-community-user-search {
        order: 10;

        width: 100%;
        max-width: none;
        flex: 1 0 100%;
    }

    .f10-community-user-search-field {
        width: 100%;
    }

    .f10-community-user-search-results,
    .f10-community-user-search-results.is-full-search {
        left: 0;
        right: 0;

        width: 100%;

        max-height: 65vh;
    }

}


@media (max-width: 480px) {

    .f10-community-search-user {
        gap: 8px;

        padding-left: 6px;
        padding-right: 6px;
    }

    .f10-community-search-avatar {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .f10-community-search-friend {
        padding: 0 9px;

        font-size: 9px;
    }

}



/* =========================================================
   COMMUNITY HEADER - SEARCH LAYOUT FIX
========================================================= */

.f10-community-topbar {
    height: 54px;
}


.f10-community-topbar-inner {
    width: calc(100% - 32px);
    max-width: 1180px;

    height: 54px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        auto
        minmax(210px, 280px)
        auto
        1fr;

    align-items: center;

    column-gap: 18px;

    white-space: nowrap;
}


/* BRAND */

.f10-community-logo {
    min-width: max-content;
}


/* SEARCH */

.f10-community-user-search {
    width: 100%;
    max-width: 280px;

    min-width: 210px;

    flex: none;

    align-self: center;
}


.f10-community-user-search-field {
    width: 100%;
    height: 34px;

    min-height: 34px;

    border-radius: 10px;

    box-sizing: border-box;
}


.f10-community-user-search-field > svg {
    width: 15px;
    height: 15px;

    flex-basis: 15px;

    margin-left: 11px;
}


.f10-community-user-search-field input {
    height: 34px;

    padding:
        0 32px
        0 8px;

    font-size: 11px;
    line-height: 34px;
}


.f10-community-user-search-loader {
    right: 10px;

    width: 13px;
    height: 13px;

    margin-top: -6.5px;
}


/* NAV */

.f10-community-topnav {
    min-width: max-content;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 2px;
}


/* RIGHT ACTIONS */

.f10-community-topbar-right {
    min-width: max-content;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    margin-left: auto;
}


/* SEARCH DROPDOWN */

.f10-community-user-search-results {
    top: calc(100% + 8px);

    width: 360px;
    max-width: min(360px, 92vw);
}


.f10-community-user-search-results.is-full-search {
    width: 430px;
    max-width: min(430px, 92vw);
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1100px) {

    .f10-community-topbar-inner {
        max-width: 100%;

        grid-template-columns:
            auto
            minmax(180px, 230px)
            auto
            1fr;

        column-gap: 12px;
    }


    .f10-community-user-search {
        min-width: 180px;
        max-width: 230px;
    }


    .f10-community-topnav-link {
        padding-left: 7px;
        padding-right: 7px;
    }


    .f10-community-topbar-right {
        gap: 7px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .f10-community-topbar-inner {
        grid-template-columns:
            auto
            1fr
            auto;

        column-gap: 10px;
    }


    .f10-community-user-search {
        min-width: 0;
        max-width: none;
        width: 100%;
    }


    .f10-community-topnav {
        display: none;
    }


    .f10-community-return {
        display: none;
    }


    .f10-community-topbar-right {
        margin-left: 0;
    }


    .f10-community-user-search-results,
    .f10-community-user-search-results.is-full-search {
        left: 0;

        width: min(420px, 88vw);
        max-width: 88vw;
    }

}


/* =========================================================
   HEADER MESSENGER DROPDOWN
========================================================= */

.f10-header-messenger-panel {
    position: fixed;

    top: 76px;
    right: 28px;

    z-index: 99999;

    width: 380px;
    max-width: calc(100vw - 24px);

    max-height: 560px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 18px;

    background:
        rgba(20, 22, 28, .98);

    box-shadow:
        0 22px 60px rgba(0,0,0,.38);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-8px);

    pointer-events: none;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}


.f10-header-messenger-panel.is-open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* HEADER */

.f10-header-messenger-head {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        0 17px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.f10-header-messenger-head span {
    display: block;

    color: #d4af37;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .14em;
}


.f10-header-messenger-head strong {
    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}


.f10-header-messenger-head > a {
    color: #d4af37;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


.f10-header-messenger-head > a:hover {
    color: #f0cb56;
}


/* LIST */

.f10-header-messenger-list {
    max-height: 410px;

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        6px;
}


/* MESSAGE ITEM */

.f10-header-messenger-item {
    min-height: 68px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        9px 10px;

    box-sizing:
        border-box;

    border-radius:
        12px;

    color: inherit;

    text-decoration:
        none;

    transition:
        background-color .16s ease;
}


.f10-header-messenger-item:hover {
    background:
        rgba(255,255,255,.06);
}


.f10-header-messenger-item.is-unread {
    background:
        rgba(212,175,55,.08);
}


/* AVATAR */

.f10-header-messenger-avatar {
    width: 44px;
    height: 44px;

    flex:
        0 0 44px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        #2a2d35;

    color:
        #d4af37;

    font-size:
        9px;

    font-weight:
        900;

    box-shadow:
        0 0 0 2px rgba(255,255,255,.05);
}


.f10-header-messenger-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* TEXT */

.f10-header-messenger-copy {
    min-width: 0;

    flex: 1;
}


.f10-header-messenger-copy strong {
    display: block;

    overflow: hidden;

    color:
        #f5f6f8;

    font-size:
        12px;

    font-weight:
        850;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.f10-header-messenger-copy small {
    display: block;

    margin-top:
        4px;

    overflow: hidden;

    color:
        #8d95a3;

    font-size:
        9px;

    line-height:
        1.4;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.f10-header-messenger-item.is-unread
.f10-header-messenger-copy small {
    color:
        #d8dce4;

    font-weight:
        700;
}


/* UNREAD COUNT */

.f10-header-messenger-unread {
    min-width: 20px;
    height: 20px;

    flex:
        0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 5px;

    box-sizing:
        border-box;

    border-radius:
        999px;

    background:
        #d4af37;

    color:
        #111318;

    font-size:
        8px;

    font-weight:
        950;
}


/* EMPTY */

.f10-header-messenger-empty {
    min-height: 130px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding:
        20px;

    text-align: center;
}


.f10-header-messenger-empty strong {
    color:
        #ffffff;

    font-size:
        12px;
}


.f10-header-messenger-empty span {
    margin-top:
        5px;

    color:
        #7f8795;

    font-size:
        9px;
}


/* BOTTOM LINK */

.f10-header-messenger-all {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:
        #d4af37;

    font-size:
        10px;

    font-weight:
        900;

    text-decoration:
        none;

    transition:
        background-color .16s ease;
}


.f10-header-messenger-all:hover {
    background:
        rgba(255,255,255,.05);

    color:
        #f0cb56;
}


/* MOBILE */

@media (max-width: 600px) {

    .f10-header-messenger-panel {
        top: 68px;

        left: 12px;
        right: 12px;

        width: auto;

        max-width: none;
    }

}


.f10-social-friend-avatar-wrap {
    position: relative;
    display: block;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    overflow: visible;
}

.f10-social-friend-avatar-wrap > img {
    display: block;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    max-width: 52px !important;

    object-fit: cover;

    border: 2px solid #fff;
    border-radius: 50%;

    background: transparent !important;

    box-shadow:
        0 0 0 1px rgba(16, 24, 40, .08),
        0 4px 12px rgba(16, 24, 40, .08);

    margin: 0 !important;

    transform: none !important;
}

.f10-social-friend-presence {
    position: absolute !important;

    right: -1px !important;
    bottom: 1px !important;

    display: block !important;

    width: 12px !important;
    height: 12px !important;

    min-width: 12px !important;
    max-width: 12px !important;

    min-height: 12px !important;
    max-height: 12px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    box-sizing: border-box !important;

    font-size: 0 !important;
    line-height: 0 !important;

    z-index: 10;

    pointer-events: none;
}

.f10-social-friend-presence.is-online {
    background: #22c55e !important;
}

.f10-social-friend-presence.is-offline {
    background: #94a3b8 !important;
}

@media (max-width: 520px) {

    .f10-social-friend-avatar-wrap {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .f10-social-friend-avatar-wrap > img {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        max-width: 46px !important;
    }

}


/* =========================================================
   PROFILE AVATAR STORY STATE - FINAL OVERRIDE
========================================================= */

.f10-public-social-profile
.f10-public-social-avatar-ring.has-story-unseen {
    background:
        conic-gradient(
            from 35deg,
            #f2c94c 0deg,
            #d4af37 100deg,
            #8b5cf6 190deg,
            #6d28d9 285deg,
            #f2c94c 360deg
        ) !important;

    box-shadow:
        0 7px 18px rgba(16,24,40,.16),
        0 0 0 3px #fff,
        0 0 18px rgba(139,92,246,.18) !important;
}


.f10-public-social-profile
.f10-public-social-avatar-ring.has-story-seen {
    background:
        linear-gradient(
            135deg,
            #cbd0d8,
            #8e96a3
        ) !important;

    box-shadow:
        0 7px 18px rgba(16,24,40,.12),
        0 0 0 3px #fff !important;
}


/* =========================================================
   STORY UNSEEN - PREMIUM GLOW
========================================================= */

.f10-public-social-avatar-ring.has-story-unseen {
    animation:
        f10StoryGlow
        2.2s
        ease-in-out
        infinite;
}


@keyframes f10StoryGlow {

    0%,
    100% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 8px rgba(212,175,55,.18),
            0 0 14px rgba(139,92,246,.12);
    }

    50% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 12px rgba(212,175,55,.45),
            0 0 24px rgba(139,92,246,.32);
    }

}

.f10-public-social-avatar-ring.has-story-unseen:hover {
    transform: scale(1.025);
}

.f10-public-social-avatar-ring {
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}



/* =========================================================
   STORY AVATAR - PREMIUM HEART GLOW
========================================================= */

.f10-public-social-avatar-ring {
    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


/* STORY NEVĂZUT */

.f10-public-social-avatar-ring.has-story-unseen {
    position: relative;

    animation:
        f10StoryPremiumGlow
        2.1s
        ease-in-out
        infinite;
}


.f10-public-social-avatar-ring.has-story-unseen::before,
.f10-public-social-avatar-ring.has-story-unseen::after {
    position: absolute;

    z-index: 20;

    display: block;

    color: #ff4f8b;

    font-size: 12px;
    line-height: 1;

    content: "♥";

    pointer-events: none;

    text-shadow:
        0 0 5px rgba(255,79,139,.75),
        0 0 10px rgba(212,175,55,.35);
}


.f10-public-social-avatar-ring.has-story-unseen::before {
    top: -9px;
    left: 5px;

    animation:
        f10StoryHeartOne
        2.4s
        ease-in-out
        infinite;
}


.f10-public-social-avatar-ring.has-story-unseen::after {
    right: -8px;
    bottom: 10px;

    color: #d4af37;

    font-size: 10px;

    animation:
        f10StoryHeartTwo
        2.7s
        ease-in-out
        infinite;
}


@keyframes f10StoryPremiumGlow {

    0%,
    100% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 9px rgba(212,175,55,.30),
            0 0 15px rgba(139,92,246,.18);
    }

    50% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 17px rgba(212,175,55,.60),
            0 0 29px rgba(139,92,246,.42);
    }

}


@keyframes f10StoryHeartOne {

    0%,
    100% {
        opacity: .55;
        transform:
            translateY(2px)
            scale(.85)
            rotate(-10deg);
    }

    50% {
        opacity: 1;
        transform:
            translateY(-4px)
            scale(1.12)
            rotate(7deg);
    }

}


@keyframes f10StoryHeartTwo {

    0%,
    100% {
        opacity: .45;
        transform:
            translateY(1px)
            scale(.82)
            rotate(10deg);
    }

    50% {
        opacity: 1;
        transform:
            translateY(-4px)
            scale(1.15)
            rotate(-8deg);
    }

}


.f10-public-social-avatar-ring.has-story-unseen:hover {
    transform: scale(1.035);
}


/* STORY DEJA VĂZUT */

.f10-public-social-avatar-ring.has-story-seen::before,
.f10-public-social-avatar-ring.has-story-seen::after {
    display: none;
}



/* =========================================================
   PROFILE AVATAR VIEWER
========================================================= */

body.f10-profile-avatar-open {
    overflow: hidden;
}


.f10-profile-avatar-viewer {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


.f10-profile-avatar-viewer.is-open {
    opacity: 1;
    visibility: visible;
}


.f10-profile-avatar-viewer-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(8,10,14,.88);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.f10-profile-avatar-viewer-content {
    position: relative;
    z-index: 2;

    width: min(520px, 90vw);
    height: min(520px, 90vw);

    display: flex;
    align-items: center;
    justify-content: center;
}


.f10-profile-avatar-viewer-content img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    border-radius: 50%;

    background: #111318;

    box-shadow:
        0 25px 70px rgba(0,0,0,.38);
}


.f10-profile-avatar-viewer-close {
    position: absolute;

    z-index: 3;

    top: -12px;
    right: -12px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    background:
        rgba(20,22,27,.92);

    color: #fff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   STORY PREMIUM NEON RING + HEARTS
========================================================= */

.f10-public-social-avatar-ring {
    overflow: visible;
}


/* STORY NOU */

.f10-public-social-avatar-ring.has-story-unseen {
    isolation: isolate;

    background:
        conic-gradient(
            from 0deg,
            #ff3d9a,
            #8b5cf6,
            #4f46e5,
            #00d4ff,
            #f5c542,
            #ff7a00,
            #ff3d9a
        ) !important;

    animation:
        f10StoryRingGlow
        2.4s
        linear
        infinite;
}


/* HALO EXTERIOR */

.f10-public-social-avatar-ring.has-story-unseen::before {
    content: "";

    position: absolute;
    inset: -8px;

    z-index: -2;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            #ff3d9a,
            #8b5cf6,
            #00d4ff,
            #f5c542,
            #ff6b00,
            #ff3d9a
        );

    filter:
        blur(9px);

    opacity: .58;

    animation:
        f10StoryHaloRotate
        3.2s
        linear
        infinite;

    pointer-events: none;
}


/* INEL SUBTIRE CARE ORBITEAZĂ */

.f10-public-social-avatar-ring.has-story-unseen::after {
    content: "";

    position: absolute;
    inset: -5px;

    z-index: -1;

    border:
        1px solid
        rgba(255,255,255,.72);

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(255,61,154,.55),
        0 0 14px rgba(139,92,246,.45),
        0 0 20px rgba(245,197,66,.30);

    pointer-events: none;
}


/* ANIMAȚIA INELULUI */

@keyframes f10StoryRingGlow {

    0% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 9px rgba(255,61,154,.36),
            0 0 18px rgba(139,92,246,.26);
    }

    33% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 13px rgba(0,212,255,.48),
            0 0 25px rgba(79,70,229,.34);
    }

    66% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 14px rgba(245,197,66,.56),
            0 0 27px rgba(255,122,0,.34);
    }

    100% {
        box-shadow:
            0 7px 18px rgba(16,24,40,.16),
            0 0 0 3px #fff,
            0 0 9px rgba(255,61,154,.36),
            0 0 18px rgba(139,92,246,.26);
    }

}


@keyframes f10StoryHaloRotate {

    from {
        transform:
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.05);
    }

    to {
        transform:
            rotate(360deg)
            scale(1);
    }

}


/* =========================================================
   STORY FLOATING HEARTS
========================================================= */

.f10-story-heart {
    position: absolute;

    z-index: 30;

    display: block;

    width: auto !important;

    color: #ff4f9a;

    font-size: 11px;
    line-height: 1;

    text-align: center;

    pointer-events: none;

    filter:
        drop-shadow(
            0 0 4px
            rgba(255,79,154,.75)
        );

    animation:
        f10StoryHeartFloat
        2.6s
        ease-in-out
        infinite;
}


.f10-story-heart-1 {
    top: -13px;
    left: -6px;

    font-size: 13px;

    animation-delay: 0s;
}


.f10-story-heart-2 {
    top: -18px;
    left: 27px;

    color: #ff2f88;

    font-size: 9px;

    animation-delay: -.45s;
}


.f10-story-heart-3 {
    top: -8px;
    right: -13px;

    color: #f5c542;

    font-size: 12px;

    animation-delay: -.85s;
}


.f10-story-heart-4 {
    top: 29px;
    right: -19px;

    color: #ff4f9a;

    font-size: 10px;

    animation-delay: -1.25s;
}


.f10-story-heart-5 {
    right: -8px;
    bottom: -14px;

    color: #8b5cf6;

    font-size: 13px;

    animation-delay: -1.65s;
}


.f10-story-heart-6 {
    bottom: -18px;
    left: 25px;

    color: #f5c542;

    font-size: 9px;

    animation-delay: -2s;
}


.f10-story-heart-7 {
    bottom: -4px;
    left: -17px;

    color: #ff3d9a;

    font-size: 12px;

    animation-delay: -.7s;
}


.f10-story-heart-8 {
    top: 27px;
    left: -22px;

    color: #8b5cf6;

    font-size: 9px;

    animation-delay: -1.45s;
}


@keyframes f10StoryHeartFloat {

    0%,
    100% {
        opacity: .45;

        transform:
            translateY(2px)
            scale(.78)
            rotate(-8deg);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-6px)
            scale(1.18)
            rotate(8deg);
    }

}


/* =========================================================
   FILME10 COMMUNITY FEED - PREMIUM
========================================================= */

.f10-feed-page {
    min-height: 100vh;

    padding:
        22px 14px
        55px;

    background:
        radial-gradient(
            circle at 50% -150px,
            rgba(212,175,55,.08),
            transparent 360px
        ),
        #f4f6f8;
}


.f10-feed-shell {
    width: 100%;
    max-width: 1040px;

    margin:
        0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.f10-feed-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
    padding: 17px 19px;

    border:
        1px solid #e3e7ec;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fbfcfd
        );

    box-shadow:
        0 7px 24px
        rgba(16,24,40,.055);
}


.f10-feed-intro span {
    display: block;

    margin-bottom: 3px;

    color: #ad7a07;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .15em;
}


.f10-feed-intro h1 {
    margin: 0;

    color: #17202d;

    font-size: 22px;
    font-weight: 950;

    letter-spacing: -.025em;
}


.f10-feed-intro p {
    max-width: 580px;

    margin:
        6px 0 0;

    color: #667085;

    font-size: 9px;
    line-height: 1.55;
}


.f10-feed-mode {
    flex: 0 0 auto;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(212,175,55,.35);

    border-radius: 999px;

    background:
        rgba(212,175,55,.08);

    color: #986d08;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .08em;
}


/* =========================================================
   STORIES
========================================================= */

.f10-feed-stories {
    margin-bottom: 14px;

    padding:
        13px;

    border:
        1px solid #e3e7ec;

    border-radius: 15px;

    background: #fff;

    box-shadow:
        0 5px 18px
        rgba(16,24,40,.04);
}


.f10-feed-stories-head {
    margin-bottom: 11px;
}


.f10-feed-stories-head span {
    display: block;

    color: #ad7a07;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .14em;
}


.f10-feed-stories-head strong {
    display: block;

    margin-top: 2px;

    color: #344054;

    font-size: 10px;
}


.f10-feed-stories-track {
    display: flex;

    gap: 13px;

    overflow-x: auto;

    padding:
        2px 2px
        7px;

    scrollbar-width: thin;
}


.f10-feed-story {
    width: 66px;

    flex: 0 0 66px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    text-align: center;
}


.f10-feed-story-avatar {
    position: relative;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin:
        0 auto 6px;

    padding: 3px;

    border-radius: 50%;

    box-sizing: border-box;

    background:
        #dfe3e8;
}


.f10-feed-story.has-story-unseen
.f10-feed-story-avatar {
    background:
        conic-gradient(
            #ff3d9a,
            #8b5cf6,
            #00d4ff,
            #f5c542,
            #ff7a00,
            #ff3d9a
        );

    animation:
        f10FeedStoryGlow
        2.3s
        ease-in-out
        infinite;
}


.f10-feed-story.has-story-seen
.f10-feed-story-avatar {
    background:
        linear-gradient(
            135deg,
            #cbd0d8,
            #8e96a3
        );
}


.f10-feed-story-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border:
        3px solid #fff;

    border-radius: 50%;

    box-sizing: border-box;
}


.f10-feed-story strong {
    display: block;

    overflow: hidden;

    color: #475467;

    font-size: 7px;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}


@keyframes f10FeedStoryGlow {

    0%,
    100% {
        box-shadow:
            0 0 7px
            rgba(212,175,55,.25),
            0 0 13px
            rgba(139,92,246,.18);
    }

    50% {
        box-shadow:
            0 0 12px
            rgba(212,175,55,.55),
            0 0 22px
            rgba(139,92,246,.34);
    }
}


/* =========================================================
   CREATE
========================================================= */

.f10-feed-create {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    padding:
        11px 12px;

    border:
        1px solid #e3e7ec;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 4px 16px
        rgba(16,24,40,.035);
}


.f10-feed-create > img {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    object-fit: cover;

    border-radius: 50%;

    border:
        2px solid #fff;

    box-shadow:
        0 0 0 1px #dfe3e8;
}


.f10-feed-create
.f10-community-create-post {
    height: 38px;

    flex: 1;

    border: 0;

    border-radius: 999px;

    background: #f3f5f7;

    color: #667085;

    font-size: 9px;

    cursor: pointer;

    text-align: left;

    padding:
        0 14px;
}


.f10-feed-create-photo {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border:
        1px solid
        rgba(212,175,55,.40);

    border-radius: 50%;

    background:
        #fffaf0;

    color: #a97908;

    font-size: 18px;

    cursor: pointer;
}


/* =========================================================
   LAYOUT
========================================================= */

.f10-feed-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        255px;

    align-items: start;

    gap: 14px;
}


.f10-feed-main {
    min-width: 0;
}


.f10-feed-side {
    position: sticky;

    top: 70px;

    display: grid;

    gap: 12px;
}


/* =========================================================
   POSTS
========================================================= */

.f10-feed-list {
    display: grid;

    gap: 13px;
}


.f10-feed-post {
    overflow: hidden;

    border:
        1px solid #e2e6eb;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 7px 22px
        rgba(16,24,40,.05);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.f10-feed-post:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 11px 30px
        rgba(16,24,40,.075);
}


.f10-feed-post-head {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        12px 13px 9px;
}


/* =========================================================
   POST AVATAR + STORY
========================================================= */

.f10-feed-post-avatar {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    padding: 2px;

    border: 0;

    border-radius: 50%;

    background:
        #e2e6ea;

    cursor: pointer;
}


.f10-feed-post-avatar.has-story-unseen {
    background:
        conic-gradient(
            #ff3d9a,
            #8b5cf6,
            #00d4ff,
            #f5c542,
            #ff7a00,
            #ff3d9a
        );

    animation:
        f10FeedAvatarGlow
        2.3s
        ease-in-out
        infinite;
}


.f10-feed-post-avatar.has-story-seen {
    background:
        linear-gradient(
            135deg,
            #cbd0d8,
            #8e96a3
        );
}


.f10-feed-post-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border:
        3px solid #fff;

    border-radius: 50%;

    box-sizing: border-box;
}


@keyframes f10FeedAvatarGlow {

    0%,
    100% {
        box-shadow:
            0 0 6px
            rgba(212,175,55,.22),
            0 0 11px
            rgba(139,92,246,.14);
    }

    50% {
        box-shadow:
            0 0 11px
            rgba(212,175,55,.52),
            0 0 19px
            rgba(139,92,246,.30);
    }
}


/* =========================================================
   AUTHOR
========================================================= */

.f10-feed-post-author {
    min-width: 0;

    flex: 1;
}


.f10-feed-post-author a {
    display: block;

    color: #273142;

    font-size: 10px;
    font-weight: 900;

    text-decoration: none;
}


.f10-feed-post-author a:hover {
    color: #a87908;
}


.f10-feed-post-author span {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 7px;
}


.f10-feed-online {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border:
        2px solid #fff;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 1px
        rgba(34,197,94,.20);
}


/* =========================================================
   POST COPY
========================================================= */

.f10-feed-post-copy {
    padding:
        3px 14px
        13px;

    color: #475467;

    font-size: 10px;

    line-height: 1.65;
}


/* =========================================================
   MEDIA
========================================================= */

.f10-feed-post-media {
    overflow: hidden;

    border-top:
        1px solid #edf0f3;

    border-bottom:
        1px solid #edf0f3;

    background:
        #111318;
}


.f10-feed-post-media img,
.f10-feed-post-media video {
    width: 100%;

    max-height: 610px;

    display: block;

    object-fit: contain;

    margin: 0 auto;

    background:
        #111318;
}


/* =========================================================
   STATS
========================================================= */

.f10-feed-post-stats {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        0 13px;

    color: #98a2b3;

    font-size: 7px;
}


.f10-feed-post-stats strong {
    color: #c99a24;

    font-weight: 900;
}


/* =========================================================
   ACTIONS
========================================================= */

.f10-feed-post-actions {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    padding:
        5px 8px;

    border-top:
        1px solid #eef1f4;

    background:
        #fafbfc;
}


.f10-feed-post-actions button {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #667085;

    font-family: inherit;

    font-size: 8px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.f10-feed-post-actions button:hover {
    background:
        #f0f2f5;

    color:
        #344054;
}


.f10-feed-post-actions button.is-liked {
    color:
        #e5484d;
}


.f10-feed-post-actions button.is-liked span {
    color:
        #e5484d;
}


/* =========================================================
   SIDEBAR
========================================================= */

.f10-feed-side-card {
    padding:
        15px;

    border:
        1px solid #e3e7ec;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 5px 18px
        rgba(16,24,40,.04);
}


.f10-feed-side-card > span {
    display: block;

    margin-bottom: 4px;

    color: #ad7a07;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .14em;
}


.f10-feed-side-card h2 {
    margin: 0;

    color: #273142;

    font-size: 12px;
    font-weight: 900;
}


.f10-feed-side-card p {
    margin:
        7px 0 0;

    color: #7b8494;

    font-size: 8px;

    line-height: 1.55;
}


/* =========================================================
   EMPTY
========================================================= */

.f10-feed-empty {
    padding:
        40px 20px;

    border:
        1px solid #e3e7ec;

    border-radius: 15px;

    background: #fff;

    text-align: center;

    box-shadow:
        0 5px 18px
        rgba(16,24,40,.04);
}


.f10-feed-empty strong {
    display: block;

    color: #475467;

    font-size: 11px;
}


.f10-feed-empty p {
    margin:
        5px 0 0;

    color: #98a2b3;

    font-size: 8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 820px) {

    .f10-feed-layout {
        grid-template-columns:
            minmax(0,1fr);
    }


    .f10-feed-side {
        position: static;

        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 560px) {

    .f10-feed-page {
        padding:
            12px 8px
            35px;
    }


    .f10-feed-intro {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            14px;
    }


    .f10-feed-intro h1 {
        font-size:
            19px;
    }


    .f10-feed-side {
        grid-template-columns:
            1fr;
    }


    .f10-feed-post {
        border-radius:
            13px;
    }


    .f10-feed-post-media img,
    .f10-feed-post-media video {
        max-height:
            520px;
    }


    .f10-feed-post-actions button {
        font-size:
            7px;
    }

}

.f10-community-topnav-link.is-active {
    background:
        rgba(212,175,55,.10);

    color:
        #e1b83e;
}


/* =========================================================
   COMMUNITY FEED - PERFECT ROUND AVATARS
========================================================= */

.f10-feed-post-avatar {
    position: relative !important;

    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    max-width: 46px !important;
    max-height: 46px !important;

    flex: 0 0 46px !important;

    aspect-ratio: 1 / 1 !important;

    padding: 3px !important;

    overflow: visible !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;
}


.f10-feed-post-avatar > img {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;

    aspect-ratio: 1 / 1 !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   COMMUNITY FEED - STORY HEARTS
========================================================= */

.f10-feed-post-avatar.has-story-unseen {
    isolation: isolate;

    background:
        conic-gradient(
            from 0deg,
            #ff3d9a,
            #a855f7,
            #38bdf8,
            #22d3ee,
            #facc15,
            #fb923c,
            #ff3d9a
        ) !important;

    box-shadow:
        0 0 10px rgba(255,61,154,.20),
        0 0 16px rgba(168,85,247,.16);

    animation:
        f10FeedPremiumRing
        2.4s
        linear
        infinite;
}


.f10-feed-post-avatar.has-story-unseen::before {
    content: "";

    position: absolute;

    inset: -5px;

    z-index: -1;

    border-radius: 50%;

    background:
        conic-gradient(
            #ff3d9a,
            #8b5cf6,
            #38bdf8,
            #facc15,
            #ff7a00,
            #ff3d9a
        );

    filter: blur(7px);

    opacity: .32;

    animation:
        f10FeedPremiumHalo
        4s
        linear
        infinite;
}


.f10-feed-heart {
    position: absolute;

    z-index: 8;

    display: block;

    padding: 0;

    line-height: 1;

    pointer-events: none;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.18)
        );

    animation:
        f10FeedHeartFloat
        2.3s
        ease-in-out
        infinite;
}


.f10-feed-heart-1 {
    top: -7px;
    left: 2px;

    color: #ff3d9a;

    font-size: 10px;
}


.f10-feed-heart-2 {
    top: -4px;
    right: -5px;

    color: #a855f7;

    font-size: 8px;

    animation-delay: -.4s;
}


.f10-feed-heart-3 {
    top: 16px;
    right: -9px;

    color: #38bdf8;

    font-size: 9px;

    animation-delay: -.8s;
}


.f10-feed-heart-4 {
    bottom: -6px;
    right: 2px;

    color: #facc15;

    font-size: 8px;

    animation-delay: -1.1s;
}


.f10-feed-heart-5 {
    bottom: -5px;
    left: 0;

    color: #fb923c;

    font-size: 9px;

    animation-delay: -1.5s;
}


.f10-feed-heart-6 {
    top: 17px;
    left: -9px;

    color: #ec4899;

    font-size: 8px;

    animation-delay: -1.8s;
}


@keyframes f10FeedPremiumRing {

    0% {
        filter:
            hue-rotate(0deg);
    }

    100% {
        filter:
            hue-rotate(360deg);
    }
}


@keyframes f10FeedPremiumHalo {

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes f10FeedHeartFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.90);

        opacity: .70;
    }

    50% {
        transform:
            translateY(-3px)
            scale(1.15);

        opacity: 1;
    }
}



/* =========================================================
   COMMUNITY FEED - AUTHOR SOCIAL ACTIONS
========================================================= */

.f10-feed-author-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 8px;
}


.f10-feed-online {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background:
        #36c76c;

    box-shadow:
        0 0 0 3px
        rgba(54,199,108,.12);
}


.f10-feed-friend {
    min-height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(212,175,55,.35);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #fffdf7 0%,
            #fff8e5 100%
        );

    color:
        #9b720b;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .025em;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.f10-feed-friend:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        rgba(212,175,55,.65);

    background:
        #fff7d9;

    box-shadow:
        0 4px 12px
        rgba(212,175,55,.12);
}


.f10-feed-friend.is-friends {
    border-color:
        rgba(34,197,94,.20);

    background:
        rgba(34,197,94,.07);

    color:
        #27884b;

    cursor:
        default;
}


.f10-feed-friend.is-friends span {
    color:
        #22c55e;
}


.f10-feed-friend.is-sent {
    border-color:
        #e4e7ec;

    background:
        #f8f9fa;

    color:
        #98a2b3;

    cursor:
        default;
}


.f10-feed-friend.is-received {
    border-color:
        rgba(212,175,55,.45);

    background:
        #fff8e5;

    color:
        #9b720b;
}


@media (max-width: 560px) {

    .f10-feed-author-actions {
        gap:
            5px;
    }


    .f10-feed-friend {
        min-height:
            26px;

        padding:
            0 7px;

        font-size:
            6px;
    }

}


/* =========================================================
   PREMIUM POST REACTIONS
========================================================= */

.f10-post-reaction-control {
    position: relative;

    min-width: 0;
}


.f10-feed-reaction-main {
    width: 100%;
}


.f10-reaction-picker {
    position: absolute;

    z-index: 120;

    left: 50%;
    bottom: calc(100% + 2px);

    display: flex;
    align-items: flex-end;

    gap: 4px;

    padding: 7px;

    border: 1px solid #e6e8ec;
    border-radius: 999px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.16);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%,7px)
        scale(.94);

    transform-origin:
        bottom center;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .18s ease;

    pointer-events: none;
}

.f10-post-reaction-control::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 100%;

    height: 14px;

    background: transparent;

    pointer-events: auto;
}

@media (hover:hover) {

    .f10-post-reaction-control:hover
    .f10-reaction-picker,
    .f10-reaction-picker:hover {

        opacity: 1;
        visibility: visible;

        transform:
            translate(-50%,0)
            scale(1);

        pointer-events: auto;
    }

}


.f10-post-reaction-control.is-picker-open
.f10-reaction-picker {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%,0)
        scale(1);

    pointer-events: auto;
}


.f10-reaction-choice {
    position: relative;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease;
}


.f10-reaction-choice:hover {
    transform:
        translateY(-6px)
        scale(1.18);

    background:
        #f7f8fa;
}


.f10-reaction-choice > span {
    font-size: 27px;
    line-height: 1;
}


.f10-reaction-choice small {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 7px);

    padding: 4px 7px;

    border-radius: 999px;

    background: #111827;

    color: #fff;

    font-size: 7px;
    font-weight: 800;

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(3px);

    transition:
        .15s ease;

    pointer-events: none;
}


.f10-reaction-choice:hover small {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* SELECTED */

.f10-feed-reaction-main.reaction-like {
    color: #2878d7 !important;
}


.f10-feed-reaction-main.reaction-love {
    color: #e5395f !important;
}


.f10-feed-reaction-main.reaction-fire {
    color: #f08421 !important;
}


/* SUMMARY */

.f10-feed-reaction-summary {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.f10-feed-reaction-stat {
    display: inline-flex;
    align-items: center;

    gap: 2px;

    font-size: 9px;
}


.f10-feed-reaction-stat strong {
    color: #667085;

    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   REACTION USERS MODAL
========================================================= */

.f10-post-reactions-modal {
    position: fixed;
    inset: 0;

    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    opacity: 0;
    visibility: hidden;

    transition: .18s ease;
}


.f10-post-reactions-modal.is-open {
    opacity: 1;
    visibility: visible;
}


.f10-post-reactions-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(15,23,42,.46);

    backdrop-filter:
        blur(5px);
}


.f10-post-reactions-dialog {
    position: relative;

    z-index: 2;

    width: min(
        440px,
        100%
    );

    max-height:
        min(650px,85vh);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 24px 65px
        rgba(15,23,42,.24);

    transform:
        translateY(10px)
        scale(.98);

    transition:
        transform .18s ease;
}


.f10-post-reactions-modal.is-open
.f10-post-reactions-dialog {
    transform:
        translateY(0)
        scale(1);
}


.f10-post-reactions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        15px 17px;

    border-bottom:
        1px solid #edf0f3;
}


.f10-post-reactions-head span {
    display: block;

    color: #ad7a07;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .14em;
}


.f10-post-reactions-head strong {
    display: block;

    margin-top: 2px;

    color: #273142;

    font-size: 13px;
}


.f10-post-reactions-head > button {
    width: 31px;
    height: 31px;

    border: 0;
    border-radius: 50%;

    background: #f2f4f7;

    color: #667085;

    font-size: 20px;

    cursor: pointer;
}


.f10-post-reactions-tabs {
    display: flex;

    overflow-x: auto;

    gap: 4px;

    padding:
        9px 12px;

    border-bottom:
        1px solid #edf0f3;
}


.f10-post-reactions-tabs button {
    flex: 0 0 auto;

    padding:
        7px 10px;

    border: 0;
    border-radius: 999px;

    background: transparent;

    color: #667085;

    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}


.f10-post-reactions-tabs button.is-active {
    background:
        rgba(212,175,55,.11);

    color:
        #9a7008;
}


.f10-post-reactions-tabs strong {
    margin-left: 3px;

    font-size: 7px;
}


.f10-post-reactions-list {
    min-height: 130px;

    overflow-y: auto;

    padding: 7px;
}


.f10-post-reaction-user {
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        8px 9px;

    border-radius: 11px;

    color: inherit;

    text-decoration: none;

    transition:
        background .15s ease;
}


.f10-post-reaction-user:hover {
    background:
        #f7f8fa;
}


.f10-post-reaction-user-avatar {
    position: relative;

    width: 39px;
    height: 39px;

    flex: 0 0 39px;
}


.f10-post-reaction-user-avatar img {
    width: 39px;
    height: 39px;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


.f10-post-reaction-user-avatar i {
    position: absolute;

    right: -3px;
    bottom: -2px;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border:
        2px solid #fff;

    border-radius: 50%;

    background: #fff;

    font-size: 11px;

    font-style: normal;
}


.f10-post-reaction-user-name {
    min-width: 0;

    flex: 1;
}


.f10-post-reaction-user-name strong {
    display: block;

    overflow: hidden;

    color: #344054;

    font-size: 9px;
    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.f10-post-reaction-user-name small {
    display: block;

    margin-top: 2px;

    color: #98a2b3;

    font-size: 7px;
}


.f10-post-reaction-user-type {
    flex: 0 0 auto;

    padding:
        5px 7px;

    border-radius: 999px;

    background: #f4f5f7;

    color: #667085;

    font-size: 7px;
    font-weight: 800;
}


.f10-post-reaction-user-type.reaction-like {
    background:
        rgba(40,120,215,.09);

    color: #2878d7;
}


.f10-post-reaction-user-type.reaction-love {
    background:
        rgba(229,57,95,.09);

    color: #e5395f;
}


.f10-post-reaction-user-type.reaction-fire {
    background:
        rgba(240,132,33,.10);

    color: #d96d0c;
}


.f10-post-reactions-loading,
.f10-post-reactions-empty {
    padding:
        35px 15px;

    color: #98a2b3;

    font-size: 9px;

    text-align: center;
}


@media (max-width: 560px) {

    .f10-post-reactions-modal {
        align-items:
            flex-end;

        padding:
            0;
    }


    .f10-post-reactions-dialog {
        width: 100%;

        max-height: 78vh;

        border-radius:
            19px 19px 0 0;
    }


    .f10-reaction-picker {
        position: fixed;

        left: 50%;
        bottom: 76px;

        padding:
            8px 10px;

        transform:
            translate(-50%,8px)
            scale(.95);
    }


    .f10-post-reaction-control.is-picker-open
    .f10-reaction-picker {
        transform:
            translate(-50%,0)
            scale(1);
    }


    .f10-reaction-choice {
        width: 52px;
        height: 52px;
    }


    .f10-reaction-choice > span {
        font-size: 31px;
    }

}


/* ==========================================================================
   FILME10 COMMUNITY
   SHARED POST ENGAGEMENT - FEED + PROFILE
   ========================================================================== */
   

/* --------------------------------------------------------------------------
   POST CARD
   -------------------------------------------------------------------------- */

.f10-public-social-page .f10-social-post {
    position: relative;
    overflow: visible !important;
}


/* --------------------------------------------------------------------------
   REACTION SUMMARY
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-social-post-reaction-summary {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    min-height: 0;
    margin: 0;
    padding: 0 18px;

    background: #fff;
}


.f10-public-social-page
.f10-feed-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 34px;

    margin: 0;
    padding: 5px 0;

    border: 0;
    background: transparent;

    font: inherit;
    cursor: pointer;
}


.f10-public-social-page
.f10-feed-reaction-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #6b7280;

    font-size: 13px;
    line-height: 1;
}


.f10-public-social-page
.f10-feed-reaction-stat strong {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}


.f10-public-social-page
.f10-feed-reaction-stat[hidden],
.f10-public-social-page
.f10-feed-reaction-summary[hidden] {
    display: none !important;
}


/* --------------------------------------------------------------------------
   ACTION FOOTER
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-social-post-footer {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 6px;

    width: 100%;
    min-height: 52px;

    margin: 0;
    padding: 7px 14px;

    overflow: visible !important;

    border-top: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;

    background: #fff;
}


/* --------------------------------------------------------------------------
   REACTION CONTROL
   -------------------------------------------------------------------------- */


.f10-post-reaction-control {
    position: relative;

    display: inline-flex;
    align-items: center;

    overflow: visible !important;
}


/* bridge between button and floating picker */

.f10-public-social-page
.f10-post-reaction-control::before {
    content: "";

    position: absolute;

    left: -10px;
    right: -120px;

    bottom: 100%;

    height: 20px;

    background: transparent;

    pointer-events: auto;
}


/* --------------------------------------------------------------------------
   MAIN LIKE BUTTON
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-social-post-like,
.f10-public-social-page
.f10-social-comments-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 0;
    min-height: 38px;

    margin: 0;
    padding: 8px 13px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #5f6672;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.f10-public-social-page
.f10-social-post-like:hover,
.f10-public-social-page
.f10-social-comments-toggle:hover {
    background: #f5f6f8;
    color: #15171c;
}


.f10-public-social-page
.f10-social-post-like > span:first-child {
    font-size: 17px;
    line-height: 1;
}


/* selected reactions */

.f10-public-social-page
.f10-social-post-like.reaction-like {
    color: #2563eb;
}


.f10-public-social-page
.f10-social-post-like.reaction-love {
    color: #e11d48;
}


.f10-public-social-page
.f10-social-post-like.reaction-fire {
    color: #d79b18;
}


/* --------------------------------------------------------------------------
   REACTION PICKER
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-reaction-picker {
    position: absolute;

    left: 0;
    bottom: calc(100% + 5px);

    z-index: 99999;

    display: flex;
    align-items: flex-end;
    gap: 5px;

    width: max-content;
    min-width: 210px;

    margin: 0;
    padding: 8px 10px;

    overflow: visible;

    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 999px;

    background: rgba(255, 255, 255, .98);

    box-shadow:
        0 12px 35px rgba(17, 24, 39, .14),
        0 3px 10px rgba(17, 24, 39, .08);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(6px)
        scale(.96);

    transform-origin:
        left bottom;

    pointer-events: none;

    transition:
        opacity .14s ease,
        visibility .14s ease,
        transform .14s ease;
}


/* --------------------------------------------------------------------------
   KEEP PICKER OPEN
   -------------------------------------------------------------------------- */

@media (hover:hover) {

    .f10-public-social-page
    .f10-post-reaction-control:hover
    .f10-reaction-picker,

    .f10-public-social-page
    .f10-reaction-picker:hover,

    .f10-public-social-page
    .f10-post-reaction-control:focus-within
    .f10-reaction-picker {

        opacity: 1;
        visibility: visible;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }

}


/* JS/mobile open state */

.f10-public-social-page
.f10-post-reaction-control.is-picker-open
.f10-reaction-picker {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


/* --------------------------------------------------------------------------
   INDIVIDUAL REACTIONS
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-reaction-choice {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 58px;
    min-width: 58px;
    height: 58px;

    margin: 0;
    padding: 4px;

    border: 0;
    border-radius: 16px;

    background: transparent;

    cursor: pointer;

    transition:
        transform .16s ease,
        background .16s ease;
}


.f10-public-social-page
.f10-reaction-choice span {
    display: block;

    font-size: 29px;
    line-height: 1;

    transform-origin: center bottom;

    transition: transform .16s ease;
}


.f10-public-social-page
.f10-reaction-choice small {
    display: block;

    margin-top: 4px;

    color: #555d69;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}


.f10-public-social-page
.f10-reaction-choice:hover {
    background: #f6f7f9;

    transform:
        translateY(-5px)
        scale(1.08);
}


.f10-public-social-page
.f10-reaction-choice:hover span {
    transform: scale(1.17);
}


/* --------------------------------------------------------------------------
   COMMENTS CONTAINER
   -------------------------------------------------------------------------- */

.f10-social-comments {
    width: 100%;

    margin: 0;
    padding: 14px 18px 18px;

    border: 0;

    background: #fff;
}


.f10-public-social-page
.f10-social-comments[hidden] {
    display: none !important;
}


/* --------------------------------------------------------------------------
   COMMENTS LIST
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-social-comments-list {
    display: flex;
    flex-direction: column;
    gap: 11px;

    width: 100%;

    margin: 0 0 13px;
}


.f10-public-social-page
.f10-social-comments-empty,
.f10-public-social-page
.f10-social-comments-loading {
    width: 100%;

    margin: 0;
    padding: 14px 16px;

    border-radius: 12px;

    background: #f7f8fa;

    color: #737b87;

    font-size: 13px;
    line-height: 1.45;
}


/* --------------------------------------------------------------------------
   COMMENT THREAD
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-social-comment-thread {
    width: 100%;
}


.f10-public-social-page
.f10-social-comment-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    width: 100%;

    margin: 0;
}


.f10-public-social-page
.f10-social-comment-item.is-reply {
    width: calc(100% - 44px);

    margin-top: 7px;
    margin-left: 44px;
}


/* avatar */

.f10-public-social-page
.f10-social-comment-avatar {
    flex: 0 0 36px;

    display: block;

    width: 36px;
    height: 36px;

    overflow: hidden;

    border-radius: 50%;

    background: #eef0f3;
}


.f10-public-social-page
.f10-social-comment-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}


/* comment body */

.f10-public-social-page
.f10-social-comment-body {
    flex: 1 1 auto;

    min-width: 0;
}


.f10-public-social-page
.f10-social-comment-bubble {
    display: inline-block;

    max-width: min(680px, 100%);

    padding: 9px 12px;

    border-radius:
        4px
        15px
        15px
        15px;

    background: #f3f4f6;

    color: #20242a;
}


.f10-public-social-page
.f10-social-comment-name {
    display: block;

    margin: 0 0 3px;

    color: #171a20;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;

    text-decoration: none;
}


.f10-public-social-page
.f10-social-comment-bubble p {
    margin: 0;

    color: #343a43;

    font-size: 13px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* meta */

.f10-public-social-page
.f10-social-comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 4px;
    padding-left: 4px;
}


.f10-public-social-page
.f10-social-comment-meta small {
    color: #9aa1ab;

    font-size: 10px;
}


.f10-public-social-page
.f10-social-comment-reply-button {
    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #9a7621;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


/* --------------------------------------------------------------------------
   COMMENT FORM
   -------------------------------------------------------------------------- */

.f10-social-comment-form {
    display: flex;
    align-items: flex-end;
    gap: 9px;

    width: 100%;

    margin: 0;
    padding: 0;
}


.f10-public-social-page
.f10-social-comment-form textarea {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    min-height: 44px;
    max-height: 120px;

    margin: 0;
    padding: 11px 14px;

    resize: vertical;

    border: 1px solid #e2e5e9;
    border-radius: 13px;
    outline: 0;

    background: #f8f9fa;

    color: #262b32;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.f10-public-social-page
.f10-social-comment-form textarea:focus {
    border-color: #d4af37;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(212, 175, 55, .10);
}


.f10-public-social-page
.f10-social-comment-form button {
    flex: 0 0 auto;

    min-height: 44px;

    margin: 0;
    padding: 0 18px;

    border: 0;
    border-radius: 13px;

    background: #15171c;

    color: #fff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}


.f10-public-social-page
.f10-social-comment-form button:hover {
    background: #d4af37;
    color: #111;

    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   REPLY FORM
   -------------------------------------------------------------------------- */

.f10-public-social-page
.f10-social-reply-form {
    margin-top: 8px;
}


.f10-public-social-page
.f10-social-reply-target {
    margin: 0 0 6px;

    color: #8b929c;

    font-size: 10px;
}


.f10-public-social-page
.f10-social-reply-fields {
    display: flex;
    align-items: center;
    gap: 6px;
}


.f10-public-social-page
.f10-social-reply-fields textarea {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 38px;

    padding: 9px 11px;

    border: 1px solid #e3e6e9;
    border-radius: 11px;
    outline: none;

    background: #f8f9fa;

    font-family: inherit;
    font-size: 12px;
}


.f10-public-social-page
.f10-social-reply-fields button {
    min-height: 38px;

    padding: 0 11px;

    border: 0;
    border-radius: 10px;

    background: #17191e;

    color: #fff;

    font-size: 9px;
    font-weight: 900;

    cursor: pointer;
}


.f10-public-social-page
.f10-social-reply-fields
[data-social-reply-cancel] {
    background: #eef0f3;
    color: #656c76;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .f10-public-social-page
    .f10-social-post-footer {
        padding:
            6px
            9px;
    }


    .f10-public-social-page
    .f10-social-post-like,
    .f10-public-social-page
    .f10-social-comments-toggle {
        flex: 1 1 0;

        min-height: 40px;

        padding:
            8px
            9px;
    }


    .f10-public-social-page
    .f10-reaction-picker {
        position: fixed;

        left: 50%;
        bottom: 22px;

        z-index: 100000;

        transform:
            translate(-50%, 12px)
            scale(.96);

        transform-origin:
            center bottom;
    }


    .f10-public-social-page
    .f10-post-reaction-control.is-picker-open
    .f10-reaction-picker {
        transform:
            translate(-50%, 0)
            scale(1);
    }


    .f10-public-social-page
    .f10-social-comments {
        padding:
            12px
            11px
            15px;
    }


    .f10-public-social-page
    .f10-social-comment-item.is-reply {
        width:
            calc(100% - 30px);

        margin-left:
            30px;
    }


    .f10-public-social-page
    .f10-social-comment-avatar {
        flex-basis:
            32px;

        width:
            32px;

        height:
            32px;
    }


    .f10-public-social-page
    .f10-social-comment-form {
        gap:
            6px;
    }


    .f10-public-social-page
    .f10-social-comment-form button {
        padding:
            0
            13px;
    }

}


/* =========================================================
   FEED -> USE SAME ENGAGEMENT UI AS PROFILE
========================================================= */

.f10-feed-post {
    overflow: visible;
}


.f10-feed-post-actions {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 6px;

    width: 100%;
    min-height: 52px;

    padding: 7px 14px;

    border-top: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;

    background: #fff;

    overflow: visible;
}


.f10-feed-post-actions
.f10-post-reaction-control {
    position: relative;

    display: inline-flex;
    align-items: center;

    overflow: visible;
}


.f10-feed-post-actions
.f10-feed-reaction-main,
.f10-feed-post-actions
.f10-feed-comment-button,
.f10-feed-post-actions
[data-social-comments-toggle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding: 8px 13px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #5f6672;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease;
}


.f10-feed-post-actions
.f10-feed-reaction-main:hover,
.f10-feed-post-actions
[data-social-comments-toggle]:hover {
    background: #f5f6f8;
    color: #15171c;
}


.f10-feed-post-actions
.f10-feed-reaction-main.reaction-like {
    color: #2563eb;
}


.f10-feed-post-actions
.f10-feed-reaction-main.reaction-love {
    color: #e11d48;
}


.f10-feed-post-actions
.f10-feed-reaction-main.reaction-fire {
    color: #d79b18;
}


/* COMMENTS AREA IN FEED */

.f10-feed-post
.f10-social-comments {
    width: 100%;

    margin: 0;

    padding:
        14px
        18px
        18px;

    border: 0;

    background: #fff;
}


.f10-feed-post
.f10-social-comments[hidden] {
    display: none !important;
}


/* reaction picker must escape card */

.f10-feed-post
.f10-reaction-picker {
    z-index: 99999;
}


@media (max-width: 700px) {

    .f10-feed-post-actions {
        padding:
            6px
            9px;
    }


    .f10-feed-post-actions
    .f10-feed-reaction-main,
    .f10-feed-post-actions
    [data-social-comments-toggle] {
        flex: 1 1 0;

        min-height: 40px;

        padding:
            8px
            9px;
    }


    .f10-feed-post
    .f10-social-comments {
        padding:
            12px
            11px
            15px;
    }

}


/* =========================================================
   SHARED COMMENT BUTTON - FEED + PROFILE
========================================================= */

.f10-social-comments-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    margin: 0;
    padding: 8px 13px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #5f6672;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.f10-social-comments-toggle:hover,
.f10-social-comments-toggle.is-open {
    background: #f5f6f8;
    color: #15171c;
}


.f10-social-comments-toggle > span:first-child {
    font-size: 16px;
    line-height: 1;
}


.f10-social-comments-toggle strong {
    min-width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    border-radius: 999px;

    background: rgba(212,175,55,.12);

    color: #a87908;

    font-size: 10px;
    font-weight: 900;
}


.f10-social-comments-toggle strong[hidden] {
    display: none !important;
}


.f10-social-post-visibility {
    margin-left: auto;

    color: #ad7a07;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}


@media (max-width: 700px) {

    .f10-social-comments-toggle {
        flex: 1 1 0;

        min-height: 40px;

        padding:
            8px
            9px;
    }

}


/* =========================================================
   FILME10 COMMENTS - FINAL SHARED OVERRIDE
   FEED + PROFILE
========================================================= */

.f10-feed-post .f10-social-comments,
.f10-social-post-item .f10-social-comments {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 14px 18px 18px;

    border: 0;
    border-top: 1px solid #edf0f3;

    background: #fff;
}


.f10-feed-post .f10-social-comments[hidden],
.f10-social-post-item .f10-social-comments[hidden] {
    display: none !important;
}


/* LIST */

.f10-feed-post .f10-social-comments-list,
.f10-social-post-item .f10-social-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;

    margin: 0 0 12px;
    padding: 0;
}


/* THREAD */

.f10-feed-post .f10-social-comment-thread,
.f10-social-post-item .f10-social-comment-thread {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* COMMENT ROW */

.f10-feed-post .f10-social-comment-item,
.f10-social-post-item .f10-social-comment-item {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    width: 100%;

    margin: 0;
    padding: 0;
}


.f10-feed-post .f10-social-comment-item.is-reply,
.f10-social-post-item .f10-social-comment-item.is-reply {
    width: calc(100% - 42px);

    margin-top: 7px;
    margin-left: 42px;
}


/* AVATAR */

.f10-feed-post .f10-social-comment-avatar,
.f10-social-post-item .f10-social-comment-avatar {
    flex: 0 0 34px;

    width: 34px !important;
    height: 34px !important;

    display: block;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 50%;

    background: #eef1f4;

    text-decoration: none;
}


.f10-feed-post .f10-social-comment-avatar img,
.f10-social-post-item .f10-social-comment-avatar img {
    display: block;

    width: 34px !important;
    height: 34px !important;

    margin: 0;
    padding: 0;

    object-fit: cover;

    border: 0;
    border-radius: 50%;
}


/* BODY */

.f10-feed-post .f10-social-comment-body,
.f10-social-post-item .f10-social-comment-body {
    flex: 1 1 auto;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* BUBBLE */

.f10-feed-post .f10-social-comment-bubble,
.f10-social-post-item .f10-social-comment-bubble {
    display: inline-block;

    max-width: min(680px, 100%);

    margin: 0;
    padding: 8px 11px;

    border: 0;
    border-radius:
        4px
        13px
        13px
        13px;

    background: #f3f4f6;

    color: #273142;

    box-shadow: none;
}


.f10-feed-post .f10-social-comment-name,
.f10-social-post-item .f10-social-comment-name {
    display: block;

    margin: 0 0 2px;
    padding: 0;

    color: #182230;

    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;

    text-decoration: none;
}


.f10-feed-post .f10-social-comment-bubble p,
.f10-social-post-item .f10-social-comment-bubble p {
    margin: 0;
    padding: 0;

    color: #475467;

    font-size: 12px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* META */

.f10-feed-post .f10-social-comment-meta,
.f10-social-post-item .f10-social-comment-meta {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 4px 0 0;
    padding-left: 4px;
}


.f10-feed-post .f10-social-comment-meta small,
.f10-social-post-item .f10-social-comment-meta small {
    margin: 0;
    padding: 0;

    color: #98a2b3;

    font-size: 9px;
    line-height: 1;
}


.f10-feed-post .f10-social-comment-reply-button,
.f10-social-post-item .f10-social-comment-reply-button {
    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #8d6a12;

    font-family: inherit;
    font-size: 9px;
    font-weight: 850;

    cursor: pointer;
}


/* REPLIES WRAP */

.f10-feed-post .f10-social-comment-replies,
.f10-social-post-item .f10-social-comment-replies {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 7px;
}


.f10-feed-post .f10-social-comment-replies::before,
.f10-social-post-item .f10-social-comment-replies::before {
    content: "";

    position: absolute;

    left: 16px;
    top: 0;
    bottom: 6px;

    width: 2px;

    border-radius: 999px;

    background: #edf0f3;
}


/* EMPTY */

.f10-feed-post .f10-social-comments-empty,
.f10-feed-post .f10-social-comments-loading,
.f10-feed-post .f10-social-comments-login,
.f10-social-post-item .f10-social-comments-empty,
.f10-social-post-item .f10-social-comments-loading,
.f10-social-post-item .f10-social-comments-login {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 12px 14px;

    border-radius: 10px;

    background: #f7f8fa;

    color: #7a8390;

    font-size: 11px;
    line-height: 1.4;
}


/* FORM */

.f10-feed-post .f10-social-comment-form,
.f10-social-post-item .f10-social-comment-form {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    width: 100%;

    margin: 0;
    padding: 0;
}


.f10-feed-post .f10-social-comment-form textarea,
.f10-social-post-item .f10-social-comment-form textarea {
    flex: 1 1 auto;

    width: auto !important;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;

    box-sizing: border-box;

    margin: 0;
    padding: 10px 12px;

    resize: vertical;

    border: 1px solid #e1e5ea;
    border-radius: 11px;

    outline: none;

    background: #f8f9fa;

    color: #273142;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.f10-feed-post .f10-social-comment-form textarea:focus,
.f10-social-post-item .f10-social-comment-form textarea:focus {
    border-color: #d4af37;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.10);
}


/* SUBMIT */

.f10-feed-post .f10-social-comment-form button,
.f10-social-post-item .f10-social-comment-form button {
    flex: 0 0 auto;

    min-width: 78px;
    min-height: 40px;

    margin: 0;
    padding: 0 14px;

    border: 0;
    border-radius: 11px;

    background: #15171c;

    color: #fff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: .04em;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}


.f10-feed-post .f10-social-comment-form button:hover,
.f10-social-post-item .f10-social-comment-form button:hover {
    background: #d4af37;
    color: #171717;

    transform: translateY(-1px);
}


/* REPLY FORM */

.f10-feed-post .f10-social-reply-form,
.f10-social-post-item .f10-social-reply-form {
    margin-top: 7px;
}


.f10-feed-post .f10-social-reply-target,
.f10-social-post-item .f10-social-reply-target {
    margin-bottom: 5px;

    color: #98a2b3;

    font-size: 9px;
}


.f10-feed-post .f10-social-reply-fields,
.f10-social-post-item .f10-social-reply-fields {
    display: flex;
    align-items: center;

    gap: 6px;
}


.f10-feed-post .f10-social-reply-fields textarea,
.f10-social-post-item .f10-social-reply-fields textarea {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 36px;

    box-sizing: border-box;

    margin: 0;
    padding: 8px 10px;

    border: 1px solid #e2e5e9;
    border-radius: 10px;

    outline: none;

    background: #f8f9fa;

    font-family: inherit;
    font-size: 11px;
}


.f10-feed-post .f10-social-reply-fields button,
.f10-social-post-item .f10-social-reply-fields button {
    min-height: 36px;

    margin: 0;
    padding: 0 10px;

    border: 0;
    border-radius: 9px;

    background: #17191e;

    color: #fff;

    font-family: inherit;
    font-size: 8px;
    font-weight: 900;

    cursor: pointer;
}


.f10-feed-post .f10-social-reply-fields
[data-social-reply-cancel],
.f10-social-post-item .f10-social-reply-fields
[data-social-reply-cancel] {
    background: #eef0f3;
    color: #667085;
}


/* MOBILE */

@media (max-width: 700px) {

    .f10-feed-post .f10-social-comments,
    .f10-social-post-item .f10-social-comments {
        padding:
            11px
            10px
            14px;
    }


    .f10-feed-post .f10-social-comment-item.is-reply,
    .f10-social-post-item .f10-social-comment-item.is-reply {
        width:
            calc(100% - 30px);

        margin-left:
            30px;
    }


    .f10-feed-post .f10-social-comment-avatar,
    .f10-social-post-item .f10-social-comment-avatar,
    .f10-feed-post .f10-social-comment-avatar img,
    .f10-social-post-item .f10-social-comment-avatar img {
        width: 30px !important;
        height: 30px !important;
    }


    .f10-feed-post .f10-social-comment-avatar,
    .f10-social-post-item .f10-social-comment-avatar {
        flex-basis: 30px;
    }


    .f10-feed-post .f10-social-comment-form,
    .f10-social-post-item .f10-social-comment-form {
        gap: 6px;
    }


    .f10-feed-post .f10-social-comment-form button,
    .f10-social-post-item .f10-social-comment-form button {
        min-width: 68px;

        padding:
            0
            11px;
    }

}



/* =========================================================
   FILME10 COMMENT REACTIONS
   FEED + PROFILE
========================================================= */

.f10-comment-reaction-control {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-left: 2px;

    overflow: visible;
}


/* MAIN BUTTON */

.f10-comment-reaction-main {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    min-height: 24px;

    margin: 0;
    padding: 3px 6px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #8b929d;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}


.f10-comment-reaction-main:hover {
    background: #f3f4f6;
    color: #344054;
}


.f10-comment-reaction-main
[data-comment-reaction-icon] {
    font-size: 13px;
    line-height: 1;
}


.f10-comment-reaction-main
[data-comment-reaction-label] {
    white-space: nowrap;
}


/* SELECTED */

.f10-comment-reaction-main.reaction-like {
    color: #2563eb;
}


.f10-comment-reaction-main.reaction-love {
    color: #e11d48;
}


.f10-comment-reaction-main.reaction-fire {
    color: #d97706;
}


/* =========================================================
   FLOATING PICKER
========================================================= */

.f10-comment-reaction-picker {
    position: absolute;

    left: 0;
    bottom: calc(100% + 2px);

    z-index: 10050;

    display: flex;
    align-items: center;
    gap: 3px;

    width: max-content;

    padding: 5px 6px;

    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 999px;

    background: rgba(255, 255, 255, .98);

    box-shadow:
        0 9px 24px rgba(15, 23, 42, .14),
        0 2px 6px rgba(15, 23, 42, .06);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(5px)
        scale(.94);

    transform-origin: left bottom;

    pointer-events: none;

    transition:
        opacity .14s ease,
        visibility .14s ease,
        transform .16s ease;
}


/* invisible hover bridge */

.f10-comment-reaction-control::before {
    content: "";

    position: absolute;

    left: 0;
    right: -90px;

    bottom: 100%;

    height: 12px;

    background: transparent;

    pointer-events: auto;
}


/* DESKTOP HOVER */

@media (hover:hover) {

    .f10-comment-reaction-control:hover
    .f10-comment-reaction-picker,

    .f10-comment-reaction-picker:hover,

    .f10-comment-reaction-control:focus-within
    .f10-comment-reaction-picker {

        opacity: 1;
        visibility: visible;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }

}


/* JS OPEN STATE - useful for mobile later */

.f10-comment-reaction-control.is-picker-open
.f10-comment-reaction-picker {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


/* PICKER BUTTONS */

.f10-comment-reaction-picker > button {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform .14s ease,
        background .14s ease;
}


.f10-comment-reaction-picker > button:hover {
    background: #f5f6f8;

    transform:
        translateY(-4px)
        scale(1.16);
}


/* =========================================================
   COUNTS
========================================================= */

.f10-comment-reaction-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.f10-comment-reaction-counts > span {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    min-height: 20px;

    padding: 2px 5px;

    border-radius: 999px;

    background: #f7f8fa;

    color: #667085;

    font-size: 9px;
    line-height: 1;
}


.f10-comment-reaction-counts > span strong {
    color: inherit;

    font-size: 8px;
    font-weight: 900;
}


.f10-comment-reaction-counts
[data-comment-reaction-count="like"] {
    background: rgba(37, 99, 235, .08);
    color: #2563eb;
}


.f10-comment-reaction-counts
[data-comment-reaction-count="love"] {
    background: rgba(225, 29, 72, .08);
    color: #e11d48;
}


.f10-comment-reaction-counts
[data-comment-reaction-count="fire"] {
    background: rgba(217, 119, 6, .09);
    color: #c66a05;
}


.f10-comment-reaction-counts > span[hidden] {
    display: none !important;
}


/* =========================================================
   META ALIGNMENT
========================================================= */

.f10-social-comment-meta {
    position: relative;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    overflow: visible;
}


.f10-social-comment-meta small {
    flex: 0 0 auto;
}


.f10-social-comment-reply-button {
    flex: 0 0 auto;
}


/* =========================================================
   REPLIES
========================================================= */

.f10-social-comment-item.is-reply
.f10-comment-reaction-main {
    font-size: 8px;
}


.f10-social-comment-item.is-reply
.f10-comment-reaction-picker > button {
    width: 29px;
    height: 29px;

    font-size: 18px;
}


/* =========================================================
   SMALL POLISH
========================================================= */

.f10-comment-reaction-main.has-reaction {
    background: #f7f8fa;
}


.f10-comment-reaction-main.reaction-like:hover {
    background: rgba(37, 99, 235, .08);
}


.f10-comment-reaction-main.reaction-love:hover {
    background: rgba(225, 29, 72, .08);
}


.f10-comment-reaction-main.reaction-fire:hover {
    background: rgba(217, 119, 6, .09);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .f10-comment-reaction-control {
        gap: 4px;
    }


    .f10-comment-reaction-main {
        min-height: 26px;

        padding:
            4px
            6px;
    }


    .f10-comment-reaction-main
    [data-comment-reaction-icon] {
        font-size: 14px;
    }


    .f10-comment-reaction-picker {
        position: fixed;

        left: 50%;
        bottom: 72px;

        z-index: 100000;

        padding:
            7px
            8px;

        transform:
            translate(-50%, 8px)
            scale(.95);

        transform-origin:
            center bottom;
    }


    .f10-comment-reaction-control.is-picker-open
    .f10-comment-reaction-picker {
        transform:
            translate(-50%, 0)
            scale(1);
    }


    .f10-comment-reaction-picker > button {
        width: 44px;
        height: 44px;

        font-size: 25px;
    }


    .f10-comment-reaction-counts {
        gap: 3px;
    }


    .f10-comment-reaction-counts > span {
        padding:
            2px
            4px;

        font-size: 8px;
    }

}



/* =========================================================
   COMMENT TARGET FROM NOTIFICATION
========================================================= */

.f10-social-comment-item {
    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


.f10-social-comment-item
.f10-social-comment-bubble {
    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.f10-social-comment-item.f10-comment-notification-highlight
.f10-social-comment-bubble {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.16),
            rgba(255,255,255,.98)
        );

    box-shadow:
        0 0 0 2px
        rgba(212,175,55,.32),
        0 8px 22px
        rgba(17,24,39,.08);
}


.f10-social-comment-item.f10-comment-notification-highlight {
    transform:
        translateX(3px);
}