/* ════════════════════════════════════════════════════════════════
   WHATSAPP-FLOAT.CSS — Floating WhatsApp Button Component
   Prefix: .wa-float
   Mirrors .stt: same size/bottom, opposite inline edge
   RTL-safe via inset-inline-start logical property
════════════════════════════════════════════════════════════════ */

.wa-float {
    position: fixed;
    bottom: 1.75rem;
    inset-inline-start: 1.75rem;
    z-index: 999;

    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    text-decoration: none;

    background: #25D366;
    color: #fff;

    box-shadow: 0 4px 18px rgba(37, 211, 102, .36),
                0 1px  4px rgba(0, 0, 0, .12);

    opacity: 0;
    transform: scale(.5);
    animation: wa-in 380ms cubic-bezier(.34, 1.56, .64, 1) 600ms forwards;

    touch-action: manipulation;
    will-change: transform, opacity;
}

@keyframes wa-in {
    to { opacity: 1; transform: scale(1); }
}

/* Pulse ring */
.wa-float::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: wa-pulse 2.4s ease-out 1s infinite;
    pointer-events: none;
}

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

.wa-float:hover {
    background: #1da851;
    color: #fff;
    box-shadow: 0 6px 24px rgba(37, 211, 102, .48),
                0 2px  6px rgba(0, 0, 0, .14);
    transform: translateY(-3px) scale(1.08);
    transition: background 180ms ease,
                box-shadow 180ms ease,
                transform  200ms cubic-bezier(.34, 1.56, .64, 1);
}
.wa-float:active  { transform: translateY(0) scale(.95); }
.wa-float:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Tooltip */
.wa-float__tip {
    position: absolute;
    inset-inline-start: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);

    white-space: nowrap;
    background: rgba(15, 15, 15, .82);
    color: #fff;
    font-size: .7rem;
    line-height: 1.4;
    font-family: var(--font-ui, system-ui, sans-serif);
    padding: .3rem .7rem;
    border-radius: 6px;

    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

html[dir="rtl"] .wa-float__tip {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 10px);
    transform: translateY(-50%) translateX(6px);
}

.wa-float:hover .wa-float__tip,
.wa-float:focus-visible .wa-float__tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 575px) {
    .wa-float {
        width: 42px; height: 42px;
        bottom: 1.25rem;
        inset-inline-start: 1rem;
    }
    .wa-float__tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float          { animation: none; opacity: 1; transform: scale(1); }
    .wa-float::before  { animation: none; }
    .wa-float:hover    { transform: none; }
    .wa-float__tip     { transition: none; }
}