/**
 * dpdp-audit/includes/style.css
 * Only the styles genuinely UNIQUE to this tool — everything else
 * (fonts, colors, nav, footer, .btn-solid, .btn-line, .eyebrow, h1,
 * .lede, .container-narrow) is already provided by the real site's own
 * style.css, loaded first via the shared root header.php. This file
 * used to duplicate all of that too — removed deliberately, since a
 * duplicate --footer-h value here (80px) didn't even match the real
 * site's actual value (96px), a real conflict risk depending on load
 * order, not just wasted bytes.
 *
 * The semantic colors below (--danger/--success/--warning/--info) are
 * kept because the main site's palette is intentionally pure black/white
 * with no color at all — this tool genuinely needs them and the main
 * site doesn't define them.
 */

:root{
  --danger:#c0392b; --success:#1a7a3c; --warning:#a9700c; --info:#2464a8;
}
html[data-theme="night"]{
  --danger:#e0685a; --success:#4caf72; --warning:#d4a03a; --info:#5b9bd9;
}

/* ---------- PROGRESS BAR ---------- */
.progress-wrap{margin-bottom:2.5rem;}
.progress-label{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em;}
.progress-track{height:4px; background:var(--border); width:100%;}
.progress-fill{height:100%; background:var(--fg); transition:width 300ms ease;}

/* ---------- QUESTION CARDS ---------- */
.question-card{border:1px solid var(--border); padding:24px; margin-bottom:20px;}
.question-text{font-size:16px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em;}
.question-help{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 18px;}
.answer-options{display:flex; flex-wrap:wrap; gap:10px;}
.answer-options label{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--border);
  font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition);
}
.answer-options input{margin:0;}
.answer-options label:has(input:checked){background:var(--fg); color:var(--bg); border-color:var(--fg);}
.category-heading{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:24px;}

/* ---------- TRUST SCORE GAUGE ---------- */
.score-panel{text-align:center; padding:3rem 0 2rem; border-bottom:1px solid var(--border); margin-bottom:2.5rem;}
.gauge-wrap{position:relative; width:220px; height:130px; margin:0 auto 16px;}
.gauge-number{position:absolute; bottom:0; left:0; right:0; font-size:44px; font-weight:700; letter-spacing:-0.02em;}
.gauge-label{font-size:13px; color:var(--muted); margin-top:4px;}
.risk-badge{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:6px 16px; border:1px solid currentColor; margin-top:12px;
}

/* ---------- CATEGORY BREAKDOWN ---------- */
.breakdown-item{display:flex; align-items:center; gap:16px; padding:12px 0; border-top:1px solid var(--border);}
.breakdown-item:first-child{border-top:none;}
.breakdown-label{flex:0 0 200px; font-size:13px; font-weight:500;}
.breakdown-bar-track{flex:1; height:6px; background:var(--border);}
.breakdown-bar-fill{height:100%; background:var(--fg);}
.breakdown-percent{flex:0 0 40px; text-align:right; font-size:13px; color:var(--muted);}

/* ---------- LEAD FORM ---------- */
.lead-form{border:1px solid var(--border); padding:32px; margin-top:2rem;}
.lead-form .form-label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px;}
.lead-form input[type="text"], .lead-form input[type="email"], .lead-form input[type="tel"]{
  width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--border); font-family:'Inter',sans-serif;
  font-size:14px; padding:11px 12px; margin-bottom:18px;
}
.consent-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; font-size:12.5px; color:var(--muted); line-height:1.5;}
.consent-row input{margin-top:3px;}
.form-error{color:var(--danger); font-size:13px; margin-bottom:16px;}

/* ---------- FEEDBACK ---------- */
.rating-options{display:flex; gap:10px; margin-bottom:20px;}
.rating-options label{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--border); font-size:15px; font-weight:600; cursor:pointer; transition:all var(--transition);
}
.rating-options input{display:none;}
.rating-options label:has(input:checked){background:var(--fg); color:var(--bg); border-color:var(--fg);}