/* =========================================================
   Cabo Booking System — booking widget
   Tokens from the Cancun Shuttle Services design handoff.
   Tokens fall back to `--wp--preset--*` vars when the theme
   ships; until then the values below are the source of truth.
   ========================================================= */

.cbs-wrap.cbs-v{
  --primary:       var(--wp--preset--color--primary,       #0B3C5D);
  --primary-700:   var(--wp--preset--color--primary-700,   #0E4E78);
  --primary-900:   var(--wp--preset--color--primary-900,   #072638);
  --secondary:     var(--wp--preset--color--secondary,     #00AEEF);
  --cta:           var(--wp--preset--color--cta,           #FF6B4A);
  --cta-hover:     var(--wp--preset--color--cta-hover,     #E85A3D);
  --cta-press:     var(--wp--preset--color--cta-press,     #CC4E33);
  --sand:          var(--wp--preset--color--sand,          #F4EDE4);
  --sand-deep:     var(--wp--preset--color--sand-deep,     #EADFCF);
  --ink:           var(--wp--preset--color--ink,           #0E1A24);
  --gray:          var(--wp--preset--color--gray,          #6B7280);
  --gray-2:        var(--wp--preset--color--gray-2,        #9AA3AD);
  --line:          var(--wp--preset--color--line,          #E7DFD2);

  --font-head:     var(--wp--preset--font-family--head, "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif);
  --font-body:     var(--wp--preset--font-family--body, "Inter", "Open Sans", system-ui, -apple-system, sans-serif);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm:  0 1px 2px rgba(11,60,93,.06), 0 1px 3px rgba(11,60,93,.04);
  --shadow-md:  0 4px 14px rgba(11,60,93,.08), 0 2px 6px rgba(11,60,93,.05);
  --shadow-lg:  0 20px 48px rgba(11,60,93,.14), 0 8px 16px rgba(11,60,93,.08);
  --shadow-cta: 0 10px 24px rgba(255,107,74,.28), 0 2px 6px rgba(255,107,74,.18);

  max-width:560px;
  margin:18px auto;
  padding:0;
  border:0;
  background:transparent;
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.55;
}

/* HERO */
.booking-hero{padding:4px 4px 14px}
.booking-title{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--primary);
  font-size:22px;
  letter-spacing:-0.01em;
  margin:0 0 4px;
}
.booking-sub{
  font-size:13px;
  color:var(--gray);
  margin:0 0 14px;
}

/* TABS */
.booking-tabs{
  display:flex;
  gap:6px;
  background:var(--sand);
  padding:4px;
  border-radius:10px;
  margin-bottom:14px;
}
.booking-tab{
  all:unset;
  flex:1;
  text-align:center;
  padding:10px 14px;
  border-radius:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s;
}
.booking-tab.is-active{
  background:#fff;
  color:var(--primary);
  box-shadow:0 1px 4px rgba(11,60,93,.08);
}
.booking-tab .chip{
  background:transparent;
  color:var(--cta);
  font-size:11px;
  font-weight:700;
  padding:0;
  border-radius:0;
  line-height:1.1;
}
.booking-tab.is-active .chip{color:var(--cta)}
.booking-tab[disabled],.booking-tab[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* CARD */
.booking-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;
  gap:14px;
  box-shadow:var(--shadow-lg);
  color:var(--ink);
}
.booking-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.booking-row .cbs-return[data-hidden="1"]{display:none}
.cbs-return-locked{opacity:.55;pointer-events:none;position:relative}
.cbs-return-locked input.cbs-datetime{
  background-image:none!important;
  color:var(--gray)!important;
  font-style:italic;
  cursor:not-allowed!important;
}
.cbs-return-locked input.cbs-datetime::placeholder{color:var(--gray);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-style:normal;font-size:12px}
.cbs-return-locked .h-combo-caret{display:none}

/* FIELDS */
.booking-field{display:grid;gap:6px;position:relative}
.booking-field>label{
  font-family:var(--font-head);
  font-size:12px;
  font-weight:600;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 0 2px;
}
.booking-field input,
.booking-field select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.3;
  color:var(--ink);
  background:var(--sand);
  outline:none;
  box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.booking-field input:focus,
.booking-field select:focus{
  border-color:var(--secondary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,174,239,.15);
}

/* DIRECTION ROW */
.booking-direction{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;transition:opacity .15s}
.booking-direction[data-swapping="1"]{opacity:.55}
.h-dir-kicker{
  font-family:var(--font-head);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--cta);
  font-weight:700;
  margin:0 0 2px 2px;
}

.v-swap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);
  color:var(--primary);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  z-index:2;
  box-shadow:0 2px 6px rgba(10,42,67,.08);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.5, 1.6, .4, 1), background .15s, border-color .15s, color .15s;
}
.v-swap:hover{background:var(--sand);border-color:var(--secondary);color:var(--secondary);transform:translate(-50%,-50%) rotate(180deg)}
.v-swap:active{transform:translate(-50%,-50%) rotate(180deg) scale(.93)}
.v-swap svg{display:block}

.booking-field.is-prefilled select,
.booking-field.is-prefilled input{color:var(--primary);font-weight:700}
.h-dir-kicker.is-prefilled::after{content:" · pre-filled";opacity:.8}

/* PAX STEPPER */
.pax-stepper{
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:6px 12px;
}
.pax-btn{
  all:unset;
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);
  color:var(--primary);
  font-size:18px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s, transform .1s;
}
.pax-btn:hover:not([disabled]){border-color:var(--primary)}
.pax-btn:active:not([disabled]){transform:scale(.94)}
.pax-btn[disabled]{opacity:.4;cursor:not-allowed}
.pax-val{text-align:center;font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--primary)}
.pax-val .pax-count{font-size:18px;font-weight:700}
.pax-val .pax-label{color:var(--gray);font-weight:500;margin-left:4px;font-family:var(--font-body)}
.pax-hint{grid-column:1/-1;text-align:center;color:var(--gray);font-size:11px;margin-top:-2px}

.booking-divider{height:1px;background:var(--line);margin:2px 0}

/* AMENITIES */
.cbs-amenities{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fafafa}
.cbs-amenities-title{font-family:var(--font-head);font-size:13px;color:var(--primary);margin:0 0 8px 0;font-weight:600}
.cbs-amenities-item{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:10px;touch-action:manipulation}
.cbs-amenities-item:hover{background:#fff}
.cbs-amenities-item input[type=checkbox]{width:22px;height:22px;margin-top:1px;flex-shrink:0;accent-color:var(--primary)}
.cbs-amenities-meta{flex:1}
.cbs-amenities-name{font-family:var(--font-head);font-size:14px;font-weight:600;color:var(--ink)}
.cbs-amenities-desc{font-size:12px;color:var(--gray);margin-top:2px}
.cbs-amenities-price{font-family:var(--font-head);font-size:13px;color:var(--primary);font-weight:600}

/* QUOTE */
.cbs-quote{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff}
.cbs-price{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.cbs-price strong{font-family:var(--font-head);color:var(--primary)}
.cbs-total{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px;font-size:16px}
.cbs-note{font-size:12px;color:var(--gray);margin-top:10px;line-height:1.35}

/* SUBMIT */
.booking-submit{
  all:unset;
  background:var(--cta);
  color:#fff;
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:.3px;
  font-size:16px;
  padding:16px 22px;
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:52px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:var(--shadow-cta);
}
.booking-submit:hover:not([disabled]){background:var(--cta-hover);transform:translateY(-1px)}
.booking-submit:active:not([disabled]){background:var(--cta-press);transform:translateY(0)}
.booking-submit[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.booking-submit .arrow{margin-left:6px;display:inline-block;transition:transform .15s}
.booking-submit:hover:not([disabled]) .arrow{transform:translateX(3px)}

/* TRUST MICROCOPY */
.booking-footnote{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;
  font-family:var(--font-body);font-size:12px;color:var(--gray);
}
.booking-footnote li{margin:0;display:inline-flex;align-items:center;gap:6px}

/* MSG */
.cbs-msg{font-size:13px;color:var(--gray);padding:4px 0;min-height:1em}
.cbs-msg.is-error{color:var(--cta-press)}

/* PAYMENT (reuses tokens) */
.cbs-payment{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cbs-payment-title{font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--primary);margin:0 0 10px}
.cbs-mp-summary{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.cbs-mp-total{font-family:var(--font-head);font-weight:700;color:var(--primary)}
.cbs-mp-box,.cbs-mp-iframe{display:block;width:100%;min-height:44px;border:1.5px solid transparent;border-radius:var(--radius);background:var(--sand);overflow:hidden}
.cbs-mp-box iframe,.cbs-mp-iframe iframe{width:100%;height:44px;border:0}
.cbs-mp-form{display:grid;gap:10px}
.cbs-progress,.cbs-mp-progress{width:100%;height:10px}
.cbs-hidden{display:none!important}
.cbs-3ds{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fafafa}
.cbs-3ds-title{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--primary);margin:0 0 8px 0}
.cbs-3ds-iframe{width:100%;height:min(520px,70vh);border:0;border-radius:var(--radius);background:#fff}
.cbs-square-applepay,.cbs-square-googlepay{margin-top:8px}
/* Hide the express-checkout containers when Square couldn't mount them
   (no HTTPS, missing domain verification, browser without Apple/Google
   Pay support). Avoids two empty boxes that look like dead 'Pay' buttons
   floating under the card field. */
.cbs-square-applepay:empty,.cbs-square-googlepay:empty{display:none}

.cbs-btn{
  all:unset;
  background:var(--cta);color:#fff;
  font-family:var(--font-head);font-weight:600;letter-spacing:.3px;
  font-size:16px;padding:14px 18px;border-radius:12px;
  text-align:center;cursor:pointer;display:block;width:100%;
  box-sizing:border-box;min-height:48px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  box-shadow:var(--shadow-cta);
  transition:background .2s, transform .15s;
}
.cbs-btn:hover:not(:disabled){background:var(--cta-hover);transform:translateY(-1px)}
.cbs-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}

/* FLATPICKR — time slots panel injected below the calendar */
.flatpickr-calendar.has-time .flatpickr-time{display:none!important}
.cbs-time-slots{
  border-top:1px solid var(--line, #E7DFD2);
  padding:10px 12px 12px;
  background:#fff;
  font-family:var(--font-body, system-ui), sans-serif;
}
.cbs-time-slots-head{
  font-family:var(--font-head, system-ui), sans-serif;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--primary, #0B3C5D);
  margin:0 0 8px;
}
.cbs-time-slots-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  max-height:170px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
}
.cbs-slot{
  all:unset;
  padding:8px 4px;
  border:1px solid var(--line, #E7DFD2);
  border-radius:8px;
  font-size:12.5px;font-weight:500;
  color:var(--ink, #0E1A24);
  text-align:center;
  cursor:pointer;
  background:#fff;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, border-color .12s, color .12s, transform .1s;
}
.cbs-slot:hover{background:var(--sand, #F4EDE4);border-color:var(--primary, #0B3C5D)}
.cbs-slot:active{transform:scale(.97)}
.cbs-slot.is-active{
  background:var(--primary, #0B3C5D);
  color:#fff;
  border-color:var(--primary, #0B3C5D);
}
.cbs-time-slots-foot{
  display:flex;justify-content:flex-end;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line, #E7DFD2);
}
.cbs-slot-done{
  all:unset;
  background:var(--primary, #0B3C5D);
  color:#fff;
  font-family:var(--font-head, system-ui), sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.3px;
  padding:8px 18px;border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .15s, transform .1s;
  box-shadow:0 2px 8px rgba(11,60,93,.18);
}
.cbs-slot-done:hover{background:var(--primary-700, #0E4E78)}
.cbs-slot-done:active{transform:scale(.97)}
@media (max-width:480px){
  .cbs-time-slots-grid{grid-template-columns:repeat(3, 1fr);max-height:200px}
  .cbs-time-slots-foot{justify-content:stretch}
  .cbs-slot-done{flex:1;text-align:center;padding:12px 18px}
}

/* FLATPICKR */
.cbs-datetime{
  cursor:pointer;
  background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230B3C5D'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size:18px;
  padding-right:36px!important;
  padding-left:36px!important;
  text-align:center!important;
}
.cbs-wrap .flatpickr-input{background-color:var(--sand)}
.cbs-wrap .flatpickr-input.active{border-color:var(--secondary);background:#fff}

/* VALIDATION */
.booking-field input.cbs-error,.booking-field select.cbs-error{border-color:var(--cta-press);background:#fef2f2}
.booking-field input.cbs-error:focus,.booking-field select.cbs-error:focus{border-color:var(--cta-press);box-shadow:0 0 0 2px rgba(204,78,51,.1)}
.booking-field input.cbs-valid,.booking-field select.cbs-valid{border-color:#16a34a}

/* LOADING */
.cbs-loading{position:relative;pointer-events:none;opacity:.7}
.cbs-loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:cbs-spin .6s linear infinite}
@keyframes cbs-spin{to{transform:rotate(360deg)}}

/* RATE LIMIT */
.cbs-rate-limit{background:#fef3c7;border:1px solid #f59e0b;color:#92400e;padding:12px;border-radius:var(--radius);font-size:13px;margin-bottom:12px}

/* MOBILE */
@media(max-width:560px){
  .cbs-wrap.cbs-v{margin:12px}
  .booking-card{border-radius:var(--radius-lg);padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .booking-row{grid-template-columns:1fr}
  .booking-direction{grid-template-columns:1fr;gap:18px}
  .booking-direction .v-swap{position:relative;left:auto;top:auto;transform:none;margin:0 auto;display:flex}
  .booking-direction[data-swapping="1"] .v-swap{transform:rotate(180deg)}
  .flatpickr-calendar{font-size:13px}
}

/* =========================================================
   HORIZONTAL VARIANT — airbnb-style pill
   ========================================================= */
.cbs-wrap.cbs-h{
  --primary:       var(--wp--preset--color--primary,       #0B3C5D);
  --primary-700:   var(--wp--preset--color--primary-700,   #0E4E78);
  --secondary:     var(--wp--preset--color--secondary,     #00AEEF);
  --cta:           var(--wp--preset--color--cta,           #FF6B4A);
  --cta-hover:     var(--wp--preset--color--cta-hover,     #E85A3D);
  --cta-press:     var(--wp--preset--color--cta-press,     #CC4E33);
  --sand:          var(--wp--preset--color--sand,          #F4EDE4);
  --ink:           var(--wp--preset--color--ink,           #0E1A24);
  --gray:          var(--wp--preset--color--gray,          #6B7280);
  --gray-2:        var(--wp--preset--color--gray-2,        #9AA3AD);
  --line:          var(--wp--preset--color--line,          #E7DFD2);
  --font-head:     var(--wp--preset--font-family--head, "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif);
  --font-body:     var(--wp--preset--font-family--body, "Inter", "Open Sans", system-ui, -apple-system, sans-serif);
  --shadow-lg:     0 20px 48px rgba(11,60,93,.14), 0 8px 16px rgba(11,60,93,.08);
  --shadow-cta:    0 10px 24px rgba(255,107,74,.28), 0 2px 6px rgba(255,107,74,.18);

  max-width:1280px;
  margin:18px auto;
  font-family:var(--font-body);
  color:var(--ink);
}
.booking-h{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.booking-h-tabs{
  display:inline-flex;gap:4px;
  background:#fff;
  border:1px solid var(--line);
  padding:4px;border-radius:999px;
  margin:0 auto;
  box-shadow:0 2px 8px rgba(11,60,93,.10);
}
.cbs-h .booking-h-tabs .booking-tab{flex:0 0 auto;justify-content:center}
.cbs-h .booking-tab{
  all:unset;
  border-radius:999px;
  padding:8px 18px;
  font-family:var(--font-head);font-weight:600;font-size:14px;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s;
}
.cbs-h .booking-tab:hover{background:var(--sand)}
.cbs-h .booking-tab.is-active{background:var(--primary);color:#fff}
.cbs-h .booking-tab.is-active .discount{color:#FFCDB8}
.cbs-h .booking-tab .discount{color:var(--cta);font-size:11px;font-weight:700;letter-spacing:.05em}

.booking-h-pill{
  background:#fff;
  border-radius:999px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  display:flex;align-items:stretch;
  padding:8px;
  min-height:78px;
  width:100%;
  transition:opacity .15s;
}
.booking-h-pill[data-swapping="1"]{opacity:.7}
.booking-h-pill .booking-h-fields{
  display:flex;align-items:stretch;
  gap:0;flex:1;min-width:0;
}

.h-field{
  flex:1;min-width:0;position:relative;
  padding:10px 16px;cursor:pointer;
  border-radius:999px;
  display:flex;flex-direction:column;justify-content:center;
  transition:background .15s;
}
.h-field-wide{flex:1.25}
.h-field-pax{flex:.95}
.h-field:hover{background:var(--sand)}
.h-field:focus-within{background:var(--sand)}
.h-field>label{
  display:flex;align-items:center;gap:4px;
  font-family:var(--font-head);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--primary);
  margin-bottom:3px;
}
.h-field-label{color:var(--primary)}
.h-field select,
.h-field input,
.h-pax-trigger{
  width:100%;border:none;background:transparent;
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  padding:0;-webkit-appearance:none;appearance:none;
  outline:none;font-weight:500;
}
.h-field select{cursor:pointer}
.h-field input::placeholder{color:var(--gray-2)}
.h-pax-trigger{text-align:left;cursor:pointer;display:flex;align-items:center;gap:6px}
.h-pax-trigger .h-pax-label{color:var(--gray)}

.h-field input.cbs-datetime{
  background:transparent;
  /* Override the global .cbs-datetime icon-padding/centering so the date
     value uses every pixel of the narrow pill field without truncating. */
  padding-right:0!important;
  padding-left:0!important;
  text-align:left!important;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.cbs-h .cbs-datetime{background-image:none}

.h-divider{
  width:1px;background:var(--line);
  margin:14px 0;flex-shrink:0;
}

/* Swap button — sits between Pickup and Drop-off */
.h-swap{
  flex-shrink:0;align-self:center;
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);
  color:var(--primary);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 -10px;
  position:relative;z-index:2;
  box-shadow:0 2px 6px rgba(10,42,67,.08);
  transition:transform .35s cubic-bezier(.5, 1.6, .4, 1), background .15s, border-color .15s, color .15s;
}
.h-swap:hover{background:var(--sand);border-color:var(--secondary);color:var(--secondary);transform:rotate(180deg)}
.h-swap:active{transform:rotate(180deg) scale(.93)}
.booking-h-pill[data-swapping="1"] .h-swap{transform:rotate(180deg);background:var(--secondary);color:#fff;border-color:var(--secondary)}
.h-swap svg{display:block}

/* Custom combobox (Pickup / Drop-off) — click anywhere on the field opens
   a search-enabled popover. The hidden <select> persists the value so the
   rest of booking.js still reads .value uniformly. */
.h-field.h-combo{padding:0}
.h-combo-trigger{
  all:unset;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  /* box-sizing must be border-box or width:100% + padding overflows the
     parent .h-field and the chevron renders outside the rounded border. */
  box-sizing:border-box;
  width:100%;height:100%;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.h-combo-stack{display:flex;flex-direction:column;min-width:0;flex:1}
.h-combo-label{
  font-family:var(--font-head);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--primary);
  margin-bottom:3px;
  display:flex;align-items:center;gap:4px;
}
.h-combo-display{
  font-family:var(--font-body);
  font-size:14px;font-weight:500;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.h-combo-display[data-empty="true"]{color:var(--gray-2);font-weight:400}
.h-combo-caret{flex-shrink:0;color:var(--gray);transition:transform .2s ease, color .15s}

/* Single source of truth for caret rotation across every trigger:
   combobox button (aria-expanded), pax trigger button (aria-expanded),
   and Flatpickr-controlled date fields (.is-open). */
.h-combo-trigger[aria-expanded="true"] .h-combo-caret,
.h-pax-trigger[aria-expanded="true"]   .h-combo-caret,
.h-field-date.is-open                  .h-combo-caret{
  transform:rotate(180deg);
  color:var(--primary);
}
.h-combo-trigger:hover .h-combo-caret,
.h-pax-trigger:hover   .h-combo-caret,
.h-field-date:hover    .h-combo-caret{color:var(--primary)}

.h-combo-popover{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:8px;z-index:30;
  min-width:280px;
  display:flex;flex-direction:column;gap:6px;
  max-height:340px;
}
.h-combo-popover[hidden]{display:none}
.h-combo-search{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:var(--font-body);font-size:14px;
  background:var(--sand);color:var(--ink);
  outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s, background .15s;
}
.h-combo-search:focus{border-color:var(--secondary);background:#fff}
.h-combo-list{
  list-style:none;margin:0;padding:0;
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling:touch;
}
.h-combo-list li{
  padding:10px 12px;
  border-radius:8px;
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  transition:background .12s;
}
.h-combo-list li:hover,
.h-combo-list li[aria-selected="true"]{background:var(--sand)}
.h-combo-list li.is-active{background:var(--primary);color:#fff}
.h-combo-list li mark{background:transparent;color:var(--cta);font-weight:700}
.h-combo-empty{
  padding:14px 12px;text-align:center;
  font-family:var(--font-body);font-size:13px;color:var(--gray);
}

/* Date field — entire field clickable, opens Flatpickr.
   Same visual stack as combobox: small label on top, value below. */
.h-field.h-field-date{
  cursor:pointer;
  position:relative;
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.h-field-date .h-field-label-row{
  font-family:var(--font-head);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--primary);
  position:absolute;top:8px;left:18px;
  pointer-events:none;
}
.h-field-date input.cbs-datetime{
  flex:1;min-width:0;
  border:none;background:transparent;
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  padding:14px 0 0 0;margin:0;
  -webkit-appearance:none;appearance:none;
  outline:none;
  cursor:pointer;
  background-image:none!important;
}
.h-field-date input.cbs-datetime::placeholder{color:var(--gray-2)}
/* (.h-combo-caret base + .h-field-date.is-open rotation handled by the
    shared rule near the top of this file.) */

/* Pax field — trigger button fills the segment, label + display stacked.
   Mirrors the combobox pattern so click anywhere on the field opens the
   popover (no search input on this one). Caret rotation is handled by the
   shared rule on .h-combo-caret. */
.h-field.h-pax{padding:0}
.h-field.h-pax .h-pax-trigger{
  all:unset;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-sizing:border-box;
  width:100%;height:100%;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-body);
  color:var(--ink);
}

/* Pax popover */
.h-pax-popover{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:12px;z-index:30;
  min-width:220px;
}
.h-pax-popover[hidden]{display:none}
.pax-stepper-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pax-stepper-h .pax-btn{
  all:unset;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);
  color:var(--primary);
  font-size:18px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
}
.pax-stepper-h .pax-btn:hover:not([disabled]){border-color:var(--primary)}
.pax-stepper-h .pax-btn[disabled]{opacity:.4;cursor:not-allowed}
.pax-stepper-h .pax-val{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--primary)}

/* Search submit (the round button at the right of the pill) */
.h-submit{
  all:unset;
  flex-shrink:0;align-self:center;margin-left:6px;
  height:56px;
  background:var(--cta);color:#fff;
  font-family:var(--font-head);font-weight:600;letter-spacing:.3px;
  border-radius:999px;
  padding:0 22px;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:var(--shadow-cta);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.h-submit:hover:not([disabled]){background:var(--cta-hover);transform:translateY(-1px)}
.h-submit:active:not([disabled]){background:var(--cta-press);transform:translateY(0)}
.h-submit[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.h-submit-label{font-size:14px}

/* Trust footer */
.cbs-h .booking-footnote{margin-top:14px}

/* Card under the pill (contact + amenities + quote + payment) */
.cbs-h .booking-card.cbs-h-rest{
  margin-top:18px;
  max-width:780px;margin-left:auto;margin-right:auto;
}

/* MOBILE — stack the pill */
@media(max-width:880px){
  .cbs-wrap.cbs-h{margin:12px}
  .booking-h-pill{
    border-radius:18px;
    flex-direction:column;
    padding:10px;
    gap:6px;
    min-height:0;
  }
  .booking-h-pill .booking-h-fields{
    flex-direction:column;
    gap:6px;min-height:0;
  }
  .h-field{
    padding:10px 12px;
    border-radius:12px;
    background:var(--sand);
  }
  .h-field:hover,.h-field:focus-within{background:#fff}
  .h-divider{display:none}
  .h-swap{
    width:34px;height:34px;
    margin:-2px auto;
    transform:rotate(90deg);
  }
  .h-swap:hover{transform:rotate(270deg)}
  .booking-h-pill[data-swapping="1"] .h-swap{transform:rotate(270deg)}
  .h-pax-popover{position:static;box-shadow:none;border:0;background:transparent;padding:8px 0 0;min-width:0}
  .h-submit{width:100%;height:52px;justify-content:center;border-radius:14px;margin-left:0;margin-top:4px}
  .cbs-h .booking-card.cbs-h-rest{padding:18px}
}

/* =========================================================
   STEP 2 — Detail capture screen on a separate page
   ========================================================= */
.cbs-wrap.cbs-step2{
  --primary:       var(--wp--preset--color--primary,       #0B3C5D);
  --primary-700:   var(--wp--preset--color--primary-700,   #0E4E78);
  --secondary:     var(--wp--preset--color--secondary,     #00AEEF);
  --cta:           var(--wp--preset--color--cta,           #FF6B4A);
  --cta-hover:     var(--wp--preset--color--cta-hover,     #E85A3D);
  --sand:          var(--wp--preset--color--sand,          #F4EDE4);
  --sand-deep:     var(--wp--preset--color--sand-deep,     #EADFCF);
  --ink:           var(--wp--preset--color--ink,           #0E1A24);
  --gray:          var(--wp--preset--color--gray,          #6B7280);
  --line:          var(--wp--preset--color--line,          #E7DFD2);
  --font-head:     var(--wp--preset--font-family--head, "Poppins", "Montserrat", system-ui, sans-serif);
  --font-body:     var(--wp--preset--font-family--body, "Inter", "Open Sans", system-ui, sans-serif);
  --shadow-lg:     0 20px 48px rgba(11,60,93,.14), 0 8px 16px rgba(11,60,93,.08);
  --shadow-cta:    0 10px 24px rgba(255,107,74,.28), 0 2px 6px rgba(255,107,74,.18);
  --radius:        10px;
  --radius-lg:     16px;
  max-width:1180px;margin:24px auto;padding:0 20px;
  font-family:var(--font-body);color:var(--ink);
}
.step2-grid{
  display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start;
}
@media(max-width:900px){.step2-grid{grid-template-columns:1fr}}

/* Single-card form — Stripe/Booking/Airbnb pattern. The whole left
   column lives on one white card with internal section dividers, instead
   of every section being its own card. */
.step2-main{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.step2-stepper{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:13px;font-weight:600;
  color:var(--gray);
  padding:18px 22px 0;
  margin:0;
}
.step2-step{display:inline-flex;align-items:center;gap:6px}
.step2-step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--sand);color:var(--gray);
  font-size:12px;font-weight:700;
}
.step2-step.done{color:var(--primary)}
.step2-step.done .n{background:var(--primary);color:#fff}
.step2-step.active{color:var(--primary)}
.step2-step.active .n{background:var(--cta);color:#fff}
.step2-step-line{flex:0 0 24px;height:2px;background:var(--line)}

.step2-section{
  background:transparent;
  border:0;border-radius:0;
  padding:22px;
  display:grid;gap:12px;
  box-shadow:none;
}
.step2-section + .step2-section{
  border-top:1px solid var(--line);
}
.step2-section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.step2-section-head h2{
  font-family:var(--font-head);
  font-size:16px;font-weight:700;color:var(--primary);
  margin:0;letter-spacing:-.01em;
}
.step2-required,.step2-optional{
  font-family:var(--font-head);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;
}
.step2-required{background:var(--cta);color:#fff}
.step2-optional{background:var(--sand);color:var(--gray)}
.step2-edit-trip{
  font-family:var(--font-head);font-size:13px;font-weight:600;
  color:var(--secondary);text-decoration:none;
}
.step2-edit-trip:hover{text-decoration:underline}
.step2-hint{
  font-size:13px;color:var(--gray);
  background:rgba(0,174,239,.06);border-left:3px solid var(--secondary);
  padding:10px 12px;border-radius:8px;margin:0;
}

.step2-trip-card{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;
}
@media(max-width:480px){.step2-trip-card{grid-template-columns:1fr}}
.step2-trip-row{display:flex;flex-direction:column;gap:2px}
.step2-trip-label{
  font-family:var(--font-head);font-size:11px;font-weight:600;
  color:var(--gray);text-transform:uppercase;letter-spacing:.05em;
}
.step2-trip-val{font-size:14px;font-weight:600;color:var(--ink)}

.cbs-step2 .booking-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.cbs-step2 .booking-row{grid-template-columns:1fr}}

/* Step 2 reuses the horizontal pill's combobox + date markup but the
   layout is a grid, not a flex pill — override the pill-specific border
   radius and remove the flex sizing that doesn't apply in a grid. */
.cbs-step2 .h-field.step2-combo,
.cbs-step2 .h-field.step2-date{
  flex:none;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--sand);
  min-height:62px;
  padding:0;
}
.cbs-step2 .h-field.step2-combo:hover,
.cbs-step2 .h-field.step2-date:hover{background:#fff;border-color:var(--gray-2)}
.cbs-step2 .h-field.step2-combo:focus-within,
.cbs-step2 .h-field.step2-date:focus-within,
.cbs-step2 .h-field.step2-date.is-open{
  background:#fff;
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(0,174,239,.15);
}
.cbs-step2 .step2-combo .h-combo-trigger{padding:12px 14px;border-radius:10px}

/* Step 2 date field: column layout (label on top, input below) with the
   chevron pinned absolutely to the right edge. Mirrors the main pill so
   both surfaces read the same and the value can't crash into the label. */
.cbs-step2 .step2-date{
  padding: 8px 34px 8px 16px !important;     /* room for the right caret */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative !important;
}
.cbs-step2 .step2-date .h-field-label-row{
  position: static !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--gray) !important;
  margin-bottom: 4px;
}
.cbs-step2 .step2-date input.cbs-datetime{
  padding: 0 !important;
  font-weight: 500;
  background-image: none !important;
  text-align: left;
}
.cbs-step2 .step2-date > .h-combo-caret{
  position: absolute;
  right: 14px;
  top: 0; bottom: 0;
  margin: auto 0;
  align-self: auto;
  color: var(--gray);
}

/* Same centring on the horizontal pill's date inputs so both surfaces
   read the same: 'Apr 27, 2026 2:00 PM' centred under its label. */
.cbs-h .h-field-date input.cbs-datetime{text-align:center}

.cbs-step2 .pax-stepper.step2-pax{
  margin-top:4px;background:var(--sand);border:1.5px solid var(--line);
  border-radius:10px;padding:10px 12px;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  align-items:center;gap:6px 12px;
}
.cbs-step2 .booking-tabs{margin:2px 0 12px;width:100%;display:flex}
.cbs-step2 .booking-tab{flex:1;justify-content:center}

/* Swap button between Pickup and Drop-off — overlays the gap on desktop,
   slips between the stacked rows on mobile. */
.cbs-step2 .step2-direction{position:relative;column-gap:80px}
.cbs-step2 .step2-swap-hint{
  /* Button is 38px tall (so 19px above center). Add 5px breathing room +
     ~14px for the hint's own glyph height = 38px above center. */
  position:absolute;left:50%;top:calc(50% - 38px);
  transform:translateX(-50%);
  font-family:var(--font-head);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray);
  pointer-events:none;
  z-index:3;
}
.cbs-step2 .step2-swap{
  all:unset;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);
  color:var(--primary);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  z-index:3;
  box-shadow:0 2px 8px rgba(11,60,93,.12);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.5, 1.6, .4, 1), background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.cbs-step2 .step2-swap:hover{
  background:var(--sand);
  border-color:var(--secondary);
  color:var(--secondary);
  transform:translate(-50%,-50%) rotate(180deg);
  box-shadow:0 4px 12px rgba(0,174,239,.25);
}
.cbs-step2 .step2-swap:active{transform:translate(-50%,-50%) rotate(180deg) scale(.93)}
.cbs-step2 .step2-direction[data-swapping="1"] .step2-swap{
  transform:translate(-50%,-50%) rotate(180deg);
  background:var(--secondary);color:#fff;border-color:var(--secondary);
}
.cbs-step2 .step2-direction[data-swapping="1"] .step2-combo{opacity:.5}
.cbs-step2 .step2-direction .step2-combo{transition:opacity .2s}

@media(max-width:560px){
  .cbs-step2 .step2-direction{grid-template-columns:1fr;gap:18px}
  .cbs-step2 .step2-swap-hint{
    position:static;left:auto;top:auto;transform:none;
    display:block;text-align:center;margin-top:-6px;
  }
  .cbs-step2 .step2-swap{
    position:relative;left:auto;top:auto;
    transform:rotate(90deg);
    margin:0 auto;display:flex;
  }
  .cbs-step2 .step2-swap:hover{transform:rotate(270deg)}
  .cbs-step2 .step2-direction[data-swapping="1"] .step2-swap{transform:rotate(270deg)}
}

/* UX/UI polish on the trip section */
.cbs-step2 .step2-trip-section .step2-section-head{margin-bottom:6px}
.cbs-step2 .step2-trip-section .booking-tabs{margin:2px 0 6px}
.cbs-step2 .step2-edit-trip{
  font-family:var(--font-head);font-size:12px;font-weight:600;
  color:var(--secondary);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:999px;
  transition:background .15s, color .15s;
}
.cbs-step2 .step2-edit-trip:hover{background:rgba(0,174,239,.1);color:var(--primary-700)}
.cbs-step2 .booking-field{display:grid;gap:4px}
.cbs-step2 .booking-field>label{font-family:var(--font-head);font-size:12px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.04em;margin:0 0 0 2px}
.cbs-step2 .booking-field input,
.cbs-step2 .booking-field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1.5px solid transparent;border-radius:var(--radius);
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--sand);outline:none;
  box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.cbs-step2 .booking-field textarea{min-height:80px;resize:vertical}
.cbs-step2 .booking-field input:focus,
.cbs-step2 .booking-field textarea:focus{border-color:var(--secondary);background:#fff;box-shadow:0 0 0 3px rgba(0,174,239,.15)}

/* Sticky summary aside */
.step2-summary{position:sticky;top:24px;align-self:start}
@media(max-width:900px){.step2-summary{position:static}}
.step2-summary-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;display:grid;gap:12px;
  box-shadow:var(--shadow-lg);
}
.step2-summary-title{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  color:var(--gray);text-transform:uppercase;letter-spacing:.05em;
}
.cbs-step2 .cbs-quote{padding:0;border:0;background:transparent}
.cbs-step2 .cbs-price{font-family:var(--font-body);font-size:14px}
.cbs-step2 .cbs-total{font-size:18px;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.step2-confirm{margin-top:6px}
.cbs-step2 #cbs_pay.step2-confirm{margin-top:14px;width:100%}
.step2-grand-sub{font-size:12px;color:var(--gray);text-align:center;margin-top:6px}
.step2-trust{margin:6px 0 0;font-size:11px}

.cbs-step2 .cbs-payment{
  margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--shadow-lg);
}

/* Step 2 payment section — researched against Stripe Checkout, Square's
   own examples, and Booking.com. Highlights:
   - amount printed in the section header (clear context for the form)
   - segmented control for method (compact vs radio cards)
   - express buttons reserved space at the top, divider 'or pay with card'
   - card mount with includeInputLabels (separate fields with labels)
   - trust row right above the CTA
   - one big primary CTA, full-width, with method-specific label */

.step2-pay-section .step2-section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.step2-pay-amount{
  font-family:var(--font-head);
  font-size:18px;font-weight:700;
  color:var(--primary);
  letter-spacing:-0.01em;
}

/* Segmented control */
.step2-pay-segmented{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:12px;
  padding:4px;
  margin-bottom:14px;
}
.step2-pay-seg{position:relative;cursor:pointer}
.step2-pay-seg input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.step2-pay-seg-body{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:8px;
  font-family:var(--font-head);font-size:14px;font-weight:600;
  color:var(--gray);background:transparent;
  transition:background .15s, color .15s, box-shadow .15s;
}
.step2-pay-seg input[type=radio]:checked + .step2-pay-seg-body{
  background:#fff;color:var(--primary);
  box-shadow:0 1px 3px rgba(11,60,93,.12);
}
.step2-pay-seg-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.step2-pay-seg input[type=radio]:focus-visible + .step2-pay-seg-body{outline:2px solid var(--secondary);outline-offset:2px}

.step2-pay-panel{padding-top:2px}
.step2-pay-panel[hidden]{display:none}

/* Accepted-card brand marks — label + tight row of logos.
   Flex keeps each logo at its natural width so they sit together
   instead of spreading across the panel. */
.step2-pay-accepted{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  margin-bottom:4px;
}
.step2-pay-accepted-label{
  font-family:var(--font-head);
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--gray);
  white-space:nowrap;
}
.step2-pay-accepted img{
  width:auto;
  height:18px;
  max-width:100%;
  object-fit:contain;
  display:block;
}

@media(max-width:480px){
  .step2-pay-accepted-label{font-size:9px}
  .step2-pay-accepted img{height:16px}
}

/* Square mount: iframe carries its own border/typography because of
   includeInputLabels, so the wrapper is transparent and just provides
   spacing. */
.step2-square-mount{display:grid;gap:10px}
.step2-square-mount .cbs-square-card-mount{
  background:transparent;border:0;padding:0;min-height:64px;
}
.step2-square-mount .cbs-square-card-mount iframe{width:100%!important;border:0;min-height:60px}

/* 'or pay with card' divider */
.step2-square-divider{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-size:11px;font-weight:600;
  color:var(--gray);text-transform:uppercase;letter-spacing:.08em;
  margin:6px 0;
}
.step2-square-divider::before,
.step2-square-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.step2-square-divider span{padding:0 4px}
.step2-square-divider[hidden]{display:none}

/* Pay on arrival callout */
.step2-pay-on-arrival{
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(0,174,239,.06);border:1px solid rgba(0,174,239,.25);
  border-radius:var(--radius);padding:14px 16px;
  margin-top:6px;
}
.step2-pay-on-arrival-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--secondary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;
}
.step2-pay-on-arrival-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--primary)}
.step2-pay-on-arrival-sub{font-size:12.5px;color:var(--gray);margin-top:2px;line-height:1.4}

/* Trust row */
.step2-pay-trust{
  list-style:none;margin:14px 0 12px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  font-size:12px;color:var(--gray);
}
.step2-pay-trust li{display:inline-flex;align-items:center;gap:6px;line-height:1.2}
.step2-pay-trust svg{color:var(--secondary)}

/* Primary CTA */
.cbs-step2 #cbs_pay.step2-confirm{
  margin-top:6px;
  width:100%;
  padding:18px 20px;
  font-size:17px;
  border-radius:14px;
  letter-spacing:0.2px;
  box-shadow:0 12px 28px rgba(255,107,74,.32), 0 3px 8px rgba(255,107,74,.2);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:60px;
}
.cbs-step2 #cbs_pay.step2-confirm:hover:not([disabled]){box-shadow:0 14px 32px rgba(255,107,74,.4), 0 4px 10px rgba(255,107,74,.24)}
.cbs-step2 #cbs_pay .step2-confirm-label{font-weight:700}
.cbs-step2 #cbs_pay[disabled]{box-shadow:none}

@media(max-width:560px){
  .step2-section{padding:18px}
  .step2-stepper{padding:14px 18px 0}
  .step2-pay-trust{gap:6px 12px;font-size:11.5px}
  .cbs-step2 #cbs_pay.step2-confirm{font-size:16px;padding:16px 18px;min-height:54px}
}

/* LEGACY: old .cbs-wrap without .cbs-v fallback (not used post v0.6.5) */
.cbs-wrap:not(.cbs-v):not(.cbs-h):not(.cbs-step2){max-width:560px;margin:18px auto;padding:16px;border:1px solid #e5e7eb;border-radius:16px;background:#fff}

/* =========================================================
   PILL UX/UI v2 — clean labels, prominent values, polished states.
   These rules layer on top of the existing pill CSS so the structure
   from Shortcode.php stays the same.
   ========================================================= */

/* Hide the directional kickers ("Airport →", "→ Hotel"). The swap button
   between fields already communicates direction, and the explicit
   "Pickup"/"Drop-off" labels make the kicker noise redundant. */
.cbs-h .h-dir-kicker { display: none; }

/* Tighten and refine the small label above each value. */
.cbs-h .h-field > .h-combo-trigger,
.cbs-h .h-field.h-pax > .h-pax-trigger {
  padding: 8px 4px;
}
.cbs-h .h-combo-label,
.cbs-h .h-pax-trigger .h-combo-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px !important;
}

/* Make the chosen value the visual hero — larger, primary, weight 600. */
.cbs-h .h-combo-display {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbs-h .h-combo-display[data-empty="true"] {
  color: var(--gray-2);
  font-weight: 500;
}

/* Date input value — match the same scale as the combo display. */
.cbs-h .h-field-date input.cbs-datetime {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 0 !important;
}
.cbs-h .h-field-date .h-field-label-row {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--gray) !important;
  position: static !important;
  display: block !important;
  margin-bottom: 4px;
}
.cbs-h .h-field.h-field-date {
  padding: 8px 34px 8px 16px !important;     /* room for the right caret */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative !important;
}
.cbs-h .h-field.h-field-date > .h-combo-caret {
  position: absolute;
  right: 14px;
  top: 0; bottom: 0;
  margin: auto 0;
}

/* Pax stays consistent. */
.cbs-h .h-field.h-pax .h-combo-display {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cbs-h .h-field.h-pax .h-pax-label { color: var(--gray); font-weight: 500; }

/* Field hover — lift with sand bg + tiny ring. The pointer + transition
   already exist; this just tightens the look. */
.cbs-h .h-field:hover,
.cbs-h .h-field:focus-within {
  background: var(--sand);
}

/* Caret — subtle, only shows interactivity on hover, doesn't shout. */
.cbs-h .h-combo-caret {
  color: var(--gray-2);
  flex-shrink: 0;
  transition: color .15s, transform .25s;
}
.cbs-h .h-field:hover .h-combo-caret { color: var(--primary); }
.cbs-h .h-field.is-open .h-combo-caret,
.cbs-h .h-field-date.is-open .h-combo-caret { transform: rotate(180deg); }

/* Pretty divider — softer, taller, keeps proportional with the pill. */
.cbs-h .h-divider {
  width: 1px;
  background: var(--line);
  margin: 18px 0 !important;
  opacity: .8;
}

/* Search button — confident CTA. Larger, full coral, with a subtle ring
   when ready to click. Disabled gets a calmer state. */
.cbs-h .h-submit {
  min-height: 60px !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: .02em;
  gap: 8px !important;
}
.cbs-h .h-submit:not(:disabled):hover {
  background: var(--cta-hover) !important;
  transform: translateY(-1px);
}
.cbs-h .h-submit:disabled {
  background: #cbd5e1 !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* Footnote line — softer, more breathable. */
.cbs-h .booking-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.92);
}
.cbs-h .booking-footnote li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Footnote always reads white — the pill itself sits on the brand color
   (or hero), so #fff has the contrast we want regardless of the page
   background behind the pill's frame. */
.cbs-h .booking-footnote,
body:not(.has-hero) .cbs-h .booking-footnote { color: #fff; }

/* =========================================================
   PILL UX/UI v3 — bigger, more breathing room.
   ========================================================= */
.cbs-h.cbs-wrap { max-width: 1400px; }

.booking-h-pill {
  padding: 12px !important;
  min-height: 96px !important;
  border-radius: 999px !important;
}

.cbs-h .h-field {
  padding: 14px 22px !important;
}
.cbs-h .h-field-wide  { flex: 1.5 !important; }
.cbs-h .h-field-pax   { flex: 1.05 !important; }

.cbs-h .h-combo-label,
.cbs-h .h-field-date .h-field-label-row {
  font-size: 12px !important;
  margin-bottom: 6px !important;
}
.cbs-h .h-combo-display,
.cbs-h .h-field-date input.cbs-datetime,
.cbs-h .h-field.h-pax .h-combo-display {
  font-size: 16px !important;
}

.cbs-h .h-divider { margin: 22px 0 !important; }

.cbs-h .h-submit {
  min-height: 72px !important;
  padding: 0 28px !important;
  font-size: 16px !important;
  margin-left: 6px !important;
}

@media (max-width: 880px) {
  .cbs-h.cbs-wrap { max-width: none; }
  .booking-h-pill { padding: 10px !important; min-height: 0 !important; }
  .cbs-h .h-field { padding: 10px 12px !important; }
  .cbs-h .h-submit { min-height: 56px !important; }
}

/* =========================================================
   PILL UX/UI v4 — never crop. Wraps to 2 rows on tablets/laptops.
   ========================================================= */

/* Hard guarantee that values can shrink+ellipsis (no overflow cutoff). */
.cbs-h .h-field { min-width: 0 !important; }
.cbs-h .h-combo-stack,
.cbs-h .h-combo-display,
.cbs-h .h-pax-trigger {
  min-width: 0 !important;
  max-width: 100%;
}
.cbs-h .h-combo-display {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.cbs-h .h-combo-trigger {
  width: 100%;
  min-width: 0;
  text-align: left;
}

/* TABLET / SMALL-LAPTOP (881-1199px): drop into a 2-row pill so every
   field is readable. Top row = Pickup ⇄ Drop-off. Bottom row = dates +
   pax + search. Still inside one rounded pill. */
@media (min-width: 881px) and (max-width: 1199px) {
  .booking-h-pill .booking-h-fields {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 8px 0;
    align-items: stretch;
  }
  .booking-h-pill .booking-h-fields > .h-field[data-combo="airport"] { grid-column: 1; grid-row: 1; }
  .booking-h-pill .booking-h-fields > .h-swap                       { grid-column: 2; grid-row: 1; align-self: center; }
  .booking-h-pill .booking-h-fields > .h-field[data-combo="hotel"]  { grid-column: 3; grid-row: 1; }
  /* The bottom row mounts a 4-col strip across all 3 columns. */
  .booking-h-pill .booking-h-fields > .h-divider { display: none; }
  .booking-h-pill .booking-h-fields > .h-field[data-date-field="arrival"],
  .booking-h-pill .booking-h-fields > .h-field[data-date-field="return"],
  .booking-h-pill .booking-h-fields > .h-field.h-pax {
    grid-row: 2;
    border-top: 1px solid var(--line);
    border-radius: 0 !important;
    padding-top: 12px !important;
  }
  .booking-h-pill .booking-h-fields > .h-field[data-date-field="arrival"] { grid-column: 1 / 2; }
  .booking-h-pill .booking-h-fields > .h-field[data-date-field="return"]  { grid-column: 2 / 3; }
  .booking-h-pill .booking-h-fields > .h-field.h-pax                      { grid-column: 3 / 4; }
  .booking-h-pill .booking-h-fields > .h-submit {
    grid-row: 2;
    grid-column: 3 / 4;
    align-self: center;
    justify-self: end;
    min-height: 56px !important;
    border-top: 1px solid var(--line);
    border-radius: 999px !important;
    margin: 6px 6px 0 6px !important;
  }
  /* The pickup/dropoff row keeps the wide flexible vibe. */
  .booking-h-pill .h-field[data-combo="airport"],
  .booking-h-pill .h-field[data-combo="hotel"] {
    padding: 12px 18px !important;
  }
}

/* DESKTOP (≥1200px): single-row Airbnb pill — make sure it fully spans. */
@media (min-width: 1200px) {
  .booking-h-pill .booking-h-fields {
    display: flex !important;
    align-items: stretch !important;
  }
}

/* =========================================================
   PILL UX/UI v5 — wider still. Pill spans up to 1600px and breaks
   out of any narrower parent container with safe viewport padding.
   ========================================================= */
.cbs-h.cbs-wrap {
  max-width: min(1600px, calc(100vw - 32px)) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   PILL UX/UI v6 — give date fields more horizontal space.
   Date strings ("Apr 27 · 2:00 PM") need ~190px to render fully —
   bump their flex so they don't get squeezed by the wide combos.
   ========================================================= */
@media (min-width: 1200px) {
  .cbs-h .h-field-wide   { flex: 1.4 !important; }
  .cbs-h .h-field-date   { flex: 1.3 !important; min-width: 200px; }
  .cbs-h .h-field-pax    { flex: 1.1 !important; }
  .cbs-h.cbs-wrap        { max-width: min(1700px, calc(100vw - 32px)) !important; }
}
.wp-block-cover.hero .hero-grid,
.se-hotel-booking .container,
.hero .container,
.wp-block-cover.hero .wp-block-group.container {
  max-width: min(1700px, calc(100vw - 32px)) !important;
}

/* =========================================================
   PILL — Swap hint + UNAVAILABLE state.
   ========================================================= */

/* "SWAP" caption pinned above the round swap button. */
.cbs-h .h-swap { position: relative; }
.cbs-h .h-swap-hint {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  pointer-events: none;
  white-space: nowrap;
}

/* Return field locked-out look. Greys out the value, hides the calendar
   icon and caret, and shows "UNAVAILABLE" in the placeholder slot. */
.cbs-h .h-field-date.cbs-return-locked {
  opacity: .6;
  pointer-events: none;
}
.cbs-h .h-field-date.cbs-return-locked .h-combo-caret { visibility: hidden; }
.cbs-h .h-field-date.cbs-return-locked input.cbs-datetime {
  color: var(--gray) !important;
  font-style: normal !important;
}
.cbs-h .h-field-date.cbs-return-locked input.cbs-datetime::placeholder {
  color: var(--gray) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  font-size: 12px !important;
}

/* =========================================================
   PILL — live summary bar (price + coupon).
   Sits between the pill and the footnote so the visitor sees the
   estimated total before clicking Search.
   ========================================================= */
.booking-h-summary {
  margin: 14px auto 0;
  max-width: min(900px, calc(100% - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(11,60,93,.08);
}

.booking-h-price {
  display: inline-flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.booking-h-price-from {
  font-family: var(--font-head);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray);
}
.booking-h-price-amt {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.booking-h-price-sub {
  font-size: 13px; color: var(--gray);
}
.booking-h-price-discount {
  font-size: 12px; font-weight: 700;
  color: var(--cta);
  background: rgba(255,107,74,.12);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: .04em;
}

.booking-h-coupon { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.booking-h-coupon-toggle {
  all: unset;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600;
  color: #11789E;   /* AA-safe turquoise on white; was --secondary #00AEEF = 2.5:1 (fails) */
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.booking-h-coupon-toggle::before { content: '🎟 '; }
.booking-h-coupon-toggle:hover { color: var(--primary); }
.booking-h-coupon-toggle[aria-expanded="true"] { display: none; }

.booking-h-coupon-row { display: flex; gap: 6px; align-items: stretch; }
.booking-h-coupon-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff;
  color: var(--ink);
  outline: none;
  width: 160px;
  min-width: 0;   /* let flex:1 shrink it on mobile (inputs default to min-width:auto → overflow, pushing Apply out) */
  box-sizing: border-box;   /* no global reset here; without this, padding adds to the flex width → overflow */
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: border-color .15s, box-shadow .15s;
}
.booking-h-coupon-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0,174,239,.15); }
.booking-h-coupon-apply {
  all: unset;
  box-sizing: border-box;   /* all:unset reset this to content-box → padding overflowed the row */
  background: var(--primary);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;        /* keep the button intact while the input shrinks */
  white-space: nowrap;
  transition: background .15s;
}
.booking-h-coupon-apply:hover { background: var(--primary-700); }
.booking-h-coupon-apply:disabled { background: var(--gray-2); cursor: wait; }

.booking-h-coupon-msg {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}
.booking-h-coupon-msg.is-ok  { color: #059669; }
.booking-h-coupon-msg.is-err { color: #dc2626; }

/* Step-2 / vertical coupon — Apply button next to the input + message
   slot below. Mirrors the pill's pill-coupon styling but lives inside
   the regular .booking-field stack. */
.cbs-coupon-field .cbs-coupon-row {
  display: flex; gap: 8px; align-items: stretch;
}
.cbs-coupon-field input#cbs_coupon {
  flex: 1; min-width: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cbs-coupon-apply {
  all: unset;
  flex: 0 0 auto;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600; font-size: 13px;
  padding: 0 18px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px;
  transition: background .15s;
}
.cbs-coupon-apply:hover { background: var(--primary-700); }
.cbs-coupon-apply:disabled { background: var(--gray-2); cursor: wait; }
.cbs-coupon-msg {
  margin-top: 6px;
  font-size: 12.5px; font-weight: 600;
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}
.cbs-coupon-msg.is-ok  { color: #059669; }
.cbs-coupon-msg.is-err { color: #dc2626; }

@media (max-width: 600px) {
  .booking-h-summary { padding: 12px 14px; gap: 10px; }
  .booking-h-coupon { align-items: stretch; max-width: 100%; min-width: 0; }
  .booking-h-coupon-row { width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; }
  .booking-h-coupon-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .booking-h-coupon-apply { flex: 0 0 auto; }
}

/* =========================================================
   PILL UX/UI v7 — clean responsive: mobile = form, iPad = 2-row pill,
   desktop = wide horizontal pill. Overrides any earlier responsive rules.
   ========================================================= */

/* ============= iPad (881–1199px) — clean 2-row pill ============= */
@media (min-width: 881px) and (max-width: 1199px) {
  .booking-h-pill {
    border-radius: 24px !important;
    padding: 10px !important;
    min-height: 0 !important;
  }
  .booking-h-pill .booking-h-fields {
    display: grid !important;
    grid-template-columns: 1fr 36px 1fr !important;
    grid-template-areas:
      "pickup  swap  hotel"
      "dates   dates dates"
      "pax     pax   submit";
    gap: 8px !important;
    align-items: stretch !important;
  }
  .booking-h-pill .h-field[data-combo="airport"] { grid-area: pickup; }
  .booking-h-pill .h-swap                       { grid-area: swap; align-self: center; justify-self: center; }
  .booking-h-pill .h-field[data-combo="hotel"]  { grid-area: hotel; }
  .booking-h-pill .h-divider                    { display: none !important; }
  .booking-h-pill .h-field-date[data-date-field="arrival"],
  .booking-h-pill .h-field-date[data-date-field="return"] {
    grid-area: auto !important;  /* let them flow within "dates" */
  }
  /* Use a nested grid for the 2 dates inside the "dates" row. */
  .booking-h-pill .booking-h-fields::after { content: none; }
  .booking-h-pill .h-field-date[data-date-field="arrival"] { grid-column: 1 / 2; grid-row: 2; }
  .booking-h-pill .h-field-date[data-date-field="return"]  { grid-column: 2 / 4; grid-row: 2; }
  .booking-h-pill .h-field.h-pax { grid-area: pax; }
  .booking-h-pill .h-submit {
    grid-area: submit;
    min-height: 56px !important;
    border-radius: 14px !important;
    margin: 0 !important;
    width: 100%;
  }
  .booking-h-pill .h-field {
    padding: 10px 14px !important;
    background: var(--sand);
    border-radius: 12px;
  }
  .booking-h-pill .h-field:hover,
  .booking-h-pill .h-field:focus-within { background: #fff; }
  .booking-h-pill .h-swap-hint { display: none; }
}

/* ============= Mobile (≤880px) — full booking form ============= */
@media (max-width: 880px) {
  .cbs-wrap.cbs-h { margin: 12px auto; }

  .booking-h {
    gap: 14px !important;
  }
  .booking-h-tabs {
    width: 100%;
    justify-content: stretch;
  }
  .cbs-h .booking-h-tabs .booking-tab { flex: 1 !important; padding: 10px 14px !important; }

  .booking-h-pill {
    flex-direction: column !important;
    padding: 16px !important;
    gap: 10px !important;
    border-radius: 16px !important;
    min-height: 0 !important;
  }
  .booking-h-pill .booking-h-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  /* Each segment becomes a real form field — clear label, sand input box,
     full width, larger tap targets. */
  .booking-h-pill .h-field {
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: var(--sand) !important;
    border: 1.5px solid transparent;
    transition: border-color .15s, background .15s;
  }
  .booking-h-pill .h-field:focus-within {
    background: #fff !important;
    border-color: var(--secondary);
  }
  .booking-h-pill .h-field:hover { background: #fff !important; }
  .booking-h-pill .h-divider { display: none !important; }

  .cbs-h .h-combo-label,
  .cbs-h .h-field-date .h-field-label-row { font-size: 11px !important; }
  .cbs-h .h-combo-display,
  .cbs-h .h-field-date input.cbs-datetime { font-size: 16px !important; }

  /* Swap button: small floating row between Pickup and Hotel. */
  .booking-h-pill .h-swap {
    width: 36px !important; height: 36px !important;
    margin: 2px auto !important;
    transform: rotate(90deg);
    align-self: center;
  }
  .booking-h-pill .h-swap-hint { display: none; }

  /* Search button: full-width, clearly the primary action. */
  .booking-h-pill .h-submit {
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 12px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  /* Group separators inside the stacked mobile pill — one below the
     route group (PICKUP + DROP-OFF row), one below the dates group
     (ARRIVAL + RETURN row). Visual hierarchy: route / dates / pax / cta. */
  .booking-h-pill .booking-h-fields > div.cbs-relative.cbs-grid,
  .booking-h-pill .booking-h-fields > div.cbs-grid.cbs-grid-cols-2 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  /* Summary: stacks below pill, full width. */
  .booking-h-summary {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 12px;
    padding: 14px;
  }
  .booking-h-coupon { align-items: stretch; max-width: 100%; min-width: 0; }
  .booking-h-coupon-row { width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; }
  .booking-h-coupon-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .booking-h-coupon-apply { flex: 0 0 auto; }

  /* Footnote: stack into 2-col list for readability. */
  .cbs-h .booking-footnote {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    font-size: 12px;
  }
}

/* =========================================================
   FLATPICKR — branded calendar to match the Cancun Shuttle design.
   Overrides the CDN default styles so the picker reads as a sibling of
   the booking pill, not a separate widget.
   ========================================================= */
.flatpickr-calendar {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 56px rgba(11,60,93,.18), 0 8px 18px rgba(11,60,93,.10) !important;
  font-family: var(--font-body) !important;
  padding: 10px 12px 12px !important;
  width: auto !important;
  min-width: 320px;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none !important; }

/* Header (month + nav) */
.flatpickr-months {
  padding: 4px 4px 8px !important;
  align-items: center;
}
.flatpickr-month {
  background: transparent !important;
  color: var(--primary) !important;
  height: auto !important;
  line-height: 1 !important;
}
.flatpickr-current-month {
  font-family: var(--font-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  padding: 4px 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--primary) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  fill: var(--primary) !important;
  color: var(--primary) !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  padding: 6px !important;
  transition: background .15s !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: var(--sand) !important;
  color: var(--primary) !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: currentColor !important; }

/* Day-of-week strip */
.flatpickr-weekdays { background: transparent !important; height: auto !important; padding: 4px 0 !important; }
.flatpickr-weekday {
  font-family: var(--font-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gray) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Day grid */
.dayContainer { padding: 2px 0 !important; }
.flatpickr-day {
  border: 0 !important;
  border-radius: 50% !important;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  height: 36px !important;
  line-height: 36px !important;
  max-width: 36px !important;
  margin: 1px;
  transition: background .15s, color .15s, transform .1s !important;
}
.flatpickr-day:hover {
  background: var(--sand) !important;
  color: var(--primary) !important;
}
.flatpickr-day.today {
  box-shadow: inset 0 0 0 2px var(--secondary) !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 10px rgba(11,60,93,.25) !important;
  transform: scale(1.04);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--gray-2) !important;
  background: transparent !important;
}
.flatpickr-day.flatpickr-disabled {
  text-decoration: line-through;
  cursor: not-allowed !important;
}

/* Time row at the bottom — chunkier inputs, brand colors */
.flatpickr-time {
  background: var(--sand) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 0 12px 12px !important;
  margin-top: 8px;
  height: 56px !important;
}
.flatpickr-time input {
  font-family: var(--font-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: transparent !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus { background: #fff !important; }
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--primary) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
}
.flatpickr-time .flatpickr-am-pm {
  font-size: 13px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.flatpickr-time .arrowUp::after,
.flatpickr-time .arrowDown::after { border-bottom-color: var(--primary) !important; border-top-color: var(--primary) !important; }

/* Mobile: make the calendar full-width inside its viewport */
@media (max-width: 560px) {
  .flatpickr-calendar { min-width: 92vw !important; max-width: 92vw !important; }
  .flatpickr-day { height: 40px !important; line-height: 40px !important; max-width: 100% !important; }
}

/* =========================================================
   FLATPICKR — Mobile bottom-sheet pattern.
   On phones the floating calendar is finicky (positioning above the
   field, scrollable, easy to dismiss accidentally). We pin it to the
   bottom of the viewport like a native iOS/Android picker, with a
   semi-transparent scrim behind it.
   ========================================================= */
@media (max-width: 640px) {
  .flatpickr-calendar.open {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.32) !important;
    z-index: 1000 !important;
    animation: cbs-fp-slide-up .25s cubic-bezier(.2, .9, .3, 1.1);
  }
  /* Scrim behind the calendar — placed via :before on the open calendar
     so we don't need extra DOM. */
  .flatpickr-calendar.open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(7, 18, 30, .55);
    z-index: -1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: cbs-fp-fade-in .2s ease-out;
  }
  /* "Drag handle" hint at top of the sheet. */
  .flatpickr-calendar.open::after {
    content: "";
    position: absolute; top: 8px; left: 50%;
    width: 44px; height: 4px; border-radius: 4px;
    background: rgba(11,60,93,.18);
    transform: translateX(-50%);
  }
  .flatpickr-calendar.open .flatpickr-months { padding-top: 14px !important; }

  /* Big touch targets on the day grid. */
  .flatpickr-calendar .flatpickr-day {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    max-width: 100% !important;
    margin: 2px;
  }
  /* Time row taller + readable. */
  .flatpickr-calendar .flatpickr-time {
    height: 64px !important;
    margin-top: 12px;
  }
  .flatpickr-calendar .flatpickr-time input {
    font-size: 22px !important;
    padding: 4px 0 !important;
  }
  /* Month nav buttons easier to tap. */
  .flatpickr-calendar .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-next-month {
    width: 40px !important; height: 40px !important;
    padding: 8px !important;
  }
}
@keyframes cbs-fp-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes cbs-fp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================
   FORM POLISH — typographic refinements (skill: frontend-design).
   - Editorial labels with letter-spacing 0.18em
   - Hotel sub-line in the combo display + dropdown options
   - Search button copy upgraded to "Search shuttles"
   - Section number badges on Step 2
   ========================================================= */

/* Two-line combo display (Hotel name + uppercase zone). */
.cbs-h .h-combo-display .h-combo-name {
  display: block;
  font-size: 16px; font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.cbs-h .h-combo-display .h-combo-sub {
  display: block;
  font-family: var(--font-head);
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--secondary);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Two-line dropdown option (matches the display so picking feels "same
   as what I'll see selected"). */
.h-combo-list li .h-opt-name {
  display: block;
  font-weight: 600; color: var(--ink); font-size: 14px;
  line-height: 1.3;
}
.h-combo-list li .h-opt-sub {
  display: block;
  font-family: var(--font-head);
  font-size: 7px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--secondary);
  margin-top: 0;
}
.h-combo-list li[aria-selected="true"] .h-opt-sub,
.h-combo-list li.is-active .h-opt-sub { color: rgba(255,255,255,.9); }
/* Muted street-address line under the hotel name in the dropdown options. */
.h-combo-list li .h-opt-addr {
  display: block;
  font-size: 11px; line-height: 1.3; font-weight: 400;
  color: var(--gray2, #6b7280);
  margin-top: 2px;
  white-space: normal;
}
.h-combo-list li[aria-selected="true"] .h-opt-addr,
.h-combo-list li.is-active .h-opt-addr { color: rgba(255,255,255,.85); }

/* Selected-hotel address echoed under the drop-off field (step-2 + vertical
   variant). Confirms "this is the right hotel" before the customer pays. */
.cbs-hotel-addr {
  display: block;
  margin-top: 4px;
  font-size: 12px; line-height: 1.35;
  color: var(--gray2, #6b7280);
}
.cbs-hotel-addr[hidden] { display: none; }
.cbs-hotel-addr::before { content: "📍 "; }

/* Editorial labels — "PICKUP", "ARRIVAL" with extra tracking + a small
   coral dot before the text. Subtle but elevates the form from
   "Booking.com lite" to its own thing. */
.cbs-h .h-combo-label,
.cbs-h .h-field-date .h-field-label-row,
.cbs-h .h-field.h-pax .h-combo-label {
  letter-spacing: .14em !important;
  font-size: 10px !important;
}

/* Step 2 section header — number badge in coral uppercase. */
.cbs-step2 .step2-section-head {
  position: relative;
  padding-left: 0;
}
.cbs-step2 .step2-section-head h2::before {
  content: counter(step2-section, decimal-leading-zero);
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em;
  color: var(--cta);
  margin-right: 12px;
  vertical-align: 4px;
  position: relative;
}
.cbs-step2 .step2-section-head h2::after {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--cta);
  margin: 0 12px 4px;
  vertical-align: middle;
}
.cbs-step2 .step2-main { counter-reset: step2-section; }
.cbs-step2 .step2-section { counter-increment: step2-section; }

/* Step 2 stepper at top — circles + connecting line that fills as you
   advance. Currently it's a row of "1 Trip · 2 Contact · 3 Confirm";
   we upgrade to an actual progress visualization. */
.cbs-step2 .step2-stepper {
  position: relative;
  background: linear-gradient(90deg, var(--cta) 0%, var(--cta) 0%, var(--line) 0%, var(--line) 100%);
  background-size: 100% 2px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  padding: 14px 0 18px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.cbs-step2 .step2-stepper .step2-step {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  position: relative; z-index: 1;
  padding: 0 6px;
}
.cbs-step2 .step2-stepper .step2-step .n {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--gray);
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.cbs-step2 .step2-stepper .step2-step.is-current .n {
  background: var(--primary); border-color: var(--primary); color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(11,60,93,.22);
}
.cbs-step2 .step2-stepper .step2-step.is-done .n {
  background: var(--cta); border-color: var(--cta); color: #fff;
}
.cbs-step2 .step2-stepper .step2-step.is-done .n::before {
  content: "✓"; font-size: 14px;
}
.cbs-step2 .step2-stepper .step2-step.is-done .n > span { display: none; }
.cbs-step2 .step2-stepper .step2-step span:not(.n) {
  font-family: var(--font-head); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray);
}
.cbs-step2 .step2-stepper .step2-step.is-current span:not(.n) { color: var(--primary); }
.cbs-step2 .step2-stepper .step2-step.is-done span:not(.n) { color: var(--cta); }

/* =========================================================
   FLATPICKR — Mobile picker polish v2
   The bottom-sheet from v0.9.42 was wired but the inner content (time
   slots grid + Done button) wasn't tuned for the new layout. This pass
   makes the whole sheet scroll as one column, gives 44px+ tap targets,
   adds a close handle that's actually clickable, and prevents body scroll
   bleed when the sheet is open.
   ========================================================= */
@media (max-width: 640px) {
  /* The sheet contains: months / weekdays / day grid / cbs-time-slots /
     foot. Make it scroll vertically when content exceeds 75vh so users
     can reach the Done button without zooming or fighting with the page. */
  .flatpickr-calendar.open {
    max-height: 86vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-top: 26px !important;       /* room for the drag handle */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* Calendar grid — more breathing room. */
  .flatpickr-calendar .dayContainer { padding: 4px 6px !important; }
  .flatpickr-calendar .flatpickr-day {
    height: 46px !important;
    line-height: 46px !important;
    font-size: 15px !important;
    margin: 3px 1px !important;
    border-radius: 50% !important;
  }
  .flatpickr-calendar .flatpickr-weekdays { padding: 8px 0 4px !important; }
  .flatpickr-calendar .flatpickr-weekday { font-size: 11px !important; }

  /* Custom time slot grid → 3 cols (was 4 squashed), taller slots, full
     finger-friendly tap area, brand-styled selected state. */
  .flatpickr-calendar .cbs-time-slots {
    border-top: 1px solid var(--line);
    padding: 14px 16px 8px !important;
    background: var(--sand);
    margin: 14px -16px 0 !important;     /* break out of the sheet padding */
  }
  .flatpickr-calendar .cbs-time-slots-head {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .flatpickr-calendar .cbs-time-slots-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;          /* sheet itself scrolls */
    overflow: visible !important;
    padding-right: 0 !important;
  }
  .flatpickr-calendar .cbs-slot {
    padding: 14px 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #fff;
    min-height: 48px;                     /* Apple HIG tap target */
  }
  .flatpickr-calendar .cbs-slot.is-active {
    box-shadow: 0 4px 12px rgba(11,60,93,.22);
    transform: scale(1.02);
  }

  /* Footer — full-width Done button, can't miss it. */
  .flatpickr-calendar .cbs-time-slots-foot {
    margin: 12px -16px 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: sticky;
    bottom: calc(-20px - env(safe-area-inset-bottom));
    z-index: 2;
  }
  .flatpickr-calendar .cbs-slot-done {
    flex: 1;
    width: 100% !important;
    padding: 16px 22px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    text-align: center;
  }

  /* Drag handle hint — make it visually a tap-area too (clears confusion
     about how to dismiss the sheet). */
  .flatpickr-calendar.open::after {
    width: 56px !important; height: 5px !important;
    top: 10px !important;
    cursor: grab;
  }

  /* Hide Flatpickr's stock time input row — we use cbs-time-slots instead. */
  .flatpickr-calendar.open .flatpickr-time { display: none !important; }
}

/* Lock body scroll when the sheet is open — prevents content behind
   from scrolling under the user's finger. */
@media (max-width: 640px) {
  body.cbs-fp-mobile-open { overflow: hidden; touch-action: none; }
}

/* =========================================================
   FLATPICKR — Year input visibility fix
   The default Flatpickr month-year header can collapse to invisible
   when the input has 0 width or transparent text. Explicit styling so
   the year always renders cleanly with our brand colors.
   ========================================================= */
.flatpickr-current-month .cur-month {
  display: inline-block;
  margin-right: 6px;
  color: var(--primary) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.flatpickr-current-month .numInputWrapper {
  display: inline-block !important;
  position: relative;
  width: auto !important;
  min-width: 64px;
  vertical-align: baseline;
}
.flatpickr-current-month input.numInput.cur-year {
  display: inline-block !important;
  width: auto !important;
  min-width: 56px;
  padding: 0 14px 0 4px !important;
  font-family: var(--font-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  -moz-appearance: textfield;
  text-align: left;
}
.flatpickr-current-month input.numInput.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.numInput.cur-year::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
  position: absolute;
  right: 0;
  width: 12px;
  height: 50%;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.flatpickr-current-month .numInputWrapper:hover .arrowUp,
.flatpickr-current-month .numInputWrapper:hover .arrowDown {
  opacity: 1;
}
.flatpickr-current-month .numInputWrapper .arrowUp { top: 0; }
.flatpickr-current-month .numInputWrapper .arrowDown { bottom: 0; }
.flatpickr-current-month .numInputWrapper .arrowUp::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--primary);
}
.flatpickr-current-month .numInputWrapper .arrowDown::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--primary);
}

/* =========================================================
   FLATPICKR — Time wheel (iOS-style roll picker)
   Replaces the dense grid of time-slot buttons with a single vertical
   scroll where the centered value is the active selection. Reads as a
   native pickerwheel — distinctive, less visually noisy.
   ========================================================= */
.cbs-time-wheel-container {
  position: relative;
  margin: 0 -2px;
}
.cbs-time-wheel {
  height: 200px;                       /* 5 rows × 40px visible */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 80px 0;                     /* lets the first/last items center */
  /* Soft fade top + bottom so peripheral values dim toward the indicator. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.3) 12%, #000 38%, #000 62%, rgba(0,0,0,.3) 88%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.3) 12%, #000 38%, #000 62%, rgba(0,0,0,.3) 88%, transparent 100%);
  scrollbar-width: none;
}
.cbs-time-wheel::-webkit-scrollbar { display: none; }

/* Each slot snaps to center when scrolled past it. */
.cbs-time-wheel .cbs-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  scroll-snap-align: center;
  /* `scroll-snap-stop: always` halts momentum on every slot — that's the
     behavior that produces the "jumpy" feel because each slot becomes a
     speed bump. With `normal`, fast-flicks glide and the wheel snaps
     cleanly to whichever slot the momentum settles near. */
  scroll-snap-stop: normal;
  font-family: var(--font-head, system-ui), sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--gray-2);
  padding: 0 14px;
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: color .18s, transform .18s, font-weight .18s;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.cbs-time-wheel .cbs-slot.is-active {
  color: var(--primary);
  font-weight: 800;
  font-size: 22px;
  transform: scale(1.02);
}

/* Indicator — two horizontal lines centered on the wheel, navy thin. */
.cbs-time-wheel-indicator {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 40px;
  margin-top: -20px;
  pointer-events: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,60,93,.03), rgba(11,60,93,.06));
  z-index: 1;
}

/* Mobile sheet: same wheel but smaller height to fit in viewport. */
@media (max-width: 640px) {
  .cbs-time-wheel { height: 220px; padding: 90px 0; }
  .cbs-time-wheel .cbs-slot { height: 44px; font-size: 18px; }
  .cbs-time-wheel .cbs-slot.is-active { font-size: 24px; }
  .cbs-time-wheel-indicator { height: 44px; margin-top: -22px; }
}

/* =========================================================
   FLATPICKR — kill the stock time row entirely.
   We've got the iOS-style wheel; the hour/minute number inputs +
   AM/PM toggle are noise.
   ========================================================= */
.flatpickr-calendar .flatpickr-time,
.flatpickr-calendar.hasTime .flatpickr-time,
.flatpickr-calendar.has-time .flatpickr-time {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   PILL — Arrival / Return bigger on desktop.
   Date fields get more width and a larger value type so the formatted
   string ("Apr 27 · 02:00 PM") never feels cramped against the wide
   combos beside it.
   ========================================================= */
@media (min-width: 1200px) {
  .cbs-h .h-field-date {
    flex: 1.6 !important;
    min-width: 230px;
    padding: 14px 24px !important;
  }
  .cbs-h .h-field-date input.cbs-datetime {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  .cbs-h .h-field-date .h-field-label-row {
    font-size: 11px !important;
  }
}

/* =========================================================
   FLATPICKR — month + year selectors (both clickable / scrubbable).
   Pairs a real <select> for the month with a numeric input for the year
   and styles them as one cohesive header pill.
   ========================================================= */
.flatpickr-current-month {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: var(--sand);
  transition: background .15s;
}
.flatpickr-current-month:hover { background: var(--sand-deep); }

/* Month dropdown — real <select> with chevron suffix. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  background: transparent !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230B3C5D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 12px !important;
  padding: 2px 18px 2px 0 !important;
  border: 0 !important;
  outline: none !important;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  background: #fff !important;
}

/* Year input — clickable type number with always-visible up/down chevrons
   so users see they can change the year. */
.flatpickr-current-month .numInputWrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative;
  padding-right: 14px;
  cursor: pointer;
}
.flatpickr-current-month input.numInput.cur-year {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  width: 50px !important;
  min-width: 50px !important;
  padding: 2px 0 !important;
  text-align: left !important;
  -moz-appearance: textfield;
}
.flatpickr-current-month input.numInput.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.numInput.cur-year::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
  position: absolute;
  right: 2px;
  width: 10px;
  height: 50%;
  border: 0;
  cursor: pointer;
  opacity: .6;            /* always visible — no hover gating */
  transition: opacity .15s;
}
.flatpickr-current-month .numInputWrapper:hover .arrowUp,
.flatpickr-current-month .numInputWrapper:hover .arrowDown { opacity: 1; }
.flatpickr-current-month .numInputWrapper .arrowUp { top: 1px; }
.flatpickr-current-month .numInputWrapper .arrowDown { bottom: 1px; }
.flatpickr-current-month .numInputWrapper .arrowUp::after,
.flatpickr-current-month .numInputWrapper .arrowDown::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.flatpickr-current-month .numInputWrapper .arrowUp::after   { border-bottom: 5px solid var(--primary); }
.flatpickr-current-month .numInputWrapper .arrowDown::after { border-top:    5px solid var(--primary); }

/* Hide the legacy static cur-month span — we use the <select> only. */
.flatpickr-current-month .cur-month { display: none !important; }

/* =========================================================
   FLATPICKR — restore month label visibility + side-by-side time wheel
   ========================================================= */

/* Bring back the cur-month span (Flatpickr emits it even in dropdown
   mode for accessibility). When the <select> is hidden by something,
   this acts as a visible fallback. */
.flatpickr-current-month .cur-month {
  display: inline-block !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  margin: 0 4px 0 0 !important;
}

/* Make sure the dropdown <select> shows when present. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 80px !important;
}

/* SIDE-BY-SIDE LAYOUT — calendar days on the left, time wheel on the right.
   Activates only when there's room (≥720px). On phones the calendar stays
   stacked inside the bottom-sheet. */
@media (min-width: 720px) {
  .flatpickr-calendar.open {
    display: grid !important;
    grid-template-columns: minmax(310px, auto) minmax(180px, 220px) !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "head head"
      "days time"
      "foot foot" !important;
    column-gap: 0 !important;
    width: auto !important;
    max-width: none !important;
    align-items: stretch;
  }
  .flatpickr-calendar.open .flatpickr-months   { grid-area: head; }
  .flatpickr-calendar.open .flatpickr-innerContainer { grid-area: days; }
  /* The custom .cbs-time-slots wraps the wheel + Done button. We split:
     the wheel and head go to the side, the foot stays full-width below. */
  .flatpickr-calendar.open .cbs-time-slots {
    grid-area: time;
    border-top: 0 !important;
    border-left: 1px solid var(--line) !important;
    padding: 14px 14px 8px !important;
    background: #fff !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .flatpickr-calendar.open .cbs-time-slots-head {
    margin: 0 0 10px !important;
  }
  .flatpickr-calendar.open .cbs-time-wheel-container {
    flex: 1;
  }
  /* Footer (Done button) takes the bottom row spanning both columns. */
  .flatpickr-calendar.open .cbs-time-slots-foot {
    grid-area: foot;
    border-top: 1px solid var(--line);
    padding: 12px 14px !important;
    margin: 0 !important;
    display: flex;
    justify-content: flex-end;
    background: var(--sand);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }
}

/* Mobile sheet keeps the stacked layout (calendar above wheel above Done). */
@media (max-width: 640px) {
  .flatpickr-calendar.open {
    display: block !important;
  }
}

/* =========================================================
   FLATPICKR — fix v2: month/year visibility + side-by-side everywhere
   ========================================================= */

/* Flatpickr's default `.flatpickr-month` has `overflow: hidden` which
   clips our padded pill wrapper. Open it up. */
.flatpickr-calendar .flatpickr-month {
  overflow: visible !important;
  height: auto !important;
  min-height: 36px;
}
.flatpickr-calendar .flatpickr-months {
  align-items: center !important;
}

/* Strip the pill-bg from the current-month wrapper — that's what was
   pushing it past the parent's clip area. Style children directly. */
.flatpickr-current-month {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  white-space: nowrap;
}

/* Month select — visible label with subtle hover background (replaces
   the old wrapping pill that was getting clipped). */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 92px !important;
  padding: 4px 22px 4px 10px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background-color: var(--sand) !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230B3C5D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 12px !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  cursor: pointer !important;
  outline: none !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: var(--sand-deep) !important; }

/* Year input — same chip style as the month select. */
.flatpickr-current-month .numInputWrapper {
  display: inline-flex !important;
  position: relative;
  background: var(--sand);
  border-radius: 8px;
  padding: 4px 16px 4px 10px;
  cursor: pointer;
}
.flatpickr-current-month .numInputWrapper:hover { background: var(--sand-deep); }
.flatpickr-current-month input.numInput.cur-year {
  width: 56px !important;
  min-width: 56px !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  padding: 0 !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  text-align: left !important;
  -moz-appearance: textfield;
}
.flatpickr-current-month input.numInput.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.numInput.cur-year::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Side-by-side: calendar left + time wheel right at every viewport down
   to ~440px (typical narrow Android). On really tiny phones we still
   stack via the @media below. */
@media (min-width: 440px) {
  .flatpickr-calendar.open {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(140px, 200px) !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "head head"
      "days time"
      "foot foot" !important;
    column-gap: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  .flatpickr-calendar.open .flatpickr-months   { grid-area: head; }
  .flatpickr-calendar.open .flatpickr-innerContainer { grid-area: days; }
  .flatpickr-calendar.open .cbs-time-slots {
    grid-area: time;
    border-top: 0 !important;
    border-left: 1px solid var(--line) !important;
    padding: 14px 14px 8px !important;
    background: #fff !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .flatpickr-calendar.open .cbs-time-slots-foot {
    grid-area: foot;
    border-top: 1px solid var(--line);
    padding: 12px 14px !important;
    margin: 0 !important;
    display: flex;
    justify-content: flex-end;
    background: var(--sand);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }
}

/* Tiny phones (<400px) — stack as fallback so neither column gets squashed.
   Above 400px we keep the picker on the right of the days via a compact
   layout (see @media (min-width: 400px) and (max-width: 540px) below). */
@media (max-width: 399px) {
  .flatpickr-calendar.open {
    display: block !important;
  }
}

/* =========================================================
   FLATPICKR — final layout: pickup-day wheel on the left, time wheel
   on the right. Both replace the native Flatpickr UI (months grid +
   day grid are hidden) so we get a compact two-column picker that
   fits in narrow phablet sheets without wrapping.
   ========================================================= */
.flatpickr-calendar.open {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
}
/* Hide Flatpickr's native day grid + month header — replaced by our
   day wheel. We keep the .flatpickr-time element hidden via the existing
   rule below; it never had a slot in our UI. */
.flatpickr-calendar.open > .flatpickr-months,
.flatpickr-calendar.open > .flatpickr-innerContainer {
  display: none !important;
}
/* Day wheel column on the left — takes the leftover horizontal room. */
.flatpickr-calendar.open > .cbs-day-slots {
  order: 1;
  flex: 1 1 175px;
  min-width: 0;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.flatpickr-calendar.open > .cbs-day-slots .cbs-day-slots-head {
  margin: 0 0 10px !important;
}
/* Time wheel column on the right — fixed 105px so the day column gets
   the rest. AM/PM chips and Done sit beneath the wheel. */
.flatpickr-calendar.open > .cbs-time-slots {
  order: 2;
  flex: 0 0 105px !important;
  border-top: 0 !important;
  border-left: 1px solid var(--line) !important;
  padding: 14px 8px 10px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.flatpickr-calendar.open > .cbs-time-slots .cbs-time-slots-head {
  margin: 0 0 10px !important;
  font-size: 11.5px !important;
}
.flatpickr-calendar.open > .cbs-time-slots .cbs-tp { gap: 8px; }
.flatpickr-calendar.open > .cbs-time-slots .cbs-tp-chip {
  height: 36px;
  font-size: 12.5px;
  padding: 0 4px;
}
.flatpickr-calendar.open > .cbs-time-slots .cbs-time-slots-foot {
  border-top: 1px solid var(--line);
  margin: 12px -8px 0 !important;
  padding: 10px 8px 0 !important;
  background: transparent;
  border-radius: 0;
  justify-content: stretch;
}
.flatpickr-calendar.open > .cbs-time-slots .cbs-slot-done {
  width: 100%;
  text-align: center;
  padding: 10px 8px !important;
  font-size: 13px !important;
}

/* Tiny phones (<400px) — stack as fallback. */
@media (max-width: 399px) {
  .flatpickr-calendar.open { display: block !important; }
  .flatpickr-calendar.open > .cbs-day-slots,
  .flatpickr-calendar.open > .cbs-time-slots {
    flex: none !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding-top: 14px !important;
  }
  .flatpickr-calendar.open > .cbs-day-slots { border-top: 0 !important; }
}

/* =========================================================
   FLATPICKR — scroll affordance chevrons on the time wheel.
   Up + down arrows above/below the wheel pulse subtly to communicate
   the "scrollable" affordance — solves the "is this a list or a
   button?" ambiguity at first sight.
   ========================================================= */
.cbs-time-wheel-container {
  position: relative;
  padding: 22px 0;             /* room for the pulsing arrows */
}

.cbs-time-wheel-container::before,
.cbs-time-wheel-container::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 28px;
  height: 18px;
  margin-left: -14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  pointer-events: none;
  opacity: .85;
  z-index: 2;
}

/* Up chevron — sits at the top of the container, hints "scroll up". */
.cbs-time-wheel-container::before {
  top: 2px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AEEF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l8 -3l8 3'/%3E%3C/svg%3E");
  animation: cbs-wheel-hint-up 1.8s ease-in-out infinite;
}

/* Down chevron — sits at the bottom, hints "scroll down". */
.cbs-time-wheel-container::after {
  bottom: 2px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AEEF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8 3l8 -3'/%3E%3C/svg%3E");
  animation: cbs-wheel-hint-down 1.8s ease-in-out infinite;
}

/* Animation: a small lift + fade that loops, so the arrow feels alive
   without being demanding. .9 → 1 → .55 opacity over the cycle. */
@keyframes cbs-wheel-hint-up {
  0%   { transform: translateY(2px);  opacity: .55; }
  35%  { transform: translateY(-2px); opacity: 1; }
  70%  { transform: translateY(0);    opacity: .85; }
  100% { transform: translateY(2px);  opacity: .55; }
}
@keyframes cbs-wheel-hint-down {
  0%   { transform: translateY(-2px); opacity: .55; }
  35%  { transform: translateY(2px);  opacity: 1; }
  70%  { transform: translateY(0);    opacity: .85; }
  100% { transform: translateY(-2px); opacity: .55; }
}

/* Stop the hint pulse once the user has actually scrolled — keeps the
   arrows visible (still a useful scroll indicator) but stops drawing
   attention. JS toggles `.is-scrolled` on first interaction. */
.cbs-time-wheel-container.is-scrolled::before,
.cbs-time-wheel-container.is-scrolled::after {
  animation: none;
  opacity: .55;
}

/* Honor reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .cbs-time-wheel-container::before,
  .cbs-time-wheel-container::after {
    animation: none !important;
    opacity: .65;
  }
}

/* =========================================================
   FLATPICKR — clickable wheel arrow buttons (replaces ::before/::after)
   ========================================================= */
/* Disable the pseudo-element chevrons we added earlier — the buttons
   below take their place and are actually interactive. */
.cbs-time-wheel-container::before,
.cbs-time-wheel-container::after {
  content: none !important;
}

.cbs-time-wheel-arrow {
  all: unset;
  position: absolute;
  left: 50%;
  width: 36px; height: 28px;
  margin-left: -18px;
  display: flex;
  align-items: center; justify-content: center;
  color: var(--secondary);
  cursor: pointer;
  border-radius: 999px;
  z-index: 3;
  transition: background .15s, color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.cbs-time-wheel-arrow:hover {
  background: var(--sand);
  color: var(--primary);
}
.cbs-time-wheel-arrow:active { transform: scale(.92); }
.cbs-time-wheel-arrow svg { display: block; }

.cbs-time-wheel-arrow-up   { top: 0; }
.cbs-time-wheel-arrow-down { bottom: 0; }

/* Idle pulse — subtle bounce so users notice the buttons are clickable.
   Stops once the user has scrolled or clicked once. */
.cbs-time-wheel-container:not(.is-scrolled) .cbs-time-wheel-arrow-up {
  animation: cbs-wheel-arrow-up 1.6s ease-in-out infinite;
}
.cbs-time-wheel-container:not(.is-scrolled) .cbs-time-wheel-arrow-down {
  animation: cbs-wheel-arrow-down 1.6s ease-in-out infinite;
}

@keyframes cbs-wheel-arrow-up {
  0%, 100% { transform: translateY(2px); opacity: .65; }
  40%      { transform: translateY(-3px); opacity: 1; }
  70%      { transform: translateY(0);    opacity: .9; }
}
@keyframes cbs-wheel-arrow-down {
  0%, 100% { transform: translateY(-2px); opacity: .65; }
  40%      { transform: translateY(3px);  opacity: 1; }
  70%      { transform: translateY(0);    opacity: .9; }
}

/* Reduced-motion: no pulse, just static buttons. */
@media (prefers-reduced-motion: reduce) {
  .cbs-time-wheel-container .cbs-time-wheel-arrow {
    animation: none !important;
    opacity: .8;
  }
}

/* =============================================================
   Time picker v2 — hour wheel + minute toggle + AM/PM toggle.
   Hour cells are exactly 40px tall, wrapped in 40px spacers, so
   scrollTop = (hour-1)*40 maps directly to the selected hour and
   the indicator band can never drift away from the centered cell.
   ============================================================= */
.cbs-tp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 6px;
}
.cbs-tp-wheel-wrap {
  position: relative;
  height: 120px;          /* 3 cells visible */
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand, #F4EDE4);
  width: 100%;
}
.cbs-tp-wheel {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Tell the browser this region is for vertical pans only — prevents
     iOS from hijacking the gesture for horizontal page scroll and stops
     the page from scrolling along with the wheel on overscroll. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  /* Soft fade at top/bottom so non-centered hours feel inactive. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.cbs-tp-wheel::-webkit-scrollbar { display: none; }
.cbs-tp-spacer {
  height: 40px;           /* must equal HOUR_CELL in JS */
  flex: 0 0 40px;
  pointer-events: none;
}
.cbs-tp-hour {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #9aa1a8;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  cursor: pointer;
  user-select: none;
  transition: color .14s ease, transform .14s ease;
}
.cbs-tp-hour.is-active {
  color: var(--primary, #0B3C5D);
  font-size: 22px;
  transform: scale(1.02);
}
.cbs-tp-indicator {
  position: absolute;
  left: 6px; right: 6px;
  top: 40px;              /* sits on the middle cell exactly */
  height: 40px;
  border-radius: 10px;
  background: rgba(11, 60, 93, 0.08);
  box-shadow: inset 0 0 0 1px rgba(11, 60, 93, 0.18);
  pointer-events: none;
  z-index: 1;
}
.cbs-tp-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.cbs-tp-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cbs-tp-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(11, 60, 93, 0.18);
  background: #fff;
  color: var(--primary, #0B3C5D);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
}
.cbs-tp-chip:hover { background: var(--sand, #F4EDE4); }
.cbs-tp-chip:active { transform: scale(.97); }
.cbs-tp-chip.is-active {
  background: var(--primary, #0B3C5D);
  color: #fff;
  border-color: var(--primary, #0B3C5D);
}

/* 12h/24h format toggle — smaller, secondary chip pair so it reads as a
   preference rather than a primary value. */
/* 12h/24h segmented control — two joined segments, centered, active filled,
   so the current format is obvious and the other is one tap away. */
.cbs-tp-toggle.cbs-tp-fmt {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  gap: 0;
  border: 1px solid rgba(11, 60, 93, 0.22);
  border-radius: 10px;
  overflow: hidden;
}
.cbs-tp-chip.cbs-tp-chip-fmt {
  height: 30px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cbs-tp-chip.cbs-tp-chip-fmt + .cbs-tp-chip-fmt {
  border-left: 1px solid rgba(11, 60, 93, 0.22);
}
.cbs-tp-chip.cbs-tp-chip-fmt.is-active {
  background: var(--primary, #0B3C5D);
  color: #fff;
}

/* In 24h mode the AM/PM toggle is irrelevant — collapse it cleanly. */
.cbs-time-slots.is-24h .cbs-tp-ampm { display: none; }

/* Stack container: arrows on top + bottom, scrollable wheel in the
   middle. Arrows live OUTSIDE the wheel-wrap so they never overlap a
   cell value (previous version positioned them absolute over the cells
   which made the centered hour briefly hidden behind the chevron). */
.cbs-tp-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
}
.cbs-tp-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--primary, #0B3C5D);
  cursor: pointer;
  opacity: .85;
  transition: opacity .14s ease, transform .12s ease;
}
.cbs-tp-arrow:hover { opacity: 1; }
.cbs-tp-arrow:active { transform: scale(.92); }
.cbs-tp-arrow svg { display: block; }


/* Mobile bottom sheet — same single-column stack, just bump font sizes
   and chip touch targets so they're finger-friendly. Cell height stays
   at 40px (SLOT_CELL in JS) so the math is identical across viewports. */
@media (max-width: 640px) {
  .cbs-tp { gap: 12px; }
  .cbs-tp-hour { font-size: 19px; }
  .cbs-tp-hour.is-active { font-size: 24px; }
  .cbs-tp-chip { height: 44px; font-size: 15px; }
  .cbs-tp-arrow { height: 24px; }
}

/* =============================================================
   Pickup-day picker — three side-by-side wheels (Day · Month · Year).
   Same skeleton as the time wheel; just narrower cells with a smaller
   font so three columns fit the available width.
   ============================================================= */
.cbs-day-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}
.cbs-day-wheel-wrap { width: 100%; }
.cbs-day-cell {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  padding: 0 4px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cbs-day-cell.is-active {
  font-size: 17px !important;
}
/* Days that don't exist in the picked month/year (e.g. Feb 31, Apr 31)
   are kept in the wheel for snap-math stability but visually faded so
   users can see "Feb only goes to 28" at a glance. Pointer-events
   off prevents accidental clicks; the snap-back in refreshDayWheel
   handles fast over-scrolls. */
.cbs-day-cell.cbs-day-disabled {
  opacity: 0.22;
  pointer-events: none;
}
/* The three columns share the indicator and pulse-arrow rules from the
   time picker via the .cbs-tp-* class chain — no extra rules needed. */

/* Phablet (~400–540px) inside the bottom sheet — slim down the time
   column even more; day column gets the rest. */
@media (min-width: 400px) and (max-width: 540px) {
  .flatpickr-calendar.open > .cbs-day-slots {
    padding: 12px 8px 10px;
  }
  .flatpickr-calendar.open > .cbs-time-slots {
    padding: 12px 6px 8px !important;
  }
  .flatpickr-calendar.open > .cbs-time-slots .cbs-tp-hour {
    font-size: 15px !important;
  }
  .flatpickr-calendar.open > .cbs-time-slots .cbs-tp-hour.is-active {
    font-size: 18px !important;
  }
  .cbs-day-cols { gap: 4px; }
  .cbs-day-cell { font-size: 13px !important; padding: 0 2px; }
  .cbs-day-cell.is-active { font-size: 15px !important; }
}

/* =========================================================
   PILL UX/UI v9 — locked 7-column grid + per-cell typography.

   Replaces the v8 ad-hoc width nudges with an explicit grid where
   every value cell renders at its own track width. PICKUP can no
   longer "size from content" and steal width from the date cells.

   Strategy: keep the existing nested route + dates wrappers in
   renderHorizontal (so responsive collapse below lg+ still works
   via Tailwind's sm:col-span-2 rules), but at ≥1024px use
   `display: contents` on those wrappers — their children flow into
   the outer grid as direct cells. Result: 7 real grid columns
   (PICKUP, SWAP, DROP-OFF, ARRIVAL, RETURN, PAX, CTA), each with
   minmax(0, …fr) so content can't push them wider than their track.
   ========================================================= */

@media (min-width: 1024px) {
  /* Flatten the route block (PICKUP + SWAP + DROP-OFF) and the
     dates block (ARRIVAL + RETURN) so their children become direct
     cells of .booking-h-fields. The wrappers themselves contribute
     no box — their padding / borders are re-applied below. */
  .cbs-h .booking-h-pill .booking-h-fields > div.cbs-relative.cbs-grid,
  .cbs-h .booking-h-pill .booking-h-fields > div.cbs-grid.cbs-grid-cols-2 {
    display: contents !important;
  }

  /* The popover ( .h-combo-popover ) is absolutely positioned with
     top: calc(100% + 10px) and was anchored to the route-block
     wrapper (which had cbs-relative). With display:contents on that
     wrapper the popover would fall through to the body — anchor it
     to the .h-combo cell itself instead. */
  .cbs-h .booking-h-pill .h-combo[data-combo] {
    position: relative;
  }

  /* 7-column grid. fr-based tracks with minmax(0, …) so the cell
     width is governed by the track, not by intrinsic content size. */
  .cbs-h .booking-h-pill .booking-h-fields {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.6fr)   /* PICKUP   */
      48px               /* SWAP     */
      minmax(0, 1.6fr)   /* DROP-OFF */
      minmax(0, 1fr)     /* ARRIVAL  */
      minmax(0, 1fr)     /* RETURN   */
      minmax(0, 0.9fr)   /* PAX      */
      auto               /* CTA      */
      !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* Every direct cell child must respect its track. min-width:0
     overrides any intrinsic minimum that long words would impose. */
  .cbs-h .booking-h-pill .booking-h-fields > *,
  .cbs-h .booking-h-pill .booking-h-fields .h-combo {
    min-width: 0 !important;
  }

  /* SWAP — center the 36px button inside the 48px track and drop
     the negative margin that previously overlapped neighbors. */
  .cbs-h .booking-h-pill .booking-h-fields .h-swap {
    align-self: center;
    justify-self: center;
    margin: 0 !important;
  }

  /* CTA — protect the label from clipping. */
  .cbs-h .booking-h-pill .booking-h-fields .h-submit {
    min-width: 200px !important;
  }

  /* Restore the visual dividers that the wrappers used to carry
     (lg:cbs-border-l on the dates and pax wrappers). Now attach to
     the leading cell of each group. */
  .cbs-h .booking-h-pill .booking-h-fields .h-combo[data-date-field-wrap="arrival"],
  .cbs-h .booking-h-pill .booking-h-fields #cbs_pax_field {
    border-left: 1px solid var(--line);
  }

  /* When the user is in one-way mode the RETURN cell collapses via
     [data-tab=oneway] .cbs-return { max-width: 0 }. In one-way the
     ARRIVAL gets the freed space — bump its track. (Pure presentation
     polish; not the cause of any bug.) */
  .cbs-h[data-tab="oneway"] .booking-h-pill .booking-h-fields {
    grid-template-columns:
      minmax(0, 1.6fr) 48px minmax(0, 1.6fr) minmax(0, 1.6fr) 0
      minmax(0, 0.9fr) auto !important;
  }
}

/* At 1024-1279px ARRIVAL/RETURN need close to a full fr each to keep
   "dd/mm/yy" on one line — trim PICKUP/DROP-OFF a touch instead. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cbs-h .booking-h-pill .booking-h-fields {
    grid-template-columns:
      minmax(0, 1.4fr) 48px minmax(0, 1.4fr)
      minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, 0.85fr) auto !important;
  }
  .cbs-h .booking-h-pill .booking-h-fields .h-submit {
    min-width: 180px !important;
  }
}

/* ============= Anti-truncation (was v8) =============
   Defeat the earlier v1-v7 ellipsis rules on .h-combo-display
   inside the pill. Each variant — date vs combo — gets its own
   display mode below. */

/* Labels — short text ("Pickup", "Drop-off", "Pick-up", "Return")
   that should never ellipsize. */
.cbs-h .booking-h-pill .h-combo-label {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Date cells — 2-line stack: dd/mm/yy (hero) + time (subline). */
.cbs-h .booking-h-pill .h-combo-display[data-date-display] {
  display: flex !important;
  flex-direction: column !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
  gap: 1px;
}

/* Date value — line 2 of the date cell. min-width: 7ch is the
   hard contract: "dd/mm/yy" always renders fully. */
.cbs-h .cbs-date-value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 7ch;
}

/* Time — line 3 of the date cell, muted subline. */
.cbs-h .cbs-date-time {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--gray);   /* was --gray-2 #9AA3AD = 2.56:1 on white (fails AA); --gray #6B7280 = 4.83:1 */
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 1px;
}

/* ============= PICKUP / DROP-OFF value typography =============
   Required: text-base, font-semibold, leading-snug, max 2 lines.
   Cell-level container query drops to text-sm when the cell is so
   narrow that 2 lines @ text-base would still overflow — gives a
   graceful step-down before ellipsis kicks in.

   Two DOM shapes:
   - Airport: .h-combo-display holds plain text.
   - Hotel:   .h-combo-display holds <span.h-combo-name>name</span>
              + <span.h-combo-sub>zone</span>.
*/
.cbs-h .booking-h-pill .h-combo[data-combo] {
  container-type: inline-size;
  container-name: combo-cell;
}

/* Airport shape — plain text inside .h-combo-display. */
.cbs-h .booking-h-pill .h-combo[data-combo="airport"] .h-combo-display {
  font-family: var(--font-body);
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink);
  line-height: 1.375 !important;        /* leading-snug */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  white-space: normal !important;
}

/* Hotel shape — flex column so name and sub stack; clamp the name
   to 2 lines, sub stays at 1 line beneath. */
.cbs-h .booking-h-pill .h-combo[data-combo="hotel"] .h-combo-display {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.375;
}
.cbs-h .booking-h-pill .h-combo[data-combo="hotel"] .h-combo-display .h-combo-name {
  font-family: var(--font-body);
  font-size: 16px !important;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.375;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  white-space: normal !important;
}
.cbs-h .booking-h-pill .h-combo[data-combo="hotel"] .h-combo-display .h-combo-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Narrow cell — drop the value to 14px so 2 lines fit before
   ellipsis. Triggers when the combo cell is below ~200px wide. */
@container combo-cell (max-width: 200px) {
  .cbs-h .booking-h-pill .h-combo[data-combo="airport"] .h-combo-display,
  .cbs-h .booking-h-pill .h-combo[data-combo="hotel"] .h-combo-display .h-combo-name {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/* ============= Per-cell border-radius (route block) =============
   PICKUP keeps its left corners rounded (matches the outer pill edge)
   but the right corners go square so the cell is flush against SWAP.
   DROP-OFF goes fully square — flush against SWAP on both sides.
   Both the .h-combo wrapper and the inner .h-combo-trigger carry
   cbs-rounded-pill, so both are zeroed in sync. */
.cbs-h .booking-h-pill .h-combo[data-combo="airport"],
.cbs-h .booking-h-pill .h-combo[data-combo="airport"] .h-combo-trigger {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.cbs-h .booking-h-pill .h-combo[data-combo="hotel"],
.cbs-h .booking-h-pill .h-combo[data-combo="hotel"] .h-combo-trigger {
  border-radius: 0 !important;
}

/* ARRIVAL trigger — square corners (matches DROP-OFF). The cream
   hover/focus bg from cbs-bg-sand stays on, but renders as a
   rectangle now instead of a pill. */
.cbs-h .booking-h-pill .h-combo[data-date-field-wrap="arrival"],
.cbs-h .booking-h-pill .h-combo[data-date-field-wrap="arrival"] .h-combo-trigger {
  border-radius: 0 !important;
}

/* RETURN trigger — fully square (matches DROP-OFF and ARRIVAL). The
   cream hover/focus bg renders as a rectangle. */
.cbs-h .booking-h-pill .h-combo[data-date-field-wrap="return"],
.cbs-h .booking-h-pill .h-combo[data-date-field-wrap="return"] .h-combo-trigger {
  border-radius: 0 !important;
}

/* Nudge the ARRIVAL chevron 4px right; RETURN 8px (per user iter). */
.cbs-h .booking-h-pill .h-combo[data-date-field-wrap="arrival"] .h-combo-trigger > .h-combo-caret {
  transform: translateX(4px);
}
.cbs-h .booking-h-pill .h-combo[data-date-field-wrap="return"] .h-combo-trigger > .h-combo-caret {
  transform: translateX(8px);
}

/* =========================================================
   AIRLINE COMBOBOX — Step 2 flight details.
   Replaces the native <input list=…> datalist (which renders
   inconsistently across browsers) with a custom search dropdown.
   The underlying <input id="cbs_*_airline"> is preserved so the
   existing JS that reads .value keeps working.
   ========================================================= */
.cbs-airline-combo {
  position: relative;
}
.cbs-airline-field {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.cbs-airline-field:focus-within {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(0,174,239,.12);
}
.cbs-airline-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 11px 12px 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.cbs-airline-input::placeholder { color: var(--gray-2); }
.cbs-airline-toggle {
  all: unset;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  cursor: pointer;
  border-left: 1px solid var(--line);
  transition: color .15s, background .15s;
}
.cbs-airline-toggle:hover {
  background: var(--sand);
  color: var(--primary);
}
.cbs-airline-toggle svg {
  transition: transform .2s ease;
  display: block;
}
.cbs-airline-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--primary);
}
.cbs-airline-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.cbs-airline-popover[hidden] { display: none; }
.cbs-airline-list {
  list-style: none;
  margin: 0; padding: 0;
}
.cbs-airline-list li {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
  transition: background .12s, color .12s;
}
.cbs-airline-list li:hover,
.cbs-airline-list li.is-active {
  background: var(--primary);
  color: #fff;
}
.cbs-airline-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--gray-2);
  text-align: center;
}