/* VV Theme CSS — extracted from index.html
   Edit this file to restyle the voter landing page globally.
   Override --vv-* variables per-campaign via the Admin theme editor.
   ------------------------------------------------------------------ */

:root {
    /* ── Colors ─────────────────────────────────────────── */
    --vv-color-navy:           #162240;
    --vv-color-bg:             #0C1527;
    --vv-color-primary:        #3366B8;
    --vv-color-primary-dk:     #2A549A;
    --vv-color-primary-glow:   rgba(51,102,184,0.15);
    --vv-color-gold:           #C9A84C;
    --vv-color-warm:           #FAFAF7;
    --vv-color-cream:          #F3F1EB;
    --vv-color-sand:           #DDD8CC;
    --vv-color-sand-dk:        #B8B0A0;
    --vv-color-success:        #2E7D5B;
    --vv-color-success-bg:     #E8F5ED;
    --vv-color-success-border: #B8DFC8;
    --vv-color-error:          #B84233;
    --vv-color-error-bg:       #FDF0EE;
    --vv-color-error-border:   #F0C4BD;
    --vv-color-text:           #1A2540;
    --vv-color-text2:          #4A5772;
    --vv-color-text3:          #8694AD;

    /* ── Typography ──────────────────────────────────────── */
    --vv-font-body:       'DM Sans',system-ui,sans-serif;
    --vv-font-heading:    'Playfair Display',serif;
    --vv-font-size-sm:    12px;
    --vv-font-size-body:  14px;
    --vv-font-size-offer: 22px;

    /* ── Radii ───────────────────────────────────────────── */
    --vv-radius-card:  14px;
    --vv-radius-input: 10px;
    --vv-radius-round: 50%;

    /* ── Shadows ─────────────────────────────────────────── */
    --vv-shadow-card: 0 2px 8px rgba(0,0,0,0.04),0 12px 48px rgba(0,0,0,0.08);

    /* ── Spacing ─────────────────────────────────────────── */
    --vv-space-base:    16px;
    --vv-space-section: 24px;

    /* ── Legacy aliases (used by JS-generated inline styles) ── */
    --navy:         var(--vv-color-navy);
    --navy-deep:    var(--vv-color-bg);
    --civic:        var(--vv-color-primary);
    --civic-dk:     var(--vv-color-primary-dk);
    --civic-glow:   var(--vv-color-primary-glow);
    --gold:         var(--vv-color-gold);
    --warm:         var(--vv-color-warm);
    --cream:        var(--vv-color-cream);
    --sand:         var(--vv-color-sand);
    --sand-dk:      var(--vv-color-sand-dk);
    --green:        var(--vv-color-success);
    --green-bg:     var(--vv-color-success-bg);
    --green-border: var(--vv-color-success-border);
    --red:          var(--vv-color-error);
    --red-bg:       var(--vv-color-error-bg);
    --red-border:   var(--vv-color-error-border);
    --text:         var(--vv-color-text);
    --text2:        var(--vv-color-text2);
    --text3:        var(--vv-color-text3);
    --card-shadow:  var(--vv-shadow-card);
    --radius:       var(--vv-radius-card);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--vv-font-body);background:var(--vv-color-bg);color:var(--vv-color-text);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.15),transparent),radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.1),transparent),radial-gradient(1px 1px at 50% 10%,rgba(255,255,255,.12),transparent),radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.08),transparent),radial-gradient(1px 1px at 85% 75%,rgba(255,255,255,.14),transparent),radial-gradient(ellipse 60% 50% at 20% 90%,var(--vv-color-primary-glow),transparent);pointer-events:none;z-index:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
