/* Marlow Airport Taxis - light modern booking widget (2026-10-16). Linked from tbmsbooking/index.php <head>. Styling only. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html body { font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; background: #F4F7FB; }
html body #banner-setting, html body #banner-setting *:not(.fa):not(.glyphicon) { font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; }

/* photo with a bright navy wash instead of black */
html body #banner-setting { position: relative; background-size: cover !important; background-position: center 60% !important; }
html body #banner-setting::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(226, 237, 252, .93) 0%, rgba(240, 245, 252, .88) 55%, rgba(255, 255, 255, .80) 100%); }
html body #banner-setting > * { position: relative; z-index: 1; }
html body #banner-setting .banner-tabspan::before, html body #banner-setting .banner-tabspan::after { background: transparent !important; display: none !important; }
html body #banner-setting .banner-tabspan h1.text-center { color: #0B3A6F !important; font-weight: 800 !important; letter-spacing: -.02em; font-size: 42px !important; margin-top: 18px; }
html body #banner-setting .text1 p { color: #3F4B5C !important; font-weight: 500 !important; }

/* booking card */
html body #banner-setting .tabbg { background: #fff !important; color: #0F1B2D !important; border-radius: 20px !important; box-shadow: 0 24px 60px rgba(11, 58, 111, .28), 0 2px 6px rgba(15, 27, 45, .08) !important; border: 1px solid #E3E9F1; overflow: hidden; }
html body #banner-setting .tabbg .nav-tabs { border-bottom: 1px solid #E3E9F1 !important; background: #F4F7FB; }
html body #banner-setting .tabbg .nav > li > a,
html body #banner-setting .nav-tabs > li.active > a { color: #0B3A6F !important; font-weight: 800 !important; letter-spacing: .06em !important; font-size: 15px !important; background: transparent !important; }
html body #banner-setting .tabbg .tab-content { padding: 22px 26px 26px !important; }
html body #banner-setting .tabbg, html body #banner-setting .tabbg form, html body #banner-setting .tabbg strong,
html body #banner-setting .tabbg .row, html body #banner-setting .tabbg div { color: #0F1B2D !important; }
html body #banner-setting .tabbg label { color: #5B6678 !important; font-weight: 600 !important; font-size: 11.5px !important; letter-spacing: .06em !important; }
html body #banner-setting .tabbg .form-control,
html body #banner-setting .tabbg #drpbtn,
html body #banner-setting .tabbg select { background: #fff !important; color: #0F1B2D !important; border: 1px solid #CDD6E2 !important; border-radius: 10px !important; min-height: 44px; font-size: 14px !important; box-shadow: none !important; }
html body #banner-setting .tabbg .form-control:focus { border-color: #1565C0 !important; box-shadow: 0 0 0 3px rgba(21, 101, 192, .15) !important; outline: none; }
html body #banner-setting .tabbg .form-control::placeholder { color: #8A94A3 !important; }
html body #banner-setting .viabtn { background: #EAF1FB !important; color: #0B3A6F !important; border: 1px solid #C9D9EF !important; border-radius: 999px !important; font-weight: 700 !important; }
html body #banner-setting #submitbtn,
html body #banner-setting .tabbg .btn-default { background: #F5B700 !important; border: 0 !important; color: #0F1B2D !important; border-radius: 999px !important; font-weight: 800 !important; letter-spacing: .04em !important; padding: 12px 30px !important; box-shadow: 0 10px 24px rgba(245, 183, 0, .38) !important; }
html body #banner-setting #submitbtn *, html body #banner-setting .tabbg .btn-default * { color: #0F1B2D !important; }
html body #banner-setting #submitbtn:hover, html body #banner-setting .tabbg .btn-default:hover { background: #0B3A6F !important; }
html body #banner-setting #submitbtn:hover *, html body #banner-setting .tabbg .btn-default:hover { color: #fff !important; }

