/* ===========================================================================
   Got Filth — modernization layer
   Loaded AFTER the design system. Purely additive: delete the <link> that
   pulls this in and the app returns exactly to its previous appearance.

   COLOR IS UNTOUCHED. Every value below is either a non-color property
   (radius, spacing, tracking, weight, shadow geometry) or a reference to a
   token that already existed in the design system. No new hex values, no
   remapped hues, no changed accent.

   Inline styles win over stylesheets, and this document carries 853 of them,
   so overrides here are marked !important by necessity rather than habit.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Non-color token additions
   --------------------------------------------------------------------------- */
#root {
  --r-panel: 20px;   /* large containers */
  --r-card: 16px;    /* selectable cards */
  --r-control: 10px; /* inputs, buttons, small surfaces */
  --r-pill: 100px;

  --lift-rest:  0 1px 2px var(--color-ink-5);
  --lift-hover: 0 2px 4px var(--color-ink-5), 0 12px 28px var(--color-ink-10);
  --lift-panel: 0 1px 2px var(--color-ink-5), 0 18px 40px var(--color-ink-5);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------------
   1. Micro-type scale
   Field labels and section eyebrows were 13-14px sentence case — the same
   setting as body copy, so they carried no signal. Small, tracked, uppercase
   reads as deliberate and puts real distance between label and value.
   --------------------------------------------------------------------------- */
#root label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 9px !important;
}

/* The "Step two" eyebrow above each heading. Scoped to the booking flow —
   the landing page uses .eyebrow at editorial size and should keep it. */
#bwContent .eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

/* Section headings inside the summary panel get the same treatment. */
#bwSummary [style*="font-weight:600"][style*="font-size:14px"],
#bwSummary [style*="font-weight:600"][style*="font-size:15px"] {
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ---------------------------------------------------------------------------
   2. Display typography
   Asul inherits +0.01em tracking from the DS, which is right at 26px and too
   loose at 48-84px. Large serif display wants to close up slightly.
   --------------------------------------------------------------------------- */
#root h1, #root h2 {
  letter-spacing: -.018em !important;
  line-height: 1.04 !important;
}
#root h3 { letter-spacing: -.012em !important; }
#root h4, #root h5 { letter-spacing: -.006em !important; }

/* Money and counts should never shift width as they change. */
#root [style*="font-family:var(--font-heading)"],
#bwSummary, #breakdown, #confDetails {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   3. Radius hierarchy
   --------------------------------------------------------------------------- */
#bwSummary, #bwFaq, #bwFaqMobile, #orderPanel {
  border-radius: var(--r-panel) !important;
}
#svcGrid > div, #extraGrid > div {
  border-radius: var(--r-card) !important;
}
#root input, #root select, #root textarea {
  border-radius: var(--r-control) !important;
}

/* ---------------------------------------------------------------------------
   4. Material — cards rest quietly and answer to the pointer
   The cards already transition border-color and background but never move,
   so a card-sized click target gave no feedback until after the click.
   --------------------------------------------------------------------------- */
#svcGrid > div,
#extraGrid > div {
  box-shadow: var(--lift-rest);
  transition:
    border-color .2s var(--ease),
    background   .2s var(--ease),
    box-shadow   .24s var(--ease),
    transform    .24s var(--ease) !important;
}
#svcGrid > div:hover,
#extraGrid > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-hover);
}
#svcGrid > div:active,
#extraGrid > div:active {
  transform: translateY(-1px);
  transition-duration: .08s !important;
}

#bwSummary, #bwFaq {
  box-shadow: var(--lift-panel) !important;
}

/* Controls: a real focus ring instead of a border colour nudge. */
#root input:focus-visible,
#root select:focus-visible,
#root textarea:focus-visible {
  outline: 2px solid var(--border-strong) !important;
  outline-offset: 2px !important;
  border-color: var(--border-strong) !important;
}
#root button:focus-visible {
  outline: 2px solid var(--border-strong) !important;
  outline-offset: 3px !important;
}

/* Primary actions get a little travel. */
#root button[data-action="next"],
#root button[data-action="submitOrder"],
#root button[data-action="pay"] {
  border-radius: var(--r-control) !important;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease) !important;
}
#root button[data-action="next"]:hover,
#root button[data-action="submitOrder"]:hover,
#root button[data-action="pay"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-hover);
}

/* ---------------------------------------------------------------------------
   5. Signature — the step row as an instrument

   The original drew seven 30px numbered circles that competed with the page
   heading for attention. A hairline rail threaded through them was the
   obvious next move, but the layout ALREADY has a progress bar directly
   below (#progressFill) — a rail would have been a second horizontal
   indicator stacked 20px from the first. One of them had to go, so the
   markers shrink and quiet down and the bar that was already there becomes
   the thing that carries progress.
   --------------------------------------------------------------------------- */
#bwStepLabels {
  align-items: center;
}
#bwStepLabels button {
  gap: 10px !important;
  padding: 0 2px !important;
}
#bwStepLabels button > span:first-child {
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  transition: transform .22s var(--ease);
}

/* The progress bar, sharpened: a hairline track and a precise fill that
   eases rather than jumps. */
#progressFill {
  transition: width .5s var(--ease) !important;
}
/* Labels: quiet, tracked, and only the current one at full strength. */
#bwStepLabels button > span:last-child {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}
#bwStepLabels button:hover > span:first-child {
  transform: scale(1.06);
}

/* Mobile compact counter picks up the same micro-scale. */
#bwStepCompactNum {
  font-size: 11px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   6. Quality floor
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  #svcGrid > div:hover, #extraGrid > div:hover,
  #root button[data-action="next"]:hover { transform: none !important; }
}