/* Book2 page polish
   Goal: make Book2 visually match the unified app (cream card on ATE green)
   without touching any of the booking logic.
*/

/* Let unified-app.css control the global background.
   We only set page-specific layout and card styling here. */
body[data-page="booking2"],
body[data-page="booking3"]{
  color: var(--page-ink);
}

body[data-page="booking2"],
body[data-page="booking3"] .wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + 74px);
}

/* Minimal progress header (text only) */
body[data-page="booking2"],
body[data-page="booking3"] .gs-progress{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 2px 2px 12px;
  font-size: 13px;
  letter-spacing: -.01em;
  color: rgba(15,47,31,.60);
  border-bottom: 1px solid var(--hairline);
}
body[data-page="booking2"],
body[data-page="booking3"] .gs-progress__item{
  font-weight: 700;
  color: rgba(15,47,31,.42);
}
body[data-page="booking2"],
body[data-page="booking3"] .gs-progress__item.is-active{
  color: rgba(15,47,31,.92);
  position: relative;
  font-weight: 800;
}

body[data-page="booking2"],
body[data-page="booking3"] .gs-progress__item.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(15,47,31,.55);
}
body[data-page="booking2"],
body[data-page="booking3"] .gs-progress__sep{ opacity: .35; }

/* Milestones bar (always visible) */
/* Milestones bar (legacy / optional) */
.milestones{
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 14px 0 14px;
  /* darker + calmer so the page reads as 'green first' */
  background: rgba(15,47,31,.40);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(214,194,139,.18);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.milestones__list{
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin: 0;
  align-items: center;
  justify-content: space-between;
}

.milestones__item{
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(248,245,236,.65);
  padding: 10px 8px;
  border-radius: 12px;
  position: relative;
}

.milestones__item.is-active{
  color: rgba(214,194,139,.96);
  background: rgba(15,47,31,.18);
}

.milestones__item.is-done{
  color: rgba(248,245,236,.85);
}

.milestones__item.is-active::after{
  content:"";
  position:absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 2px;
  background: rgba(214,194,139,.75);
  border-radius: 999px;
  opacity: .95;
}

/* Main flow surface */
.flow-card{
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper-strong);
  color: var(--ate-ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  padding: var(--space-5);
}

/* Final consistency pass
   Later steps (Vehicle/Return/Details/Review) are naturally taller, which made the
   warm surface dominate the viewport and reduced the "green authority".
   Keep the same structure, but tighten vertical rhythm so the green has
   breathing room throughout the flow. */

/* Tighter default vertical rhythm inside steps */
body[data-page="booking2"],
body[data-page="booking3"] .q{ margin: 16px 0; }

/* Slightly reduce title/sub spacing on later steps to avoid overly tall surfaces */
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="vehicle"] .step__title,
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="when"] .step__title,
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="return"] .step__title,
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="details"] .step__title,
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="review"] .step__title{
  margin-bottom: 8px;
}
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="vehicle"] .step__sub,
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="return"] .step__sub,
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="review"] .step__sub{
  margin-bottom: 12px;
}

/* Details step: tighter spacing + calmer helper chips */
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="details"] .q{ margin: 14px 0; }
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="details"] .q__textarea{ min-height: 92px; }
/* Micro-tweak (final): calmer Details headline + prevent any legacy background "bands" */
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="details"] .step__title{ font-size: 24px; margin-bottom: 6px; }
body[data-page="booking2"],
body[data-page="booking3"] .step[data-step="details"] .q{ background: transparent !important; }

body[data-page="booking2"],
body[data-page="booking3"] .chips{ gap: 6px; margin-top: 8px; }
body[data-page="booking2"],
body[data-page="booking3"] .chip{
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  border-color: rgba(15,47,31,.14);
  background: rgba(15,47,31,.06);
  color: rgba(28,31,29,.68);
}
body[data-page="booking2"],
body[data-page="booking3"] .chip:hover{ border-color: rgba(15,47,31,.28); background: rgba(15,47,31,.08); }

/* iOS Safari: prevent autofill from forcing odd background/banding.
   We keep inputs white, but ensure autofill doesn't inject grey/yellow overlays. */
