/* Davai Parts — customer-facing styles.
   Direction: "parts label". Cool label paper, stamped-ink navy, signal yellow (the same yellow
   suppliers fill in on the RFQ sheet). Signature: the VIN field drawn as a riveted VIN plate.

   Components (use these classes in customer templates):
     .hero > h1 + p.lede          headline block
     ol.steps > li                 the 3-step process (it is a real sequence)
     .slip                         paper card holding a form or a quotation
     .field > label + input/select/textarea + .hint + .error
     .vin-plate > input            stamped VIN plate input (+ .vin-count live counter)
     .btn / .btn-go                buttons (.btn-go = primary yellow)
     table.lines                   quotation lines; td.num for right-aligned figures
     dl.totals                     subtotal rows; .grand for the grand total
     .notice / .notice.ok / .notice.warn   inline status message
*/

:root {
  --paper: #f5f6f3;
  --card: #ffffff;
  --ink: #13233c;
  --ink-soft: #4a5a70;
  --steel: #c7ced8;
  --signal: #ffc915;
  --signal-deep: #e0a800;
  --go: #1d7a52;
  --stop: #b3261e;
  --radius: 10px;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
}
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--signal-deep); outline-offset: 2px; }

/* Top bar + wordmark */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; background: var(--ink); color: #fff;
}
.wordmark {
  font: 800 26px/1 var(--display); letter-spacing: .04em; color: #fff; text-decoration: none;
}
.wordmark span { color: var(--signal); margin-left: .18em; }
.topbar a.chat { color: #fff; font-weight: 600; font-size: 15px; }

.page { max-width: 1080px; margin: 0 auto; padding: 28px 16px 56px; }
@media (min-width: 900px) {
  .page.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
}

/* Headline */
.hero h1 {
  font: 800 clamp(40px, 7vw, 64px)/0.95 var(--display);
  letter-spacing: .01em; text-transform: uppercase; margin: 8px 0 16px;
}
.hero .lede { font-size: 18px; color: var(--ink-soft); max-width: 34ch; margin: 0 0 24px; }

ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
ol.steps li {
  counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline;
  font-weight: 500;
}
ol.steps li::before {
  content: counter(step); font: 700 20px/34px var(--display); text-align: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--signal); color: var(--ink);
}

/* Paper card */
.slip {
  background: var(--card); border: 1px solid var(--steel); border-radius: var(--radius);
  padding: 22px 18px; box-shadow: 0 1px 0 rgba(19, 35, 60, .06), 0 12px 32px -18px rgba(19, 35, 60, .35);
}
@media (min-width: 600px) { .slip { padding: 28px; } }
.slip h2 { font: 800 28px/1 var(--display); text-transform: uppercase; margin: 0 0 18px; letter-spacing: .02em; }

/* Form fields */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=number],
.field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--steel); border-radius: 8px; padding: 12px 14px; min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(255, 201, 21, .55); }
.field .hint { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.field .error, .errorlist { color: var(--stop); font-size: 14px; font-weight: 600; margin: 6px 0 0; padding: 0; list-style: none; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Signature: VIN plate */
.vin-plate {
  position: relative; padding: 12px 22px; border-radius: 6px;
  background:
    radial-gradient(circle at 10px 50%, #8d96a3 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 10px) 50%, #8d96a3 0 3px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e9ecef, #cfd5dc);
  border: 1px solid #aab3be; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08);
}
.vin-plate input {
  width: 100%; border: 0; background: transparent; padding: 6px 0; min-height: 40px;
  font: 600 clamp(17px, 4.6vw, 22px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: #1b2533; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.vin-plate input::placeholder { color: #8d96a3; letter-spacing: .18em; }
.vin-plate:focus-within { box-shadow: 0 0 0 3px rgba(255, 201, 21, .7); }
.vin-count { font: 500 13px var(--mono); color: var(--ink-soft); margin-top: 6px; }
.vin-count.ok { color: var(--go); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 17px/1 var(--body); border-radius: 8px; padding: 16px 22px; min-height: 52px;
  border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn-go { background: var(--signal); border-color: var(--signal-deep); width: 100%; }
.btn-go:hover { background: #ffd23f; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Quotation */
.docmeta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.docmeta b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
table.lines { width: 100%; border-collapse: collapse; font-size: 15px; }
table.lines th {
  text-align: left; font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); border-bottom: 2px solid var(--ink); padding: 8px 6px;
}
table.lines td { padding: 12px 6px; border-bottom: 1px solid var(--steel); vertical-align: top; }
table.lines .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
table.lines .sub { display: block; font-size: 13px; color: var(--ink-soft); }
dl.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 18px 0 0; }
dl.totals dt { color: var(--ink-soft); }
dl.totals dd { margin: 0; text-align: right; font-family: var(--mono); }
dl.totals .grand { font: 800 24px/1.2 var(--display); color: var(--ink); text-transform: uppercase; padding-top: 10px; border-top: 2px solid var(--ink); }
dl.totals dd.grand { font: 600 22px/1.2 var(--mono); }

.notice { border-radius: 8px; padding: 14px 16px; margin: 0 0 18px; background: #eef1f5; border-left: 4px solid var(--ink); }
.notice.ok { background: #e8f4ee; border-color: var(--go); }
.notice.warn { background: #fff6d6; border-color: var(--signal-deep); }
.notice.bad { background: #fbeceb; border-color: var(--stop); }

.foot { max-width: 1080px; margin: 0 auto; padding: 24px 16px 40px; font-size: 14px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .topbar, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  .slip { box-shadow: none; border: 0; padding: 0; }
}

/* === crm === */
.slip.narrow { max-width: 640px; margin: 0 auto; }
.slip h3 { font: 700 18px/1.3 var(--body); margin: 22px 0 12px; }

/* === sales === */
/* Quotation page (templates/sales/public_quotation.html + _document.html, shared with the PDF). */
.quote { max-width: 760px; margin: 0 auto; }
.quote dl.totals { column-gap: 0; }      /* one unbroken rule above the grand total */
.quote dl.totals dd { padding-left: 16px; }
.quote .docmeta { clear: right; }        /* the paid stamp floats beside the title only */
.dochead h2 { margin-bottom: 8px; }
.dochead .docno { font: 600 .62em var(--mono); color: var(--ink-soft); letter-spacing: 0; margin-left: .3em; }
table.lines .each { display: none; }
@media (max-width: 599px) {            /* phones: item + total; qty × unit moves under the description */
  table.lines .col-qty, table.lines .col-unit { display: none; }
  table.lines .each { display: block; }
}
.docnotes { margin: 20px 0 0; padding: 12px 14px; background: var(--paper); border-left: 4px solid var(--signal); border-radius: 0 8px 8px 0; }
.pay { margin: 24px 0 8px; }
.fine { margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.doclinks { margin: 20px 0 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.stamp {                              /* rubber stamp on a paid quotation */
  float: right; margin: 2px 2px 10px 14px; transform: rotate(-8deg);
  font: 800 22px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--go); border: 3px solid var(--go); border-radius: 6px; padding: 6px 10px 4px; opacity: .85;
}
.fakepay { max-width: 460px; margin: 24px auto; text-align: center; }
.fakepay .amount { font: 600 30px/1.2 var(--mono); margin: 8px 0 20px; }