/* ---------------------------------------------------------------
   Design tokens
   Sampled directly from the Figma render (image-fidelity path —
   the Figma Dev Mode MCP connected in this session only exposes
   get_screenshot/get_metadata remotely; get_design_context and
   get_variable_defs require an active desktop-app selection that
   wasn't available, so exact tokens/coordinates could not be
   pulled). Colors below are picked pixel values, rounded to sane
   hex; spacing is measured proportionally from a 1440px reference
   render. See README.md "Approximations" for the full list.
------------------------------------------------------------------ */
:root {
  --black: #000000;
  --white: #ffffff;
  --page-bg: #f5f6fa;
  --text-heading: #000000;
  --text-body: #4d4d4d;
  --text-muted: #8b8d98;
  --border: #e5e7eb;
  /* Wrangler (Mojito) green, sampled from the campaign banner. --accent is
     for borders, dots, lines and focus rings; --accent-text is the darker
     shade for text on light backgrounds (5.1:1 on white). */
  --accent: #38d040;
  --accent-soft: rgba(56, 208, 64, 0.18);
  --accent-text: #1a7f24;
  --neutral-400: #9ea6b2;
  --success-bg: #eaf7f4;
  --success-icon: #32bea6;
  --error-bg: #fbe5e9;
  --error-icon: #d60027;
  --detail-bg: #fef8e7;
  --detail-bg-soft: #fffdf6;
  --radius-lg: 12px;
  --radius-md: 8px;
  --container-max: 1840px;
  --container-gutter: clamp(24px, 2.5vw, 48px);
  --font: "Helvetica Neue", Arial, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-card: "Roboto", var(--font);
  /* summary / success / failed cards (Figma) */
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Visible keyboard focus everywhere a mouse-hover state exists */
a:focus-visible,
.btn:focus-visible,
.checkbox input:focus-visible+.checkbox__box,
.dealer-card input:focus-visible~.dealer-card__radio {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* One consistent "something changed" cue, reused everywhere the flow
   advances (never on page load, never on hover) — OTP appearing, a step
   collapsing into its summary, the dealer list appearing, the booking
   summary and payment outcome replacing the wizard. */
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#personalCollapsed,
#otpField,
#dealerList,
#summarySection,
#successSection,
#failedSection {
  animation: reveal-in .4s cubic-bezier(.16, 1, .3, 1);
}

html {
  overflow-y: scroll;
}

/* stable scrollbar gutter so the centered
  container (and the navbar logo inside it) doesn't shift sideways
  between stages of differing height */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-heading);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* ---------------- Navbar ---------------- */
.navbar {
  background: var(--black);
  height: 84px;
  display: flex;
  align-items: center;
}

.navbar__inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.navbar__logo {
  color: var(--white);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.5px;
}

/* ---------------- Hero ---------------- */
.hero {
  line-height: 0;
  overflow: hidden;
}

.hero picture {
  display: block;
}

/* The campaign banner carries text + QR code, so it is always shown whole
   (native 1440x500 / 720x460 ratio) - no cropping or zoom. */
.hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 500;
}

/* ---------------- Wish cards ---------------- */
.wish {
  /* 40px above the cards and 40px to the booking card (28 + its 12) */
  padding: 40px 0 28px;
  background: var(--white);
}

.wish__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.wish-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wish-card__pic {
  display: block;
  line-height: 0;
}

.wish-card img {
  width: 100%;
  aspect-ratio: 395 / 260;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

.wish-card__body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  /* campaign cards: centered copy, uppercase titles */
}

.wish-card__body h3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wish-card__body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 0 16px;
}

.wish-card__body p:last-child {
  margin-bottom: 0;
}

.read-more {
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  transition: color .15s ease;
}

.read-more:hover {
  color: var(--accent-text);
}

.wish__dots {
  display: none;
}

/* ---------------- Booking wizard shell ---------------- */
.booking {
  background: var(--white);
  padding: 12px 0 72px;
}

/* Terms & Conditions under the booking card: a single muted line that
   expands in place (native <details>, no JS). */
.terms {
  margin-top: 20px;
  max-width: 760px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.terms__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.terms__toggle::-webkit-details-marker {
  display: none;
}

.terms__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.terms[open] .terms__toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

.terms__toggle:hover,
.terms__toggle:focus-visible {
  color: var(--text-body);
}

.terms__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-body);
}

.terms__list li + li {
  margin-top: 6px;
}

.booking__title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 24px;
}

.booking__title--center {
  text-align: center;
}

/* Outer parent card per the Figma reference: the title and BOTH steps
   sit inside one bordered/rounded frame. Each step keeps its own
   individual white bordered box, distinguished from the parent purely
   by the 1px border (both are white) rather than a background-color
   contrast. */
.booking-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.booking-card .booking__title {
  padding: 0;
}

/* Summary / payment result screens: the card sits on the page background
   under a centred heading (no white wizard box), as in the Figma frames. */
