@media only screen and (max-width: 420px) {
	div.imgCheckboxContainer {
		width: 50%;
	}

}

@media only screen and (max-width: 768px) {
	.responsive {
		flex-direction: column !important;
	}

	.margin-r-responsive {
		margin-right: 0px;
	}

	.margin-t-responsive {
		margin-top: 10px;
	}

	.fleetsist .btn-form-basic {
		margin-top: 14px;
	}

	.fleetsist #btn-search-cars {
		height: 50px;
		width: 100%;
	}

	.fleetsist .max-width-50 {
		width: 100% !important;
	}

	.fleetsist .width-75,
	.fleetsist .width-66,
	.fleetsist .width-50,
	.fleetsist .width-40,
	.fleetsist .width-33,
	.fleetsist .width-25 {
		width: 100% !important;
	}

	.fleetsist .container-grid {
		grid-template-columns: 1fr !important;
	}

	.fleetsist .border-budget-right {
		border-right: none !important;
	}
}

@media screen and (max-width: 992px) and (min-width: 768px) {
	.fleetsist .container-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

.fleetsist {
	font-family: "Open Sans", sans-serif !important;
	font-size: 14px;
}

.fleetsist p.title {
	font-size: 42px;
	margin: 0;
}

.fleetsist h3 {
	font-size: 20px;
	margin-bottom: 0;
}

.fleetsist h4 {
	font-size: 29px;
	margin-bottom: 0;
}

.fleetsist .img-thumbnail {
	width: 100px !important;
}

.fleetsist ul {
	margin: 0;
}

.fleetsist ul li {
	list-style-type: none;
}

/* HELPER CLASS */
.fleetsist .content-center {
	margin: auto;
}

.fleetsist .container-grid-row {
	grid-template-rows: auto;
	column-gap: 10px;
	row-gap: 15px;
}

.fleetsist .container-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 20px;
	justify-content: center;
}

.fleetsist .flex-column {
	display: flex;
	flex-direction: column;
}

.fleetsist .flex-row {
	display: flex;
	flex-direction: row;
}

.fleetsist .space-between {
	justify-content: space-between;
}

.fleetsist .space-around {
	justify-content: space-around;
}

.fleetsist .center {
	justify-content: center;
}

.fleetsist .align-center {
	align-items: center;
}

.fleetsist .align-end {
	align-items: flex-end;
}

.fleetsist .text-center {
	text-align: center;
}

.fleetsist .text-right {
	text-align: right;
}

.fleetsist .text-uppercase {
	text-transform: uppercase;
}

.fleetsist .margin-x {
	margin: 0 5px;
}

.fleetsist .margin-y {
	margin: 5px 0;
}

.fleetsist .margin-z {
	margin: 5px;
}

.fleetsist .margin-r {
	margin-right: 20px;
}

.fleetsist .margin-r-responsive {
	margin-right: 10px;
}

.fleetsist .margin-l {
	margin-left: 20px;
}

.fleetsist .margin-l-responsive {
	margin-left: 10px;
}

.fleetsist .margin-t {
	margin-top: 20px;
}

.fleetsist .margin-t-1 {
	margin-top: 1rem;
}

.fleetsist .margin-b {
	margin-bottom: 10px;
}

.fleetsist .margin-z-10 {
	margin: 10px;
}

.fleetsist .padding-t {
	padding: 10px 0 0 0;
}

.fleetsist .padding-l {
	padding-left: 5px;
}

.fleetsist .padding-y {
	padding: 10px 0px
}

.fleetsist .padding-x {
	padding: 0px 5px;
}

.fleetsist .padding-all {
	padding: 40px;
}

.fleetsist .padding-z {
	padding: 10px;
}

.fleetsist .padding-b {
	padding-bottom: 20px;
}

.fleetsist .btn {
	cursor: pointer;
}

.fleetsist .text-white {
	color: whitesmoke;
}

.fleetsist .text-dark {
	color: #232323;
}

.fleetsist .text-orange {
	color: #DB5522;
}

.fleetsist .text-main-color {
	color: #CC592B;
}

.fleetsist .divider {
	border-top: 1px dotted #454545;
	margin: 5px;
	width: 90%;
	align-self: center;
}

/* Background colors */
.fleetsist .bg-warning {
	background-color: #F7C600;
}

.fleetsist .bg-gray {
	background-color: #F8F8F8;
}

