/* DGRM · pagina Preventivo (preventivo.html, logica in assets/preventivo.js).
   Sullo schermo: tema Nero del sito, spazi della scala DGRM (--space-1…7), un colore per servizio.
   In stampa (Scarica PDF): il preventivo indicativo su A4, tema Nero di serie o Carta, con cornice e griglia
   dei documenti DGRM (design system: doc-title, doc-display, doc-heading, doc-price, doc-body, doc-small,
   doc-label). */

.quote-service[data-service="dgrm"],
.quote-line[data-service="dgrm"],
.quote-doc__svc[data-service="dgrm"] { --card-accent: var(--service-dgrm); }
.quote-service[data-service="automation"],
.quote-line[data-service="automation"],
.quote-doc__svc[data-service="automation"] { --card-accent: var(--service-automation); }
.quote-service[data-service="web"],
.quote-line[data-service="web"],
.quote-doc__svc[data-service="web"] { --card-accent: var(--service-web); }
.quote-service[data-service="lab"],
.quote-line[data-service="lab"],
.quote-doc__svc[data-service="lab"] { --card-accent: var(--service-lab); }
.quote-service[data-service="video"],
.quote-line[data-service="video"],
.quote-doc__svc[data-service="video"] { --card-accent: var(--service-video); }

.quote-doc {
  display: none;
}

/* ── Pagina ─────────────────────────────────────────────────────────────── */
.quote {
  position: relative;
  z-index: 2;
  padding: calc(76px + var(--space-6)) var(--space-6) var(--space-7);
}

.quote-head {
  max-width: 880px;
  margin-bottom: var(--space-6);
}

.quote-head h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
}

.quote-intro {
  max-width: 64ch;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--space-5);
  align-items: start;
}

.quote-main,
.quote-builder {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.quote-status {
  color: var(--muted);
}

.quote-status.is-error {
  color: var(--accent-text);
}

/* ── Il budget: facoltativo, prima dei servizi ──────────────────────────────
   Etichetta e campo vicini (space-2), la spiegazione sotto; la cifra nel carattere dei totali. */
.quote-budget {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.quote-budget__label {
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.quote-budget__field {
  position: relative;
  display: block;
  width: min(100%, 240px);
}

.quote-budget__field input {
  width: 100%;
  padding-block: 10px;
  padding-inline: 14px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.quote-budget__field input::placeholder {
  color: var(--label);
  opacity: 0.6;
}

.quote-budget__field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.quote-budget__unit {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  color: var(--label);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}

.quote-budget__hint {
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* ── Un servizio: apri e scegli ─────────────────────────────────────────── */
.quote-budget,
.quote-service,
.quote-options,
.quote-summary,
.quote-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(18px);
}

.quote-service:has(input:checked:not([value=""])) {
  border-color: color-mix(in srgb, var(--card-accent) 45%, var(--line));
}

.quote-service__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.quote-service__summary::-webkit-details-marker {
  display: none;
}

.quote-service__summary::after {
  width: 9px;
  height: 9px;
  margin-inline-start: auto;
  border-right: 2px solid var(--label);
  border-bottom: 2px solid var(--label);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
  content: "";
}

.quote-service__details[open] > .quote-service__summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.quote-service__index {
  color: var(--card-accent);
  font-size: 0.74rem;
  letter-spacing: var(--track-label);
}

.quote-service__title {
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-service__kicker {
  color: var(--muted);
  font-size: 0.78rem;
}

.quote-service__count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding-inline: var(--space-1);
  border-radius: 999px;
  background: var(--card-accent);
  color: var(--background);
  font-size: 0.72rem;
  font-weight: 700;
}

.quote-service__count[hidden] {
  display: none;
}

.quote-service__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}

.quote-service__link {
  justify-self: start;
  color: var(--copy);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--card-accent) 60%, transparent);
  text-underline-offset: 4px;
}

.quote-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quote-group legend {
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.quote-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.quote-choice input[type="radio"],
.quote-choice input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--card-accent, var(--primary));
  cursor: pointer;
}

.quote-choice__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.quote-choice__name {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 700;
}

