/* ==========================================================================
   STUDIO — quote.css
   The RFQ. The money page: everything on this site funnels here.

   House rules, kept: hairlines instead of shadows, flat colour (no gradient
   anywhere in this file), radii 6–12px, motion 150–220ms ease-out with no
   spring. Every box uses logical properties, so RTL costs nothing.

   Namespaced `.qz` — nothing here leaks to another page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE TOKENS — the dark-mode sweep.

   Everything else on this page reads a global token and needs nothing here.
   These three are the exceptions, and they are all the SAME kind of exception:
   a plate whose job is "solid, resolved, finished" — the completed step chip,
   the success tick, the callout raised off a grey panel. In the light they get
   there by going DARK (ink on white). In the dark that stops working, because
   --bg-ink (#08090C) sits a notch BELOW the page (#0F1115): the plate scores
   1.10:1 against the panel it is on and reads as a hole punched in the card,
   not as a filled chip. It is legible — the white glyph is 19.9:1 — but it is
   saying the wrong thing.

   So they invert. Ink-on-light becomes light-on-ink. Same flat plate, same 8px
   radius, same hairline discipline, no glow and no gradient — just the value
   that carries the MEANING on this ground. Aliases of existing tokens only; no
   new colour is introduced anywhere in this file.
   -------------------------------------------------------------------------- */
.qz {
  --qz-on-fill: var(--c-white);  /* the glyph on a flat red or ink plate */

  /* the completed-step chip + the success tick */
  --qz-solid-bg: var(--bg-ink);
  --qz-solid-fg: var(--c-white);

  /* the callout, RAISED off the grey .panel--surface it sits on */
  --qz-note-bg:  var(--bg);
}

:root[data-theme="dark"] .qz {
  --qz-solid-bg: var(--text);          /* #E9EBEF — 15.3:1 against the panel */
  --qz-solid-fg: var(--bg);            /* #0F1115 — the glyph goes dark       */
  --qz-note-bg:  var(--bg-surface-2);  /* #1D2027 — a step UP, still raised   */
}

/* the no-JS fallback, mirroring tokens.css — the boot script stamps
   data-theme before first paint, so this only ever fires with scripting off. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .qz {
    --qz-solid-bg: var(--text);
    --qz-solid-fg: var(--bg);
    --qz-note-bg:  var(--bg-surface-2);
  }
}

/* --------------------------------------------------------------------------
   COLUMNS
   .qz sits on the shared .split (form + sidebar). Both tracks need an
   explicit min-inline-size:0 or the <pre> in the summary widens the grid.
   -------------------------------------------------------------------------- */
.qz__main {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  min-inline-size: 0;
}

.qz__side {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
  min-inline-size: 0;
}

/* The aside now holds ONE child — the sticky summary. A sticky element can only
   travel inside its containing block, so if the aside were left at its content
   height (.split is align-items:start) the summary would have nowhere to go and
   would not stick at all. Stretch the aside to the row height and the summary
   follows the form down the whole column. It has no sibling to cover. */
@media (min-width: 960px) {
  .qz__side { align-self: stretch; }
}

.qz__panel { padding: var(--sp-7); }

