/*
|--------------------------------------------------------------------------
| FERRODEI
|--------------------------------------------------------------------------
| WHATSAPP CONTACT WIDGET
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   WIDGET
   ========================================================================== */

.site-whatsapp-widget {
    position: fixed;

    z-index: 99990;

    right:
        max(
            22px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            22px,
            env(safe-area-inset-bottom)
        );

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 12px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}



/* ==========================================================================
   FLOATING BUTTON
   ========================================================================== */

.site-whatsapp {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 60px;
    height: 60px;

    flex:
        0 0
        60px;

    display: grid;

    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        #25D366;

    color:
        #FFFFFF;

    cursor: pointer;

    box-shadow:
        0 14px 34px
        rgba(22, 24, 27, .20);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}


.site-whatsapp:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px
        rgba(22, 24, 27, .25);
}


.site-whatsapp:active {
    transform:
        scale(.96);
}


.site-whatsapp:focus-visible {
    outline:
        3px solid
        rgba(51, 4, 86, .24);

    outline-offset:
        4px;
}



/* ==========================================================================
   BUTTON ICONS
   ========================================================================== */

.site-whatsapp__icon {
    position: absolute;

    width: 31px;
    height: 31px;

    transition:
        opacity 180ms ease,
        transform 220ms ease;
}


.site-whatsapp__icon--whatsapp {
    fill:
        currentColor;

    opacity: 1;

    transform:
        scale(1)
        rotate(0deg);
}


.site-whatsapp__icon--close {
    width: 25px;
    height: 25px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    opacity: 0;

    transform:
        scale(.7)
        rotate(-45deg);
}


.site-whatsapp-widget.is-open
.site-whatsapp__icon--whatsapp {
    opacity: 0;

    transform:
        scale(.65)
        rotate(45deg);
}


.site-whatsapp-widget.is-open
.site-whatsapp__icon--close {
    opacity: 1;

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



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

.site-whatsapp-panel[hidden] {
    display:
        none !important;
}


.site-whatsapp-panel {
    width:
        min(
            370px,
            calc(100vw - 32px)
        );

    overflow: hidden;

    border:
        1px solid
        rgba(217, 219, 222, .95);

    border-radius:
        18px;

    background:
        #FFFFFF;

    box-shadow:
        0 26px 70px
        rgba(22, 24, 27, .18);

    transform-origin:
        right bottom;

    animation:
        ferrodeiWhatsappIn
        220ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        )
        both;
}



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

.site-whatsapp-panel__header {
    min-height: 76px;

    display: flex;

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

    gap: 18px;

    padding:
        15px
        16px;

    background:
        linear-gradient(
            135deg,
            #21012F,
            #330456 55%,
            #54206F
        );

    color:
        #FFFFFF;
}


.site-whatsapp-panel__identity {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;
}


.site-whatsapp-panel__logo {
    width: 40px;
    height: 40px;

    flex:
        0 0
        40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #25D366;
}


.site-whatsapp-panel__logo svg {
    width: 23px;
    height: 23px;

    fill:
        #FFFFFF;
}


.site-whatsapp-panel__identity small {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, .68);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.site-whatsapp-panel__identity strong {
    display: block;

    color:
        #FFFFFF;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .03em;
}



/* ==========================================================================
   CLOSE BUTTON
   ========================================================================== */

