/* ===========================================================================
   Get a Quote page (page-quote.php)

   Layout for the single-page quote request drawn from the approved mockup:
   the five-step progress bar, the Vehicle Information form, the summary /
   why-choose rail and the "what you can insure" strip.

   Composes with pages.css (hero, cta-band, .panel, .card, .icon-disc) and the
   .quote-form input styling in site.css, both of which load before this file.
   =========================================================================== */

/* ---------- Hero: integrated banner --------------------------------------- */

/* The approved reference reads as one scene: the headline sits on a clean left
   ground while the car, city skyline and a green shield bleed to the right
   edge. This mirrors the about / contact hero banner treatment in pages.css,
   scoped to the quote page so the shared page-hero part stays untouched. */

.page-template-page-quote .p-hero h1 { text-transform: uppercase; }

/* Raise the skyline from its faint 10% backdrop so the right side reads as a
   real scene behind the car. */
.page-template-page-quote .p-hero__bg { opacity: .3; filter: saturate(.75); }

/* Whiten only the left ground under the copy, then fall away so the scene on
   the right stays visible (the shared wash covers the full width). */
.page-template-page-quote .p-hero::after {
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .96) 0%,
    rgba(255, 255, 255, .86) 32%,
    rgba(255, 255, 255, .4) 52%,
    rgba(255, 255, 255, 0) 66%);
}

@media (min-width: 768px) {
  /* Compact banner: the scene sets the height, the copy centres against it. */
  .page-template-page-quote .p-hero__inner {
    grid-template-columns: 1.02fr .98fr;
    align-items: stretch;
    padding-block: 0;
    gap: 2rem;
  }

  .page-template-page-quote .p-hero__copy {
    align-self: center;
    padding-block: 2.75rem;
  }

  /* Bleed the scene across the right gutter to the true viewport edge. */
  .page-template-page-quote .p-hero__media {
    align-self: stretch;
    margin-right: calc(-1 * (var(--pad-x) + (100vw - var(--maxw)) / 2));
  }
}

/* The scene: car and shield positioned against a shared ground. */
.page-template-page-quote .p-hero__media--crested {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  min-height: 300px;
  overflow: visible;
}

/* Green light pooling on the right, behind the shield — as the reference shows. */
.page-template-page-quote .p-hero__media--crested::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 95% at 88% 62%,
    rgba(11, 78, 59, .4) 0%, rgba(23, 166, 115, .18) 42%, transparent 72%);
  pointer-events: none;
}

/* Car: no card, sits on the scene, overlaps the shield in front. */
.page-template-page-quote .p-hero__media img {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 500px;
  margin: 0 0 1.75rem;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .24));
}

/* Shield crest: reuse the site's green badge, enlarged and set to the right,
   showing only the check — no "Secure & Protected" caption. */
.page-template-page-quote .p-hero__media--crested .crest {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1;
  width: min(14rem, 44%);
  margin: 0;
  padding: 0;
  gap: 0;
  aspect-ratio: 1 / 1.15;
  transform: translate(16%, -52%);
}

.page-template-page-quote .p-hero__media--crested .crest strong,
.page-template-page-quote .p-hero__media--crested .crest span { display: none; }

.page-template-page-quote .p-hero__media--crested .crest .ico { width: 44%; height: 44%; }

/* On phones the scene stacks under the copy; keep the shield tucked in so it
   never pushes a horizontal scrollbar. */
@media (max-width: 767px) {
  .page-template-page-quote .p-hero__media--crested { min-height: 240px; margin-top: 1rem; }
  .page-template-page-quote .p-hero__media--crested .crest { transform: translate(6%, -50%); width: 40%; }
}

/* ---------- Progress steps ------------------------------------------------ */

.q-steps-sec { padding-top: 2.25rem; }

/* Compact inline stepper: each step is an icon disc carrying a small number
   badge, its label set beside it, and dashed rails linking one step to the
   next — as the approved reference shows. */
.q-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
}

/* First step hugs the left; the rest grow so their leading rail fills the gap
   between the previous label and this disc. */
.q-step:first-child { flex: 0 0 auto; }

.q-step::before {
  content: "";
  flex: 1 1 auto;
  min-width: 1.25rem;
  height: 0;
  margin: 0 .55rem;
  border-top: 2px dashed var(--line);
}

.q-step:first-child::before { display: none; }

/* The icon disc. */
.q-step__disc {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--gray);
}

.q-step__ico { display: grid; place-items: center; }
.q-step__disc .ico { width: 1.15rem; height: 1.15rem; }

/* Small number badge pinned to the disc. */
.q-step__num {
  position: absolute;
  top: -.3rem;
  right: -.3rem;
  display: grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .18rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--line);
  color: var(--dark);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
}

.q-step__label {
  flex: none;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
  white-space: nowrap;
}

/* Active step: filled green disc, white icon, dark badge, green label. */
.q-step.is-active .q-step__disc {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(11, 78, 59, .12);
}

.q-step.is-active .q-step__num {
  background: var(--primary-dark);
  color: #fff;
}

.q-step.is-active .q-step__label { color: var(--primary); }

/* On narrow screens the row scrolls sideways rather than cramping. */
@media (max-width: 720px) {
  .q-steps { overflow-x: auto; padding-bottom: .5rem; }
  .q-step { flex: 0 0 auto; }
  .q-step::before { min-width: 1.5rem; }
}

