/* =====================================================================
   Maccar Medical — quotations: add-to-quote button, quotation list (drawer + RFQ page), RFQ page,
   request received, customer quotation view ("printed proposal"). Owner: WS4.
   Design: DESIGN-DIRECTION.md §4.6 ("Calibrated"). Consumes the base.css tokens only (never redefines them).
   RTL: logical properties only. Motion: micro-interactions only (utility pages are calm), all gated by
   html.motion-ok and final under motion-reduced.
   The services block at the end (.svc-*) is kept until WS5 re-implements it in pages.css.
   ===================================================================== */

/* Add-to-quote button, quotation list lines and drawer (every page): commerce.css */

/* ---------------------------------------------------------------- RFQ page */
.rfq-hero { padding-block: clamp(8px, 1vw, 16px) clamp(40px, 4vw, 64px); border-bottom: 1px solid var(--rule); }
.rfq-hero-grid { display: grid; gap: 32px; align-items: end; margin-top: clamp(24px, 3vw, 48px); }
@media (min-width: 1024px) { .rfq-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .rfq-hero-copy { grid-column: 1 / span 7; } .rfq-process { grid-column: 9 / span 4; } }
.rfq-hero-copy { max-width: 760px; }
.rfq-kicker, .rfq-hero-copy > .eyebrow { margin: 0 0 16px; color: var(--text-muted); }
.rfq-title { margin: 0 0 24px; font-size: var(--fs-h1); font-weight: 320; line-height: 1.02; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
:lang(ar) .rfq-title { font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.rfq-lead { margin: 0; max-width: 52ch; color: var(--text-body); }
.rfq-promise { margin: 16px 0 0; }
.rfq-hero--compact { padding-bottom: clamp(24px, 3vw, 40px); }
.rfq-process { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--text); }
.rfq-process li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rfq-process-no { padding-top: 2px; }
.rfq-process li.is-current .rfq-process-no { color: var(--signal); }
.rfq-process-text { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--text-muted); }
.rfq-process-text b { color: var(--text); font-weight: 500; }
:lang(ar) .rfq-process-text b { font-weight: 600; }

