/* Yapi Zone Base Booking Widget v1.2 */


/* ── ROOT ── */
#yzb-booking-root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  max-width: 100% !important; /* FIXED: was 540px — now fills the card container */
  margin: 0 !important;       /* FIXED: was 0 auto — no longer centres itself */
  display: block !important;
  color: #1a1a2e !important;
  box-sizing: border-box !important;
}
#yzb-booking-root * { box-sizing: border-box !important; }

/* ── CARD ── */
#yzb-booking-root .yzb-card {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
  overflow: visible !important;
  position: relative !important;
}

/* ── HEADER ── */
#yzb-booking-root .yzb-header {
  background: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%) !important;
  padding: 18px 20px 16px !important;
  border-radius: 16px 16px 0 0 !important;
}
#yzb-booking-root .yzb-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
#yzb-booking-root .yzb-brand-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .02em !important;
}

/* ── STEP INDICATORS ── */
#yzb-booking-root .yzb-steps {
  display: flex !important;
  align-items: center !important;
}
#yzb-booking-root .yzb-step {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.45) !important;
  white-space: nowrap !important;
}
#yzb-booking-root .yzb-step span {
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.5) !important;
  flex-shrink: 0 !important;
}
#yzb-booking-root .yzb-step--active        { color: #fff !important; font-weight: 700 !important; }
#yzb-booking-root .yzb-step--active span   { background: #fff !important; color: #15803d !important; }
#yzb-booking-root .yzb-step--done          { color: rgba(255,255,255,.65) !important; }
#yzb-booking-root .yzb-step--done span     { background: rgba(255,255,255,.25) !important; color: #fff !important; font-size: 8px !important; }
#yzb-booking-root .yzb-step-line           { flex: 1 !important; height: 1px !important; background: rgba(255,255,255,.2) !important; margin: 0 6px !important; min-width: 12px !important; }
#yzb-booking-root .yzb-step-line--done     { background: rgba(255,255,255,.5) !important; }

/* ── CARD BODY PADDING ── */
#yzb-booking-root .yzb-card > *:not(.yzb-header) {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
#yzb-booking-root .yzb-card > *:last-child { padding-bottom: 22px !important; }

/* ── TABS ── */
#yzb-booking-root .yzb-tabs {
  display: flex !important;
  background: #f3f4f6 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  margin: 18px 20px 0 !important;
  gap: 4px !important;
}
#yzb-booking-root .yzb-tab {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 7px !important;
  padding: 9px 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
}
#yzb-booking-root .yzb-tab--active {
  background: #fff !important;
  color: #14532d !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.1) !important;
}

/* ── SECTION LABELS ── */
#yzb-booking-root .yzb-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 18px 20px 8px !important;
  display: block !important;
}

/* ── ADDRESS BLOCK ── */
#yzb-booking-root .yzb-address-block {
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: visible !important;
  margin: 0 20px !important;
}
#yzb-booking-root .yzb-address-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  overflow: hidden !important; /* FIXED: prevents label overflowing the row */
}
#yzb-booking-root .yzb-dot {
  width: 11px !important; height: 11px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
#yzb-booking-root .yzb-dot--green { background: #16a34a !important; box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important; }
#yzb-booking-root .yzb-dot--red   { background: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
#yzb-booking-root .yzb-addr-divider {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 0 14px 0 37px !important;
}
#yzb-booking-root .yzb-addr-input {
  flex: 1 1 0% !important;    /* FIXED: was flex:1 — 0% basis prevents overflow */
  min-width: 0 !important;    /* FIXED: allows input to shrink below content size */
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #111827 !important;
  outline: none !important;
  font-family: inherit !important;
  display: block !important;
  width: 100% !important;
}
#yzb-booking-root .yzb-addr-input::placeholder { color: #9ca3af !important; }

/* ── DATE / TIME / PAX ── */
#yzb-booking-root .yzb-dtp-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 20px !important;
}
#yzb-booking-root .yzb-dtp-full { grid-column: 1 / -1 !important; }
#yzb-booking-root .yzb-dtp-field > label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 5px !important;
}
#yzb-booking-root .yzb-dtp-field input[type="date"],
#yzb-booking-root .yzb-dtp-field input[type="time"] {
  display: block !important;
  width: 100% !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 11px !important;
  font-size: 13px !important;
  color: #111827 !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .2s !important;
}
#yzb-booking-root .yzb-dtp-field input:focus { border-color: #15803d !important; }

/* ── PAX STEPPER ── */
#yzb-booking-root .yzb-pax-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
}
#yzb-booking-root .yzb-pax-control button {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  transition: all .15s !important;
  flex-shrink: 0 !important;
}
#yzb-booking-root .yzb-pax-control button:hover { border-color: #15803d !important; color: #15803d !important; }
#yzb-booking-root #yzb-pax-display {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #14532d !important;
  min-width: 24px !important;
  text-align: center !important;
  display: inline-block !important;
}
#yzb-booking-root .yzb-pax-label {
  font-size: 13px !important;
  color: #6b7280 !important;
}