.fleetsist .rounded {
	border-radius: 1em;
}

/* img and icons class */
.fleetsist #carImgBtn {
	background-image: url('../img/auto.png');
}

.fleetsist #vanImgBtn {
	background-image: url('../img/van.png');
}

.fleetsist .imgCoverBackground {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 140px;
}

.fleetsist .imgContainBackground {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.fleetsist .activeCheckbox {
	color: whitesmoke !important;
	border: 2px solid #232323;
	border-radius: 3px;
	background-color: #CC592B !important;
}

.fleetsist .imgBtn {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 60px;
	height: 25px;
}

/*  BUTTONS */
.mx-datepicker-main button:hover {
	background: transparent !important;
}

.mx-datepicker-main button:focus {
	background: transparent !important;
	color: #73879c;
}

.fleetsist .btn-form {
	width: 100%;
	height: 50px;
	padding: 1px 6px;
}

.fleetsist .btn-form-basic {
	color: whitesmoke;
	background-color: #CC592B;
	border: transparent;
	border-radius: 0.5em;
}

.fleetsist .btn-form-basic:hover {
	background-color: #9f4927;
}

.fleetsist .btn-checkbox {
	background-color: #f5f5f5;
	padding: 1px;
	border-radius: 3px;
	color: #232323;
	height: 60px;
	width: 100%;
	max-width: 315px;
}

.fleetsist .disableBtn {
	background-color: gray;
	cursor: default;
}

.fleetsist .disableBtn:hover {
	background-color: gray;
}

.fleetsist .btn-filter-type {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	background-color: #E8E8E8;
	height: 110px;
	width: 150px;
	padding: 5px;
	font-weight: bold;
	font-size: medium;
	transition: all .2s ease-in-out;
	margin: 15px;
}

.fleetsist .btn-filter-type:hover {
	transform: scale(1.1);
}

/* FORM */
.fleetsist #container-form {
	padding: 30px;
	background-color: white;
	color: #414f5a;
	width: 100%;
	border: 1px solid #666;
	border-radius: 1rem;
}

.fleetsist input[type=text],
.fleetsist input[type=email],
.fleetsist input[type=tel],
.fleetsist input[type=search],
.fleetsist .selectAll {
	width: 100%;
}

.fleetsist input[type=text],
.fleetsist .input-date,
.fleetsist input[type=time],
.fleetsist input[type=email],
.fleetsist input[type=tel],
.fleetsist input[type=search],
.fleetsist select {
	height: 50px;
	background: rgba(0, 0, 0, 0.01);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #414f5a !important;
	font-size: medium;
	border-radius: 1em;
}

.fleetsist input[type=text]:focus,
.fleetsist input[type=date]:focus,
.fleetsist input[type=time]:focus,
.fleetsist input[type=email]:focus,
.fleetsist input[type=tel]:focus,
.fleetsist select:focus {
	border: none;
	border-bottom: 2px solid #CC592B !important;
}

.fleetsist .input-btn-datetime-picker {
	background: rgba(0, 0, 0, 0.01);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #414f5a;
	padding: 0 10px;
	border-radius: 1em;
	height: 50px;
}

.fleetsist .mx-datepicker {
	position: absolute;
	opacity: 0;
	z-index: -9;
}

.fleetsist .day {
	margin-left: 10px;
	color: #CC592B;
	font-weight: 600;
	font-size: 30px !important;
}

.fleetsist .month {
	color: #888;
	font-size: 18px;
	margin-left: 10px
}

.fleetsist .year {
	color: #888;
	font-size: 18px;
}

.fleetsist .select-date {
	color: #414f5a;
	font-size: 14px;
	margin: auto 0;
}

.fleetsist .hour,
.fleetsist .default-hour {
	color: #CC592B;
	font-weight: 600;
	font-size: 30px !important;
}

.fleetsist .hour {
	font-size: 20px;
}

/* CARDS */
.fleetsist .container-flex {
	display: flex;
	flex-wrap: wrap;
}

.fleetsist .card {
	perspective: 1000px;
}

