/* Shared quote form — built by quote-form.js into #quoteFormMount.
   Namespaced qf- so the old per-page form styles can't collide with it. */

.qf { display: grid; gap: 1rem; font-family: inherit; color: var(--text-primary, #f0ebe3); }
.qf *, .qf *::before, .qf *::after { box-sizing: border-box; }

.qf-progress { display: grid; gap: 0.45rem; }
.qf-progress-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.qf-progress-bar span { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background 0.3s; }
.qf-progress-bar span.on { background: var(--gold, #d4b860); }
.qf-progress-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim, #7a95ac); }

.qf-step { display: grid; gap: 1rem; }
.qf-step:focus { outline: none; }
.qf .qf-title { font-family: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; margin: 0; color: var(--text-primary, #f0ebe3); text-wrap: balance; }
.qf-lede { font-size: 0.82rem; line-height: 1.55; color: var(--text-muted, #9dbdd6); margin: -0.5rem 0 0; }

.qf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.qf-card {
  display: grid; gap: 0.2rem; justify-items: start; text-align: left;
  padding: 0.85rem 0.9rem; min-height: 88px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  color: inherit; font: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.qf-card:hover { border-color: rgba(212,184,96,0.5); background: rgba(212,184,96,0.06); }
.qf-card:active { transform: scale(0.98); }
.qf-card[aria-pressed="true"] { border-color: var(--gold, #d4b860); background: rgba(212,184,96,0.12); }
.qf-card i { font-size: 1.35rem; color: var(--gold, #d4b860); }
.qf-card b { font-size: 0.88rem; font-weight: 700; }
.qf-card small { font-size: 0.72rem; color: var(--text-dim, #7a95ac); line-height: 1.35; }

.qf-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid rgba(212,184,96,0.35); border-radius: 999px; font-size: 0.8rem; }
.qf-chip span { display: inline-flex; align-items: center; gap: 0.45rem; }
.qf-chip i { color: var(--gold, #d4b860); }

.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.qf-field { display: grid; gap: 0.35rem; }
.qf-field label, .qf-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #9dbdd6); }
.qf-field label small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-dim, #7a95ac); }
.qf input[type="text"], .qf input[type="tel"], .qf input[type="email"], .qf input[type="number"], .qf select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  color: var(--text-primary, #f0ebe3); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qf select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, #d4b860 50%), linear-gradient(135deg, #d4b860 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.qf select option { color: #0d1b2a; }
.qf input::placeholder { color: var(--text-dim, #7a95ac); }
.qf input:focus, .qf select:focus { outline: none; border-color: var(--gold, #d4b860); box-shadow: 0 0 0 3px rgba(212,184,96,0.18); }
.qf [aria-invalid="true"] { border-color: #e07a70 !important; }

.qf-range-head { display: flex; justify-content: space-between; align-items: baseline; }
.qf-range-head output { font-size: 1rem; font-weight: 800; color: var(--gold, #d4b860); font-variant-numeric: tabular-nums; }
.qf input[type="range"] { width: 100%; height: 32px; background: transparent; accent-color: var(--gold, #d4b860); cursor: pointer; }
.qf-range-ends { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-dim, #7a95ac); margin-top: -0.2rem; }

.qf-seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qf-seg button {
  flex: 1 1 auto; min-height: 40px; padding: 0.45rem 0.8rem;
  font: inherit; font-size: 0.8rem; color: inherit; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
}
.qf-seg button[aria-pressed="true"] { border-color: var(--gold, #d4b860); background: rgba(212,184,96,0.14); color: var(--gold-light, #e8cb7e); }

.qf-go { width: 100%; justify-content: center; min-height: 52px; font-size: 0.95rem; }
.qf-go[disabled] { opacity: 0.6; cursor: wait; }
.qf-back { justify-self: start; background: none; border: 0; padding: 0.25rem 0; font: inherit; font-size: 0.75rem; color: var(--text-dim, #7a95ac); cursor: pointer; }
.qf-back:hover { color: var(--text-muted, #9dbdd6); }
.qf-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; color: var(--gold, #d4b860); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qf-link[disabled] { color: var(--text-dim, #7a95ac); text-decoration: none; cursor: default; }

.qf-err { font-size: 0.8rem; color: #ef9a90; min-height: 0; margin: 0; }
.qf-err:empty { display: none; }
.qf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; font-size: 0.72rem; color: var(--text-muted, #9dbdd6); }
.qf-trust span { display: inline-flex; align-items: center; gap: 0.3rem; }
.qf-trust i { color: var(--gold, #d4b860); }
.qf-fine { font-size: 0.66rem; line-height: 1.5; color: var(--text-dim, #7a95ac); text-align: center; margin: 0; }

.qf-code { width: 100%; text-align: center; font-size: 1.7rem !important; letter-spacing: 0.55rem; font-variant-numeric: tabular-nums; min-height: 60px !important; color: var(--gold, #d4b860) !important; }
.qf-code-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.76rem; color: var(--text-dim, #7a95ac); }
.qf-status { font-size: 0.78rem; color: var(--text-muted, #9dbdd6); text-align: center; margin: 0; }
.qf-status:empty { display: none; }

.qf-extras { display: grid; gap: 0.9rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.qf-extras-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.qf-extras-head b { font-size: 0.85rem; }
.qf-extras-head small { font-size: 0.7rem; color: var(--text-dim, #7a95ac); }
.qf-saved { font-size: 0.7rem; color: #8fd1ae; }
.qf-saved:empty { display: none; }

.qf-done { text-align: center; justify-items: center; }
.qf-done > i { font-size: 3rem; color: var(--gold, #d4b860); }
.qf-done .qf-call { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--gold, #d4b860); text-decoration: none; }
.qf-done .qf-extras { text-align: left; width: 100%; }

.qf button:focus-visible, .qf a:focus-visible { outline: 2px solid var(--gold, #d4b860); outline-offset: 2px; }

@media (max-width: 420px) {
  .qf-cards { grid-template-columns: 1fr; }
  .qf-card { min-height: 0; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; }
  .qf-card i { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .qf * { transition: none !important; } }