/* The quote request feature: the form card that template-parts/rfq-form.php
   renders and the home page reuses, the field grid, the failure line, and the
   /request-a-quote/ page layout. Colours, radii and spacing come from
   assets/css/tokens.css; the card, the two-column field grid and the type
   sizes follow the approved design (网站设计.html .rfq-form / .field-grid). */

/* ---------- The form card ---------- */
.rfq-form{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);padding:30px;box-shadow:0 20px 45px rgb(117 88 60 / 10%)}
.rfq-form__title{font-family:var(--font-display);font-size:1.3rem;line-height:1.25;letter-spacing:-.027em}
.rfq-form__intro{margin-top:var(--space-xs);font-size:.79rem;color:var(--muted)}
.rfq-form__feedback{margin-top:var(--space-sm);padding:11px 14px;border-left:3px solid var(--clay);border-radius:var(--radius-control);background:var(--cream);color:var(--clay-dark);font-size:.82rem}
.rfq-form__note{margin-top:var(--space-xs);font-size:.72rem;color:var(--muted)}
.rfq-form .btn{margin-top:var(--space-md)}

/* ---------- Fields ---------- */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm) var(--space-md);margin-top:var(--space-md)}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-display);font-size:.71rem;font-weight:700}
.field__required{margin-left:2px;color:var(--clay)}
.field input,.field textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);color:var(--ink);font-size:.85rem}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--clay)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field__optional{margin-left:6px;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field__hint{margin:0;font-size:.7rem;line-height:1.5;color:var(--muted)}
/* The attachment picker is the site's own control. A browser draws its file
   control in the browser's own language — a Chinese-locale visitor reads a
   Chinese button on an English page — and neither lang nor CSS can change that,
   so the button and the status line are markup and the real input lies over them
   invisibly: the label still opens it, the keyboard still reaches it, and the
   form still posts with no JavaScript (assets/js/file-field.js only writes the
   chosen names into the status line). */
.file-field{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);cursor:pointer}
.file-field:hover{border-color:var(--clay)}
.file-field:focus-within{border-color:var(--clay);outline:2px solid var(--clay);outline-offset:2px}
.file-field__input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;background:none;opacity:0;cursor:pointer}
.file-field__button{flex:none;padding:7px 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--cream);color:var(--ink);font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.file-field:hover .file-field__button{border-color:var(--clay);color:var(--clay)}
.file-field__status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.79rem;color:var(--muted)}
.file-field--filled .file-field__status{color:var(--ink)}
.file-field--over .file-field__status{color:var(--clay-dark)}

/* ---------- The /request-a-quote/ page ---------- */
.rfq-page{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--space-xl);align-items:start}
.rfq-page__lead{margin-top:var(--space-xs);max-width:560px;color:var(--muted)}
.rfq-aside{padding:var(--space-lg);background:var(--cream);border-radius:var(--radius-card)}
.rfq-aside__title{font-size:1.05rem;letter-spacing:-.02em}
.rfq-aside__text{margin-top:var(--space-xs);font-size:.82rem;color:var(--muted)}
.rfq-aside__list{display:grid;gap:var(--space-sm);margin:var(--space-md) 0 0;padding:0;list-style:none}
.rfq-aside__item{display:grid;gap:2px}
.rfq-aside__label{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.rfq-aside__value{font-size:.88rem;overflow-wrap:anywhere}
a.rfq-aside__value:hover{color:var(--clay)}

/* ---------- Narrow screens ---------- */
@media (max-width:900px){
  .rfq-page{grid-template-columns:1fr;gap:var(--space-lg)}
  .field-grid{grid-template-columns:1fr;gap:var(--space-sm)}
}
@media (max-width:520px){
  .rfq-form{padding:22px 18px}
}

/* ---------- The confirmation page (/thank-you/) ---------- */
.page-head__lead{margin-top:var(--space-xs);max-width:640px;color:var(--muted)}
.quote-reference{display:inline-flex;align-items:baseline;gap:12px;margin:var(--space-xs) 0 var(--space-md);padding:14px 20px;background:var(--cream);border-radius:var(--radius-control)}
.quote-reference__label{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.quote-reference__value{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.02em}
.next-steps{display:grid;gap:10px;max-width:680px;margin:0;padding-left:20px;font-size:.9rem}
.quote-thanks__actions{display:flex;flex-wrap:wrap;gap:12px;margin:var(--space-lg) 0 0}

/* ---------- The /contact/ page ---------- */
/* The page reuses the /request-a-quote/ layout; only the aside's closing
   pointer and its button need their own spacing. */
.contact-aside__pointer{margin-top:var(--space-md);font-size:.82rem;color:var(--muted)}
.contact-aside__cta{margin-top:var(--space-sm)}