/* =========================================================
   TECNICHKOS WHATSAPP V5
========================================================= */

.tk-whatsapp {

    position:fixed;

    z-index:900;

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

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

    min-height:54px;

    display:inline-flex;

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

    gap:9px;

    padding:
        0 18px;

    border-radius:999px;

    background:#25D366;

    color:#fff !important;

    font-size:14px;

    font-weight:800;

    line-height:1;

    text-decoration:none;

    box-shadow:
        0 12px 35px
        rgba(7,17,31,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

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

.tk-whatsapp svg {

    width:25px;
    height:25px;

    flex:
        0 0 25px;

    fill:currentColor;
}


/* Desktop hover only */

@media (hover:hover) and (pointer:fine) {

    .tk-whatsapp:hover {

        transform:
            translateY(-3px);

        box-shadow:
            0 17px 40px
            rgba(7,17,31,.25);
    }
}


/* ---------------------------------------------------------
   PHONE
--------------------------------------------------------- */

@media (max-width:580px) {

    .tk-whatsapp {

        width:56px;
        height:56px;

        min-width:56px;
        min-height:56px;

        padding:0;

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

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

    .tk-whatsapp-label {

        position:absolute;

        width:1px;
        height:1px;

        padding:0;
        margin:-1px;

        overflow:hidden;

        clip:
            rect(
                0,
                0,
                0,
                0
            );

        white-space:nowrap;

        border:0;
    }

    .tk-whatsapp svg {

        width:28px;
        height:28px;
    }
}


/*
 * Quote Wizard has sticky bottom controls.
 * Move WhatsApp higher on those pages.
 */

@media (max-width:580px) {

    body:has(.quote-shell)
    .tk-whatsapp {

        bottom:
            calc(
                92px +
                env(safe-area-inset-bottom)
            );
    }
}


/*
 * Hide the button while the native mobile
 * navigation is open.
 */

body:has(.header.menu-open)
.tk-whatsapp {

    opacity:0;

    visibility:hidden;

    pointer-events:none;
}


/* Reduced motion */

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

    .tk-whatsapp {

        transition:none;
    }
}