header{position:relative;z-index:1;padding:var(--vv-space-section) var(--vv-space-section) 0;text-align:center}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo svg{filter:drop-shadow(0 0 8px rgba(51,102,184,0.3))}
.logo span{font-family:var(--vv-font-heading);font-size:20px;font-weight:700;color:#E8EDF4}
.vv-logo-img{display:none;max-height:40px;vertical-align:middle}
main{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 140px);padding:var(--vv-space-section) var(--vv-space-base) 40px}
.card{background:#fff;border-radius:var(--vv-radius-card);padding:36px 28px;box-shadow:var(--vv-shadow-card);max-width:440px;width:100%;animation:fadeIn .5s ease;border:1px solid rgba(0,0,0,0.04)}
@media(min-width:480px){.card{padding:44px 36px}}
h2{font-family:var(--vv-font-heading);font-size:var(--vv-font-size-offer);font-weight:700;text-align:center;margin-bottom:8px;color:var(--vv-color-navy)}
.sub{color:var(--vv-color-text2);font-size:var(--vv-font-size-body);text-align:center;line-height:1.65;margin-bottom:var(--vv-space-section)}
.steps{display:flex;gap:6px;justify-content:center;margin-bottom:28px}
.steps .d{width:10px;height:10px;border-radius:var(--vv-radius-round);background:var(--vv-color-sand);transition:.4s}
.steps .d.ok{background:var(--vv-color-success)}.steps .d.on{background:var(--vv-color-primary);width:28px;border-radius:5px}
label{display:block;font-size:var(--vv-font-size-sm);font-weight:600;color:var(--vv-color-text2);margin-bottom:5px;letter-spacing:.05em;text-transform:uppercase}
input[type=text],input[type=email],input[type=tel]{width:100%;padding:14px var(--vv-space-base);border:1.5px solid var(--vv-color-sand);border-radius:var(--vv-radius-input);font-size:var(--vv-space-base);font-family:var(--vv-font-body);color:var(--vv-color-text);background:#fff;outline:none;transition:.2s}
input:focus{border-color:var(--vv-color-primary);box-shadow:0 0 0 3px var(--vv-color-primary-glow)}
input::placeholder{color:var(--vv-color-sand-dk)}
.field{margin-bottom:var(--vv-space-base)}
.row{display:flex;gap:12px}.row>*{flex:1}
.btn{width:100%;padding:var(--vv-space-base);border:none;border-radius:var(--vv-radius-input);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--vv-font-body);transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-p{background:linear-gradient(135deg,var(--vv-color-primary),var(--vv-color-primary-dk));color:#fff;box-shadow:0 2px 12px rgba(51,102,184,0.25)}
.btn-p:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 20px rgba(51,102,184,0.35)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-c{width:60px;height:60px;border-radius:var(--vv-radius-round);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.icon-c.grn{background:var(--vv-color-success-bg);border:1px solid var(--vv-color-success-border)}
.icon-c.gry{background:var(--vv-color-cream);border:1px solid var(--vv-color-sand)}
.offer{background:linear-gradient(135deg,#F8F6F0,#F2EFE6);border-radius:12px;padding:22px 20px;margin-bottom:var(--vv-space-section);border:1px solid var(--vv-color-sand)}
.offer-row{display:flex;gap:20px}.offer-row .v{font-size:var(--vv-font-size-offer);font-weight:700;color:var(--vv-color-success)}.offer-row .l{font-size:11px;color:var(--vv-color-text3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.prog{display:flex;align-items:center;gap:12px;padding:14px var(--vv-space-base);border-radius:var(--vv-radius-input);margin-bottom:10px}
.prog.ok{background:var(--vv-color-success-bg);border:1px solid var(--vv-color-success-border)}
.prog.wait{background:#F0F4FA;border:1px solid #D0DFEF}
.prog.off{background:var(--vv-color-cream);border:1px solid var(--vv-color-sand);opacity:.4}
.err{background:var(--vv-color-error-bg);border:1px solid var(--vv-color-error-border);border-radius:var(--vv-radius-input);padding:12px var(--vv-space-base);margin-bottom:18px;font-size:var(--vv-font-size-body);color:var(--vv-color-error);display:flex;align-items:center;gap:8px}
.codes{display:flex;gap:10px;justify-content:center;margin-bottom:var(--vv-space-section)}
.codes input{width:52px;height:60px;text-align:center;font-size:24px;font-weight:700;padding:0;margin:0;border-radius:var(--vv-radius-input)}
.sp{width:20px;height:20px;border:2.5px solid rgba(0,0,0,.1);border-top-color:var(--vv-color-primary);border-radius:var(--vv-radius-round);animation:spin .8s linear infinite;display:inline-block}
.fine{font-size:var(--vv-font-size-sm);color:var(--vv-color-text3);text-align:center;margin-top:var(--vv-space-base);line-height:1.6}
.fine a{color:var(--vv-color-primary)}
footer{position:relative;z-index:1;text-align:center;padding:20px var(--vv-space-section);border-top:1px solid rgba(255,255,255,.05)}
footer p{font-size:11px;color:rgba(255,255,255,.25);line-height:1.6}
footer a{color:rgba(255,255,255,.35);text-decoration:none}
.demo-hint{background:#FBF7ED;border:1px solid rgba(201,168,76,0.25);border-radius:8px;padding:8px 14px;font-size:var(--vv-font-size-sm);color:var(--vv-color-gold);text-align:center;margin-bottom:var(--vv-space-base)}
.vv-hero-img{display:none;width:100%;border-radius:var(--vv-radius-input);margin-bottom:var(--vv-space-base)}