/* Roland Recovery — refined public quote form */

.quote-hero {
  padding: 46px 0 38px;
}

.quote-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 790px);
}

.quote-hero .breadcrumbs {
  margin-bottom: 14px;
}

.quote-hero h1 {
  max-width: 760px;
  margin: 0 0 13px;
  font-size: clamp(46px, 5.2vw, 70px);
  line-height: .98;
  letter-spacing: -.062em;
}

.quote-hero p {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.65;
}

.quote-page--refined {
  padding: 26px 0 82px;
}

.quote-shell--refined {
  grid-template-columns: minmax(0, 790px) 310px;
  gap: 20px;
  justify-content: center;
  align-items: start;
}

.quote-panel--refined {
  padding: 28px 30px 30px;
  border-radius: 26px;
  box-shadow: 0 22px 65px rgba(14, 20, 27, .11);
}

.quote-panel--refined .quote-progress {
  margin-bottom: 28px;
  padding: 4px 4px 24px;
}

.quote-panel--refined .quote-progress::before {
  left: 15%;
  right: 15%;
}

.quote-panel--refined .quote-progress span {
  color: #89949e;
  font-size: 10px;
  letter-spacing: .08em;
}

.quote-panel--refined .quote-progress span::before {
  width: 26px;
  height: 26px;
  margin-bottom: 9px;
  border-width: 6px;
}

.quote-panel--refined .quote-progress span.is-active {
  color: #db504a;
}

.quote-step .kicker {
  margin-bottom: 13px;
}

.quote-step h2 {
  margin: 0 0 9px;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.quote-step > .intro {
  max-width: 660px;
  margin-bottom: 24px;
  color: #697681;
  font-size: 16px;
  line-height: 1.65;
}

/* Collection type cards */
.type-choices {
  gap: 12px;
  margin-bottom: 24px;
}

.type-choice span {
  min-height: 116px;
  padding: 16px;
  border-radius: 17px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  align-content: center;
}

.type-choice span::before {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  margin: 0;
  align-self: center;
  border-radius: 13px;
  font-size: 16px !important;
}

.type-choice strong {
  align-self: end;
  color: #202b35;
  font-size: 16px;
  line-height: 1.25;
}

.type-choice small {
  align-self: start;
  margin-top: 3px;
  color: #77838e;
  font-size: 12px;
  line-height: 1.45;
}

.type-choice input:checked + span {
  transform: none;
  border-color: rgba(219, 80, 74, .75);
  box-shadow:
    0 0 0 4px rgba(219, 80, 74, .08),
    0 14px 30px rgba(219, 80, 74, .10);
}

/* Fields */
.form-grid {
  gap: 14px;
}

.field {
  margin-bottom: 17px;
}

.field label {
  margin-bottom: 8px;
  color: #35414c;
  font-size: 13px;
  line-height: 1.35;
}

.field input,
.field select,
.field textarea {
  min-height: 56px;
  padding: 13px 15px;
  border-radius: 13px;
  color: #1f2933;
  background: #fff;
  font-size: 15px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a5adb5;
}

.field-help {
  margin-top: 7px;
  color: #8a949d;
  font-size: 11px;
  line-height: 1.5;
}

.quote-step-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.quote-step-actions #continue-contact {
  min-width: 210px;
  gap: 10px;
}

.quote-actions {
  justify-content: flex-end;
}

.quote-actions .button--primary {
  min-width: 220px;
}

/* Sidebar */
.quote-sidebar--refined {
  top: 94px;
  gap: 14px;
}

.quote-sidebar--refined .sidebar-card {
  padding: 23px;
  border-radius: 21px;
}

.quote-checklist-card h3,
.quote-help-card h3 {
  margin: 13px 0 9px;
  font-size: 24px !important;
  line-height: 1.13 !important;
  letter-spacing: -.035em;
}

.quote-checklist-card > p,
.quote-help-card > p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.quote-checklist {
  display: grid;
  gap: 8px;
  margin-top: 19px;
}

.quote-checklist > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
}

.quote-checklist i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #db504a;
  font-size: 15px;
}

.quote-checklist strong,
.quote-checklist small {
  display: block;
}

.quote-checklist strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

.quote-checklist small {
  margin-top: 2px;
  color: #aeb8c1;
  font-size: 11px;
  line-height: 1.4;
}

.quote-help-card .kicker,
.quote-checklist-card .kicker {
  font-size: 9px !important;
  letter-spacing: .1em !important;
}

/* Vehicle dropdown */
.vehicle-field {
  position: relative;
  z-index: 50;
}