/* ── ERROR ELEMENTS (hidden until JS shows them) ── */
#yzb-booking-root .yzb-field-error {
  display: none !important;
  margin: 8px 20px 0 !important;
  padding: 10px 14px !important;
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #dc2626 !important;
}
#yzb-booking-root .yzb-form-error {
  display: none !important;
  margin: 0 20px 10px !important;
  padding: 10px 14px !important;
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #dc2626 !important;
}

/* ── PRIMARY BUTTON ── */
#yzb-booking-root .yzb-btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: calc(100% - 40px) !important;
  margin: 16px 20px 0 !important;
  background: linear-gradient(135deg, #15803d, #14532d) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
  box-shadow: 0 4px 14px rgba(21,128,61,.3) !important;
  text-align: center !important;
}
#yzb-booking-root .yzb-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(21,128,61,.4) !important; }
#yzb-booking-root .yzb-btn-arrow { font-size: 16px !important; transition: transform .2s !important; }
#yzb-booking-root .yzb-btn-primary:hover .yzb-btn-arrow { transform: translateX(4px) !important; }

/* ── WHATSAPP ── */
#yzb-booking-root .yzb-whatsapp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: calc(100% - 40px) !important;
  margin: 10px 20px 0 !important;
  padding: 11px !important;
  border: 1.5px solid #22c55e !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #166534 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  cursor: pointer !important;
}
#yzb-booking-root .yzb-whatsapp-btn:hover { background: #f0fdf4 !important; }

/* ── TRUST BADGES ── */
#yzb-booking-root .yzb-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px 14px !important;
  padding: 12px 20px 0 !important;
}
#yzb-booking-root .yzb-trust-badges span { font-size: 11px !important; color: #9ca3af !important; }

/* ── BACK LINK ── */
#yzb-booking-root .yzb-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: none !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  padding: 14px 20px 0 !important;
  margin: 0 !important;
  transition: color .2s !important;
}
#yzb-booking-root .yzb-back-link:hover { color: #111827 !important; }

/* ── JOURNEY PILL ── */
#yzb-booking-root .yzb-journey-pill {
  margin: 0 20px !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
}
#yzb-booking-root .yzb-pill-route {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #166534 !important;
  flex-wrap: wrap !important;
  margin-bottom: 3px !important;
}
#yzb-booking-root .yzb-pill-meta {
  display: flex !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #4ade80 !important;
}
#yzb-booking-root .yzb-pill-dot { opacity: .5 !important; }

/* ── VEHICLE GRID ── */
#yzb-booking-root .yzb-vehicle-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 20px !important;
}
#yzb-booking-root .yzb-vcard {
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all .2s !important;
  display: flex !important;
  flex-direction: column !important;
}
#yzb-booking-root .yzb-vcard:hover { border-color: #16a34a !important; box-shadow: 0 4px 16px rgba(21,128,61,.15) !important; transform: translateY(-2px) !important; }
#yzb-booking-root .yzb-vcard--selected { border-color: #15803d !important; box-shadow: 0 0 0 1px #15803d, 0 4px 16px rgba(21,128,61,.2) !important; }

/* Vehicle image area */
#yzb-booking-root .yzb-vcard-img-wrap {
  width: 100% !important;
  height: 100px !important;
  background: #f1f5f9 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
#yzb-booking-root .yzb-vcard-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .3s !important;
}
#yzb-booking-root .yzb-vcard:hover .yzb-vcard-img { transform: scale(1.04) !important; }
#yzb-booking-root .yzb-vcard-img-fallback {
  font-size: 40px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Vehicle card body */
#yzb-booking-root .yzb-vcard-body { padding: 10px 10px 10px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
#yzb-booking-root .yzb-vcard-top  { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 5px !important; }
#yzb-booking-root .yzb-vcard-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  display: inline-block !important;
}
#yzb-booking-root .yzb-vcard--selected .yzb-vcard-badge { background: #15803d !important; color: #fff !important; }
#yzb-booking-root .yzb-vcard-sel-tick {
  width: 18px !important; height: 18px !important;
  background: #15803d !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#yzb-booking-root .yzb-vcard-name { font-size: 12px !important; font-weight: 700 !important; color: #111827 !important; margin-bottom: 2px !important; display: block !important; }
#yzb-booking-root .yzb-vcard-sub  { font-size: 10px !important; color: #9ca3af !important; display: block !important; margin-bottom: 8px !important; flex: 1 !important; }
#yzb-booking-root .yzb-vcard-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: auto !important; }
#yzb-booking-root .yzb-vcard-pax   { font-size: 10px !important; color: #6b7280 !important; }
#yzb-booking-root .yzb-vcard-price { font-size: 13px !important; font-weight: 800 !important; color: #14532d !important; }

