@import url('https://fonts.googleapis.com/css?family=Inter:500&display=swap');
.smartcab-booking-wrap {
  font-family: var(--scb-label-font, 'Inter', Arial, sans-serif);
  background: var(--scb-bg, #fff);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 2rem;
  max-width: 920px;
  margin: 2rem auto;
}
.smartcab-stepper { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; position:relative; }
.smartcab-stepper::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:#eee;z-index:0}
.smartcab-stepper .scb-step-bar { flex:1; text-align:center; position:relative; font-weight:500; color:#ccc; z-index:1; background:#fff; padding:0 .5rem; }
.smartcab-stepper .scb-active { color: var(--scb-primary, #FFD700); }
.smartcab-stepper .scb-active::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--scb-primary,#FFD700)}
@media (min-width: 721px) {
  .scb-row-two{display:flex !important;gap:1rem !important;flex-direction:row !important}
  .scb-col-half{flex:1 !important}
}
.scb-step { transition: opacity .3s ease, transform .3s; }
.scb-step-2 { min-height: 400px; }
.scb-grid { display:flex; gap: 2rem; }
.scb-left, .scb-right { flex:1; }
#scb-map { width:100%; height:400px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.08); }
#smartcab-booking-form label{display:block;margin-bottom:8px;font-weight:500;color:#111827;font-family:var(--scb-label-font,'Inter',Arial,sans-serif)}
.scb-input-with-icon{position:relative;margin-bottom:20px}
.scb-row-two{display:flex;gap:1rem;margin-bottom:20px}
.scb-col-half{flex:1;min-width:0}

/* Passenger Counter */
.scb-passenger-counter-wrapper{margin-bottom:20px}
.scb-passenger-counter{display:flex;align-items:center;justify-content:center;gap:0.5rem;max-width:200px;margin-top:8px;background:#f3f4f6;border-radius:12px;padding:8px;border:1px solid #e5e7eb}
.scb-counter-btn{width:36px;height:36px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#111;font-size:1.2rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;line-height:1;flex-shrink:0}
.scb-counter-btn:hover{background:#FFD700;border-color:#FFD700;color:#000;transform:scale(1.05)}
.scb-counter-btn:active{transform:scale(0.95)}
.scb-counter-btn:disabled{opacity:0.4;cursor:not-allowed}
#scb-passengers{width:60px;height:36px;text-align:center;border:none;background:transparent;color:#111;font-size:1.1rem;font-weight:600;padding:0;margin:0;cursor:default;flex:1}
#scb-passengers:focus{outline:none}

/* Date & Time Row Layout */
.scb-date-time-row{display:flex;gap:1rem;margin-bottom:20px}
.scb-date-time-col{flex:1;min-width:0}
.scb-date-input,.scb-time-input{width:100%;height:58px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#000;padding:0 16px;font-size:1rem;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:all 0.2s}
.scb-date-input:focus,.scb-time-input:focus{outline:none;border-color:#FFD700;box-shadow:0 0 0 3px rgba(255,215,0,0.1)}
.scb-date-input.has-value,.scb-time-input.has-value{background:#FFD700 !important;color:#000 !important;border-color:#FFD700 !important;font-weight:600 !important}
.scb-date-input::-webkit-calendar-picker-indicator,.scb-time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.7}
.scb-date-input::-webkit-calendar-picker-indicator:hover,.scb-time-input::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Return Toggle Button */
.scb-return-toggle-wrapper{margin-bottom:20px;text-align:left}
.scb-add-return-btn{background:transparent;border:2px solid #e5e7eb;color:#666;padding:12px 24px;border-radius:8px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.2s;text-transform:uppercase;letter-spacing:0.5px;width:100%;max-width:200px}
.scb-add-return-btn:hover{background:#FFD700;border-color:#FFD700;color:#000;transform:translateY(-2px);box-shadow:0 4px 8px rgba(255,215,0,0.3)}
.scb-add-return-btn.active{background:#FFD700;border-color:#FFD700;color:#000}

/* Return Fields */
.scb-return-fields{margin-bottom:20px;animation:slideDown 0.3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width: 720px){
  .scb-date-time-row{flex-direction:column;gap:0}
  .scb-date-time-col{margin-bottom:20px}
  .scb-passenger-counter{max-width:100%}
  .scb-add-return-btn{max-width:100%}
}
.scb-step2-layout{display:flex;gap:2rem;width:100%;min-height:400px}
.scb-step2-left{flex:1.5;min-width:0}
.scb-step2-right{flex:1;min-width:0}
.scb-vehicle-grid-step2{display:flex;flex-direction:column;gap:1rem;width:100%;min-height:200px}
.scb-vehicle-grid-step2 .scb-vehicle-card{display:flex;flex-direction:row;align-items:center;gap:1rem;width:100%;padding:1.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.07);cursor:pointer;transition:all 0.2s}
.scb-vehicle-grid-step2 .scb-vehicle-card:hover{border-color:#FFD700;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.scb-vehicle-grid-step2 .scb-vehicle-card.active{border-color:#FFD700;box-shadow:0 4px 12px rgba(255,215,0,0.3)}
.scb-vehicle-grid-step2 .scb-vehicle-card img{width:120px;height:80px;object-fit:contain;display:block;border-radius:8px}
.scb-vehicle-grid-step2 .scb-vehicle-placeholder{width:120px;height:80px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:2rem}
.scb-vehicle-info-row{display:flex;align-items:center;gap:1.5rem;flex:1}
.scb-vehicle-name{font-size:1.3rem;font-weight:600;flex:0 0 140px;color:#111}
.scb-vehicle-capacity{display:flex;gap:1rem;flex:0 0 auto;color:#666;font-size:1rem}
.scb-vehicle-price{font-size:1.5rem;font-weight:700;color:#111;margin-left:auto}
#scb-map-step2{display:none !important}
.scb-summary-full{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:1.5rem;width:100%}
.scb-summary-full h4{margin-top:0;margin-bottom:1rem;font-size:1.2rem;color:#111}
.scb-summary-item{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid #e5e7eb}
.scb-summary-item:last-of-type{border-bottom:none}
.scb-summary-total{display:flex;justify-content:space-between;padding-top:1rem;margin-top:1rem;border-top:2px solid #111;font-size:1.2rem;font-weight:700}
.scb-summary-total strong{color:#111}
.button-black{background:#000;color:#fff}
.button-black:hover{background:#333}
#smartcab-booking-form input,#smartcab-booking-form select{
  height:58px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  padding:0 16px;
  margin-bottom:20px;
  width:100%;
  font-family: var(--scb-input-font, 'Inter', Arial, sans-serif);
  font-weight:500;
  color:#111827;
}
#smartcab-booking-form input::placeholder,#smartcab-booking-form select::placeholder{color:#9ca3af;font-weight:500}
#smartcab-booking-form input:focus,#smartcab-booking-form select:focus{outline:none;border-color:#d1d5db;box-shadow:0 0 0 3px rgba(255,215,0,0.25);background:#fff}
.scb-distance-time-field{display:flex;justify-content:flex-start;align-items:center;padding:16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;margin-top:8px}
.scb-distance-display{font-weight:bold;color:#000}
.scb-vehicle-grid { display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.scb-vehicle-card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); flex:0 0 260px; padding:1rem; display:flex; flex-direction:column; align-items:center; cursor:pointer; border:2px solid transparent; transition:border-color .15s, transform .15s; }
.scb-vehicle-card.active, .scb-vehicle-card:hover { border-color: var(--scb-primary, #FFD700); transform: translateY(-1px); }
.scb-vehicle-card img { width: 100px; height: 70px; object-fit: contain; display:block; margin-bottom:1rem; }
.scb-vehicle-card-title { font-size:1.1rem; font-weight:600; margin-bottom:.3rem; }
.scb-vehicle-card-details { font-size:.95rem; color:#374151; text-align:center; }
.scb-extras-list { display:flex; flex-wrap:wrap; gap:1.5rem; }
.scb-extra-checkbox { margin-right:.6em; }
.button, button.button, .button-primary { background: #000; color:#fff; border-radius:10px; font-weight:600; border:none; box-shadow:0 2px 7px rgba(0,0,0,.09); transition: background .16s, transform .06s; padding:.8rem 1.4rem; }
.button-primary:hover, button.button:hover, .button:hover { background:#333; }
#smartcab-booking-form .scb-see-prices{background:#000;color:#fff;border-radius:12px;font-size:1rem;padding:1.05rem 1.25rem;width:100%}
#smartcab-booking-form .scb-step-actions{margin-top:1rem}
.scb-summary { background:#fffbe5; border:1px solid var(--scb-primary, #FFD700); border-radius:8px; box-shadow:0 1px 4px rgba(255,215,0,0.09); padding:1.25rem; font-size:1rem; margin-top:1.25rem; }
@media (max-width: 720px) {
  .scb-grid, .scb-step2-layout { flex-direction: column; gap: 1rem; }
  .smartcab-booking-wrap { padding: 1rem; }
  .scb-right, .scb-left, .scb-step2-left, .scb-step2-right { width: 100%; }
  #scb-map, #scb-map-step2 { min-height: 250px; }
  .scb-vehicle-grid { justify-content: center; }
  .smartcab-stepper::before { display: none !important; }
  .smartcab-stepper .scb-active::after { display: none !important; }
  .smartcab-stepper { flex-direction: row; gap: 0.5rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.75rem; margin-bottom: 1.5rem; background: transparent; }
  .smartcab-stepper .scb-step-bar { font-size: 0.75rem; padding: 0.5rem 0.3rem; background: transparent !important; border-radius: 0; flex: 1; text-align: center; position: relative; }
  .smartcab-stepper .scb-step-bar::after { content: ''; position: absolute; bottom: -0.75rem; left: 0; right: 0; height: 2px; background: #e5e7eb; transition: background 0.3s; }
  .smartcab-stepper .scb-step-bar.scb-active::after { background: #000; }
  .scb-row-two { flex-direction: column !important; gap: 0 !important; }
  .scb-col-half { width: 100% !important; flex: 1 1 100% !important; }
  .scb-vehicle-grid-step2 .scb-vehicle-card { flex-direction: column; text-align: center; }
  .scb-vehicle-info-row { flex-wrap: wrap; justify-content: center; }
}