body[data-page="booking2"],
body[data-page="booking3"] input.q__input:-webkit-autofill,
body[data-page="booking2"],
body[data-page="booking3"] input.q__input:-webkit-autofill:hover,
body[data-page="booking2"],
body[data-page="booking3"] input.q__input:-webkit-autofill:focus,
body[data-page="booking2"],
body[data-page="booking3"] select.q__input:-webkit-autofill,
body[data-page="booking2"],
body[data-page="booking3"] select.q__input:-webkit-autofill:hover,
body[data-page="booking2"],
body[data-page="booking3"] select.q__input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: rgba(15,47,31,.92) !important;
  caret-color: rgba(15,47,31,.92) !important;
}


/* Mobile: slightly reduce surface padding so content fits without the surface feeling "full screen" */
@media (max-width: 560px){
  body[data-page="booking2"],
body[data-page="booking3"] .flow-card{ padding: 18px; }
}

.step{ display:none; }
.step.is-active{ display:block; }

.step__title{
  margin: 2px 0 10px;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}

.step__sub{
  margin: 0 0 16px;
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.55;
}

.q{ margin: 18px 0; }
.q__label{
  display:block;
  font-weight: 650;
  letter-spacing: -.01em;
  color: rgba(28,31,29,.86);
  margin: 0 0 8px;
  font-size: 15px;
}

.q__help{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(15,47,31,.62);
}

.q__input, .q__textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,47,31,.18);
  background: #fff;
  color: rgba(15,47,31,.92);
  padding: 14px 14px;
  font-size: 16px;
  line-height: 1.2;
  outline: none;
}

.q__input:focus, .q__textarea:focus{
  border-color: rgba(15,47,31,.38);
  box-shadow: 0 0 0 4px rgba(15,47,31,.10);
}

/* Prevent iOS/Chrome autofill from introducing grey/yellow bands in the form */
input.q__input:-webkit-autofill,
input.q__input:-webkit-autofill:hover,
input.q__input:-webkit-autofill:focus,
textarea.q__textarea:-webkit-autofill{
  -webkit-text-fill-color: rgba(15,47,31,.92);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px #fff inset;
  border: 1px solid rgba(15,47,31,.18);
}

.tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.tile{
  text-align:left;
  border-radius: 16px;
  border: 1px solid rgba(15,47,31,.18);
  background: rgba(255,255,255,.78);
  padding: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  cursor:pointer;
  transition: transform .08s ease, border-color .08s ease;
}

.tile:hover{ transform: translateY(-1px); border-color: rgba(15,47,31,.32); }
.tile.is-selected{ border-color: rgba(15,47,31,.65); box-shadow: 0 10px 26px rgba(0,0,0,.12), 0 0 0 2px rgba(0,160,90,.18), 0 0 14px rgba(0,160,90,.12); }

.tile__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tile__title{ font-weight: 750; color: var(--green); font-size: 18px; }
.tile__sub{ color: rgba(28,31,29,.62); font-size: 13px; font-weight: 600; }
.tile__price{ margin: 12px 0 8px; font-size: 26px; font-weight: 800; color: rgba(28,31,29,.92); }
.tile__micro{ font-size: 13px; color: rgba(28,31,29,.62); }
.tile__cta{ margin-top: 12px; font-size: 13px; font-weight: 800; color: rgba(15,47,31,.85); }

.choice{ display:flex; gap: 10px; flex-wrap: wrap; }
.choice__btn{
  flex: 1;
  min-width: 160px;
  border-radius: 14px;
  border: 1px solid rgba(15,47,31,.18);
  background: rgba(255,255,255,.90);
  padding: 12px 12px;
  font-weight: 750;
  color: rgba(28,31,29,.84);
}
.choice__btn.is-selected{
  background: rgba(15,47,31,.08);
  border-color: rgba(15,47,31,.55);
  color: var(--green);
}

.step__actions{
  display:flex;
  gap: 10px;
  margin-top: 18px;
  justify-content: space-between;
}

.btn{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  border: 1px solid rgba(15,47,31,.22);
  background: #0f2f1f;
  color: rgba(248,245,236,.92);
}

.btn--primary{
  background: #0f2f1f;
  border-color: rgba(214,194,139,.72);
  color: rgba(248,245,236,.96);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.26);
}

