.bszw-fsm {
    --bszw-main-color: #522bed;
    --bszw-bottom: 30px;
    --bszw-side: 20px;

    position: fixed;
    bottom: var(--bszw-bottom);
    z-index: 999999;
    width: 76px;
    height: 76px;
    direction: rtl;
    font-family: inherit;
}

/* =========================
   Position
========================= */

.bszw-fsm-right {
    right: var(--bszw-side);
}

.bszw-fsm-left {
    left: var(--bszw-side);
}

/* =========================
   Backdrop
========================= */

.bszw-fsm-backdrop {
    position: fixed;
    inset: 0;

    background: rgba(15, 23, 42, .18);

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index: -1;
}

.bszw-fsm.is-open .bszw-fsm-backdrop {
    opacity: 1;
    visibility: visible;
}

/* =========================
   Main Button
========================= */

.bszw-fsm-main {
    position: absolute;
    inset: 0;

    border: 0;
    padding: 0;

    width: 76px;
    height: 76px;

    border-radius: 50% !important;

    background: var(--bszw-main-color, #522bed) !important;
    color: #fff;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(37, 51, 204, .32),
        0 0 0 8px rgba(82, 43, 237, .08);

    z-index: 20;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;
}

.bszw-fsm-main:hover {
    transform: scale(1.08);

    box-shadow:
        0 16px 35px rgba(37, 51, 204, .38),
        0 0 0 11px rgba(82, 43, 237, .10);
}

.bszw-fsm-main-icon {
    position: relative;
    z-index: 2;

    filter: brightness(0) invert(1);

    display: block;

    font-size: 31px;
    line-height: 76px;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1);
}

.bszw-fsm.is-open .bszw-fsm-main-icon {
    transform: rotate(135deg);
}

/* =========================
   Pulse
========================= */

.bszw-fsm-pulse {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    border: 2px solid var(--bszw-main-color);

    animation: bszw-fsm-pulse 2.2s infinite;

    opacity: .6;
}

