/* =============================================================================
   Brixies WhatsApp Sticky Button
   Colors / geometry via CSS custom properties:
     --wa-btn-bg    button background (default WhatsApp green)
     --wa-icon-fg   SVG icon color
     --wa-bottom    distance from bottom edge
     --wa-side      distance from left/right edge
   ============================================================================= */

/* ── Root container ──────────────────────────────────────────────────────────── */
.brixies-wa {
    position   : fixed;
    bottom     : var(--wa-bottom, 24px);
    z-index    : 99998;
    display    : flex;
    align-items: center;
    gap        : 10px;
    /* Hidden until JS adds --visible modifier */
    opacity    : 0;
    transform  : scale(0.7) translateY(10px);
    pointer-events: none;
    transition : opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                 transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}

.brixies-wa--visible {
    opacity       : 1;
    transform     : scale(1) translateY(0);
    pointer-events: auto;
}

/* ── Side positioning ────────────────────────────────────────────────────────── */
.brixies-wa--bottom-right {
    right: var(--wa-side, 24px);
    flex-direction: row-reverse; /* tooltip left of button */
}

.brixies-wa--bottom-left {
    left: var(--wa-side, 24px);
    flex-direction: row; /* tooltip right of button */
}

/* ── Size variants ───────────────────────────────────────────────────────────── */
.brixies-wa--sm .brixies-wa__link { width: 44px; height: 44px; }
.brixies-wa--sm .brixies-wa__icon svg { width: 22px; height: 22px; }

.brixies-wa--md .brixies-wa__link { width: 56px; height: 56px; }
.brixies-wa--md .brixies-wa__icon svg { width: 28px; height: 28px; }

.brixies-wa--lg .brixies-wa__link { width: 68px; height: 68px; }
.brixies-wa--lg .brixies-wa__icon svg { width: 34px; height: 34px; }

/* ── Link (the circle button) ────────────────────────────────────────────────── */
.brixies-wa__link {
    position     : relative;
    display      : flex;
    align-items  : center;
    justify-content: center;
    border-radius: 50%;
    background   : var(--wa-btn-bg, #25d366);
    color        : var(--wa-icon-fg, #fff);
    box-shadow   : 0 4px 20px rgba(37, 211, 102, 0.45);
    transition   : transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink  : 0;
    text-decoration: none;
}

.brixies-wa__link:hover {
    transform : scale(1.08);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

.brixies-wa__link:active { transform: scale(0.96); }

/* ── Icon ────────────────────────────────────────────────────────────────────── */
.brixies-wa__icon {
    display     : flex;
    align-items : center;
    justify-content: center;
    color       : var(--wa-icon-fg, #fff);
    position    : relative;
    z-index     : 1;
}

.brixies-wa__icon svg {
    display: block;
}

/* ── Pulse rings ─────────────────────────────────────────────────────────────── */
.brixies-wa__pulse {
    position     : absolute;
    inset        : 0;
    border-radius: 50%;
    background   : var(--wa-btn-bg, #25d366);
    opacity      : 0.5;
    animation    : brixies-wa-pulse 2s ease-out infinite;
}

.brixies-wa__pulse--2 {
    animation-delay: 0.6s;
    opacity: 0.3;
}

/* ── Close button ────────────────────────────────────────────────────────────── */
.brixies-wa__close {
    position     : absolute;
    top          : -5px;
    right        : -5px;
    width        : 20px;
    height       : 20px;
    border-radius: 50%;
    background   : #1e293b;
    color        : #f1f5f9;
    border       : 2px solid #fff;
    display      : flex;
    align-items  : center;
    justify-content: center;
    cursor       : pointer;
    padding      : 0;
    z-index      : 2;
    transition   : background 0.15s, transform 0.15s;
    flex-shrink  : 0;
    line-height  : 1;
}

.brixies-wa__close:hover {
    background: #ef4444;
    transform : scale(1.15);
}

.brixies-wa__close svg {
    display: block;
    flex-shrink: 0;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────────── */
.brixies-wa__tooltip {
    background   : #1e293b;
    color        : #f8fafc;
    font-size    : 13px;
    font-weight  : 500;
    line-height  : 1.3;
    white-space  : nowrap;
    padding      : 7px 13px;
    border-radius: 8px;
    box-shadow   : 0 4px 16px rgba(0, 0, 0, 0.18);
    opacity      : 0;
    transform    : translateX(0) scale(0.92);
    transition   : opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    position     : relative;
}

.brixies-wa__tooltip::after {
    content      : '';
    position     : absolute;
    top          : 50%;
    transform    : translateY(-50%);
    border       : 6px solid transparent;
}

/* Arrow pointing right (tooltip is left of button) */
.brixies-wa--bottom-right .brixies-wa__tooltip::after {
    right       : -11px;
    border-left-color: #1e293b;
}

/* Arrow pointing left (tooltip is right of button) */
.brixies-wa--bottom-left .brixies-wa__tooltip::after {
    left        : -11px;
    border-right-color: #1e293b;
}

.brixies-wa:hover .brixies-wa__tooltip {
    opacity  : 1;
    transform: scale(1);
}

/* ── Display modifiers ───────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    .brixies-wa--hide-desktop { display: none !important; }
}

@media (max-width: 768px) {
    .brixies-wa--hide-mobile { display: none !important; }

    /* Smaller button + closer to edge on mobile */
    .brixies-wa--md .brixies-wa__link { width: 50px; height: 50px; }
    .brixies-wa--md .brixies-wa__icon svg { width: 24px; height: 24px; }
    .brixies-wa--lg .brixies-wa__link { width: 58px; height: 58px; }
    .brixies-wa--lg .brixies-wa__icon svg { width: 28px; height: 28px; }

    /* Hide tooltip on mobile (no hover) */
    .brixies-wa__tooltip { display: none; }
}

/* ── Animations ──────────────────────────────────────────────────────────────── */
@keyframes brixies-wa-pulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}