.btn--primary:active{
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

.btn--ghost{
  background: transparent;
  border-color: rgba(15,47,31,.22);
  color: rgba(15,47,31,.82);
}

.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.chips{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(15,47,31,.18);
  background: rgba(255,255,255,.88);
  font-weight: 750;
  font-size: 12px;
  color: rgba(28,31,29,.74);
}
.chip:hover{ border-color: rgba(15,47,31,.35); }

.sep{
  border: none;
  border-top: 1px solid rgba(15,47,31,.10);
  margin: 22px 0;
}

/* Micro-tweak: a softer section break for Details step (keeps flow calm) */
.sep--soft{
  margin: 18px 0 14px;
  border-top-color: rgba(15,47,31,.08);
}

/* Softer break used on Details step so the flow stays calm */
.sep.sep--soft{
  margin: 16px 0 14px;
  border-top-color: rgba(15,47,31,.08);
}

/* Micro-tweak: softer break before contact details (no grey band, just rhythm) */
.sep--soft{
  margin: 16px 0 14px;
  border-top-color: rgba(15,47,31,.08);
}

.summary{
  border-radius: 16px;
  border: 1px solid rgba(15,47,31,.14);
  background: rgba(255,255,255,.88);
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(28,31,29,.84);
}

.tiny-note{
  margin: 14px 6px 0;
  font-size: 13px;
  color: rgba(28,31,29,.60);
}

.muted{ color: rgba(28,31,29,.60); }

@media (max-width: 560px){
  .tiles{ grid-template-columns: 1fr; }
  .milestones__list{ gap: 6px; }
  .milestones__item{ font-size: 12px; padding: 10px 6px; }
}


/* Vehicle suggestion when pax conflicts with earlier vehicle choice */
.b2-veh-suggest{
  margin-top: 12px;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,47,31,.06);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.b2-veh-suggest__text{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(28,31,29,.78);
  flex: 1;
}
.b2-veh-suggest__btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 650;
  font-size: 13px;
  color: var(--green);
  cursor: pointer;
  white-space: nowrap;
}
.b2-veh-suggest__btn:hover{
  background: rgba(255,255,255,.78);
}

/* --- Quick Picks (Wirral + airports) --- */
.ate-picks{ margin-top:10px; }
.ate-picks[aria-hidden="true"]{ display:none; }
.ate-picks__grid{ display:flex; flex-wrap:wrap; gap:8px; }
.ate-pick{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.78);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.ate-pick:hover{ background: rgba(255,255,255,.70); }
.ate-pick:active{ transform: translateY(1px); }

/* V14 Hero Badge Upgrade */
.hero img, .hero-logo, .logo-hero {
    max-width:130px !important;
    width:130px !important;
    margin-top:10px !important;
    margin-bottom:8px !important;
}

.hero {
    padding-top:10px !important;
    padding-bottom:10px !important;
}


