/* =================================================================
 * Tourwill — Floating WhatsApp Button
 * File: assets/css/components/whatsapp-fab.css
 *
 * Site-wide floating chat button. Designed to be helpful without
 * being noisy:
 *   • Compact circular icon (52px desktop, 50px mobile) — never a
 *     popup bubble that covers content
 *   • Fade-in 600ms AFTER the page loads (no layout shift)
 *   • Subtle outward pulse, opt-out from the editor + auto-off on
 *     prefers-reduced-motion
 *   • Hover label appears only on desktop (pointer: fine)
 *   • Respects iOS safe-area-inset-bottom + landscape rotation
 *   • Hidden on print, never blocks underlying clicks beyond its
 *     own footprint
 *
 * Scoped to .tw-wa-fab — nothing else touched.
 * ================================================================= */

.tw-wa-fab {
    /* Brand + tokens */
    --twfab-bg:        #25D366;
    --twfab-bg-hover:  #1ebe57;
    --twfab-fg:        #ffffff;
    --twfab-size:      56px;
    --twfab-shadow:    0 6px 18px rgba(37, 211, 102, 0.32), 0 2px 6px rgba(15, 23, 22, 0.18);
    --twfab-shadow-hv: 0 10px 28px rgba(37, 211, 102, 0.42), 0 3px 10px rgba(15, 23, 22, 0.22);
    --twfab-offset:    1.25rem;

    position: fixed;
    bottom: calc(var(--twfab-offset) + env(safe-area-inset-bottom, 0px));
    z-index: 9990;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    width: var(--twfab-size);
    height: var(--twfab-size);
    padding: 0;
    border-radius: 50%;
    background: var(--twfab-bg);
    color: var(--twfab-fg);
    text-decoration: none;
    box-shadow: var(--twfab-shadow);
    cursor: pointer;

    /* Entry animation — runs once, after page paint, no layout shift */
    opacity: 0;
    transform: translateY(20px);
    animation: tw-wa-fab-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        width 0.22s ease,
        border-radius 0.22s ease;
}

/* Position modifiers */
.tw-wa-fab--right { right: var(--twfab-offset); }
.tw-wa-fab--left  { left:  var(--twfab-offset); }

/* Hover / focus */
.tw-wa-fab:hover,
.tw-wa-fab:focus-visible {
    background: var(--twfab-bg-hover);
    box-shadow: var(--twfab-shadow-hv);
    transform: translateY(-2px);
}
.tw-wa-fab:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.35);
    outline-offset: 4px;
}
.tw-wa-fab:active {
    transform: translateY(0) scale(0.97);
}

/* Icon */
.tw-wa-fab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
}
.tw-wa-fab__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Pulse ring — pure CSS, layered under the button via ::before */
.tw-wa-fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: var(--twfab-bg);
    z-index: -1;
    opacity: 0;
}
.tw-wa-fab--pulse .tw-wa-fab__pulse {
    animation: tw-wa-fab-pulse 2.2s ease-out 1.2s infinite;
}

/* Desktop hover label — slides out from the side of the icon.
   The label is invisible by default. On hover/focus the button
   pill-expands and reveals the label inline. Cleaner than a tooltip
   bubble and doesn't cover content. */
.tw-wa-fab__label {
    display: none; /* hidden on mobile by default — see media query */
    white-space: nowrap;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    transition:
        max-width 0.22s ease,
        opacity 0.18s ease 0.05s,
        margin 0.22s ease,
        padding 0.22s ease;
    padding: 0;
}

/* Desktop: enable the expanding pill label */
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {

    .tw-wa-fab--has-tip .tw-wa-fab__label {
        display: inline-block;
    }

    /* Right-side button: label is to the LEFT of the icon */
    .tw-wa-fab--right.tw-wa-fab--has-tip:hover .tw-wa-fab__label,
    .tw-wa-fab--right.tw-wa-fab--has-tip:focus-visible .tw-wa-fab__label {
        max-width: 220px;
        opacity: 1;
        padding-right: 0.85rem;
    }

    /* Left-side button: label is to the RIGHT of the icon */
    .tw-wa-fab--left.tw-wa-fab--has-tip {
        flex-direction: row-reverse;
    }
    .tw-wa-fab--left.tw-wa-fab--has-tip:hover .tw-wa-fab__label,
    .tw-wa-fab--left.tw-wa-fab--has-tip:focus-visible .tw-wa-fab__label {
        max-width: 220px;
        opacity: 1;
        padding-left: 0.85rem;
    }

    /* Pill-expansion: the button becomes wider so the label fits inline */
    .tw-wa-fab--has-tip:hover,
    .tw-wa-fab--has-tip:focus-visible {
        width: auto;
        min-width: var(--twfab-size);
        border-radius: 999px;
        padding-inline: 0.4rem;
    }
}

/* Mobile-friendly sizing tweaks */
@media (max-width: 760px) {
    .tw-wa-fab {
        --twfab-size:    52px;
        --twfab-offset:  0.9rem;
    }
    .tw-wa-fab__icon {
        width: 26px;
        height: 26px;
    }
}

/* Extra-tight tweaks for very small phones */
@media (max-width: 360px) {
    .tw-wa-fab {
        --twfab-size:   48px;
        --twfab-offset: 0.75rem;
    }
    .tw-wa-fab__icon { width: 24px; height: 24px; }
}

/* Reduced motion — no entry animation, no pulse, no lift */
@media (prefers-reduced-motion: reduce) {
    .tw-wa-fab {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .tw-wa-fab:hover,
    .tw-wa-fab:focus-visible {
        transform: none;
    }
    .tw-wa-fab--pulse .tw-wa-fab__pulse {
        animation: none;
    }
    .tw-wa-fab,
    .tw-wa-fab__label {
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }
}

/* Hide on print */
@media print {
    .tw-wa-fab { display: none !important; }
}

/* Keyframes */
@keyframes tw-wa-fab-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tw-wa-fab-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.55); opacity: 0;    }
    100% { transform: scale(1.55); opacity: 0;    }
}