/* ==========================================================================
   VIP V2 — full-page checkout (/checkout), add-on screens, Review & pay
   sheet, exit-intent hold popup and the confirmation page. Loaded after
   vip-v2.css (tokens, .vip2-d / .vip2-m trees, buttons).
   The page reuses the booking popup's engine (booking.js + its ids), so the
   first block turns the popup shell into a static page and restyles the
   engine-generated pieces (.bcal calendar, field errors, add-on review).
   Sizes are the final design's (branson-site export: co1/co2/up1–3/conf/exit).
   Desktop ≥ 1024px, mobile below (640px column from 768px).
   ========================================================================== */
.vip2-checkout { background: var(--vip2-cream); min-height: 100vh; }
.vip2-checkout .booking-modal.vip2-co {
  position: static; display: block; inset: auto; width: auto; height: auto; max-height: none;
  overflow: visible; background: transparent; padding: 0; z-index: auto; opacity: 1; transform: none;
}
.vip2-checkout .booking-modal.vip2-co.active { display: block; }
.vip2-checkout .booking-modal__tab-content { display: block; }
.vip2-checkout .booking-modal__card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.vip2-checkout .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vip2-checkout .vip2-d-inline { display: none; }
.vip2-checkout .vip2-m-inline { display: inline; }
@media (min-width: 1024px) { .vip2-checkout .vip2-d-inline { display: inline; } .vip2-checkout .vip2-m-inline { display: none !important; } }
/* Pieces that belong to one stage only (the page script sets data-vip2-stage). */
.vip2-checkout [data-vip2-stage-only] { display: none !important; }
.vip2-checkout[data-vip2-stage="1"] [data-vip2-stage-only="1"], .vip2-checkout[data-vip2-stage="2"] [data-vip2-stage-only="2"] { display: block !important; }
.vip2-checkout[data-vip2-stage="1"] span[data-vip2-stage-only="1"], .vip2-checkout[data-vip2-stage="2"] span[data-vip2-stage-only="2"] { display: inline !important; }
.vip2-checkout[data-vip2-stage="1"] .vip2-co__trust[data-vip2-stage-only="1"], .vip2-checkout[data-vip2-stage="2"] .vip2-co__price-row[data-vip2-stage-only="2"] { display: flex !important; }
.vip2-checkout[data-vip2-stage="2"] .vip2-co__price-row[data-vip2-stage-only="2"][hidden] { display: none !important; }
/* The timer is a step-2 thing (design: no countdown on step 1). */
.vip2-checkout[data-vip2-stage="1"] #bookingHoldTimer { display: none; }