.suggestion-list {
  z-index: 2000 !important;
  top: calc(100% - 2px) !important;
  max-height: 290px;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 22px 48px rgba(14, 20, 27, .20);
}

.suggestion-list button {
  min-height: 58px;
  padding: 12px 14px;
}

.suggestion-list strong {
  font-size: 14px;
}

.suggestion-list small {
  font-size: 11px;
}

/* Result */
.result {
  padding: 38px;
  border-radius: 22px;
}

.result-label {
  font-size: 12px !important;
}

.result-price {
  margin: 14px 0 10px;
  font-size: clamp(58px, 8vw, 86px);
}

.result-copy {
  margin-inline: auto;
  font-size: 16px !important;
  line-height: 1.65;
  text-align: center;
}

.result-details {
  margin-top: 26px;
}

.result-details div {
  min-height: 82px;
  padding: 15px;
}

.result-details strong {
  font-size: 14px !important;
}

@media (max-width: 1080px) {
  .quote-shell--refined {
    grid-template-columns: minmax(0, 790px);
  }

  .quote-sidebar--refined {
    position: static;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .quote-hero {
    padding: 38px 0 30px;
  }

  .quote-hero h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .quote-hero p {
    font-size: 15px;
  }

  .quote-page--refined {
    padding-top: 18px;
  }

  .quote-panel--refined {
    padding: 20px 16px 22px;
    border-radius: 21px;
  }

  .quote-step h2 {
    font-size: 32px;
  }

  .quote-step > .intro {
    font-size: 14px;
  }

  .type-choices {
    grid-template-columns: 1fr;
  }

  .type-choice span {
    min-height: 86px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .quote-step-actions #continue-contact,
  .quote-actions .button,
  .quote-actions .button--primary {
    width: 100%;
    min-width: 0;
  }

  .quote-actions {
    flex-direction: column;
  }

  .quote-sidebar--refined {
    grid-template-columns: 1fr;
  }

  .result {
    padding: 26px 18px;
  }

  .result-price {
    font-size: clamp(48px, 15vw, 68px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .type-choice input:checked + span,
  .quote-sidebar--refined .sidebar-card {
    transition: none;
  }
}


/* =========================================================
   Vehicle suggestion dropdown clipping fix
   ========================================================= */

/* The original shared stylesheet sets overflow:hidden on the
   quote card. The suggestions are absolutely positioned, so
   they must be allowed to extend outside the card. */
.quote-page--refined,
.quote-shell--refined,
.quote-panel--refined,
.quote-panel--refined form,
.quote-panel--refined .quote-step,
.quote-panel--refined .form-grid,
.quote-panel--refined .field--full,
.quote-panel--refined .vehicle-field {
  overflow: visible !important;
}

.quote-shell--refined {
  position: relative;
  z-index: 1;
}

.quote-panel--refined {
  position: relative;
  z-index: 10;
}

/* Keep the vehicle field and its dropdown above the remaining
   form fields, button and neighbouring sidebar. */
.quote-panel--refined .vehicle-field {
  position: relative;
  z-index: 5000 !important;
}

.quote-panel--refined .suggestion-list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 6000 !important;
  width: 100% !important;
  max-height: min(320px, 42vh) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 1px solid #ddd8d1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 24px 55px rgba(14, 20, 27, .22) !important;
}

/* Prevent later fields and the Continue button from painting
   over the dropdown. */
.quote-panel--refined .field:not(.vehicle-field),
.quote-panel--refined .quote-step-actions,
.quote-panel--refined #continue-contact {
  position: relative;
  z-index: 1;
}

.quote-panel--refined .suggestion-list button {
  position: relative;
  z-index: 1;
  min-height: 62px;
}

/* Keep the open list usable on small screens. */
@media (max-width: 760px) {
  .quote-panel--refined .suggestion-list {
    max-height: min(290px, 40vh) !important;
  }
}


/* =========================================================
   Final estimate page — refined UI
   ========================================================= */

/* Focus the page on the result and remove the now-irrelevant sidebar. */
.quote-shell--refined:has(.quote-step[data-step="3"].is-active) {
  grid-template-columns: minmax(0, 900px) !important;
}

.quote-shell--refined:has(.quote-step[data-step="3"].is-active) .quote-sidebar--refined {
  display: none !important;
}

.quote-panel--refined:has(.quote-step[data-step="3"].is-active) {
  width: 100%;
  max-width: 900px;
  padding: 28px 30px 30px;
}

/* Result card */
.quote-panel--refined .result {
  position: relative;
  overflow: hidden !important;
  max-width: 820px;
  margin-inline: auto;
  padding: 46px 48px 38px;
  border: 1px solid #ded9d2;
  border-radius: 24px;
  color: #202a34 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(219, 80, 74, .08), transparent 24rem),
    #fff !important;
  box-shadow: 0 18px 48px rgba(14, 20, 27, .08) !important;
  text-align: center;
}

.quote-panel--refined .result::before {
  content: "" !important;
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  display: block !important;
  background: #db504a;
  opacity: 1;
}

.quote-panel--refined .result-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #65717d !important;
  font-size: 11px !important;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

.quote-panel--refined .result-label i {
  color: #db504a;
}

/* Price */
.quote-panel--refined #result-price {
  margin: 19px 0 12px;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  color: #db504a !important;
  font-size: clamp(58px, 7.2vw, 82px) !important;
  line-height: .96;
  font-weight: 800;
  letter-spacing: -.065em !important;
  white-space: nowrap;
  text-shadow: none !important;
}

.quote-panel--refined #result-price > span {
  display: inline-block !important;
  color: #db504a !important;
}

