/* BSDyno quote micro-flow + configurator styles (task-70).
 *
 * Loaded only on pages that render `[data-quote-flow]` containers (PDPs, offers) and on
 * /build-rack.html. Everything is namespaced `qf-` so it cannot collide with
 * styles.css / conversion.css / catalog-overhaul.css / linecard.css.
 * Mobile-first; no horizontal overflow at 390px.
 */

/* ---------------------------------------------------------------- inline form */
.qf-flow { margin: 16px 0 0; }
.qf-flow * { box-sizing: border-box; }
.qf-flow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.qf-flow__title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink, #0b1220); }
.qf-flow__sla {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  background: #ecfdf3; color: #15803d; font-size: .72rem; font-weight: 800;
  letter-spacing: .02em; white-space: nowrap;
}
.qf-flow__sla::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
}
.qf-flow__price { font-size: .86rem; color: #46506b; margin: 0 0 10px; }
.qf-flow__price b { color: #0b1220; font-size: 1rem; }
.qf-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .qf-grid.qf-2 { grid-template-columns: 90px minmax(0, 1fr); }
  .qf-grid.qf-2-name { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.qf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qf-field > label { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6a738c; }
.qf-field input, .qf-field textarea, .qf-field select {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 10px;
  border: 1.5px solid #d6dbeb; border-radius: 10px; background: #fff; color: #0b1220;
  font: inherit; font-size: .9rem;
}
.qf-field textarea { min-height: 64px; resize: vertical; }
.qf-field input:focus, .qf-field textarea:focus, .qf-field select:focus {
  outline: none; border-color: #1b1bff; box-shadow: 0 0 0 3px rgba(27, 27, 255, .12);
}
.qf-field.qf-bad input, .qf-field.qf-bad textarea { border-color: #dc2626; }
.qf-err { display: none; font-size: .74rem; color: #b91c1c; }
.qf-field.qf-bad .qf-err { display: block; }
.qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.qf-actions .qf-note { flex: 1 1 180px; min-width: 0; font-size: .76rem; color: #6a738c; line-height: 1.45; }
.qf-btn {
  appearance: none; border: 0; border-radius: 10px; padding: 11px 16px;
  font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer;
  background: #1b1bff; color: #fff; min-height: 42px;
}
.qf-btn:hover { background: #1414cc; }
.qf-btn:disabled { opacity: .6; cursor: progress; }
.qf-btn.qf-ghost { background: #fff; color: #0b1220; border: 1.5px solid #d6dbeb; }
.qf-btn.qf-ghost:hover { border-color: #1b1bff; color: #1b1bff; background: #fff; }
.qf-msg { margin: 10px 0 0; font-size: .84rem; line-height: 1.5; border-radius: 10px; padding: 10px 12px; }
.qf-msg[hidden] { display: none !important; }
.qf-msg.qf-msg-err { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }
.qf-msg.qf-msg-warn { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }
.qf-tier { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid #1b1bff; background: #f5f6ff; border-radius: 0 10px 10px 0; font-size: .78rem; line-height: 1.55; color: #37405a; }
.qf-tier a { color: #1b1bff; font-weight: 700; text-decoration: none; }
.qf-tier a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- confirmation */
.qf-done { border: 1px solid #bbf7d0; background: #f7fdf9; border-radius: 14px; padding: 16px; }
.qf-done__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.qf-done__head h3 { margin: 0; font-size: 1rem; color: #0b1220; }
.qf-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; font-weight: 800; color: #0b1220; background: #fff;
  border: 1px dashed #86efac; border-radius: 8px; padding: 3px 8px;
}
.qf-done__meta { margin: 0 0 10px; font-size: .8rem; color: #46506b; }
.qf-lines { width: 100%; border-collapse: collapse; font-size: .82rem; margin: 8px 0 0; }
.qf-lines th, .qf-lines td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e8f3ec; vertical-align: top; }
.qf-lines th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #6a738c; }
.qf-lines td.qf-num, .qf-lines th.qf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qf-lines tbody tr:last-child td { border-bottom: 0; }
.qf-done__total { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d7ecdf; font-size: .88rem; }
.qf-done__total b { font-size: 1rem; }
.qf-steps { margin: 12px 0 0; padding-left: 20px; font-size: .82rem; line-height: 1.6; color: #37405a; }
.qf-steps li { margin-bottom: 3px; }
.qf-callback { margin: 12px 0 0; font-size: .82rem; color: #46506b; }
.qf-callback a { color: #1b1bff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.qf-done__again { margin: 12px 0 0; }
.qf-toggle { background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; font-weight: 700; color: #1b1bff; cursor: pointer; text-decoration: underline; }

/* ---------------------------------------------------------------- sticky mobile CTA */
.qf-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #0b1220; color: #fff; box-shadow: 0 -6px 18px rgba(11, 18, 32, .18);
}
.qf-sticky__label { font-size: .78rem; line-height: 1.3; min-width: 0; }
.qf-sticky__label b { display: block; font-size: .95rem; }
.qf-sticky .qf-btn { flex: 0 0 auto; background: #fff; color: #0b1220; }
@media (max-width: 760px) {
  body.qf-has-sticky .qf-sticky { display: flex; }
  body.qf-has-sticky { padding-bottom: 68px; }
}

/* ---------------------------------------------------------------- configurator */
.qf-build { display: block; }
.qf-build__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
  .qf-build__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.qf-slot { border: 1px solid #e3e6f2; border-radius: 14px; padding: 14px; background: #fff; margin-bottom: 14px; }
.qf-slot__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; justify-content: space-between; margin-bottom: 4px; }
.qf-slot__head h2 { margin: 0; font-size: 1rem; }
.qf-slot__req { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6a738c; }
.qf-slot__hint { margin: 2px 0 10px; font-size: .8rem; color: #5b6479; line-height: 1.5; }
.qf-options { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .qf-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.qf-opt {
  position: relative; display: grid; gap: 4px; padding: 11px 12px 11px 38px;
  border: 1.5px solid #e3e6f2; border-radius: 12px; background: #fff; cursor: pointer; min-width: 0;
}
.qf-opt:hover { border-color: #b9c0ee; }
.qf-opt input { position: absolute; left: 13px; top: 14px; width: 17px; height: 17px; margin: 0; accent-color: #1b1bff; }
.qf-opt__title { font-size: .84rem; font-weight: 700; color: #0b1220; line-height: 1.35; overflow-wrap: anywhere; }
.qf-opt__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .74rem; color: #6a738c; }
.qf-opt__price { font-size: .84rem; font-weight: 800; color: #0b1220; font-variant-numeric: tabular-nums; }
.qf-opt__price q { quotes: none; }
.qf-opt.qf-quote .qf-opt__price { color: #92400e; }
.qf-opt:has(input:checked) { border-color: #1b1bff; box-shadow: 0 0 0 3px rgba(27, 27, 255, .1); }
.qf-opt.qf-none { padding-left: 12px; color: #5b6479; }
.qf-qty { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.qf-qty input { width: 62px; min-height: 34px; padding: 5px 6px; border: 1.5px solid #d6dbeb; border-radius: 8px; font: inherit; font-size: .84rem; }
.qf-qty span { font-size: .72rem; color: #6a738c; }

.qf-summary { position: static; }
@media (min-width: 1000px) { .qf-summary { position: sticky; top: 16px; } }
.qf-summary__card { border: 1px solid #e3e6f2; border-radius: 14px; background: #fff; padding: 14px; }
.qf-summary__card h2 { margin: 0 0 8px; font-size: 1rem; }
.qf-bom { list-style: none; margin: 0 0 10px; padding: 0; font-size: .82rem; }
.qf-bom li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f2f9; }
.qf-bom li:last-child { border-bottom: 0; }
.qf-bom__what { min-width: 0; color: #37405a; overflow-wrap: anywhere; }
.qf-bom__what b { color: #0b1220; }
.qf-bom__amt { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: #0b1220; }
.qf-bom__amt.qf-quote { color: #92400e; font-weight: 800; }
.qf-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 2px solid #0b1220; }
.qf-total span { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #6a738c; font-weight: 800; }
.qf-total b { font-size: 1.25rem; color: #0b1220; font-variant-numeric: tabular-nums; }
.qf-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: .78rem; line-height: 1.45; }
.qf-checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; color: #46506b; }
.qf-checks li::before { content: "•"; color: #1b1bff; font-weight: 800; }
.qf-checks li.qf-ok::before { content: "\2713"; color: #15803d; }
.qf-checks li.qf-warn::before { content: "!"; color: #b45309; }
.qf-checks li.qf-muted::before { content: "\2013"; color: #9aa1b8; }
.qf-legend { margin: 10px 0 0; font-size: .74rem; color: #6a738c; line-height: 1.5; }
.qf-empty { font-size: .84rem; color: #5b6479; padding: 8px 0; }
/* sticky bar auto-hides while the real form is on screen */
@media (max-width: 760px) {
  body.qf-has-sticky.qf-sticky-hidden .qf-sticky { display: none; }
}

/* ------------------------------------------------------------------ compact CTA variant
   Used in offer grids: one button per card, expands to the full form on click. */
.qf-cta .qf-flow__head { margin-bottom: 2px; }
.qf-cta .qf-flow__title { font-size: .95rem; }
.qf-cta .qf-flow__price { margin: 2px 0 8px; font-size: .82rem; }
.qf-cta .qf-actions { margin-top: 0; gap: 8px; }
.qf-cta .qf-btn { padding: 9px 13px; font-size: .84rem; min-height: 38px; }
.qf-cta .qf-note { font-size: .74rem; flex-basis: 100%; }

/* The whole option card is the click target. Letting the tiny radio also receive the click
   double-toggles it through the wrapping <label> in Chromium, so the dot is pointer-transparent:
   a click anywhere on the card (dot included) toggles once. Keyboard access is unaffected
   (the input stays focusable and Space still selects it). */
.qf-opt input[type="radio"] { pointer-events: none; }