.booking-card--plain,
.booking-card:has(#summarySection:not([hidden])) {
  background: transparent;
  border: none;
  padding: 0;
}

.booking-card:has(#summarySection:not([hidden])) .booking__title {
  text-align: center;
}


.wizard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step {
  display: flex;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}

#stepPersonal {
  position: relative;
  z-index: 2;
}

#stepDealer {
  position: relative;
  z-index: 1;
}

.step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  padding-top: 4px;
}

.step__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 4.5px solid var(--neutral-400);
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.step__dot--active {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: none;
}

.step__line {
  position: absolute;
  left: 41px;
  top: 48px;
  bottom: -50px;
  width: 2px;
  background: linear-gradient(to bottom,
      var(--accent) 0,
      var(--accent) 90px,
      var(--border) 90px,
      var(--border) 100%);
  z-index: 2;
}

.step__line--complete {
  background: var(--accent) !important;
}

.step__bridge {
  display: none;
}

.step__panel {
  flex: 1;
  min-width: 0;
}

.step__panel h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
}

.step--disabled .step__panel h2,
.step--disabled .hint {
  color: var(--neutral-400);
}

/* Source design shows only the heading + hint for a step that hasn't
   been reached yet — no visible inputs until the previous step is
   done. */
.step--disabled .field-row,
.step--disabled .btn {
  display: none;
}

.hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.field-row {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}

.field-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.field-row--2 {
  grid-template-columns: repeat(2, minmax(0, 260px));
}

.field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 52px;
  background: var(--page-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 18px 14px 7px 14px;
  position: relative;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.field:has(select, input):not(:has(:disabled)):hover {
  border-color: var(--neutral-400);
}

.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--white);
}

.field:has(:disabled) {
  cursor: not-allowed;
}

.field__label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1;
  pointer-events: none;
  transition: top .18s cubic-bezier(0.4, 0, 0.2, 1),
    transform .18s cubic-bezier(0.4, 0, 0.2, 1),
    font-size .18s cubic-bezier(0.4, 0, 0.2, 1),
    font-weight .18s cubic-bezier(0.4, 0, 0.2, 1),
    color .18s ease;
  z-index: 1;
  white-space: nowrap;
}

/* Float above when focused, has value, is select, or filled */
.field:focus-within .field__label,
.field.has-value .field__label,
.field:has(input:not(:placeholder-shown)) .field__label,
.field--select:focus-within .field__label,
.field--select:has(.choices.is-open) .field__label,
.field--select.has-value .field__label,
.field--otp:focus-within .field__label,
.field--otp.has-value .field__label,
.field--otp:has(input:not(:placeholder-shown)) .field__label,
.field--otp:not([hidden]) .field__label {
  top: 7px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Hide Choices.js placeholder when select is resting in the middle */
.field--select:not(:focus-within):not(.has-value):not(:has(.choices.is-open)) .choices__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Browser autofill paints inputs light blue; keep the field's own look.
   The inset shadow covers the autofill fill and the long transition stops
   Chrome from animating its background back in. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--page-bg) inset;
  box-shadow: 0 0 0 1000px var(--page-bg) inset;
  -webkit-text-fill-color: var(--text-heading);
  caret-color: var(--text-heading);
  transition: background-color 600000s 0s;
}

/* The focused field box turns white (.field:focus-within). */
.field:focus-within input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  box-shadow: 0 0 0 1000px var(--white) inset;
}

.field:focus-within .field__label {
  color: var(--accent-text);
}

.field.has-danger .field__label {
  color: var(--error-icon);
}

.field input,
.field select {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heading);
  padding: 0;
  outline: none;
  width: 100%;
  appearance: none;
}

.field input::placeholder {
  color: transparent;
  opacity: 0;
}

#mobileField .mobile-input__prefix {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .18s ease;
}

#mobileField:not(:focus-within):not(.has-value):has(#mobile:placeholder-shown) .mobile-input__prefix {
  opacity: 0;
  display: none;
}

