:root {
  --bw-ink: #16181d;
  --bw-bg: #fff;
  --bw-line: #e3e7ee;
  --bw-steel: #5a6473;
  --bw-red: #d6001c;
  --bw-green: #0d7f3f;
  --bw-amber: #f59e0b;
}

/* SSK Bodywork Form v2 — visual diagram + damage assessment */
.ssk-bw2 {
  --bw-red:#d6001c; --bw-ink:#16181d; --bw-steel:#5a6473; --bw-line:#e3e7ee;
  --bw-bg:#f6f7f9; --bw-green:#0d7f3f; --bw-amber:#c07000;
  max-width:860px; margin:0 auto; padding:0 16px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--bw-ink); line-height:1.5;
}
.ssk-bw2 * { box-sizing:border-box; }

/* Steps */
.ssk-bw2__step { animation: bwFade .3s ease; }
@keyframes bwFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.ssk-bw2__hero { text-align:center; margin-bottom:24px; }
.ssk-bw2__hero h2 { font-size:28px; font-weight:800; margin:0 0 8px; letter-spacing:-.4px; }
.ssk-bw2__hero p { color:var(--bw-steel); margin:0; font-size:15px; }
.ssk-bw2__hint { font-size:13px; color:var(--bw-steel); margin:0 0 10px; }

.ssk-bw2__step-head { margin-bottom:20px; }
.ssk-bw2__step-head h3 { font-size:22px; font-weight:800; margin:0 0 6px; }
.ssk-bw2__step-head p  { color:var(--bw-steel); margin:0; }

/* Diagram layout */
.ssk-bw2__diagram-wrap {
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
}
@media(max-width:600px) { .ssk-bw2__diagram-wrap { grid-template-columns:1fr; } }

/* SVG panels */
.ssk-car-diagram { max-width:280px; cursor:pointer; display:block; background:#f0f4f8; border-radius:12px; padding:12px; margin:0 auto; }
.ssk-panel {
  fill:#fff; stroke:#c3cdd8; stroke-width:1.5; cursor:pointer;
  transition:fill .15s, stroke .15s;
}
.ssk-panel:hover { fill:#fff3f4; stroke:var(--bw-red); }
.ssk-panel.selected { fill:#ffd6da; stroke:var(--bw-red); stroke-width:2.5; }
.ssk-panel-label {
  font-size:9px; font-weight:700; fill:#5a6473; pointer-events:none;
  text-transform:uppercase; letter-spacing:.4px;
}
.ssk-panel-label--sm { font-size:7.5px; }

/* Selected display */
.ssk-bw2__selected-list { padding-top:8px; }
#ssk-bw2-selected-display {
  display:flex; flex-wrap:wrap; gap:6px; min-height:40px;
}
.ssk-panel-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bw-red); color:#fff; padding:4px 10px;
  border-radius:20px; font-size:12px; font-weight:700;
}
.ssk-panel-chip button {
  background:none; border:none; color:rgba(255,255,255,.8); cursor:pointer; font-size:14px; padding:0; line-height:1;
}

/* Damage fields */
.ssk-bw2__damage-field {
  background:#fff; border:1px solid var(--bw-line); border-radius:12px;
  padding:18px; margin-bottom:12px;
}
.ssk-bw2__damage-field h4 { font-size:15px; font-weight:800; margin:0 0 14px; }
.ssk-damage-row { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.ssk-damage-row label { font-size:13px; font-weight:600; }
.ssk-damage-row select, .ssk-damage-row textarea {
  border:1.5px solid var(--bw-line); border-radius:8px; padding:10px 12px;
  font-size:14px; font-family:inherit; outline:none; background:#fff;
}
.ssk-damage-row select:focus, .ssk-damage-row textarea:focus { border-color:var(--bw-red); }

/* Severity slider */
.ssk-severity-wrap { display:flex; flex-direction:column; gap:6px; }
.ssk-severity-wrap input[type=range] { accent-color:var(--bw-red); }
.ssk-severity-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--bw-steel); }
.ssk-severity-value { font-weight:800; color:var(--bw-red); font-size:13px; }

/* Decision boxes */
.ssk-bw2__decision {
  border-radius:14px; padding:28px; text-align:center; margin-bottom:20px;
}
.ssk-bw2__decision--mobile { background:#e5f4ed; border:2px solid #0d7f3f; }
.ssk-bw2__decision--quote  { background:#fef3c7; border:2px solid #c07000; }
.ssk-bw2__decision-icon { font-size:48px; margin-bottom:10px; }
.ssk-bw2__decision h3 { font-size:22px; font-weight:800; margin:0 0 8px; }
.ssk-bw2__decision p  { margin:0 0 16px; color:var(--bw-steel); }
.ssk-bw2__decision-price {
  font-size:32px; font-weight:900; color:var(--bw-red); margin:8px 0;
}
.ssk-bw2__decision-note { font-size:12px; color:var(--bw-steel); }

/* Details form */
.ssk-bw2__fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:580px) { .ssk-bw2__fields { grid-template-columns:1fr; } }
.ssk-bw2__field { display:flex; flex-direction:column; gap:4px; }
.ssk-bw2__field--wide { grid-column:1/-1; }
.ssk-bw2__field > span { font-size:13px; font-weight:600; }
.ssk-bw2__field input, .ssk-bw2__field select {
  border:1.5px solid var(--bw-line); border-radius:8px; padding:10px 12px;
  font-size:14px; font-family:inherit; outline:none; background:#fff;
}
.ssk-bw2__field input:focus { border-color:var(--bw-red); }
.ssk-bw2__field small { font-size:11px; color:var(--bw-steel); }

/* Photo previews */
.ssk-bw2__previews { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ssk-bw2__preview {
  width:80px; height:80px; object-fit:cover; border-radius:8px;
  border:2px solid var(--bw-line);
}

/* CTA row */
.ssk-bw2__step-cta { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap; }

/* Buttons */
.ssk-bw2-btn {
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px;
  border:none; border-radius:10px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.ssk-bw2-btn--primary { background:var(--bw-red); color:#fff; }
.ssk-bw2-btn--primary:hover { background:#a80016; }
.ssk-bw2-btn--ghost { background:transparent; color:var(--bw-steel); border:1.5px solid var(--bw-line); }
.ssk-bw2-btn--ghost:hover { background:var(--bw-bg); color:var(--bw-ink); }
.ssk-bw2-btn--lg { width:100%; justify-content:center; padding:14px; font-size:15px; }
.ssk-bw2-btn[disabled] { opacity:.5; cursor:not-allowed; }
.ssk-bw2-spinner {
  width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:bwSpin .7s linear infinite;
}
@keyframes bwSpin { to{transform:rotate(360deg)} }

/* Success */
.ssk-bw2__success { text-align:center; padding:40px 20px; }
.ssk-bw2__success-icon {
  width:70px; height:70px; border-radius:50%; background:var(--bw-green);
  color:#fff; font-size:36px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.ssk-bw2__success h3 { font-size:24px; font-weight:800; margin:0 0 8px; }
.ssk-bw2__success p  { color:var(--bw-steel); margin:0 0 8px; }
.ssk-bw2__success-ref { font-size:14px; }

/* G1 — Responsive safety net (catch-all) */
@media (max-width: 540px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .ssk-section-inner { padding-left: 16px !important; padding-right: 16px !important; }
}
img, video, iframe, table { max-width: 100%; height: auto; }