/* ==========================================================================
   WebArt — Floating Actions
   WhatsApp + Back to Top
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Shared
       ---------------------------------------------------------------------- */

    --wa-floating-size:
        60px;

    --wa-floating-offset:
        30px;

    --wa-floating-shadow:
        0 10px 28px
        rgba(7, 27, 51, 0.18);


    /* ----------------------------------------------------------------------
       WhatsApp
       ---------------------------------------------------------------------- */

    --wa-whatsapp-color:
        #25d366;

    --wa-whatsapp-color-hover:
        #20bd5a;


    /* ----------------------------------------------------------------------
       Back to Top
       Change these per project if necessary
       ---------------------------------------------------------------------- */

    --wa-back-top-bg:
        #ffffff;

    --wa-back-top-border:
        var(--wa-color-accent);

    --wa-back-top-icon:
        var(--wa-color-primary);

    --wa-back-top-hover-bg:
        var(--wa-color-accent);

    --wa-back-top-hover-border:
        var(--wa-color-accent);

    --wa-back-top-hover-icon:
        #ffffff;
}


/* ==========================================================================
   Shared
   ========================================================================== */

.wa-whatsapp-float,
.wa-back-to-top {
    position:
        fixed;

    bottom:
        calc(
            var(--wa-floating-offset)
            + env(safe-area-inset-bottom, 0px)
        );

    z-index:
        900;

    width:
        var(--wa-floating-size);

    height:
        var(--wa-floating-size);

    box-sizing:
        border-box;

    border-radius:
        50%;

    box-shadow:
        var(--wa-floating-shadow);

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   WhatsApp
   ========================================================================== */

.wa-whatsapp-float {
    left:
        calc(
            var(--wa-floating-offset)
            + env(safe-area-inset-left, 0px)
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff;

    background:
        var(--wa-whatsapp-color);

    text-decoration:
        none;

    opacity:
        0;

    transform:
        translateY(10px)
        scale(0.9);

    animation:
        wa-floating-in
        500ms
        ease
        700ms
        forwards;

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


/* --------------------------------------------------------------------------
   WhatsApp Icon
   -------------------------------------------------------------------------- */

.wa-whatsapp-float__icon {
    display:
        block;

    width:
        31px;

    height:
        31px;

    flex:
        0 0 auto;

    fill:
        currentColor;

    color:
        currentColor;
}


/* --------------------------------------------------------------------------
   WhatsApp Hover / Focus
   -------------------------------------------------------------------------- */

.wa-whatsapp-float:hover,
.wa-whatsapp-float:focus-visible {
    color:
        #ffffff;

    background:
        var(--wa-whatsapp-color-hover);

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 14px 32px
        rgba(7, 27, 51, 0.22);
}


.wa-whatsapp-float:focus-visible {
    outline:
        3px solid
        rgba(37, 211, 102, 0.25);

    outline-offset:
        4px;
}


/* ==========================================================================
   WhatsApp Tooltip
   ========================================================================== */

.wa-whatsapp-tooltip {
    position:
        absolute;

    left:
        calc(100% + 12px);

    top:
        50%;

    display:
        flex;

    align-items:
        center;

    min-height:
        36px;

    padding:
        7px
        13px;

    color:
        var(--wa-color-primary);

    background:
        #ffffff;

    border:
        1px solid
        rgba(7, 27, 51, 0.07);

    border-radius:
        18px;

    box-shadow:
        0 7px 22px
        rgba(7, 27, 51, 0.13);

    font-family:
        var(--wa-font-primary);

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease;

    transition-delay:
        0s;
}


/* Tooltip arrow */

.wa-whatsapp-tooltip::before {
    content:
        "";

    position:
        absolute;

    left:
        -6px;

    top:
        50%;

    width:
        12px;

    height:
        12px;

    background:
        #ffffff;

    border-left:
        1px solid
        rgba(7, 27, 51, 0.07);

    border-bottom:
        1px solid
        rgba(7, 27, 51, 0.07);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* Show tooltip */

.wa-whatsapp-float:hover
.wa-whatsapp-tooltip,

.wa-whatsapp-float:focus-visible
.wa-whatsapp-tooltip {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(0, -50%);

    transition-delay:
        350ms;
}


/* ==========================================================================
   Back to Top
   ========================================================================== */

.wa-back-to-top {
    right:
        calc(
            var(--wa-floating-offset)
            + env(safe-area-inset-right, 0px)
        );

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    color:
        var(--wa-back-top-icon);

    background:
        var(--wa-back-top-bg);

    border:
        1px solid
        var(--wa-back-top-border);

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(10px)
        scale(0.9);

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease,
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}


/* --------------------------------------------------------------------------
   Back to Top Visible
   -------------------------------------------------------------------------- */

.wa-back-to-top.is-visible {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

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


/* --------------------------------------------------------------------------
   Back to Top Icon
   -------------------------------------------------------------------------- */

.wa-back-to-top__icon {
    display:
        block;

    width:
        23px;

    height:
        23px;

    fill:
        currentColor;

    color:
        currentColor;
}


/* --------------------------------------------------------------------------
   Back to Top Hover / Focus
   -------------------------------------------------------------------------- */

.wa-back-to-top:hover,
.wa-back-to-top:focus-visible {
    color:
        var(--wa-back-top-hover-icon);

    background:
        var(--wa-back-top-hover-bg);

    border-color:
        var(--wa-back-top-hover-border);

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 14px 32px
        rgba(226, 29, 43, 0.18);
}


.wa-back-to-top:focus-visible {
    outline:
        3px solid
        rgba(226, 29, 43, 0.20);

    outline-offset:
        4px;
}


.wa-back-to-top:active {
    transform:
        translateY(0)
        scale(0.97);
}


/* ==========================================================================
   Mobile Menu Open
   Hide both floating actions
   ========================================================================== */

body.has-open-menu
.wa-whatsapp-float,

body.has-open-menu
.wa-back-to-top {
    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transform:
        translateY(10px)
        scale(0.9) !important;
}


/* ==========================================================================
   Entrance Animation
   ========================================================================== */

@keyframes wa-floating-in {

    to {
        opacity:
            1;

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

}


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

@media (max-width: 767px) {

    :root {
        --wa-floating-size:
            48px;

        --wa-floating-offset:
            18px;
    }


    .wa-whatsapp-float__icon {
        width:
            25px;

        height:
            25px;
    }


    .wa-back-to-top__icon {
        width:
            19px;

        height:
            19px;
    }


    /*
     * We remove the tooltip on mobile.
     * Touch interfaces do not need a hover label.
     */

    .wa-whatsapp-tooltip {
        display:
            none;
    }

}


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

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

    .wa-whatsapp-float {
        animation:
            none;

        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }


    .wa-back-to-top,
    .wa-whatsapp-tooltip {
        transition:
            none;
    }


    .wa-whatsapp-float:hover,
    .wa-whatsapp-float:focus-visible,
    .wa-back-to-top:hover,
    .wa-back-to-top:focus-visible,
    .wa-back-to-top:active {
        transform:
            none;
    }

}