/* ── Float Stack ── */
.float-stack {
    position: fixed;
    bottom: 28px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers both buttons on same axis */
    gap: 20px;
    /* increased from 12px to clear the pulse rings */
    z-index: 1000;
}

/* ── WhatsApp Button ── */
.wa-float {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    overflow: visible;
    /* keep visible so pulse can animate out */
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .38);
}

.wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .52);
}

.wa-float:active {
    transform: scale(.96);
}

/* ── Pulse Rings ── */
.wa-pulse,
.wa-pulse-2 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .5);
    animation: wa-pulse 2.2s ease-out infinite;
    pointer-events: none;
}

.wa-pulse-2 {
    animation-delay: .9s;
}

@keyframes wa-pulse {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }

    /* reduced from 1.9 → 1.6 */
}

/* ── Tooltip ── */
.wa-tooltip {
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: #1a1a1a;
    color: #fff;
    font-size: 12.5px;
    padding: 6px 11px;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
}

.wa-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #1a1a1a;
}

.wa-float:hover .wa-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ── Back to Top Button ── */
.btt-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a2a3a, #0d1b2a);
    border: 1.5px solid rgba(255, 255, 255, .15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.82);
    transition: opacity .3s ease,
        visibility .3s ease,
        transform .35s cubic-bezier(.34, 1.56, .64, 1),
        background .2s,
        box-shadow .2s;
    pointer-events: none;
    flex-shrink: 0;
    /* added — matches wa-float behaviour */
}

.btt-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.btt-btn:hover {
    background: linear-gradient(145deg, #243548, #152230);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
    transform: translateY(-2px) scale(1.06);
}

.btt-btn:active {
    transform: scale(.94);
}