/* booker refinements (2026-10-16 b) */
html body #banner-setting .wow, html body #banner-setting .animated { visibility: visible !important; animation-duration: .35s !important; animation-delay: 0s !important; }
html body #banner-setting .tabbg .row > strong { display: inline-block; color: #5B6678 !important; font-size: 11.5px !important; letter-spacing: .06em; text-transform: uppercase; font-weight: 700 !important; margin: 0 10px 10px 15px; vertical-align: middle; }
html body #banner-setting .tabbg .row > label:has(input[name=bookingtype]) { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 18px !important; margin: 0 0 10px !important; border: 1px solid #CDD6E2; border-radius: 999px; background: #fff; color: #3F4B5C !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none; cursor: pointer; transition: all .15s; }
html body #banner-setting .tabbg .row > label:has(input[name=bookingtype]:checked) { background: #0B3A6F; border-color: #0B3A6F; color: #fff !important; box-shadow: 0 6px 14px rgba(11, 58, 111, .25); }
html body #banner-setting .tabbg .row > label:has(input[name=bookingtype]) input { position: absolute; opacity: 0; pointer-events: none; }
html body #banner-setting .tabbg .row > label:has(input[name=bookingtype]) .checkmark { display: none !important; }
html body #banner-setting .tabbg select { padding: 0 6px !important; }
html body #banner-setting .tabbg label { text-transform: uppercase; }
html body #banner-setting .tabbg .viabtn { min-height: 44px; width: 100%; margin-top: 0 !important; }
html body #banner-setting .tabbg .form-group { margin-bottom: 12px; }
html body #banner-setting .tabbg .text-right { margin-top: 6px; }
html body #banner-setting .phone-setting-button { margin-top: 6px; }
html body #banner-setting ul.mt-trust { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
html body #banner-setting ul.mt-trust li { background: rgba(255, 255, 255, .9); border: 1px solid #E3E9F1; border-radius: 999px; padding: 8px 16px; color: #0F1B2D !important; font-size: 13.5px; font-weight: 700; box-shadow: 0 2px 8px rgba(15, 27, 45, .06); }
html body #banner-setting ul.mt-trust li i { color: #1565C0 !important; margin-right: 6px; }
html body #banner-setting .text1 p { font-size: 17px !important; }

@media (max-width: 767px) {
  html body #banner-setting .banner-tabspan h1.text-center { font-size: 28px !important; }
  html body #banner-setting ul.mt-trust li { font-size: 12.5px; padding: 7px 12px; }
  html body #banner-setting .tabbg { margin-top: 18px !important; }
  html body #banner-setting .tabbg .tab-content { padding: 18px 16px 20px !important; }
}

/* ================= booking steps: vehicle-selection.php + checkout.php ================= */
html body, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body p, html body label,
html body input, html body select, html body textarea, html body button, html body td, html body th { font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; }
html body .top-nav { background: transparent !important; }

