/* ==========================================================================
   Request a Quote — modal
   Markup is injected by assets/js/quote-modal.js; opened by any link to
   #quote. Uses the site tokens (tokens.css) and the shared .btn styles.
   ========================================================================== */

.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 200; /* above --z-nav (50) and the mobile nav panel (100) */
  display: grid;
  place-items: center;
  padding: 16px;
  visibility: hidden;
  pointer-events: none;
}

.quote-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.quote-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 7, 6, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-in-out);
}

.quote-modal__dialog {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* only .quote-form__scroll scrolls */
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(9, 7, 6, 0.28);
  --qm-pad: clamp(20px, 4vw, 40px);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--dur-ui) var(--ease-out-quint), transform 400ms var(--ease-out-quint);
}

.quote-modal.is-open .quote-modal__backdrop { opacity: 1; }
.quote-modal.is-open .quote-modal__dialog { opacity: 1; transform: none; }

body.quote-modal-open { overflow: hidden; }

/* ---- Layout: fixed header / scrolling form / fixed action bar ---- */
.quote-modal__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

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

.quote-modal__head {
  flex-shrink: 0;
  padding: var(--qm-pad) var(--qm-pad) 20px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-in-out);
}

/* Hairline under the header only once the form has scrolled under it */
.quote-modal__head.is-scrolled { border-bottom-color: var(--border); }

/* ---- Header ---- */
.quote-modal__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.quote-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 40px 8px 0;
}

.quote-modal__lede {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.quote-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-in-out), color var(--dur-micro) var(--ease-in-out);
}

.quote-modal__close:hover { background: var(--surface-sunk); color: var(--ink); }

/* ---- Form layout ---- */
.quote-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.quote-form__scroll {
  display: grid;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--qm-pad) 24px;
}

.quote-form__row {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .quote-form__row { grid-template-columns: 1fr 1fr; }
}

.quote-field { display: grid; gap: 8px; min-width: 0; }

.quote-field__label,
.quote-form legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}

.quote-field__label .is-optional {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-muted);
}

.quote-input,
.quote-select,
.quote-textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px — no iOS zoom-on-focus */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--dur-micro) var(--ease-in-out), box-shadow var(--dur-micro) var(--ease-in-out), background var(--dur-micro) var(--ease-in-out);
}

.quote-input::placeholder,
.quote-textarea::placeholder { color: var(--n-500); }

.quote-input:hover,
.quote-select:hover,
.quote-textarea:hover { border-color: var(--n-400); }

.quote-input:focus,
.quote-select:focus,
.quote-textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(171, 52, 29, 0.14);
}

.quote-input[aria-invalid="true"] { border-color: var(--accent); }

.quote-field__error {
  font-size: 0.82rem;
  color: var(--accent-strong);
  min-height: 0;
}

.quote-field__error:empty { display: none; }

.quote-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235C5351' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* ---- Inquiry dropdown — same card as the nav's Projects dropdown
   (.nav-dropdown__menu in style.css): surface card, hairline border,
   soft shadow, 6px inset, 8px-radius rows, subtle hover tint. ---- */
.quote-dd { position: relative; }

.quote-dd__trigger {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  background-image: none;
}

.quote-dd.is-open .quote-dd__trigger {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(171, 52, 29, 0.14);
}

/* Arrow: down + up chevrons stacked as two layers that crossfade on open
   (a background-image can't transition, so the base select arrow is off). */
.quote-dd__trigger::before,
.quote-dd__trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  background: no-repeat center / 12px 8px;
  pointer-events: none;
  transition: opacity 180ms var(--ease-in-out);
}

.quote-dd__trigger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235C5351' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); opacity: 1; }
.quote-dd__trigger::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235C5351' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.5l5-5 5 5'/%3E%3C/svg%3E"); opacity: 0; }
.quote-dd.is-open .quote-dd__trigger::before { opacity: 0; }
.quote-dd.is-open .quote-dd__trigger::after { opacity: 1; }

.quote-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(9, 7, 6, 0.14);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  /* Fade only — no slide */
  transition: opacity 180ms var(--ease-in-out);
}

.quote-dd.is-open .quote-dd__menu {
  opacity: 1;
  pointer-events: auto;
}

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

.quote-dd__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-in-out), color var(--dur-micro) var(--ease-in-out);
}

.quote-dd__option.is-active {
  background: rgba(11, 14, 18, 0.05);
  color: var(--n-950);
}

/* Keyboard highlight gets a visible ring, not just the faint tint */
.quote-dd__menu:focus-visible .quote-dd__option.is-active {
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

.quote-dd__option[aria-selected="true"] { color: var(--accent-strong); }

/* Multi-select list: "General" (radio dot) is exclusive; products below
   the group label are checkboxes. Selection is shown by the mark AND the
   colour, so it doesn't rely on colour alone. */
.quote-dd__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quote-dd__menu ul:focus { outline: none; }

.quote-dd__option { justify-content: flex-start; }

.quote-dd__mark {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  transition: background var(--dur-micro) var(--ease-in-out), border-color var(--dur-micro) var(--ease-in-out);
}

.quote-dd__option--single .quote-dd__mark { border-radius: 999px; }
.quote-dd__option--multi .quote-dd__mark { border-radius: 5px; }

.quote-dd__option[aria-selected="true"] .quote-dd__mark {
  border-color: var(--accent);
  background: var(--accent);
}

/* radio: inner dot */
.quote-dd__option--single[aria-selected="true"] .quote-dd__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #fff;
}