/* ---- desktop top bar --------------------------------------------------- */
.vip2-co__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--vip2-gx); background: var(--vip2-navy); color: #fff; max-width: none; }
.vip2-co__logo img { height: 34px; width: auto; display: block; }
.vip2-co__secure { font: 600 14px var(--vip2-body); color: var(--vip2-on-dark); }
.vip2-co__hold b { font-family: var(--vip2-mono); color: var(--vip2-yellow); font-variant-numeric: tabular-nums; }
.vip2-co__secured { color: #8edba8; }
.vip2-co__contact { display: flex; align-items: center; gap: 16px; font: 700 16px var(--vip2-head); }
.vip2-co__phone { color: #fff !important; }
.vip2-co__chat { border: 1.5px solid rgba(255,255,255,.4); border-radius: 99px; padding: 8px 16px; font-size: 13px; color: #fff !important; }

/* ---- mobile app header + hold strip ----------------------------------- */
.vip2-co__mhead { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--vip2-divider); background: #fff; }
.vip2-co__mhead-row { display: flex; justify-content: space-between; align-items: center; }
.vip2-co__back { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; margin-left: -12px; border: 0; background: none; color: var(--vip2-text); cursor: pointer; }
.vip2-co__mstep { font: 700 13px var(--vip2-body); }
.vip2-co__mcall { font: 600 13px var(--vip2-body); color: var(--vip2-navy) !important; }
.vip2-co__progress { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vip2-co__progress span { height: 5px; border-radius: 3px; background: var(--vip2-line); }
.vip2-co__progress span.is-on { background: var(--vip2-green); }
.vip2-co__mhold { background: var(--vip2-sand); padding: 10px 18px; font-size: 13px; display: flex; justify-content: space-between; }
.vip2-co__mhold[hidden] { display: none; }
.vip2-co__mhold b { font-family: var(--vip2-mono); color: var(--vip2-orange); font-variant-numeric: tabular-nums; }

/* ---- layout ----------------------------------------------------------- */
.vip2-co__main { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.vip2-co__title { font: italic 900 28px/1.05 var(--vip2-head); color: var(--vip2-navy); margin: 0; }
.vip2-co__grid { display: grid; gap: 24px; align-items: start; }
.vip2-co__steps { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 768px) and (max-width: 1023.98px) { .vip2-co__main { max-width: 640px; margin: 0 auto; width: 100%; } }
@media (max-width: 1023.98px) { .vip2-checkout { background: #fff; } }
@media (min-width: 1024px) {
  .vip2-co__main { max-width: var(--vip2-max); margin: 0 auto; padding: 40px var(--vip2-gx) 64px; gap: 20px; }
  .vip2-co__title { font-size: 44px; line-height: 1; }
  .vip2-co__grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }
}

/* ---- step cards (desktop) --------------------------------------------- */
.vip2-co__step { display: flex; flex-direction: column; gap: 14px; }
.vip2-co__step-head { display: flex; align-items: center; gap: 12px; }
.vip2-co__step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--vip2-navy); color: #fff; display: grid; place-items: center; font: 800 15px var(--vip2-head); flex: none; }
.vip2-co__step-title { font: 800 20px var(--vip2-head); color: var(--vip2-navy); }
.vip2-co__step-meta { margin-left: auto; font-size: 13px; color: var(--vip2-grey); }
.vip2-co__body { display: block; }
.vip2-co__done { display: none; align-items: center; gap: 14px; }
.vip2-co__done-check { width: 32px; height: 32px; border-radius: 50%; background: var(--vip2-green); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.vip2-co__done-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.4; }
.vip2-co__done-text b { color: var(--vip2-text); }
.vip2-co__done-text > span { color: var(--vip2-grey); font-size: 14px; }
.vip2-co__edit { margin-left: auto; background: none; border: 0; padding: 0; font: 600 14px var(--vip2-body); color: var(--vip2-navy); cursor: pointer; }
.vip2-co__edit.is-locked { display: none; }
@media (min-width: 1024px) {
  .vip2-co__step { background: #fff; border: 2px solid var(--vip2-navy); border-radius: 18px; padding: 28px; gap: 22px; }
  /* Step 2 before it unlocks: dashed, beige, body hidden. */
  .vip2-co__step--locked { border: 1px dashed var(--vip2-photo); background: #efece5; padding: 22px 28px; gap: 0; }
  .vip2-co__step--locked .vip2-co__step-num { background: var(--vip2-faq-line); }
  .vip2-co__step--locked .vip2-co__step-title { color: var(--vip2-muted); }
  .vip2-co__step--locked .vip2-co__step-meta { color: var(--vip2-muted); }
  .vip2-co__step--locked .vip2-co__body { display: none; }
  .vip2-co__step--locked.is-unlocked { border: 2px solid var(--vip2-navy); background: #fff; padding: 28px; gap: 22px; }
  .vip2-co__step--locked.is-unlocked .vip2-co__step-num { background: var(--vip2-navy); }
  .vip2-co__step--locked.is-unlocked .vip2-co__step-title { color: var(--vip2-navy); }
  .vip2-co__step--locked.is-unlocked .vip2-co__body { display: block; }
  .vip2-co__step--locked.is-unlocked .vip2-co__unlock-note { display: none; }
  /* Step 1 once done: the form collapses to the completed strip. */
  .vip2-co__step.is-done { border: 1px solid var(--vip2-line); padding: 20px 28px; gap: 0; }
  .vip2-co__step.is-done .vip2-co__step-head, .vip2-co__step.is-done .vip2-co__body { display: none; }
  .vip2-co__step.is-done .vip2-co__done { display: flex; }
}
@media (max-width: 1023.98px) {
  /* Mobile shows one step at a time, no card chrome; step 2 opens on the
     "Your stay" label instead of a heading (design 2e). */
  .vip2-co__step.is-done { display: none; }
  .vip2-co__step--locked:not(.is-unlocked) { display: none; }
  .vip2-checkout[data-vip2-stage="2"] .vip2-co__title { display: none; }
}

/* ---- labels, boxes, fields -------------------------------------------- */
.vip2-co__mlabel { font: 700 12px var(--vip2-body); text-transform: uppercase; letter-spacing: .08em; color: var(--vip2-muted); margin: 0 0 4px; }
.vip2-co__label { font: 700 12px var(--vip2-body); letter-spacing: .08em; text-transform: uppercase; color: var(--vip2-muted); margin: 0 0 10px; }
.vip2-co__divider { height: 1px; background: var(--vip2-divider); margin: 4px 0; }
.vip2-co__step1 { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .vip2-co__step1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.vip2-co__dates { display: flex; flex-direction: column; gap: 12px; }
.vip2-checkout .booking-modal__date-fields { display: none; }
.vip2-checkout .booking-modal__date-fields.visible { display: block; }
.vip2-co__dates-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.vip2-co__dates-ok { color: var(--vip2-green); font-weight: 700; }
.vip2-co__dates-later { color: var(--vip2-grey); }
.vip2-co__link { background: none; border: 0; padding: 0; font: 600 13px var(--vip2-body); color: var(--vip2-text); cursor: pointer; margin-left: auto; }
.vip2-co__contact-fields { display: flex; flex-direction: column; gap: 12px; }
.vip2-co__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.vip2-co__box { position: relative; border: 1.5px solid var(--vip2-faq-line); border-radius: 10px; padding: 10px 14px; background: #fff; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
@media (max-width: 1023.98px) { .vip2-co__box { padding: 9px 12px; } }
.vip2-co__box:focus-within { border-color: var(--vip2-navy); box-shadow: 0 0 0 3px rgba(11,20,51,.1); }
.vip2-co__box.is-invalid { border-color: var(--vip2-orange); }
.vip2-co__box-label { display: block; font: 700 11px var(--vip2-body); color: var(--vip2-muted); margin: 0; }
.vip2-checkout .vip2-co__box .booking-modal__input { border: 0; border-radius: 0; padding: 0; margin-top: 2px; height: auto; font: 400 16px/1.3 var(--vip2-body); color: var(--vip2-text); background: transparent; box-shadow: none; width: 100%; }
.vip2-checkout .vip2-co__box .booking-modal__input:focus { box-shadow: none; outline: none; }
.vip2-checkout .vip2-co__box .booking-modal__input::placeholder { color: var(--vip2-placeholder); }
.vip2-checkout .vip2-co__box .booking-modal__input.is-invalid, .vip2-checkout .vip2-co__box .booking-modal__input.is-valid { border: 0; background-image: none; padding-right: 0; }
/* The design has no "valid" state: no green borders / ticks (public.css adds them). */
.vip2-checkout .booking-modal__input.is-valid { border-color: var(--vip2-faq-line); background-image: none; padding-right: inherit; }
.vip2-checkout .vip2-co__box .booking-modal__field-error { margin: 4px 0 0; }
.vip2-checkout .vip2-co__name-error[hidden] { display: none; }
/* The engine's "first name" / "last name" lines land inside the hidden
   wrapper around the two hidden inputs; the box shows one line of its own. */
.vip2-checkout .vip2-co__hidden-names { display: none; }
/* The calendar's "pick a date" message reads like the field errors, not a red box. */
.vip2-checkout #bookingDateError { background: none; border: 0; padding: 0; margin: 6px 0 0; color: var(--vip2-orange); font-size: 12px; font-weight: 600; }
.vip2-checkout #bookingDateError ul { list-style: none; padding: 0 !important; margin: 0 !important; }
/* Chrome's autofill tint. */
.vip2-checkout input:-webkit-autofill, .vip2-checkout input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--vip2-text); transition: background-color 9999s ease-out; }
.vip2-co__box--select::after { content: '▾'; position: absolute; right: 14px; bottom: 11px; font-size: 14px; color: var(--vip2-text); pointer-events: none; }
.vip2-checkout .vip2-co__box--select select { -webkit-appearance: none; appearance: none; padding-right: 20px; }
.vip2-checkout .booking-modal__field-error { color: var(--vip2-orange); font-size: 12px; font-weight: 600; margin: 3px 0 0; display: block; }
.vip2-checkout .booking-modal__errors { background: #fdece7; border: 1px solid #f3b8a8; color: #8e2e13; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 4px 0; }
.vip2-co__hint { font-size: 12px; line-height: 1.45; color: var(--vip2-grey); }

/* Adults / kids: desktop two boxes; mobile one row that opens them. */
.vip2-co__guests-row { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--vip2-line); border-radius: 10px; padding: 8px 12px; background: #fff; font: 600 14px var(--vip2-body); color: var(--vip2-text); cursor: pointer; }
.vip2-co__guests-row > span:last-child { font-size: 15px; }
@media (max-width: 1023.98px) {
  .vip2-co__guests-fields { display: none; margin-top: 10px; }
  .vip2-co__guests.is-open .vip2-co__guests-fields { display: grid; }
}

/* Consent: navy ✓ square (the native box is hidden). */
.vip2-co__consent { margin-top: 2px; }
.vip2-checkout .booking-modal__consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 11px; line-height: 1.45; color: var(--vip2-muted); cursor: pointer; }
.vip2-checkout .booking-modal__consent-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vip2-co__consent-box { width: 18px; height: 18px; border-radius: 4px; flex: none; border: 1.5px solid var(--vip2-faq-line); background: #fff; color: transparent; display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.vip2-checkout .booking-modal__consent-label input:checked + .vip2-co__consent-box { background: var(--vip2-navy); border-color: var(--vip2-navy); color: #fff; }
.vip2-checkout .booking-modal__consent-label input:focus-visible + .vip2-co__consent-box { box-shadow: var(--vip2-focus); }
.vip2-checkout #bookingConsentBlock.is-invalid .vip2-co__consent-box { border-color: var(--vip2-orange); }
.vip2-checkout .booking-modal__consent.is-valid, .vip2-checkout .booking-modal__consent.is-invalid { border-left: 0; padding-left: 0; background: transparent; border-radius: 0; }
.vip2-checkout #bookingConsentError { margin: 6px 0 0 28px; }
.vip2-checkout .booking-modal__consent-link { text-decoration: underline; color: inherit; }

.vip2-co__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
.vip2-co__assure { font-size: 12px; color: var(--vip2-grey); text-align: center; white-space: nowrap; }
.vip2-checkout .booking-modal__btn.vip2-btn { width: 100%; min-width: 0; font: 700 18px var(--vip2-head); padding: 16px; letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: 0 6px 16px rgba(200,64,31,.3); }
.vip2-checkout .booking-modal__btn.vip2-btn:disabled, .vip2-checkout .booking-modal__btn.vip2-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (min-width: 1024px) {
  .vip2-co__actions { flex-direction: row; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
  .vip2-co__assure { font-size: 12px; text-align: left; }
  .vip2-checkout .booking-modal__btn.vip2-btn { width: auto; padding: 18px 40px; white-space: nowrap; }
  .vip2-checkout .booking-modal__btn.vip2-btn--pay { font-size: 19px; padding: 18px 44px; }
}

/* Calendar (markup generated by booking.js — classes are fixed). Page mode
   draws one month with both arrows (booking.js renderCalendar). */
.vip2-checkout .bcal { display: block; }
.vip2-checkout #bcalMonth2 { display: none; }
.vip2-checkout .bcal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* public.css places the arrows absolutely over the title; here they are
   flex items: ‹ · month · › (design co1-d-17). */
.vip2-checkout .bcal__nav-btn { position: static; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vip2-line); background: #fff; color: var(--vip2-text); display: grid; place-items: center; font-size: 14px; cursor: pointer; padding: 0; }
.vip2-checkout .bcal__month-title { flex: 1; text-align: center; font: 700 16px var(--vip2-body); color: var(--vip2-text); }
.vip2-checkout .bcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 15px; }
.vip2-checkout .bcal__dow { font-size: 11px; font-weight: 700; color: var(--vip2-muted); padding: 4px 0 6px; }
.vip2-checkout .bcal__day { height: 42px; display: grid; place-items: center; border-radius: 8px; font-weight: 500; cursor: pointer; color: var(--vip2-text); }
.vip2-checkout .bcal__day:hover { background: var(--vip2-cream); color: var(--vip2-text); }
/* All navy (design): public.css's orange ::before circles, pink range and
   red hover are switched off here. */
.vip2-checkout .bcal__day--start::before, .vip2-checkout .bcal__day--end::before { content: none; }
.vip2-checkout .bcal__day--in-range, .vip2-checkout .bcal__day--in-range:hover { background: #e3e7f2; color: var(--vip2-text); border-radius: 0; }
.vip2-checkout .bcal__day--start, .vip2-checkout .bcal__day--end,
.vip2-checkout .bcal__day--start.bcal__day--in-range, .vip2-checkout .bcal__day--end.bcal__day--in-range,
.vip2-checkout .bcal__day--start:hover, .vip2-checkout .bcal__day--end:hover { background: var(--vip2-navy); color: #fff; font-weight: 700; }
.vip2-checkout .bcal__day--start, .vip2-checkout .bcal__day--start.bcal__day--in-range { border-radius: 8px 0 0 8px; }
.vip2-checkout .bcal__day--end, .vip2-checkout .bcal__day--end.bcal__day--in-range { border-radius: 0 8px 8px 0; }
.vip2-checkout .bcal__day--past, .vip2-checkout .bcal__day--empty { color: #c9c3b6; cursor: default; }
.vip2-checkout .bcal__day--past:hover, .vip2-checkout .bcal__day--empty:hover { background: transparent; }
.vip2-checkout .bcal.is-invalid, .vip2-checkout .bcal.is-valid { border: 0; padding: 0; outline: none; }
.vip2-checkout .bcal.is-invalid { outline: 2px solid var(--vip2-orange); outline-offset: 6px; border-radius: 10px; }
/* The popup's "Check-in / Check-out" block: the engine shows it inline after a pick. */
.vip2-checkout .bcal__summary { display: none !important; }
@media (max-width: 1023.98px) {
  .vip2-checkout .bcal__month-title { font-size: 15px; }
  .vip2-checkout .bcal__grid { font-size: 14px; }
  .vip2-checkout .bcal__day { height: 38px; }
}

/* ---- step 2: rooms ----------------------------------------------------- */
.vip2-co__rooms { display: flex; flex-direction: column; gap: 10px; }
.vip2-co__room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vip2-co__room { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--vip2-line); border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.vip2-co__room:hover { border-color: var(--vip2-placeholder); }
.vip2-co__room.is-selected { border: 2px solid var(--vip2-navy); box-shadow: 0 0 0 3px rgba(11,20,51,.1); }
.vip2-co__room input { position: absolute; opacity: 0; pointer-events: none; }
.vip2-co__room-photo { position: relative; height: 120px; }
.vip2-co__room-dot { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid var(--vip2-placeholder); box-sizing: border-box; }
.vip2-co__room.is-selected .vip2-co__room-dot { border: 7px solid var(--vip2-navy); }
.vip2-co__room-body { display: flex; flex-direction: column; padding: 12px 14px; font-size: 13px; line-height: 1.4; }
.vip2-co__room-body > b { font-size: 15px; font-weight: 700; }
.vip2-co__room-detail { color: var(--vip2-grey); }
.vip2-co__room-price { font: 800 16px var(--vip2-head); color: var(--vip2-navy); margin-top: 6px; }
.vip2-co__room-price.is-included { color: var(--vip2-green); }
.vip2-co__room-price small { font: 500 11px var(--vip2-body); color: var(--vip2-muted); }
.vip2-co__room-note { font-size: 13px; line-height: 1.5; color: var(--vip2-grey); background: var(--vip2-sand); border-radius: 10px; padding: 10px 12px; margin: 0; }
.vip2-co__room-note b { color: var(--vip2-text); }

/* Mobile room list */
.vip2-co__mroom { display: flex; gap: 10px; align-items: center; border: 2px solid var(--vip2-navy); border-radius: 12px; padding: 10px; background: #fff; cursor: pointer; margin-top: 6px; }
.vip2-co__mroom input { position: absolute; opacity: 0; pointer-events: none; }
.vip2-co__mroom-thumb { width: 56px; height: 56px; border-radius: 8px; flex: none; }
.vip2-co__mroom-thumb--sm { width: 44px; height: 44px; }
.vip2-co__mroom-body { flex: 1; font-size: 13px; line-height: 1.35; }
.vip2-co__mroom-body b { font-size: 14px; }
.vip2-co__mroom-body > span { color: var(--vip2-grey); }
.vip2-co__mroom-body small { font-size: 11px; color: var(--vip2-muted); }
.vip2-co__mroom-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vip2-co__mradio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--vip2-placeholder); box-sizing: border-box; flex: none; }
.vip2-co__mroom.is-selected .vip2-co__mradio { border: 6px solid var(--vip2-navy); }
.vip2-co__mroom-incl { font-size: 12px; font-weight: 700; color: var(--vip2-green); }
.vip2-co__mroom-price { font: 700 14px var(--vip2-body); }
.vip2-co__mupgrades { border: 1px solid var(--vip2-line); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.vip2-co__mupgrades-head { padding: 8px 12px; background: var(--vip2-cream); font-size: 12px; font-weight: 700; color: var(--vip2-grey); margin: 0; }
.vip2-co__mroom--up { border: 0; border-top: 1px solid var(--vip2-divider); border-radius: 0; padding: 10px 12px; margin: 0; }
.vip2-co__mroom--up.is-selected { background: var(--vip2-green-tint-2); }
.vip2-co__mroom-note { padding: 10px 12px; border-top: 1px solid var(--vip2-divider); font-size: 11.5px; line-height: 1.5; color: var(--vip2-grey); background: var(--vip2-sand); margin: 0; }
.vip2-co__mroom-note b { color: var(--vip2-text); }
@media (max-width: 1023.98px) { .vip2-co__rooms { gap: 0; } #bookingPaymentFields { display: flex; flex-direction: column; gap: 14px; } }
@media (min-width: 1024px) { #bookingPaymentFields { display: flex; flex-direction: column; gap: 22px; } }

/* ---- step 2: payment --------------------------------------------------- */
.vip2-co__express { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vip2-co__express[hidden], .vip2-co__express-slot[hidden], .vip2-co__or[hidden] { display: none; }
/* One wallet only: its button takes the whole row. */
.vip2-co__express-slot { min-height: 48px; }
.vip2-co__express-slot:only-of-type, .vip2-co__express-slot[hidden] + .vip2-co__express-slot, .vip2-co__express-slot:not([hidden]):has(+ .vip2-co__express-slot[hidden]) { grid-column: 1 / -1; }
.vip2-co__express-slot > *, .vip2-co__express-slot iframe, .vip2-co__express-slot button { width: 100% !important; min-height: 48px; border-radius: 10px; }
@media (min-width: 1024px) { .vip2-co__express { gap: 12px; } .vip2-co__express-slot { min-height: 52px; } }
.vip2-co__or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--vip2-muted); margin: 0; }
.vip2-co__or > span:first-child, .vip2-co__or > span:last-child { flex: 1; height: 1px; background: var(--vip2-line); }

.vip2-co__cardbox { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "num num num" "exp cvc zip"; border: 1.5px solid var(--vip2-faq-line); border-radius: 10px; overflow: hidden; background: #fff; }
.vip2-co__cardbox:focus-within { border-color: var(--vip2-navy); box-shadow: 0 0 0 3px rgba(11,20,51,.1); }
.vip2-co__cardcell { position: relative; border-right: 1px solid var(--vip2-faq-line); }
.vip2-co__cardcell:last-child { border-right: 0; }
.vip2-co__cardcell--num { grid-area: num; border-right: 0; border-bottom: 1px solid var(--vip2-faq-line); display: flex; align-items: center; justify-content: space-between; }
.vip2-co__cardcell:nth-child(2) { grid-area: exp; }
.vip2-co__cardcell:nth-child(3) { grid-area: cvc; }
.vip2-co__cardcell:nth-child(4) { grid-area: zip; }
.vip2-checkout .vip2-co__cardbox .booking-modal__input { border: 0; border-radius: 0; height: auto; padding: 11px 12px; font: 400 16px/1.3 var(--vip2-body); color: var(--vip2-text); background: transparent; box-shadow: none; width: 100%; }
.vip2-checkout .vip2-co__cardbox .booking-modal__input::placeholder { color: var(--vip2-placeholder); }
.vip2-checkout .vip2-co__cardbox .booking-modal__input:focus { outline: none; box-shadow: none; }
.vip2-checkout .vip2-co__cardbox .booking-modal__input.is-invalid { background: #fdece7; }
.vip2-checkout .vip2-co__cardbox .booking-modal__field-error { display: none; }   /* repeated under the row (#vip2CardError) */
.vip2-co__card-error { margin: 6px 0 0; }
.vip2-co__card-error[hidden] { display: none; }
.vip2-co__brands { font-size: 11px; color: var(--vip2-muted); font-weight: 700; padding-right: 12px; flex: none; }
@media (min-width: 1024px) {
  .vip2-co__cardbox { grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-areas: "num exp cvc zip"; }
  .vip2-co__cardcell--num { border-bottom: 0; border-right: 1px solid var(--vip2-faq-line); }
  .vip2-checkout .vip2-co__cardbox .booking-modal__input { padding: 14px; }
}

.vip2-co__protect { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--vip2-green); background: var(--vip2-green-tint-2); border-radius: 12px; padding: 12px; cursor: pointer; margin: 0; }
.vip2-co__protect input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vip2-co__protect-box { width: 20px; height: 20px; border: 1.5px solid var(--vip2-green); border-radius: 4px; flex: none; margin-top: 1px; background: #fff; color: transparent; display: grid; place-items: center; font-size: 12px; }
.vip2-co__protect input:checked + .vip2-co__protect-box { background: var(--vip2-green); color: #fff; }
.vip2-co__protect input:focus-visible + .vip2-co__protect-box { box-shadow: var(--vip2-focus); }
.vip2-co__protect-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--vip2-text); display: flex; flex-direction: column; }
.vip2-co__protect-head { display: flex; justify-content: space-between; gap: 12px; }
.vip2-co__protect-body { color: var(--vip2-grey); }
.vip2-co__protect-price { font-weight: 700; }
@media (min-width: 1024px) {
  .vip2-co__protect { align-items: center; padding: 14px 16px; gap: 12px; }
  .vip2-co__protect-box { width: 22px; height: 22px; margin-top: 0; }
  .vip2-co__protect-text { display: block; font-size: 14px; }
  .vip2-co__protect-head { display: inline; }
  .vip2-co__protect-body { display: inline; }
  .vip2-co__protect > .vip2-co__protect-price { font-size: 14px; flex: none; }
}

.vip2-co__terms { font-size: 12px; line-height: 1.45; color: var(--vip2-grey); background: var(--vip2-cream); border-radius: 10px; padding: 10px 12px; margin: 18px 0 14px; }
@media (min-width: 1024px) { .vip2-co__terms { font-size: 13px; line-height: 1.5; padding: 12px 14px; margin: 22px 0; } }
.vip2-checkout #bookingPaymentFields { padding-bottom: 4px; }
.vip2-co__actions--pay { gap: 10px; }
.vip2-co__paycard { display: block; }
.vip2-co__mtrust { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: var(--vip2-grey); font-weight: 600; flex-wrap: wrap; }
.vip2-checkout .booking-modal__btn--upgrade { margin-bottom: 10px; background: var(--vip2-navy); }
.vip2-checkout #bookingChargeNote { display: none !important; }

/* Mobile inline price summary (the aside's list moves in here). */
.vip2-co__mprices { margin-top: 14px; }
.vip2-co__mprices:empty { display: none; }

/* Paid state pieces from the engine (add-on review + actions). */
.vip2-checkout .addons-review__list { list-style: none; padding: 0; margin: 0 0 10px; }
.vip2-checkout .addons-review__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vip2-line); font-size: 14px; }
.vip2-checkout .addons-review__due { display: flex; justify-content: space-between; font-weight: 800; font-size: 17px; padding: 10px 0; }
.vip2-checkout .addons-actions__link { background: none; border: 0; padding: 0; text-decoration: underline; font-weight: 600; color: var(--vip2-navy); cursor: pointer; }

/* ---- summary card (desktop) -------------------------------------------- */
.vip2-co__aside { position: sticky; top: 16px; }
.vip2-co__summary { background: #fff; border: 1px solid var(--vip2-line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(11,20,51,.06); }
.vip2-co__summary-photo { height: 180px; }
.vip2-co__summary-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.vip2-co__summary-title { font: 800 19px var(--vip2-head); color: var(--vip2-navy); }
.vip2-co__summary-sub { font-size: 14px; color: var(--vip2-grey); margin-top: 2px; }
.vip2-co__perks { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.vip2-co__perks li { display: flex; gap: 8px; }
.vip2-co__perks li > span { color: var(--vip2-green); font-weight: 800; }
.vip2-co__prices { border-top: 1px solid var(--vip2-divider); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.vip2-checkout .booking-modal__price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--vip2-grey); order: 0; }
.vip2-checkout .booking-modal__price-row > span:last-child { color: var(--vip2-grey); font-weight: 400; }
.vip2-co__price-row--taxes { order: 5; }
.vip2-co__was { text-decoration: line-through; }
.vip2-co__base-amount { display: none; margin-left: 6px; }
.vip2-checkout .booking-modal__price-row--paid .vip2-co__base-amount { display: inline; color: var(--vip2-green); }
.vip2-checkout .booking-modal__price-total { order: 10; margin-top: 2px; padding-top: 6px; border-top: 0; font: 800 22px var(--vip2-head); color: var(--vip2-navy); }
.vip2-checkout .booking-modal__price-total > span:last-child { color: var(--vip2-navy); font-weight: 800; font-size: 22px; }
.vip2-checkout .booking-modal__price-row--due { order: 9; font-weight: 700; color: var(--vip2-text); }
.vip2-co__review { background: var(--vip2-cream); border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.5; color: var(--vip2-muted); }
.vip2-co__review b { color: var(--vip2-text); }
.vip2-co__review-stars { color: var(--vip2-star); }
.vip2-co__trust { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--vip2-grey); font-weight: 600; }
.vip2-co__help { background: var(--vip2-cream); border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.5; }
.vip2-co__help b { color: var(--vip2-text); }
.vip2-co__help span { color: var(--vip2-grey); }
.vip2-co__help a { font-weight: 700; text-decoration: underline; }
/* Mobile: the moved list reads as the design's inline rows. */
.vip2-co__mprices .vip2-co__prices { border-top: 0; padding-top: 0; }
.vip2-co__mprices .booking-modal__price-total { font-size: 20px; border-top: 1px solid var(--vip2-divider); padding-top: 6px; }
.vip2-co__mprices .booking-modal__price-total > span:last-child { font-size: 20px; }
.vip2-co__holdbanner { background: var(--vip2-green-tint-2); border: 1.5px solid var(--vip2-green); color: var(--vip2-green); border-radius: 12px; padding: 12px 16px; font-size: 14px; margin: 0; }

/* ==========================================================================
   Add-on screens (3 floating panels), Review & pay sheet, exit-intent popup
   ========================================================================== */
.vip2-checkout .upsell-modal.vip2-up { position: fixed; inset: 0; z-index: 1200; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; font-family: var(--vip2-body); }
.vip2-checkout .upsell-modal.vip2-up.active { animation: vip2-fade .25s ease-out; }
.vip2-checkout .vip2-up .upsell-modal__backdrop { position: fixed; inset: 0; background: rgba(7,13,36,.78); }
.vip2-checkout .vip2-up__dialog { position: relative; width: min(1440px, 96vw); min-height: min(820px, 92vh); max-width: none; max-height: none; height: auto; margin: auto; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: var(--vip2-cream); box-shadow: 0 40px 90px rgba(0,0,0,.45); animation: vip2-up .3s ease-out; }
@keyframes vip2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vip2-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.vip2-up__photo { position: relative; background: var(--vip2-photo) center/cover no-repeat; min-height: 100%; }
.vip2-up__pill { position: absolute; left: 32px; top: 32px; margin: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--vip2-green); color: #fff; border-radius: 99px; padding: 10px 18px; font: 600 14px var(--vip2-body); white-space: nowrap; }
.vip2-up__pill .upsell-modal__paid-text { display: inline; }
.vip2-up__pill .upsell-modal__paid-text > * { display: inline; }   /* public.css makes them blocks */
.vip2-up__pill-amount { display: none; }
.vip2-up__mbanner { display: none; }
.vip2-up__copy { padding: 80px 88px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.vip2-up__bars { display: flex; gap: 6px; }
.vip2-up__bars span { width: 48px; height: 5px; border-radius: 3px; background: var(--vip2-line); }
.vip2-up__bars span.is-on { background: var(--vip2-navy); }
.vip2-up__eyebrow { font: 700 13px var(--vip2-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vip2-orange); margin: 0; }
.vip2-up__title { font: italic 900 clamp(34px, 4vw, 60px)/1 var(--vip2-head); color: var(--vip2-navy); margin: 0; }
.vip2-up__body { font-size: 18px; line-height: 1.55; color: var(--vip2-grey); max-width: 520px; margin: 0; }
.vip2-up__muted { color: var(--vip2-grey); font-size: 16px; }
.vip2-up__pricecard { background: #fff; border: 1px solid var(--vip2-line); border-radius: 14px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 520px; }
.vip2-up__pricecard > div:first-child { font-size: 16px; line-height: 1.4; }
.vip2-up__pricecard > div:first-child > span { display: block; }
.vip2-up__pricecard b { white-space: nowrap; }
.vip2-up__price { text-align: right; display: flex; flex-direction: column; }
.vip2-up__price s { font-size: 14px; color: var(--vip2-muted); }
.vip2-up__price b { font: italic 900 36px var(--vip2-head); color: var(--vip2-navy); }
.vip2-up__actions { display: flex; align-items: center; gap: 24px; margin-top: 8px; flex-wrap: nowrap; }
.vip2-checkout .vip2-up__btn { padding: 18px 40px; font-size: 19px; white-space: nowrap; box-shadow: none; }
.vip2-checkout .vip2-up__btn--wide { width: 100%; white-space: normal; }
.vip2-up__link { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--vip2-grey); cursor: pointer; text-align: left; white-space: nowrap; }
.vip2-up__link:hover { text-decoration: underline; }
.vip2-up__note { font-size: 13px; color: var(--vip2-muted); margin: 0; }
.vip2-up__checks { display: flex; flex-direction: column; gap: 10px; font-size: 17px; color: #3a4250; }
.vip2-up__checks li { display: flex; gap: 12px; }
.vip2-up__checks li::before { content: '✓'; color: var(--vip2-green); font-weight: 800; }
.vip2-up__bigprice { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.vip2-up__bigprice s { font-size: 18px; color: var(--vip2-muted); }
.vip2-up__bigprice b { font: italic 900 48px var(--vip2-head); color: var(--vip2-navy); }
/* Dark variant (show tickets). */
.vip2-up--dark .vip2-up__dialog { background: var(--vip2-navy); color: #fff; }
.vip2-up--dark .vip2-up__title { color: #fff; }
.vip2-up--dark .vip2-up__body, .vip2-up--dark .vip2-up__link { color: var(--vip2-on-dark); }
.vip2-up--dark .vip2-up__bars span { background: rgba(255,255,255,.2); }
.vip2-up--dark .vip2-up__bars span.is-on { background: var(--vip2-yellow); }
.vip2-up__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; }
.vip2-up__tile { position: relative; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.2); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; color: #fff; transition: box-shadow .15s ease-out, opacity .15s ease-out; }
.vip2-up__tile.is-dim { opacity: .6; }
.vip2-up__tile.is-selected { box-shadow: 0 0 0 3px var(--vip2-yellow); opacity: 1; }
.vip2-up__tile--best { background: #fff; color: var(--vip2-text); border-color: #fff; box-shadow: 0 0 0 3px var(--vip2-yellow); }
.vip2-up__tile-tag { position: absolute; top: -12px; left: 18px; background: var(--vip2-yellow); color: var(--vip2-navy); font: 800 11px var(--vip2-head); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.vip2-up__tile-title { font-size: 18px; font-weight: 700; }
.vip2-up__tile-desc { font-size: 14px; color: var(--vip2-on-dark); }
.vip2-up__tile--best .vip2-up__tile-desc { color: var(--vip2-grey); }
.vip2-up__tile-price { font: italic 900 36px var(--vip2-head); margin-top: 6px; }
.vip2-up__tile--best .vip2-up__tile-price { color: var(--vip2-navy); }
.vip2-up__tile-note { font-size: 13px; font-weight: 700; color: var(--vip2-yellow); }
.vip2-up__tile--best .vip2-up__tile-note { color: var(--vip2-green); }
.vip2-up__tile-incart { font-size: 12px; color: var(--vip2-green); }
.vip2-up__tile .vip2-up__tile-mrow { display: contents; }
@media (max-width: 1280px) {
  .vip2-checkout .vip2-up__dialog { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .vip2-up__copy { padding: 48px 44px; }
}
/* Mobile add-on layout (≤1100px, design): centred 460px card; full screen on phones. */
@media (max-width: 1100px) {
  .vip2-checkout .upsell-modal.vip2-up { padding: 24px; }
  .vip2-checkout .vip2-up__dialog { grid-template-columns: 1fr; width: min(460px, 100%); min-height: 0; border-radius: 20px; }
  .vip2-up__photo { min-height: 270px; height: 270px; }
  .vip2-up--dark .vip2-up__photo { height: 250px; min-height: 250px; }
  .vip2-up--dark .vip2-up__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--vip2-navy)); }
  .vip2-up--vacation .vip2-up__photo { height: 260px; min-height: 260px; }
  .vip2-up__pill { display: none !important; }
  .vip2-up__mbanner { display: flex; gap: 10px; align-items: center; background: var(--vip2-green); color: #fff; padding: 14px 18px; font-size: 13px; margin: 0; }
  .vip2-up__mbanner i { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--vip2-green); display: grid; place-items: center; font-weight: 800; font-style: normal; flex: none; }
  .vip2-up__bars { display: none; }
  .vip2-up__copy { padding: 22px 18px; gap: 12px; }
  .vip2-up--dark .vip2-up__copy { padding-top: 4px; }
  .vip2-up__eyebrow { font-size: 11px; }
  .vip2-up__title { font-size: 32px; line-height: 1.02; }
  .vip2-up--vacation .vip2-up__title { font-size: 30px; }
  .vip2-up__body { font-size: 15px; line-height: 1.5; }
  .vip2-up__pricecard { padding: 14px; border-radius: 12px; }
  .vip2-up__pricecard > div:first-child { font-size: 14px; }
  .vip2-up__price s { font-size: 13px; }
  .vip2-up__price b { font-size: 28px; }
  .vip2-up__checks { font-size: 14px; gap: 8px; }
  .vip2-up__bigprice s { font-size: 15px; }
  .vip2-up__bigprice b { font-size: 34px; }
  .vip2-up__tiles { grid-template-columns: 1fr; gap: 12px; max-width: none; }
  .vip2-up__tile { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title price" "desc note"; column-gap: 12px; row-gap: 2px; padding: 14px; border-radius: 14px; align-items: center; }
  .vip2-up__tile-title { grid-area: title; font-size: 16px; }
  .vip2-up__tile-desc { grid-area: desc; }
  .vip2-up__tile-price { grid-area: price; font-size: 24px; margin: 0; text-align: right; }
  .vip2-up__tile-note { grid-area: note; text-align: right; font-size: 11px; }
  .vip2-up__tile-tag { top: -11px; left: 14px; font-size: 10px; padding: 4px 8px; }
  .vip2-up__tile-incart { grid-column: 1 / -1; }
  .vip2-up__actions { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 2px; flex-wrap: wrap; }
  .vip2-up__link { white-space: normal; }
  .vip2-checkout .vip2-up__btn { width: 100%; padding: 16px; font-size: 18px; white-space: normal; }
  .vip2-up__link { text-align: center; font-size: 14px; }
  .vip2-up__note { text-align: center; font-size: 12px; order: -1; }
  .vip2-up__actions .vip2-up__note { order: 0; }
}
@media (max-width: 767.98px) {
  .vip2-checkout .upsell-modal.vip2-up { padding: 0; }
  .vip2-checkout .vip2-up__dialog { width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0; margin: 0; }
}

/* "Finishing your booking…" overlay (page mode): covers the page while the
   add-ons are charged, so the engine's review panel never shows through. */
.vip2-finish { position: fixed; inset: 0; z-index: 1300; background: rgba(7,13,36,.86); display: grid; place-items: center; color: #fff; text-align: center; padding: 24px; }
.vip2-finish[hidden] { display: none; }
.vip2-finish__spin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: var(--vip2-yellow); margin: 0 auto 18px; animation: vip2-spin .8s linear infinite; }
.vip2-finish__title { font: italic 900 32px/1.05 var(--vip2-head); color: #fff; margin: 0 0 8px; }
.vip2-finish__text { font-size: 15px; color: var(--vip2-on-dark); margin: 0; }
@keyframes vip2-spin { to { transform: rotate(360deg); } }

/* Review & pay sheet. */
.vip2-checkout .upsell-modal.vip2-up--sheet { align-items: center; justify-content: center; padding: 16px; }
.vip2-checkout .vip2-up__sheet { position: relative; width: 100%; max-width: 520px; min-height: 0; height: auto; max-height: calc(100vh - 32px); overflow: auto; margin: 0; background: #fff; border-radius: 22px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 80px rgba(0,0,0,.4); }
.vip2-up__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--vip2-cream); color: var(--vip2-navy); font-size: 22px; display: grid; place-items: center; cursor: pointer; }
.vip2-up__close img { display: none; }
.vip2-up__paidline { display: flex; gap: 8px; align-items: flex-start; margin: 0; background: var(--vip2-green-tint-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--vip2-green); }
.vip2-up__sheet-title { font: italic 900 30px var(--vip2-head); color: var(--vip2-navy); margin: 0; }
.vip2-up__list { list-style: none; margin: 0; padding: 0; }
.vip2-up__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vip2-divider); font-size: 15px; }
.vip2-up__due { display: flex; justify-content: space-between; font-weight: 800; font-size: 20px; padding-top: 6px; }
.vip2-up__sheet-links { text-align: center; }

/* Exit-intent hold popup. */
.vip2-checkout .upsell-modal.vip2-up--hold { align-items: center; justify-content: center; padding: 16px; }
.vip2-hold { position: relative; width: 100%; max-width: 820px; background: #fff; border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 340px 1fr; box-shadow: 0 40px 80px rgba(0,0,0,.5); animation: vip2-up .3s ease-out; }
.vip2-hold__photo { background: #222 center/cover no-repeat; }
.vip2-hold__copy { position: relative; padding: 44px 40px 36px; display: flex; flex-direction: column; gap: 14px; }
.vip2-hold__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: none; font-size: 22px; color: var(--vip2-muted); cursor: pointer; display: grid; place-items: center; }
.vip2-hold__eyebrow { font: 700 12px var(--vip2-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vip2-orange); margin: 0; }
.vip2-hold__title { font: italic 900 38px/1.02 var(--vip2-head); color: var(--vip2-navy); margin: 0; }
.vip2-hold__text { font-size: 16px; line-height: 1.5; color: var(--vip2-grey); margin: 0; }
.vip2-hold__form { display: flex; flex-direction: column; gap: 12px; }
.vip2-hold__error { color: var(--vip2-orange); font-size: 13px; font-weight: 600; margin: 0; }
.vip2-checkout .vip2-hold__submit { padding: 16px; font-size: 18px; box-shadow: none; }
.vip2-hold__no { align-self: center; font-size: 14px; }
.vip2-hold__done { color: var(--vip2-green); font-weight: 700; font-size: 14px; margin: 0; }
@media (max-width: 767.98px) {
  .vip2-hold { grid-template-columns: 1fr; max-width: 420px; }
  .vip2-hold__photo { display: none; }
  .vip2-hold__copy { padding: 36px 20px 24px; gap: 12px; }
  .vip2-hold__title { font-size: 28px; }
  .vip2-hold__text { font-size: 14px; }
  .vip2-checkout .vip2-hold__submit { font-size: 17px; }
  .vip2-hold__no { font-size: 13px; }
}

/* ==========================================================================
   Confirmation page
   ========================================================================== */
.vip2-confirm { background: var(--vip2-cream); min-height: 100vh; }
.vip2-confirm__hero { position: relative; background: var(--vip2-navy) center/cover no-repeat; color: #fff; padding: 40px 18px 28px; text-align: center; }
.vip2-confirm__shade { position: absolute; inset: 0; background: rgba(11,20,51,.82); }
.vip2-confirm__hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vip2-confirm__check { width: 56px; height: 56px; border-radius: 50%; background: var(--vip2-yellow); color: var(--vip2-navy); display: grid; place-items: center; font-size: 26px; font-weight: 800; flex: none; }
.vip2-confirm__title { font: italic 900 32px/1.02 var(--vip2-head); color: #fff; margin: 0; }
.vip2-confirm__sub { font-size: 14px; color: var(--vip2-on-dark); margin: 0; }
.vip2-confirm__main { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.vip2-confirm__order { background: #fff; border: 1px solid var(--vip2-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; order: -1; }
.vip2-confirm__order h3 { display: none; }
.vip2-confirm__row { display: flex; justify-content: space-between; gap: 12px; }
.vip2-confirm__row--muted { color: var(--vip2-grey); }
.vip2-confirm__total { display: flex; justify-content: space-between; border-top: 1px solid var(--vip2-divider); padding-top: 6px; font-weight: 700; }
.vip2-confirm__statement { font-size: 13px; color: var(--vip2-muted); display: none; }
.vip2-confirm__next { display: flex; flex-direction: column; gap: 12px; }
.vip2-confirm__h2 { font: 800 16px var(--vip2-head); color: var(--vip2-navy); margin: 0; }
.vip2-confirm__steps { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.4; }
.vip2-confirm__step { display: flex; gap: 12px; align-items: flex-start; }
.vip2-confirm__num { width: 26px; height: 26px; border-radius: 50%; background: var(--vip2-navy); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.vip2-confirm__step b { display: none; }
.vip2-confirm__step p { margin: 0; }
.vip2-confirm__step .vip2-confirm__mtext { display: inline; }
.vip2-confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 2px; }
.vip2-confirm__pill { border: 1.5px solid var(--vip2-navy); border-radius: 99px; padding: 13px; text-align: center; font: 700 14px var(--vip2-head); color: var(--vip2-navy) !important; background: none; cursor: pointer; }
.vip2-confirm__itin { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--vip2-grey); }
.vip2-confirm__itin a { font-weight: 700; text-decoration: underline; color: var(--vip2-navy); }
@media (min-width: 768px) and (max-width: 1023.98px) { .vip2-confirm__main { max-width: 640px; margin: 0 auto; width: 100%; } }
@media (min-width: 1024px) {
  .vip2-confirm__hero { padding: 72px var(--vip2-gx); text-align: left; }
  .vip2-confirm__hero-inner { flex-direction: row; align-items: center; gap: 28px; max-width: var(--vip2-max); margin: 0 auto; }
  .vip2-confirm__check { width: 84px; height: 84px; font-size: 38px; }
  .vip2-confirm__title { font-size: 64px; line-height: 1; }
  .vip2-confirm__sub { font-size: 18px; margin-top: 10px; }
  .vip2-confirm__main { max-width: var(--vip2-max); margin: 0 auto; padding: 56px var(--vip2-gx) 72px; display: grid; grid-template-columns: 1fr 480px; gap: 48px; align-items: start; }
  .vip2-confirm__order { order: 0; border-radius: 18px; padding: 24px; gap: 10px; font-size: 15px; }
  .vip2-confirm__order h3 { display: block; font: 800 18px var(--vip2-head); color: var(--vip2-navy); margin: 0 0 4px; }
  .vip2-confirm__total { padding-top: 10px; font: 800 20px var(--vip2-head); color: var(--vip2-navy); }
  .vip2-confirm__statement { display: block; }
  .vip2-confirm__next { gap: 24px; }
  .vip2-confirm__h2 { font-size: 26px; }
  .vip2-confirm__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .vip2-confirm__step { background: #fff; border: 1px solid var(--vip2-line); border-radius: 16px; padding: 24px; flex-direction: column; gap: 10px; }
  .vip2-confirm__num { width: auto; height: auto; background: none; color: var(--vip2-yellow); font: italic 900 40px var(--vip2-head); display: block; }
  .vip2-confirm__step b { display: block; font-size: 17px; }
  .vip2-confirm__step p { font-size: 15px; line-height: 1.5; color: var(--vip2-grey); }
  .vip2-confirm__step .vip2-confirm__mtext { display: none; }
  .vip2-confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .vip2-confirm__pill { padding: 14px 28px; font-size: 15px; }
  .vip2-confirm__itin { width: 100%; text-align: left; font-size: 14px; }
}