/* V15 Hero Badge Full-Bleed */
.hero img, .hero-logo, .logo-hero {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hero {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* If a wrapper is adding a circular plate/ring, neutralise it */
.hero .logo-wrap, .hero .logo-circle, .hero .badge, .hero .badge-ring {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* V15 Full-bleed Hero Badge */
.hero img, .hero-logo, .logo-hero {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.38) !important;
}
.hero {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}



/* Selected vehicle glow (make selection obvious) */
body[data-page="booking3"] .tile.is-selected{
  border-color: rgba(0, 160, 90, .45) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.14),
    0 0 0 2px rgba(0, 160, 90, .18),
    0 0 16px rgba(0, 160, 90, .14) !important;
  transform: translateY(-1px);
}
body[data-page="booking3"] .tile.is-selected .tile__cta{
  font-weight: 900;
}
body[data-page="booking3"] .tile.is-selected::after{
  content: "Selected";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  background: rgba(40, 210, 120, .14);
  border: 1px solid rgba(40, 210, 120, .35);
  color: rgba(15,47,31,.92);
}
/* Ensure tile can host the badge */
body[data-page="booking3"] .tile{ position: relative; }


/* POLISH: label contrast + input text */
.bk-label,.bk-hint,.bk-subhint{opacity:1 !important; color: rgba(15,47,31,.85) !important;}
.card label, .card .label{color: rgba(15,47,31,.78) !important; opacity:1 !important;}
input,textarea,select{color:#0f2f1f !important;}
input::placeholder,textarea::placeholder{color: rgba(15,47,31,.45) !important;}

#btnASAPFill{ width:100%; justify-content:center; }


/* PATCH: improve question label contrast */
.q__label{ color:#0f2f1f !important; opacity:1 !important; }
/* PATCH: prevent submit buttons stretching tall due to nextsteps card */
.step__actions{ align-items:flex-start; flex-wrap:wrap; }
.step__actions > .btn,
.step__actions > a.btn{ align-self:flex-start; }
.ate-nextsteps{ flex-basis:100%; margin-top:12px; }


/* PATCH: remove ASAP prompts/buttons completely */
#btnASAPFill,
[href="/book3.html"].btn.btn--primary,
a[href="/asap.html"],
a[href*="asap"],
.asap,
.asap-cta,
.asapPrompt,
.asapButton,
[data-asap],
[data-action="asap"]{
  display:none !important;
}

/* PATCH: force strong readable label/help text on light booking background */
body[data-page="booking3"] .q__label,
body[data-page="booking3"] label.q__label,
body[data-page="booking3"] .q label,
body[data-page="booking3"] .q__help,
body[data-page="booking3"] .step__sub,
body[data-page="booking3"] .q__label *,
body[data-page="booking3"] .q__help *{
  color:#27483b !important;
  opacity:1 !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#27483b !important;
}

body[data-page="booking3"] .step__title{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
}

body[data-page="booking3"] .q__input,
body[data-page="booking3"] .q__textarea,
body[data-page="booking3"] select.q__input{
  color:#0f2f1f !important;
  background:#ffffff !important;
}

body[data-page="booking3"] .q__input::placeholder,
body[data-page="booking3"] .q__textarea::placeholder{
  color:rgba(15,47,31,.45) !important;
  -webkit-text-fill-color:rgba(15,47,31,.45) !important;
}

/* keep return choice buttons visible/readable */
body[data-page="booking3"] .choice__btn{
  color:#27483b !important;
  -webkit-text-fill-color:#27483b !important;
  border-color:rgba(39,72,59,.35) !important;
  background:rgba(255,255,255,.72) !important;
}
body[data-page="booking3"] .choice__btn.is-selected,
body[data-page="booking3"] .choice__btn[aria-pressed="true"]{
  color:#173126 !important;
  -webkit-text-fill-color:#173126 !important;
  background:rgba(212,175,55,.30) !important;
  border-color:rgba(92,69,14,.45) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.10) !important;
}


/* PATCH: booking form readability + kill ASAP */
#btnASAPFill,
#btnAsap,
.asap,
.asap-btn,
.asap-cta,
[data-asap],
[data-action="asap"],
button[aria-label="ASAP"],
button[title="ASAP"]{
  display:none !important;
}

body[data-page="booking3"] .q__label,
body[data-page="booking3"] .q label,
body[data-page="booking3"] .q-title,
body[data-page="booking3"] .question-label,
body[data-page="booking3"] .form-label,
body[data-page="booking3"] .field-label,
body[data-page="booking3"] [class*="label"],
body[data-page="booking3"] [class*="question"]{
  color:#27483b !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#27483b !important;
}

body[data-page="booking3"] .q__help,
body[data-page="booking3"] .step__sub,
body[data-page="booking3"] .field-help,
body[data-page="booking3"] .hint,
body[data-page="booking3"] [class*="help"]{
  color:#5f7269 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#5f7269 !important;
}

body[data-page="booking3"] input,
body[data-page="booking3"] textarea,
body[data-page="booking3"] select{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
  background:#fff !important;
}

body[data-page="booking3"] input::placeholder,
body[data-page="booking3"] textarea::placeholder{
  color:rgba(15,47,31,.45) !important;
  -webkit-text-fill-color:rgba(15,47,31,.45) !important;
}

body[data-page="booking3"] .step__title,
body[data-page="booking3"] h1,
body[data-page="booking3"] h2,
body[data-page="booking3"] h3{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
}