@media (max-width: 560px) {
  .qz__panel { padding: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   REFERENCED PRODUCT — shown only when the page was opened as
   quote.html?product=<slug> from a product card or a product page.
   -------------------------------------------------------------------------- */
.qz__ref {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: var(--border-1);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: var(--t-color);
  min-inline-size: 0;
}
.qz__ref:hover { border-color: var(--border-strong); background: var(--bg-surface); }

.qz__ref-media {
  inline-size: 56px;
  block-size: 56px;
  flex: none;
  overflow: hidden;
  border: var(--border-1);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
}
/* the house crop: the marketing photos carry a burned-in phone number in the
   bottom of the frame, so the tile spends its crop there. */
.qz__ref-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: center 30%;
}

.qz__ref-body { display: grid; gap: 3px; min-inline-size: 0; }
.qz__ref-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: var(--ls-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qz__ref:hover .qz__ref-name { color: var(--text-accent); }
.qz__ref-arrow { margin-inline-start: auto; flex: none; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   PROGRESS — three numbered marks and a hairline bar. Flat fills only.
   -------------------------------------------------------------------------- */
.qz__prog { margin-block-end: var(--sp-7); }

.qz__prog-list {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-inline-size: 0;
}
.qz__prog-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;
}
@media (min-width: 640px) {
  .qz__prog-item { flex: 1 1 0; }
}

.qz__prog-n {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--border-1-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: var(--t-color);
}
/* the step you are ON — a flat red plate. White on --accent-fill is 5.1:1 in
   both modes, because --accent-fill stays a red plate at night. */
.qz__prog-item.is-current .qz__prog-n {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--qz-on-fill);
}
/* a step you have FINISHED — a solid plate that inverts in the dark (see the
   page tokens at the top). Never --bg-ink here: on the dark ground that is a
   hole, and a done step would read as less resolved than a pending one. */
.qz__prog-item.is-done .qz__prog-n {
  background: var(--qz-solid-bg);
  border-color: var(--qz-solid-bg);
  color: var(--qz-solid-fg);
}

.qz__prog-lab {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
  transition: var(--t-color);
}
[dir="rtl"] .qz__prog-lab { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.qz__prog-item.is-current .qz__prog-lab { color: var(--text); }
.qz__prog-item.is-done .qz__prog-lab { color: var(--text-secondary); }

/* narrow: only the step you are on says its name */
@media (max-width: 639px) {
  .qz__prog-lab { display: none; }
  .qz__prog-item.is-current { flex: 1 1 auto; }
  .qz__prog-item.is-current .qz__prog-lab { display: block; }
}

.qz__bar {
  block-size: 3px;
  margin-block-start: var(--sp-4);
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qz__bar-fill {
  display: block;
  block-size: 100%;
  inline-size: 33.333%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: inline-size var(--dur-3) var(--ease);
}

/* --------------------------------------------------------------------------
   STEPS
   -------------------------------------------------------------------------- */
.qz__step { display: grid; gap: var(--sp-6); min-inline-size: 0; }
.qz__step[hidden] { display: none; }

/* A .field is itself a grid. Side by side in a .field-grid, the taller
   column stretches the shorter one's ROWS — and a <select> in a field with
   no hint line silently grows to 68px next to a 48px input. Pin the rows. */
.qz .field { align-content: start; }

.qz__step-head { display: grid; gap: var(--sp-2); }
.qz__step-title {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.qz__step-lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 62ch;
}

/* THE TICK, IN RTL.
   components.css draws the checkmark with border-inline-start + block-end
   rotated -45°. Those borders are LOGICAL, so in Arabic the L-shape mirrors
   and the tick renders as a ">" chevron. A checkmark is not a directional
   glyph — it must not mirror. Redraw it from the physical left edge (which
   is border-inline-END once dir=rtl). Radios are untouched: their ::after
   sets border:0 and is excluded here. Page-scoped; components.css is not. */
[dir="rtl"] .qz .check__input:checked + .check__box:not(.check__box--radio)::after {
  border-inline-start: 0;
  border-inline-end: 2px solid var(--qz-on-fill);
}

/* bag types — a real radiogroup */
.qz__types {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

/* a fieldset must not carry the browser's default chrome */
.qz__fs {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-3);
}
.qz__fs-legend { padding: 0; }

.qz__dims {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qz__extras {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

/* --------------------------------------------------------------------------
   ARTWORK FILE — a real <input type="file">, visually replaced but still
   focusable and still keyboard-operable (Space/Enter on the label's input).
   -------------------------------------------------------------------------- */
.qz__file {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  min-inline-size: 0;
}
.qz__file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  inset-block-start: 50%;
  inset-inline-start: var(--sp-5);
}
.qz__file-btn { cursor: pointer; }
.qz__file-input:focus-visible + .qz__file-btn {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.qz__file-btn svg { inline-size: 17px; block-size: 17px; flex: none; }

.qz__file-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}
.qz__file-name.has-file { color: var(--text); font-weight: var(--fw-medium); }

/* --------------------------------------------------------------------------
   NAV ROW
   -------------------------------------------------------------------------- */
.qz__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border-1);
}
.qz__nav-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.qz__nav-btns {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* the back arrow already points to the inline-start; .btn__arrow mirrors it */
.qz__back-arrow { flex: none; }

/* loading — a plain rotation. No bounce, nothing springs. */
.qz__spin {
  display: none;
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: qz-spin 700ms linear infinite;
}
.btn.is-loading .qz__spin { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: 0.75; }

@keyframes qz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .qz__spin { animation: none; }
}

/* --------------------------------------------------------------------------
   SUCCESS
   -------------------------------------------------------------------------- */
.qz__done {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  min-inline-size: 0;
}
.qz__done[hidden] { display: none; }

/* the tick. Same inverting plate as the completed-step chip — in the dark it
   goes light-on-ink, so the plate is still a plate and not just a floating
   glyph on the panel. */
.qz__done-ico {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--qz-solid-bg);
  color: var(--qz-solid-fg);
}
.qz__done-ico svg { inline-size: 22px; block-size: 22px; }

.qz__done-title { font-size: var(--fs-h2); letter-spacing: var(--ls-head); }
.qz__done-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-inline-size: 54ch;
}

