/* Floating WhatsApp button. */

.whatsapp-float {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: var(--z-float);
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    background: #25D366;
    color: var(--c-white);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease-out);
}
.whatsapp-float:hover { transform: scale(1.08); }

/*
 * Hidden while the mobile drawer is open.
 *
 * The drawer sets .is-locked on <body>, so no JavaScript is needed here.
 * This is not only a tidiness fix: .header is position:sticky with a z-index,
 * which makes it a stacking context, so the drawer's z-index:200 only applies
 * INSIDE the header. This button lives at body level, so its z-index:150 beats
 * the header's 100 and it paints over the open drawer — including the
 * "Get a Quote" button. The drawer already carries phone and email links, so
 * hiding it is the right answer rather than escalating z-indexes.
 */
body.is-locked .whatsapp-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Hidden while the footer is on screen — see initFloatVisibility() in core.js.
   Kept in the DOM and simply faded out so it returns on scroll up. */
.whatsapp-float.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(.8) translateY(8px);
    pointer-events: none;
}
.whatsapp-float {
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}