/* ═══════════════════════════════════════════════════════════
   CONTACT FAB — Floating Action Button
   Mobile: Expandable 3-option FAB (WhatsApp, Call, Chat)
   Positioned ABOVE the fly cart button (which is at bottom:72px)
   Desktop: WhatsApp pill bottom-left
   Matches fly cart design: 48px circle, same shadow style
   ═══════════════════════════════════════════════════════════ */

/* ── Hide Tawk.to on mobile — our FAB replaces it ────────── */
@media (max-width: 768px) {
    #tawk-bubble-container,
    .tawk-min-container,
    iframe[title*="chat"] + div {
        display: none !important;
    }
}

/* ── Desktop: hide mobile FAB, show WhatsApp pill ────────── */
.ppn-fab__mobile {
    display: none;
}

.ppn-fab__desktop-wa {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9985;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 10px 16px;
    background: #25D366;
    color: #fff;
    border-radius: 100px;
    font-family: var(--ppn-font-heading, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.ppn-fab__desktop-wa:hover {
    background: #1fa855;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
}

.ppn-fab__desktop-wa svg {
    flex-shrink: 0;
}

/* ── Mobile (<=768px): show FAB, hide desktop pill ───────── */
@media (max-width: 768px) {
    .ppn-fab__desktop-wa {
        display: none;
    }

    .ppn-fab__mobile {
        display: block;
    }

    /* ── Backdrop — blurred like fly cart ─────────────── */
    .ppn-fab__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9988;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s, visibility 0s 0.25s;
    }

    .ppn-fab__backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.25s, visibility 0s;
    }

    /* ── Main trigger — same size as fly cart (48px), positioned ABOVE it ── */
    /* Fly cart is at bottom:72px right:14px (48px circle)
       FAB goes above: 72px + 48px + 12px gap = 132px from bottom */
    .ppn-fab__trigger {
        position: fixed;
        bottom: calc(132px + env(safe-area-inset-bottom, 0px));
        right: 14px;
        z-index: 9989;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: var(--ppn-maroon, #960000);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(150, 0, 0, 0.3),
                    0 2px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.25s;
        -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Icon swap: default shows chat, close shows X */
    .ppn-fab__icon-default {
        transition: opacity 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

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

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

    /* ── Options — expand ABOVE the trigger button ──── */
    .ppn-fab__options {
        position: fixed;
        bottom: calc(192px + env(safe-area-inset-bottom, 0px));
        right: 14px;
        z-index: 9989;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
        pointer-events: none;
    }

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

    /* ── Individual option row ─────────────────────── */
    .ppn-fab__option {
        display: flex;
        align-items: center;
        gap: 10px;
        opacity: 0;
        transform: translateY(12px) scale(0.88);
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ppn-fab__option.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* ── Label pill ────────────────────────────────── */
    .ppn-fab__label {
        font-family: var(--ppn-font-heading, 'Inter', sans-serif);
        font-size: 0.75rem;
        font-weight: 600;
        color: #fff;
        background: rgba(30, 20, 10, 0.8);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 6px 12px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* ── Circle buttons — match fly cart style (48px) ─ */
    .ppn-fab__circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
        flex-shrink: 0;
        transition: transform 0.15s, box-shadow 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

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

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

    /* WhatsApp */
    .ppn-fab__circle--wa {
        background: #25D366;
        color: #fff;
        box-shadow: 0 3px 12px rgba(37, 211, 102, 0.35);
    }

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

    /* Chat */
    .ppn-fab__circle--chat {
        background: #1C1C1C;
        color: #fff;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    }
}