.qz__done-ref {
  inline-size: 100%;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: var(--border-1);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-surface);
}
.qz__done-code {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: 0.02em;
}

.qz__done-recap {
  inline-size: 100%;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: var(--border-1);
  border-radius: var(--r);
  background: var(--bg-surface);
}
/* The recap re-uses .qz__sum-title / .qz__sum-pre, whose fill is --bg-surface
   — which is what the recap itself is. Surface on surface is a ZERO step, and
   in the dark the hairline between them is only 1.3:1, so the two payload
   fields dissolve into the card. Inside the recap they take the page ground
   instead: a white field on the grey card in the light, a recessed well on the
   raised card in the dark. Both read as fields; both stay flat. */
.qz__done-recap .qz__sum-title,
.qz__done-recap .qz__sum-pre { background: var(--bg); }
.qz__done-actions { inline-size: 100%; }
.qz__done-foot { font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   THE SUMMARY PANEL — the live preview of the composed record. It shows the
   two REAL columns (title, notes) and nothing else, because that is all the
   quote request actually is.
   -------------------------------------------------------------------------- */
.qz__sum { display: grid; gap: var(--sp-4); min-inline-size: 0; }
.qz__sum .panel__title { margin-block-end: 0; }

@media (min-width: 960px) {
  .qz__sum {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-5));
    max-block-size: calc(100vh - var(--header-h) - var(--sp-9));
    overflow-y: auto;
  }
}

.qz__sum-lead {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.qz__sum-row { display: grid; gap: var(--sp-2); min-inline-size: 0; }

.qz__sum-title,
.qz__sum-pre {
  margin: 0;
  padding: var(--sp-3);
  border: var(--border-1);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
.qz__sum-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.qz__sum-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
  unicode-bidi: plaintext;
  min-block-size: 92px;
}
/* mono has no Arabic — set the composed note in the Arabic text face instead */
[dir="rtl"] .qz__sum-pre {
  font-family: var(--font-ar);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.qz__sum-title.is-empty,
.qz__sum-pre.is-empty { color: var(--text-muted); font-weight: var(--fw-regular); }

.qz__sum-foot {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-block-start: var(--sp-3);
  border-block-start: var(--border-1);
}

/* --------------------------------------------------------------------------
   REASSURANCE — why this site has no prices.
   -------------------------------------------------------------------------- */
.qz__why { display: grid; gap: var(--sp-5); min-inline-size: 0; }
.qz__why .panel__title { margin-block-end: 0; }

.qz__why-lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.qz__why-list { display: grid; border-block-start: var(--border-1); }
.qz__why-item {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-block-end: var(--border-1);
}

/* In the form column the panel is ~1.6fr wide, so the four reasons stop being a
   stacked list and become what they actually are: a spec sheet. Key on the
   start, value on the end, hairline between rows. Nothing else changes. */
@media (min-width: 720px) {
  .qz__why-item {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: baseline;
  }
  .qz__why .qz__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
  }
}
.qz__why-k {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text);
}
[dir="rtl"] .qz__why-k { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.qz__why-v {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* The callout sits on a grey .panel--surface, so it has to lift off it. In the
   light that means white. In the dark, --bg (#0F1115) is DARKER than the panel
   (#16181D) — the plate would sink instead of lift, which is the opposite of
   what a callout is for. --qz-note-bg is --bg in the light and --bg-surface-2
   in the dark, so it is raised on both grounds. */
.qz__note { background: var(--qz-note-bg); }

.qz__contact { display: grid; gap: var(--sp-1); }
.qz__ct {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 40px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  transition: var(--t-color);
}
.qz__ct svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--text-muted); }
.qz__ct:hover { color: var(--text-accent); }

/* --------------------------------------------------------------------------
   CLOSING INK BAND — the page's one dark moment.
   -------------------------------------------------------------------------- */
.qz__cta { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) {
  .qz__cta {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: var(--sp-10);
    align-items: center;
  }
}
.qz__cta-title { font-size: var(--fs-h2); letter-spacing: var(--ls-head); max-inline-size: 18ch; }
.qz__cta-lead { margin-block-start: var(--sp-4); max-inline-size: 56ch; }
.qz__cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 900px) {
  .qz__cta-actions { justify-content: flex-end; }
}

/* the WhatsApp glyph, wherever it appears on this page */
.qz__wa { inline-size: 18px; block-size: 18px; flex: none; }