.site-whatsapp-panel__close {
    appearance: none;
    -webkit-appearance: none;

    width: 34px;
    height: 34px;

    flex:
        0 0
        34px;

    display: grid;

    place-items: center;

    margin: 0;
    padding: 0;

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

    border-radius: 50%;

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

    color:
        #FFFFFF;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}


.site-whatsapp-panel__close:hover {
    border-color:
        rgba(255, 255, 255, .50);

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



/* ==========================================================================
   BODY
   ========================================================================== */

.site-whatsapp-panel__body {
    padding:
        20px;
}


.site-whatsapp-panel__body > p {
    margin:
        0
        0
        18px;

    color:
        #4E5257;

    font-size:
        13px;

    line-height:
        1.65;
}


.site-whatsapp-panel__body > p strong {
    color:
        #16181B;

    font-weight:
        700;
}



/* ==========================================================================
   PRODUCTS
   ========================================================================== */

.site-whatsapp-panel__products {
    min-height: 62px;

    display: flex;

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

    gap: 20px;

    margin-bottom:
        12px;

    padding:
        11px
        14px;

    border:
        1px solid
        #D9DBDE;

    border-radius:
        11px;

    background:
        #F6F6F7;

    color:
        #16181B;

    text-decoration:
        none;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}


.site-whatsapp-panel__products small {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #858A90;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.site-whatsapp-panel__products strong {
    display:
        block;

    color:
        #16181B;

    font-size:
        12px;

    font-weight:
        650;
}


.site-whatsapp-panel__products > span:last-child {
    width:
        30px;

    height:
        30px;

    flex:
        0 0
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #FFFFFF;

    color:
        #330456;

    font-size:
        14px;
}


.site-whatsapp-panel__products:hover {
    border-color:
        rgba(51, 4, 86, .30);

    background:
        #FFFFFF;

    transform:
        translateY(-1px);
}



/* ==========================================================================
   WHATSAPP CHANNELS
   ========================================================================== */

.site-whatsapp-panel__channels {
    display:
        grid;

    gap:
        7px;
}


.site-whatsapp-channel {
    min-height:
        60px;

    display:
        grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        28px;

    align-items:
        center;

    gap:
        11px;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(37, 211, 102, .32);

    border-radius:
        11px;

    background:
        rgba(37, 211, 102, .045);

    color:
        #16181B;

    text-decoration:
        none;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}


.site-whatsapp-channel:hover {
    border-color:
        rgba(37, 211, 102, .72);

    background:
        rgba(37, 211, 102, .075);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(22, 24, 27, .06);
}



/* ==========================================================================
   CHANNEL ICON
   ========================================================================== */

.site-whatsapp-channel__icon {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #25D366;

    color:
        #FFFFFF;
}


.site-whatsapp-channel__icon svg {
    width:
        21px;

    height:
        21px;

    fill:
        currentColor;
}



/* ==========================================================================
   CHANNEL CONTENT
   ========================================================================== */

.site-whatsapp-channel__content {
    min-width:
        0;
}


.site-whatsapp-channel__content small {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #858A90;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.site-whatsapp-channel__content strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #16181B;

    font-size:
        11px;

    font-weight:
        650;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}



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

.site-whatsapp-channel__arrow {
    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #FFFFFF;

    color:
        #330456;

    font-size:
        18px;

    line-height:
        1;

    transition:
        background-color 160ms ease,
        color 160ms ease;
}


.site-whatsapp-channel:hover
.site-whatsapp-channel__arrow {
    background:
        #25D366;

    color:
        #FFFFFF;
}



/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-whatsapp-panel__footer {
    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0
        20px;

    border-top:
        1px solid
        #D9DBDE;

    background:
        #FAFAFB;

    color:
        #858A90;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.site-whatsapp-panel__status {
    width:
        7px;

    height:
        7px;

    flex:
        0 0
        7px;

    border-radius:
        50%;

    background:
        #25D366;
}



/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes ferrodeiWhatsappIn {

    from {

        opacity:
            0;

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

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}



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

@media (max-width: 520px) {

    .site-whatsapp-widget {
        right:
            max(
                14px,
                env(safe-area-inset-right)
            );

        bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }


    .site-whatsapp {
        width:
            56px;

        height:
            56px;

        flex-basis:
            56px;
    }


    .site-whatsapp__icon--whatsapp {
        width:
            29px;

        height:
            29px;
    }


    .site-whatsapp-panel {
        width:
            calc(100vw - 28px);

        max-width:
            370px;

        border-radius:
            16px;
    }


    .site-whatsapp-panel__header {
        min-height:
            72px;

        padding:
            14px;
    }


    .site-whatsapp-panel__body {
        padding:
            17px;
    }


    .site-whatsapp-panel__footer {
        padding:
            0
            17px;
    }

}



/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .site-whatsapp-panel {
        animation:
            none;
    }


    .site-whatsapp,
    .site-whatsapp__icon,
    .site-whatsapp-panel__products,
    .site-whatsapp-channel,
    .site-whatsapp-channel__arrow,
    .site-whatsapp-panel__close {
        transition:
            none;
    }

}