.rfq-wrap { padding-block: clamp(32px, 4vw, 64px) var(--space-section); }
.rfq-errors { margin-bottom: 32px; }
.rfq-errors:focus { outline: 2px solid var(--danger); outline-offset: 2px; }
.rfq-errors-title { margin: 0; font-weight: 600; }
.rfq-errors ul { margin: 8px 0 0; padding-inline-start: 18px; }
.rfq-errors a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Generic two-column RFQ layout (also used by the service request page) */
.rfq-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .rfq-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; } }
.rfq-main { display: grid; gap: clamp(32px, 3vw, 48px); min-width: 0; }
/* Quotation document: list cols 1–7, facility form cols 8–12 */
@media (min-width: 1024px) {
  .rfq-layout--doc { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0; }
  .rfq-layout--doc .rfq-doc-list { grid-column: 1 / span 7; }
  .rfq-layout--doc .rfq-doc-form { grid-column: 8 / span 5; padding-inline-start: clamp(24px, 2.5vw, 48px); border-inline-start: 1px solid var(--rule); }
}
.rfq-doc-list, .rfq-doc-form { min-width: 0; display: grid; gap: clamp(40px, 4vw, 56px); align-content: start; }
.rfq-step { min-width: 0; }
.rfq-step + .rfq-step { padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--rule); }
.rfq-main > .rfq-step + .rfq-step { padding-top: 0; border-top: 0; }
.rfq-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; margin-bottom: 24px; }
@media (min-width: 600px) { .rfq-step-head { grid-template-columns: auto minmax(0, 1fr) auto; } }
.rfq-step-no { color: var(--text-faint); }
.rfq-step-title h2 { margin: 0; font-size: var(--fs-h3); font-weight: 440; line-height: 1.2; letter-spacing: -.014em; color: var(--text); }
:lang(ar) .rfq-step-title h2 { font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.rfq-step-title p { margin: 6px 0 0; }
.rfq-step-desc { font-size: var(--fs-small); color: var(--text-muted); max-width: 52ch; }
.rfq-doc-form .rfq-step-head { grid-template-columns: auto minmax(0, 1fr); }
.rfq-doc-form .rfq-step-link { grid-column: 2; justify-self: start; }
.rfq-step-link { grid-column: 2; justify-self: start; }
@media (min-width: 600px) { .rfq-step-link { grid-column: 3; justify-self: end; } }
.rfq-hint { margin: 16px 0 0; max-width: 60ch; font-size: var(--fs-small); color: var(--text-muted); }
.rfq-facility { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.rfq-facility legend { padding: 0; margin-bottom: 8px; }
.rfq-layout .form-row > .field, .qv-accept .form-row > .field { margin-bottom: 20px; align-content: start; }
.rfq-wrap .field-error, .qv-accept .field-error { display: flex; align-items: flex-start; gap: 6px; }
.rfq-wrap .field-error .icon, .qv-accept .field-error .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
/* the form column is narrow: two fields per row from 600 px only when there is room */
@media (min-width: 1024px) and (max-width: 1279.98px) { .rfq-doc-form .form-row { grid-template-columns: minmax(0, 1fr); } }

/* Chip radios (facility type, decline reason): 2 px radius, ink ring when chosen */
.chip-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-choice { position: relative; cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-1);
  border: 1px solid var(--rule-strong); background: var(--paper); font-size: var(--fs-small); color: var(--text-body);
  transition: border-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover);
}
.chip-choice:hover span { border-color: var(--text-muted); }
.chip-choice input:checked + span { border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.chip-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.has-error .chip-choice span { border-color: var(--danger); }

/* Attachment: 1 px solid zone on --paper-2; dragover in signal */
.dropzone-lite {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper-2);
  transition: border-color var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover);
}
.dropzone-lite:hover { border-color: var(--text-muted); }
.dropzone-lite.is-over { border-color: var(--signal); background: var(--signal-tint); }
.dropzone-lite.has-file { border-color: var(--text); background: var(--paper); }
.dropzone-lite.is-too-large { border-color: var(--danger); background: var(--danger-bg); }
.dropzone-lite input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone-lite:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone-lite-icon { flex: none; display: grid; place-items: center; color: var(--text); }
.dropzone-lite-icon .icon { width: 20px; height: 20px; }
.dropzone-lite-text { display: grid; gap: 2px; min-width: 0; font-size: .8125rem; color: var(--text-muted); }
.dropzone-lite-text b { font-size: var(--fs-small); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }

.rfq-consents { display: grid; gap: 14px; margin: 8px 0 28px; }
.rfq-consents .check { display: flex; }
.rfq-submit { display: grid; gap: 12px; }
.rfq-submit-note { margin: 0; }
.rfq-main .rfq-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
@media (max-width: 599.98px) { .rfq-main .rfq-submit .btn { width: 100%; } }
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rfq-off { display: grid; gap: 16px; justify-items: start; padding-block: 24px; border-top: 1px solid var(--text); }
.rfq-off__title { margin: 0; font-size: var(--fs-h3); font-weight: 440; }

/* Side notes / aside cards: hairline blocks, no boxes */
.rfq-aside { display: grid; gap: 32px; align-content: start; }
@media (min-width: 1024px) { .rfq-aside { position: sticky; top: calc(var(--header-offset, 0px) + 24px); } }
.rfq-side-notes { display: grid; gap: 32px; }
@media (min-width: 768px) { .rfq-side-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.rfq-card { padding-top: 16px; border-top: 1px solid var(--text); }
.rfq-card > .caps, .rfq-card > .h4, .rfq-card > .eyebrow { display: block; margin: 0 0 12px; color: var(--text-muted); font-size: var(--fs-label); }
.rfq-card > .h4 { font-weight: var(--fw-label, 560); }
.rfq-summary-dl { margin: 0 0 20px; display: grid; }
.rfq-summary-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); }
.rfq-summary-dl dt { color: var(--text-muted); }
.rfq-summary-dl dd { margin: 0; text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 1023.98px) { .rfq-aside-submit { display: none; } .rfq-summary { display: none; } }
.rfq-contact { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.rfq-contact li { border-bottom: 1px solid var(--rule); }
.rfq-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: var(--fs-small); font-weight: 500; text-decoration: none; }
.rfq-contact a:hover { color: var(--link); }
.rfq-contact .icon { display: none; }
.rfq-recent ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; }
.rfq-recent li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rfq-recent li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-size: var(--fs-small); color: var(--text); text-decoration: none; }

