/* ff-quote-widget -- the mirror's replacement for the captured hero widget.
 *
 * The captured widget is a monthly-budget stepper (+/- in £25 steps) whose only
 * output is a query string on a "Start your quote" link. It asks the hardest
 * question first, costs ten taps to move £250, and on a 390px screen it starts
 * 632px down the page -- below the fold on the device most of this traffic uses.
 *
 * This replaces it with the journey's own first step: a UK number plate. One
 * field, high intent, no credit anxiety, and whatever is typed here is carried
 * into the real quote journey so it is never asked twice. Budget survives as a
 * second door for people who have not chosen a car yet.
 *
 * Everything is namespaced under #ff-quote-widget / .ffq except the three hero
 * overrides at the end, which are commented individually.
 *
 * Palette and type come from the captured site's own :root tokens
 * (--color-primary #301f8c, --color-pink #dd1d93, --color-secondary #3484a4)
 * so this is Financefinity, not a new brand. The plate is the one exception --
 * it matches the journey's PlateInput exactly; see the token block below.
 */

#ff-quote-widget {
  --ffq-console-top: #3a27a6;
  --ffq-console-bottom: #241663;
  --ffq-edge: rgba(255, 255, 255, 0.16);
  --ffq-ink: #ffffff;
  --ffq-ink-dim: #bdb5ec;
  --ffq-pink: var(--color-pink, #dd1d93);
  --ffq-pink-dark: var(--color-pink-dark, #af1172);
  --ffq-teal: var(--color-secondary, #3484a4);
  --ffq-teal-bright: #5fc6d8;
  /* Matched EXACTLY to the journey's own PlateInput (--ff-plate / --ff-plate-ink
   * / --ff-plate-band in mag-clone's web/src/brand/tokens.css). Deliberately not
   * the Financefinity palette: this is the road's yellow and the road's blue,
   * and the customer has seen it on the front of every car they have owned.
   * Matching it exactly is what makes the plate the customer types here and the
   * plate waiting on /apply/ read as one object rather than two lookalikes. */
  --ffq-plate-yellow: #ffd60a;
  --ffq-plate-yellow-lit: #ffe25c;
  --ffq-plate-ink: #111111;
  --ffq-plate-band: #1f4fb8;
  --ffq-bezel: #14112e;
  --ffq-radius: var(--border-radius-card, 16px);
  /* The metric-matched stand-in is declared in mirror.css; naming it here too
     means the console's type does not jump when Greycliff lands either. */
  --ffq-font: greycliff-cf, "greycliff-cf-fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--ffq-font);
  color: var(--ffq-ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  /* Grid and flex items default to min-width:auto, which refuses to shrink
     below the max-content width of their children. The plate input is a text
     input, whose intrinsic width is its `size` -- left alone it blows the hero
     grid out to ~519px inside a 390px viewport and the whole PAGE scrolls
     sideways. min-width:0 all the way down the chain, plus size="8" on the
     input itself. */
  min-width: 0;
  max-width: 100%;
  /* The hero is a stacking context soup (parallax, sticky images, z-index 20/50).
     Sit above the background image but below the site header. */
  position: relative;
  z-index: 60;
}

/* ---------------------------------------------------------------- console -- */

.ffq-console {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 212, 0, 0.13) 0%, rgba(255, 212, 0, 0) 62%),
    linear-gradient(168deg, var(--ffq-console-top) 0%, var(--ffq-console-bottom) 100%);
  border: 1px solid var(--ffq-edge);
  border-radius: var(--ffq-radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 24px 60px -18px rgba(6, 3, 30, 0.85);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ffq-console > *,
.ffq-door > * {
  min-width: 0;
}

/* A single pink hairline along the top edge -- the brand accent, used once. */
.ffq-console::before {
  content: "";
  display: block;
  height: 3px;
  width: 56px;
  border-radius: 3px;
  background: var(--ffq-pink);
  margin-bottom: 2px;
}

.ffq-title {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  color: var(--ffq-ink);
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------------ doors -- */
/* Two mutually exclusive panels in one card: reg (default) and budget. */

.ffq-door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ffq-door[hidden] {
  display: none;
}

.ffq-field-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ffq-ink-dim);
  margin: 0;
}

/* ------------------------------------------------------------------ plate -- */
/* A recessed dark bezel so the plate's blue band is not read against the
   console's indigo -- and so the plate looks mounted rather than pasted on. */

.ffq-bezel {
  background: var(--ffq-bezel);
  border-radius: 10px;
  padding: 6px;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.18s ease-out;
}

.ffq-plate {
  display: flex;
  align-items: stretch;
  background: var(--ffq-plate-yellow);
  border-radius: 6px;
  overflow: hidden;
  height: 62px;
  min-width: 0;
  transition: background-color 0.25s ease-out;
}

.ffq-plate-band {
  flex: 0 0 44px;
  background: var(--ffq-plate-band);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The ring of stars, drawn as a dotted circle rather than twelve elements. */
.ffq-plate-stars {
  width: 18px;
  height: 18px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 2px dotted var(--ffq-plate-yellow);
  opacity: 0.9;
}

.ffq-plate-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ffq-plate-ink);
  font-family: var(--ffq-font);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: uppercase;
  padding: 0 8px;
  /* Never let iOS zoom the page on focus. */
  -webkit-appearance: none;
  appearance: none;
}

/* Light enough to read as a prompt rather than a value someone has to clear. */
.ffq-plate-input::placeholder {
  color: rgba(17, 17, 17, 0.2);
  font-weight: 800;
  opacity: 1;
}

/* Focus lives on the bezel, not the input: a pink ring around the whole plate. */
.ffq-bezel:focus-within {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45) inset,
    0 0 0 3px var(--ffq-pink);
}