.field__note {
  /* Floats below the box instead of stacking inside it, same reasoning
     as .field-error below. */
  position: absolute;
  left: 14px;
  right: 14px;
  top: 100%;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* An active validation error is more urgent than the static helper
   note — show one or the other under the field, not both stacked. */
.field.has-danger .field__note {
  display: none;
}

/* ---- Real field validation (Pristine.js) ---------------------------- */
.field.has-danger {
  border-color: var(--error-icon);
}

.field.has-danger:focus-within {
  border-color: var(--error-icon);
  box-shadow: 0 0 0 3px rgba(214, 0, 39, .16);
}

.field-error {
  /* Floats below the field's own box instead of stacking inside it —
     stacking inside stretched the grey box and looked cramped. .field
     already has position:relative so this anchors to it. */
  position: absolute;
  left: 14px;
  right: 14px;
  top: 100%;
  margin-top: 4px;
  color: var(--error-icon);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.field-error--standalone {
  position: static;
  margin: -12px 0 20px;
}

/* ---- Salutation / State / City: Choices.js-powered selects ----------
   .field--select keeps .field's own box completely (bg, border, radius,
   min-height:50px, flex-column + justify-content:center) — the caption
   label and the Choices widget sit inside it exactly like a text
   field's label+input pair, so a select and a text field land at the
   identical height instead of the select's visible box being shorter.
   .choices / .choices__inner are stripped of all their own chrome so
   there's still only one visible box, and the existing general
   .field:hover / .field:focus-within rules (further up this file)
   apply here too — Choices focuses its own container element, which
   satisfies :focus-within same as focusing a real <input> would. */
.field--select .choices {
  margin-bottom: 0;
  font-size: 15px;
}

.field--select .choices__inner {
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
  padding: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heading);
}

.field--select .choices[data-type*="select-one"] {
  cursor: pointer;
}

.field--select .choices[data-type*="select-one"]::after {
  border-color: var(--text-heading) transparent transparent;
}

.field--select .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--text-heading);
}

.field--select .choices.is-disabled .choices__inner {
  color: var(--neutral-400);
}

.field--select .choices.is-disabled::after {
  opacity: .35;
}

.field--select .choices__list--single {
  padding: 0;
}

/* The dropdown panel is a child of .choices, and .choices now sits
   inside .field's own padding (same as an <input> would) rather than
   spanning the full box — so the panel needs to (a) escape that
   padding sideways to line up with the field's outer edges, and
   (b) start clear of the field's own bottom padding instead of
   overlapping it. */
.field--select .choices__list--dropdown,
.field--select .choices__list[aria-expanded] {
  left: -14px;
  width: calc(100% + 28px);
  top: calc(100% + 8px);
  margin-top: 0;
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  overflow: hidden;
}

.field--select .choices__list--dropdown .choices__input {
  margin: 8px;
  width: calc(100% - 16px);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-bg);
  font-size: 14px;
}

.field--select .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--page-bg);
}

.field--select .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
  opacity: 0;
}

/* Open state: square off the field's own bottom corners and drop its
   ring so the field box and the dropdown panel below read as one
   continuous gold-bordered shape instead of two stacked boxes. */
.field:has(.choices.is-open) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}

/* Lift the open select above the fields after it, otherwise their labels
   (z-index 1, later in the DOM) show through the dropdown panel. */
.field--select:has(.choices.is-open) {
  position: relative;
  z-index: 20;
}

.field:has(.choices.is-open) .choices__list--dropdown,
.field:has(.choices.is-open) .choices__list[aria-expanded] {
  border-color: var(--accent);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.mobile-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-input__prefix {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-input input {
  letter-spacing: 0.5px;
}

#mobileField:has(#mobile:disabled) {
  cursor: not-allowed;
  opacity: 0.85;
}

#mobile:disabled {
  cursor: not-allowed;
  color: var(--text-heading);
}

.field--otp.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field--otp.is-disabled input {
  cursor: not-allowed;
}

.field--otp.is-error {
  border-color: var(--error-icon) !important;
  animation: shake .4s ease;
}

.field--otp.is-success {
  border-color: #0f7a5c !important;
}

.otp-input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.otp-field-input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--text-heading);
  padding: 0;
  outline: none;
  width: 100%;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  -webkit-text-security: disc;
}

.otp-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.otp-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.otp-timer__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(-45deg);
}

.otp-timer__text {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0;
  white-space: nowrap;
}

.otp-resend-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s ease, filter .15s ease;
}

.otp-resend-link:hover {
  filter: brightness(1.15);
  text-decoration: underline;
}

.otp-resend-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.otp-status-badge {
  font-size: 13px;
  font-weight: 700;
  color: #0f7a5c;
  white-space: nowrap;
}

@keyframes shake {

  10%,
  90% {
    transform: translateX(-1px);
  }

  20%,
  80% {
    transform: translateX(2px);
  }

  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }

  40%,
  60% {
    transform: translateX(4px);
  }
}

.otp-error {
  color: var(--error-icon);
  font-size: 12px;
  margin: 6px 0 0;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-heading);
  margin-bottom: 20px;
  cursor: pointer;
  width: fit-content;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
}

.checkbox__box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--black);
  position: relative;
  flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease;
}

.checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(1);
  opacity: 1;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), opacity .1s ease;
}

.checkbox input:not(:checked)+.checkbox__box {
  background: var(--white);
  border: 1px solid var(--border);
}

.checkbox input:not(:checked)+.checkbox__box::after {
  transform: rotate(45deg) scale(0);
  opacity: 0;
}

.btn {
  border: none;
  border-radius: var(--radius-md);
  min-height: 50px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn--primary {
  background: var(--black);
  color: var(--white);
}

/* Figma sizes these two step CTAs to roughly one field-column's width,
   not to their own text content — intrinsic sizing left them looking
   noticeably narrower than the design. */
#continueBtn,
#confirmDealerBtn {
  width: 100%;
  max-width: 320px;
}