/* ---------------------------------------------------------------- Request received (quote sent) */
.rfq-sent__grid { display: grid; gap: 56px; }
@media (min-width: 1024px) { .rfq-sent__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .rfq-sent__head { grid-column: 1 / span 7; } .rfq-sent__next { grid-column: 9 / span 4; padding-top: 8px; } }
.rfq-sent__mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 32px; border: 1px solid var(--text); color: var(--text); }
.rfq-sent__tick { stroke-dasharray: 24; stroke-dashoffset: 0; }
html.motion-ok .rfq-sent__tick { animation: q-draw 600ms var(--ease-precise) 120ms both; }
.rfq-sent__title { margin: 0 0 20px; font-size: var(--fs-h1); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; color: var(--text); }
:lang(ar) .rfq-sent__title { font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.rfq-sent__lead { margin: 0 0 40px; max-width: 52ch; }
.rfq-sent__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 16px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--rule); }
.rfq-sent__ref .caps { color: var(--text-muted); }
.rfq-sent__no { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 300; letter-spacing: .01em; color: var(--text); }
.rfq-sent__facts { margin: 0 0 40px; display: grid; }
@media (min-width: 600px) { .rfq-sent__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.rfq-sent__facts div { padding-block: 14px; border-bottom: 1px solid var(--rule); }
.rfq-sent__facts dt { color: var(--text-muted); margin-bottom: 4px; }
.rfq-sent__facts dd { margin: 0; font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; }
.rfq-sent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 16px; }
.rfq-sent__note { margin: 0; max-width: 60ch; }
.rfq-sent__next > .caps { display: block; margin: 0 0 16px; color: var(--text-muted); }
.rfq-sent__promise { margin: 0 0 16px; }

