/* =========================================================================
   Branching quote form: route cards, revealed steps, a readable colour
   picker, and a submit button that stays dim until the chosen route can
   actually be answered.

   The revealed containers are .quote-step rather than .step on purpose. The
   theme already uses .step for the numbered cards on the homepage, and
   borrowing that name here inherited its grid and squeezed the colour picker
   into a two-column sliver.
   ========================================================================= */

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

/* The theme sets .td-optionfield { display: grid }, an author rule that beats
   the browser's own [hidden] { display: none }. Without this the JS sets the
   attribute correctly and the palette stays on screen anyway, so both colour
   ranges show at once. Specificity here (0,3,0) clears it. */
.quote-form .swatches[hidden],
.quote-form .td-optionfield[hidden] { display: none; }

.quote-form .quote-step {
  display: block;
  animation: quote-step-in .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes quote-step-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Route cards ---------- */
.choice {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.choice__legend {
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.choice__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.choice__card {
  position: relative;
  display: block;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.choice__card:hover { border-color: var(--panel); transform: translateY(-1px); }

/* The radio is only for semantics and keyboard use. */
.choice__card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.choice__card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.choice__card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.choice__body { display: grid; gap: 5px; }
.choice__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.25;
}
.choice__desc {
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted);
}
.choice__card:has(input:checked) .choice__title::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 8px;
  margin-left: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translateY(-2px);
}

/* ---------- Colour picker ----------
   The product page shows bare dots with the name in a tooltip, which works
   when you are choosing one colour you can already see on the product. Here
   people are picking several from a list they do not know by heart, so the
   name has to be readable without hovering. */
.quote-form .swatches { width: 100%; }

.quote-form .swatches__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.quote-form .swatches__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  width: 100%;
}

.quote-form .swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-width: 0;
  padding: 7px 12px 7px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.quote-form .swatch:hover { border-color: var(--panel); }
.quote-form .swatch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.quote-form .swatch__dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
}

/* Undo the product page's visually-hidden treatment. */
.quote-form .swatch__name {
  position: static;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--muted);
}

.quote-form .swatch:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.quote-form .swatch:has(input:checked) .swatch__name {
  color: var(--ink);
  font-weight: 600;
}
.quote-form .swatch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- File field ---------- */
.field--file input[type="file"] {
  padding: 12px;
  cursor: pointer;
}
.field--file input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: border-color .18s ease;
}
.field--file input[type="file"]::file-selector-button:hover { border-color: var(--accent); }
.field__hint.is-err { color: var(--energy); }

/* ---------- Submit that lights up ---------- */
.btn--quote {
  opacity: 0.45;
  filter: saturate(0.35);
  transition: opacity .25s ease, filter .25s ease, box-shadow .25s ease;
}
.btn--quote.is-ready {
  opacity: 1;
  filter: none;
  animation: quote-ready-pulse 1.6s ease-out 1;
}
@keyframes quote-ready-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(60, 181, 74, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(60, 181, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 181, 74, 0); }
}

@media (max-width: 520px) {
  .quote-form .swatches__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-form .quote-step { animation: none; }
  .btn--quote.is-ready { animation: none; }
  .choice__card:hover { transform: none; }
}

/* Engines without :has() get everything legible and selectable rather than a
   broken selected state, which is the safer way to degrade. */
@supports not (selector(:has(*))) {
  .btn--quote { opacity: 1; filter: none; }
  .quote-form .swatch input { position: static; opacity: 1; width: auto; height: auto; }
}