/* =========================================================
    دکمه شناور ارتباط
   FLOATING CONTACT
   Premium / Glass / Responsive
   ========================================================= */

.floating-contact {

    position: fixed;

    left: 0;

    top: auto;
    bottom: 22px;

    transform: none;

    z-index: 9999;

    font-family: inherit;

    --fc-primary: #4f879f;
    --fc-primary-dark: #386d83;

    --fc-text: #172b3a;
    --fc-muted: #71808b;

    --fc-white: #ffffff;

    --fc-border: rgba(255,255,255,.55);

    --fc-shadow:
        0 18px 50px rgba(23,43,58,.16);

    --fc-radius: 18px;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.floating-contact-toggle {

    border: 0;

    outline: 0;

    cursor: pointer;

    height: 54px;

    min-width: 54px;

    padding: 0 15px 0 10px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--fc-primary),
            var(--fc-primary-dark)
        );

    border-radius:
        0 30px 30px 0;

    box-shadow:
        0 10px 30px rgba(56,109,131,.30);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        width .35s ease;
}


.floating-contact-toggle:hover {

    transform: translateX(5px);

    box-shadow:
        0 14px 35px rgba(56,109,131,.38);
}


/* =========================================================
   TOGGLE ICON
   ========================================================= */

.floating-contact-toggle-icon {

    width: 36px;

    height: 36px;

    min-width: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    font-size: 17px;

    transition: transform .35s ease;
}


.floating-contact.is-open
.floating-contact-toggle-icon {

    transform: rotate(15deg);
}


/* =========================================================
   TOGGLE TEXT
   ========================================================= */

.floating-contact-toggle-text {

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    letter-spacing: -.1px;
}


.floating-contact-toggle-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform .35s ease;
}


.floating-contact.is-open
.floating-contact-toggle-arrow {

    transform: rotate(180deg);
}


/* =========================================================
   PANEL
   ========================================================= */

.floating-contact-panel {

    position: absolute;

    left: 0;

    bottom: calc(100% + 12px);

    width: 310px;

    padding: 14px;

    border-radius: 0 var(--fc-radius) var(--fc-radius) 0;

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

    border: 1px solid var(--fc-border);

    box-shadow: var(--fc-shadow);

    backdrop-filter: blur(18px);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-18px)
        scale(.96);

    transform-origin: left bottom;

    transition:
        opacity .30s ease,
        visibility .30s ease,
        transform .30s cubic-bezier(.22,.61,.36,1);
}


.floating-contact.is-open
.floating-contact-panel {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1);
}


/* =========================================================
   HEADER
   ========================================================= */

.floating-contact-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 7px 6px 14px;

    border-bottom:
        1px solid rgba(23,43,58,.08);

    margin-bottom: 10px;
}


.floating-contact-header-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--fc-primary),
            var(--fc-primary-dark)
        );

    box-shadow:
        0 8px 18px rgba(79,135,159,.25);

    font-size: 18px;
}


.floating-contact-header-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.floating-contact-header-content strong {

    color: var(--fc-text);

    font-size: 14px;

    font-weight: 800;
}


.floating-contact-header-content span {

    color: var(--fc-muted);

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   ITEMS
   ========================================================= */

.floating-contact-list {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.floating-contact-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 54px;

    padding: 7px 10px 7px 7px;

    color: var(--fc-text);

    text-decoration: none;

    border-radius: 13px;

    background:
        rgba(246,249,250,.88);

    border:
        1px solid rgba(23,43,58,.055);

    opacity: 0;

    transform:
        translateY(14px)
        scale(.96);

    will-change:
        opacity,
        transform;

    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.22,.61,.36,1),
        background .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.floating-contact-item:hover {

    color: var(--fc-text);

    text-decoration: none;

    transform:
        translateY(0)
        translateX(5px)
        scale(1);

    background: #fff;

    border-color:
        rgba(79,135,159,.22);

    box-shadow:
        0 8px 22px rgba(23,43,58,.08);
}


/* =========================================================
   ITEM ICON
   ========================================================= */

.floating-contact-item-icon {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: var(--fc-primary);

    background:
        rgba(79,135,159,.10);

    font-size: 17px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


.floating-contact-item:hover
.floating-contact-item-icon {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--fc-primary),
            var(--fc-primary-dark)
        );

    transform: scale(1.05);
}


/* =========================================================
   TITLE
   ========================================================= */

.floating-contact-item-title {

    flex: 1;

    min-width: 0;

    font-size: 13px;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   ARROW
   ========================================================= */

.floating-contact-item-arrow {

    color: #a0adb5;

    font-size: 11px;

    transition:
        transform .25s ease,
        color .25s ease;
}


.floating-contact-item:hover
.floating-contact-item-arrow {

    color: var(--fc-primary);

    transform: translateX(-3px);
}


/* =========================================================
   EMPTY
   ========================================================= */

.floating-contact-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 18px 10px;

    color: var(--fc-muted);

    text-align: center;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   RTL
   ========================================================= */

/*
   فقط موقعیت تغییر کرده است.
   دکمه در هر دو زبان همچنان سمت چپ صفحه قرار می‌گیرد.
*/

html[dir="rtl"]
.floating-contact {

    left: 0;

    right: auto;

    top: auto;

    bottom: 22px;

    transform: none;
}


html[dir="rtl"]
.floating-contact-toggle {

    border-radius:
        0 30px 30px 0;

    padding:
        0 15px 0 10px;
}


html[dir="rtl"]
.floating-contact-panel {

    left: 0;

    right: auto;

    transform-origin: left bottom;

    transform:
        translateX(-18px)
        scale(.96);

    border-radius:
        0 var(--fc-radius) var(--fc-radius) 0;
}


html[dir="rtl"]
.floating-contact.is-open
.floating-contact-panel {

    transform:
        translateX(0)
        scale(1);
}


html[dir="rtl"]
.floating-contact-item {

    padding:
        7px 10px 7px 7px;
}


html[dir="rtl"]
.floating-contact-item:hover {

    transform:
        translateX(5px);
}


html[dir="rtl"]
.floating-contact-item-arrow {

    transform: rotate(180deg);
}


html[dir="rtl"]
.floating-contact-item:hover
.floating-contact-item-arrow {

    transform:
        rotate(180deg)
        translateX(-3px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .floating-contact {

        left: 0;

        right: auto;

        top: auto;

        bottom: 22px;

        transform: none;
    }


    .floating-contact-toggle {

        height: 52px;

        min-width: 52px;

        padding:
            0 13px 0 9px;
    }


    .floating-contact-toggle-text {

        font-size: 12px;
    }


    .floating-contact-panel {

        left: 0;

        right: auto;

        bottom: calc(100% + 10px);

        width:
            min(310px, calc(100vw - 28px));
    }


    html[dir="rtl"]
    .floating-contact {

        left: 0;

        right: auto;
    }


    html[dir="rtl"]
    .floating-contact-toggle {

        padding:
            0 9px 0 13px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .floating-contact {

        left: 0;

        right: auto;
    }


    .floating-contact-toggle-text {

        display: none;
    }


    .floating-contact-toggle {

        padding: 0 8px;

        border-radius: 50%;

        width: 54px;

        height: 54px;
    }


    .floating-contact-toggle-arrow {

        display: none;
    }


    .floating-contact-panel {

        left: 0;

        right: auto;

        width:
            min(300px, calc(100vw - 24px));
    }

}