/* =====================================================
   AB WhatsApp Button + Scroll to Top  v1.2
   Side by side layout
   abhishekbandhej.in
   ===================================================== */

/* ── Outer wrapper ────────────────────────────────── */
.ab-wa-wrap {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

/* ── Buttons row — side by side ───────────────────── */
.ab-btn-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

/* ── Scroll to Top button ─────────────────────────── */
.ab-stt-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fdf8f2;
    border: 1.5px solid rgba(110,36,28,0.30) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(30,21,16,0.14);
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.22s ease,
                background 0.22s ease,
                opacity 0.30s ease;
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
}

.ab-stt-btn.ab-stt-btn--visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.ab-stt-btn:hover {
    background: #6e241c;
    border-color: #6e241c !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(110,36,28,0.30);
}

.ab-stt-btn:hover .ab-stt-icon {
    stroke: #e8d5b0;
}

.ab-stt-btn:active { transform: scale(0.94); }

.ab-stt-icon {
    width: 18px;
    height: 18px;
    stroke: #6e241c;
    transition: stroke 0.22s ease;
    flex-shrink: 0;
}

/* ── WhatsApp Tooltip ─────────────────────────────── */
.ab-wa-tooltip {
    position: relative;
    background: #075E54;
    color: #fff;
    font-family: 'Tenor Sans', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    padding: 10px 16px;
    border-radius: 12px 12px 0 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 18px rgba(0,0,0,0.20);
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.ab-wa-tooltip.ab-wa-tooltip--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ab-wa-tooltip-arrow {
    position: absolute;
    bottom: -7px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #075E54;
}

/* ── WhatsApp Main button ─────────────────────────── */
.ab-wa-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: all;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.22s ease,
                background 0.22s ease;
    outline: none;
}

.ab-wa-btn:hover {
    background: #20ba59;
    transform: scale(1.10) translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,211,102,0.55), 0 4px 12px rgba(0,0,0,0.18);
    text-decoration: none !important;
}

.ab-wa-btn:active { transform: scale(0.96); }

.ab-wa-icon {
    width: 30px;
    height: 30px;
    fill: #fff;
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* ── Pulse ring ───────────────────────────────────── */
.ab-wa-pulse {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2.5px solid rgba(37,211,102,0.55);
    animation: ab-wa-pulse 2.4s cubic-bezier(0.22,1,0.36,1) infinite;
    pointer-events: none;
}

@keyframes ab-wa-pulse {
    0%   { transform: scale(1);    opacity: 0.75; }
    70%  { transform: scale(1.55); opacity: 0;    }
    100% { transform: scale(1.55); opacity: 0;    }
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
    .ab-wa-wrap  { bottom: 20px; right: 16px; }
    .ab-btn-row  { gap: 8px; }
    .ab-wa-btn   { width: 54px; height: 54px; }
    .ab-wa-icon  { width: 26px; height: 26px; }
    .ab-stt-btn  { width: 40px; height: 40px; }
    .ab-stt-icon { width: 16px; height: 16px; }
    .ab-wa-tooltip { font-size: 11px; padding: 8px 13px; }
}