.fleetsist .card__inner {
	max-width: 450px;
	height: 500px;
	margin: 15px;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.fleetsist .flipped {
	transform: rotateY(180deg);
}

.fleetsist .flipped .ribbon {
	display: none !important;
}

.fleetsist .card__content {
	overflow: hidden;
	position: absolute !important;
	background-color: #fff;
	-webkit-backface-visibility: hidden !important;
	backface-visibility: hidden !important;
}

.fleetsist .card__content--back {
	transform: rotateY(180deg);
}

.fleetsist .overflow-scroll {
	display: none;
}

.fleetsist .flipped .overflow-scroll {
	display: block;
	height: 450px;
	overflow: auto;
}

/* RIBBON CARD */
.ribbon {
	margin: 0;
	padding: 0;
	background: #094EB2;
	color: white;
	padding: 0.5em 0;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(30%) translateY(0%) rotate(45deg);
	transform-origin: top left;
	font-size: smaller;
}

.ribbon:before,
.ribbon:after {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	min-width: 100px;
	height: 100%;
	background: #094EB2;
}

.ribbon:before {
	right: 100%;
}

.ribbon:after {
	left: 100%;
}

/* MODAL */
.fleetsist .modal-mask {
	position: absolute;
	z-index: 99992;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	display: table;
	transition: opacity .3s ease;
}

.fleetsist .modal-wrapper {
	display: table-cell;
	vertical-align: middle;
}

.fleetsist .modal-container {
	width: max-content;
	margin: 0 auto;
	padding: 20px 30px;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
	transition: all .3s ease;
}

.fleetsist .modal-enter {
	opacity: 0;
}

.fleetsist .modal-leave-active {
	opacity: 0;
}

.fleetsist .modal-enter .modal-container,
.fleetsist .modal-leave-active .modal-container {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

/* SPEECH-BUBBLE */
.fleetsist .ageInfo {
	position: absolute;
	background: #232323;
	width: 300px;
	border-radius: 1px;
	display: none;
}

.fleetsist #ageInfo:hover .ageInfo {
	display: block;
}

/* SPINNER */
.load-spinner {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);

	}

}

@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);

	}

}

/* COMPONENT: ALERT */
.fleetsist .alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba !important;
}

.fleetsist .alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
}

.fleetsist .alert h3 {
	color: white !important;
}

.fleetsist .alert-success {
	background-color: #6BBD6E;
	color: white !important;
}

.fleetsist .alert-error {
	background-color: #F66359;
	color: white !important;
}

.fleetsist .alert-info {
	background-color: #1077A3;
	color: white !important;
}

.fleetsist #column-btn-search {
	width: 100%;
	justify-content: flex-end;
	height: 100%;
	margin-top: auto;
}

/* BUDGET TABLE*/
table.budget-table {
	border-collapse: collapse;
	border: none;
	font-size: larger;
}

table.budget-table tr {
	border-bottom: 1px solid #CC592B;
	padding: 5px 5px;
	color: #7a7a7a;
}

table.budget-table tr td {
	border: none;
}

.fleetsist .more-info {
	text-transform: uppercase;
	text-decoration: underline;
	color: #CC592B;
}

/* MODAL ALERT */
.fleetsist .modal-alert {
	position: absolute;
	top: 200px;
	width: 100%;
	max-width: 400px;
	background-color: #F66359;
	color: white;
	font-size: 17px;
	transition: opacity .3s ease;
	display: flex;
	flex-direction: column;

}

.fleetsist .opacityBackground {
	pointer-events: none;
	opacity: 0.5;
	transition: opacity .3s ease;
}

.today {
	font-weight: bold;
	font-size: 0.85rem;
}

.fleetsist-border {
	border-radius: 1em;
	border: 1px solid gray;
}

.margin-center {
	margin: 0 auto;
}

span.price {
	font-size: x-large;
	font-weight: bold;
}

.fleetsist .width-100 {
	width: 100%;
}

.fleetsist .max-width-50 {
	max-width: 50% !important;
}

.fleetsist .width-75 {
	width: 75%;
}

.fleetsist .width-66 {
	width: 66%;
}

.fleetsist .width-50 {
	width: 50%;
}

.fleetsist .width-40 {
	width: 40%;
}

.fleetsist .width-33 {
	width: 33%;
}

.fleetsist .width-25 {
	width: 25%;
}

.fleetsist .height-100 {
	height: 100%;
}

.fleetsist .height-50 {
	height: 50%;
}

.fleetsist .method-payment-container {
	position: relative;
	text-align: center;
}

.fleetsist .btn-booking {
	position: relative;
}