.btn--primary:disabled {
  background: var(--neutral-400);
  cursor: not-allowed;
}

.btn--primary:not(:disabled):hover {
  filter: brightness(1.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
  transform: translateY(-1px);
}

.btn--primary:not(:disabled):active {
  transform: translateY(0) scale(.98);
  filter: brightness(.92);
  box-shadow: none;
}

.step__collapsed-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.step__collapsed .label {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.collapsed-name {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 4px;
}

.collapsed-contact {
  font-size: 13px;
  color: var(--text-body);
  margin: 0;
}

.link-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  color: var(--text-heading);
  flex-shrink: 0;
  transition: color .15s ease;
}

.link-btn:hover {
  color: var(--accent-text);
}

/* ---------------- Dealer list ---------------- */
.dealer-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.dealer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--page-bg);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.dealer-search svg {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

.dealer-search input {
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14px;
  width: 100%;
}

.dealer-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.dealer-card:last-child {
  margin-bottom: 0;
}

.dealer-card:hover:not(:has(input:checked)) {
  border-color: var(--neutral-400);
}

.dealer-card:has(input:checked) {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
  background: var(--page-bg);
}

.dealer-card label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.dealer-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
}

.dealer-card__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-heading);
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}

.dealer-card input:checked~.dealer-card__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--text-heading);
  border-radius: 50%;
  animation: pop-in .2s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop-in {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.dealer-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dealer-card__name {
  font-weight: 800;
  font-size: 15px;
}

.dealer-card__addr {
  font-size: 13px;
  color: var(--text-body);
}

.dealer-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.dealer-card__phone svg {
  width: 13px;
  height: 13px;
  fill: var(--text-body);
}

/* ---------------- Summary / payment result ---------------- */
.summary {
  max-width: 540px;
  margin: 24px auto 0;
  text-align: center;
}

.summary__card {
  background: var(--detail-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  margin-top: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Desktop-specific sizes are in @media (min-width: 901px) below */
.summary__vehicle-pic,
.summary__vehicle img {
  object-fit: cover;
  object-position: center;
  display: block;
}

.summary__vehicle>div {
  /* "Booking amount ₹50,000" on one line; each part keeps its own size */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.summary__vehicle-name {
  font-weight: 800;
  font-size: 15px;
  margin: 0;
}

.summary__amount {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.summary__amount span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

.summary__details {
  padding: 20px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
}

.summary__details div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
}

.summary__details dt {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-heading);
}

.summary__details dd {
  margin: 0;
  font-size: 14px;
  color: var(--text-body);
}

.summary__details dd strong {
  display: block;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.summary__details dd::before {
  content: ": ";
}

.summary__card .btn {
  margin: 0 24px 24px;
  width: calc(100% - 48px);
  max-width: 100%;
  min-height: 48px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}

.summary__secure {
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 700;
  margin-top: 16px;
}

/* ===== Summary / Payment success / Payment failed cards - DESKTOP =====
   Built to the "Wrangler Prebook - Store Selected" frames (1440px artboard,
   measured 1:1). Mobile keeps its own rules in @media (max-width: 900px).
   - full-width white frame (matches the wizard card), heading left-aligned,
   - cream card: 287px vehicle card on the left, details 41px to its right,
   - detail rows on a 30px rhythm, colon column at 148px,
   - button and "Complete payment" chip stacked under the details,
   - success/failed: tinted status band across the top of the cream card. */
@media (min-width: 901px) {

  /* White frame around the heading + card: full container width, same
     frame as the wizard card so form -> summary keeps the page width */
  .booking-card--plain,
  .booking-card:has(#summarySection:not([hidden])) {
    max-width: none;
    margin: 0;
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-card);
  }

  .booking-card:has(#summarySection:not([hidden])) .booking__title {
    margin: 0 0 24px;
    font-family: var(--font-card);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    color: #000;
    text-align: left;
  }

  /* Result pages open straight on the status band */
  .booking-card--plain>.booking__title {
    display: none;
  }

  .summary,
  .summary.summary--result {
    max-width: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-card);
    text-align: left;
  }

  /* Cream card: vehicle card floats left, everything else sits beside it */
  .summary .summary__card {
    /* vehicle card width: 287px (design) growing to 380px on wide screens */
    --vehicle-w: clamp(287px, 19.9vw, 380px);
    display: flow-root;
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 21px;
    background: linear-gradient(180deg, #fef3d6 0%, #fef8e8 45%, #fffefb 100%);
    border: 1px solid #f7efd8;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
  }

  /* Result cards: hold the cream's top tone under the status band so the
     band's rounded cap blends into it */
  .summary--result .summary__card {
    background: linear-gradient(180deg, #fef3d6 0%, #fef3d6 30%, #fef8e8 62%, #fffefb 100%);
  }

  .summary .summary__card> :not(.summary__status):not(.summary__vehicle) {
    margin-left: calc(var(--vehicle-w) + 41px);
  }

  /* Status header (success / failed): tint band, cream card's rounded
     top edge drawn over its bottom */
  .summary__status {
    position: relative;
    margin: -20px -20px 20px -21px;
    padding: 34px 20px 42px 0;
  }

  .summary__status::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16px;
    background: #fef3d6;
    border-top: 1px solid #f7efd8;
    border-radius: 16px 16px 0 0;
  }

  .summary__status-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-left: 44px;
  }

  .summary--success .summary__status {
    background: #eaf6f4;
  }

  .summary--failed .summary__status {
    background: #fbe5e9;
  }

  .summary__status-text h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    color: #000;
  }

  .summary__status-text p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #676c6b;
  }

  .summary--failed .summary__status-text p strong {
    color: #000;
    font-weight: 700;
  }

  /* Vehicle card: image on top, name + amount below */
  .summary .summary__vehicle {
    float: left;
    display: flex;
    flex-direction: column;
    width: var(--vehicle-w);
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
  }

  .summary .summary__vehicle-pic,
  .summary picture.summary__vehicle-pic {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 287 / 201;
    border-radius: 0;
    overflow: hidden;
  }

  .summary .summary__vehicle img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }

  .summary .summary__vehicle>div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 16px 19px 14px;
    background: none;
  }

  .summary .summary__vehicle-name {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #000;
  }

  .summary .summary__amount {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
    color: #000;
  }

  .summary .summary__amount span {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #4d4d4d;
  }

  /* Detail rows */
  .summary .summary__details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    padding: 2px 0 0;
    background: transparent;
  }

  .summary .summary__details div {
    display: grid;
    grid-template-columns: 148px 1fr;
    align-items: baseline;
    gap: 0;
  }

  .summary .summary__details dt {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #000;
  }

  .summary .summary__details dd {
    position: relative;
    margin: 0;
    padding-left: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
    text-align: left;
  }

  /* Dealer address lines run on a 23px leading */
  .summary .summary__details div:last-child dd {
    line-height: 23px;
  }

  .summary .summary__details dd::before {
    content: ":";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }

  .summary .summary__details dd strong {
    display: block;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #000;
  }

  .summary .summary__alert,
  .summary .summary__notice {
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 0;
    text-align: left;
  }

  /* Button */
  .summary .summary__card form {
    margin-top: 0;
    margin-bottom: 0;
  }

  .summary .summary__card .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    max-width: 100%;
    min-height: 48px;
    margin: 20px 0 0;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }

  .summary .summary__card>a.btn {
    margin-left: calc(var(--vehicle-w) + 41px);
    width: 300px;
  }

  /* "Complete payment" chip under the button */
  .summary .summary__card .summary__secure {
    display: table;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 16px;
    color: #303030;
    background: #eef0f5;
    border-radius: 3px;
  }

  .summary .summary__card .summary__secure .secure-star {
    color: #f2b705;
    margin: 0 4px;
  }
}