/* ---------- Form + summary grid ------------------------------------------- */

.q-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .q-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ---------- Vehicle Information panel -------------------------------------- */

.q-panel {
  padding: 0;
  overflow: hidden;
}

.q-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
  background: var(--primary);
  color: #fff;
}

.q-panel__title {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: 1.02rem;
  color: #fff;
}

.q-panel__title .ico { width: 1.2rem; height: 1.2rem; }

.q-panel__req {
  font-size: .72rem;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}

.q-form { padding: 1.5rem; }

@media (max-width: 520px) {
  .q-panel__req { display: none; }
  .q-form { padding: 1.15rem; }
}

/* ---------- Field labels & grids ------------------------------------------ */

.field__label {
  display: block;
  margin-bottom: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dark);
}

.req { color: #e04f4f; }

.q-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.1rem;
}

@media (min-width: 560px) { .q-fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .q-fields { grid-template-columns: repeat(3, 1fr); } }

/* Neutralise the footer-form's stacked spacing inside the grid. Matches the
   .quote-form .field + .field specificity so source order decides. */
.q-form .field + .field { margin-top: 0; }

.q-subhead {
  margin: 1.6rem 0 .9rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--primary);
}

/* ---------- Insurance-type toggle ----------------------------------------- */

.q-types {
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
}

.q-types legend { padding: 0; }

.q-types__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-top: .55rem;
}

@media (min-width: 640px) { .q-types__grid { grid-template-columns: repeat(4, 1fr); } }

.q-type {
  position: relative;
  display: block;
  cursor: pointer;
}

/* The real radio sits invisibly over its box; .quote-form input styling is
   overridden here so it is a hit target, not a bordered field. */
.q-type input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.q-type__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--dark);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  transition: border-color var(--t), background var(--t), color var(--t);
}

.q-type__box .ico { width: 1.1rem; height: 1.1rem; color: var(--accent); }

.q-type input:checked + .q-type__box {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.q-type input:checked + .q-type__box .ico { color: #fff; }

.q-type input:focus-visible + .q-type__box {
  box-shadow: 0 0 0 3px rgba(23, 166, 115, .25);
}

/* ---------- Submit & privacy note ----------------------------------------- */

.q-submit {
  margin-top: 1.6rem;
  justify-content: center;
  gap: .5rem;
}

.q-safe {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: .8rem;
  color: var(--primary);
}

.q-safe .ico { flex: none; width: 1.1rem; height: 1.1rem; }

/* ---------- Sidebar ------------------------------------------------------- */

.q-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.q-side__h {
  margin: 0 0 1rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dark);
}

.q-summary { text-align: center; }

.q-summary__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: .4rem auto 1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.q-summary__icon .ico { width: 2.1rem; height: 2.1rem; }

.q-summary__hint {
  margin: 0 0 1.1rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--gray);
  padding: 9px 67px;
}

.q-ticks {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
  padding: 11px 98px;
  list-style: none;
  text-align: left;
}

.q-ticks li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--dark);
}

/* Filled green disc behind each check, as the reference shows. */
.q-ticks .ico {
  flex: none;
  box-sizing: border-box;
  width: 1.3rem;
  height: 1.3rem;
  padding: .3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}

.q-why__list {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  margin: 0;
  padding: 40px;
  list-style: none;
}

.q-why__list li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.q-why__list .icon-disc { flex: none; }

.q-why__copy {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.q-why__copy strong { font-size: .88rem; color: var(--dark); }
.q-why__copy span { font-size: .8rem; line-height: 1.5; color: var(--gray); }

/* Why card — reference treatment: a dark-green panel with translucent icon
   discs and white copy, set apart from the white summary card above it. */
.q-why {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: transparent;
  color: #fff;
}

.q-why .q-side__h { color: #fff; padding: 11px 63px; }

.q-why .icon-disc {
  background: #fff;
  border: 0;
  color: var(--primary);
}

.q-why .q-why__copy strong { color: #fff; }
.q-why .q-why__copy span { color: rgba(255, 255, 255, .78); }

/* The summary heading sits left over its centred icon and hint, as the
   reference shows. */
.q-summary .q-side__h { text-align: left; padding: 15px 82px; }

/* The large side paddings above are tuned for the 360px desktop rail. On a
   phone the card is nearly as narrow but the paddings don't shrink, so the
   text gets squeezed. Relax the horizontal padding on small screens (keeping
   the vertical rhythm) and centre the checklist instead of indenting it. */
@media (max-width: 480px) {
  .q-summary .q-side__h { padding: 15px 20px; }
  .q-summary__hint      { padding: 9px 12px; }
  .q-ticks              { padding: 11px 0; align-items: center; }
  .q-why .q-side__h     { padding: 11px 24px; }
  .q-why__list          { padding: 28px 20px; }
}

/* ---------- What you can insure strip ------------------------------------- */

.q-insure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 520px) { .q-insure { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .q-insure { grid-template-columns: repeat(5, 1fr); } }

.q-insure__card { text-align: center; }
.q-insure__card .icon-disc { margin: 0 auto .8rem; }
.q-insure__card h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--dark); }
.q-insure__card p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--gray); }