/* ══════════════════════════════════════════════════════════════
   ZATCA Phase-2 Readiness Checker — lead magnet
   Uses global design tokens (light default / dark aware)
   ══════════════════════════════════════════════════════════════ */
.zr{max-width:840px;margin:0 auto;padding:24px 20px 8px}
.zr-hero{text-align:center;margin-bottom:30px}
.zr-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan);background:var(--accent-muted-bg);border:1px solid var(--border2);border-radius:100px;padding:6px 14px;margin-bottom:14px}
.zr-hero h1{font-size:clamp(26px,4.4vw,40px);font-weight:900;color:var(--white);font-family:var(--font);line-height:1.15;margin:0 0 12px}
.zr-hero h1 .accent{color:var(--cyan)}
.zr-hero p{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:560px;margin:0 auto}
.zr-hero .zr-meta{margin-top:14px;font-size:12.5px;color:var(--muted);display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.zr-hero .zr-meta b{color:var(--white)}

/* Quiz */
.zr-quiz{display:flex;flex-direction:column;gap:16px}
.zr-q{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:18px 20px;box-shadow:var(--glow-c)}
.zr-q-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.zr-q-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;font-family:var(--font)}
[data-theme="light"] .zr-q-num{color:#fff}
.zr-q-title{font-size:15px;font-weight:700;color:var(--white);line-height:1.4;font-family:var(--font)}
.zr-opts{display:flex;flex-wrap:wrap;gap:9px;padding-left:38px}
.zr-opt{position:relative}
.zr-opt input{position:absolute;opacity:0;pointer-events:none}
.zr-opt label{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);background:var(--surface2);border:1.5px solid var(--border);border-radius:100px;padding:8px 15px;cursor:pointer;transition:all .18s;font-family:var(--font)}
.zr-opt label:hover{border-color:var(--border2);color:var(--white)}
.zr-opt input:checked + label{border-color:var(--cyan);background:var(--accent-muted-bg);color:var(--white);box-shadow:var(--glow-c)}
.zr-opt input:focus-visible + label{outline:2px solid var(--cyan);outline-offset:2px}

/* Submit + error */
.zr-actions{text-align:center;margin:26px 0 8px}
.zr-submit{font-size:14px;padding:14px 34px}
.zr-err{font-size:13px;color:#e5484d;margin-top:10px;min-height:0}
.zr-err:empty{display:none}
[data-lang="ar"] .zr-opts{padding-left:0;padding-right:38px}

/* Result */
.zr-result{display:none;margin-top:8px}
.zr-result.show{display:block;animation:zrFade .4s ease}
@keyframes zrFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.zr-score-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);padding:28px 24px;text-align:center;box-shadow:var(--glow-c);margin-bottom:20px}
.zr-gauge{position:relative;width:150px;height:150px;margin:0 auto 16px}
.zr-gauge svg{transform:rotate(-90deg)}
.zr-gauge-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.zr-gauge-num b{font-size:38px;font-weight:900;color:var(--white);font-family:var(--font);line-height:1}
.zr-gauge-num span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.zr-verdict{font-size:20px;font-weight:800;font-family:var(--font);margin:0 0 8px}
.zr-verdict.ready{color:#2ecc71}
.zr-verdict.partial{color:#f5a623}
.zr-verdict.risk{color:#e5484d}
.zr-verdict-sub{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:520px;margin:0 auto}

.zr-recs{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:22px 24px;margin-bottom:20px}
.zr-recs h3{font-size:15px;font-weight:800;color:var(--white);font-family:var(--font);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.zr-recs ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.zr-recs li{position:relative;padding-left:26px;font-size:13.5px;color:var(--muted);line-height:1.6}
.zr-recs li::before{content:"→";position:absolute;left:0;top:0;color:var(--cyan);font-weight:800}
.zr-recs li.ok::before{content:"✓";color:#2ecc71}
[data-lang="ar"] .zr-recs li{padding-left:0;padding-right:26px}
[data-lang="ar"] .zr-recs li::before{left:auto;right:0}

/* Lead form */
.zr-lead{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);padding:26px 24px;box-shadow:var(--glow-c)}
.zr-lead h3{font-size:17px;font-weight:800;color:var(--white);font-family:var(--font);margin:0 0 6px;text-align:center}
.zr-lead p{font-size:13px;color:var(--muted);line-height:1.6;text-align:center;margin:0 0 18px}
.zr-lead-form{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.zr-lead-row{display:flex;gap:10px}
.zr-lead-row input{flex:1;min-width:0}
.zr-lead-form input,.zr-lead-form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);color:var(--white);font-family:var(--font);font-size:13.5px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
.zr-lead-form input:focus,.zr-lead-form textarea:focus{outline:none;border-color:var(--border2);box-shadow:var(--glow-c)}
.zr-lead-form input::placeholder,.zr-lead-form textarea::placeholder{color:var(--muted)}
.zr-lead-send{margin-top:2px}
.zr-lead-priv{font-size:11px;color:var(--muted);opacity:.85;text-align:center;margin:0}
.zr-lead-thanks{display:none;text-align:center}
.zr-lead-thanks.show{display:block}
.zr-lead-thanks .ic{font-size:36px}
.zr-lead-thanks b{display:block;font-size:16px;color:var(--white);font-family:var(--font);margin:6px 0 4px}
.zr-lead-thanks span{font-size:13px;color:var(--muted)}
[data-lang="ar"] .zr-lead-form{text-align:right}

.zr-note{font-size:11.5px;color:var(--muted);opacity:.85;line-height:1.7;text-align:center;max-width:600px;margin:22px auto 0}

@media(max-width:600px){
  .zr-opts{padding-left:0} [data-lang="ar"] .zr-opts{padding-right:0}
  .zr-lead-row{flex-direction:column}
  .zr-hero .zr-meta{gap:10px}
}