/* ═══════════════════════════════════════════════════════════════════════════
   cwp-dialog — the site's own confirm / alert
   ═══════════════════════════════════════════════════════════════════════════
   Replaces window.confirm() and window.alert(). Those are unstyleable, they
   render in the OS chrome rather than the page, they say "localhost:8686 says"
   above your copy, and on mobile they look like a browser warning rather than
   something the site is asking. For a form the visitor is halfway through, that
   reads as an error.

   House rules this has to obey, all established elsewhere in the theme:
     • no gradients — solid fills only
     • no italics anywhere
     • Instrument Sans, matching the rest of the site
     • header.php forces `*{border-radius:0 !important}` site-wide, so every
       radius here needs !important AND a class-scoped selector to land
     • the accent comes from the page, never hardcoded green
   ═══════════════════════════════════════════════════════════════════════════ */

.cwp-dlg{
    --dlg-A:      var(--sp-A, var(--h-accent, var(--cwp-accent, #c9f163)));
    --dlg-card:   #ffffff;
    --dlg-ink:    #0d0d0c;
    --dlg-ink-2:  #4a4a46;
    --dlg-line:   rgba(13,13,12,.12);
    --dlg-danger: #c0392b;

    position:fixed; inset:0; z-index:2147482980; /* below the cursor (css/cwp-cursor.css, lowest layer 2147482990) so the cursor stays on top of dialogs */
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    letter-spacing:-.012em;
}
.cwp-dlg[hidden]{display:none;}

.cwp-dlg__scrim{
    position:absolute; inset:0;
    background:rgba(13,13,12,.52);
    opacity:0; transition:opacity .18s ease;
}
.cwp-dlg.is-open .cwp-dlg__scrim{opacity:1;}

.cwp-dlg__card{
    position:relative;
    width:100%; max-width:420px;
    background:var(--dlg-card);
    border:1px solid var(--dlg-line);
    border-radius:18px !important;
    box-shadow:0 2px 4px rgba(13,13,12,.06), 0 28px 70px rgba(13,13,12,.24);
    padding:26px 26px 22px;
    text-align:left;
    opacity:0; transform:translateY(10px) scale(.985);
    transition:opacity .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}
.cwp-dlg.is-open .cwp-dlg__card{opacity:1; transform:none;}

/* The glyph carries the tone. A tinted chip rather than a coloured glyph on
   white, for the same reason as the hero form badges: a pale accent as a line
   drawing on white is close to invisible, but as a wash behind near-black ink
   it reads at any accent. */
.cwp-dlg__ico{
    width:42px; height:42px; margin:0 0 15px;
    display:flex; align-items:center; justify-content:center;
    border-radius:12px !important;
    background:color-mix(in srgb, var(--dlg-A) 24%, #fff);
    border:1px solid color-mix(in srgb, var(--dlg-A) 46%, #fff);
    color:var(--dlg-ink);
}
.cwp-dlg--danger .cwp-dlg__ico{
    background:color-mix(in srgb, var(--dlg-danger) 12%, #fff);
    border-color:color-mix(in srgb, var(--dlg-danger) 34%, #fff);
    color:var(--dlg-danger);
}
.cwp-dlg__ico svg{width:21px; height:21px; display:block;}

.cwp-dlg__title{
    margin:0 0 7px; padding:0;
    font-size:19.5px; font-weight:700; line-height:1.25;
    letter-spacing:-.025em; color:var(--dlg-ink);
}
.cwp-dlg__body{
    margin:0; padding:0;
    font-size:15px; line-height:1.55; color:var(--dlg-ink-2);
}

.cwp-dlg__actions{
    display:flex; gap:10px; justify-content:flex-end;
    margin:0; padding:22px 0 0;
    flex-wrap:wrap;
}
.cwp-dlg__btn{
    appearance:none; -webkit-appearance:none;
    font:inherit; font-size:14.5px; font-weight:650; letter-spacing:-.008em;
    padding:11px 18px; min-height:42px;
    border-radius:11px !important;
    border:1px solid transparent;   /* keeps both variants the same height */
    cursor:pointer;
    transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.cwp-dlg__btn:active{transform:translateY(1px);}
.cwp-dlg__btn--ghost{
    background:transparent; border-color:var(--dlg-line); color:var(--dlg-ink-2);
}
.cwp-dlg__btn--ghost:hover{background:rgba(13,13,12,.045); color:var(--dlg-ink);}
.cwp-dlg__btn--go{
    background:var(--dlg-A); color:var(--dlg-ink);
    border-color:color-mix(in srgb, var(--dlg-A) 70%, #0d0d0c);
}
.cwp-dlg__btn--go:hover{background:color-mix(in srgb, var(--dlg-A) 84%, #0d0d0c);}
.cwp-dlg--danger .cwp-dlg__btn--go{
    background:var(--dlg-danger); color:#fff; border-color:var(--dlg-danger);
}
.cwp-dlg--danger .cwp-dlg__btn--go:hover{background:color-mix(in srgb, var(--dlg-danger) 84%, #000);}
.cwp-dlg__btn:focus-visible{outline:2px solid var(--dlg-ink); outline-offset:2px;}

/* Dark theme — the site toggles [data-theme="dark"] on the root. */
[data-theme="dark"] .cwp-dlg{
    --dlg-card:#161618; --dlg-ink:#f4f3ee; --dlg-ink-2:rgba(244,243,238,.7);
    --dlg-line:rgba(255,255,255,.14); --dlg-danger:#ff6b5a;
}
[data-theme="dark"] .cwp-dlg__scrim{background:rgba(0,0,0,.66);}
[data-theme="dark"] .cwp-dlg__card{box-shadow:0 2px 4px rgba(0,0,0,.5), 0 28px 70px rgba(0,0,0,.7);}
[data-theme="dark"] .cwp-dlg__ico{
    background:color-mix(in srgb, var(--dlg-A) 26%, #161618);
    border-color:color-mix(in srgb, var(--dlg-A) 42%, #161618);
    color:var(--dlg-ink);
}
[data-theme="dark"] .cwp-dlg__btn--ghost:hover{background:rgba(255,255,255,.07);}

@media (max-width:520px){
    .cwp-dlg{padding:14px;}
    .cwp-dlg__card{padding:22px 20px 18px;}
    .cwp-dlg__title{font-size:18px;}
    /* Full-width stacked buttons, primary on top — on a phone the thumb sits
       at the bottom of the screen, so the destructive option should not be
       the one nearest it. */
    .cwp-dlg__actions{flex-direction:column-reverse; gap:8px;}
    .cwp-dlg__btn{width:100%; justify-content:center; text-align:center;}
}

/* Respect the OS setting — the dialog still appears, it just stops moving. */
@media (prefers-reduced-motion:reduce){
    .cwp-dlg__scrim,.cwp-dlg__card{transition:none;}
    .cwp-dlg__card{transform:none;}
}