@font-face {
    font-family: "WhatsApp Support";
    src: url("../assets/vendor/fonts/fontawesome/fa-brands-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: block;
    unicode-range: U+F232;
}

.wa-support {
    --wa-support-edge: 24px;
    --wa-support-bottom: 24px;
    --wa-support-size: 56px;
    position: fixed;
    inset-inline-end: var(--wa-support-edge);
    bottom: var(--wa-support-bottom);
    z-index: 1030;
}

.wa-support .wa-support-button {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wa-support-size);
    height: var(--wa-support-size);
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .25);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.wa-support-icon {
    position: relative;
    z-index: 1;
    font: 400 32px/1 "WhatsApp Support";
}

.wa-support-icon::before {
    content: "\f232";
}

.wa-support-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, .2), transparent);
    transform: translateX(-100%);
    transition: transform 600ms ease;
}

.wa-support .wa-support-button:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(37, 211, 102, .4);
}

.wa-support-button:hover::before {
    transform: translateX(100%);
}

.wa-support .wa-support-button:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .5);
    outline-offset: 3px;
}

.wa-support .wa-support-button:active {
    transform: translateY(-1px) scale(.97);
}

.wa-support-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wa-support-label-ar,
html[dir="rtl"] .wa-support-label-en {
    display: none;
}

html[dir="rtl"] .wa-support-label-ar {
    display: block;
}

@media (max-width: 575.98px) {
    .wa-support {
        --wa-support-edge: 16px;
        --wa-support-bottom: max(16px, env(safe-area-inset-bottom, 0px));
        --wa-support-size: 52px;
    }

    .wa-support-icon {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-support .wa-support-button,
    .wa-support-button::before {
        transition: none;
    }
}