/* ---------------- Footer ---------------- */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 56px 0 32px;
  margin-top: 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.footer__grid h4 {
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer__grid li {
  margin-bottom: 12px;
}

.footer__grid a {
  font-size: 14px;
  color: var(--white);
  opacity: 0.9;
  transition: color .15s ease, opacity .15s ease;
}

.footer__grid a:hover {
  color: var(--accent);
  opacity: 1;
}

.footer__follow {
  margin-top: 24px;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  width: 28px;
  height: 28px;
  background: var(--white);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, transform .15s ease;
}

.footer__social a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.footer__social svg {
  width: 15px;
  height: 15px;
  fill: var(--black);
}

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
}

.footer__stellantis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stellantis-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-size: 12px;
}

.stellantis-badge img {
  height: 20px;
  width: auto;
  display: block;
}

.footer__jeep-mark {
  font-size: 12px;
  opacity: 0.7;
}

.footer__legal p {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 10px;
}

/* ---------------- Responsive (Mobile Viewport <= 900px) ---------------- */
@media (max-width: 900px) {
  :root {
    --container-gutter: 16px;
  }

  body {
    background: var(--white);
  }

  /* Header */
  .navbar {
    height: 54px;
    padding: 0;
  }

  .navbar__inner {
    padding: 0 16px;
    height: 100%;
  }

  .navbar__logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }

  /* Hero */
  .hero img {
    aspect-ratio: 720 / 460;
  }

  /* Wish section - full-width banner carousel */
  .wish {
    /* 20px above the card and 20px from the dots to the booking card (8 + its 12) */
    padding: 20px 0 8px;
    background: var(--white);
  }

  .wish .container {
    padding: 0 16px;
    max-width: 100%;
  }

  .wish__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 0 4px;
    margin: 0;
    scrollbar-width: none;
  }

  .wish__grid::-webkit-scrollbar {
    display: none;
  }

  .wish-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    background: var(--white);
    overflow: hidden;
    box-sizing: border-box;
  }

  .wish-card img {
    width: 100%;
    aspect-ratio: 560 / 368;
    height: auto;
    min-height: unset;
    object-fit: cover;
    object-position: center;
    border-radius: 13px 13px 0 0;
    display: block;
  }

  .wish-card__body {
    padding: 16px 18px 18px;
  }

  .wish-card__body h3 {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .wish-card__body p {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-body);
    margin: 0 0 8px;
  }

  .read-more {
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
  }

  .wish__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }

  .wish__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .25s ease;
  }

  .wish__dot--active {
    width: 22px;
    border-radius: 4px;
    background: var(--accent);
  }

  /* Booking Card Shell */
  .booking {
    padding: 12px 0 36px;
    background: var(--white);
  }

  .booking .container {
    padding: 0 16px;
    max-width: 100%;
  }

  .booking-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 16px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }

  .booking-card--plain,
  .booking-card:has(#summarySection:not([hidden])) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .booking__title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
    color: var(--text-heading);
  }

  .booking__title--center {
    text-align: left;
  }

  /* Wizard Steps & Left Rail */
  .wizard {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }

  .step {
    display: flex;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  #stepPersonal {
    position: relative;
    z-index: 2;
  }

  #stepDealer {
    position: relative;
    z-index: 1;
    margin-top: 18px;
  }

  .step__rail {
    width: 18px;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
  }

  .step__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid #b5b5b5;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step__dot--active {
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 1px var(--accent);
  }

  #dotDealer:not(.step__dot--active)::after {
    content: "2";
    font-size: 9px;
    font-weight: 700;
    color: #9ea6b2;
    line-height: 1;
  }

  .step__line {
    display: block;
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: -24px;
    width: 2px;
    background: linear-gradient(to bottom,
        var(--accent) 0,
        var(--accent) 330px,
        var(--border) 330px,
        var(--border) 100%);
    z-index: 2;
  }

  .step__line--complete {
    background: var(--accent) !important;
  }

  #stepDealer[data-active="true"] .step__rail::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 50px;
    width: 2px;
    background: #e5e7eb;
    z-index: 1;
  }

  .step__panel {
    flex: 1;
    min-width: 0;
  }

  .step__panel h2 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 2px;
    color: var(--text-heading);
  }

  .step--disabled .step__panel h2 {
    color: var(--text-heading);
  }

  .hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0 0 14px;
  }

  /* Form Fields */
  .field-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
  }

  .field-row--3,
  .field-row--2 {
    grid-template-columns: none;
  }

  .field {
    width: 100%;
    min-height: 48px;
    padding: 16px 12px 6px 12px;
    background: #f4f5f8;
    border-radius: 8px;
    border: 1px solid transparent;
    box-sizing: border-box;
    position: relative;
    transition: margin-bottom 0.15s ease, border-color 0.15s ease;
  }

  .field.has-danger {
    border-color: var(--error-icon);
    margin-bottom: 22px;
  }

  .field.has-danger:focus-within {
    border-color: var(--error-icon);
    box-shadow: 0 0 0 2px rgba(214, 0, 39, 0.15);
  }

  .field-error {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 100%;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--error-icon);
    line-height: 1.25;
    white-space: normal;
  }

  .field__label {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    font-weight: 500;
    color: #71717a;
    display: block;
  }

  .field:focus-within .field__label,
  .field.has-value .field__label,
  .field:has(input:not(:placeholder-shown)) .field__label,
  .field--select:focus-within .field__label,
  .field--select:has(.choices.is-open) .field__label,
  .field--select.has-value .field__label,
  .field--otp:focus-within .field__label,
  .field--otp.has-value .field__label,
  .field--otp:has(input:not(:placeholder-shown)) .field__label,
  .field--otp:not([hidden]) .field__label {
    top: 5px;
    transform: translateY(0);
    font-size: 10px;
    font-weight: 600;
  }

  .field input,
  .field select,
  .field--select .choices__inner {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
  }

  .field input::placeholder {
    color: transparent;
    opacity: 0;
  }

  .mobile-input {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .mobile-input__prefix {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
  }

  .mobile-input input {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0;
  }

  .field--select .choices {
    font-size: 14px;
  }

  .field--select .choices__list--dropdown,
  .field--select .choices__list[aria-expanded] {
    left: -12px;
    width: calc(100% + 24px);
  }

  #mobileField,
  .field:has(.field__note) {
    margin-bottom: 22px;
  }

  .field__note {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 100%;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.3;
    display: block;
  }

  .field.has-danger .field__note {
    display: none;
  }

  .checkbox {
    font-size: 12.5px;
    font-weight: 600;
    margin: 8px 0 16px;
    gap: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #000000;
  }

  .checkbox__box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #000000;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .checkbox input:checked+.checkbox__box::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
  }

  #continueBtn,
  #confirmDealerBtn {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    background: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
  }

  .otp-boxes {
    gap: 8px;
  }

  .otp-boxes .otp-box {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 8px;
  }

  /* Step 1 Collapsed State */
  .step__collapsed {
    padding-bottom: 14px;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 14px;
  }

  .step__collapsed-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .step__collapsed .label {
    font-size: 11px;
    color: #888888;
    margin: 0 0 3px;
    font-weight: 500;
  }

  .collapsed-name {
    font-size: 15px;
    font-weight: 800;
    color: #000000;
    margin: 0 0 3px;
  }

  .collapsed-contact {
    font-size: 12px;
    color: #555555;
  }

  .link-btn {
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    color: #000000;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Step 2 Dealer Selection */
  .dealer-list {
    border: none;
    padding: 0;
    margin-bottom: 16px;
    background: transparent;
  }

  .dealer-search {
    background: #f4f5f8;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dealer-search svg {
    width: 15px;
    height: 15px;
    fill: #71717a;
    flex-shrink: 0;
  }

  .dealer-search input {
    font-size: 13px;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    color: var(--text-heading);
  }

  .dealer-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: border-color .15s ease;
  }

  .dealer-card:has(input:checked) {
    border: 1.5px solid #000000;
    box-shadow: none;
    background: #ffffff;
  }

  .dealer-card label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
  }

  .dealer-card__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #b0b5be;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dealer-card input:checked~.dealer-card__radio {
    border-color: #000000;
  }

  .dealer-card input:checked~.dealer-card__radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #000000;
    border-radius: 50%;
    position: static;
    display: block;
  }

  .dealer-card__name {
    font-size: 14px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 3px;
  }

  .dealer-card__addr {
    font-size: 11.5px;
    line-height: 1.45;
    color: #555555;
    margin-bottom: 6px;
  }

  .dealer-card__phone {
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .dealer-card__phone svg {
    width: 12px;
    height: 12px;
    fill: #000000;
  }

  /* Summary screen on mobile */
  .summary {
    max-width: 100%;
  }

  .summary .summary__card {
    border-radius: 20px;
    overflow: hidden;
    background: #fffcee;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin: 0 auto;
  }

  .summary__vehicle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 14px 14px 0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0;
  }

  .summary__vehicle-pic,
  .summary__vehicle img {
    width: 100%;
    height: auto;
    aspect-ratio: 576 / 404;
    object-fit: cover;
    object-position: center;
    border-radius: 14px 14px 0 0;
    display: block;
  }

  .summary__vehicle>div {
    padding: 12px 16px 14px;
    background: #ffffff;
    border-radius: 0 0 14px 14px;
  }

  .summary__vehicle-name {
    font-size: 14.5px;
    font-weight: 800;
    margin: 0;
    color: #111111;
  }

  .summary__amount {
    font-size: 19px;
    font-weight: 800;
    color: #111111;
    margin: 0;
  }

  .summary__amount span {
    font-size: 11.5px;
    font-weight: 400;
    color: #71717a;
    margin-left: 4px;
  }

  .summary__details {
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: transparent;
    margin: 0;
  }

  .summary__details div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .summary__details dt {
    font-size: 12px;
    font-weight: 700;
    color: #111111;
    text-align: left;
    flex-shrink: 0;
  }

  .summary__details dd {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-align: right;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
  }

  .summary__details dd strong {
    display: block;
    font-weight: 700;
    color: #111111;
    margin-bottom: 2px;
  }

  .summary__details dd::before {
    content: none;
  }

  .summary__card .btn {
    margin: 12px 16px 16px;
    width: calc(100% - 32px);
    max-width: 100%;
    min-height: 48px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    background: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
  }

  .summary__secure {
    font-size: 11px;
    color: #4b5563;
    font-weight: 600;
    text-align: center;
    margin: 14px 0 20px;
    padding: 0 4px;
  }

  .summary__secure .secure-star {
    color: var(--accent);
    font-size: 12px;
    margin: 0 2px;
  }

  /* Payment success / failed: status header inside the summary card */
  .summary__status {
    padding: 18px 16px 16px;
    border-radius: 20px 20px 0 0;
  }

  .summary__status-inner {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .summary--success .summary__status {
    background: #eaf7f4;
  }

  .summary--failed .summary__status {
    background: #fbe5e9;
  }

  .summary__status-text h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #000;
  }

  .summary__status-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #676c6b;
  }

  .summary--failed .summary__status-text p strong {
    color: #000;
  }


  /* Footer on mobile */
  .footer {
    padding: 36px 0 24px;
  }

  .footer .container {
    padding: 0 16px;
  }

  .footer__grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 32px;
  }

  .footer__grid h4 {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: #ffffff;
  }

  .footer__grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__grid li {
    margin-bottom: 8px;
  }

  .footer__grid a {
    font-size: 13px;
    color: #d1d5db;
    opacity: 0.95;
  }

  .footer__partner-follow,
  .footer__grid>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .footer__subcol h4 {
    margin-top: 0;
  }

  .footer__grid>div:last-child .footer__follow,
  .footer__follow {
    margin-top: 0;
  }

  .footer__social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }

  .footer__social a {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #ffffff;
  }

  .footer__social svg {
    width: 14px;
    height: 14px;
    fill: #000000;
  }

  .footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
  }

  .footer__stellantis {
    margin-bottom: 12px;
  }

  .stellantis-badge img {
    height: 16px;
  }

  .footer__legal p {
    font-size: 9.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 8px;
  }
}