@keyframes bszw-fsm-pulse {

    0% {
        transform: scale(1);
        opacity: .55;
    }

    70% {
        transform: scale(1.55);
        opacity: 0;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

/* =========================
   Items Container
========================= */

.bszw-fsm-items {
    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;
}

/* =========================
   Social Items
========================= */

.bszw-fsm-item-link {
    position: absolute;

    right: 0;
    bottom: 0;

    display: flex;

    /*
     * حالت پیش‌فرض:
     * متن سمت چپ
     * عکس سمت راست
     */
    flex-direction: row;

    align-items: center;

    gap: 9px;

    height: 50px;

    /*
     * ترتیب آیتم‌ها مستقل از RTL سایت
     */
    direction: ltr;

    color: #fff !important;
    text-decoration: none !important;

    pointer-events: none;

    opacity: 0;

    /*
     * شروع انیمیشن کمی پایین‌تر
     */
    transform: translateY(20px) scale(.6);

    transform-origin: right center;

    transition:
        opacity .3s ease,
        transform .42s cubic-bezier(.2,.8,.2,1);
}

/* =========================
   Open Animation
========================= */

.bszw-fsm.is-open .bszw-fsm-item-link {
    pointer-events: auto;

    opacity: 1;

    transform:
        translateY(
            calc(
                -95px - var(--bszw-offset, 0px)
            )
        )
        scale(1);
}

/* =========================
   Item Spacing
========================= */

.bszw-fsm-item-link:nth-child(1) {
    --bszw-offset: 0px;
}

.bszw-fsm-item-link:nth-child(2) {
    --bszw-offset: 62px;
}

.bszw-fsm-item-link:nth-child(3) {
    --bszw-offset: 124px;
}

.bszw-fsm-item-link:nth-child(4) {
    --bszw-offset: 186px;
}

.bszw-fsm-item-link:nth-child(5) {
    --bszw-offset: 248px;
}

.bszw-fsm-item-link:nth-child(6) {
    --bszw-offset: 310px;
}

.bszw-fsm-item-link:nth-child(7) {
    --bszw-offset: 372px;
}

.bszw-fsm-item-link:nth-child(8) {
    --bszw-offset: 434px;
}

.bszw-fsm-item-link:nth-child(9) {
    --bszw-offset: 496px;
}

.bszw-fsm-item-link:nth-child(10) {
    --bszw-offset: 558px;
}

/* =========================
   Right Position
========================= */

.bszw-fsm-right .bszw-fsm-item-link {
    right: 0;
    left: auto;

    /*
     * متن چپ
     * عکس راست
     */
    flex-direction: row;

    transform-origin: right center;
}

/* =========================
   Left Position
========================= */

.bszw-fsm-left .bszw-fsm-item-link {
    right: auto;
    left: 0;

    /*
     * عکس چپ
     * متن راست
     */
    flex-direction: row-reverse;

    transform-origin: left center;
}

/* =========================
   Icon
========================= */

.bszw-fsm-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;

    border-radius: 17px;

    overflow: hidden;

    background: var(--bszw-item-color, #fff);

    box-shadow:
        0 9px 25px rgba(0,0,0,.20);

    display: flex;

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

    border: 3px solid rgba(255,255,255,.9);

    transition:
        transform .25s ease;
}

.bszw-fsm-item-link:hover .bszw-fsm-icon {
    transform:
        scale(1.1)
        rotate(-4deg);
}

.bszw-fsm-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.bszw-fsm-default-icon {
    font-size: 23px;
    font-weight: 700;
}

/* =========================
   Label
========================= */

.bszw-fsm-label {
    background: rgba(15,23,42,.92);

    color: #fff;

    padding: 8px 12px;

    border-radius: 12px;

    white-space: nowrap;

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

    box-shadow:
        0 7px 20px rgba(0,0,0,.16);

    max-width: 180px;

    overflow: hidden;
    text-overflow: ellipsis;

    /*
     * متن فارسی RTL
     */
    direction: rtl;
    text-align: right;
}

/* =========================
   Lock
========================= */

.bszw-fsm-lock {
    overflow: hidden;
}

/* =========================
   Mobile
========================= */

@media (max-width: 600px) {

    .bszw-fsm {
        width: 66px;
        height: 66px;

        --bszw-side:
            max(12px, var(--bszw-side));

        --bszw-bottom:
            max(18px, var(--bszw-bottom));
    }

    .bszw-fsm-main {
        width: 66px;
        height: 66px;
    }

    .bszw-fsm-main-icon {
        line-height: 66px;
        font-size: 27px;
    }

    .bszw-fsm-item-link {
        height: 46px;
    }

    /* =========================
       Mobile Open Animation
    ========================= */

    .bszw-fsm.is-open .bszw-fsm-item-link {
        transform:
            translateY(
                calc(
                    -82px - var(--bszw-offset-mobile, 0px)
                )
            )
            scale(1);
    }

    /* =========================
       Mobile Spacing
    ========================= */

    .bszw-fsm-item-link:nth-child(1) {
        --bszw-offset-mobile: 0px;
    }

    .bszw-fsm-item-link:nth-child(2) {
        --bszw-offset-mobile: 56px;
    }

    .bszw-fsm-item-link:nth-child(3) {
        --bszw-offset-mobile: 112px;
    }

    .bszw-fsm-item-link:nth-child(4) {
        --bszw-offset-mobile: 168px;
    }

    .bszw-fsm-item-link:nth-child(5) {
        --bszw-offset-mobile: 224px;
    }

    .bszw-fsm-item-link:nth-child(6) {
        --bszw-offset-mobile: 280px;
    }

    .bszw-fsm-item-link:nth-child(7) {
        --bszw-offset-mobile: 336px;
    }

    .bszw-fsm-item-link:nth-child(8) {
        --bszw-offset-mobile: 392px;
    }

    .bszw-fsm-item-link:nth-child(9) {
        --bszw-offset-mobile: 448px;
    }

    .bszw-fsm-item-link:nth-child(10) {
        --bszw-offset-mobile: 504px;
    }

    /* =========================
       Mobile Icon
    ========================= */

    .bszw-fsm-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;

        border-radius: 14px;
    }

    /* =========================
       Mobile Label
    ========================= */

    .bszw-fsm-label {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {

    .bszw-fsm *,
    .bszw-fsm *::before,
    .bszw-fsm *::after {

        animation-duration: .01ms !important;

        transition-duration: .01ms !important;
    }
}