/* ORS Clean — mobile quote flow (BETA / staging). Namespaced .qf-* so nothing
   here can touch the page's existing inline CSS. Primary blue = site var --blue. */

.qf-scope {
  --qf-blue: var(--blue, #1a6bde);
  --qf-ink: #111218;
  --qf-bg: #F7F6F3;
  --qf-card: #FFFFFF;
  --qf-border: #E6E4DE;
  --qf-sel-fill: #EAF0FC;
  --qf-sel-text: #1E4491;
  --qf-sel-border: #3469D7;   /* selected-state accent only, per spec §1.2 */
  --qf-body: #33353F;
  --qf-secondary: #4F515C;
  --qf-success: #1E7A5A;
  --qf-error: #B3261E;
  --qf-safe: env(safe-area-inset-bottom, 0px);
}

/* ---------- reset within scope ---------- */
.qf-scope, .qf-scope * { box-sizing: border-box; }
/* :where() keeps this reset at zero element-specificity so component button
   classes (.qf-btn-primary etc.) win their own background/border. */
.qf-scope :where(button) { font: inherit; cursor: pointer; border: 0; background: none; }
.qf-scope :where(.qf-iconbtn) { background: none; }
.qf-scope [hidden] { display: none !important; }

/* ================= 1.1 sticky action bar ================= */
.qf-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: #fff; border-top: 1px solid var(--qf-border);
  padding: 12px 16px calc(18px + var(--qf-safe));
  transform: translateY(130%); transition: transform .28s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.qf-bar.qf-bar--in { transform: translateY(0); }
.qf-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  width: 100%; min-height: 56px; border-radius: 13px;
  background: var(--qf-blue); color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: .2px;
}
.qf-btn-primary .qf-dim { font-weight: 400; opacity: .8; }
.qf-btn-primary:active { filter: brightness(.94); }
.qf-bar__text { margin: 9px 0 0; text-align: center; font-size: 13px; color: var(--qf-secondary); }
.qf-bar__text a { color: var(--qf-blue); text-decoration: none; font-weight: 600; }

/* ================= overlay screens (steps / confirm) ================= */
.qf-screen {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--qf-bg); color: var(--qf-body);
  font-family: 'DM Sans', system-ui, sans-serif;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.qf-screen.qf-open { opacity: 1; visibility: visible; }

.qf-header {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 6px; background: var(--qf-bg);
  border-bottom: 1px solid var(--qf-border);
}
.qf-iconbtn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--qf-ink);
}
.qf-iconbtn svg { stroke: currentColor; }
.qf-step-label { font-size: 14px; font-weight: 600; color: var(--qf-ink); }

.qf-progress { display: flex; gap: 6px; padding: 12px 20px 0; }
.qf-progress span { height: 4px; flex: 1; border-radius: 2px; background: #DEDCD4; }
.qf-progress span.qf-fill { background: var(--qf-sel-border); }

.qf-body { padding: 8px 20px 28px; max-width: 560px; width: 100%; margin: 0 auto; flex: 1; }
.qf-h1 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; color: var(--qf-ink);
  font-size: 34px; line-height: 1.05; letter-spacing: .5px; margin: 18px 0 8px; }
.qf-sub { font-size: 15px; line-height: 1.5; color: var(--qf-secondary); margin: 0 0 18px; }