.ffq-bezel:focus-within .ffq-plate {
  background: var(--ffq-plate-yellow-lit);
}

/* Recognised plate: the plate lights and a teal tick slides in. */
.ffq-plate-tick {
  flex: 0 0 0;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ffq-teal);
  transition: flex-basis 0.22s ease-out, width 0.22s ease-out;
}

.ffq-plate-tick svg {
  width: 22px;
  height: 22px;
  flex: none;
}

#ff-quote-widget[data-reg="valid"] .ffq-plate-tick {
  flex-basis: 46px;
  width: 46px;
}

#ff-quote-widget[data-reg="valid"] .ffq-plate {
  background: var(--ffq-plate-yellow-lit);
}

.ffq-hint {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ffq-ink-dim);
  margin: 0;
  min-height: 18px;
}

#ff-quote-widget[data-reg="valid"] .ffq-hint {
  color: var(--ffq-teal-bright);
}

/* -------------------------------------------------------------- budget -- */

.ffq-budget-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  line-height: 1;
}

.ffq-budget-amount {
  font-size: 40px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ffq-budget-suffix {
  font-size: 16px;
  font-weight: 500;
  color: var(--ffq-ink-dim);
}

.ffq-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}

.ffq-slider {
  --ffq-fill: 0%;
}

.ffq-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    var(--ffq-pink) 0 var(--ffq-fill),
    rgba(255, 255, 255, 0.18) var(--ffq-fill) 100%
  );
}

.ffq-slider::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.ffq-slider::-moz-range-progress {
  height: 8px;
  border-radius: 8px;
  background: var(--ffq-pink);
}

.ffq-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--ffq-pink);
  border: 3px solid #ffffff;
  box-shadow: 0 3px 10px rgba(6, 3, 30, 0.6);
}

.ffq-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ffq-pink);
  border: 3px solid #ffffff;
  box-shadow: 0 3px 10px rgba(6, 3, 30, 0.6);
}

.ffq-slider:focus-visible {
  outline: 3px solid var(--ffq-pink);
  outline-offset: 4px;
  border-radius: 8px;
}

.ffq-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ffq-preset {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 4px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--ffq-ink);
  font-family: var(--ffq-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.ffq-preset:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.ffq-preset[aria-pressed="true"] {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-primary, #301f8c);
}

/* The three vehicle tiles are the captured site's real SVGs, which are white
   cards with the label drawn in. They get the light inset panel they were
   designed for rather than being forced onto the dark console. */
/* New or used. Two tiles rather than the captured widget's three vehicle icons:
   the journey recognises no body-type key, so those tiles spent a tap on an
   answer that was thrown away. This one is what opens the journey on step 2. */

.ffq-conditions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  min-width: 0;
}

.ffq-condition {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ffq-font);
  color: var(--ffq-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  transition: border-color 0.12s ease-out, background-color 0.12s ease-out,
    transform 0.12s ease-out;
}

.ffq-condition-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.ffq-condition-hint {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ffq-ink-dim);
}

.ffq-condition:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.ffq-condition[aria-pressed="true"] {
  border-color: var(--ffq-pink);
  background: rgba(221, 29, 147, 0.16);
}

.ffq-condition:focus-visible {
  outline: 3px solid var(--ffq-pink);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- cta -- */

.ffq-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--ffq-pink);
  color: #ffffff;
  border: 0;
  border-radius: 40px;
  padding: 15px 20px;
  font-family: var(--ffq-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease-out, transform 0.12s ease-out;
}

.ffq-cta:hover {
  background: var(--ffq-pink-dark);
  color: #ffffff;
}

.ffq-cta:active {
  transform: translateY(1px);
}

.ffq-cta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* Only rendered once a plate is recognised -- the payoff for typing it. */
.ffq-cta-sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  margin-top: 2px;
}

.ffq-cta-sub:empty {
  display: none;
}

/* ------------------------------------------------------------------ switch -- */

