/* ==========================================================================
   Wyelee — /quote/ only: compact header, two-column layout with the live
   quote sheet rail, step-sheet legends. Everything else comes from site.css.
   ========================================================================== */

/* ---------- compact header ---------- */
.quote-head { padding-block: clamp(16px, 3vw, 32px) clamp(24px, 4vw, 44px); }
.quote-head .lead { margin-bottom: 0; }
.quote-strip { margin-top: 22px; max-width: 520px; }
.quote-strip .tape { margin-top: 0; }
.quote-strip .tape .labels { font-size: .72rem; }
@media (min-width: 1024px) { .quote-strip { display: none; } }

/* ---------- layout: form 1fr + sticky rail 300px ---------- */
.quote-section { padding-top: clamp(20px, 3vw, 36px); }
.quote-layout { display: grid; gap: 32px; align-items: start; }
/* the whole sheet stays a single column at every width (also 768–1023, where the rail is hidden) */
.quote-main { min-width: 0; max-width: 680px; }
.quote-rail { display: none; }
@media (min-width: 1024px) {
  /* form track stops at 680px; the rail keeps the right edge */
  .quote-layout { grid-template-columns: minmax(0, 680px) 300px; gap: 48px; justify-content: space-between; }
  .quote-rail { display: block; position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ---------- form sheets ---------- */
.form-body { display: grid; gap: 22px; }
.qform .step-panel { gap: 20px; }
/* a floated legend is laid out as a normal grid item instead of straddling the fieldset border */
.qform .step-panel > legend { float: left; width: 100%; margin: 0 0 2px; line-height: 1.2; }
.qform .field > legend { float: left; width: 100%; padding: 0; }
.legend-pict { display: inline-block; vertical-align: middle; width: 40px; height: 40px; margin-right: 12px; padding: 7px; border-radius: 12px; background: var(--fog); color: var(--navy); }
.legend-pict svg { width: 100%; height: 100%; stroke-width: 2.6; }
.legend-pict.i24 svg { stroke-width: 1.1; }
.opt { font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--ink-3); }
.qform .field .hint a { color: var(--green-text); font-weight: 600; }
/* brand "Other" free-text field: js/quote.js adds .is-open while the Other chip is ticked; without JS it simply shows.
   A class, not [hidden]: .field's display:grid would defeat the attribute. */
.qform .brand-other { margin-top: 6px; }
.js .qform .brand-other:not(.is-open) { display: none; }
/* service chips carry a small manual pictogram (64-grid, so a heavier stroke than .ic) */
.svc { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.choice input:checked + span .svc { color: #8ED99A; }
.qform .form-foot { padding-top: 4px; }
@media (max-width: 559px) {
  .qform .form-foot { margin-bottom: 40px; }
  .qform .form-foot .btn { width: 100%; }
}
/* keep the floating WhatsApp button out of the way while someone is typing */
body.is-typing .wa-float { opacity: 0; pointer-events: none; }

/* ---------- live quote sheet (rail) ---------- */
.quote-sheet {
  position: relative; padding: 32px 24px 22px;
  background-color: #fff;
  background-image: radial-gradient(rgba(29, 21, 62, .09) 1px, transparent 1px);
  background-size: 12px 12px;
}
/* perforated top edge, same idea as .slip::before */
.quote-sheet::before { content: ""; position: absolute; left: 32px; right: 22px; top: 13px; border-top: 2px dashed var(--line-2); }
.quote-sheet .scissors { position: absolute; top: 4px; left: 8px; width: 20px; height: 20px; stroke: var(--ink-3); }
/* the W isotipo as a faint stamp, top-right */
.quote-sheet::after { content: ""; position: absolute; top: 22px; right: 18px; width: 48px; height: 48px; background: url("../img/logo/wyelee-isotipo-color.svg") center / contain no-repeat; opacity: .12; pointer-events: none; }
.quote-sheet h2 { font-size: 1.15rem; margin: 6px 0 2px; letter-spacing: -.01em; }
.qs-sub { font-size: .88rem; color: var(--ink-3); margin: 0 0 12px; }
.qs-rows { margin: 0; }
.qs-rows > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line-2); }
.qs-rows > div:last-child { border-bottom: 0; }
.qs-rows dt { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.qs-rows dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; transition: color .15s; }
.qs-rows dd.is-empty { color: var(--line-2); font-weight: 400; }
.qs-foot { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 12px; border-top: 1.5px solid var(--navy); font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--green-text); }

/* ---------- what happens next (rail) ---------- */
.quote-next { margin-top: 24px; padding: 0 4px; }
.quote-next .fig { margin: 0; }
.quote-next .tape { margin-top: 8px; }
.quote-next .tape .labels { font-size: .66rem; letter-spacing: .04em; gap: 6px; line-height: 1.25; }
.quote-links { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; gap: 10px; }
.quote-links li { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: .97rem; }
.quote-links .ic { color: var(--green-text); }
.quote-links a { color: var(--navy); text-decoration: none; }
.quote-links a:hover { text-decoration: underline; }
.quote-next .note { font-size: .95rem; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .qs-rows dd { transition: none; } }