/* SourcingPromo — /rfq/, /thank-you/ and /contact/: the inquiry form, the quote basket, the next steps. */

/* ---------- layout ---------- */
.form-layout{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:960px){
  .form-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
  .form-aside{position:sticky;top:5.5rem}
}
.form-main{min-width:0}
.form-section .wrap>h2{margin-bottom:.4rem}

/* ---------- panels ---------- */
.form-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.1rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:1.1rem;
  min-width:0;
}
.form-panel--sand{background:var(--sand)}
.form-panel__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem .9rem}
.form-panel__head h2{font-size:var(--step-2)}
.form-panel>h2{font-size:var(--step-2)}
.form-panel .note{max-width:58ch}

/* ---------- fields ---------- */
.form-fields{display:grid;gap:.9rem 1rem}
@media (min-width:560px){.form-fields{grid-template-columns:1fr 1fr}}
.form-required{color:var(--brand);font-weight:700}
.form-subblock{
  border-top:1px solid var(--line);padding-top:1.15rem;
  display:flex;flex-direction:column;gap:.7rem;min-width:0;
}
.form-subblock h3{font-size:var(--step-1)}
.form-subblock .note{max-width:60ch}
.form-file{
  width:100%;font:inherit;font-size:var(--step--1);color:var(--ink-2);
  background:var(--sand);border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:.6rem .7rem;cursor:pointer;
}
.form-file:hover{border-color:var(--ink-3);background:var(--sand-2)}
.form-file::file-selector-button{
  font:inherit;font-size:var(--step--1);font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:.35rem .7rem;margin-right:.7rem;cursor:pointer;
}
.form-progress{width:100%;height:.45rem;border:0;border-radius:var(--radius-pill);overflow:hidden;accent-color:var(--brand)}
.form-progress[hidden]{display:none}
.form-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  border-top:1px solid var(--line);padding-top:1.2rem;
}
.form-actions .note{max-width:34ch;margin:0}
.form-inquiry[data-state="success"] .form-status{color:var(--ok)}
.form-inquiry[data-state="submitting"] .form-status{color:var(--ink-3)}
.form-inquiry[data-state="error"] .form-status,
.form-inquiry[data-state="invalid"] .form-status{color:var(--brand-dark)}

