/* Bayzell Bookings Frontend — v4.1.4 */
:root {
  --bb-brand:    #213448;
  --bb-brand-h:  #182636;
  --bb-brand-lt: #e8eef4;
  --bb-icon:     #9CA3AF;
  --bb-white:    #ffffff;
  --bb-border:   #e2e8f0;
  --bb-text:     #1e293b;
  --bb-muted:    #64748b;
  --bb-light:    #f8faff;
  --bb-success:  #16a34a;
  --bb-danger:   #dc2626;
  --r:           4px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,.11);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.25);
}

/* ── Elementor / theme reset scoped to widget ────────────────────────────── */
body .bb-transfer-widget *,
body .bb-transfer-widget *::before,
body .bb-transfer-widget *::after { box-sizing: border-box !important; }

body .bb-transfer-widget button,
body .bb-transfer-widget [type="submit"],
body .bb-transfer-widget [type="button"] {
  border: none !important; border-radius: 0 !important;
  background-color: transparent !important; color: inherit !important;
  font-family: inherit !important; font-size: inherit !important;
  padding: 0 !important; cursor: pointer;
  display: inline-flex !important; align-items: center;
}
body .bb-transfer-widget input,
body .bb-transfer-widget select {
  border: none !important; outline: none !important;
  background: transparent !important; font-family: inherit !important;
  padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
body .bb-form-input {
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--r) !important; padding: 10px 12px !important;
  background: var(--bb-white) !important;
}
body .bb-form-input:focus { border-color: var(--bb-brand) !important; box-shadow: 0 0 0 3px rgba(33,52,72,.1) !important; }

/* ── Toggle button exceptions ─────────────────────────────────────────────────
   body .bb-transfer-widget .bb-rt-btn has specificity 0,1,2,1
   which beats the blanket reset body .bb-transfer-widget button at 0,1,1,1
   ────────────────────────────────────────────────────────────────────────── */
body .bb-transfer-widget .bb-rt-btn {
  color:         rgba(255,255,255,.65) !important;
  background:    transparent           !important;
  border-radius: 6px                   !important;
  border:        none                  !important;
  padding:       7px 20px              !important;
  font-size:     13px                  !important;
  font-weight:   500                   !important;
  display:       inline-flex           !important;
  align-items:   center;
}
body .bb-transfer-widget .bb-rt-btn.active {
  background:  var(--bb-brand)             !important;
  color:       #fff                        !important;
  font-weight: 700                         !important;
  box-shadow:  0 1px 4px rgba(0,0,0,.25)  !important;
}
body .bb-transfer-widget .bb-rt-btn:not(.active):hover {
  color:      #fff                 !important;
  background: rgba(255,255,255,.1) !important;
}

/* ── Search widget shell ─────────────────────────────────────────────────── */
.bb-transfer-widget { font-family: inherit; max-width: 920px; margin: 0 auto; }

/* ── Round-trip toggle ───────────────────────────────────────────────────── */
.bb-rt-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bb-rt-toggle { display: flex; background: #f1f5f9; border-radius: 6px; padding: 3px; gap: 2px; }
.bb-rt-btn { padding: 6px 16px; border: none !important; border-radius: 5px !important;
             font-size: 13px; font-weight: 500; background: transparent !important;
             cursor: pointer; color: var(--bb-muted) !important; font-family: inherit; transition: all .15s; }
.bb-rt-btn.active { background: var(--bb-brand) !important; color: #fff !important; }

/* ── Search bar pill ─────────────────────────────────────────────────────── */
.bb-search-bar { display: flex !important; align-items: stretch; background: var(--bb-white);
                 border-radius: 8px; box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 10px; }
.bb-search-field { display: flex; flex-direction: column; justify-content: center;
                   padding: 13px 18px; flex: 1; min-width: 0; position: relative; cursor: pointer; }
.bb-search-field:hover { background: #f8faff; }
.bb-search-field + .bb-search-field::before {
  content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--bb-border); }
.bb-sf-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
               color: var(--bb-muted); margin-bottom: 4px; display: block; }
.bb-sf-inner { display: flex; align-items: center; gap: 8px; }
.bb-sf-icon  { display: flex; align-items: center; flex-shrink: 0; }
.bb-sf-select, .bb-sf-input { border: none !important; outline: none !important; background: transparent !important;
  font-size: 14px; font-weight: 500; color: var(--bb-text); font-family: inherit !important;
  width: 100%; padding: 0 !important; appearance: none; -webkit-appearance: none; }
.bb-search-field-sm   { flex: 0 0 auto; min-width: 130px; }
.bb-search-field-time { flex: 0 0 auto; min-width: 110px; }
.bb-search-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 7px;
  background: var(--bb-brand) !important; color: #fff !important;
  border: none !important; padding: 0 !important;
  width: 124px !important; min-width: 124px !important;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer !important; font-family: inherit !important;
  flex-shrink: 0; transition: background .15s;
  border-radius: 0 8px 8px 0 !important; }
