/* ═══════════════════════════════════════════════════════════
   CONTACT FAB — Floating Action Button (Clean Rewrite)

   Universal: Green expandable 3-option FAB (WhatsApp, Call, Chat)
   Positioned bottom-right on ALL screen sizes.

   z-index hierarchy (closed):
     FAB trigger            : 9989
     Fly cart button        : 9990
     Fly cart backdrop      : 99991
     Fly cart panel         : 99992

   z-index hierarchy (open / .is-open):
     Backdrop               : 99994
     Options                : 99995
     Trigger                : 99996
   ═══════════════════════════════════════════════════════════ */


/* ── 1. Tawk.to Default Widget — INSTANT HIDE ────────────
   Hide the default Tawk bubble/iframe before JS loads.
   When user clicks Chat, Tawk_API.maximize() adds inline
   display:block which overrides these rules naturally. ──── */

iframe[title="chat widget"],
iframe[src*="tawk.to"],
#tawk-bubble-container,
#tawkchat-container,
#tawkchat-minified-wrapper,
.tawk-min-container,
.widget-visible iframe:not([style*="display: block"]) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Allow the maximized chat window through */
#tawkchat-container[style*="display: block"],
iframe[title="chat widget"][style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
}


/* ── 2. Legacy Desktop Elements — HIDDEN ─────────────────
   Old desktop pills from prior iterations. Hide them
   defensively in case any markup still references them. ─── */

.ppn-fab__desktop-wa,
.ppn-fab__desktop-chat,
.ppn-fab__desktop-bar {
    display: none;
}


/* ── 3. FAB Container ────────────────────────────────────── */

.ppn-fab__universal {
    display: block;
}


/* ── 4. Backdrop ─────────────────────────────────────────── */

.ppn-fab__backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ppn-fab__backdrop.is-open {
    z-index: 99994;
    opacity: 1;
    pointer-events: auto;
}


/* ── 5. Green Trigger Button ─────────────────────────────── */

.ppn-fab__trigger {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 9989;
    width: 48px;
    height: 48px;
    border-radius: var(--ppn-radius-circle);
    border: none;
    padding: 0;
    background: var(--ppn-wa);
    color: var(--ppn-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ppn-fab__trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
}

.ppn-fab__trigger:active {
    transform: scale(0.94);
}

/* Open state: dark bg, elevated z-index above fly cart */
.ppn-fab__trigger.is-open {
    z-index: 99996;
    background: var(--ppn-charcoal);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.ppn-fab__trigger.is-open:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}


/* ── 6. Trigger Icon Swap (chat <-> close X) ─────────────── */

.ppn-fab__trigger svg {
    width: 24px;
    height: 24px;
}

.ppn-fab__icon-default {
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ppn-fab__icon-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ppn-fab__trigger.is-open .ppn-fab__icon-default {
    opacity: 0;
    transform: rotate(90deg);
}

.ppn-fab__trigger.is-open .ppn-fab__icon-close {
    opacity: 1;
    transform: rotate(0deg);
}


/* ── 7. Options Container ────────────────────────────────── */

.ppn-fab__options {
    position: fixed;
    bottom: 80px;
    right: 14px;
    z-index: 9989;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}

.ppn-fab__options.is-open {
    z-index: 99995;
    pointer-events: auto;
}


/* ── 8. Individual Option Row (label + circle) ───────────── */

.ppn-fab__option {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* JS adds .is-visible with staggered transition-delay */
.ppn-fab__option.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


/* ── 9. Label Pill ───────────────────────────────────────── */

.ppn-fab__label {
    font-family: var(--ppn-font-heading, 'Inter', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ppn-dark);
    background: var(--ppn-white);
    padding: 6px 12px;
    border-radius: var(--ppn-radius-sm);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}


/* ── 10. Circle Buttons (shared base) ────────────────────── */

.ppn-fab__circle {
    width: 44px;
    height: 44px;
    border-radius: var(--ppn-radius-circle);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ppn-fab__circle svg {
    width: 22px;
    height: 22px;
}

.ppn-fab__circle:hover {
    transform: scale(1.1);
}

.ppn-fab__circle:active {
    transform: scale(0.92);
}


/* ── 11. Circle Variants ─────────────────────────────────── */

/* WhatsApp — green */
.ppn-fab__circle--wa {
    background: var(--ppn-wa);
    color: var(--ppn-white);
    box-shadow: 0 3px 12px rgba(37, 211, 102, 0.35);
}

/* Call — white with maroon border */
.ppn-fab__circle--call {
    background: var(--ppn-white);
    border: 2px solid var(--ppn-maroon, #960000);
    color: var(--ppn-maroon, #960000);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

/* Chat — maroon */
.ppn-fab__circle--chat {
    background: var(--ppn-maroon, #960000);
    color: var(--ppn-white);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}


/* ── 12. Mobile Adjustments ──────────────────────────────── */

@media (max-width: 768px) {
    .ppn-fab__trigger {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
    }
    .ppn-fab__trigger.is-open {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .ppn-fab__options {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .ppn-fab__trigger svg {
        width: 22px;
        height: 22px;
    }
}


/* ── 13. Reduced Motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ppn-fab__trigger,
    .ppn-fab__icon-default,
    .ppn-fab__icon-close,
    .ppn-fab__option,
    .ppn-fab__circle,
    .ppn-fab__backdrop {
        transition-duration: 0.01ms !important;
    }

    .ppn-fab__option {
        transition-delay: 0ms !important;
    }
}