.quote-panel--refined .result-price__currency {
  margin-right: .015em;
}

.quote-panel--refined .result-price__separator {
  margin-inline: .045em;
  font-size: .8em;
  font-weight: 650;
}

.quote-panel--refined .result-copy {
  max-width: 650px !important;
  margin: 0 auto 26px;
  color: #66737e !important;
  font-size: 15px !important;
  line-height: 1.65;
  text-align: center;
}

/* Five useful summary items — no vehicle-size card. */
.quote-panel--refined .result-details {
  margin: 0 0 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid #e2ddd6;
  border-radius: 18px;
  background: #f5f2ed;
}

.quote-panel--refined .result-detail {
  min-width: 0;
  min-height: 82px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #e4dfd8;
  border-radius: 14px;
  background: #fff;
  text-align: left;
}

.quote-panel--refined .result-detail--wide {
  grid-column: 1 / -1;
  min-height: 72px;
}

.quote-panel--refined .result-detail > i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #db504a;
  background: #fff0ee;
  font-size: 15px;
}

.quote-panel--refined .result-detail > span {
  min-width: 0;
}

.quote-panel--refined .result-detail small {
  display: block;
  margin-bottom: 4px;
  color: #89939c;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quote-panel--refined .result-detail strong {
  display: block;
  overflow-wrap: anywhere;
  color: #1f2933 !important;
  font-size: 14px !important;
  line-height: 1.42;
  font-weight: 800;
}

/* Saved/email state */
.quote-panel--refined .result-notice {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #efd390;
  border-radius: 12px;
  color: #7b5200;
  background: #fff4d8;
  font-size: 12px !important;
  line-height: 1.5;
  font-weight: 750;
}

/* Actions */
.quote-panel--refined .result .quote-actions {
  margin: 0 0 17px !important;
  display: flex;
  justify-content: center;
  gap: 9px;
}

.quote-panel--refined .result .quote-actions .button {
  min-height: 50px;
  padding-inline: 20px;
  font-size: 13px;
}

.quote-panel--refined .result .button--quiet {
  color: #202a34 !important;
  border-color: #d8d3cc !important;
  background: #fff !important;
}

.quote-panel--refined .result .button--dark {
  color: #fff !important;
  background: #111922 !important;
}

.quote-panel--refined .result > small {
  max-width: 680px;
  margin-inline: auto;
  display: block;
  color: #8a949d !important;
  font-size: 10px !important;
  line-height: 1.55;
  text-align: center;
}

/* Mobile */
@media (max-width: 760px) {
  .quote-panel--refined:has(.quote-step[data-step="3"].is-active) {
    padding: 16px 12px 18px;
  }

  .quote-panel--refined .result {
    padding: 32px 17px 28px;
    border-radius: 19px;
  }

  .quote-panel--refined #result-price {
    margin-top: 16px;
    font-size: clamp(47px, 14vw, 64px) !important;
  }

  .quote-panel--refined .result-copy {
    font-size: 14px !important;
  }

  .quote-panel--refined .result-details {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .quote-panel--refined .result-detail--wide {
    grid-column: auto;
  }

  .quote-panel--refined .result-detail {
    min-height: 72px;
  }

  .quote-panel--refined .result .quote-actions {
    flex-direction: column;
  }

  .quote-panel--refined .result .quote-actions .button {
    width: 100%;
  }
}