/* ── VEHICLE RECAP (step 3) ── */
#yzb-booking-root .yzb-vehicle-recap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 20px !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 12px !important;
  padding: 12px !important;
  overflow: hidden !important;
}
#yzb-booking-root .yzb-recap-img {
  width: 80px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: #e5e7eb !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#yzb-booking-root .yzb-recap-info { flex: 1 !important; min-width: 0 !important; }
#yzb-booking-root .yzb-recap-name { font-size: 13px !important; font-weight: 700 !important; color: #14532d !important; }
#yzb-booking-root .yzb-recap-sub  { font-size: 11px !important; color: #6b7280 !important; margin-top: 2px !important; }
#yzb-booking-root .yzb-recap-price { font-size: 16px !important; font-weight: 800 !important; color: #14532d !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* ── FIELDS (step 3) ── */
#yzb-booking-root .yzb-field { margin: 0 20px 12px !important; }
#yzb-booking-root .yzb-field label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 5px !important;
}
#yzb-booking-root .yzb-field input {
  display: block !important;
  width: 100% !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  color: #111827 !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .2s !important;
}
#yzb-booking-root .yzb-field input:focus { border-color: #15803d !important; }
#yzb-booking-root .yzb-err { display: block !important; font-size: 11px !important; color: #dc2626 !important; margin-top: 3px !important; min-height: 14px !important; }

/* ── PAY BUTTON ── */
#yzb-booking-root .yzb-btn-pay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: calc(100% - 40px) !important;
  margin: 4px 20px 0 !important;
  padding: 15px !important;
  background: linear-gradient(135deg, #15803d, #14532d) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
  box-shadow: 0 4px 14px rgba(21,128,61,.35) !important;
}
#yzb-booking-root .yzb-btn-pay:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(21,128,61,.45) !important; }
#yzb-booking-root .yzb-btn-pay:disabled { background: #9ca3af !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important; }

/* ── SECURE NOTE ── */
#yzb-booking-root .yzb-secure-note {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #9ca3af !important;
  margin: 8px 20px 0 !important;
}

/* ── LOADING ── */
#yzb-booking-root .yzb-loading {
  display: none !important;
  text-align: center !important;
  padding: 20px !important;
}
#yzb-booking-root .yzb-spinner {
  width: 36px !important; height: 36px !important;
  border: 3px solid #e5e7eb !important;
  border-top-color: #15803d !important;
  border-radius: 50% !important;
  animation: yzb-spin .7s linear infinite !important;
  margin: 0 auto 10px !important;
  display: block !important;
}
#yzb-booking-root .yzb-loading p { font-size: 13px !important; color: #6b7280 !important; }
@keyframes yzb-spin { to { transform: rotate(360deg); } }

/* ── STEP 4 — CONFIRMATION ── */
#yzb-booking-root .yzb-success-banner {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 20px !important;
  padding: 16px !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 12px !important;
}
#yzb-booking-root .yzb-success-icon {
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#yzb-booking-root .yzb-success-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #14532d !important;
  margin-bottom: 2px !important;
}
#yzb-booking-root .yzb-success-sub { font-size: 12px !important; color: #4ade80 !important; }

#yzb-booking-root .yzb-ref-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 12px 20px 0 !important;
  padding: 11px 14px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
}
#yzb-booking-root .yzb-ref-label { font-size: 11px !important; color: #9ca3af !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
#yzb-booking-root .yzb-ref-val   { font-size: 15px !important; font-weight: 800 !important; color: #14532d !important; font-family: monospace !important; }

#yzb-booking-root .yzb-confirm-vehicle {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 12px 20px 0 !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
}
#yzb-booking-root .yzb-conf-img {
  width: 90px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  flex-shrink: 0 !important;
}
#yzb-booking-root .yzb-conf-vname { font-size: 14px !important; font-weight: 700 !important; color: #111827 !important; }
#yzb-booking-root .yzb-conf-vsub  { font-size: 12px !important; color: #9ca3af !important; margin-top: 3px !important; }

#yzb-booking-root .yzb-summary-rows {
  margin: 12px 20px 0 !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#yzb-booking-root .yzb-srow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13px !important;
}
#yzb-booking-root .yzb-srow:last-child { border-bottom: none !important; }
#yzb-booking-root .yzb-srow-label { color: #9ca3af !important; font-weight: 500 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
#yzb-booking-root .yzb-srow span:last-child { color: #111827 !important; font-weight: 600 !important; text-align: right !important; }
#yzb-booking-root .yzb-srow--total {
  background: #f0fdf4 !important;
  padding: 13px 14px !important;
}
#yzb-booking-root .yzb-srow--total .yzb-srow-label { color: #166534 !important; font-weight: 700 !important; font-size: 14px !important; }
#yzb-booking-root .yzb-srow--total span:last-child  { color: #14532d !important; font-size: 18px !important; font-weight: 800 !important; }

