/* Chauffeur Booking Pro v7 */
.cbp-booking{max-width:1180px;margin:40px auto;background:var(--cbp-bg);color:#fff;padding:34px;border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.28);font-family:Arial,Helvetica,sans-serif}
.cbp-booking *{box-sizing:border-box}
.cbp-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:32px}
.cbp-progress-step{background:var(--cbp-inactive);color:#111;border-radius:16px;padding:12px 8px;text-align:center;font-weight:700}
.cbp-progress-step span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#111;color:#fff;margin-right:6px}
.cbp-progress-step.active{background:var(--cbp-primary);color:#fff}.cbp-progress-step.active span{background:#fff;color:#111}
.cbp-step{display:none}.cbp-step.active{display:block}
.cbp-booking h2{color:var(--cbp-primary);font-size:30px;margin:0 0 8px}.cbp-subtitle{color:#ddd;margin:0 0 24px}
.cbp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.cbp-booking label{display:block;font-weight:700;margin-bottom:7px}
.cbp-booking input,.cbp-booking select,.cbp-booking textarea{width:100%;border:1px solid rgba(255,255,255,.16);background:#1b1b1b;color:#fff;border-radius:13px;padding:14px 15px;font-size:15px;outline:none}
.cbp-booking input:focus,.cbp-booking select:focus,.cbp-booking textarea:focus{border-color:var(--cbp-primary);box-shadow:0 0 0 3px rgba(200,169,106,.18)}
.cbp-map-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 12px}.cbp-map-toolbar button{border:1px solid rgba(255,255,255,.18);background:#202020;color:#fff;padding:11px 16px;border-radius:12px;cursor:pointer;font-weight:800}
.cbp-map-toolbar button.active,.cbp-map-toolbar button:hover{background:var(--cbp-primary);border-color:var(--cbp-primary)}
.cbp-map{height:360px;width:100%;border-radius:18px;overflow:hidden;background:#1b1b1b;border:1px solid rgba(255,255,255,.14);margin-bottom:20px}
.cbp-map-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#ddd;text-align:center;padding:20px}
.cbp-distance-box,.cbp-summary{margin-top:22px;background:#191919;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px;display:grid;gap:10px}.cbp-distance-box span{color:var(--cbp-primary);font-weight:900}
.cbp-vehicle-grid,.cbp-payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.cbp-vehicle-card,.cbp-payment-card{position:relative;background:#181818;border:2px solid rgba(255,255,255,.14);border-radius:18px;padding:18px;cursor:pointer;transition:.25s}
.cbp-vehicle-card:hover,.cbp-vehicle-card.selected,.cbp-payment-card:hover,.cbp-payment-card.selected{border-color:var(--cbp-primary);transform:translateY(-3px)}
.cbp-vehicle-card input,.cbp-payment-card input{position:absolute;top:14px;left:14px;width:auto}
.cbp-vehicle-card img,.cbp-car-placeholder{width:100%;height:130px;object-fit:cover;border-radius:14px;margin-bottom:14px;background:#242424}.cbp-car-placeholder{display:flex;align-items:center;justify-content:center;font-size:52px}
.cbp-vehicle-card h3,.cbp-payment-card h3{color:var(--cbp-primary);margin:0 0 10px}.cbp-vehicle-card p,.cbp-payment-card p{margin:5px 0;color:#eee}.cbp-payment-card strong{font-size:28px;color:#fff;display:block;margin-top:14px}
.cbp-actions{margin-top:28px;display:flex;justify-content:space-between;gap:12px}.cbp-actions button{border:0;background:var(--cbp-primary);color:#fff;padding:14px 28px;border-radius:13px;font-weight:800;cursor:pointer}.cbp-prev{background:#fff!important;color:#111!important}
.cbp-summary-row{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.cbp-summary-row:last-child{border-bottom:0}.cbp-total{font-size:24px;color:var(--cbp-primary);font-weight:900}
.cbp-message{margin-top:15px;font-weight:700}.cbp-message.success{color:#90ee90}.cbp-message.error{color:#ff8b8b}
@media(max-width:768px){.cbp-booking{padding:22px;margin:20px 10px}.cbp-progress{grid-template-columns:1fr}.cbp-grid{grid-template-columns:1fr}.cbp-actions{flex-direction:column}.cbp-actions button,.cbp-map-toolbar button{width:100%}.cbp-map{height:300px}}


/* ===== v8 Mobile UX Improvements ===== */
.cbp-booking {
  width: min(100%, 1180px);
  overflow: hidden;
}

.cbp-booking input,
.cbp-booking select,
.cbp-booking textarea,
.cbp-booking button {
  max-width: 100%;
}

.cbp-hidden-radio {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.cbp-select-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

.cbp-vehicle-card.selected .cbp-select-badge,
.cbp-payment-card.selected .cbp-select-badge {
  background: var(--cbp-primary);
  border-color: var(--cbp-primary);
  color: #fff;
}

.cbp-vehicle-card.selected,
.cbp-payment-card.selected {
  border-color: var(--cbp-primary) !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,.18), 0 18px 45px rgba(0,0,0,.30);
}

.cbp-vehicle-card.selected::after,
.cbp-payment-card.selected::after {
  content: "✓";
  position: absolute;
  top: 55px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cbp-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.cbp-progress-step small {
  display: inline-block;
  vertical-align: middle;
}

@media(max-width: 768px) {
  .cbp-booking {
    margin: 18px 10px !important;
    padding: 18px 14px !important;
    border-radius: 18px !important;
    width: calc(100% - 20px) !important;
  }

  .cbp-progress {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    gap: 8px !important;
    padding: 0 0 10px;
    margin-bottom: 20px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cbp-progress::-webkit-scrollbar {
    display: none;
  }

  .cbp-progress-step {
    min-width: 92px;
    flex: 0 0 auto;
    padding: 9px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap;
    box-shadow: none !important;
  }

  .cbp-progress-step span {
    width: 22px !important;
    height: 22px !important;
    margin-right: 4px !important;
    font-size: 12px !important;
  }

  .cbp-progress-step small {
    font-size: 11px;
  }

  .cbp-booking h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .cbp-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }

  .cbp-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .cbp-booking input,
  .cbp-booking select,
  .cbp-booking textarea {
    min-height: 48px;
    padding: 12px 13px !important;
    font-size: 14px !important;
    border-radius: 11px !important;
  }

  .cbp-map-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 16px 0 10px !important;
  }

  .cbp-map-toolbar button {
    width: 100% !important;
    padding: 12px !important;
    font-size: 13px !important;
  }

  .cbp-map {
    height: 255px !important;
    border-radius: 14px !important;
  }

  .cbp-distance-box,
  .cbp-summary {
    padding: 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    gap: 8px !important;
  }

  .cbp-vehicle-grid,
  .cbp-payment-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
  }

  .cbp-vehicle-card,
  .cbp-payment-card {
    padding: 14px !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  .cbp-vehicle-card:hover,
  .cbp-payment-card:hover {
    transform: none !important;
  }

  .cbp-vehicle-card img,
  .cbp-car-placeholder {
    height: 145px !important;
    margin-bottom: 12px !important;
  }

  .cbp-vehicle-card h3,
  .cbp-payment-card h3 {
    font-size: 20px !important;
    padding-right: 92px;
  }

  .cbp-vehicle-card p,
  .cbp-payment-card p {
    font-size: 14px !important;
  }

  .cbp-payment-card strong {
    font-size: 24px !important;
  }

  .cbp-select-badge {
    top: 12px;
    right: 12px;
    padding: 6px 11px;
    font-size: 11px;
  }

  .cbp-vehicle-card.selected::after,
  .cbp-payment-card.selected::after {
    top: 48px;
    right: 16px;
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .cbp-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .cbp-actions button {
    width: 100% !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  .cbp-summary-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    word-break: break-word;
  }

  .cbp-total {
    font-size: 21px !important;
  }
}

@media(max-width: 390px) {
  .cbp-booking {
    margin: 14px 6px !important;
    padding: 16px 10px !important;
    width: calc(100% - 12px) !important;
  }

  .cbp-progress-step {
    min-width: 84px;
  }

  .cbp-vehicle-card img,
  .cbp-car-placeholder {
    height: 125px !important;
  }
}


/* ===== v9 Fare Selection Reliability ===== */
.cbp-vehicle-card,
.cbp-payment-card {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cbp-vehicle-card *,
.cbp-payment-card * {
  pointer-events: none;
}

.cbp-vehicle-card,
.cbp-payment-card {
  pointer-events: auto;
}

/* ===== v10 Ride Tabs + Hourly UX + Overflow Fix ===== */
.cbp-booking, .cbp-booking * { box-sizing: border-box !important; }
.cbp-booking { max-width: 100% !important; }
.cbp-ride-type-wrap { grid-column: 1 / -1; }
.cbp-ride-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #151515;
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px;
  border-radius: 16px;
}
.cbp-ride-tab {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: #202020 !important;
  color: #fff !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: .25s ease;
  box-shadow: none !important;
}
.cbp-ride-tab.active, .cbp-ride-tab:hover, .cbp-ride-tab:focus {
  background: var(--cbp-primary) !important;
  border-color: var(--cbp-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.cbp-hourly-mode #cbp_dropoff_wrap,
.cbp-hourly-mode .cbp-map-area { display: none !important; }
.cbp-hourly-mode #cbp_hours_wrap { display: block !important; }
.cbp-hourly-note {
  background: rgba(200,169,106,.12);
  border: 1px solid rgba(200,169,106,.25);
  color: #fff;
  border-radius: 14px;
  padding: 13px 15px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}
@media(max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  .cbp-booking {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .cbp-step, .cbp-grid, .cbp-distance-box, .cbp-summary, .cbp-map-area, .cbp-map, .cbp-map-toolbar, .cbp-vehicle-grid, .cbp-payment-grid, .cbp-actions {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .cbp-booking input, .cbp-booking select, .cbp-booking textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .cbp-ride-tabs { grid-template-columns: 1fr !important; gap: 8px; padding: 7px; }
  .cbp-ride-tab { width: 100% !important; padding: 12px !important; font-size: 14px !important; }
  .cbp-progress { max-width: 100% !important; }
  .cbp-progress-step { min-width: 78px !important; padding: 8px 7px !important; }
  .cbp-progress-step small { font-size: 10px !important; }
}
@media(max-width: 380px) {
  .cbp-booking {
    max-width: calc(100vw - 8px) !important;
    width: calc(100vw - 8px) !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}


/* ===== v11 Step 1 Ride + Vehicle Flow ===== */
.cbp-section-subheading {
  margin-top: 28px !important;
  margin-bottom: 18px !important;
  font-size: 24px !important;
}

.cbp-step-one-grid {
  margin-bottom: 10px;
}

.cbp-step:first-of-type .cbp-vehicle-grid {
  margin-top: 10px;
}

.cbp-step:first-of-type .cbp-distance-box {
  margin-top: 24px;
}

@media(max-width: 768px) {
  .cbp-section-subheading {
    font-size: 21px !important;
    margin-top: 22px !important;
  }
}


/* ===== v12 Cleaner Fare + Luggage Field ===== */
.cbp-distance-box span#cbp_total_fare,
.cbp-distance-box span#cbp_total_fare_2,
.cbp-distance-box span#cbp_payment_total,
.cbp-distance-box span#cbp_payment_now,
.cbp-distance-box span#cbp_balance_later {
  font-size: 22px;
}
@media(max-width:768px){
  .cbp-distance-box span#cbp_total_fare,
  .cbp-distance-box span#cbp_total_fare_2 {
    font-size: 20px !important;
  }
}


/* ===== v16 Embedded Stripe Payment ===== */
.cbp-embedded-payment-box {
  margin-top: 22px;
  background: #181818;
  border: 1px solid rgba(200,169,106,.25);
  border-radius: 18px;
  padding: 22px;
}

.cbp-embedded-payment-box h3 {
  color: var(--cbp-primary);
  margin: 0 0 8px;
  font-size: 22px;
}

.cbp-embedded-payment-box p {
  color: #ccc;
  margin: 0 0 18px;
  line-height: 1.6;
}

#cbp-payment-element {
  min-height: 80px;
}

@media(max-width:768px){
  .cbp-embedded-payment-box {
    padding: 16px;
    border-radius: 15px;
  }
}


/* ===== v20 Modern Inputs, Icons, First 20km Pricing & Extras ===== */
.cbp-input-icon {
  position: relative;
  width: 100%;
}

.cbp-input-icon > span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff !important;
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  opacity: .95;
  pointer-events: none;
}

.cbp-textarea-icon > span {
  top: 22px;
  transform: none;
}

.cbp-input-icon input,
.cbp-input-icon textarea {
  padding-left: 44px !important;
}

.cbp-booking input::placeholder,
.cbp-booking textarea::placeholder {
  color: rgba(255,255,255,.58);
}

.cbp-vehicle-card p:first-of-type {
  color: #fff;
  font-weight: 800;
}

.cbp-extras-wrap {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.cbp-extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 12px;
  margin-top: 8px;
}

.cbp-extra-card {
  position: relative;
  background: #181818;
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px 16px 16px 48px;
  cursor: pointer;
  transition: .25s ease;
  min-height: 72px;
}

.cbp-extra-card input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cbp-extra-check {
  position: absolute;
  left: 15px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  transition: .25s ease;
}

.cbp-extra-card.selected {
  border-color: var(--cbp-primary) !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,.16);
}

.cbp-extra-card.selected .cbp-extra-check {
  background: var(--cbp-primary);
  border-color: var(--cbp-primary);
  color: #fff !important;
}

.cbp-extra-card strong {
  display: block;
  color: #fff;
  margin-bottom: 5px;
}

.cbp-extra-card small {
  color: var(--cbp-primary);
  font-weight: 800;
}

@media(max-width:768px){
  .cbp-input-icon > span {
    left: 12px;
    font-size: 15px;
  }
  .cbp-input-icon input,
  .cbp-input-icon textarea {
    padding-left: 40px !important;
  }
  .cbp-extras-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== v21 Fare Display Rules ===== */
.cbp-step-one-hourly-fare {
  margin-top: 22px !important;
}

.cbp-fare-note,
.cbp-hourly-card-note {
  display: block;
  color: #cfcfcf !important;
  font-size: 13px !important;
  line-height: 1.5;
  margin-top: 6px;
}

.cbp-hourly-card-note {
  color: var(--cbp-primary) !important;
  font-weight: 700;
}

.cbp-booking:not(.cbp-hourly-mode) .cbp-step-one-hourly-fare {
  display: none !important;
}


/* ===== v22 Correct 20km Base Pricing Note ===== */
.cbp-pricing-note {
  color: #cfcfcf;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}


/* ===== v23 Trip First + Vehicle Benefits ===== */
.cbp-vehicle-price-line {
  margin: 8px 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: var(--cbp-primary);
}

.cbp-vehicle-benefits {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.cbp-vehicle-benefits span {
  color: #ddd;
  font-size: 13px;
  line-height: 1.45;
}

.cbp-trip-fare-box {
  margin-top: 18px !important;
}

.cbp-hourly-mode .cbp-map-area,
.cbp-hourly-mode #cbp_dropoff_wrap {
  display: none !important;
}

.cbp-hourly-mode .cbp-trip-fare-box #cbp_distance_text {
  color: #fff !important;
}

@media(max-width:768px){
  .cbp-vehicle-price-line {
    font-size: 18px;
  }
  .cbp-vehicle-benefits span {
    font-size: 12.5px;
  }
}


/* ===== v24 Clean Trip Left + Map Right Layout ===== */
.cbp-trip-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 24px;
  align-items: start;
}

.cbp-trip-form-panel,
.cbp-trip-map-panel {
  min-width: 0;
}

.cbp-trip-form-panel {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
}

.cbp-trip-map-panel {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
}

.cbp-trip-map-panel .cbp-map {
  height: 500px;
  margin-bottom: 0;
}

.cbp-input-icon {
  position: relative;
}

.cbp-input-icon .cbp-white-icon,
.cbp-input-icon > span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  filter: grayscale(1) brightness(3) contrast(2);
  font-size: 16px;
  z-index: 3;
  pointer-events: none;
  opacity: .95;
}

.cbp-textarea-icon .cbp-white-icon,
.cbp-textarea-icon > span {
  top: 18px;
  transform: none;
}

.cbp-input-icon input,
.cbp-input-icon select,
.cbp-input-icon textarea {
  padding-left: 44px !important;
}

.cbp-vehicle-benefits span {
  color: #e7e7e7 !important;
}

.cbp-trip-fare-box {
  margin-top: 16px !important;
}

@media(max-width: 992px) {
  .cbp-trip-layout {
    grid-template-columns: 1fr;
  }

  .cbp-trip-map-panel .cbp-map {
    height: 340px;
  }
}

@media(max-width: 768px) {
  .cbp-trip-form-panel,
  .cbp-trip-map-panel {
    padding: 12px;
    border-radius: 15px;
  }

  .cbp-trip-map-panel .cbp-map {
    height: 285px !important;
  }

  .cbp-input-icon .cbp-white-icon,
  .cbp-input-icon > span {
    left: 12px;
    font-size: 15px;
  }

  .cbp-input-icon input,
  .cbp-input-icon select,
  .cbp-input-icon textarea {
    padding-left: 40px !important;
  }
}

/* ===== v25 UI Polish: premium icons, shorter map, auto vehicle selection ===== */
.cbp-input-icon .cbp-white-icon {
  width: 28px !important;
  height: 28px !important;
  left: 11px !important;
  border-radius: 50%;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  filter: none !important;
  opacity: 1 !important;
}

.cbp-input-icon .cbp-white-icon::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

.cbp-i-clock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 10.2V7h-2v6l5 3 .9-1.6-3.9-2.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 10.2V7h-2v6l5 3 .9-1.6-3.9-2.2Z'/%3E%3C/svg%3E");
}

.cbp-i-calendar::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2Zm13 8H4v10h16V10Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2Zm13 8H4v10h16V10Z'/%3E%3C/svg%3E");
}

.cbp-i-pin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
}

.cbp-i-flag::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h12l-2 4 2 4H7v10H5V3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h12l-2 4 2 4H7v10H5V3Z'/%3E%3C/svg%3E");
}

.cbp-i-user::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-9 9a9 9 0 0 1 18 0H3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-9 9a9 9 0 0 1 18 0H3Z'/%3E%3C/svg%3E");
}

.cbp-i-mail::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm9 8 8-6H4l8 6Zm0 2-8-6v8h16V9l-8 6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm9 8 8-6H4l8 6Zm0 2-8-6v8h16V9l-8 6Z'/%3E%3C/svg%3E");
}

.cbp-i-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.7 0 1.3.6 1.3 1.3v3.6c0 .7-.6 1.4-1.3 1.4C10.4 22 2 13.6 2 3.3 2 2.6 2.6 2 3.3 2H7c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.7 4.1.1.4 0 .9-.3 1.2l-2.1 2.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.7 0 1.3.6 1.3 1.3v3.6c0 .7-.6 1.4-1.3 1.4C10.4 22 2 13.6 2 3.3 2 2.6 2.6 2 3.3 2H7c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.7 4.1.1.4 0 .9-.3 1.2l-2.1 2.2Z'/%3E%3C/svg%3E");
}

.cbp-i-users::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2a7 7 0 0 0-7 7h14a7 7 0 0 0-7-7Zm8-1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 2c-.8 0-1.5.1-2.2.4A8.8 8.8 0 0 1 19 20h3a5 5 0 0 0-5-6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2a7 7 0 0 0-7 7h14a7 7 0 0 0-7-7Zm8-1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 2c-.8 0-1.5.1-2.2.4A8.8 8.8 0 0 1 19 20h3a5 5 0 0 0-5-6Z'/%3E%3C/svg%3E");
}

.cbp-i-bag::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4h6v3h4v15H5V7h4V4Zm2 3h2V6h-2v1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4h6v3h4v15H5V7h4V4Zm2 3h2V6h-2v1Z'/%3E%3C/svg%3E");
}

.cbp-i-note::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3h16v18H4V3Zm4 5h8V6H8v2Zm0 4h8v-2H8v2Zm0 4h5v-2H8v2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3h16v18H4V3Zm4 5h8V6H8v2Zm0 4h8v-2H8v2Zm0 4h5v-2H8v2Z'/%3E%3C/svg%3E");
}

.cbp-input-icon input,
.cbp-input-icon select,
.cbp-input-icon textarea {
  padding-left: 50px !important;
}

.cbp-trip-map-panel .cbp-map {
  height: 390px !important;
}

.cbp-auto-next-note {
  text-align: center;
  color: #cfcfcf;
  font-size: 14px;
  margin: 18px 0 0;
}

.cbp-vehicle-actions {
  justify-content: center !important;
}

.cbp-vehicle-actions .cbp-prev {
  max-width: 220px;
  margin: 0 auto;
}

@media(max-width: 992px) {
  .cbp-trip-map-panel .cbp-map {
    height: 310px !important;
  }
}

@media(max-width:768px){
  .cbp-trip-map-panel .cbp-map {
    height: 250px !important;
  }

  .cbp-input-icon .cbp-white-icon {
    width: 26px !important;
    height: 26px !important;
    left: 9px !important;
  }

  .cbp-input-icon input,
  .cbp-input-icon select,
  .cbp-input-icon textarea {
    padding-left: 44px !important;
  }
}


/* ===== v26 Premium Vehicle List Cards + Better Input Icons ===== */
.cbp-input-icon .cbp-white-icon {
  background: #fff !important;
  border: 1px solid rgba(200,169,106,.55) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}

.cbp-input-icon .cbp-white-icon::before {
  background: #111 !important;
}

.cbp-booking input,
.cbp-booking select,
.cbp-booking textarea {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

.cbp-booking input:focus,
.cbp-booking select:focus,
.cbp-booking textarea:focus {
  border-color: var(--cbp-primary) !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,.18) !important;
}

.cbp-vehicle-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.cbp-vehicle-list-card {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) 185px;
  gap: 20px;
  align-items: stretch;
  padding: 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #171717, #101010) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.cbp-vehicle-list-card:hover {
  border-color: rgba(200,169,106,.75) !important;
  transform: translateY(-3px) !important;
}

.cbp-vehicle-list-card.selected {
  border-color: var(--cbp-primary) !important;
  background: linear-gradient(135deg, rgba(200,169,106,.12), #101010) !important;
}

.cbp-vehicle-media img,
.cbp-vehicle-media .cbp-car-placeholder {
  width: 100% !important;
  height: 155px !important;
  border-radius: 16px !important;
  object-fit: cover;
  margin: 0 !important;
}

.cbp-vehicle-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cbp-vehicle-title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.cbp-vehicle-list-card h3 {
  color: #fff !important;
  font-size: 24px !important;
  margin: 0 0 4px !important;
  padding-right: 0 !important;
}

.cbp-vehicle-subtitle {
  margin: 0 !important;
  color: #bfbfbf !important;
  font-size: 14px !important;
}

.cbp-vehicle-benefits-clean {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 8px !important;
}

.cbp-vehicle-benefits-clean span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8e8e8 !important;
  font-size: 13.5px !important;
}

.cbp-vehicle-benefits-clean i {
  width: 21px;
  height: 21px;
  min-width: 21px;
  border-radius: 50%;
  background: var(--cbp-primary);
  color: #fff;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(200,169,106,.25);
}

.cbp-vehicle-price-panel {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(200,169,106,.22);
  border-radius: 18px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.cbp-vehicle-price-panel small {
  color: #cfcfcf;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .8px;
  font-weight: 800;
}

.cbp-card-estimated-fare {
  color: var(--cbp-primary);
  font-size: 30px;
  line-height: 1.1;
  margin: 7px 0 8px;
  font-weight: 900;
}

.cbp-vehicle-price-panel span {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.cbp-vehicle-price-panel em {
  margin-top: 10px;
  color: #aaa;
  font-size: 12px;
  font-style: normal;
}

.cbp-vehicle-list-card .cbp-select-badge {
  position: static !important;
  align-self: flex-start;
  background: rgba(255,255,255,.08);
}

.cbp-vehicle-list-card.selected .cbp-select-badge {
  background: var(--cbp-primary) !important;
}

.cbp-vehicle-list-card.selected::after {
  display: none !important;
}

@media(max-width: 900px) {
  .cbp-vehicle-list-card {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .cbp-vehicle-price-panel {
    grid-column: 1 / -1;
  }

  .cbp-vehicle-media img,
  .cbp-vehicle-media .cbp-car-placeholder {
    height: 135px !important;
  }
}

@media(max-width: 600px) {
  .cbp-vehicle-list-card {
    grid-template-columns: 1fr;
  }

  .cbp-vehicle-media img,
  .cbp-vehicle-media .cbp-car-placeholder {
    height: 180px !important;
  }

  .cbp-vehicle-benefits-clean {
    grid-template-columns: 1fr;
  }

  .cbp-card-estimated-fare {
    font-size: 26px;
  }
}


/* ===== v27 Hourly Map + Auto Embedded Stripe ===== */
.cbp-hourly-mode .cbp-map-area {
  display: block !important;
}

.cbp-hourly-mode #cbp_dropoff_wrap,
.cbp-hourly-mode .cbp-dropoff-map-btn {
  display: none !important;
}

.cbp-hourly-mode .cbp-map-toolbar {
  grid-template-columns: 1fr 1fr !important;
}

.cbp-embedded-payment-box {
  margin-top: 26px !important;
}

.cbp-step.active #cbp_summary {
  margin-bottom: 22px;
}

#cbp-payment-element {
  margin-top: 10px;
}

.cbp-message.success {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  padding: 12px 14px;
  border-radius: 12px;
}

.cbp-message.error {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
  padding: 12px 14px;
  border-radius: 12px;
}


/* ===== v28 Clean Messaging ===== */
.cbp-hourly-note {
  display: none !important;
}