/* ══════════════════════════════════════════════
   Floating support launcher — home, pricing, merchant dashboard

   Own `vl-sfab-*` namespace on purpose. The setup wizard has its own button
   styled by dashboard.css under `.vl-wa-*`, and dashboard.css is also loaded on
   the merchant dashboard — sharing a namespace would put the two rule sets in
   conflict. Nothing here overrides an existing selector.

   Every custom property carries a literal fallback, because the theme pages do
   not load dashboard.css and so define none of them.
══════════════════════════════════════════════ */

.vl-sfab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

.vl-sfab-btn {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #25d366;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vl-sfab-btn:hover  { background: #1ebe5a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.vl-sfab-btn:active { transform: translateY(0); }
.vl-sfab-btn:focus-visible { outline: 3px solid var(--c-accent, #6366f1); outline-offset: 3px; }

/* Email-only setups drop the WhatsApp branding entirely. */
.vl-sfab--mail .vl-sfab-btn       { background: var(--c-text, #111827); }
.vl-sfab--mail .vl-sfab-btn:hover { background: #000; }
.vl-sfab--mail .vl-sfab-head      { background: var(--c-text, #111827); }

/* The mark swaps for a close cross while the panel is open. */
.vl-sfab-btn .vl-sfab-ico-close { display: none; }
.vl-sfab-btn.is-open .vl-sfab-ico-open  { display: none; }
.vl-sfab-btn.is-open .vl-sfab-ico-close { display: block; }

.vl-sfab-panel {
    width: 290px;
    max-width: calc(100vw - 48px);
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    overflow: hidden;
    text-align: left;
}
.vl-sfab-panel[hidden] { display: none; }

.vl-sfab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: #25d366;
    color: #fff;
}
.vl-sfab-title { font-size: 14px; font-weight: 700; }
.vl-sfab-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: .85;
}
.vl-sfab-close:hover { opacity: 1; }

.vl-sfab-body { padding: 16px 14px; }
.vl-sfab-lede {
    font-size: 13px;
    color: var(--c-text-2, #4b5563);
    margin: 0 0 12px;
}
.vl-sfab-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text, #111827);
    letter-spacing: .01em;
}
/* An address is longer than a phone number and must not blow out the panel. */
.vl-sfab-val--mail { font-size: 14px; word-break: break-all; }
.vl-sfab-note {
    font-size: 11.5px;
    color: var(--c-text-3, #9ca3af);
    margin: 2px 0 14px;
}
.vl-sfab-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    background: #25d366;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    box-sizing: border-box;
}
.vl-sfab-cta:hover  { background: #1ebe5a; color: #fff; }
.vl-sfab-cta:focus-visible { outline: 3px solid var(--c-accent, #6366f1); outline-offset: 2px; }

/* Email is secondary wherever WhatsApp is also offered. */
.vl-sfab-cta--mail {
    background: transparent;
    color: var(--c-text, #111827);
    border: 1px solid var(--c-border, #e5e7eb);
}
.vl-sfab-cta--mail:hover { background: var(--c-hover, #f3f4f6); color: var(--c-text, #111827); }
/* …unless it is the only channel, in which case it carries the panel. */
.vl-sfab--mail .vl-sfab-cta--mail { background: var(--c-text, #111827); color: #fff; border-color: transparent; }
.vl-sfab--mail .vl-sfab-cta--mail:hover { background: #000; color: #fff; }

.vl-sfab-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    color: var(--c-text-3, #9ca3af);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vl-sfab-or::before,
.vl-sfab-or::after { content: ''; flex: 1; height: 1px; background: var(--c-border, #e5e7eb); }

/* The merchant dashboard's toast occupies this exact corner (.vl-toast is fixed
   at bottom/right 24px). Lift it so the two stack rather than overlap. Scoped by
   :has() so it applies only where this button actually renders, and so no
   existing rule in dashboard.css has to be edited. Browsers without :has()
   simply keep today's behaviour. */
body:has(#vl-sfab) .vl-toast { bottom: 92px; }

@media (max-width: 600px) {
    .vl-sfab { right: 16px; bottom: 16px; }
    .vl-sfab-btn { width: 50px; height: 50px; }
    .vl-sfab-panel { width: 260px; max-width: calc(100vw - 32px); }
    body:has(#vl-sfab) .vl-toast { bottom: 78px; }
}