@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root {
  --csc-navy:        #0f1f3d;
  --csc-navy-mid:    #1a3260;
  --csc-gold:        #c8982a;
  --csc-gold-light:  #e8b94a;
  --csc-white:       #ffffff;
  --csc-off-white:   #f5f7fa;
  --csc-border:      #dde3ed;
  --csc-text:        #1a2540;
  --csc-muted:       #6b7a99;
  --csc-radius:      10px;
  --csc-shadow:      0 8px 32px rgba(15,31,61,0.12);
  --csc-font:        'DM Sans', system-ui, sans-serif;
  --csc-price-size:  44px;
  --csc-heading-size:22px;
  --csc-base-size:   15px;
  --csc-btn-weight:  700;
  --csc-cta-hover:   #e8b94a;
  --csc-cta-shadow:  rgba(200,152,42,0.35);
  --csc-cta-shadow-h:rgba(200,152,42,0.5);
}

.csc-calculator {
  font-family: var(--csc-font);
  font-size: var(--csc-base-size);
  max-width: 860px;
  margin: 2.5rem auto;
  background: var(--csc-white);
  border: 1px solid var(--csc-border);
  border-radius: 16px;
  box-shadow: var(--csc-shadow);
  overflow: hidden;
}

/* Step bar */
.csc-steps-bar { display:flex; background:var(--csc-navy); }
.csc-step-item {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:15px 6px; color:rgba(255,255,255,.40); font-size:12px; font-weight:600;
  letter-spacing:.03em; border-bottom:3px solid transparent; transition:color .25s,border-color .25s;
}
.csc-step-item.active    { color:var(--csc-gold-light); border-bottom-color:var(--csc-gold); }
.csc-step-item.completed { color:rgba(255,255,255,.65); }
.csc-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; font-size:10px; font-weight:700;
  background:rgba(255,255,255,.12); flex-shrink:0;
}
.csc-step-item.active .csc-step-num    { background:var(--csc-gold); color:var(--csc-navy); }
.csc-step-item.completed .csc-step-num { background:rgba(255,255,255,.25); }

/* Selectors */
.csc-selectors {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--csc-off-white); border-bottom:1px solid var(--csc-border);
}
@media(max-width:680px){ .csc-selectors{grid-template-columns:1fr 1fr;} }
@media(max-width:420px){ .csc-selectors{grid-template-columns:1fr;} }

.csc-select-group {
  padding:18px 18px 16px; border-right:1px solid var(--csc-border); transition:background .2s;
}
.csc-select-group:last-child { border-right:none; }
.csc-select-group.locked     { opacity:.45; pointer-events:none; }
.csc-select-group.active     { background:#fff; }

.csc-label {
  display:block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.10em; color:var(--csc-muted); margin-bottom:7px;
}
.csc-select-wrap { position:relative; }
.csc-select {
  width:100%; appearance:none; -webkit-appearance:none;
  background:transparent; border:1px solid var(--csc-border); border-radius:8px;
  padding:9px 32px 9px 11px; font-family:var(--csc-font); font-size:var(--csc-base-size);
  font-weight:500; color:var(--csc-text); cursor:pointer; outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.csc-select:focus { border-color:var(--csc-navy-mid); box-shadow:0 0 0 3px rgba(26,50,96,.12); }
.csc-select:disabled { cursor:not-allowed; color:var(--csc-muted); }
.csc-chevron { position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--csc-muted); font-size:13px; }

/* Loading */
.csc-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:18px; color:var(--csc-muted); font-size:13px; }
.csc-spinner { width:16px; height:16px; border:2px solid var(--csc-border); border-top-color:var(--csc-navy-mid); border-radius:50%; animation:cscSpin .7s linear infinite; display:inline-block; }
@keyframes cscSpin { to{transform:rotate(360deg);} }

/* Result card */
.csc-result { animation:cscFadeUp .35s ease forwards; padding:24px 28px; }
@keyframes cscFadeUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

.csc-result-inner {
  background:linear-gradient(135deg,var(--csc-navy) 0%,var(--csc-navy-mid) 100%);
  border-radius:12px; padding:26px 30px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; color:#fff;
}
.csc-result-meta    { display:flex; flex-direction:column; gap:4px; }
.csc-result-service { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.10em; color:var(--csc-gold-light); }
.csc-result-vehicle { font-size:var(--csc-heading-size); font-weight:700; color:#fff; line-height:1.2; }
.csc-result-size    { font-size:12px; color:rgba(255,255,255,.55); margin-top:2px; }

.csc-result-price-wrap { text-align:center; }
.csc-price-label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.10em; color:rgba(255,255,255,.55); margin-bottom:4px; }
.csc-price       { display:block; font-size:var(--csc-price-size); font-weight:800; color:var(--csc-gold-light); line-height:1; }

.csc-cta-btn {
  display:inline-block; background:var(--csc-gold); color:var(--csc-navy) !important;
  font-family:var(--csc-font); font-size:var(--csc-base-size); font-weight:var(--csc-btn-weight);
  padding:13px 26px; border-radius:8px; text-decoration:none !important;
  letter-spacing:.02em; transition:background .2s,transform .15s,box-shadow .2s;
  white-space:nowrap; box-shadow:0 4px 16px var(--csc-cta-shadow);
}
.csc-cta-btn:hover { background:var(--csc-cta-hover); transform:translateY(-2px); box-shadow:0 6px 20px var(--csc-cta-shadow-h); }

@media(max-width:600px){ .csc-result-inner{flex-direction:column;text-align:center;align-items:center;} }

/* Error */
.csc-error { margin:14px 22px; padding:12px 16px; background:#fff4f4; border:1px solid #f5c5c5; border-radius:8px; color:#b42424; font-size:14px; }