/* whatsapp-widget.css - floating WhatsApp CTA (works with both Tailwind + legacy pages) */
:root {
    --wa-green: #25D366;
    --wa-green-dark: #1ebe5b;
    --wa-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

#wa-widget {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(28px, env(safe-area-inset-bottom));
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    pointer-events: none; /* only the button is clickable */
    width: max-content;
    max-width: calc(100svw - 18px - max(18px, env(safe-area-inset-left)));
    overflow: hidden;
    box-sizing: border-box;
    contain: layout paint;
}

#wa-widget * {
    box-sizing: border-box;
}

@supports not (width: 100svw) {
    #wa-widget {
        max-width: calc(100vw - 18px - max(18px, env(safe-area-inset-left)));
    }
}

#wa-widget .wa-pill {
    pointer-events: auto;
    max-width: min(340px, calc(100%));
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.92);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

#wa-widget .wa-pill strong {
    font-weight: 700;
    font-size: 13px;
}

#wa-widget .wa-pill p {
    margin: 4px 0 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
}

#wa-widget .wa-pill .wa-pill-actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

#wa-widget .wa-pill button {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
}

#wa-widget .wa-pill button:hover {
    background: rgba(255, 255, 255, 0.06);
}

#wa-widget .wa-btn {
    pointer-events: auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 0;
    background: var(--wa-green);
    box-shadow: var(--wa-shadow);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

#wa-widget .wa-btn:hover {
    background: var(--wa-green-dark);
    transform: translateY(-1px);
}

#wa-widget .wa-btn:active {
    transform: translateY(1px) scale(0.98);
}

#wa-widget .wa-btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

#wa-widget .wa-btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

@media (max-width: 420px) {
    #wa-widget {
        left: max(12px, env(safe-area-inset-left));
        bottom: max(16px, env(safe-area-inset-bottom));
        max-width: calc(100svw - 12px - max(12px, env(safe-area-inset-left)));
    }

    @supports not (width: 100svw) {
        #wa-widget {
            max-width: calc(100vw - 12px - max(12px, env(safe-area-inset-left)));
        }
    }
}