/*
 * WAP Floating Contact — Frontend Styles
 * Loaded on every page of the site.
 * All positioning, sizing, colours and animations are overridden at runtime
 * by inline <style> tags generated from saved settings (see frontend.js).
 * This file provides structural rules that never change.
 * Author: SA ZAFAR
 */

/* ─── Stack wrapper ──────────────────────────────────────────────────────── */
#wap-fc-stack {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    /* position_h, position_v, offset_h, offset_v — set by inline style */
}

/* ─── Individual button ──────────────────────────────────────────────────── */
.wap-fc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, filter .25s ease;
    /* width, height, background, box-shadow — set by inline style */
}

.wap-fc-btn:hover {
    transform: scale(1.12);
    filter: brightness(1.08);
}

.wap-fc-btn svg {
    display: block;
    flex-shrink: 0;
    /* width, height, fill — set by inline style */
}

/* ─── Tooltip label ──────────────────────────────────────────────────────── */
.wap-fc-label {
    position: absolute;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    /* side (left/right) and transform direction — set by inline style */
}

.wap-fc-btn:hover .wap-fc-label {
    opacity: 1;
    transform: translateX(0) !important;
}

/* ─── Pulse animation ────────────────────────────────────────────────────── */
@keyframes wap-fc-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    70%  { transform: scale(1.65); opacity: 0;  }
    100% { transform: scale(1.65); opacity: 0;  }
}

/* The ::after pseudo is added per-button via inline style when pulse is on */
.wap-fc-btn.wap-fc-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: wap-fc-pulse 2s ease-out infinite;
    pointer-events: none;
    /* background colour — set by inline style */
}

/* ─── Responsive — overridden by plugin settings ─────────────────────────── */
/* These are placeholder rules; the plugin adds @media blocks via inline <style> */