/* ── Google Places pac-container override ── */
.pac-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 1.5px solid #e5e7eb !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.15) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}
.pac-item { padding: 10px 14px !important; font-size: 13px !important; color: #374151 !important; border-top: 1px solid #f3f4f6 !important; cursor: pointer !important; }
.pac-item:first-child { border-top: none !important; }
.pac-item:hover, .pac-item-selected { background: #f0fdf4 !important; }
.pac-item-query { font-weight: 700 !important; color: #14532d !important; font-size: 13px !important; }
.pac-matched    { font-weight: 700 !important; color: #15803d !important; }
.pac-icon       { display: none !important; }

/* ── Responsive ── */
@media (max-width: 400px) {
  #yzb-booking-root .yzb-vehicle-grid { grid-template-columns: 1fr !important; }
  #yzb-booking-root .yzb-dtp-grid     { grid-template-columns: 1fr !important; }
  #yzb-booking-root .yzb-steps        { gap: 0 !important; }
  #yzb-booking-root .yzb-step         { font-size: 9px !important; }
  #yzb-booking-root .yzb-step-line    { min-width: 8px !important; margin: 0 4px !important; }
}

/* ── v2.0 Additions ─────────────────────────────────────────── */

/* ── Zone Select ── */
#yzb-booking-root .yzb-zone-select {
  display: block !important;
  width: 100% !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: #111827 !important;
  font-family: inherit !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
  appearance: auto !important;
}
#yzb-booking-root .yzb-zone-select:focus { border-color: #15803d !important; }
#yzb-booking-root .yzb-zone-info {
  display: none !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #15803d !important;
  padding: 5px 10px !important;
  background: #f0fdf4 !important;
  border-radius: 6px !important;
  border: 1px solid #86efac !important;
}

/* ── Extras Grid ── */
#yzb-booking-root .yzb-extras-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 20px !important;
}
#yzb-booking-root .yzb-extra-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f9fafb !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 14px 10px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  text-align: center !important;
  position: relative !important;
}
#yzb-booking-root .yzb-extra-card input[type=checkbox] {
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  width: 16px !important; height: 16px !important;
  cursor: pointer !important;
  accent-color: #15803d !important;
}
#yzb-booking-root .yzb-extra-card:hover { border-color: #15803d !important; background: #f0fdf4 !important; }
#yzb-booking-root .yzb-extra-card--selected { border-color: #15803d !important; background: #f0fdf4 !important; box-shadow: 0 0 0 1px #15803d !important; }
#yzb-booking-root .yzb-extra-free { border-style: dashed !important; }
#yzb-booking-root .yzb-extra-free.yzb-extra-card--selected { border-style: solid !important; }
#yzb-booking-root .yzb-extra-icon { font-size: 28px !important; line-height: 1 !important; }
#yzb-booking-root .yzb-extra-name { font-size: 12px !important; font-weight: 700 !important; color: #111827 !important; }
#yzb-booking-root .yzb-extra-price { font-size: 12px !important; font-weight: 700 !important; color: #15803d !important; }
#yzb-booking-root .yzb-extra-price.free { color: #16a34a !important; background: #dcfce7 !important; padding: 1px 7px !important; border-radius: 99px !important; font-size: 10px !important; }

/* ── Extras Running Total ── */
#yzb-booking-root .yzb-extras-total {
  margin: 14px 20px 0 !important;
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#yzb-booking-root .yzb-et-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #374151 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
#yzb-booking-root .yzb-et-row:last-child { border-bottom: none !important; }
#yzb-booking-root .yzb-et-total {
  background: #f0fdf4 !important;
  font-weight: 800 !important;
  color: #14532d !important;
  font-size: 15px !important;
}

/* ── Zone pill in journey header ── */
#yzb-booking-root #yzb-pill-zone {
  font-size: 11px !important;
  color: #15803d !important;
  font-weight: 700 !important;
}
/* ── Select Car Button ── */
#yzb-booking-root .yzb-select-car-btn {
  display: block !important;
  width: calc(100% - 20px) !important;
  margin: 0 10px 10px !important;
  padding: 9px 10px !important;
  background: #fff !important;
  color: #15803d !important;
  border: 2px solid #15803d !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: center !important;
  transition: all .2s !important;
  letter-spacing: .02em !important;
}
#yzb-booking-root .yzb-select-car-btn:hover {
  background: #f0fdf4 !important;
}
#yzb-booking-root .yzb-select-car-btn--selected {
  background: #15803d !important;
  color: #fff !important;
}
#yzb-booking-root .yzb-select-car-btn--selected:hover {
  background: #14532d !important;
}