.ffq-switch {
  background: none;
  border: 0;
  padding: 4px 0;
  margin: -4px auto 0;
  color: var(--ffq-ink-dim);
  font-family: var(--ffq-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ffq-switch:hover {
  color: #ffffff;
}

.ffq-switch:focus-visible {
  outline: 2px solid var(--ffq-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ small print -- */
/* Regulated copy, verbatim from the site's own footer. Sits outside the console
   on its own translucent strip so it stays legible over the hero photograph. */

.ffq-smallprint {
  background: rgba(7, 4, 26, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ffq-smallprint p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #ddd8f5;
}

.ffq-smallprint strong {
  color: #ffffff;
  font-weight: 700;
}

.ffq-smallprint .ffq-rep {
  font-size: 11px;
  line-height: 1.45;
  color: #c6c0e6;
}

/* ---------------------------------------------------------------- entrance -- */
/* One orchestrated entrance rather than a scatter of micro-interactions: the
   console rises, the small print follows it 90ms behind.

   A TRANSITION, not a keyframe animation, and deliberately so. An animation
   with `fill-mode: both` holds its `from` frame until the animation is actually
   scheduled -- and if it never is (a background tab, a throttled renderer, a
   re-mount that interrupts it) the widget sits at opacity 0 and the primary
   call to action is invisible. Caught exactly that mid-flight in headless
   Chrome. A transition cannot fail that way: the resting state IS the visible
   one, so if it never runs the widget simply appears. The offset comes from the
   .ffq-enter class the script sets at mount and drops on the next frame. */

#ff-quote-widget .ffq-console,
#ff-quote-widget .ffq-smallprint {
  transition: opacity 0.5s cubic-bezier(0.22, 0.7, 0.3, 1),
              transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1);
}

#ff-quote-widget .ffq-smallprint {
  transition-delay: 0.09s;
}

#ff-quote-widget.ffq-enter .ffq-console,
#ff-quote-widget.ffq-enter .ffq-smallprint {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  #ff-quote-widget *,
  #ff-quote-widget *::before {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ------------------------------------------------------------------ tablet -- */

@media (min-width: 40em) and (max-width: 63.99em) {
  /* Still one column here, so without a cap the console fills the whole
     container -- at 820px that is a 585px plate with 34px type, a billboard
     rather than a field. A phone's edge-to-edge width is right because there
     is nothing else on the row; a tablet has room to spare, so hold the
     console at a hand's width and let the hero copy run wider beneath it. */
  #ff-quote-widget {
    max-width: 560px;
  }
}

/* ------------------------------------------------------------------ desktop -- */

@media (min-width: 64em) {
  /* The hero's second column is `1fr` -- ~670px at 1440. A console that wide
     turns the plate into a billboard and the small print into a paragraph you
     have to track across. Cap it and let it sit at the top of its cell. */
  #ff-quote-widget {
    max-width: 480px;
    align-self: start;
  }

  .ffq-console {
    padding: 28px 26px 24px;
  }

  .ffq-title {
    font-size: 28px;
  }

  .ffq-plate {
    height: 74px;
  }

  .ffq-plate-band {
    flex-basis: 52px;
    font-size: 14px;
  }

  .ffq-plate-input {
    font-size: 42px;
  }

  .ffq-cta {
    font-size: 19px;
    padding: 17px 24px;
  }
}

/* ============================================================== hero fixes ==
 * Three scoped overrides to the captured homepage hero. Nothing is reworded,
 * removed or hidden except the widget this one replaces.
 * ========================================================================== */

/* 1. The captured budget stepper. Left in the DOM (React still owns and
 *    re-renders it); hidden, so it never double-renders next to this one. */
.Hero-module--hero--4a402 .HeroWidget-module--widget--d1048 {
  display: none !important;
}

@media (max-width: 63.99em) {
  /* 2. On one column the widget lands after the whole copy block -- 632px down
   *    a 390px screen, i.e. off the fold. `display: contents` promotes the H1
   *    and the copy to grid items so the widget can be ordered between them,
   *    with no DOM surgery for React to undo. Gated on :has() so the reorder
   *    only applies once the widget is actually mounted, and only to the hero
   *    that has one. */
  .Hero-module--container--64377:has(#ff-quote-widget) > div:not([id]):not([class]) {
    display: contents;
  }

  .Hero-module--container--64377:has(#ff-quote-widget) .Hero-module--title--dac39 {
    order: 1;
    /* 3. --font-size-hero is clamp(4rem, 7.5vw, 5.5rem): below 853px the 4rem
     *    floor wins, so the SMALLEST screens get the LARGEST relative type --
     *    "Out of this world car finance" breaks to five lines at 390px. Scale
     *    it with the viewport for real on mobile. */
    font-size: clamp(2.25rem, 10.5vw, 3.5rem);
    margin-bottom: 18px;
  }

  .Hero-module--container--64377:has(#ff-quote-widget) #ff-quote-widget {
    order: 2;
  }

  .Hero-module--container--64377:has(#ff-quote-widget) .Hero-module--content--a629e {
    order: 3;
  }

  .Hero-module--container--64377:has(#ff-quote-widget) .Hero-module--arrow-down--3c244 {
    order: 4;
  }
}