/* ---------------------------------------------------------------
   Laravel integration additions
   States the static design didn't need but the live app does:
   privacy-policy link, async/loading state, empty dealer result,
   back-from-summary link and server-side (non-field) errors.
------------------------------------------------------------------ */
.checkbox a {
  text-decoration: underline;
  transition: color .15s ease;
}

.checkbox a:hover {
  color: var(--accent-text);
}

.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.form-alert {
  color: var(--error-icon);
  background: var(--error-bg);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 14px;
  margin: 0 0 20px;
}

/* Keep the chosen dealer when "Edit Details" re-opens step 1, just hide it */
.step--disabled .dealer-list,
.step--disabled .form-alert {
  display: none;
}

.dealer-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.dealer-card__addr:empty {
  display: none;
}

.summary__alert {
  margin: 16px 24px 24px;
  text-align: center;
}

/* ---- OTP: send button inside the mobile field + auto-verify states ---- */
.mobile-input input {
  flex: 1;
  min-width: 0;
}

.otp-send-btn {
  flex-shrink: 0;
  margin-left: auto;
  border: none;
  border-radius: 6px;
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.otp-send-btn:not(:disabled):hover {
  filter: brightness(1.25);
}

.otp-send-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.otp-send-btn:disabled {
  cursor: default;
}

.otp-send-btn[data-mode="send"]:disabled {
  opacity: .35;
}

.otp-send-btn[data-mode="countdown"] {
  background: transparent;
  color: var(--accent-text);
  padding-inline: 4px;
  font-variant-numeric: tabular-nums;
}

.otp-send-btn[data-mode="resend"] {
  background: transparent;
  color: var(--black);
  text-decoration: underline;
  padding-inline: 4px;
}

.otp-send-btn[data-mode="verified"] {
  background: var(--success-bg);
  color: #0f7a5c;
}

.otp-send-btn[data-mode="verified"]::before {
  content: "\2713  ";
}

.otp-send-btn.is-loading {
  min-width: 76px;
  color: transparent;
  position: relative;
}

.otp-send-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}

