/* ============================================================
   Request a Quote — configurator page styles
   Reuses design tokens from styles.css (:root vars).
   ============================================================ */

.q-page {
  min-height: 100vh;
  padding: 96px var(--pad) 80px;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(245,184,30,0.14), transparent 60%),
    var(--ink);
}
.q-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad);
  background: rgba(14,14,13,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.q-topbar img { height: 30px; width: auto; }
.q-topbar a.q-back {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone); opacity: 0.75;
}
.q-topbar a.q-back:hover { opacity: 1; color: var(--signal); }

.q-head { max-width: var(--shell-max); margin: 0 auto 40px; }
.q-head .kicker { color: var(--bone); margin-top: 12px; }
.q-head .kicker span { color: var(--signal); }
.q-head p { color: var(--bone); opacity: 0.7; max-width: 60ch; margin-top: 14px; font-size: 16px; line-height: 1.55; }

.q-load { max-width: 900px; margin: 40px auto; color: var(--bone); opacity: 0.8; font-family: var(--mono); letter-spacing: 0.08em; }
.q-load-err { color: var(--rust); opacity: 1; }

/* ---- Layout ---- */
.q-grid {
  max-width: var(--shell-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start;
}
@media (max-width: 900px) { .q-grid { grid-template-columns: 1fr; } }

.q-block {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
}
.q-step-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 16px;
}

/* ---- Sizes ---- */
.q-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .q-sizes { grid-template-columns: 1fr; } }
.q-size {
  text-align: left; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--ink-3);
  color: var(--bone); transition: border-color .2s, background .2s, transform .2s;
}
.q-size:hover { border-color: var(--signal); transform: translateY(-2px); }
.q-size.active { border-color: var(--signal); background: rgba(245,184,30,0.08); box-shadow: inset 0 0 0 1px var(--signal); }
.q-size-name { font-family: var(--display); font-size: 24px; text-transform: uppercase; line-height: 1; }
.q-size-spec { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; opacity: 0.6; margin-top: 8px; }

/* ---- Mounts ---- */
.q-mounts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .q-mounts { grid-template-columns: 1fr; } }
.q-mount {
  text-align: left; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--ink-3); color: var(--bone);
  transition: border-color .2s, background .2s, transform .2s;
}
.q-mount:hover { border-color: var(--signal); transform: translateY(-2px); }
.q-mount.active { border-color: var(--signal); background: rgba(245,184,30,0.08); }
.q-mount-name { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.q-mount-sub { font-size: 12px; opacity: 0.62; margin: 4px 0 10px; }
.q-mount-price { font-family: var(--mono); font-size: 13px; color: var(--signal); }

/* ---- Steppers ---- */
.q-stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.q-stepper:first-of-type { border-top: 0; }
.q-stepper.is-disabled { opacity: 0.42; }
.q-stepper-label { font-size: 15px; color: var(--bone); }
.q-stepper-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; opacity: 0.55; margin-top: 3px; }
.q-stepper-ctrl { display: inline-flex; align-items: center; gap: 4px; }
.q-stepper-ctrl button {
  width: 34px; height: 34px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--ink-3); color: var(--bone);
  font-size: 20px; line-height: 1; display: grid; place-items: center;
  transition: border-color .2s, background .2s;
}
.q-stepper-ctrl button:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
.q-stepper-ctrl button:disabled { opacity: 0.35; cursor: not-allowed; }
.q-stepper-val { min-width: 34px; text-align: center; font-family: var(--display); font-size: 22px; color: var(--signal); }