.fleetsist .btn-booking img {
	width: 25px;
	height: 25px;
	vertical-align: middle;
	margin-right: 10px;
}

.fleetsist hr {
	border-top: 1px solid gray;
}

.fleetsist .protection-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.fleetsist .protection-package-card {
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	padding: 16px;
	cursor: pointer;
	background: #fff;
}

.fleetsist .activeProtectionPackage {
	border-color: #CC592B;
	box-shadow: 0 0 0 2px rgba(204, 89, 43, .14);
}

.fleetsist .recommended-pill {
	align-self: flex-start;
	border-radius: 999px;
	background: #CC592B;
	color: #fff;
	font-size: 12px;
	padding: 3px 8px;
}

/* Exact supplied booking flow designs */

:root {
  --navy:#283154;
  --navy-deep:#1c2443;
  --orange:#f28a1a;
  --orange-hover:#db7612;
  --bg:#f4f5f8;
  --surface:#fff;
  --surface-soft:#eef1f5;
  --text:#151923;
  --muted:#687184;
  --line:#dde2ea;
  --green:#16894d;
  --shadow:0 16px 45px rgba(26,34,61,.12);
}
html[data-theme="dark"] {
  --bg:#111622;
  --surface:#1b2233;
  --surface-soft:#252e43;
  --text:#f4f6fb;
  --muted:#b8c1d3;
  --line:#35405a;
  --shadow:0 18px 50px rgba(0,0,0,.38);
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,select,input { font:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:min(1380px,calc(100% - 32px)); margin:auto; }

.topline {
  background:var(--navy-deep);
  color:#fff;
  font-size:13px;
}
.topline .container {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.header {
  background:var(--navy);
  color:#fff;
  position:sticky;
  top:0;
  z-index:20;
}
.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo { width:158px; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.phone,.manage {
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
}
.phone { background:var(--orange); color:#fff; }
.manage { background:#fff; color:var(--navy); }
.theme-toggle {
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
}

.search-summary {
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 26px rgba(20,27,48,.07);
}
.summary-inner {
  width:min(1240px,90%);
  margin:auto;
  padding:18px 0;
  display:grid;
  grid-template-columns:1.5fr repeat(4,.72fr) auto;
  gap:10px;
  align-items:stretch;
}
.summary-box {
  min-height:62px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
}
.summary-label {
  display:block;
  font-size:11px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
  margin-bottom:5px;
}
.summary-value { font-weight:900; font-size:15px; }
.modify-btn {
  border:none;
  border-radius:13px;
  background:var(--orange);
  color:#111;
  font-weight:950;
  padding:0 22px;
  cursor:pointer;
}

.page-head {
  padding:34px 0 22px;
}
.breadcrumb { color:var(--muted); font-size:14px; font-weight:700; }
.page-head h1 {
  margin:10px 0 8px;
  font-size:clamp(30px,4vw,48px);
  line-height:1.04;
}
.page-head p { margin:0;color:var(--muted);font-size:17px; }

.results-layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:26px;
  padding-bottom:70px;
}
.filters {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
  align-self:start;
  position:sticky;
  top:126px;
}
.filters h2 { margin:0 0 18px;font-size:20px; }
.filter-group { padding:18px 0;border-top:1px solid var(--line); }
.filter-group:first-of-type { border-top:none;padding-top:0; }
.filter-title { font-weight:900;margin-bottom:12px; }
.check {
  display:flex;align-items:center;gap:9px;
  margin:10px 0;color:var(--muted);font-weight:700;
}
.check input { accent-color:var(--orange); }
.range-row {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.range-row input {
  width:100%;border:1px solid var(--line);border-radius:10px;
  padding:10px;background:var(--surface);color:var(--text);
}
.reset {
  width:100%;border:1px solid var(--line);border-radius:11px;
  background:transparent;color:var(--text);padding:11px;font-weight:900;
}

.results-main { min-width:0; }
.toolbar {
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:16px;
}
.toolbar strong { font-size:18px; }
.sort {
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:11px;padding:11px 14px;font-weight:800;
}

.vehicle-list { display:grid;gap:18px; }
.vehicle-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:36% minmax(0,1fr) 230px;
}
.vehicle-image {
  min-height:250px;
  background:var(--surface-soft);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.vehicle-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.badge {
  position:absolute;left:14px;top:14px;
  background:#fff;color:#111;border-radius:999px;
  padding:7px 11px;font-size:12px;font-weight:950;
  box-shadow:0 5px 16px rgba(0,0,0,.15);
}
.vehicle-info { padding:22px; }
.category {
  color:var(--orange);font-size:13px;font-weight:950;text-transform:uppercase;
}
.vehicle-info h2 { margin:6px 0 4px;font-size:25px; }
.or-similar { color:var(--muted);font-size:14px;margin-bottom:18px; }
.features {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;margin-bottom:18px;
}
.feature { color:var(--muted);font-size:14px;font-weight:700; }
.included {
  display:flex;flex-wrap:wrap;gap:8px;
}
.included span {
  background:rgba(22,137,77,.10);color:var(--green);
  border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;
}
.price-box {
  border-left:1px solid var(--line);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  text-align:right;
}
.price-note { color:var(--muted);font-size:13px; }
.price {
  font-size:35px;font-weight:950;line-height:1;margin:8px 0 4px;
}
.total { color:var(--muted);font-size:13px;margin-bottom:16px; }
.select-btn {
  display:block;
  text-align:center;
  text-decoration:none;
  width:100%;border:none;border-radius:12px;
  background:var(--orange);color:#111;
  padding:14px 16px;font-weight:950;cursor:pointer;
}
.select-btn:hover { background:var(--orange-hover); }
.details-link {
  margin-top:11px;font-size:13px;text-decoration:underline;font-weight:850;
}
.mobile-filter { display:none; }

@media(max-width:1050px) {
  .summary-inner { grid-template-columns:repeat(2,1fr); }
  .modify-btn { min-height:54px; }
  .results-layout { grid-template-columns:1fr; }
  .filters { display:none;position:static; }
  .mobile-filter {
    display:inline-flex;border:1px solid var(--line);background:var(--surface);
    color:var(--text);border-radius:11px;padding:11px 14px;font-weight:900;
  }
  .vehicle-card { grid-template-columns:34% minmax(0,1fr); }
  .price-box {
    grid-column:1/-1;border-left:none;border-top:1px solid var(--line);
    align-items:stretch;text-align:left;
  }
}
@media(max-width:720px) {
  .topline { display:none; }
  .nav { min-height:68px; }
  .logo { width:132px; }
  .phone { display:none; }
  .manage { padding:10px 13px;font-size:13px; }
  .summary-inner { width:94%;grid-template-columns:1fr 1fr; }
  .summary-box:first-child { grid-column:1/-1; }
  .modify-btn { grid-column:1/-1; }
  .page-head { padding-top:24px; }
  .vehicle-card { grid-template-columns:1fr; }
  .vehicle-image { min-height:220px; }
  .features { grid-template-columns:1fr 1fr; }
  .price-box { grid-column:auto; }
}


:root {
  --navy:#283154;
  --navy-deep:#1c2443;
  --orange:#f28a1a;
  --orange-hover:#dc7510;
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-soft:#edf0f5;
  --text:#161923;
  --muted:#687184;
  --line:#dfe4ec;
  --green:#16894d;
  --shadow:0 18px 48px rgba(26,34,61,.13);
}
html[data-theme="dark"] {
  --bg:#111622;
  --surface:#1b2233;
  --surface-soft:#252e43;
  --text:#f4f6fb;
  --muted:#b8c1d3;
  --line:#35405a;
  --shadow:0 18px 48px rgba(0,0,0,.38);
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,input { font:inherit; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.container { width:min(1320px,calc(100% - 32px)); margin:auto; }

.topline {
  background:var(--navy-deep);
  color:#fff;
  font-size:13px;
}
.topline .container {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.header {
  background:var(--navy);
  color:#fff;
  position:sticky;
  top:0;
  z-index:30;
}
.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo { width:158px; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.manage {
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
}
.theme-toggle {
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
}

.progress-wrap {
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.progress {
  width:min(980px,calc(100% - 32px));
  margin:auto;
  padding:18px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.step {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}
.step-number {
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-soft);
  border:1px solid var(--line);
}
.step.done { color:var(--green); }
.step.done .step-number { background:rgba(22,137,77,.12);border-color:rgba(22,137,77,.28); }
.step.active { color:var(--text); }
.step.active .step-number { background:var(--orange);color:#111;border-color:var(--orange); }

.page-head { padding:30px 0 18px; }
.page-head h1 {
  margin:0 0 8px;
  font-size:clamp(30px,4vw,46px);
}
.page-head p { margin:0;color:var(--muted);font-size:17px; }

.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:26px;
  padding-bottom:70px;
}
.main-col { min-width:0; }
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.vehicle-summary {
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  overflow:hidden;
  margin-bottom:24px;
}
.vehicle-image {
  min-height:230px;
  background:var(--surface-soft);
}
.vehicle-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.vehicle-copy { padding:24px; }
.eyebrow {
  color:var(--orange);
  text-transform:uppercase;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
}
.vehicle-copy h2 { margin:7px 0 5px;font-size:28px; }
.muted { color:var(--muted); }
.features {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  font-weight:750;
}

.section-title { margin:30px 0 14px; }
.section-title h2 { margin:0 0 5px;font-size:28px; }
.section-title p { margin:0;color:var(--muted); }

.protection-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.protection {
  position:relative;
  padding:22px;
  cursor:pointer;
  transition:.2s ease;
}
.protection:hover { transform:translateY(-2px); }
.protection.selected {
  border:2px solid var(--orange);
}
.protection input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.tag {
  display:inline-block;
  background:var(--surface-soft);
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:950;
  margin-bottom:12px;
}
.recommended .tag {
  background:rgba(242,138,26,.15);
  color:#b45d05;
}
.protection h3 { margin:0 0 7px;font-size:21px; }
.protection-price {
  font-size:25px;
  font-weight:950;
  margin:13px 0;
}
.protection-price small {
  font-size:12px;
  color:var(--muted);
  font-weight:750;
}
.protection ul {
  list-style:none;
  padding:0;
  margin:15px 0 0;
}
.protection li {
  margin:10px 0;
  color:var(--muted);
  font-size:14px;
}
.protection li::before {
  content:"✓";
  color:var(--green);
  font-weight:950;
  margin-right:8px;
}

.extras-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.extra {
  padding:18px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
}
.extra h3 { margin:0 0 4px;font-size:18px; }
.extra p { margin:0;color:var(--muted);font-size:13px; }
.extra-price { font-weight:950;margin-top:8px; }
.add-btn {
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}

.side-summary {
  position:sticky;
  top:104px;
  align-self:start;
  padding:22px;
}
.side-summary h2 { margin:0 0 18px;font-size:22px; }
.line {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin:12px 0;
  color:var(--muted);
  font-size:14px;
}
.line strong { color:var(--text); }
.divider {
  height:1px;
  background:var(--line);
  margin:18px 0;
}
.total {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:6px;
}
.total span { font-weight:900; }
.total strong { font-size:34px; }
.tax { color:var(--muted);font-size:12px;margin-bottom:18px; }
.continue {
  display:block;
  text-align:center;
  text-decoration:none;
  width:100%;
  border:none;
  border-radius:13px;
  background:var(--orange);
  color:#111;
  padding:15px 16px;
  font-weight:950;
  cursor:pointer;
}
.continue:hover { background:var(--orange-hover); }
.back {
  display:block;
  text-align:center;
  margin-top:12px;
  font-size:13px;
  font-weight:850;
  text-decoration:underline;
}

@media(max-width:1000px) {
  .layout { grid-template-columns:1fr; }
  .side-summary { position:static; }
  .protection-grid { grid-template-columns:1fr; }
}
@media(max-width:720px) {
  .topline { display:none; }
  .logo { width:132px; }
  .progress { grid-template-columns:repeat(4,auto);overflow:auto; }
  .step span:last-child { display:none; }
  .vehicle-summary { grid-template-columns:1fr; }
  .extras-grid { grid-template-columns:1fr; }
}

.add-btn.active {
  background:var(--orange);
  color:#111;
  border-color:var(--orange);
}



:root {
  --navy:#283154;
  --navy-deep:#1c2443;
  --orange:#f28a1a;
  --orange-hover:#dc7510;
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-soft:#edf0f5;
  --text:#161923;
  --muted:#687184;
  --line:#dfe4ec;
  --green:#16894d;
  --red:#c43838;
  --shadow:0 18px 48px rgba(26,34,61,.13);
}
html[data-theme="dark"] {
  --bg:#111622;
  --surface:#1b2233;
  --surface-soft:#252e43;
  --text:#f4f6fb;
  --muted:#b8c1d3;
  --line:#35405a;
  --shadow:0 18px 48px rgba(0,0,0,.38);
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,input,select { font:inherit; }
img { max-width:100%;display:block; }
a { color:inherit;text-decoration:none; }
.container { width:min(1320px,calc(100% - 32px));margin:auto; }

.topline {
  background:var(--navy-deep);
  color:#fff;
  font-size:13px;
}
.topline .container {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.header {
  background:var(--navy);
  color:#fff;
  position:sticky;
  top:0;
  z-index:30;
}
.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo { width:158px; }
.nav-actions { display:flex;align-items:center;gap:10px; }
.manage {
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
}
.theme-toggle {
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
}

.progress-wrap {
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.progress {
  width:min(980px,calc(100% - 32px));
  margin:auto;
  padding:18px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.step {
  display:flex;align-items:center;gap:9px;
  color:var(--muted);font-size:13px;font-weight:850;
}
.step-number {
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-soft);
  border:1px solid var(--line);
}
.step.done { color:var(--green); }
.step.done .step-number { background:rgba(22,137,77,.12);border-color:rgba(22,137,77,.28); }
.step.active { color:var(--text); }
.step.active .step-number { background:var(--orange);color:#111;border-color:var(--orange); }

.page-head { padding:30px 0 18px; }
.page-head h1 { margin:0 0 8px;font-size:clamp(30px,4vw,46px); }
.page-head p { margin:0;color:var(--muted);font-size:17px; }

.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:26px;
  padding-bottom:70px;
}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.form-card { padding:26px;margin-bottom:22px; }
.form-card h2 { margin:0 0 6px;font-size:26px; }
.form-card > p { margin:0 0 22px;color:var(--muted); }

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.field.full { grid-column:1/-1; }
.field label {
  display:block;
  font-size:13px;
  font-weight:900;
  margin-bottom:7px;
}
.field input,.field select {
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--text);
  padding:0 13px;
  outline:none;
}
.field input:focus,.field select:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(242,138,26,.14);
}
.help { margin-top:6px;color:var(--muted);font-size:12px; }

.payment-options {
  display:grid;
  gap:12px;
}
.payment-option {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  cursor:pointer;
}
.payment-option.selected {
  border:2px solid var(--orange);
}
.payment-option input { accent-color:var(--orange); }
.payment-option strong { display:block; }
.payment-option span { display:block;color:var(--muted);font-size:13px;margin-top:3px; }
.payment-badge {
  background:var(--surface-soft);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
}

.terms {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
}
.terms input { margin-top:3px;accent-color:var(--orange); }

.side-summary {
  position:sticky;
  top:104px;
  align-self:start;
  padding:22px;
}
.side-summary h2 { margin:0 0 18px;font-size:22px; }
.summary-title { font-weight:950;font-size:18px;margin-bottom:4px; }
.summary-sub { color:var(--muted);font-size:13px;margin-bottom:18px; }
.line {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin:12px 0;
  color:var(--muted);
  font-size:14px;
}
.line strong { color:var(--text); }
.divider { height:1px;background:var(--line);margin:18px 0; }
.total {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:6px;
}
.total span { font-weight:900; }
.total strong { font-size:34px; }
.tax { color:var(--muted);font-size:12px;margin-bottom:18px; }
.confirm {
  width:100%;
  border:none;
  border-radius:13px;
  background:var(--orange);
  color:#111;
  padding:15px 16px;
  font-weight:950;
  cursor:pointer;
}
.confirm:hover { background:var(--orange-hover); }
.secure {
  text-align:center;
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
}
.back {
  display:block;
  text-align:center;
  margin-top:12px;
  font-size:13px;
  font-weight:850;
  text-decoration:underline;
}
.notice {
  background:rgba(22,137,77,.08);
  border:1px solid rgba(22,137,77,.2);
  color:var(--green);
  border-radius:12px;
  padding:13px 14px;
  font-size:13px;
  font-weight:800;
  margin-bottom:18px;
}

@media(max-width:1000px) {
  .layout { grid-template-columns:1fr; }
  .side-summary { position:static; }
}
@media(max-width:720px) {
  .topline { display:none; }
  .logo { width:132px; }
  .progress { grid-template-columns:repeat(4,auto);overflow:auto; }
  .step span:last-child { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}

/* v4: reliable native date/time controls and full-field office autocomplete */
.momo-office-field { cursor:text; overflow:visible !important; }
.momo-office-input,
.momo-date-input,
.momo-time-select {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 34px 0 0 !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:var(--text, #111b3f) !important;
  font:inherit !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:30px !important;
}
.momo-date-input,
.momo-time-select { cursor:pointer; padding-right:4px !important; }
.momo-date-input::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.75; }
.momo-input-clear {
  position:absolute !important; right:14px !important; top:29px !important;
  width:24px !important; height:24px !important; min-height:0 !important;
  padding:0 !important; border:0 !important; background:transparent !important;
  color:#46648d !important; font-size:22px !important; line-height:20px !important;
  z-index:3 !important; cursor:pointer !important;
}
.momo-office-list {
  position:absolute !important;
  top:calc(100% + 6px) !important; left:0 !important; right:0 !important;
  width:100% !important; max-height:280px !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  padding:6px !important; margin:0 !important;
  background:var(--surface, #fff) !important;
  border:1px solid var(--line, #dfe4ec) !important;
  border-radius:14px !important;
  box-shadow:0 16px 42px rgba(10,22,52,.2) !important;
  z-index:20000 !important;
}
.momo-office-option {
  display:block !important; width:100% !important; min-height:44px !important;
  padding:10px 14px !important; margin:0 !important;
  border:0 !important; border-radius:9px !important;
  background:transparent !important; color:var(--text, #111b3f) !important;
  text-align:left !important; font-size:15px !important; font-weight:650 !important;
  cursor:pointer !important;
}
.momo-office-option:hover,.momo-office-option:focus { background:var(--surface-soft, #f2f4f8) !important; }
.momo-office-empty { padding:14px; color:var(--muted, #687184); }

html[data-theme="dark"] .booking-widget,
html[data-theme="dark"] .booking-field,
html[data-theme="dark"] .momo-office-list { background:#1b2233 !important; border-color:#35405a !important; color:#f4f6fb !important; }
html[data-theme="dark"] .momo-office-input,
html[data-theme="dark"] .momo-date-input,
html[data-theme="dark"] .momo-time-select,
html[data-theme="dark"] .momo-office-option { color:#f4f6fb !important; color-scheme:dark; }
html[data-theme="dark"] .momo-office-option:hover { background:#252e43 !important; }
html[data-theme="dark"] .booking-widget small,
html[data-theme="dark"] .pickup-label,
html[data-theme="dark"] .driver-age,
html[data-theme="dark"] .edit-booking { color:#f4f6fb !important; }


/* MOMO unified system / empty-state message */
.momo-status-message{
  width:100%;
  box-sizing:border-box;
  padding:28px 30px!important;
  border:0!important;
  border-radius:16px!important;
  background:#1557b8!important;
  color:#fff!important;
  text-align:center!important;
  box-shadow:none!important;
}
.momo-status-message strong{color:#fff!important;font-weight:800!important;}
.momo-status-message span,.momo-status-message p{color:#fff!important;font-weight:400!important;}
.momo-status-message p{margin:0!important;}
@media(max-width:640px){.momo-status-message{padding:22px 18px!important;border-radius:14px!important;}}

/* fix 20260817 - Keep selected office readable in dark mode and status messages stable. */
html[data-theme="dark"] #momoNewWidget input.mnw-input.momo-office-input,
html[data-theme="dark"] #momoNewWidget input.mnw-input.momo-office-input:not(:placeholder-shown),
html[data-theme="dark"] .momo-new-widget input.momo-office-input {
  color:#f4f6fb !important;
  -webkit-text-fill-color:#f4f6fb !important;
  caret-color:#f4f6fb !important;
  opacity:1 !important;
}
html[data-theme="dark"] #momoNewWidget input.mnw-input.momo-office-input::placeholder {
  color:#b8c1d3 !important;
  -webkit-text-fill-color:#b8c1d3 !important;
  opacity:1 !important;
}
#momoNewWidget .mnw-status-message {
  margin-top:14px !important;
  padding:28px 30px !important;
  border-radius:16px !important;
  text-align:center !important;
}
#momoNewWidget .mnw-status-message strong { display:block; margin-bottom:4px; }
@media(max-width:640px){#momoNewWidget .mnw-status-message{padding:22px 18px!important;}}