/* ---------- quote basket ---------- */
.form-basket .note{font-size:var(--step--1)}
.form-basket__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.form-basket__list[hidden]{display:none}
.form-basket__item{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--sand);
}
.form-basket__item-main{flex:1 1 12rem;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.form-basket__name{font-size:.9375rem;font-weight:600;line-height:1.3;text-decoration:none}
.form-basket__name:hover{text-decoration:underline}
.form-basket__meta{margin:0}
.form-basket__find{align-self:flex-start;color:var(--brand-dark);font-weight:560}
.form-basket__qty{display:flex;align-items:center;gap:.4rem}
.form-basket__qty input[type=number]{
  width:5rem;padding:.35rem .45rem;font-size:.875rem;text-align:right;background:var(--paper);
}
.form-basket__remove{
  font:inherit;font-size:var(--step--1);font-weight:560;color:var(--ink-3);
  background:none;border:0;padding:.3rem .1rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.form-basket__remove:hover{color:var(--brand-dark)}
.form-basket__empty{
  display:flex;flex-direction:column;gap:.8rem;
  padding:1rem 1.1rem;border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--sand);color:var(--ink-2);
}
.form-basket__empty[hidden]{display:none}
.form-basket__empty p{margin:0}
.form-basket__empty .cluster{margin:0}

/* ---------- next steps ---------- */
.form-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;counter-reset:form-step}
.form-steps>li{position:relative;padding-left:2.3rem;counter-increment:form-step;min-width:0}
.form-steps>li::before{
  content:counter(form-step);position:absolute;left:0;top:.05rem;
  width:1.6rem;height:1.6rem;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-dark);
  font-size:.75rem;font-weight:700;display:grid;place-items:center;
}
.form-steps>li>strong{display:block;font-size:.9375rem;letter-spacing:-.01em;line-height:1.35}
.form-steps>li>span{display:block;margin-top:.2rem;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.form-steps--cards{margin-top:1.4rem;gap:1.25rem}
.form-steps--cards>li{padding-left:0;counter-increment:none}
.form-steps--cards>li::before{display:none}
.form-steps--cards .card__body{gap:.55rem}
.form-steps--cards h3{font-size:var(--step-1)}
.form-after{margin-top:1.25rem}

/* ---------- RFQ rows (page-rfq.php) ----------
   One row per product: a square thumbnail, the name and SKU, the quantity, the by-hand sentence and
   a remove button. From 900px up those sit on one line; below it each row is a card that stacks, so
   the page never scrolls sideways — not at 900px and not at 320px. A row whose product could not be
   read keeps its SKU and says so instead of pretending. */
.rfq-line{
  display:grid;gap:.5rem .9rem;align-items:start;
  grid-template-columns:3.5rem minmax(0,1fr);
  grid-template-areas:
    "thumb main"
    "qty   qty"
    "hand  hand"
    "remove remove";
}
@media (min-width:900px){
  .rfq-line{
    grid-template-columns:3.75rem minmax(0,1fr) 7rem auto;
    grid-template-areas:
      "thumb main qty remove"
      "thumb hand hand hand";
    align-items:center;
  }
}
.rfq-thumb{
  grid-area:thumb;width:3.5rem;height:3.5rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--sand-2);overflow:hidden;display:grid;place-items:center;
}
@media (min-width:900px){.rfq-thumb{width:3.75rem;height:3.75rem}}
.rfq-thumb__img{display:block;width:100%;height:100%;object-fit:cover}
/* The placeholder is a block, not an empty <img>: no broken-image icon, no layout jump. */
.rfq-thumb__ph{display:block;width:55%;height:55%;border-radius:var(--radius-sm);background:var(--line-strong);opacity:.6}
.rfq-line .form-basket__item-main{grid-area:main;min-width:0}
.rfq-line .form-basket__name{overflow-wrap:anywhere}
.rfq-line .form-basket__meta{overflow-wrap:anywhere}
.form-basket__item--missing{border-style:dashed}
.rfq-control{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.rfq-control>label{font-size:.75rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.rfq-control input[type=number]{padding:.35rem .45rem;font-size:.875rem;background:var(--paper)}
.rfq-line .rfq-control--qty{grid-area:qty;align-items:flex-start}
.rfq-control--qty input[type=number]{width:7rem;max-width:100%;text-align:right;font-variant-numeric:tabular-nums}
.rfq-hand{grid-area:hand;margin:0}
.rfq-line .form-basket__remove{grid-area:remove;justify-self:start;margin:0}
@media (min-width:900px){.rfq-line .form-basket__remove{justify-self:end;align-self:center}}
/* A refused quantity says why in words; the colour is the second signal, never the only one. */
.rfq-error{
  margin:.1rem 0 0;font-size:var(--step--1);font-weight:600;color:var(--brand-dark);
  max-width:32ch;
}
.rfq-error[hidden]{display:none}
.rfq-error::before{content:"\25B2";margin-right:.3em;font-size:.8em;vertical-align:.1em}
.rfq-control input[aria-invalid="true"]{border-color:var(--brand-dark);background:var(--brand-tint)}
.form-basket__exits{margin:0;gap:.6rem .9rem}

/* ---------- uploads ---------- */
/* The control is the first thing read in its field: the limits stand above it in a bordered line, and
   the input itself is a large dashed target with its own button. */
.form-limits{
  margin:0;padding:.5rem .65rem;font-size:var(--step--1);font-weight:560;line-height:1.45;
  color:var(--ink-2);background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.form-file{min-height:3.2rem;font-size:var(--step-0);font-weight:560;color:var(--ink)}
.form-file:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);background:var(--paper)}

/* ---------- focus ---------- */
.rfq-control input[type=number]:focus-visible,
.form-basket__remove:focus-visible,
.form-basket__find:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.form-status{font-size:var(--step--1);font-weight:560;margin:0}
.form-status:empty{display:none}

/* The empty state on /rfq/ is the theme's .empty block; it is hidden as soon as a row exists. */
.empty[hidden]{display:none}
.empty p+p{margin-top:.5rem}
.empty .cluster{justify-content:center;margin-top:.9rem}