/* ---- Toggle ---- */
.q-toggle {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--ink-3); color: var(--bone);
  transition: border-color .2s, background .2s;
}
.q-toggle:hover:not(.is-disabled) { border-color: var(--signal); }
.q-toggle.active { border-color: var(--signal); background: rgba(245,184,30,0.08); }
.q-toggle.is-disabled { opacity: 0.42; cursor: not-allowed; }
.q-toggle-box {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 5px;
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  color: var(--ink); background: transparent; font-size: 15px; font-weight: 700;
}
.q-toggle.active .q-toggle-box { background: var(--signal); border-color: var(--signal); }
.q-toggle-name { display: block; font-size: 15px; }
.q-toggle-sub { display: block; font-size: 12px; opacity: 0.6; margin-top: 2px; }

/* ---- Summary (sticky) ---- */
.q-summary {
  position: sticky; top: 84px;
  background: var(--bone); color: var(--ink);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.65);
}
.q-summary-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.q-plate-title { font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.q-plate-no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.6; }

.q-lines { display: grid; grid-template-columns: 1fr auto auto; column-gap: 14px; row-gap: 8px; margin-bottom: 14px; font-size: 13px; }
.q-line { display: contents; }
.q-line-label { opacity: 0.8; }
.q-line-qty { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.q-line-total { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; opacity: 0.72; }

.q-totals { border-top: 1px solid rgba(14,14,13,0.15); padding-top: 12px; margin-bottom: 14px; }
.q-total-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.q-total-row.muted { opacity: 0.6; font-size: 12px; }
.q-total-row.grand { font-family: var(--display); font-size: 26px; text-transform: uppercase; margin-top: 8px; }

.q-deposit {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--bone);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
  border-left: 4px solid var(--signal);
}
.q-deposit-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.q-deposit-sub { font-size: 12px; opacity: 0.7; margin-top: 3px; }
.q-deposit-amt { font-family: var(--display); font-size: 24px; color: var(--bone); }

.q-meta { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.q-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; padding: 8px 10px; background: rgba(14,14,13,0.05); border-radius: var(--radius); }
.q-meta-row span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.q-meta-row strong { text-align: right; }
.q-fulfil { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; text-align: center; margin: 0 0 16px; }

/* ---- Contact ---- */
.q-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.q-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 4px; }
.q-field input, .q-field textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid rgba(14,14,13,0.2); background: #fff; color: var(--ink);
  font-family: var(--body); font-size: 14px; resize: vertical;
}
.q-field input:focus, .q-field textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }

.q-error {
  margin-bottom: 10px; padding: 10px 12px; border-radius: var(--radius);
  background: rgba(194,85,42,0.12); border: 1px solid rgba(194,85,42,0.4);
  color: #7a2f14; font-size: 13px;
}
.q-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 20px; border-radius: var(--radius);
  background: var(--ink); color: var(--signal);
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform .2s, background .2s;
}
.q-submit:hover:not(:disabled) { transform: translateY(-1px); background: #000; }
.q-submit:disabled { opacity: 0.6; cursor: progress; }
.q-legal { font-size: 11px; opacity: 0.55; text-align: center; margin: 10px 0 0; line-height: 1.4; }
/* styles.css resets anchors to `color: inherit; text-decoration: none`, so the
   fine-print terms links need to be re-marked as links explicitly. */
.q-legal a, .q-done-fine a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.q-legal a:hover, .q-done-fine a:hover { text-decoration-thickness: 2px; }

/* ---- Done ---- */
.q-done { max-width: 560px; margin: 40px auto; text-align: center; color: var(--bone);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 48px 32px; }
.q-done-check { font-size: 56px; color: var(--signal); line-height: 1; margin-bottom: 12px; }
.q-done-title { color: var(--bone); font-size: 34px; letter-spacing: 0.03em; }
.q-done-sub { opacity: 0.75; margin: 12px auto 24px; max-width: 42ch; line-height: 1.55; }
.q-done-figures { display: flex; justify-content: center; gap: 40px; margin-bottom: 22px; }
.q-done-figures span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 4px; }
.q-done-figures strong { font-family: var(--display); font-size: 26px; color: var(--signal); }
.q-done-fine { font-size: 12px; opacity: 0.55; margin-bottom: 24px; }