/* DNDB WhatsApp lead channel: the floating button and the short qualifier.
   =====================================================================
   Markup is built by assets/js/whatsapp.js; this file only styles it, from
   the site's own tokens (--t1, --m1, --m3, --m6, --c3, --sys, --bg), the
   same recipe as the lead modal (radius 20, the 0 30px 80px shadow, pills
   that go dark when pressed, 44px buttons). Nothing here depends on a page
   class, so one pair of files serves every page that carries the mount.

   Layering, agreed against the fixed elements on both pages (2026-09-25):
     sticky-cta 60 < wa-fab 80 < nav-links.open 90 < site-header 100
     < wa-overlay 1000 (same as the lead modal) < consent-bar 9998.
   So the mobile menu covers the button, the header stays above it, and the
   consent bar (EU only) is never under it: while the bar is on screen the
   script hides the button instead, see .wa-fab--hidden.
   ===================================================================== */

.wa-fab { position:fixed; z-index:80;
    right:calc(20px + env(safe-area-inset-right, 0px));
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    width:52px; height:52px; border-radius:50%; border:0; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:#25D366; color:#fff;
    box-shadow:0 10px 26px rgba(28,43,74,0.22), 0 2px 6px rgba(28,43,74,0.10);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, bottom .25s ease; }
.wa-fab svg { width:26px; height:26px; display:block; }
.wa-fab:hover { background:#1EBE5A; transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(28,43,74,0.26), 0 2px 6px rgba(28,43,74,0.12); }
.wa-fab:active { transform:none; }
.wa-fab:focus-visible { outline:2px solid var(--m6, #B5C1E8); outline-offset:3px; }
/* The Redesign page's sticky bar (48px button + 10px padding each side) is
   on screen on phones while no call to action is visible; the button moves
   up over it and back down when it goes. */
.wa-fab--up { bottom:calc(20px + 68px + env(safe-area-inset-bottom, 0px)); }
.wa-fab--hidden { display:none; }

.wa-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
    justify-content:center; padding:16px; background:rgba(20,22,34,0.42);
    opacity:0; transition:opacity .22s ease; }
.wa-overlay.is-open { opacity:1; }
.wa-overlay[hidden] { display:none; }

.wa-sheet { position:relative; width:min(460px, 100%); max-height:calc(100dvh - 32px);
    overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,0.97); color:var(--t1, #222331); border-radius:20px;
    padding:28px 28px 24px;
    box-shadow:0 30px 80px rgba(28,43,74,0.22), 0 4px 18px rgba(28,43,74,0.08);
    transform:translateY(12px); transition:transform .22s ease; }
.wa-overlay.is-open .wa-sheet { transform:none; }
.wa-sheet:focus { outline:none; }

.wa-close { position:absolute; top:12px; right:12px; width:36px; height:36px; border:0;
    border-radius:10px; background:transparent; cursor:pointer; color:var(--m1, #6A6D7C);
    display:flex; align-items:center; justify-content:center; }
.wa-close:hover { background:rgba(181,193,232,0.18); color:var(--t1, #222331); }
.wa-close svg { width:14px; height:14px; }
.wa-close:focus-visible, .wa-pill:focus-visible, .wa-btn:focus-visible, .wa-link:focus-visible {
    outline:2px solid var(--m6, #B5C1E8); outline-offset:3px; }

.wa-eyebrow { display:block; font-family:var(--sys, -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif);
    font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--m3, #60638A); padding-right:36px; }
.wa-h { font-family:var(--sys, -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif);
    font-weight:800; font-size:22px; line-height:1.1; letter-spacing:-0.02em;
    color:var(--t1, #222331); margin:8px 36px 0 0; text-wrap:balance; }
.wa-sub { font-family:'Roboto', sans-serif; font-size:14px; line-height:20px;
    color:var(--m1, #6A6D7C); margin:8px 0 0; }

.wa-pills { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:18px; }
.wa-pills--1 { grid-template-columns:minmax(0,1fr); }
.wa-pill { min-height:42px; padding:8px 12px; border-radius:10px; border:1px solid #E6E5EC;
    background:#fff; color:var(--t1, #222331); cursor:pointer; text-align:left;
    font-family:'Roboto', sans-serif; font-size:14px; line-height:18px; }
.wa-pill:hover { background:rgba(181,193,232,0.16); }
.wa-pill[aria-pressed="true"] { background:#0d0d16; border-color:#0d0d16; color:#fff; }

.wa-summary { margin:16px 0 0; padding:10px 14px; border-radius:12px;
    background:rgba(181,193,232,0.14); font-family:'Roboto', sans-serif; font-size:13px;
    line-height:20px; color:var(--m1, #6A6D7C); }
.wa-summary b { color:var(--t1, #222331); font-weight:500; }
.wa-link { background:none; border:0; padding:0; margin-left:6px; cursor:pointer;
    font:inherit; color:var(--m3, #60638A); text-decoration:underline; text-underline-offset:2px; }
.wa-link:hover { color:var(--t1, #222331); }

.wa-label { display:block; margin:16px 0 6px; font-family:var(--sys, -apple-system, sans-serif);
    font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--m3, #60638A); }
.wa-field { width:100%; height:44px; padding:0 14px; border-radius:10px; border:1px solid #E6E5EC;
    background:#fff; color:var(--t1, #222331); font-family:'Roboto', sans-serif; font-size:16px; }
.wa-field::placeholder { color:var(--m1, #6A6D7C); opacity:1; font-size:15px; }
.wa-field:focus { outline:none; border-color:var(--m6, #B5C1E8); }

.wa-actions { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.wa-btn { display:flex; align-items:center; justify-content:center; gap:10px; height:48px;
    width:100%; border-radius:10px; border:0; cursor:pointer; text-decoration:none;
    background:#0d0d16; color:#fff; font-family:var(--sys, -apple-system, sans-serif);
    font-size:15px; font-weight:500; transition:background .2s ease, transform .2s ease; }
.wa-btn:hover { background:#1a1a26; transform:translateY(-1px); }
.wa-btn svg { width:18px; height:18px; }
.wa-note { margin:0; text-align:center; font-family:'Roboto', sans-serif; font-size:12px;
    line-height:18px; color:var(--m1, #6A6D7C); }
.wa-back { align-self:flex-start; }

@media (max-width: 640px) {
    /* A bottom sheet on the phone: anchored to the bottom, rounded on top,
       its own safe-area padding, never the full screen. */
    .wa-overlay { padding:0; align-items:flex-end; }
    .wa-sheet { width:100%; max-width:100%; max-height:92dvh; border-radius:20px 20px 0 0;
        padding:22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateY(24px); }
    .wa-pills { grid-template-columns:minmax(0,1fr); gap:6px; margin-top:14px; }
    .wa-pill { min-height:44px; }
    .wa-h { font-size:20px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-fab, .wa-overlay, .wa-sheet, .wa-btn { transition:none; }
    .wa-overlay .wa-sheet { transform:none; }
}