/* =========================================================
   V4 — make/model selector and final estimate refinement
   ========================================================= */

.vehicle-selection-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: start;
}

.vehicle-selection-grid .field {
  min-width: 0;
}

.vehicle-selection-grid select {
  width: 100%;
  text-overflow: ellipsis;
}

.vehicle-selection-grid select:disabled {
  color: #9099a2;
  background: #f1efeb;
  cursor: not-allowed;
}

.vehicle-selection-grid .field-help {
  min-height: 18px;
}

/* The old suggestion dropdown is no longer used. */
.vehicle-field,
.suggestion-list,
#vehicle-suggestions {
  display: none !important;
}

/* Final summary uses a clean, balanced 2 x 2 grid. */
.quote-panel--refined .result-details {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px !important;
}

.quote-panel--refined .result-detail {
  min-height: 92px !important;
  padding: 17px 18px !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
}

.quote-panel--refined .result-detail > i {
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
}

.quote-panel--refined .result-detail small {
  margin-bottom: 5px !important;
  color: #7f8b95 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: .085em !important;
}

.quote-panel--refined .result-detail strong {
  color: #1d2731 !important;
  font-size: 16px !important;
  line-height: 1.38 !important;
  letter-spacing: -.01em;
  text-transform: none !important;
}

.quote-panel--refined .result-copy {
  max-width: 690px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.quote-panel--refined .result-notice {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.quote-panel--refined .result > small {
  font-size: 11px !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px) {
  .vehicle-selection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vehicle-selection-grid .field:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .vehicle-selection-grid {
    grid-template-columns: 1fr;
  }

  .vehicle-selection-grid .field:last-child {
    grid-column: auto;
  }

  .quote-panel--refined .result-details {
    grid-template-columns: 1fr !important;
  }

  .quote-panel--refined .result-detail {
    min-height: 78px !important;
  }
}

/* Optional Cloudflare Turnstile widget. It remains hidden until a site key is configured. */
.quote-turnstile{margin:18px 0;min-height:65px}
.quote-turnstile[hidden]{display:none!important}


/* =========================================================
   Free Postcodes.io validation
   ========================================================= */

.delivery-address-field {
  position: relative;
}

.address-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.address-lookup-row input {
  width: 100%;
  text-transform: uppercase;
}

.address-lookup-button {
  min-width: 170px;
  min-height: 56px;
  padding-inline: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 13px;
  white-space: nowrap;
}

.address-lookup-button:disabled {
  opacity: .65;
  cursor: wait;
}

.address-lookup-status {
  margin-top: 10px;
}

.address-lookup-status:empty {
  display: none;
}

.address-manual-wrap {
  margin-top: 15px;
}

.address-manual-wrap[hidden] {
  display: none !important;
}

.address-manual-wrap label {
  display: block;
  margin-bottom: 8px;
  color: #35414c;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}

.address-manual-wrap input {
  width: 100%;
  min-height: 56px;
  padding: 13px 15px;
  border: 1px solid #d8d3cc;
  border-radius: 13px;
  color: #1f2933;
  background: #fff;
  font-size: 15px;
}

.address-manual-wrap input:focus {
  border-color: #db504a;
  outline: 3px solid rgba(219, 80, 74, .11);
}

@media (max-width: 620px) {
  .address-lookup-row {
    grid-template-columns: 1fr;
  }

  .address-lookup-button {
    width: 100%;
  }
}


/* =========================================================
   Validated collection and delivery address flows
   ========================================================= */

.address-validation-card {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #e4ded7;
  border-radius: 18px;
  background: #fbfaf8;
}

.address-validation-card > label {
  margin-bottom: 9px;
}

.address-validation-card .address-lookup-status.is-success {
  border-color: #cfe7da;
  background: #e9f6ef;
  color: #226b4d;
}

.address-validation-card .address-manual-wrap {
  padding-top: 15px;
  border-top: 1px solid #e7e1da;
}

.address-validation-card .address-manual-wrap input {
  background: #fff;
}

@media (max-width: 620px) {
  .address-validation-card {
    padding: 14px;
    border-radius: 15px;
  }
}


/* Quote form availability */
.quote-closed-message {
  margin-bottom: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  border: 1px solid #efd2ce;
  border-radius: 15px;
  color: #79332e;
  background: #fff0ee;
}

.quote-closed-message > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #db504a;
}

.quote-closed-message strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.quote-closed-message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

#instant-quote-form.is-closed .quote-step,
#instant-quote-form.is-closed .quote-progress {
  opacity: .55;
}