/* Legacy confirmation (service request page, WS5) — same document language, start-aligned */
.rfq-done .container { display: grid; justify-items: start; }
.rfq-done-mark { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid var(--text); color: var(--text); }
.rfq-done-mark svg { width: 28px; height: 28px; }
.rfq-done-ring { display: none; }
.rfq-done-tick { stroke-width: 2; stroke-dasharray: 40; stroke-dashoffset: 0; }
html.motion-ok .rfq-done-tick { animation: rfq-draw 600ms var(--ease-precise) 120ms both; }
@keyframes rfq-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.rfq-done-eyebrow { margin: 0 0 12px; color: var(--text-muted); }
.rfq-done-title { margin: 0 0 16px; font-size: var(--fs-h1); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
:lang(ar) .rfq-done-title { font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.rfq-done-lead { margin: 0 0 32px; max-width: 56ch; }
.rfq-done-ref { width: 100%; max-width: 720px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 16px; border-top: 1px solid var(--text); }
.rfq-done-ref-main { display: grid; gap: 2px; }
.rfq-done-ref-label { font-size: var(--fs-label); font-weight: 560; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .rfq-done-ref-label { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rfq-done-ref-no { font-family: var(--font-mono); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 300; color: var(--text); }
.rfq-done-facts { grid-column: 1 / -1; margin: 0; display: grid; }
@media (min-width: 600px) { .rfq-done-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.rfq-done-facts div { padding-block: 12px; border-top: 1px solid var(--rule); }
.rfq-done-facts dt { font-size: .8125rem; color: var(--text-muted); }
.rfq-done-facts dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; }
.rfq-done-next { margin: 40px 0 16px; }
.rfq-timeline { list-style: none; margin: 0 0 32px; padding: 0; width: 100%; max-width: 720px; display: grid; border-top: 1px solid var(--text); }
.rfq-timeline li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.rfq-timeline-dot { width: 8px; height: 8px; margin-top: 7px; border: 1px solid var(--rule-strong); }
.rfq-timeline li.is-done .rfq-timeline-dot { background: var(--text); border-color: var(--text); }
.rfq-timeline li.is-current .rfq-timeline-dot { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-tint); }
.rfq-timeline b { display: block; font-weight: 500; color: var(--text); }
.rfq-timeline p { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.rfq-done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 32px 16px; }
.rfq-done-account { max-width: 60ch; }

/* ---------------------------------------------------------------- Quotation view: a printed proposal */
.qv-print-head { display: none; }
.qv-head { padding-bottom: 0; }
.qv-head-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.qv-kicker { margin: 0 0 12px; color: var(--text-muted); }
.qv-heading { margin: 0 0 14px; font-size: var(--fs-h2); font-weight: 300; line-height: 1.08; color: var(--text); }
.qv-heading .mono { font-size: 1em; font-weight: 300; letter-spacing: -.01em; }
.qv-status { margin: 0; }
.qv-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Mono document block: number, dates, addressee */
.qv-doc { margin: clamp(28px, 3vw, 40px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--text); border-bottom: 1px solid var(--rule); }
.qv-doc div { padding: 14px 0; padding-inline-end: 20px; }
.qv-doc dt { color: var(--text-muted); margin-bottom: 4px; }
.qv-doc dd { margin: 0; display: grid; gap: 2px; font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; }
.qv-doc dd small { font-size: .8125rem; color: var(--text-muted); }
.qv-content { padding-block: clamp(32px, 3vw, 48px) var(--space-section); }
.qv-alert { margin-bottom: 32px; }
.qv-alert--order > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; width: 100%; }
.qv-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) {
  .qv-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .qv-main { grid-column: 1 / span 8; }
  .qv-aside { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-offset, 0px) + 24px); }
}
.qv-main { display: grid; gap: 48px; min-width: 0; }
.qv-section-title { display: block; margin: 0 0 14px; color: var(--text-muted); }
.qv-table th.num, .qv-table td.num { text-align: end; }
.qv-table td { vertical-align: top; }
.qv-table .mono { font-size: .8125rem; }
.qv-col-idx { width: 32px; padding-inline-end: 0 !important; }
.qv-table td.strong { color: var(--text); font-weight: 500; }
@media (max-width: 1279.98px) { .qv-col-x { display: none; } }
.qv-main > *, .qv-section { min-width: 0; }
.qv-item { display: flex; gap: 14px; align-items: flex-start; min-width: 180px; }
.qv-item-media { width: 56px; flex: none; }
.qv-item-media .plate { width: 100%; }
.qv-item-text { display: grid; gap: 3px; min-width: 0; }
.qv-item-text b { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.qv-item-text small { font-size: .8125rem; color: var(--text-muted); }
.qv-item-note { padding-inline-start: 8px; border-inline-start: 1px solid var(--measure); }
.qv-was { display: block; font-size: .75rem; color: var(--text-muted); }
.qv-rate { display: block; font-family: var(--font-mono); font-size: .6875rem; color: var(--text-muted); }
.qv-tbc { color: var(--text-muted); }
.qv-vat-note { margin: 12px 0 0; }
.qv-prose { font-size: var(--fs-small); line-height: 1.7; color: var(--text-body); max-width: 68ch; }
.qv-attachment { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); }
.qv-attachment .icon { width: 16px; height: 16px; color: var(--text); }
.qv-aside { display: grid; gap: 32px; }
/* Status history: a vertical rule drawn once (scaleY, 600 ms) */
.qv-history > .caps { display: block; margin: 0 0 16px; color: var(--text-muted); }
.qv-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.qv-steps::before { content: ""; position: absolute; inset-inline-start: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--rule-strong); transform-origin: 50% 0; }
html.motion-ok .qv-steps::before { animation: q-rule-y 600ms var(--ease-measure) 120ms both; }
@keyframes q-rule-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.qv-steps li { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; }
.qv-step-dot { position: relative; z-index: 1; width: 9px; height: 9px; align-self: center; background: var(--paper); border: 1px solid var(--rule-strong); }
.qv-steps li.is-done .qv-step-dot { background: var(--text); border-color: var(--text); }
.qv-steps li.is-current .qv-step-dot { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-tint); }
.qv-steps li.is-off { opacity: .5; }
.qv-step-label { font-size: var(--fs-small); color: var(--text-muted); }
.qv-steps li.is-done .qv-step-label, .qv-steps li.is-current .qv-step-label { color: var(--text); }
.qv-steps li.is-current .qv-step-label { font-weight: 500; }
.qv-step-date { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
/* Totals ledger */
.qv-totals { padding: 24px; background: var(--paper-2); border-top: 1px solid var(--text); }
.qv-totals > .caps, .qv-totals > .h4 { display: block; margin: 0 0 12px; color: var(--text-muted); }
.qv-totals dl { margin: 0; display: grid; }
.qv-totals dl div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: var(--fs-small); }
.qv-totals dt { color: var(--text-muted); }
.qv-totals dd { margin: 0; text-align: end; font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.qv-totals-save dd { color: var(--success); }
.qv-totals-sep { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 12px !important; }
.qv-totals-grand { border-top: 1px solid var(--text); margin-top: 8px; padding-top: 14px !important; }
.qv-totals-grand dt { color: var(--text); font-weight: 500; }
.qv-totals-grand dd { font-size: 1.125rem; }
.qv-totals-note { margin: 12px 0 0; font-size: .8125rem; color: var(--text-muted); }
.qv-help .small { color: var(--text-muted); font-size: .8125rem; }
/* Accept proposal */
.qv-accept { margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--text); scroll-margin-top: calc(var(--header-offset, 0px) + 24px); }
.qv-accept-head { margin-bottom: 32px; max-width: 64ch; }
.qv-accept-head .caps { color: var(--text-muted); }
.qv-accept-head .h3 { margin: 12px 0 10px; font-size: var(--fs-h2); font-weight: 360; line-height: 1.08; letter-spacing: -.024em; }
:lang(ar) .qv-accept-head .h3 { font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.qv-accept-head p { margin: 0; }
.qv-accept-form { max-width: 880px; }
.qv-fieldset { border: 0; padding: 0; margin: 0 0 36px; min-width: 0; }
.qv-fieldset legend { padding: 0; margin-bottom: 16px; font-size: var(--fs-h4); font-weight: 520; }
.qv-methods { display: grid; gap: 10px; }
@media (min-width: 800px) { .qv-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qv-methods .choice-body { display: flex; align-items: flex-start; gap: 14px; height: 100%; }
.qv-method-icon { display: none; }
.qv-method-text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.qv-method-text b { font-weight: 500; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qv-method-text small { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
.qv-method-fee { font-family: var(--font-mono); font-size: .8125rem; color: var(--text); white-space: nowrap; }
.qv-confirm { display: grid; gap: 12px; margin-bottom: 28px; }
.qv-confirm .check { display: flex; }
.qv-accept-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.qv-accept-total { display: grid; gap: 4px; }
.qv-accept-total span { font-size: var(--fs-label); font-weight: 560; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .qv-accept-total span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.qv-accept-total b { font-family: var(--font-mono); font-size: var(--fs-figure); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.qv-accept-total small { font-size: .8125rem; color: var(--text-muted); }
@media (max-width: 599.98px) { .qv-accept-foot .btn { width: 100%; } }
.qv-decline { margin-top: 40px; border-top: 1px solid var(--rule); padding-top: 16px; }
.qv-decline summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); list-style: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-strong); }
.qv-decline summary::-webkit-details-marker { display: none; }
.qv-decline summary:hover { color: var(--text); }
.qv-decline-form { margin-top: 16px; max-width: 720px; display: grid; gap: 16px; }
.qv-decline-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qv-decline-form legend { margin-bottom: 10px; }
/* Print: a clean A4 proposal */
@media print {
  .qv-head-actions, .qv-accept, .qv-decline, .qv-help, .qv-alert-actions, .qv-head .breadcrumb, .qv-head .crumbs, .qv-history { display: none !important; }
  .qv-print-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #000; font-size: 11px; }
  .qv-print-head img { height: 20mm; width: auto; }
  .qv-print-head div { display: grid; gap: 2px; }
  .qv-grid { display: block; }
  .qv-totals { background: none; padding: 12px 0 0; break-inside: avoid; }
  .qv-content { padding: 0; }
  .qv-table tr { break-inside: avoid; }
}

/* ---------------------------------------------------------------- Services */
.svc-hero { background: var(--bg-alt, #F6F8FA); border-bottom: 1px solid var(--border, #E2E7ED); padding-bottom: clamp(40px, 5vw, 72px); }
.svc-hero-grid { display: grid; gap: 40px; align-items: end; }
@media (min-width: 1024px) { .svc-hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 72px; } }
.svc-hero-copy { max-width: 760px; }
.svc-title { margin: 8px 0 16px; }
.svc-hero-copy .lead { margin: 0 0 28px; max-width: 60ch; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639.98px) { .svc-hero-actions .btn { width: 100%; } }
.svc-facts { margin: 0; display: grid; border-top: 1px solid var(--border, #E2E7ED); }
.svc-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border, #E2E7ED); }
.svc-facts dt { font-size: var(--fs-sm, .875rem); color: var(--text-muted, #66738A); }
.svc-facts dd { margin: 0; font-weight: 600; color: var(--text, #142033); text-align: end; }
.svc-facts dd.mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-lg, 1.25rem); }
.svc-section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.svc-section-head .h2 { margin: 8px 0 0; }
.svc-section-head--split { max-width: none; display: grid; gap: 12px 40px; align-items: end; }
@media (min-width: 900px) { .svc-section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.svc-section-head--split p { margin: 0; }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border, #E2E7ED); }
.svc-item { display: grid; gap: 16px 48px; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--border, #E2E7ED); scroll-margin-top: calc(var(--header-offset, 0px) + 24px); }
@media (min-width: 900px) { .svc-item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.svc-item-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; align-self: start; }
.svc-item-no { font-family: var(--font-mono); font-size: var(--fs-sm, .875rem); color: var(--ink-400, #8F9BAC); }
.svc-item-icon { width: 44px; height: 44px; border-radius: var(--radius, 8px); display: grid; place-items: center; background: var(--teal-50, #EBFAFB); color: var(--teal-700, #0E6F7A); }
.svc-item-icon .icon { width: 22px; height: 22px; }
.svc-item-title { margin: 0; }
.svc-item-body p { margin: 0 0 16px; color: var(--text-body, #232F42); max-width: 64ch; }
.svc-included { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px 24px; }
@media (min-width: 640px) { .svc-included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-included li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm, .875rem); color: var(--text-muted, #66738A); }
.svc-included .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal-600, #0E8F9C); }
.svc-item-link { font-size: var(--fs-sm, .875rem); }
.svc-process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
@media (min-width: 900px) { .svc-process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-process li { position: relative; padding: 24px 0; border-top: 1px solid var(--border-strong, #BCC5D1); }
@media (min-width: 900px) { .svc-process li { padding: 28px 28px 0 0; padding-inline: 0 28px; } }
.svc-process li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 48px; height: 2px; background: var(--brand-600, #1F63E0); }
.svc-process-no { display: block; font-family: var(--font-mono); font-size: var(--fs-sm, .875rem); color: var(--brand-600, #1F63E0); margin-bottom: 12px; }
.svc-process .h4 { margin: 0 0 8px; }
.svc-process p { margin: 0; font-size: var(--fs-sm, .875rem); color: var(--text-muted, #66738A); }
.svc-families { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border, #E2E7ED); }
@media (min-width: 640px) { .svc-families { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1024px) { .svc-families { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-families a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--border, #E2E7ED); color: var(--text, #142033); }
.svc-family-icon { width: 40px; height: 40px; border-radius: var(--radius-sm, 5px); display: grid; place-items: center; background: var(--bg-alt, #F6F8FA); color: var(--brand-600, #1F63E0); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.svc-family-name { font-weight: 600; }
.svc-family-count { font-family: var(--font-mono); font-size: var(--fs-xs, .75rem); color: var(--text-muted, #66738A); white-space: nowrap; }
.svc-family-arrow { width: 16px; height: 16px; color: var(--ink-400, #8F9BAC); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.svc-families a:hover .svc-family-icon { background: var(--brand-600, #1F63E0); color: #fff; }
.svc-families a:hover .svc-family-arrow { color: var(--brand-600, #1F63E0); transform: translateX(4px); }
[dir="rtl"] .svc-families a:hover .svc-family-arrow { transform: scaleX(-1) translateX(4px); }
.svc-prepare { display: grid; gap: 40px; }
@media (min-width: 1024px) { .svc-prepare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.svc-prepare .h3 { margin: 8px 0 20px; }
.svc-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svc-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm, .875rem); color: var(--text-body, #232F42); }
.svc-checklist .icon { width: 20px; height: 20px; flex: none; color: var(--teal-600, #0E8F9C); }
.svc-checklist--sm { gap: 10px; }
.svc-faq { align-self: start; }
.svc-cta { background: var(--ink-950, #0B1525); color: #fff; }
.svc-cta-inner { display: grid; gap: 24px; padding-block: clamp(40px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .svc-cta-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.svc-cta .h3 { color: #fff; margin: 0 0 6px; }
.svc-cta p { margin: 0; color: var(--ink-300, #BCC5D1); }
.svc-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.svc-cta-ghost { color: #fff; }
.svc-cta-ghost:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.svc-type-choices { display: grid; gap: 10px; }
@media (min-width: 640px) { .svc-type-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .svc-type-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-type-choice .choice-body { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; font-size: var(--fs-sm, .875rem); font-weight: 500; }
.svc-type-icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm, 5px); display: grid; place-items: center; background: var(--bg-alt, #F6F8FA); color: var(--teal-700, #0E6F7A); }
.svc-type-icon .icon { width: 18px; height: 18px; }
#f-type { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
#f-type legend { padding: 0; margin-bottom: 10px; }

/* Reduced motion: commerce.css */

/* ---------------------------------------------------------------- Print (customer quotation → PDF) */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body.page-quote-view { background: #fff; }
  body.page-quote-view .site-header, body.page-quote-view .site-footer, body.page-quote-view header.hdr, body.page-quote-view footer,
  body.page-quote-view .announcement, body.page-quote-view .breadcrumb, body.page-quote-view .crumbs,
  body.page-quote-view .qv-head-actions, body.page-quote-view .qv-steps, body.page-quote-view .qv-alert,
  body.page-quote-view .qv-accept, body.page-quote-view .qv-decline, body.page-quote-view .qv-help,
  body.page-quote-view .toasts, body.page-quote-view .cookie-banner, body.page-quote-view .drawer,
  body.page-quote-view .tabbar, body.page-quote-view .mobile-tabbar, body.page-quote-view .compare-bar { display: none !important; }
  body.page-quote-view .qv-print-head { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid #1F63E0; }
  .qv-print-head img { height: 40px; width: auto; }
  .qv-print-head div { display: grid; gap: 2px; text-align: end; font-size: 10pt; color: #364358; }
  .qv-print-head b { font-size: 11pt; color: #0B1525; }
  .qv-head { background: none; border: 0; padding: 0; }
  .qv-head .container, .qv-content.container { max-width: none; padding: 0; }
  .qv-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .qv-aside { position: static; }
  .qv-totals { border: 1px solid #BCC5D1; break-inside: avoid; margin-inline-start: auto; max-width: 320px; }
  .qv-table { font-size: 9.5pt; }
  .qv-table tr { break-inside: avoid; }
  .qv-section { break-inside: avoid-page; }
  .hide-mobile { display: table-cell !important; }
  a { color: inherit; text-decoration: none; }
}