/* WA Sticky Pro — Frontend Button CSS */

#wa-sticky-pro {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
    overflow: visible;
}

#wa-sticky-pro:hover {
    transform: scale(1.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    text-decoration: none;
}

/* ── Pulse ring ──────────────────────────────────────────────────────────── */
#wa-sticky-pro.wasp-pulse::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    opacity: .5;
    animation: wasp-pulse-anim 2s ease-out infinite;
}

@keyframes wasp-pulse-anim {
    0%   { transform: scale(1);   opacity: .5; }
    80%  { transform: scale(1.6); opacity: 0;  }
    100% { transform: scale(1.6); opacity: 0;  }
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.wasp-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    transform: translateY(-50%) translateX(6px);
}

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

#wa-sticky-pro:hover .wasp-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ── Entrance Animations ─────────────────────────────────────────────────── */
.wasp-anim-bounce  { animation: wasp-bounce  .8s cubic-bezier(.36,.07,.19,.97) .3s both; }
.wasp-anim-fade    { animation: wasp-fade    .6s ease .3s both; }
.wasp-anim-slide-up    { animation: wasp-slide-up    .5s cubic-bezier(.22,1,.36,1) .3s both; }
.wasp-anim-slide-left  { animation: wasp-slide-left  .5s cubic-bezier(.22,1,.36,1) .3s both; }
.wasp-anim-zoom    { animation: wasp-zoom    .5s cubic-bezier(.34,1.56,.64,1) .3s both; }

@keyframes wasp-bounce {
    0%,100% { transform: translateY(0); }
    20%     { transform: translateY(-18px); }
    40%     { transform: translateY(0); }
    60%     { transform: translateY(-8px); }
    80%     { transform: translateY(0); }
}
@keyframes wasp-fade {
    from { opacity:0; } to { opacity:1; }
}
@keyframes wasp-slide-up {
    from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); }
}
@keyframes wasp-slide-left {
    from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); }
}
@keyframes wasp-zoom {
    from { opacity:0; transform:scale(0.4); } to { opacity:1; transform:scale(1); }
}

/* ── Delay shown state ───────────────────────────────────────────────────── */
.wasp-delay-shown {
    animation: wasp-zoom .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Device visibility ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .wasp-no-desktop { display: none !important; }
}
@media (max-width: 767px) {
    .wasp-no-mobile  { display: none !important; }
    .wasp-tooltip    { display: none; }
}