/* ── WhatsApp Buttons Pro — Frontend ───────────────────────────────────────── */

/* Position groups */
.wab-group {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* offset from edge */
    --wab-offset: 20px;
}

.wab-pos-bottom-right  { bottom: var(--wab-offset); right:  var(--wab-offset); align-items: flex-end; }
.wab-pos-bottom-left   { bottom: var(--wab-offset); left:   var(--wab-offset); align-items: flex-start; }
.wab-pos-bottom-center {
    bottom: var(--wab-offset);
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

/* Button */
.wab-button {
    --wab-bg: #25D366;
    --wab-fg: #ffffff;

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 14px;
    background: var(--wab-bg);
    color: var(--wab-fg);
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.14);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    outline: none;

    /* entrance animation */
    animation: wab-pop-in .45s cubic-bezier(.34,1.56,.64,1) both;

    transition:
        box-shadow .2s ease,
        transform  .2s ease,
        filter     .15s ease;
}

.wab-button:hover {
    text-decoration: none;
    color: var(--wab-fg);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.16);
    filter: brightness(1.07);
}

.wab-button:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Icon wrapper — pulse ring */
.wab-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.wab-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    animation: wab-pulse 2.2s ease-out infinite;
}

.wab-icon svg {
    position: relative;
    z-index: 1;
}

.wab-label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Entrance keyframe */
@keyframes wab-pop-in {
    0%   { opacity: 0; transform: scale(.6) translateY(16px); }
    100% { opacity: 1; transform: scale(1)  translateY(0);    }
}

/* Stagger siblings */
.wab-group .wab-button:nth-child(1) { animation-delay: .05s; }
.wab-group .wab-button:nth-child(2) { animation-delay: .15s; }
.wab-group .wab-button:nth-child(3) { animation-delay: .25s; }
.wab-group .wab-button:nth-child(4) { animation-delay: .35s; }
.wab-group .wab-button:nth-child(5) { animation-delay: .45s; }

/* Pulse ring */
@keyframes wab-pulse {
    0%   { transform: scale(1);    opacity: .6; }
    70%  { transform: scale(1.55); opacity: 0;  }
    100% { transform: scale(1.55); opacity: 0;  }
}

/* ── Mobile tweaks ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wab-group { --wab-offset: 14px; gap: 10px; }

    .wab-button {
        padding: 10px 16px 10px 12px;
        font-size: 13px;
    }
}