/* The consultation page. Scoped under .ol-consult so nothing here can reach
   the rest of the site, and it borrows the theme's custom properties where they
   exist rather than restating the palette. */

/* ONE CENTRED COLUMN.
   The theme's h1 and this block both live in the same .wrap, so both are
   centred here rather than only the form — which would have left the title
   hanging off to the left of a centred card. */
.ol-consult-page .wrap > h1 {
  text-align: center;
  margin-bottom: .5rem;
}
.ol-consult { max-width: 40rem; margin: 0 auto; }

/* The price reads as an eyebrow under the title, not as a heading of its own. */
.ol-consult__head { text-align: center; margin: 0 0 1.25rem; }
.ol-consult__price {
  display: inline-block; margin: 0;
  padding: .35rem .9rem;
  background: var(--amber, #ffc107); color: var(--ink, #0d0c0f);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem;
}
.ol-consult__intro {
  margin: 0 auto 2rem; max-width: 34rem; text-align: center;
  opacity: .85;
}

/* THE FORM IS AN OBJECT, not loose text on the band.
   A white card on the bone ground gives the column an edge, which is what
   stops a narrow centred block reading as an accident. */
.ol-consult__form {
  background: #fff;
  border: 1px solid var(--bone-line, #dcdcde);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.ol-consult__form .steps { margin-bottom: 2rem; }
/* Steps are plain divs, not <section>. The theme sets
   `section { padding-block: var(--section-y) }` for its full-bleed bands, which
   silently added 64px above and below the contents of every step — a dead band
   of white under the progress bar that looked like a rendering fault. Belt and
   braces here in case the markup ever reverts. */
.ol-consult__panel { padding-block: 0; }
.ol-consult__panel[hidden] { display: none; }
.ol-consult__legend {
  margin: 0 0 .35rem; font-size: 1.35rem; line-height: 1.15;
}
.ol-consult__legend:focus-visible { outline: 2px solid var(--ink, #0d0c0f); outline-offset: 4px; }
.ol-consult__hint { margin: 0 0 1.5rem; opacity: .75; font-size: .92rem; }

/* Back / Continue / Pay. Pay takes the full width on its own; Back and
   Continue sit at opposite ends, which is the direction each one moves you. */
.ol-consult__nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; }
.ol-consult__nav > * { margin: 0; }
.ol-consult__next { margin-left: auto !important; }
.ol-consult__back, .ol-consult__next {
  padding: .95rem 2.25rem; border: 2px solid var(--ink, #0d0c0f);
  background: transparent; color: var(--ink, #0d0c0f);
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; border-radius: 0;
  transition: background .15s ease, color .15s ease;
}
.ol-consult__next { background: var(--ink, #0d0c0f); color: #fff; }
.ol-consult__back:hover, .ol-consult__back:focus-visible { background: var(--ink, #0d0c0f); color: #fff; }
.ol-consult__next:hover, .ol-consult__next:focus-visible {
  background: var(--amber, #ffc107); border-color: var(--amber, #ffc107); color: var(--ink, #0d0c0f);
}
.ol-consult__back[hidden], .ol-consult__next[hidden], .ol-consult__pay[hidden] { display: none; }

.ol-consult__row2, .ol-consult__row3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .ol-consult__row2 { grid-template-columns: repeat(2, 1fr) }
  .ol-consult__row3 { grid-template-columns: repeat(3, 1fr) }
}

.ol-consult__field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.ol-consult__field label { font-weight: 600; font-size: .9rem; }
.ol-consult__field input,
.ol-consult__field textarea {
  width: 100%; padding: .8rem .9rem;
  border: 1px solid var(--bone-line, #dcdcde); border-radius: 0;
  background: #fff; color: inherit; font: inherit;
}
.ol-consult__field input:focus-visible,
.ol-consult__field textarea:focus-visible {
  outline: 2px solid var(--ink, #0d0c0f); outline-offset: 1px; border-color: var(--ink, #0d0c0f);
}
/* The browser's own invalid state, but only once it has been interacted with —
   a form that is red before it is touched reads as broken. */
.ol-consult__field input:user-invalid,
.ol-consult__field textarea:user-invalid { border-color: #b3261e; }

.ol-consult__card {
  padding: 1rem; border: 1px solid var(--bone-line, #dcdcde); background: #fff; min-height: 3.5rem;
}
.ol-consult__lock { margin: .6rem 0 0; font-size: .82rem; opacity: .7; }

.ol-consult__problem {
  margin: 0 0 1rem; padding: .9rem 1rem;
  border-left: 4px solid #b3261e; background: #fdf2f1; color: #5f1a15;
}
.ol-consult__problem[hidden] { display: none; }

.ol-consult__pay {
  flex: 1 1 100%; padding: 1.1rem 2rem; border: 2px solid var(--amber, #ffc107);
  background: var(--amber, #ffc107); color: var(--ink, #0d0c0f);
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; border-radius: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ol-consult__pay:hover:not(:disabled),
.ol-consult__pay:focus-visible:not(:disabled) {
  background: var(--ink, #0d0c0f); border-color: var(--ink, #0d0c0f); color: var(--amber, #ffc107);
}
.ol-consult__pay:disabled { opacity: .6; cursor: progress; }

.ol-consult__done { border-left: 4px solid var(--amber, #ffc107); padding: 1.5rem 1.5rem 1rem; background: #fff; }
.ol-consult__done[hidden] { display: none; }
.ol-consult__done h2 { margin-top: 0; }

/* What you are paying for, restated at the moment of paying. A definition
   list because that is what this is — three labelled values, not a table. */
.ol-consult__summary {
  margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  background: var(--bone, #f4f4f4);
  border-left: 3px solid var(--amber, #ffc107);
}
.ol-consult__summary > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.ol-consult__summary > div + div { margin-top: .5rem; }
.ol-consult__summary dt { margin: 0; font-weight: 600; }
.ol-consult__summary dd { margin: 0; text-align: right; }
/* The line that carries the money is the one that should be unmissable. */
.ol-consult__summary > div:first-child dt,
.ol-consult__summary > div:first-child dd {
  font-family: var(--display, inherit); font-weight: 700; font-size: 1.05rem;
}
.ol-consult__summary-car dt,
.ol-consult__summary-car dd { font-size: .88rem; opacity: .75; }