/* A disabled button must not make the whole mobile field look disabled. */
.field:has(.otp-send-btn:disabled):not(:has(input:disabled)) {
  cursor: auto;
}

.field:not(.field--otp):has(.otp-send-btn:disabled):not(:has(input:disabled)):hover {
  border-color: var(--neutral-400);
}

.field--otp.is-verifying .otp-box {
  opacity: .55;
}

.field--otp.is-success .otp-box {
  border-color: var(--success-icon);
  background: var(--success-bg);
  color: #0f7a5c;
  animation: otp-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}

.field--otp.is-success .otp-box:nth-child(2) {
  animation-delay: .05s;
}

.field--otp.is-success .otp-box:nth-child(3) {
  animation-delay: .1s;
}

.field--otp.is-success .otp-box:nth-child(4) {
  animation-delay: .15s;
}

@keyframes otp-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

.otp-success {
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.otp-success--ok {
  color: #0f7a5c;
  font-weight: 700;
}

.otp-success--ok::before {
  content: "\2713  ";
}

/* Cap reached: a calm, informative notice (not an error) */
.booking-notice {
  background: var(--detail-bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 24px;
}

.booking-notice__title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 6px;
}

.booking-notice__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

.summary__notice {
  margin: 16px 24px 24px;
}

@media (max-width: 900px) {

  .summary__alert,
  .summary__notice {
    margin: 12px 16px 16px;
  }

  .booking-notice {
    padding: 14px 16px;
    margin-bottom: 16px;
  }

  .otp-send-btn {
    font-size: 11.5px;
    padding: 7px 10px;
  }

  .booking-notice__title {
    font-size: 15px;
  }

  .booking-notice__text {
    font-size: 12.5px;
  }
}

/* Result pages: the retry form / restart link sit where the design's
   single button does */
.summary--result form {
  margin: 0;
}

.summary__card a.btn {
  margin: 0 24px 24px;
  width: calc(100% - 48px);
}

.btn--primary:link,
.btn--primary:visited {
  color: var(--white);
}

@media (max-width: 900px) {
  .form-alert {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .summary__card a.btn {
    margin: 12px 16px 16px;
    width: calc(100% - 32px);
  }
}