.quote-choice.is-none .quote-choice__name {
  color: var(--copy);
  font-weight: 400;
}

.quote-choice__badge {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--card-accent);
  color: var(--background);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.quote-choice__meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* Con un budget: le voci che lo supererebbero si possono ancora scegliere, ma sono più spente e hanno
   l'etichetta «Oltre il budget». */
.quote-choice__over {
  justify-self: start;
  padding: 2px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent-text) 55%, transparent);
  border-radius: 999px;
  color: var(--accent-text);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quote-choice__over[hidden] {
  display: none;
}

.quote-choice.is-over .quote-choice__name,
.quote-choice.is-over .quote-choice__price {
  color: var(--muted);
}

.quote-choice__price {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
}

.quote-choice__qty {
  display: flex;
  grid-column: 2 / -1;
  align-items: center;
  gap: var(--space-2);
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quote-qty {
  width: 72px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.quote-options {
  padding: var(--space-4);
}

.quote-options__title {
  margin-bottom: var(--space-2);
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.quote-options .quote-choice {
  padding-bottom: 0;
}

/* ── Riepilogo e dati ───────────────────────────────────────────────────── */
.quote-side {
  position: sticky;
  top: calc(76px + var(--space-4));
  display: grid;
  gap: var(--space-3);
}

.quote-side:focus {
  outline: none;
}

.quote-summary,
.quote-form {
  padding: var(--space-4);
}

.quote-summary h2,
.quote-form h2 {
  margin-bottom: var(--space-3);
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-summary h2:focus {
  outline: none;
}

.quote-empty {
  color: var(--muted);
  font-size: 0.86rem;
}

.quote-lines {
  display: grid;
  list-style: none;
}

.quote-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.quote-line__service {
  grid-column: 1 / -1;
  color: var(--card-accent);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-line__name {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 700;
}

.quote-line__meta {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.76rem;
}

.quote-line__price {
  grid-row: 2;
  grid-column: 2;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
}

.quote-line__remove {
  grid-column: 2;
  justify-self: end;
  padding: 0;
  border: 0;
  background: none;
  color: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.quote-line__remove:hover {
  color: var(--accent-text);
}

/* «Svuota il preventivo» chiude l'elenco delle voci; al primo clic chiede conferma (is-armed, in rosso). */
.quote-clear {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) 0 var(--space-3);
  border-top: 1px solid var(--line);
}

.quote-clear__button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.quote-clear__button:hover,
.quote-clear__button.is-armed {
  color: var(--accent-text);
}

.quote-clear__button.is-armed {
  font-weight: 700;
}

.quote-totals {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-strong);
}

.quote-totals__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.quote-totals dt {
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-totals dd {
  margin: 0;
  color: var(--foreground);
  font-weight: 700;
}

/* La cifra che conta, nel rosso del marchio */
.quote-totals__row.is-total dd {
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.quote-totals__row.is-net dd {
  color: var(--copy);
  font-size: 0.86rem;
}

/* Il budget nel riepilogo: cifra, barra, quanto resta. Oltre il budget la barra e la frase vanno in rosso. */
.quote-budget-status {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.quote-empty + .quote-budget-status {
  margin-top: var(--space-4);
}

.quote-budget-status__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.quote-budget-status__label {
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-budget-status__value {
  color: var(--foreground);
  font-weight: 700;
}

.quote-budget-meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.quote-budget-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--foreground);
}

.quote-budget-status.is-over .quote-budget-meter__fill {
  background: var(--primary);
}

.quote-budget-status__text {
  color: var(--copy);
  font-size: 0.82rem;
  line-height: 1.6;
}

.quote-budget-status.is-over .quote-budget-status__text {
  color: var(--accent-text);
  font-weight: 700;
}

.quote-budget-status .quote-note {
  margin-top: 0;
}

.quote-start {
  margin-top: var(--space-3);
  color: var(--copy);
  font-size: 0.82rem;
  line-height: 1.6;
}

.quote-note {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.6;
}

.quote-form {
  display: grid;
  gap: var(--space-3);
}

.quote-form h2 {
  margin-bottom: 0;
}

.quote-form .hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.quote-field {
  display: grid;
  gap: var(--space-2);
}

.quote-field > span {
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-field input,
.quote-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
}

.quote-field textarea {
  resize: vertical;
}

.quote-field input:focus,
.quote-field textarea:focus,
.quote-qty:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Email mancante o incompleta (PDF, «Copia», «Invia»): bordo rosso e il messaggio subito sotto il campo. */
.quote-field input[aria-invalid="true"] {
  border-color: var(--accent-text);
}

.quote-field__error {
  margin-top: calc(var(--space-2) * -1);
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.quote-actions .btn {
  cursor: pointer;
}

.quote-send {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.quote-actions .btn-text {
  min-height: 46px;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--copy);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}

.quote-actions .btn-text:hover {
  color: var(--text);
}

/* Sfondo del PDF: etichetta e scelte vicine (space-2), il pulsante un passo più in là (space-3). La legend
   flottante resta dentro il riquadro invece di stare sul bordo, come le altre etichette del modulo. */
.quote-pdf {
  min-width: 0;
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.quote-pdf legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-pdf__themes {
  display: flex;
  clear: both;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.quote-pdf__theme {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--copy);
  font-size: 0.82rem;
  cursor: pointer;
}

.quote-pdf__theme input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.quote-pdf__swatch {
  width: 18px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background-size: 6px 6px;
}

.quote-pdf__swatch.is-dark {
  background-color: #070707;
  background-image:
    linear-gradient(rgba(192, 31, 22, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 31, 22, 0.35) 1px, transparent 1px);
}

.quote-pdf__swatch.is-light {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(192, 31, 22, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 31, 22, 0.25) 1px, transparent 1px);
}

.quote-pdf .btn {
  margin-top: var(--space-3);
  cursor: pointer;
}

/* Perché serve l'email, con il link alla privacy */
.quote-pdf__note {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.6;
}

.quote-pdf__note a {
  color: var(--copy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quote-pdf__note a:hover {
  color: var(--text);
}

.quote-copy-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Telefono e tablet: in fondo il totale (e quanto resta del budget), che porta al riepilogo */
.quote-mobilebar {
  display: none;
}

.quote-mobilebar__figures {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: end;
  text-align: end;
}

.quote-mobilebar__budget {
  color: var(--copy);
  font-size: 0.72rem;
  line-height: 1.3;
}

.quote-mobilebar__budget.is-over {
  color: var(--accent-text);
  font-weight: 700;
}

.quote-mobilebar__budget[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .quote-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-side {
    position: static;
  }

  .quote-mobilebar:not([hidden]) {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: rgba(var(--background-rgb), 0.9);
    box-shadow: 0 0 36px var(--primary-glow);
    backdrop-filter: blur(18px);
  }

  .quote-mobilebar.is-away {
    display: none;
  }

  .quote-mobilebar__label {
    color: var(--label);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .quote-mobilebar__total {
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
  }

  body.quote-page {
    padding-bottom: var(--space-7);
  }
}

@media (max-width: 720px) {
  .quote {
    padding: calc(68px + var(--space-5)) var(--space-4) var(--space-7);
  }

  .quote-head {
    margin-bottom: var(--space-5);
  }

  .quote-choice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quote-choice__price {
    grid-column: 2;
    text-align: start;
  }

  .quote-mobilebar__label {
    display: none;
  }

  .quote-mobilebar__figures {
    flex: 1;
    justify-items: center;
    text-align: center;
  }

  /* Da toccare col dito: «Togli», «Vedi la pagina» e le scelte dello sfondo alti almeno 44 px (la parte
     cliccabile si allarga, il testo resta dov'è); le etichette piccole un poco più grandi. */
  .quote-line__remove,
  .quote-clear__button,
  .quote-service__link {
    padding-block: 13px;
    margin-block: -13px;
  }

  .quote-pdf__theme,
  .quote-qty {
    min-height: 44px;
  }

  .quote-choice__badge,
  .quote-choice__over {
    font-size: 0.66rem;
  }
}

/* ── Il preventivo indicativo (Scarica PDF): A4 a 96 dpi, tema Nero (is-dark, di serie) o Carta ─
   Sullo schermo resta nascosto; assets/preventivo.js lo misura (is-measuring) e, se non sta in una pagina,
   lo rimpicciolisce un poco (--doc-scale) o, se è lungo davvero, lo stampa su più pagine senza cornice. */
.quote-doc {
  --doc-bg: #ffffff;
  --doc-grid: rgba(192, 31, 22, 0.06);
  --doc-fg: #070707;
  --doc-copy: #26292f;
  --doc-muted: #4f5561;
  --doc-label: #5d646f;
  --doc-border: #d9dbe0;
  --doc-border-strong: #070707;
  --doc-red: #c01f16;
  --doc-red-small: #c01f16;
  color: var(--doc-copy);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
}

/* Tema Nero (di serie, come i documenti DGRM): stessi nomi, valori del design system. Sul nero il rosso
   dei testi piccoli è #e73b32; il #c01f16 resta per titoli, cifra e barra. */
.quote-doc.is-dark {
  --doc-bg: #070707;
  --doc-grid: rgba(192, 31, 22, 0.07);
  --doc-fg: #ffffff;
  --doc-copy: #c9cddb;
  --doc-muted: #9aa3b5;
  --doc-label: #8a93a5;
  --doc-border: #2a2c31;
  --doc-border-strong: #5d646f;
  --doc-red-small: #e73b32;
}

.quote-doc.is-measuring {
  position: absolute;
  top: 0;
  left: -10000px;
  display: block;
  width: 794px;
  visibility: hidden;
  pointer-events: none;
}

.quote-doc.is-measuring .quote-doc__frame {
  display: none;
}

/* Cornice e griglia: fisse, si ripetono su ogni pagina */
.quote-doc__frame {
  position: fixed;
  inset: 0;
  background-color: var(--doc-bg);
  background-image:
    linear-gradient(var(--doc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--doc-grid) 1px, transparent 1px);
  background-size: 44px 44px;
}

.quote-doc__corner {
  position: absolute;
  color: var(--doc-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-doc__corner.is-tl { top: 45px; left: 44px; }
.quote-doc__corner.is-tr { top: 45px; right: 44px; }
.quote-doc__corner.is-bl { bottom: 45px; left: 44px; }
.quote-doc__corner.is-br { right: 44px; bottom: 45px; }

.quote-doc__bar {
  position: absolute;
  bottom: 72px;
  left: 44px;
  width: 88px;
  height: 4px;
  background: var(--doc-red);
}

.quote-doc__page {
  position: relative;
  display: grid;
  gap: 22px;
  width: calc(794px / var(--doc-scale, 1));
  padding: 88px;
  zoom: var(--doc-scale, 1);
}

.quote-doc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 44px;
  align-items: start;
}

.quote-doc__brand img {
  display: block;
  width: 190px;
  height: 40px;
}

.quote-doc__issuer {
  margin-top: 20px;
  color: var(--doc-muted);
  font-size: 12px;
  line-height: 18px;
}

.quote-doc__side {
  text-align: right;
}

.quote-doc__type {
  color: var(--doc-fg);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quote-doc__kind {
  margin-top: 8px;
  color: var(--doc-red-small);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-doc__meta {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 4px 16px;
  margin: 18px 0 0;
}

.quote-doc__meta > div {
  display: contents;
}

.quote-doc__meta dt,
.quote-doc__client dt,
.quote-doc__label,
.quote-doc__table th {
  color: var(--doc-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-doc__meta dd,
.quote-doc__client dd {
  margin: 0;
  color: var(--doc-fg);
  font-size: 12px;
  line-height: 16px;
}

/* Un'email lunga va a capo invece di uscire dalla colonna */
.quote-doc__client dd {
  overflow-wrap: anywhere;
}

/* Il foglio senza email (stampa dal menu del browser prima di scriverla): solo il titolo e cosa fare */
.quote-doc__locked {
  display: grid;
  gap: 18px;
  padding: 18px 0 44px;
  border-top: 1px solid var(--doc-border);
}

.quote-doc__locked .quote-doc__text {
  max-width: 460px;
  font-size: 14px;
  line-height: 22px;
}

.quote-doc__subject {
  padding-top: 18px;
  border-top: 1px solid var(--doc-border);
}

.quote-doc__display {
  color: var(--doc-fg);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-doc__display.is-red,
.quote-doc .is-red {
  color: var(--doc-red);
}

.quote-doc__links .is-red {
  color: var(--doc-red-small);
}

.quote-doc__client {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 22px;
  margin: 0;
}

.quote-doc__client > div {
  display: grid;
  gap: 8px;
}

.quote-doc__heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--doc-border);
  color: var(--doc-fg);
  font-size: 19px;
  line-height: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quote-doc__table {
  width: 100%;
  border-collapse: collapse;
}

.quote-doc__table th {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--doc-border-strong);
  font-weight: 400;
  text-align: right;
}

.quote-doc__table th:first-child,
.quote-doc__table td:first-child {
  text-align: left;
}

.quote-doc__table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--doc-border);
  color: var(--doc-copy);
  text-align: right;
  vertical-align: top;
}

.quote-doc__table td + td {
  padding-left: 14px;
  white-space: nowrap;
}

.quote-doc__table tr {
  break-inside: avoid;
}

.quote-doc__table tr.is-service td {
  padding-top: 14px;
}

.quote-doc__svc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--doc-fg);
  font-weight: 700;
}

.quote-doc__svc::before {
  width: 3px;
  height: 14px;
  background: var(--card-accent, var(--doc-red));
  content: "";
}

.quote-doc__item {
  display: block;
  color: var(--doc-fg);
  font-weight: 700;
}

.quote-doc.is-compact .quote-doc__includes {
  display: none;
}

.quote-doc__detail {
  display: block;
  margin-top: 2px;
  color: var(--doc-muted);
  font-size: 12px;
  line-height: 18px;
}

.quote-doc__total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 44px;
  align-items: end;
  padding-top: 18px;
  border-top: 1px solid var(--doc-border);
  break-inside: avoid;
}

.quote-doc__terms .quote-doc__label + .quote-doc__text {
  margin-top: 4px;
}

.quote-doc__terms .quote-doc__text + .quote-doc__label {
  margin-top: 14px;
}

.quote-doc__text {
  color: var(--doc-muted);
  font-size: 12px;
  line-height: 18px;
}

.quote-doc__figure {
  text-align: right;
}

.quote-doc__price {
  margin-top: 8px;
  color: var(--doc-red);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.quote-doc__small {
  margin-top: 6px;
  color: var(--doc-muted);
  font-size: 12px;
  line-height: 18px;
}

.quote-doc__closing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 44px;
  align-items: end;
  padding-top: 24px;
  border-top: 1px solid var(--doc-border);
  break-inside: avoid;
}

.quote-doc__closing img {
  display: block;
  width: 54px;
  height: 72px;
}

.quote-doc__cta {
  color: var(--doc-fg);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-doc__cta span {
  display: block;
}

.quote-doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 16px;
  color: var(--doc-copy);
}

[dir="rtl"] .quote-doc__side,
[dir="rtl"] .quote-doc__figure {
  text-align: left;
}

[dir="rtl"] .quote-doc__table th:first-child,
[dir="rtl"] .quote-doc__table td:first-child {
  text-align: right;
}

[dir="rtl"] .quote-doc__table th,
[dir="rtl"] .quote-doc__table td {
  text-align: left;
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  :root {
    color-scheme: light;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html.quote-print-dark,
  html.quote-print-dark body {
    background: #070707 !important;
  }

  body::before,
  body::after {
    display: none !important;
  }

  body > *:not(.quote-doc) {
    display: none !important;
  }

  .quote-doc {
    display: block;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .quote-doc.is-long .quote-doc__frame {
    display: none;
  }

  .quote-doc.is-long .quote-doc__page {
    padding-block: 0;
  }
}

/* Arabo: niente spaziatura tra le lettere, che spezzerebbe la scrittura legata (nel resto del sito lo fa
   --track-label: 0). Vale per la pagina, la barra in basso e il PDF. */
:root:lang(ar) :is(.quote, .quote-mobilebar, .quote-doc) * {
  letter-spacing: 0;
}