/* ========================================
   Floating WhatsApp icon
======================================== */

.rt-whatsapp-float {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 50;

    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background-color: #25d366;
    color: #ffffff;

    box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
    text-decoration: none;
}

.rt-whatsapp-float svg {
    display: block;

    width: 32px;
    height: 32px;
}

.rt-whatsapp-float[aria-disabled="true"] {
    cursor: default;
}

.rt-whatsapp-float:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}

@media (hover: hover) {
    .rt-whatsapp-float[href]:hover {
        background-color: #1ebe5d;
    }
}

@media (min-width: 768px) {
    .rt-whatsapp-float {
        right: calc(24px + env(safe-area-inset-right, 0px));
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}