/* step bar */
html body .booking-engine-first { background: #fff !important; border-bottom: 1px solid #E3E9F1; padding: 14px 0 !important; }
html body .booking-engine-first ul { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .booking-engine-first ul li { float: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
html body .booking-engine-first ul li h5 { margin: 0 !important; padding: 10px 22px !important; border-radius: 999px; background: #F4F7FB; color: #6B7686 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .04em; border: 1px solid #E3E9F1; }
html body .booking-engine-first ul li a, html body .booking-engine-first ul li a h5 { color: #6B7686 !important; text-decoration: none !important; }
html body .booking-engine-first ul li a.active h5, html body .booking-engine-first ul li .active h5,
html body .booking-engine-first ul li a.active { background: #0B3A6F !important; color: #fff !important; border-color: #0B3A6F !important; }
html body .booking-engine-first ul li a.active h5 *, html body .booking-engine-first ul li h5 i { color: inherit !important; }
html body .booking-engine-first ul li::before, html body .booking-engine-first ul li::after { display: none !important; }
html body .booking-engine-first ul:not(:has(.active)) li:first-child h5 { background: #0B3A6F !important; color: #fff !important; border-color: #0B3A6F !important; }

/* journey summary */
html body .selected-plan { background: transparent !important; padding-top: 18px !important; }
html body .selected-plan .whole { background: #fff !important; border: 1px solid #E3E9F1 !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .07) !important; overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 !important; }
html body .selected-plan .whole > div { padding: 16px 18px !important; display: flex; flex-direction: column; justify-content: center; }
html body .selected-plan .red, html body .selected-plan .green { background: #F4F7FB !important; }
html body .selected-plan .red p, html body .selected-plan .green p { color: #0F1B2D !important; font-weight: 700 !important; margin: 0 !important; text-align: left; }
html body .selected-plan .red p i { color: #fff !important; background: #1565C0 !important; }
html body .selected-plan .green p i { color: #0F1B2D !important; background: #F5B700 !important; }
html body .selected-plan .red p i, html body .selected-plan .green p i { border-radius: 10px !important; width: 34px; height: 34px; line-height: 34px !important; text-align: center; margin-right: 10px; }
html body .selected-plan .desti p { color: #3F4B5C !important; font-weight: 600 !important; margin: 4px 0 !important; }
html body .selected-plan .desti i { color: #1565C0 !important; }
html body .selected-plan .desti hr { border-color: #E3E9F1 !important; margin: 6px 0 !important; }

/* vehicle cards */
html body .why-imperial { background: transparent !important; }
html body .why-imperial .inner { background: #fff !important; border: 1px solid #E3E9F1 !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .07) !important; overflow: hidden; padding-bottom: 18px !important; margin-bottom: 26px !important; transition: transform .25s, box-shadow .25s; }
html body .why-imperial .inner:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 27, 45, .06), 0 18px 40px rgba(15, 27, 45, .13) !important; }
html body .why-imperial .inner > h5 { background: #fff !important; color: #0B3A6F !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: .04em; padding: 18px 12px 0 !important; margin: 0 !important; border: 0 !important; }
html body .why-imperial .inner img { max-height: 170px; width: auto; margin: 6px auto 16px !important; }
html body .why-imperial .table-responsive { border: 0 !important; }
html body .why-imperial .table-responsive ul { background: #F4F7FB !important; border-radius: 12px; margin: 0 16px !important; display: flex; justify-content: center; }
html body .why-imperial .table-responsive ul li { background: transparent !important; color: #0F1B2D !important; font-weight: 700 !important; border-color: #E3E9F1 !important; }
html body .why-imperial .table-responsive ul li i { color: #1565C0 !important; margin-right: 6px; }
html body .why-imperial .vehicle-description p { color: #5B6678 !important; font-size: 14px !important; padding: 12px 16px !important; }
html body .why-imperial .panel, html body .why-imperial .panel-body { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .why-imperial .btn-default { background: #F5B700 !important; border: 0 !important; color: #0F1B2D !important; border-radius: 999px !important; font-weight: 800 !important; padding: 13px 18px !important; width: calc(100% - 32px) !important; margin: 0 16px !important; box-shadow: 0 10px 24px rgba(245, 183, 0, .35) !important; letter-spacing: .03em; }
html body .why-imperial .btn-default span { color: #0B3A6F !important; font-weight: 800; }
html body .why-imperial .btn-default:hover { background: #0B3A6F !important; color: #fff !important; }
html body .why-imperial .btn-default:hover span { color: #fff !important; }

/* checkout */
html body .care-notice-text { color: #0B3A6F !important; font-size: 30px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.01em; margin: 28px 0 22px !important; }
html body #sumitform .panel { border: 1px solid #E3E9F1 !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .07) !important; overflow: hidden; }
html body #sumitform .panel-heading { background: #F4F7FB !important; border-bottom: 1px solid #E3E9F1 !important; color: #0F1B2D !important; padding: 16px 22px !important; }
html body #sumitform .panel-heading h3 { color: #0B3A6F !important; font-weight: 800 !important; font-size: 22px !important; }
html body #sumitform .panel-heading i { color: #1565C0 !important; }
html body #sumitform .panel-heading h3 > i.fa { font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif !important; font-style: normal; color: #0B3A6F !important; font-weight: 800; }
html body #sumitform .panel-heading h3 > i.fa::before { font-family: FontAwesome !important; color: #1565C0; margin-right: 8px; font-weight: normal; }
html body #sumitform .panel-body { padding: 24px 22px !important; }
html body #sumitform label { color: #3F4B5C !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .02em; }
html body #sumitform .form-control { background: #fff !important; color: #0F1B2D !important; border: 1px solid #CDD6E2 !important; border-radius: 10px !important; box-shadow: none !important; min-height: 44px; font-size: 15px !important; }
html body #sumitform .form-control[readonly], html body #sumitform #r_date { background: #F4F7FB !important; }
html body #sumitform .form-control:focus { border-color: #1565C0 !important; box-shadow: 0 0 0 3px rgba(21, 101, 192, .15) !important; outline: none; }
html body #sumitform .form-control::placeholder { color: #8A94A3 !important; }
html body #sumitform h4 { color: #B42318 !important; }
html body #sumitform .col-md-10.text-center > h4 { color: #B42318 !important; background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 12px; padding: 12px 16px; font-size: 15px !important; font-weight: 700 !important; }
html body #sumitform .table th { color: #6B7686 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .05em; border-color: #E3E9F1 !important; }
html body #sumitform .table td { color: #0F1B2D !important; border-color: #E3E9F1 !important; }
html body #sumitform .payment-button { background: #fff !important; color: #0F1B2D !important; border: 1px solid #CDD6E2 !important; border-radius: 999px !important; font-weight: 700 !important; padding: 9px 16px !important; margin: 4px 2px !important; }
html body #sumitform .payment-button.payment-button__active, html body #sumitform .payment-button.active_color { background: #0B3A6F !important; color: #fff !important; border-color: #0B3A6F !important; }
html body #sumitform .payment-button i { color: inherit !important; }
html body #sumitform .cstSubmitBtn { background: #F5B700 !important; color: #0F1B2D !important; border: 0 !important; border-radius: 16px !important; font-weight: 800 !important; padding: 18px !important; box-shadow: 0 12px 28px rgba(245, 183, 0, .38) !important; }
html body #sumitform .cstSubmitBtn * { color: #0F1B2D !important; }
html body #sumitform .cstSubmitBtn:hover { background: #0B3A6F !important; color: #fff !important; }
html body #sumitform .cstSubmitBtn:hover * { color: #fff !important; }
html body .loader-wrapper { background: rgba(244, 247, 251, .92) !important; }
html body .loader-wrapper { position: fixed !important; backdrop-filter: blur(4px); }
html body .loader-wrapper .loader-div { top: 30vh !important; max-width: calc(100% - 32px); }
html body .loader-wrapper .card { border: 1px solid #E3E9F1; border-radius: 18px !important; box-shadow: 0 16px 40px rgba(15, 27, 45, .12); }
html body .loader-wrapper .card-body { padding: 28px 24px 26px !important; }
html body .loader-wrapper .card-body br { display: none; }
html body .mt-loader-logo { display: block; width: 190px; height: auto; margin: 0 auto 16px; }
html body #waitingtext { color: #0B3A6F !important; font-weight: 700 !important; font-size: 15px; }
html body .mt-spinner { display: block; width: 42px; height: 42px; margin: 14px auto 0; border-radius: 50%; border: 4px solid #E3E9F1; border-top-color: #1565C0; border-right-color: #F5B700; animation: mtspin .8s linear infinite; }
@keyframes mtspin { to { transform: rotate(360deg); } }
@media (max-width: 767px) { html body .care-notice-text { font-size: 22px !important; } html body .selected-plan .whole > div { width: 100%; } }

/* OR + phone under the card */
html body #banner-setting .phone-setting-button p.text-center,
html body #banner-setting .phone-setting-button strong { color: #0B3A6F !important; }
html body #banner-setting a.phone-button-settoing { display: inline-block; color: #fff !important; background: #0B3A6F !important; font-weight: 800 !important; border-radius: 999px !important; padding: 10px 22px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important; animation: none !important; }
html body #banner-setting a.phone-button-settoing i { color: #F5B700 !important; }
html body #banner-setting a.phone-button-settoing:hover { background: #F5B700 !important; color: #0F1B2D !important; }
html body #banner-setting a.phone-button-settoing:hover i { color: #0B3A6F !important; }