.bb-search-btn:hover { background: var(--bb-brand-h) !important; }
.bb-search-btn svg   { stroke: #fff; }
.bb-return-bar { display: flex; background: #f8faff; border: 1px solid var(--bb-border);
                 border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.bb-return-bar .bb-search-field { background: transparent; }

/* ── Steppers — label OUTSIDE card ──────────────────────────────────────── */
.bb-stepper-row { display: grid !important; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; }
.bb-stepper-item { display: flex; flex-direction: column; gap: 5px; }
.bb-sl {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  margin-top: 10px;
  margin-bottom: -8px;
}
.bb-sl-hint {
  font-size: 13px;
  color: #a4acb7;
  margin-top: 2px;
}
.bb-stepper-card { background: var(--bb-white); border-radius: 8px; padding: 9px 10px;
                   box-shadow: var(--shadow-sm); display: flex !important; align-items: center;
                   justify-content: space-between; gap: 6px; }
.bb-stepper-mid  { display: flex; align-items: center; gap: 7px; flex: 1; justify-content: center; }
.bb-stepper-icon { display: flex; align-items: center; }
.bb-stepper-num  { font-size: 18px; font-weight: 700; color: var(--bb-text);
                   min-width: 20px; text-align: center; line-height: 1; }
.bb-step-btn {
  width: 34px !important; height: 34px; border-radius: 50% !important;
  border: 1.5px solid rgba(111,103,103,.5) !important; background: transparent !important;
  color: rgba(111,103,103,.8) !important; cursor: pointer !important; font-size: 22px;
  font-weight: 300; line-height: 1; display: flex !important;
  align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0;
  padding: 0 !important; user-select: none;
}
.bb-step-btn:hover:not(:disabled) {
  background: var(--bb-brand) !important; border-color: var(--bb-brand) !important;
  color: #fff !important; transform: scale(1.08); }
.bb-step-btn:active:not(:disabled) { transform: scale(.96); }
.bb-step-btn:disabled { opacity: .22; cursor: default !important; pointer-events: none; }

/* ── BOOKING MODAL ───────────────────────────────────────────────────────── */
.bb-overlay { position: fixed; inset: 0; z-index: 999990; /* above panels (99999) and Elementor */ display: flex; align-items: center;
              justify-content: center; padding: 20px;
              background: rgba(13,28,40,.65);
              backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
              animation: bb-fade-in .2s ease; }
@keyframes bb-fade-in  { from{opacity:0} to{opacity:1} }
@keyframes bb-slide-up { from{transform:translateY(18px);opacity:.7} to{transform:translateY(0);opacity:1} }
.bb-modal { background: var(--bb-white); border-radius: 12px; width: 100%; max-width: 700px;
            max-height: 92vh; display: flex; flex-direction: column;
            box-shadow: var(--shadow-lg); animation: bb-slide-up .25s ease; }
.bb-modal-hd { display: flex; align-items: center; justify-content: space-between;
               padding: 16px 22px; border-bottom: 1px solid var(--bb-border); flex-shrink: 0; }
.bb-modal-route { font-size: 13px; font-weight: 600; color: var(--bb-text); }
.bb-modal-route span { font-weight: 400; color: var(--bb-muted); }
.bb-modal-actions { display: flex; align-items: center; gap: 10px; }
.bb-modal-back { font-size: 12px; color: var(--bb-muted); background: none !important;
                 border: none !important; cursor: pointer !important; padding: 6px 10px !important;
                 border-radius: var(--r) !important; display: flex; align-items: center; gap: 5px; }
.bb-modal-back:hover { background: var(--bb-light) !important; color: var(--bb-text) !important; }
.bb-modal-close { width: 30px; height: 30px; border-radius: 50% !important; border: 1px solid var(--bb-border) !important;
                  background: transparent !important; cursor: pointer !important;
                  display: flex !important; align-items: center; justify-content: center;
                  color: var(--bb-muted) !important; font-size: 16px; transition: all .15s; }
.bb-modal-close:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; color: var(--bb-danger) !important; }
.bb-modal-steps { display: flex; align-items: center; padding: 10px 22px;
                  border-bottom: 1px solid var(--bb-border); flex-shrink: 0; gap: 0; }
.bb-mstep { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bb-mstep-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
                justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.bb-mstep-dot.active  { background: var(--bb-brand-lt); color: var(--bb-brand); border: 2px solid var(--bb-brand); }
.bb-mstep-dot.done    { background: #dcfce7; color: var(--bb-success); }
.bb-mstep-dot.pending { background: #f1f5f9; color: #94a3b8; }
.bb-mstep-label { color: var(--bb-muted); }
.bb-mstep-label.active { color: var(--bb-text); font-weight: 600; }
.bb-mstep-line { flex: 1; height: 1px; background: var(--bb-border); margin: 0 8px; }
.bb-modal-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.bb-modal-footer { padding: 14px 22px; border-top: 1px solid var(--bb-border);
                   display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }

/* ── Result cards ────────────────────────────────────────────────────────── */
.bb-route-bar { background: #f1f5f9; border-radius: 6px; padding: 8px 12px; font-size: 12px;
                margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
                flex-wrap: wrap; color: var(--bb-muted); }
.bb-route-bar strong { color: var(--bb-text); }
.bb-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .07em; color: #94a3b8; margin: 10px 0 6px; }
.bb-vehicle-card { border: 1px solid var(--bb-border); border-radius: 8px; padding: 14px;
  margin-bottom: 8px; cursor: pointer; transition: all .15s;
  display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; }
.bb-vehicle-card:hover    { border-color: #b8ccd8; background: var(--bb-brand-lt); }
.bb-vehicle-card.selected { border: 2px solid var(--bb-brand); background: var(--bb-brand-lt); }
.bb-vehicle-card.recommended { border: 2px solid var(--bb-brand); }
.bb-v-img { width: 60px; height: 44px; background: #f1f5f9; border-radius: 6px;
            display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.bb-v-img img { width: 100%; height: 100%; object-fit: cover; }
.bb-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
            padding: 2px 8px; border-radius: 100px; margin-bottom: 3px; }
.bb-badge-brand { background: var(--bb-brand-lt); color: var(--bb-brand); }
.bb-v-name { font-weight: 600; font-size: 13px; color: var(--bb-text); }
.bb-v-meta { font-size: 11px; color: var(--bb-muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.bb-v-meta svg { stroke: var(--bb-icon); flex-shrink: 0; }
.bb-v-price { font-size: 20px; font-weight: 700; color: var(--bb-text); text-align: right; white-space: nowrap; }
.bb-v-price-note { font-size: 11px; color: #94a3b8; text-align: right; }

/* ── Booking form ────────────────────────────────────────────────────────── */
.bb-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bb-form-grid-1 { margin-bottom: 12px; }
.bb-form-label  { display: block; font-size: 10px; font-weight: 700; color: var(--bb-muted);
                  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.bb-required { color: var(--bb-danger); }
.bb-form-hint { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.bb-price-summary { background: var(--bb-light); border-radius: 8px; padding: 14px; margin-top: 12px; }
.bb-price-row  { display: flex; justify-content: space-between; font-size: 13px; color: var(--bb-muted); margin-bottom: 5px; }
.bb-price-total{ display: flex; justify-content: space-between; font-size: 17px; font-weight: 700;
                 padding-top: 10px; border-top: 1px solid var(--bb-border); color: var(--bb-text); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.bb-btn-primary { background: var(--bb-brand) !important; color: #fff !important; border: none !important;
  padding: 10px 20px !important; border-radius: var(--r) !important; font-size: 14px;
  font-weight: 600; cursor: pointer !important; font-family: inherit !important;
  display: inline-flex !important; align-items: center; gap: 7px; transition: background .15s; }
.bb-btn-primary:hover { background: var(--bb-brand-h) !important; }
.bb-btn-primary:disabled { opacity: .5; cursor: default !important; }
.bb-btn-primary svg { stroke: #fff; }
.bb-btn-secondary { background: var(--bb-white) !important; color: var(--bb-muted) !important;
  border: 1px solid var(--bb-border) !important; padding: 9px 16px !important;
  border-radius: var(--r) !important; font-size: 13px; cursor: pointer !important;
  font-family: inherit !important; display: inline-flex !important; align-items: center; gap: 6px; }
.bb-btn-secondary:hover { background: #f8faff !important; color: var(--bb-text) !important; }
.bb-start-over { font-size: 12px; color: #94a3b8; background: none !important; border: none !important;
                 cursor: pointer !important; font-family: inherit !important; padding: 0 !important;
                 text-decoration: underline; }
.bb-start-over:hover { color: var(--bb-danger) !important; }

/* ── Awaiting payment ────────────────────────────────────────────────────── */
.bb-await-payment { display: flex; flex-direction: column; align-items: center;
                    justify-content: center; gap: 18px; padding: 48px 20px; text-align: center; }
.bb-spinner { width: 40px; height: 40px; border: 3px solid #e2e8f0;
              border-top-color: var(--bb-brand); border-radius: 50%;
              animation: bb-spin .8s linear infinite; }
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* ── Confirmation screen ─────────────────────────────────────────────────── */
/* Note: the old .bb-confirm-* CSS that lived here was removed in v4.9.4.
   The current confirmation modal uses .bb-cf-* classes (further below) and
   the legacy align-items:center flex rule was making cards inside the
   .bb-confirm wrapper render at content-width instead of stretching. */

/* Print handled via dedicated popup window — see booking.js #bb-ms5-print */

/* ── Utility ─────────────────────────────────────────────────────────────── */
/* Must use !important to beat display:inline-flex !important on .bb-btn-primary */
.bb-hidden { display: none !important; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.bb-empty   { text-align: center; padding: 40px 20px; color: #94a3b8; background: var(--bb-light); border-radius: 8px; font-size: 13px; }
.bb-loading { text-align: center; padding: 40px; color: var(--bb-muted); }


/* ── Custom city dropdown ────────────────────────────────────────────────── */
.bb-cs-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.bb-cs-trigger {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; width: 100%; padding: 0;
}
.bb-cs-text {
  font-size: 14px; font-weight: 500; color: var(--bb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.bb-cs-text.bb-cs-ph { color: #94a3b8; font-weight: 400; }
/* ── Custom dropdown panels — white background with navy brand text ──────── */
.bb-cs-panel {
  position: fixed;        /* escapes overflow:hidden on all ancestors */
  z-index: 99999;
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(33, 52, 72, .14), 0 2px 6px rgba(33, 52, 72, .06);
  min-width: 280px;
  overflow: hidden;
  display: none;
  /* top/left positioned by JS via getBoundingClientRect() */
}
.bb-cs-panel.open  { display: block; animation: bb-fade-in .12s ease-out; }
.bb-cs-filter-wrap { padding: 12px 14px 10px; border-bottom: 1px solid var(--bb-border); }
.bb-cs-filter {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--bb-border) !important;
  outline: none !important;
  background: var(--bb-light) !important;
  color: var(--bb-brand) !important;
  border-radius: 8px !important;
  padding: 9px 13px !important; font-size: 13px; font-family: inherit !important;
  transition: border-color .15s, background .15s;
}
.bb-cs-filter:focus   { border-color: var(--bb-brand) !important; background: #fff !important; }
.bb-cs-filter::placeholder { color: var(--bb-muted); }
.bb-cs-list {
  list-style: none; margin: 0; padding: 6px 0;
  max-height: 240px; overflow-y: auto;
}
.bb-cs-list::-webkit-scrollbar       { width: 6px; }
.bb-cs-list::-webkit-scrollbar-track { background: #f8fafc; }
.bb-cs-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.bb-cs-list::-webkit-scrollbar-thumb:hover { background: var(--bb-muted); }
.bb-cs-list li {
  padding: 10px 16px; font-size: 13.5px;
  color: var(--bb-brand);
  cursor: pointer;
  transition: background .08s ease;
}
.bb-cs-list li:hover { background: var(--bb-brand-lt); }
.bb-cs-list li.sel   { background: var(--bb-brand-lt); color: var(--bb-brand); font-weight: 600; }
.bb-cs-list li.sel::before {
  content: ''; display: inline-block; width: 4px; height: 4px;
  background: var(--bb-brand); border-radius: 50%;
  margin-right: 8px; margin-bottom: 2px; vertical-align: middle;
}

/* "All destinations" option — sits at the top of the tour destination dropdown
   as the default browse-everything choice. Visual separator below it groups
   the catch-all option apart from the specific-city list. */
.bb-cs-list li.bb-cs-all-option {
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.bb-cs-all-hint {
  font-weight: 400;
  font-size: 12px;
  color: #94a3b8;
  margin-left: 2px;
}
.bb-cs-no-results {
  padding: 18px 16px; font-size: 12.5px;
  color: var(--bb-muted); text-align: center;
}


/* ── Overrides v4.1.9 ─────────────────────────────────────────────────────
   Uses body .bb-transfer-widget prefix (0,1,2,1) to beat all earlier rules.
   ────────────────────────────────────────────────────────────────────────── */

/* Toggle buttons — dark navy text, 10px gap */
body .bb-transfer-widget button.bb-rt-btn {
  color:  #213448 !important;
  gap:    10px    !important;
}
/* Active toggle stays legible — white on brand */
body .bb-transfer-widget button.bb-rt-btn.active {
  color: #fff !important;
}

/* Search button */
body .bb-transfer-widget button.bb-search-btn {
  background-color: var(--bb-brand) !important;
  color:            #fff            !important;
  font-weight:      500             !important;
  border-radius:    8px 0 8px 0    !important;
  margin:           10px            !important;
  width:            auto            !important;
  padding:          0 24px         !important;
}

/* Stepper +/− buttons — larger, lighter */
body .bb-transfer-widget button.bb-step-btn {
  font-size:   30px !important;
  font-weight: 400  !important;
  line-height: 0.9  !important;
}

/* Toggle hover — dark navy text on light blue tint */
body .bb-transfer-widget button.bb-rt-btn:not(.active):hover {
  color:      #213448 !important;
  background: #b2c7dd !important;
}


/* ── User-specified overrides ────────────────────────────────────────────── */
.bb-section-label {
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          #004cb7;
  margin:         10px 0 6px;
}
.bb-v-img {
  width:           100px;
  height:          60px;
  background:      #f1f5f9;
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  flex-shrink:     0;
}
.bb-vehicle-card {
  border:         1px solid var(--bb-border);
  border-radius:  8px;
  padding:        14px;
  margin-bottom:  8px;
  cursor:         pointer;
  transition:     all .15s;
  display:        grid;
  grid-template-columns: 100px 1fr auto;
  gap:            12px;
  align-items:    center;
}

/* ── Mobile: stack the name on its own row so it gets full card width ──── */
@media (max-width: 640px) {
  .bb-vehicle-card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "img   price"
      "name  name";
    gap: 10px 14px;
    padding: 12px;
  }
  .bb-vehicle-card > .bb-v-img:first-child { grid-area: img;   }
  .bb-vehicle-card > div:nth-child(2)      { grid-area: name;  min-width: 0; }
  .bb-vehicle-card > div:nth-child(3)      { grid-area: price; justify-self: end; text-align: right; }

  /* Name row gets full width — names won't wrap behind photos anymore */
  .bb-v-name { font-size: 14.5px; line-height: 1.35; }
  .bb-v-meta { font-size: 12.5px; margin-top: 3px; }

  /* Slightly smaller image on mobile so the price has more breathing room */
  .bb-v-img { width: 84px; height: 56px; }

  /* Route-bar gets a touch smaller too — was wrapping awkwardly */
  #bb-route-bar { font-size: 12.5px; line-height: 1.45; }

  /* The duplicated route line in the modal header — hide on mobile since
     #bb-route-bar below it carries the same info more completely */
  #bb-modal-route { display: none; }
}
.bb-start-over {
  padding: 5px 10px !important;
}
.bb-start-over:hover {
  color:            #ffffff         !important;
  background-color: #213448         !important;
  padding:          5px 10px        !important;
  border-radius:    40px            !important;
}

/* ── Phone country selector ──────────────────────────────────────────────── */
/* Phone row — grid so the number input is always visible */
.bb-phone-row {
  display:       grid !important;
  grid-template-columns: 115px 1fr !important;
  border:        1px solid var(--bb-border);
  border-radius: var(--r);
  overflow:      hidden;
}
.bb-phone-row:focus-within {
  border-color: var(--bb-brand);
  box-shadow:   0 0 0 3px rgba(33,52,72,.1);
}
.bb-phone-code-sel {
  border:        none !important;
  outline:       none !important;
  background:    #f8faff !important;
  border-right:  1px solid var(--bb-border) !important;
  border-radius: 0 !important;
  padding:       10px 8px !important;
  font-size:     13px !important;
  color:         var(--bb-text) !important;
  font-family:   inherit !important;
  width:         100%;
  cursor:        pointer;
}
/* Phone number input — grid child, always rendered in its column */
.bb-modal .bb-phone-row input,
.bb-phone-row .bb-phone-num {
  display:       block      !important;
  padding:       10px 12px  !important;
  background:    #fff       !important;
  color:         #1e293b    !important;
  font-size:     14px       !important;
  border:        none       !important;
  border-radius: 0          !important;
  box-shadow:    none       !important;
  width:         100%       !important;
  outline:       none       !important;
  opacity:       1          !important;
  visibility:    visible    !important;
}

/* ── In-modal error / info notification ──────────────────────────────────── */
.bb-modal-notice {
  border-radius:  6px;
  padding:        12px 14px;
  margin-bottom:  14px;
  font-size:      13px;
  display:        flex;
  align-items:    flex-start;
  gap:            10px;
  animation:      bb-fade-in .2s ease;
}
.bb-modal-notice.error {
  background: #fee2e2;
  border:     1px solid #fca5a5;
  color:      var(--bb-danger);
}
.bb-modal-notice.warning {
  background: #fffbeb;
  border:     1px solid #fde68a;
  color:      #92400e;
}
.bb-modal-notice-icon { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ── Search-bar notice (shown before modal, e.g. advance notice error) ───── */
.bb-search-notice {
  display:        flex;
  align-items:    flex-start;
  gap:            12px;
  background:     #fffbeb;
  border:         1px solid #fde68a;
  border-radius:  8px;
  padding:        12px 16px;
  margin-top:     10px;
  font-size:      13px;
  color:          #92400e;
  animation:      bb-fade-in .2s ease;
}
.bb-search-notice.error {
  background:     #fee2e2;
  border-color:   #fca5a5;
  color:          var(--bb-danger);
}
.bb-search-notice-msg { flex: 1; line-height: 1.5; }
.bb-wa-btn {
  display:        inline-flex !important;
  align-items:    center;
  gap:            7px;
  background:     #25D366 !important;
  color:          #fff !important;
  border:         none !important;
  border-radius:  6px !important;
  padding:        7px 14px !important;
  font-size:      13px !important;
  font-weight:    600 !important;
  text-decoration: none;
  white-space:    nowrap;
  cursor:         pointer;
  flex-shrink:    0;
  margin-top:     2px;
  transition:     background .15s;
}
.bb-wa-btn:hover { background: #1ebe59 !important; }
.bb-wa-btn svg   { stroke: #fff; flex-shrink: 0; }

@media(max-width:520px){
  .bb-search-bar { flex-direction: column; }
  .bb-search-field + .bb-search-field::before { display: none; }
  .bb-search-field { border-top: 1px solid var(--bb-border); }
  .bb-search-field:first-child { border-top: none; }
  .bb-search-btn { padding: 14px !important; justify-content: center; }
  .bb-stepper-row { grid-template-columns: 1fr 1fr; }
  .bb-vehicle-card { grid-template-columns: 48px 1fr auto; }
  .bb-form-grid-2 { grid-template-columns: 1fr; }
  .bb-overlay { padding: 0; align-items: flex-end; }
  .bb-modal { border-radius: 12px 12px 0 0; max-height: 96vh; }
}

/* ── Combination vehicle imagery (v4.5.4) ─────────────────────────────────
   Replaces the generic placeholder icon in combo cards.
   - .bb-combo-single  = all same vehicle → one photo + ×N badge
   - .bb-combo-strip   = mixed vehicles  → overlapping thumbnail stack
*/
.bb-combo-single        { position: relative; }
.bb-combo-single img    { width: 100%; height: 100%; object-fit: cover; }
.bb-combo-badge {
  position: absolute;
  right: 4px; bottom: 4px;
  background: var(--bb-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(33, 52, 72, .25);
}

.bb-combo-strip {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent !important; /* override .bb-v-img bg behind thumbs */
}
/* Avatar-stack pattern — second-and-onward thumbs overlap the previous one
   by ~47%, with a 2px white ring acting as the visual separator. Three
   distinct vehicle photos fit cleanly in the 84-100px image slot without
   clipping at either edge:
     Layout width = 38 + (38-18) + (38-18) = 78px  →  fits in 84px (mobile)
*/
.bb-combo-thumb {
  position:        relative;
  width:           38px;
  height:          38px;
  border-radius:   8px;
  overflow:        hidden;
  border:          1px solid #e2e8f0;
  background:      #f1f5f9;
  box-shadow:      0 0 0 2px #ffffff, 0 1px 3px rgba(33, 52, 72, .12);
  flex-shrink:     0;
}
.bb-combo-thumb + .bb-combo-thumb {
  margin-left:     -18px;  /* ~47% overlap — keeps each thumb identifiable */
}
/* z-index ascends left-to-right so the rightmost thumb sits on top —
   reads naturally and the ×N badge (top-right of last thumb) stays visible. */
.bb-combo-thumb:nth-child(1) { z-index: 1; }
.bb-combo-thumb:nth-child(2) { z-index: 2; }
.bb-combo-thumb:nth-child(3) { z-index: 3; }
.bb-combo-thumb:nth-child(4) { z-index: 4; }
.bb-combo-thumb img               { width: 100%; height: 100%; object-fit: cover; }
.bb-combo-thumb svg               { width: 60%; height: 60%; opacity: .5; }
.bb-combo-thumb-badge {
  position:      absolute;
  right:         -2px;
  top:           -2px;          /* moved to top-right — always visible regardless of card width */
  background:    var(--bb-brand);
  color:         #fff;
  font-size:     9px;
  font-weight:   700;
  padding:       1px 5px;
  border-radius: 9px;
  line-height:   1.3;
  box-shadow:    0 1px 2px rgba(0,0,0,.15);
}

/* ── Short-notice UX (v4.6.3) ─────────────────────────────────────────────
   Show-don't-block model: customers see all options, short-notice items get
   an amber pill + Contact button instead of "Select". A banner sits at the
   top of results when ANY option needs advance notice.
*/

/* Top-of-results notice banner */
.bb-results-banner {
  display:        flex;
  align-items:    flex-start;
  gap:            14px;
  background:     #fef3c7;          /* amber 100 */
  border:         1px solid #fcd34d; /* amber 300 */
  border-radius:  10px;
  padding:        14px 16px;
  margin-bottom:  16px;
  animation:      bb-fade-in .15s ease;
}
.bb-results-banner-icon {
  font-size:    22px;
  line-height:  1;
  flex-shrink:  0;
  margin-top:   1px;
}
.bb-results-banner-body { flex: 1; min-width: 0; }
.bb-results-banner-title {
  font-size:    13.5px;
  font-weight:  700;
  color:        #92400e;            /* amber 800 */
  margin-bottom: 3px;
}
.bb-results-banner-msg {
  font-size:    12.5px;
  color:        #78350f;            /* amber 900 */
  line-height:  1.5;
}
.bb-results-banner .bb-wa-btn {
  align-self:   center;
  flex-shrink:  0;
}

/* Short-notice card — same layout, subtle visual differentiator */
.bb-vehicle-card.bb-card-short-notice {
  background:    #fffbeb;            /* amber 50 — very subtle warm tint */
  border-color:  #fde68a;            /* amber 200 */
  cursor:        default;            /* not selectable */
}
.bb-vehicle-card.bb-card-short-notice:hover {
  background:    #fef3c7;            /* slight darken on hover, not blue */
  border-color:  #fcd34d;
  transform:     none;               /* don't lift like normal cards */
  box-shadow:    0 1px 3px rgba(0,0,0,.05);
}

/* Right-side action column for short-notice cards */
.bb-v-action-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
}

/* The "Needs Xh notice" pill */
.bb-notice-pill {
  display:        inline-block;
  background:     #fef3c7;
  color:          #92400e;
  font-size:      10.5px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding:        3px 9px;
  border-radius:  12px;
  white-space:    nowrap;
  border:         1px solid #fcd34d;
}

/* Smaller WhatsApp button used inside cards (vs. the larger banner button) */
.bb-wa-btn-sm {
  display:        inline-flex !important;
  align-items:    center;
  gap:            6px;
  background:     #25D366 !important;
  color:          #fff !important;
  border:         none !important;
  border-radius:  6px !important;
  padding:        6px 12px !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  text-decoration: none !important;
  white-space:    nowrap;
  cursor:         pointer;
  transition:     background .15s;
  margin-top:     2px;
}
.bb-wa-btn-sm:hover { background: #1ebe59 !important; }
.bb-wa-btn-sm svg   { stroke: #fff; flex-shrink: 0; }

/* ── Language toggle (EN/ES) on the Step 3 contact form ────────────────── */
/* Sits inside the Details step on a light card background, next to the email.
   Visible/active state is the navy brand; inactive is muted gray. */
.bb-lang-toggle-light {
  display:        inline-flex;
  align-items:    center;
  gap:            0;
  background:     #f1f5f9;
  border:         1px solid #e2e8f0;
  border-radius:  8px;
  padding:        3px;
  margin-top:     4px;
}
.bb-lang-btn-light {
  background:    transparent;
  border:        none;
  color:         #64748b;
  font-size:     13px;
  font-weight:   600;
  padding:       6px 18px;
  border-radius: 5px;
  cursor:        pointer;
  transition:    color .15s, background .15s, box-shadow .15s;
  font-family:   inherit;
  min-width:     90px;
}
.bb-lang-btn-light:hover            { color: var(--bb-text); }
.bb-lang-btn-light.active {
  background: var(--bb-brand);
  color:      #fff;
  box-shadow: 0 1px 3px rgba(33, 52, 72, .15);
}

/* ── Mobile modal: prevent header from being cropped by browser chrome ──── */
@media (max-width: 640px) {
  /* The overlay reduces its padding so the modal can occupy more visible
     space, and uses dynamic viewport units that respect the dynamic
     address-bar height (was 92vh, which overflowed when Chrome's bar appeared). */
  .bb-overlay {
    padding: 8px;
    align-items: flex-start;  /* anchor to top so header is always reachable */
  }
  .bb-modal {
    max-height: calc(100dvh - 16px);
    margin-top: max(8px, env(safe-area-inset-top));  /* clears iOS notch + Android dynamic bars */
  }
  /* Header gets a little more vertical breathing room on mobile */
  .bb-modal-hd {
    padding: 14px 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Confirmation screen — branded card aesthetic matching email templates.
   Reset old .bb-confirm-* styles since the JS no longer emits them.
   Layout mirrors the booking_confirmed_customer email:
     - Outer modal is a card (white, rounded — already)
     - Body background is white (the "page" inside the card)
     - Sections (success banner, trip details, pickup/dropoff, total) are
       light-gray sub-cards floating on the white body, with margin between them
   This creates the same "everything floats inside a card" feeling as the email.
───────────────────────────────────────────────────────────────────────── */
#bb-confirm-body {
  padding: 0;
  background: #ffffff;
  margin: -22px;            /* negate the modal-body padding so header is flush */
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.bb-cf-header {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  /* background-color set inline (brand color from settings) */
}

/* Success banner — light-green sub-card, floating with margin (not edge-to-edge) */
.bb-cf-success {
  display:        flex;
  align-items:    center;
  gap:            14px;
  background:     #f0fdf4;
  border:         1px solid #bbf7d0;
  border-radius:  8px;
  padding:        14px 18px;
  margin:         20px 26px 0;     /* gap below the navy header */
}
.bb-cf-success-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bb-cf-success-title {
  font-size: 16px;
  font-weight: 700;
  color: #14532d;
  line-height: 1.2;
}
.bb-cf-success-sub {
  font-size: 12.5px;
  color: #15803d;
  margin-top: 3px;
  line-height: 1.4;
}
.bb-cf-success-sub strong { color: #14532d; }

/* Generic content card — light gray, floats on the white body */
.bb-cf-card {
  background:    #f8fafc;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  padding:       16px 18px;
  margin:        14px 26px 0;
}
.bb-cf-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 10px;
}
.bb-cf-addr-label {
  font-size: 12.5px;
  color: #64748b;
}
.bb-cf-addr-value {
  font-size: 13.5px;
  color: #1e293b;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1.4;
}

/* Total card — white background, accent brand-color border (stands out as the
   payment confirmation, just like the email's total card) */
.bb-cf-total {
  background:    #ffffff;
  border:        2px solid #213448;      /* overridden inline with brand color */
  border-radius: 8px;
  margin:        14px 26px 0;
  padding:       14px 18px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.bb-cf-total-label  { font-size: 14px; font-weight: 700; color: #0f172a; }
.bb-cf-total-amount { font-size: 19px; font-weight: 700; color: #15803d; }

.bb-cf-note {
  margin:     16px 26px 22px;
  font-size:  12.5px;
  color:      #64748b;
  text-align: center;
  font-style: italic;
}

/* Mobile: tighter side gutters */
@media (max-width: 640px) {
  .bb-cf-card,
  .bb-cf-total,
  .bb-cf-success     { margin-left: 16px; margin-right: 16px; }
  .bb-cf-header      { padding-left: 18px; padding-right: 18px; }
  .bb-cf-note        { margin-left: 16px; margin-right: 16px; }
  .bb-cf-success-title { font-size: 15px; }
}

/* Inside the confirmation cards, table rows shouldn't show as a grid — the
   email uses clean spacing, no visible row borders. */
.bb-cf-card table,
.bb-cf-total table { border-collapse: collapse; border: none; }
.bb-cf-card table td,
.bb-cf-total table td { border: none; background: transparent; }

/* ──────────────────────────────────────────────────────────────────────────
   TOURS — Magazine card layout (v4.19.0 Phase 1)
   Design intent: luxury but modern. Large hero image, generous whitespace,
   tight typographic hierarchy. Cards expand inline to reveal full
   description, highlights, inclusions/exclusions, and vehicle selection.
   ────────────────────────────────────────────────────────────────────── */

.bb-tour-card {
  background:       #ffffff;
  border:           1px solid #e2e8f0;
  border-radius:    14px;
  overflow:         hidden;
  margin-bottom:    16px;
  transition:       border-color .2s, box-shadow .2s, transform .15s;
  box-shadow:       0 1px 2px rgba(15, 23, 42, .04);
}
.bb-tour-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); border-color: #cbd5e1; }
.bb-tour-card.selected {
  border-color:  var(--bb-brand, #213448);
  box-shadow:    0 0 0 2px var(--bb-brand, #213448), 0 6px 24px rgba(15, 23, 42, .12);
}

/* Hero — the marketing centerpiece of the card */
.bb-tc-hero {
  position:    relative;
  width:       100%;
  height:      220px;
  background:  linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  overflow:    hidden;
}
.bb-tc-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.bb-tour-card:hover .bb-tc-hero img { transform: scale(1.03); }
.bb-tc-hero-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; opacity: .4;
}
.bb-tc-hero-fallback svg { width: 64px; height: 64px; }

/* Body — content area */
.bb-tc-body { padding: 20px 22px 22px; }

/* Badges row above the title — duration, start time, pickup-match cue */
.bb-tc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bb-tc-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  background:     #f1f5f9;
  color:          #475569;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .02em;
  padding:        4px 10px;
  border-radius:  12px;
  text-transform: uppercase;
}
.bb-tc-badge-duration { background: #fef3c7; color: #92400e; }
.bb-tc-badge-pickup   { background: #dcfce7; color: #166534; text-transform: none; letter-spacing: 0; }

/* Title + destination subtitle */
.bb-tc-name {
  margin:      0 0 4px;
  font-size:   22px;
  font-weight: 700;
  color:       #0f172a;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.bb-tc-dest {
  font-size:   13px;
  color:       #64748b;
  margin-bottom: 14px;
  font-style:  italic;
}

/* Highlights preview (top 4) — feels editorial, not bullety */
.bb-tc-highlights {
  list-style: none;
  padding:    0;
  margin:     0 0 18px;
}
.bb-tc-highlights li {
  position:    relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size:   13.5px;
  color:       #334155;
  line-height: 1.5;
}
.bb-tc-highlights li::before {
  content:    '✓';
  position:   absolute;
  left:       0;
  color:      var(--bb-brand, #213448);
  font-weight: 700;
}

/* Footer — price + CTA */
.bb-tc-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             12px;
  padding-top:     16px;
  border-top:      1px solid #f1f5f9;
}
.bb-tc-price-from {
  font-size:   11px;
  color:       #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-right: 2px;
}
.bb-tc-price-val {
  font-size:   24px;
  font-weight: 800;
  color:       #0f172a;
  letter-spacing: -.02em;
}
.bb-tc-price-currency { font-size: 13px; color: #64748b; font-weight: 600; }
/* .bb-tc-toggle button — the "View details & book" button on tour result cards.
   Every property carries !important because this button renders inside pages
   that may load theme/page-builder CSS with high-specificity button styles
   (Elementor, WPBakery, Beaver Builder). Without !important the theme's
   button styling bleeds through, breaking the design in normal, hover, and
   focus states. Explicit focus outline replaces the browser default so
   keyboard navigation still shows a clear indicator. */
.bb-tc-toggle {
  background:      var(--bb-brand, #213448) !important;
  color:           #ffffff                  !important;
  border:          2px solid #213448        !important;
  padding:         10px 18px                !important;
  border-radius:   8px                      !important;
  font-size:       13px                     !important;
  font-weight:     600                      !important;
  cursor:          pointer                  !important;
  transition:      background .15s, transform .1s, box-shadow .15s !important;
  white-space:     nowrap                   !important;
  text-decoration: none                     !important;
  text-transform:  none                     !important;
  letter-spacing:  normal                   !important;
  box-shadow:      none                     !important;
  outline:         none                     !important;
}
.bb-tc-toggle:hover {
  background:      #0f172a                  !important;
  color:           #ffffff                  !important;
  border-color:    #0f172a                  !important;
  transform:       none                     !important;
  box-shadow:      none                     !important;
}
.bb-tc-toggle:focus,
.bb-tc-toggle:focus-visible {
  background:      var(--bb-brand, #213448) !important;
  color:           #ffffff                  !important;
  outline:         2px solid #94a3b8        !important;
  outline-offset:  2px                      !important;
  box-shadow:      none                     !important;
}
.bb-tc-toggle:active {
  background:      #0f172a                  !important;
  color:           #ffffff                  !important;
  transform:       translateY(1px)          !important;
}

/* Inline expanded detail view */
.bb-tc-detail {
  margin-top:    18px;
  padding-top:   18px;
  border-top:    1px solid #f1f5f9;
}
.bb-tc-detail-section { margin-bottom: 20px; }
.bb-tc-detail-section:last-child { margin-bottom: 0; }
.bb-tc-detail-section h4 {
  margin:      0 0 10px;
  font-size:   11px;
  font-weight: 700;
  color:       #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bb-tc-description {
  font-size:   14px;
  line-height: 1.65;
  color:       #334155;
}
.bb-tc-description p { margin: 0 0 10px; }
.bb-tc-description p:last-child { margin-bottom: 0; }

.bb-tc-list { list-style: none; padding: 0; margin: 0; }
.bb-tc-list li {
  position:     relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size:    13.5px;
  color:        #334155;
  line-height:  1.55;
}
.bb-tc-list li::before {
  content:     '•';
  position:    absolute;
  left:        6px;
  color:       #94a3b8;
}
.bb-tc-list-check li::before { content: '✓'; color: #16a34a; left: 4px; font-weight: 700; }
.bb-tc-list-x     li::before { content: '✕'; color: #dc2626; left: 4px; font-weight: 700; }

/* Pickup note callout — soft, non-alarming */
.bb-tc-pickup-note {
  background:    #f0f9ff;
  border:        1px solid #bae6fd;
  color:         #075985;
  padding:       10px 14px;
  border-radius: 8px;
  font-size:     13px;
  line-height:   1.5;
  margin-bottom: 20px;
}

/* Vehicle selector grid inside detail view */
.bb-tc-vehicles-section h4 { margin-bottom: 12px; }
.bb-tc-vehicles {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   10px;
}
/* .bb-tc-vehicle — vehicle option pills inside the tour detail view. Same
   defensive treatment as .bb-tc-toggle: theme/page-builder button styles
   otherwise bleed through on landing pages that share their asset pipeline. */
.bb-tc-vehicle {
  background:      #ffffff                  !important;
  border:          4px solid #213448        !important;
  border-radius:   10px                     !important;
  padding:         .35rem 0.8rem            !important;
  cursor:          pointer                  !important;
  text-align:      center                   !important;
  transition:      border-color .15s, background .15s, transform .12s, box-shadow .15s !important;
  font-family:     inherit                  !important;
  color:           #0f172a                  !important;
  text-decoration: none                     !important;
  text-transform:  none                     !important;
  letter-spacing:  normal                   !important;
  outline:         none                     !important;
  box-shadow:      none                     !important;
}
.bb-tc-vehicle:hover {
  background:      #f8fafc                  !important;
  border-color:    #213448                  !important;
  color:           #0f172a                  !important;
  transform:       none                     !important;
  box-shadow:      none                     !important;
}
.bb-tc-vehicle:focus,
.bb-tc-vehicle:focus-visible {
  background:      #ffffff                  !important;
  border-color:    #213448                  !important;
  color:           #0f172a                  !important;
  outline:         2px solid #94a3b8        !important;
  outline-offset:  2px                      !important;
  box-shadow:      none                     !important;
}

/* Selected state — strong brand fill + white text for unambiguous affordance.
   Switches the whole button to brand color so the customer's choice is obvious
   at a glance, with text bumped to bolder weights and white for full contrast.
   All properties !important-marked so themes can't hijack the selected look. */
.bb-tc-vehicle.selected,
.bb-tc-vehicle.selected:hover,
.bb-tc-vehicle.selected:focus {
  border-color:  var(--bb-brand, #213448)   !important;
  background:    var(--bb-brand, #213448)   !important;
  box-shadow:    0 6px 16px rgba(33, 52, 72, .18) !important;
  transform:     translateY(-1px)           !important;
}
.bb-tc-vehicle.selected .bb-tc-vehicle-name,
.bb-tc-vehicle.selected .bb-tc-vehicle-cap,
.bb-tc-vehicle.selected .bb-tc-vehicle-price {
  color: #ffffff;
}
.bb-tc-vehicle.selected .bb-tc-vehicle-name  { font-weight: 700; }
.bb-tc-vehicle.selected .bb-tc-vehicle-cap   { font-weight: 600; opacity: .94; }
.bb-tc-vehicle.selected .bb-tc-vehicle-price { font-weight: 800; }

/* Text trio !important-hardened: Hello/Elementor base button rules set
   color on <button> (and #fff on hover), which inherits into children.
   The cap was also plain WRONG (#ffffff on a white card — invisible, the
   v4.35.30 "Up to X guests" bug); slate is the intended resting color. */
.bb-tc-vehicle-img   { display: block; height: 46px; width: auto; max-width: 90%; object-fit: contain; margin: 2px auto 6px; }
.bb-tc-vehicle-name  { font-size: 14px; font-weight: 600; color: #0f172a !important; margin-bottom: 4px; }
.bb-tc-vehicle-cap   { font-size: 12.5px; color: #64748b !important; margin-bottom: 8px; font-weight: 600; }
.bb-tc-vehicle-price { font-size: 17px; font-weight: 700; color: var(--bb-brand, #213448) !important; }
.bb-tc-vehicle.selected .bb-tc-vehicle-name,
.bb-tc-vehicle.selected .bb-tc-vehicle-cap,
.bb-tc-vehicle.selected .bb-tc-vehicle-price { color: #ffffff !important; }
.bb-tc-vehicle.selected .bb-tc-vehicle-img { filter: brightness(0) invert(1); opacity: .95; }

/* ── Theme-bleed guard (v4.35.30) ─────────────────────────────────────────
   Hello/Elementor ships base rules for button/[type=button]/[type=submit]
   (transparent bg, #c36 border/text, #c36 fill + white text on hover).
   Our own button classes declare their properties, but Hello's attribute
   selectors TIE our class selectors on specificity and its stylesheet can
   load later — so bleed shows on buttons with NO class, and on the
   white-space/border-radius Hello forces everywhere. Scope: our overlays
   only; deliberately conservative so it can never fight .bb-btn styling. */
#bb-overlay button:not([class]), #bb-tour-payment-overlay button:not([class]) {
  background-color: transparent !important;
  border: none !important;
  color: inherit !important;
}
#bb-overlay button:not([class]):hover, #bb-overlay button:not([class]):focus,
#bb-tour-payment-overlay button:not([class]):hover,
#bb-tour-payment-overlay button:not([class]):focus {
  background-color: rgba(0,0,0,.05) !important;
  color: inherit !important;
}
/* Hello forces white-space:nowrap + 3px radius on every button — our card
   buttons need wrapping and our radius scale. */
#bb-overlay button, #bb-tour-payment-overlay button {
  white-space: normal;
}

/* Combo variant — bordered emphasis differentiates multi-vehicle bundles from
   single-vehicle options. Thicker brand-color border reads as "this is a
   premium bundle" without needing a filled background. */
.bb-tc-vehicle-combo {
  background:    #fafbfc;
  border:        4px solid #213448 !important;
  border-radius: 10px !important;
  padding:       .35rem 0.8rem !important;
}
.bb-tc-vehicle-combo:hover { background: #f1f5f9; }
/* Selected combo — same brand-fill treatment as single, keeps the thick border
   so the "bundle" identity is preserved even when selected. */
.bb-tc-vehicle-combo.selected {
  background:   var(--bb-brand, #213448);
}

/* Helper line shown above the combos list when group exceeds single-vehicle capacity */
.bb-tc-combo-explain {
  font-size:    13px;
  color:        #64748b;
  margin:       -4px 0 12px;
  line-height:  1.5;
}

/* Mobile tuning — keep the editorial feel without overwhelming small screens */
@media (max-width: 640px) {
  .bb-tc-hero { height: 180px; }
  .bb-tc-body { padding: 16px 16px 18px; }
  .bb-tc-name { font-size: 19px; }
  .bb-tc-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .bb-tc-toggle { width: 100%; text-align: center; }
  .bb-tc-price { text-align: left; }
  .bb-tc-vehicles { grid-template-columns: 1fr 1fr; }
}


/* ── Payment gateway selector (v4.29.0) ─────────────────────────────────────
   Only rendered when PayPal is enabled. !important throughout for the same
   reason as the other modal controls: theme/page-builder button and label
   styles otherwise bleed into these on landing pages. */
.bb-gateway-select { margin: 4px 0 14px !important; }
.bb-gateway-label {
  font-size: 11.5px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .06em;
  color: #64748b !important; margin-bottom: 8px !important;
}
.bb-gateway-options { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.bb-gateway-opt {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  background: #ffffff !important;
  transition: border-color .12s, background .12s !important;
  margin: 0 !important;
}
.bb-gateway-opt:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; }
.bb-gateway-opt.bb-gateway-active {
  border-color: var(--bb-brand, #213448) !important;
  background: rgba(33, 52, 72, .03) !important;
}
.bb-gateway-opt input[type="radio"] {
  width: 18px !important; height: 18px !important; margin: 2px 0 0 !important;
  accent-color: var(--bb-brand, #213448); flex-shrink: 0; cursor: pointer !important;
}
.bb-gateway-opt-body { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0; }
.bb-gateway-opt-title { font-size: 14.5px !important; font-weight: 600 !important; color: #0f172a !important; }
.bb-gateway-opt-sub   { font-size: 12.5px !important; color: #64748b !important; }


/* ── Agency credit strip (v4.34.3) ──────────────────────────────────────────
   Sits directly above the modal footer. Previously a bare muted line that read
   as an afterthought; given a tinted band, a top rule and a brand dot it reads
   as part of the product's chrome — present without competing with the Pay
   button. !important throughout for the usual reason: this renders inside
   pages whose theme may style generic divs. */
.bb-modal-credit {
  border-top: 1px solid #e2e8f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding: 9px 18px 8px !important;
  margin: 0 !important;
}
.bb-modal-credit > div {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 !important;
}
/* Brand dot — small mark of authorship, reads as a logo bullet */
.bb-modal-credit > div::before {
  content: '' !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--bb-brand, #213448) !important;
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  .bb-modal-credit { padding: 8px 12px !important; }
  .bb-modal-credit > div { font-size: 11px !important; }
}

/* ── iOS Safari date/time input fix (v4.35.25) ────────────────────────────
   -webkit-appearance:none on date/time inputs strips iOS's native control
   chrome, and an EMPTY date input on iOS renders no placeholder — its
   internal value element collapses to zero height, leaving an invisible,
   effectively untappable field ("can't select a date on iPhone").
   Restoring a real content box + min-height on the shadow value element is
   the canonical fix; the flat visual design is preserved. */
input[type="date"].bb-sf-input,
input[type="time"].bb-sf-input {
  display: block;
  width: 100%;
  min-height: 28px;                 /* real tap target even when empty */
  line-height: 28px;
}
input[type="date"].bb-sf-input::-webkit-date-and-time-value,
input[type="time"].bb-sf-input::-webkit-date-and-time-value {
  text-align: left;                 /* iOS centers by default — match desktop */
  min-height: 1.4em;                /* prevents the empty-value collapse */
}
@supports (-webkit-touch-callout: none) {
  /* iOS only: 16px prevents Safari's auto-zoom jump on focus */
  input[type="date"].bb-sf-input,
  input[type="time"].bb-sf-input { font-size: 16px; }
}