/* ---------- 1.2 services multi-select ---------- */
.qf-services { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.qf-service {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  min-height: 56px; padding: 0 16px; border-radius: 13px;
  background: #fff; border: 1px solid var(--qf-border); color: var(--qf-body);
}
.qf-service .qf-box {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid #C9C7BF; display: flex; align-items: center; justify-content: center;
}
.qf-service .qf-box svg { opacity: 0; stroke: #fff; }
.qf-service .qf-label { flex: 1; font-size: 16px; font-weight: 500; }
.qf-service .qf-from { display: block; font-size: 12px; color: var(--qf-secondary); font-weight: 400; margin-top: 2px; }
.qf-service[aria-checked="true"] {
  background: var(--qf-sel-fill); border: 2px solid var(--qf-sel-border);
}
.qf-service[aria-checked="true"] .qf-label { color: var(--qf-sel-text); font-weight: 700; }
.qf-service[aria-checked="true"] .qf-box { background: var(--qf-sel-border); border-color: var(--qf-sel-border); }
.qf-service[aria-checked="true"] .qf-box svg { opacity: 1; }

.qf-discount {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--qf-success); font-weight: 600;
  margin: 4px 2px 14px;
}
.qf-discount svg { stroke: var(--qf-success); flex: none; }

/* ---------- footer / primary button inside screens ---------- */
.qf-actions { position: sticky; bottom: 0; padding: 12px 20px calc(16px + var(--qf-safe));
  background: linear-gradient(to top, var(--qf-bg) 70%, transparent); max-width: 560px; margin: 0 auto; width: 100%; }
.qf-actions .qf-btn-primary { min-height: 54px; border-radius: 13px; }
.qf-btn-primary[disabled] { opacity: .45; cursor: default; }

/* ---------- 1.3 address + contact ---------- */
.qf-field-wrap { margin: 0 0 16px; }
.qf-name-row { display: flex; gap: 10px; }
.qf-name-row .qf-name-col { flex: 1; min-width: 0; }
.qf-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--qf-ink); margin: 0 2px 6px; }
.qf-input {
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: 13px;
  border: 1px solid var(--qf-border); background: #fff; color: var(--qf-body);
  font-size: 16px; font-family: inherit;
}
.qf-input:focus { outline: 2px solid var(--qf-blue); outline-offset: 1px; border-color: var(--qf-blue); }
.qf-input.qf-invalid { border-color: var(--qf-error); }
.qf-textarea {
  min-height: 84px; padding: 13px 16px; line-height: 1.4;
  resize: vertical; -webkit-appearance: none;
}
.qf-optional { font-weight: 400; color: var(--qf-secondary); }
.qf-help { font-size: 13px; color: var(--qf-secondary); margin: 6px 2px 0; }
.qf-fielderror { font-size: 13px; color: var(--qf-error); margin: 6px 2px 0; }

.qf-trust { background: #fff; border: 1px solid var(--qf-border); border-radius: 15px;
  padding: 14px 16px; margin: 20px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.qf-trust-row { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--qf-body); }
.qf-trust-row svg { flex: none; stroke: var(--qf-success); }

/* ---------- 1.4 confirmation ---------- */
.qf-confirm-body { text-align: center; padding-top: 8px; }
.qf-checkcircle { width: 72px; height: 72px; border-radius: 50%; background: var(--qf-blue);
  display: flex; align-items: center; justify-content: center; margin: 20px auto 6px; }
.qf-checkcircle svg { stroke: #fff; }
.qf-echo { background: #fff; border: 1px solid var(--qf-border); border-radius: 13px;
  padding: 14px 16px; margin: 16px auto; text-align: left; max-width: 460px; }
.qf-echo dt { font-size: 12px; color: var(--qf-secondary); text-transform: uppercase; letter-spacing: .4px; }
.qf-echo dd { margin: 2px 0 12px; font-size: 15px; color: var(--qf-ink); font-weight: 600; }
.qf-echo dd:last-child { margin-bottom: 0; }
.qf-next { text-align: left; background: #fff; border: 1px solid var(--qf-border); border-radius: 13px;
  padding: 6px 16px; margin: 16px auto; max-width: 460px; }
.qf-next li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--qf-border);
  font-size: 14px; line-height: 1.4; color: var(--qf-body); list-style: none; }
.qf-next li:last-child { border-bottom: 0; }
.qf-next .qf-num { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--qf-sel-fill); color: var(--qf-sel-text); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.qf-btn-secondary { display: block; width: 100%; min-height: 52px; border-radius: 13px;
  border: 1px solid var(--qf-border); background: #fff; color: var(--qf-ink);
  font-size: 16px; font-weight: 600; text-align: center; line-height: 52px; text-decoration: none; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  .qf-bar, .qf-screen { transition: none; }
  .qf-bar { transform: none; opacity: 0; }
  .qf-bar.qf-bar--in { opacity: 1; }
}

/* ================= desktop widen ================= */
@media (min-width: 720px) {
  .qf-bar { padding-left: max(16px, calc(50vw - 340px)); padding-right: max(16px, calc(50vw - 340px)); }
  .qf-bar__inner, .qf-actions .qf-btn-primary { max-width: 680px; margin: 0 auto; }
}

/* ===== Staging only: suppress the copied page's native conversion UI so the
   new flow is the single sticky action (§1.1). This file loads only on the
   staging page, so these plain selectors are scoped to staging in practice. */
.sticky-bar { display: none !important; }