/* Platinum Panes — discount codes on /quote.
   Loaded AFTER styles.css and touches nothing in it: this file only adds the
   pieces the quote wizard's discount feature needs (the "Have a discount
   code?" disclosure, the applied-discount rows in the itemised quote, the
   book-step band line and the success-panel line). Colors come from the
   tokens styles.css already defines. Teal is used as a FILL behind navy text
   only, never as small text on a light ground.
   js/quote.js is the only consumer. */

/* --- the itemised quote, with a code applied ------------------------------
   The original total row stays exactly where it was and becomes a plain
   subtotal (white ground, small figure); the discount row sits on a teal
   wash; the final "Estimate with discount" row keeps the recessed total
   treatment, so the eye lands on the number that now matters. */
.quote-total--was { background: var(--panel); }
.quote-total--was .quote-amt { font-size: .95rem; font-weight: 600; letter-spacing: 0; }

.quote-row--disc { background: #e2f2ef; }
.quote-row--disc .quote-label { color: var(--ink); font-weight: 600; }
.quote-row--disc .quote-sub { color: var(--ink-soft); font-weight: 400; font-size: .75rem; }
.quote-row--disc .quote-amt { color: var(--ink); font-weight: 900; }

/* --- single-price notes ----------------------------------------------------
   The disclaimer sits directly under the total and the screens/tracks
   assumption stacks behind it; both are .quote-foot (1.4rem below), which is
   too airy for two notes about one figure and pushes the discount prompt away
   from the total it belongs to. Tightened here, this file being the only one
   this feature may add to. */
.quote-disclaimer { margin-bottom: .6rem; }
.quote-assume { margin-bottom: .5rem; }

/* --- the disclosure ------------------------------------------------------- */
.disc { margin: -.15rem 0 1.1rem; }

/* Text buttons: a real <button>, 44px tall, underlined so it reads as a
   control without becoming a third kind of pill. */
.disc-toggle, .disc-remove {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.3;
  color: var(--blue-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.disc-remove { color: var(--ink-soft); }
.disc-toggle:hover, .disc-remove:hover { color: var(--ink); }
.disc-toggle:focus-visible, .disc-remove:focus-visible,
.disc-apply:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px;
}

/* The chevron flips with aria-expanded, so state is carried by the attribute
   assistive tech reads and the glyph merely follows it. */
.disc-toggle::after {
  content: ''; flex: none; width: .42em; height: .42em; margin-top: -.2em;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.disc-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: .2em; }

.disc-panel { margin-top: .15rem; }
.disc-panel .field { margin-bottom: 0; }

/* Input and Apply share a row and wrap only if the phone genuinely cannot fit
   both. The selector is 0,3,1 to beat styles.css's `.wiz input[type="text"]`
   (0,2,1), which sets width:100%. Upper-cased for display only — the value the
   customer typed is what stays in the field and what is sent. */
.disc-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.wiz .disc-row input[type="text"] {
  flex: 1 1 9rem; width: auto; min-width: 0; min-height: 46px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.wiz .disc-row input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(150, 206, 198, .6);
}
.disc-apply { flex: 0 0 auto; }
.disc-apply:disabled { opacity: .6; cursor: progress; transform: none; }

/* The CRM's message, printed verbatim. The mark makes it read as an error
   without colour: a glyph, then words. The paragraph exists (empty) whenever
   the field does, so role="alert" announces text that arrives later. */
.disc-err {
  color: var(--error); font-size: .84rem; font-weight: 600; line-height: 1.5;
  max-width: 46ch;
}
.disc-err:not(:empty) { margin-top: .65rem; }
.disc-err:not(:empty)::before {
  content: '!'; content: '!' / '';
  display: inline-grid; place-items: center;
  width: 1.2em; height: 1.2em; margin-right: .55em;
  border-radius: 50%; background: var(--error); color: #fff;
  font-size: .82em; font-weight: 900; line-height: 1; vertical-align: .05em;
}

/* Dropped / re-checking notices: a recessed strip with the blue callout edge,
   the same family as the estimate band. */
.disc-hint {
  margin: 0 0 .35rem; padding: .55rem .85rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 2px solid var(--blue-ink); border-radius: var(--radius);
  font-size: .8rem; font-weight: 600; line-height: 1.5; color: var(--ink-soft);
  max-width: 46ch;
}

/* --- the book-step band line ----------------------------------------------
   "Includes your $50 first-cleaning discount (…)." — sits between the note
   and the exclusion, weighted like the exclusion because it changes the
   figure above it. */
.wiz-est-disc {
  font-family: var(--font);
  margin: .45rem 0 0; font-size: .78rem; line-height: 1.5; font-weight: 600;
  color: var(--ink-soft); max-width: 46ch;
}

/* --- the success panel ---------------------------------------------------- */
.wiz-done .wiz-done-disc {
  margin-top: 1.1rem; padding: .65rem 1rem;
  background: #e2f2ef; border-radius: var(--radius);
  font-weight: 600; color: var(--ink);
}

@media (max-width: 640px) {
  /* Apply gives back some of the tracking/padding tuned for desktop so the
     field and the button still share one row at 320px. */
  .disc-apply { padding-inline: 1.1em; letter-spacing: .09em; }
  .disc-toggle, .disc-remove { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .disc-toggle::after { transition: none; }
}