/* checkbox: tick */
.quote-dd__option--multi[aria-selected="true"] .quote-dd__mark::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.quote-dd__group {
  margin: 6px 14px 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.quote-dd__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 8px 8px 2px 14px;
  border-top: 1px solid var(--border);
}

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

.quote-dd__done {
  min-height: 44px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--n-50);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-in-out);
}

.quote-dd__done:hover { background: var(--n-700); }
.quote-dd__done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Trigger summary: names truncate, a count badge shows when 2+ picked */
.quote-dd__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quote-dd__count {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  margin: 0 8px 0 10px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

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

/* ---- Per-product quantity rows ---- */
.quote-items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

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

.quote-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) 40px;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  animation: quote-field-in var(--dur-ui) var(--ease-out-quint);
}

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

/* Phones: name on its own line, quantity + remove underneath */
@media (max-width: 479px) {
  .quote-item {
    grid-template-columns: minmax(0, 1fr) 40px;
    row-gap: 4px;
    padding: 8px 6px 6px 12px;
  }
  .quote-item__name { grid-column: 1 / -1; }
}

.quote-item__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-item .quote-input {
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--surface);
}

.quote-item__remove {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-in-out), color var(--dur-micro) var(--ease-in-out);
}

.quote-item__remove:hover { background: var(--accent-tint); color: var(--accent-strong); }
.quote-item__remove:focus-visible,
.quote-qty__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .quote-item { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-dd__menu { transition: opacity 150ms linear; transform: none; }
}

.quote-textarea {
  resize: none; /* height follows content (quote-modal.js autosize) */
  overflow: hidden;
  line-height: 1.55;
  min-height: calc(3 * 1.55em + 26px); /* 3 lines minimum */
}

/* ---- Service tabs (radio group styled as segmented cards) ---- */
.quote-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quote-form legend { margin-bottom: 8px; }

.quote-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.quote-tabs__hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.quote-tab { position: relative; }

.quote-tab input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.quote-tab label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-in-out), background var(--dur-micro) var(--ease-in-out), box-shadow var(--dur-micro) var(--ease-in-out);
}

.quote-tab label:hover { border-color: var(--n-400); }

.quote-tab input:checked + label {
  border-color: var(--accent);
  background: rgba(255, 222, 213, 0.45); /* --accent-tint, softened */
  box-shadow: inset 0 0 0 1px var(--accent);
}

.quote-tab input:checked + label { color: var(--accent-strong); }

.quote-tab input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Quantity (appears for windows/doors) ---- */
.quote-qty { position: relative; }

.quote-qty .quote-input { padding-right: 48px; }

.quote-qty__clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-in-out), color var(--dur-micro) var(--ease-in-out);
}

.quote-qty__clear:hover { background: var(--surface-sunk); color: var(--ink); }
.quote-qty__clear[hidden] { display: none; }

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

.quote-field--qty:not([hidden]) {
  animation: quote-field-in var(--dur-ui) var(--ease-out-quint);
}

@keyframes quote-field-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* ---- Actions ---- */
.quote-form__actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 16px var(--qm-pad);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Text-only secondary action: no border/fill, underline on hover */
.btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  padding-left: 14px;
  padding-right: 14px;
}

.btn--text:hover,
.btn--text:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn--text:focus-visible,
.quote-form__actions .btn--primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Narrow screens: stack, primary on top (column-reverse — it's second in
   the DOM so it stays last in tab order), both centred. */
@media (max-width: 559px) {
  .quote-form__actions {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .quote-form__actions .btn--primary { width: min(100%, 320px); }
}

.quote-form__actions .btn svg { flex-shrink: 0; }

.quote-form__actions .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

.quote-form__note {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Sent state ---- */
.quote-modal__sent { text-align: center; padding: calc(var(--qm-pad) + 16px) var(--qm-pad) var(--qm-pad); overflow-y: auto; }
.quote-modal__sent[hidden] { display: none; }

.quote-modal__sent-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.quote-modal__sent p { color: var(--ink-muted); margin: 0 0 24px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .quote-modal__dialog,
  .quote-modal__backdrop { transition: opacity 150ms linear; transform: none; }
  .quote-field--qty:not([hidden]) { animation: none; }
}

/* ---- Inline mode (contact.html): same form, in a page section ---- */
.quote-modal__dialog--inline {
  width: 100%;
  max-height: none;
  overflow: visible;
  opacity: 1;
  transform: none;
  box-shadow: 0 18px 40px rgba(9, 7, 6, 0.08);
}

.quote-modal__dialog--inline .quote-form__scroll { overflow: visible; }
.quote-modal__dialog--inline .quote-form__actions { border-radius: 0 0 14px 14px; }
.quote-modal__dialog--inline .quote-modal__title { margin-right: 0; }
.quote-modal__dialog--inline [hidden] { display: none !important; }

/* ---- Web3Forms: honeypot + send error ---- */
.quote-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.quote-form__actions { flex-wrap: wrap; }

.quote-form__status {
  flex: 1 0 100%;
  order: -1;
  margin: 0 0 4px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(171, 52, 29, 0.35);
  background: rgba(255, 222, 213, 0.45);
  color: var(--accent-strong);
  font-size: 0.88rem;
  line-height: 1.45;
}

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

/* Each field keeps its label/input/error stacked at the top, so an error
   under one field never stretches the field next to it in the same row. */
.quote-form__row { align-items: start; }
.quote-field { align-content: start; }

/* GDPR consent line (B5) */
.quote-form__consent {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.quote-form__consent a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }