body { 
    background: #e9eff6; 
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 5px;
}

.booking-container {
    max-width: 1200px;
    margin: 60px auto 0 auto;
    padding: 0 20px;
}

.booking-topnav {
    width: 100%;
    display: flex;
    gap: 38px;
    align-items: flex-end;
    background: #fff;
    border-radius: 10px 10px 0 0;
    border-bottom: 2.5px solid #eee;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 0 0 18px;
    margin-bottom: 0;
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bbb;
    padding-bottom: 10px;
    position: relative;
    cursor: pointer;
    font-size: 17px;
    letter-spacing: .5px;
    background: none;
    border: none;
    outline: none;
}

.nav-tab.active {
    color: #1a1a1a;
}
.nav-tab.active:after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 3px;
    background: #222;
    border-radius: 2px;
}
.nav-tab i { font-size: 18px; margin-right: 6px; }

.booking-bannerbox {
    width: 100%;
    margin: 0 0 28px 0;
    position: relative;
}
.booking-banner {
    width: 100%;
    height: auto;
    margin-top: 20px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.booking-row {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.booking-main {
    background: #fff;
    width: 700px;
    border-radius: 13px;
    flex: 1 1 62%;
    padding: 34px 32px;
    box-shadow: 0 2px 18px #0001;
    min-width: 320px;
}

.booking-tabs {
    margin: 10px 0 24px 0;
    display: flex;
    gap: 7px;
}
.tab-btn {
    background: #eee;
    border: none;
    padding: 8px 32px;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: #222;
    cursor: pointer;
    transition: background 0.14s;
}
.tab-btn.active {
    background: #fff;
    border-bottom: 2px solid #222;
}
.form-row {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #313131;
    letter-spacing: 0.3px;
}
input[type="text"], input[type="datetime-local"] {
    width: 100%;
    padding: 11px 15px;
    border: 1.3px solid #bdbdbd;
    border-radius: 6px;
    background: #fafbfb;
    font-size: 15px;
    margin-bottom: 0;
    transition: border 0.16s;
}
input[type="text"]:focus, input[type="datetime-local"]:focus {
    border-color: #5982b9;
}
.service-section {
    margin-top: 32px;
}
.service-section h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 13px;
}
.service-list {
    display: flex;
    gap: 18px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.service-card {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 17px 22px;
    background: #f9f9f9;
    cursor: pointer;
    transition: border 0.16s, box-shadow 0.16s;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    flex: 1 1 150px;
    margin-bottom: 10px;
}
.service-card.active, .service-card:hover {
    border: 2px solid #5982b9;
    box-shadow: 0 2px 8px #5982b9;
    background: #e9eff6;
}
.service-card img { height: 38px; margin-bottom: 7px;}
.service-card div { display: flex; align-items: center; gap: 14px; }
.service-card span { font-size: 15px; font-weight: 600; color: #232323; }
.service-card i { font-size: 15px; margin-right: 2px; }
.booking-btn {
    background: #222;
    color: #fff;
    padding: 12px 38px;
    border-radius: 5px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    transition: background 0.14s;
}
.booking-btn:hover { background: #313131; }

.booking-sidebar {
    background: #111;
    color: #fff;
    border-radius: 13px;
    flex: 1 1 33%;
    padding: 26px 22px;
    min-width: 280px;
    max-width: 330px;
    height: fit-content;
    margin-top: 0;
    box-shadow: 0 2px 16px #0001;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 15px;
}
.sidebar-map {
    width: 100%;
    height: 120px;
    background: #ccc;
    border-radius: 8px;
    margin-bottom: 22px;
}
.sidebar-summary h4 {
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-size: 19px;
    font-weight: 700;
}
.sidebar-summary div { margin-bottom: 8px; font-size: 15px; }

/* ------------ RESPONSIVE BREAKPOINTS ------------- */
@media (max-width: 1200px) {
    .booking-container { max-width: 100vw; }
    .booking-main { width: 100%; padding:15px;}
    
    .booking-alert-bar {margin-top:40px; }
}

@media (max-width: 1000px) {
    .booking-row, .service-list {
        flex-direction: column;
        gap: 0;
    }
    .booking-main, .booking-sidebar {
        min-width: unset;
        width: 100%;
        max-width: 100vw;
    }
    
    .booking-alert-bar {margin-top:40px; }
    .booking-sidebar { margin-top: 18px; }
    .sidebar-map { height: 90px; }
}

@media (max-width: 800px) {
    .booking-container { padding: 0 2vw; margin: 60px auto 0 auto; }
    .page-body-wrapper {margin-top:-25px;}
    .booking-row { flex-direction: column; gap: 0; }
    .booking-alert-bar {margin-top:40px; }
    .booking-main, .booking-sidebar { padding: 22px 7px; }
    .booking-main { box-shadow: none; }
    .sidebar-map { height: 70px; }
    .booking-bannerbox { margin-bottom: 12px; }
    .service-section { margin-top: 18px; }
    .sidebar-main-heading { font-size: 1.6rem; }
}

@media (max-width: 650px) {
    .page-body-wrapper {margin-top:-25px;}
    .booking-container { padding: 0 4vw; margin: 0px auto 0 auto; }
    .booking-main, .booking-sidebar { padding: 16px 2vw;  margin-bottom:30px;}
    .booking-banner { margin-top: 12px; border-radius: 7px; }
    .booking-row { gap: 0; }
    .vehicle-card { padding: 13px 5vw; }
}

@media (max-width: 500px) {
    .page-body-wrapper {margin-top:-25px;}
    .booking-container { padding: 0 2vw; margin: 60px auto 0 auto; }
    .booking-main, .booking-sidebar { padding: 10px 1vw; }
    .booking-main, .booking-sidebar { border-radius: 8px; padding:15px; margin-bottom:30px; }
    .booking-bannerbox { margin-bottom: 6px; }
    .vehicle-card, .service-card { padding: 10px 7px; gap: 8px; border-radius: 7px; }
    .vehicle-title { font-size: 1.07rem; }
    .vehicle-features span { font-size: 13px; padding: 6px 10px; }
    .sidebar-main-heading { font-size: 1.2rem; }
    .sidebar-label, label { font-size: 13px; }
}

@media (max-width: 400px) {
    .page-body-wrapper {margin-top:-25px;}
    .booking-container { padding: 0 2vw; margin: 60px auto 0 auto; }
    .booking-main, .booking-sidebar { padding: 5px 2px; font-size: 13px; padding:15px; margin-bottom:30px;}
    .booking-banner { border-radius: 4px; }
    .vehicle-card { padding: 7px 2px; }
    .vehicle-title { font-size: 0.95rem; }
}

.autocomplete-list {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    padding: 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 18px #0002;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid #d6d6d6;
    display: none;
    z-index: 999;
    width: 100%;
}
.autocomplete-item {
    padding: 13px 17px;
    cursor: pointer;
    font-size: 15px;
    color: #232323;
    display: flex; align-items: center; gap: 12px;
    background: #f5f5f5;
    border: none;
    border-bottom: 1px solid #e2e2e2;
    transition: background 0.13s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #ededed; }
.autocomplete-item.airport i { color: #1899ff; }
.autocomplete-item i {
    min-width: 20px;
    font-size: 16px;
    opacity: 0.8;
}
.autocomplete-item.unclickable {
    background: #eee;
    cursor: not-allowed;
}

/* Inputs, textareas, selects - unified style */
.booking-container input[type="text"],
.booking-container input[type="email"],
.booking-container input[type="number"],
.booking-container input[type="tel"],
.booking-container input[type="datetime-local"],
.booking-container textarea,
.booking-container select {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #efefef;
    border-radius: 6px;
    background: #fafbfc;
    font-size: 16px;
    color: #222;
    transition: border-color 0.2s;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    resize: none;
}

.booking-container input[type="text"]:focus,
.booking-container input[type="email"]:focus,
.booking-container input[type="number"]:focus,
.booking-container input[type="tel"]:focus,
.booking-container input[type="datetime-local"]:focus,
.booking-container textarea:focus,
.booking-container select:focus {
    border-color: #5982b9;
    background: #e9eff6;
}

.booking-container label {
    font-weight: 500;
    margin-bottom: 7px;
    color: #333;
    font-size: 15px;
    display: block;
}

/* Payment section */
.payment-method-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 22px 0;
}
.payment-method-item {
    background: #f8f8f8;
    border: 2px solid #efefef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    transition: border 0.18s;
    gap: 20px;
    font-size: 17px;
}
.payment-method-item input[type="radio"] {
    accent-color: #ffc900;
    margin-right: 18px;
}
.payment-method-item .icon {
    font-size: 28px;
    color: #ffc900;
    margin-right: 14px;
}
.payment-method-item .title {
    font-weight: 600;
    font-size: 18px;
    margin-right: 8px;
}
.payment-method-item .desc {
    color: #777;
    font-size: 15px;
}
.payment-method-item:hover, .payment-method-item input:checked + .icon {
    border-color: #ffc900;
}
.fare-summary-box {
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 22px;
    padding: 16px 24px;
    width: 340px;
    max-width: 100%;
}
.fare-summary-box h4 { margin: 0 0 12px 0; }
.fare-summary-box table td { padding: 5px 9px; }
.notice-hidden { display: none !important; }
#no-fare-notice { display: none !important; }

.vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vehicle-card {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 24px 32px;
    border: 2px solid #eee;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px #00000009;
    margin-bottom: 0;
    transition: border 0.16s, background 0.16s;
}
.vehicle-card.selected, .vehicle-card:hover {
    border: 2px solid #5982b9;
    background: #e9eff6;
}
.vehicle-img {
    height: 50px;
    width: auto;
    margin-right: 18px;
    flex-shrink: 0;
}
.vehicle-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: 1 1 auto;
}
.vehicle-title {
    font-size: 20px;
    font-weight: 600;
    color: #252525;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vehicle-features {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 16px;
}
.vehicle-features span {
    background: #f7f7f7;
    border-radius: 7px;
    padding: 7px 16px 7px 11px;
    font-size: 15px;
    font-weight: 600;
    color: #232323;
    display: flex;
    align-items: center;
    gap: 5px;
}
.vehicle-desc-tooltip {
    color: #888;
    font-size: 15px;
    cursor: pointer;
}
.vehicle-card:not(:last-child) { margin-bottom: 0; }

.vehicle-fare {
    margin: 8px 0 0 0;
    font-size: 1.09em;
    color: #1e1e1e;
    font-weight: bold;
    background: #5982b9;
    border-radius: 7px;
    padding: 5px 13px;
    min-width: 75px;
    box-shadow: 0 0 2px #5982b9;
    display: inline-block;
}
/* ---- Responsive Sidebar - Optimized and Restored ---- */
/* === Sidebar All Classes === */
.booking-sidebar {
    background: #111;
    color: #fff;
    border-radius: 28px !important;
    box-shadow: 0 8px 38px rgba(0,0,0,0.28), 0 1.5px 6px rgba(0,0,0,0.18);
    max-width: 390px;
    min-width: 220px;
    margin: 0 auto;
    padding: 34px 28px 34px 28px;
    font-family: 'Segoe UI', Arial, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 17.5px;
}

.sidebar-summary-main {
    width: 100%;
    color: #fff;
    background: transparent;
    font-family: inherit;
    padding: 0;
    margin: 0;
}

.sidebar-main-heading {
    font-size: 2.1rem;
    font-weight: bold;
    margin-bottom: 18px;
    letter-spacing: 1px;
    color: #fff;
    text-align: left;
}

.sidebar-sub-heading {
    color: #e9eff6;
    font-size: 1.14rem;
    margin-bottom: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-top: 0;
}

.sidebar-map {
    width: 100%;
    height: 90px;
    background: #222;
    border-radius: 14px !important;
    margin-bottom: 18px;
    margin-top: 7px;
    box-shadow: 0 1px 7px rgba(0,0,0,0.09);
    overflow: hidden;
}

.sidebar-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 1.09rem;
    line-height: 1.38;
    padding: 3px 0;
    width: 100%;
}

.sidebar-label {
    color: #e9eff6;
    font-weight: 600;
    min-width: 95px;
    display: inline-block;
}

.estimate-price-btn {
    display: block;
    width: 95%;
    margin: 30px auto 0 auto;
    background: linear-gradient(90deg,#bdd6f6 0%,#e4eefd 100%);
    color: #181818;
    font-size: 1.55rem;
    font-weight: 900;
    border: none;
    border-radius: 28px;
    box-shadow: 0 2px 8px #0002;
    padding: 17px 0 13px 0;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s, color 0.13s;
    text-align: center;
}
.estimate-price-btn:active,
.estimate-price-btn:hover {
    background: linear-gradient(90deg,#e9eff6 0%,#5982b9 100%);
    color: #111;
    box-shadow: 0 4px 18px #0003;
}

/* Responsive: Always full width, beautiful on all devices */
@media (max-width: 700px) {
  .booking-sidebar {
    max-width: 98vw !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 500px) {
  .booking-sidebar {
    max-width: 100vw !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ====== NEW: Responsive vehicle info row for mobile ONLY ====== */
.vehicle-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.vehicle-details-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.vehicle-fare {
  display: inline-block !important;
  margin-left: 12px;
  font-size: 0.97em;
  padding: 5px 13px;
  min-width: 75px;
  border-radius: 7px;
  background: #5982b9;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 600px) {
  .vehicle-card {
    flex-direction: column;
    gap: 6px;
    padding: 13px 6px;
  }
  .vehicle-img {
    height: 36px !important;
    margin: 0;
    flex-shrink: 0;
  }
  .vehicle-title {
    font-size: 1rem;
    gap: 7px;
  }
  .vehicle-details-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .vehicle-features {
    gap: 8px;
    font-size: 13px;
  }
}
.vehicle-fare[style*="display: none"] {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.vehicle-fare:empty {
  display: none !important;
}
#no-geofence-notice {
    background: #ce2028 !important;
    color: #fff !important;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
    display: none; /* keep default as hidden */
    text-align: center;
    letter-spacing: .2px;
}
.page-body-wrapper {
    padding-top: 20px !important;
}
.booking-alert-bar {
    background: #ce2028;
    color: #fff;
    font-weight: 700;
    padding: 12px 0;
    border-radius: 10px 10px 0 0;
    font-size: 18px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.booking-alert-bar i.fa-bullhorn {
    color: #fff;
    margin-right: 10px;
}
.booking-alert-bar marquee {
    width: 100%;
    white-space: nowrap;
    font-size: 20px;
    letter-spacing: 0.5px;
}
.vehicle-desc-modal-trigger {
    cursor: pointer !important;
    pointer-events: auto !important;
    color: #888 !important;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 50%;
    background: #f7f7f7;
    display: inline-block;
    vertical-align: middle;
    transition: background 0.13s;
}
.vehicle-desc-modal-trigger:hover {
    color: #ce2028 !important;
    background: #f0e8e8;
}