/* ============================================================
   PrivateRide — Chauffeur Booking System form reskin
   Deep restyle of CBS markup to match the design system.
   Scoped to #chbs-main / .chbs-main. Uses tokens.css.

   CBS ships a "connected bordered-cell grid": every .chbs-form-field
   carries its own 1px border, a -1px top margin (so borders collapse),
   16px top padding and float-based width-50/33/25 columns. We FLATTEN
   that grid into independent stacked fields, then style inputs as pills.
   !important is required to beat CBS's generated per-form CSS.
   ============================================================ */

#chbs-main, .chbs-main {
	font-family: var(--pr-font-body) !important;
	color: var(--pr-ink);
	max-width: 1120px;
	margin: 0 auto;
}

/* kill heavy default boxes/shadows from CBS */
.chbs-main .chbs-box-shadow { box-shadow: none !important; background: transparent !important; }

/* ---------- Step tabs (top progress) ---------- */
.chbs-main .chbs-tab { border: none !important; background: transparent !important; margin-bottom: 8px; }
.chbs-main .chbs-tab td,
.chbs-main .chbs-tab li { font-family: var(--pr-font-body) !important; font-weight: 600 !important; }

/* ---------- Service-type tabs (Distance / Hourly) ----------
   jQuery-UI tabs reskinned as a rounded segmented control in the site style:
   a warm light track with a champagne-gold active segment. */
.chbs-main .chbs-tab.ui-tabs { border: 0 !important; background: transparent !important; padding: 0 !important; }
/* drop the jQuery-UI 2px top border on the tab panel (leaves an ugly line under the tabs) */
.chbs-main .chbs-tab.ui-tabs .ui-tabs-panel { border: 0 !important; padding: 0 !important; background: transparent !important; }
.chbs-main .chbs-tab .ui-tabs-nav {
	display: flex !important;
	gap: 4px !important;
	margin: 0 0 20px !important;
	padding: 5px !important;
	background: var(--pr-surface-2) !important;
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-pill) !important;
	list-style: none !important;
	box-shadow: none !important;
}
.chbs-main .chbs-tab .ui-tabs-nav > li {
	flex: 1 1 0 !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--pr-radius-pill) !important;
	text-align: center !important;
	transition: background .2s var(--pr-ease, ease), box-shadow .2s var(--pr-ease, ease) !important;
}
.chbs-main .chbs-tab .ui-tabs-nav > li > a.ui-tabs-anchor {
	display: block !important;
	float: none !important;
	padding: 13px 18px !important;
	font-family: var(--pr-font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: var(--pr-muted) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--pr-radius-pill) !important;
	transition: color .2s var(--pr-ease, ease) !important;
	cursor: pointer !important;
}
.chbs-main .chbs-tab .ui-tabs-nav > li:not(.ui-tabs-active):hover > a.ui-tabs-anchor { color: var(--pr-ink) !important; }
.chbs-main .chbs-tab .ui-tabs-nav > li.ui-tabs-active {
	background: var(--pr-accent) !important;
	box-shadow: 0 2px 8px rgba(168, 134, 63, .28) !important;
}
.chbs-main .chbs-tab .ui-tabs-nav > li.ui-tabs-active > a.ui-tabs-anchor { color: var(--pr-on-accent) !important; }
/* drop the jQuery-UI focus dotted outline / state borders */
.chbs-main .chbs-tab .ui-tabs-nav > li,
.chbs-main .chbs-tab .ui-tabs-nav > li > a.ui-tabs-anchor:focus,
.chbs-main .chbs-tab .ui-state-focus,
.chbs-main .chbs-tab .ui-state-active { outline: none !important; }

/* ---------- Section label bars (Ride details, Passengers, Extra options…) ---------- */
.chbs-main .chbs-form-label-group {
	display: block !important;
	background: var(--pr-surface) !important;
	color: var(--pr-ink-2) !important;
	font-family: var(--pr-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	padding: 13px 16px !important;
	margin: 26px 0 16px !important;
	border: 1px solid var(--pr-border) !important;
	border-left: 3px solid var(--pr-accent) !important;
	border-radius: var(--pr-radius-sm) !important;
	line-height: 1.2 !important;
}
.chbs-main .chbs-form-label-group:first-child { margin-top: 0 !important; }

/* ============================================================
   FLATTEN the connected-cell grid
   ============================================================ */
.chbs-main .chbs-form-field {
	float: none !important;
	width: 100% !important;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	position: relative;
	box-sizing: border-box !important;
}
/* the +/- waypoint dotted divider has no place once flattened */
.chbs-main .chbs-form-field.chbs-form-field-waypoint-duration { border-top: 0 !important; }

/* Two-up rows: date|time, return date|time, adults|children.
   Never un-hide the hidden return row. */
.chbs-main .chbs-form-field-pickup-date-time,
.chbs-main .chbs-form-field-passenger,
.chbs-main .chbs-form-field-return-date-time:not(.chbs-hidden) {
	display: flex !important;
	gap: 14px !important;
	margin-bottom: 0 !important;
}
.chbs-main .chbs-form-field-pickup-date-time > .chbs-form-field,
.chbs-main .chbs-form-field-passenger > .chbs-form-field,
.chbs-main .chbs-form-field-return-date-time > .chbs-form-field {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
}

/* ---------- Field labels ---------- */
.chbs-main .chbs-form-field-label,
.chbs-main .chbs-form-field > label {
	clear: none !important;
	display: block !important;
	font-family: var(--pr-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .6px !important;
	text-transform: uppercase !important;
	color: var(--pr-muted) !important;
	margin: 0 0 8px 0 !important;   /* kill CBS's margin-left:20px indent */
	line-height: 1.3 !important;
}

/* ---------- Inputs / selects / textareas ---------- */
.chbs-main input[type="text"],
.chbs-main input[type="email"],
.chbs-main input[type="tel"],
.chbs-main input[type="number"],
.chbs-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.chbs-main select,
.chbs-main textarea,
.chbs-main .chbs-datepicker,
.chbs-main .chbs-timepicker {
	width: 100% !important;
	box-sizing: border-box !important;
	min-height: 50px !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	font-family: var(--pr-font-body) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	color: var(--pr-ink) !important;
	background: var(--pr-bg) !important;
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-md) !important;
	box-shadow: none !important;
	transition: border-color .2s var(--pr-ease), box-shadow .2s var(--pr-ease);
	-webkit-appearance: none; appearance: none;
}
.chbs-main textarea { height: auto !important; min-height: 96px !important; padding: 14px 16px !important; line-height: 1.5 !important; resize: none; }
.chbs-main input:hover, .chbs-main select:hover, .chbs-main textarea:hover { border-color: var(--pr-border-dark) !important; }
.chbs-main input:focus, .chbs-main select:focus, .chbs-main textarea:focus,
.chbs-main .chbs-datepicker:focus, .chbs-main .chbs-timepicker:focus {
	outline: none !important; border-color: var(--pr-accent) !important; box-shadow: var(--pr-focus) !important;
}

/* native <select> chevron (NOT the jQuery-UI selectmenu, which has its own icon) */
.chbs-main select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F6A60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	padding-right: 42px !important;
}

/* ---------- jQuery-UI selectmenu (Transfer type, Persons) ----------
   Markup: <span.ui-selectmenu-button> <span.chbs-meta-icon-arrow-vertical-large/> <span.ui-selectmenu-text/> </span>
   The icon span comes FIRST in the DOM; CBS floats it right. We keep it
   block (NOT flex, which would drag the icon to the left) and pin the
   icon absolutely on the right. */
.chbs-main .ui-selectmenu-button {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 50px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 44px 0 16px !important;
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-md) !important;
	background: var(--pr-bg) !important;
	color: var(--pr-ink) !important;
	font-family: var(--pr-font-body) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: border-color .2s var(--pr-ease), box-shadow .2s var(--pr-ease);
}
.chbs-main .ui-selectmenu-button.ui-selectmenu-button-open,
.chbs-main .ui-selectmenu-button:focus {
	outline: none !important; border-color: var(--pr-accent) !important; box-shadow: var(--pr-focus) !important;
}
.chbs-main .ui-selectmenu-button .ui-selectmenu-text {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 48px !important;
	font-weight: 500 !important;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chbs-main .ui-selectmenu-button .chbs-meta-icon-arrow-vertical-large {
	position: absolute !important;
	top: 0 !important;
	right: 14px !important;
	float: none !important;
	margin: 0 !important;
	height: 50px !important;
	line-height: 50px !important;
	color: var(--pr-muted) !important;
	font-size: 16px !important;
	pointer-events: none;
}

/* selectmenu dropdown popup (rendered at <body> level, so NOT scoped to .chbs-main) */
.ui-selectmenu-menu .ui-menu {
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-md) !important;
	box-shadow: var(--pr-shadow-md) !important;
	background: var(--pr-bg) !important;
	overflow: hidden;
}
.ui-selectmenu-menu .ui-menu-item {
	font-family: var(--pr-font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--pr-ink) !important;
	padding: 11px 16px !important;
	border-top: 1px solid var(--pr-surface) !important;
}
.ui-selectmenu-menu .ui-menu-item .ui-menu-item-wrapper { padding: 0 !important; }
.ui-selectmenu-menu .ui-menu-item .ui-state-active,
.ui-selectmenu-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
	background: var(--pr-accent) !important; color: var(--pr-on-accent) !important;
	border: none !important; margin: 0 !important;
}

/* tooltip "?" icons -> subtle */
.chbs-main .chbs-meta-icon-question { color: var(--pr-muted) !important; opacity: .55; }

/* ---------- Add / remove stop (+ / -) ----------
   CBS positions these absolutely inside the location cell. We anchor to
   the cell bottom so the button stays vertically centred on the 50px
   input regardless of the label height above it. */
.chbs-main .chbs-location-add,
.chbs-main .chbs-location-remove {
	top: auto !important;
	bottom: 3px !important;
	width: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
	font-size: 22px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-md) !important;
	background: var(--pr-bg) !important;
	color: var(--pr-ink) !important;
	cursor: pointer;
	transition: border-color .18s, background .18s, color .18s;
}
.chbs-main .chbs-location-add { right: 3px !important; }
.chbs-main .chbs-form-field.chbs-form-field-location-switch + .chbs-form-field.chbs-form-field-location-switch .chbs-location-remove,
.chbs-main .chbs-form-field.chbs-form-field-waypoint-duration + .chbs-form-field.chbs-form-field-location-switch .chbs-location-remove {
	right: 51px !important;
}
.chbs-main .chbs-location-add:hover { border-color: var(--pr-accent) !important; color: var(--pr-accent-strong) !important; }
.chbs-main .chbs-location-remove:hover { border-color: var(--pr-error) !important; color: var(--pr-error) !important; }
/* keep location text clear of the buttons */
.chbs-main .chbs-form-field-location-autocomplete input { padding-right: 56px !important; }

/* "- use my location" link inside the label */
.chbs-main .chbs-my-location-link {
	color: var(--pr-accent-strong) !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* swap pickup/dropoff */
.chbs-main .chbs-form-field-location-switch > .chbs-meta-icon-arrow-vertical,
.chbs-main .chbs-form-field-location-switch-icon { color: var(--pr-accent-strong) !important; }

/* ---------- Service-type / DISTANCE·HOURLY toggle ---------- */
.chbs-main .chbs-main-navigation-default,
.chbs-main .chbs-main-navigation-responsive { border: none !important; }

/* Mobile "1. Enter Ride Details" step dropdown — pointless; the form advances
   via the Next / Back buttons. Hide it (only ever shown on narrow screens). */
.chbs-main .chbs-main-navigation-responsive { display: none !important; }

/* ---------- Buttons ---------- */
.chbs-main .chbs-button {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
	min-height: 52px !important; padding: 0 30px !important;
	font-family: var(--pr-font-body) !important; font-size: 15px !important; font-weight: 600 !important;
	letter-spacing: .4px !important; line-height: 1 !important; border-radius: var(--pr-radius-md) !important;
	border: 1px solid transparent !important; box-shadow: none !important; text-shadow: none !important;
	transition: background .25s var(--pr-ease), border-color .25s, color .25s, transform .15s;
}
.chbs-main .chbs-button:active { transform: translateY(1px); }
.chbs-main .chbs-button-style-1,
.chbs-main .chbs-button-step-next { background: var(--pr-accent) !important; color: var(--pr-on-accent) !important; }
.chbs-main .chbs-button-style-1:hover,
.chbs-main .chbs-button-step-next:hover { background: var(--pr-accent-strong) !important; color: var(--pr-on-accent) !important; }
.chbs-main .chbs-button-style-2,
.chbs-main .chbs-button-step-prev { background: transparent !important; color: var(--pr-ink) !important; border-color: var(--pr-border) !important; }
.chbs-main .chbs-button-style-2:hover,
.chbs-main .chbs-button-step-prev:hover { background: var(--pr-ink) !important; color: var(--pr-on-dark) !important; border-color: var(--pr-ink) !important; }
/* the Next/Prev row */
.chbs-main .chbs-main-content-navigation-button { display: flex !important; gap: 12px !important; margin-top: 24px !important; }

/* ---------- Quantity steppers (adults/children +/-) ---------- */
.chbs-main .chbs-quantity-section { display: flex !important; align-items: stretch !important; gap: 0; }
.chbs-main .chbs-quantity-section .chbs-quantity-section-button {
	width: 50px !important; min-width: 50px !important; height: 50px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border: 1px solid var(--pr-border) !important; background: var(--pr-bg) !important;
	color: var(--pr-ink) !important; cursor: pointer; font-size: 20px !important;
}
.chbs-main .chbs-quantity-section .chbs-quantity-section-button:first-child { border-radius: var(--pr-radius-md) 0 0 var(--pr-radius-md) !important; }
.chbs-main .chbs-quantity-section .chbs-quantity-section-button:last-child { border-radius: 0 var(--pr-radius-md) var(--pr-radius-md) 0 !important; }
.chbs-main .chbs-quantity-section .chbs-quantity-section-button:hover { border-color: var(--pr-accent) !important; color: var(--pr-accent-strong) !important; }
.chbs-main .chbs-quantity-section input { border-radius: 0 !important; text-align: center !important; padding: 0 8px !important; }

/* ---------- Vehicle filter ---------- */
.chbs-main .chbs-vehicle-filter {
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-lg) !important; padding: 20px !important; margin-bottom: 24px !important;
}

/* ---------- Vehicle cards ---------- */
.chbs-main .chbs-vehicle-list { display: grid !important; gap: 16px !important; }
.chbs-main .chbs-vehicle {
	position: relative; min-height: 0 !important; height: auto !important;
	background: var(--pr-bg) !important; border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-lg) !important; box-shadow: var(--pr-shadow-sm) !important;
	padding: 22px 24px !important; overflow: hidden;
	transition: border-color .2s var(--pr-ease), box-shadow .2s var(--pr-ease), transform .2s var(--pr-ease);
}
.chbs-main .chbs-vehicle:hover { border-color: var(--pr-border-dark) !important; box-shadow: var(--pr-shadow-md) !important; transform: translateY(-2px); }
.chbs-main .chbs-vehicle.chbs-state-selected { border-color: var(--pr-accent) !important; box-shadow: inset 0 0 0 1px var(--pr-accent), var(--pr-shadow-md) !important; }
.chbs-main .chbs-vehicle-content-header { font-family: var(--pr-font-display) !important; font-weight: 600 !important; font-size: 22px !important; color: var(--pr-ink) !important; }
.chbs-main .chbs-vehicle-content-description { color: var(--pr-muted) !important; font-size: 14px !important; line-height: 1.5; }
.chbs-main .chbs-vehicle [class*="price"],
.chbs-main .chbs-vehicle-content-price,
.chbs-main .chbs-vehicle .chbs-price { color: var(--pr-accent-strong) !important; font-family: var(--pr-font-display) !important; font-weight: 700 !important; }

/* ---------- Contact details / phone (intl-tel-input, separate dial code) ----------
   The blanket input rule above uses a 4x :not() selector (specificity 0,5,1)
   that beats a plain `.iti input`, forcing padding back to 16px and letting the
   number slide under the flag/"+1". Match that :not() chain here so the left
   padding clears the ~67px flag+dial-code+arrow block. */
/* CBS public.css inserts `margin:0 20px` on the iti wrapper (insets the field
   vs its neighbours) and pins the flag-container to height:27px (flag floats
   high). Reset both — neither CBS rule uses !important, so these win. */
.chbs-main .iti, .chbs-main .iti--allow-dropdown, .chbs-main .intl-tel-input {
	width: 100% !important; display: block !important; margin: 0 !important;
}
.chbs-main .iti input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
	padding-left: 92px !important;
	padding-right: 16px !important;
}
/* selected flag block: full height + brand divider instead of the grey box */
.chbs-main .iti__flag-container, .chbs-main .iti--allow-dropdown .iti__flag-container {
	top: 0 !important; bottom: 0 !important; height: auto !important; padding: 1px !important;
}
.chbs-main .iti__selected-flag {
	height: 100% !important;
	padding: 0 10px 0 14px !important;
	background: transparent !important;
	border-right: 1px solid var(--pr-border) !important;
}
.chbs-main .iti__flag-container:hover .iti__selected-flag { background: var(--pr-surface) !important; }
.chbs-main .iti__selected-dial-code { color: var(--pr-ink) !important; font-weight: 500 !important; margin-left: 8px !important; }
.chbs-main .iti__arrow { margin-left: 8px !important; border-top-color: var(--pr-muted) !important; }
.chbs-main .iti__arrow--up { border-top: none !important; border-bottom-color: var(--pr-muted) !important; }
/* country dropdown (rendered inside .iti, but also brand the global hook) */
.chbs-main .iti__country-list, .iti__country-list {
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-md) !important;
	box-shadow: var(--pr-shadow-md) !important;
	background: var(--pr-bg) !important;
}
.chbs-main .iti__country, .iti__country { padding: 9px 12px !important; font-family: var(--pr-font-body) !important; font-size: 14px !important; }
.chbs-main .iti__country.iti__highlight, .iti__country.iti__highlight { background: var(--pr-surface) !important; }
.chbs-main .iti__dial-code, .iti__dial-code { color: var(--pr-muted) !important; }
/* the bundled iti CSS points the sprite at ../img/flags.png (404); CBS ships it
   under media/image/public — pin the correct path so flags always render */
.chbs-main .iti__flag, .iti__flag {
	background-image: url("/wp-content/plugins/chauffeur-booking-system/media/image/public/flags.png") !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.chbs-main .iti__flag, .iti__flag {
		background-image: url("/wp-content/plugins/chauffeur-booking-system/media/image/public/flags@2x.png") !important;
	}
}

/* billing checkbox */
.chbs-main input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 0 !important; accent-color: var(--pr-accent); vertical-align: middle; }

/* ---------- Payment methods ---------- */
.chbs-main .chbs-payment-header,
.chbs-main .chbs-booking-complete-payment > p:first-child {
	font-family: var(--pr-font-display) !important; font-weight: 600 !important; font-size: 22px !important;
	color: var(--pr-ink) !important; text-align: center; margin-bottom: 18px !important;
}
.chbs-main .chbs-booking-complete-payment-stripe,
.chbs-main .chbs-booking-complete-payment-paypal,
.chbs-main .chbs-booking-complete-payment-cash,
.chbs-main .chbs-booking-complete-payment-wire-transfer,
.chbs-main .chbs-booking-complete-payment-credit-card-pickup,
.chbs-main .chbs-booking-complete-payment-woocommerce {
	border: 1px solid var(--pr-border) !important; border-radius: var(--pr-radius-lg) !important;
	background: var(--pr-bg) !important; padding: 22px !important; transition: border-color .2s, box-shadow .2s;
}
.chbs-main .chbs-booking-complete-payment .chbs-state-selected,
.chbs-main .chbs-booking-complete-payment-stripe.chbs-state-selected {
	border-color: var(--pr-accent) !important; box-shadow: inset 0 0 0 1px var(--pr-accent) !important;
}
.chbs-main .chbs-meta-icon-tick { color: var(--pr-accent) !important; }

/* ---------- Notices: error / surge / success / availability ---------- */
.chbs-main .chbs-notice {
	border-radius: var(--pr-radius-md) !important; border: 1px solid var(--pr-border) !important;
	font-weight: 600 !important; font-size: 14px !important; padding: 14px 16px !important; box-shadow: none !important;
}
.chbs-main .chbs-notice-error, .chbs-main .chbs-notice.error { background: var(--pr-error-soft) !important; border-color: var(--pr-error) !important; color: var(--pr-error) !important; }
.chbs-main .chbs-notice-warning, .chbs-main .chbs-notice.warning { background: var(--pr-warning-soft) !important; border-color: var(--pr-warning) !important; color: var(--pr-warning) !important; }
.chbs-main .chbs-notice-success, .chbs-main .chbs-notice.success { background: var(--pr-success-soft) !important; border-color: var(--pr-success) !important; color: var(--pr-success) !important; }

/* ---------- Google map column ---------- */
.chbs-main .chbs-google-map {
	position: relative;
	background: var(--pr-surface) !important;
	border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-lg) !important;
	overflow: hidden;
	margin-bottom: 16px;
}
.chbs-main .chbs-google-map::before {
	content: "Route map";
	position: absolute; inset: 0; z-index: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--pr-muted); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.chbs-main #chbs_google_map { position: relative; z-index: 1; min-height: 320px !important; background: transparent !important; }

/* ---------- Ride info / summary ---------- */
.chbs-main .chbs-ride-info {
	background: var(--pr-surface) !important; border: 1px solid var(--pr-border) !important;
	border-radius: var(--pr-radius-lg) !important; padding: 18px 20px !important; box-shadow: none !important;
}
.chbs-main .chbs-ride-info .chbs-meta-icon-route,
.chbs-main .chbs-ride-info .chbs-meta-icon-clock { color: var(--pr-accent-strong) !important; }

/* Mobile: the big stacked distance/time illustration wastes space — collapse it
   into a compact two-column row (icon on top, label + value below each). */
@media (max-width: 880px) {
	.chbs-main .chbs-ride-info {
		display: flex !important;
		gap: 10px !important;
		padding: 14px 12px !important;
	}
	.chbs-main .chbs-ride-info > div {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 3px !important;
		text-align: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.chbs-main .chbs-ride-info > div:first-child { border-right: 1px solid var(--pr-border) !important; }
	/* icon */
	.chbs-main .chbs-ride-info > div > span:first-child { font-size: 24px !important; line-height: 1 !important; margin: 0 0 2px !important; }
	/* label */
	.chbs-main .chbs-ride-info > div > span:nth-child(2) { font-size: 10.5px !important; letter-spacing: .6px !important; }
	/* value */
	.chbs-main .chbs-ride-info > div > span:nth-child(3) { font-size: 17px !important; }
}

/* ---------- Booking complete (success) ---------- */
.chbs-main .chbs-booking-complete { text-align: center; }

/* ---------- Mobile ---------- */
@media (max-width: 782px) {
	.chbs-main input:not([type="checkbox"]):not([type="radio"]),
	.chbs-main select, .chbs-main .chbs-datepicker, .chbs-main .chbs-timepicker,
	.chbs-main .ui-selectmenu-button { font-size: 16px !important; }
	.chbs-main .chbs-button { width: 100% !important; }  /* standalone buttons stay full-width */
	/* Bottom nav: keep Back + Next on ONE row. Back collapses to a compact
	   arrow-only button (its long step-name label is hidden); Next fills the rest. */
	.chbs-main .chbs-main-content-navigation-button { flex-direction: row !important; align-items: stretch !important; gap: 10px !important; }
	/* order forces Back on the LEFT, Next on the RIGHT regardless of CBS's
	   source order (which differs between steps). */
	.chbs-main .chbs-main-content-navigation-button > .chbs-button-step-prev {
		order: 0 !important;
		flex: 0 0 auto !important; width: auto !important; min-width: 54px !important;
		display: flex !important; align-items: center !important; justify-content: center !important;
		font-size: 0 !important; padding: 0 !important; gap: 0 !important;
	}
	.chbs-main .chbs-main-content-navigation-button > .chbs-button-step-prev .chbs-meta-icon-arrow-horizontal-large {
		font-size: 18px !important; margin: 0 !important; line-height: 1 !important;
		padding: 0 !important; /* kill CBS's padding-left:12px that off-centres the arrow */
	}
	.chbs-main .chbs-main-content-navigation-button > .chbs-button-step-next { order: 1 !important; flex: 1 1 auto !important; width: auto !important; }
	.chbs-main .chbs-vehicle-content-header { font-size: 19px !important; }
	/* form leads on mobile — hide the route map (keep the distance/time summary) */
	.chbs-main .chbs-google-map { display: none !important; }
}

/* ============================================================
   Checkout (step 4) — 2-column review layout.
   Activated by booking.js (.prvr-summary-ready) only AFTER the summary
   blocks were successfully re-arranged, so a JS failure falls back to the
   native CBS 3-column layout (the checkout never breaks).
   Result: wide MAIN (map + Ride details, old col1+col2) + SIDEBAR
   (Contact & Billing → Vehicle info → Total). Payment block removed.
   ============================================================ */
.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 {
	display: grid !important;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
	gap: 24px !important;
	align-items: start !important;
	float: none !important;
}
.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 > .chbs-layout-column-left {
	display: none !important;
}
.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 > .chbs-layout-column-center {
	grid-column: 1 !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important;
}
.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 > .chbs-layout-column-right {
	grid-column: 2 !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important;
}
@media (max-width: 880px) {
	.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 {
		grid-template-columns: 1fr !important;
	}
	.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 > .chbs-layout-column-center,
	.chbs-main.prvr-summary-ready .chbs-main-content-step-4 > .chbs-layout-33x33x33 > .chbs-layout-column-right {
		grid-column: 1 !important;
	}
}

/* Hide the CBS plugin credit line in the form footer. */
.chbs-main .chbs-copyright { display: none !important; }

/* Mobile: compact the summary blocks — each field on one line
   ( LABEL .......... value ), long values wrap right-aligned. */
@media (max-width: 880px) {
	.chbs-main .chbs-summary .chbs-summary-field {
		display: flex !important;
		justify-content: space-between !important;
		align-items: baseline !important;
		gap: 16px !important;
		margin-top: 0 !important;
		padding: 10px 0 !important;
	}
	.chbs-main .chbs-summary .chbs-summary-field .chbs-summary-field-name {
		flex: 0 0 auto !important;
		margin: 0 !important;
		font-size: 11px !important;
		line-height: 1.4 !important;
		color: var(--pr-muted) !important;
		white-space: nowrap !important;
	}
	.chbs-main .chbs-summary .chbs-summary-field .chbs-summary-field-value {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
		text-align: right !important;
		color: var(--pr-ink) !important;
	}
	/* Addresses / long values (flagged by booking.js) stay stacked — label on top,
	   full-width value below, left-aligned. Inline would look cramped. */
	.chbs-main .chbs-summary .chbs-summary-field.prvr-field-stacked { display: block !important; }
	.chbs-main .chbs-summary .chbs-summary-field.prvr-field-stacked .chbs-summary-field-name { margin-bottom: 4px !important; white-space: normal !important; }
	.chbs-main .chbs-summary .chbs-summary-field.prvr-field-stacked .chbs-summary-field-value { text-align: left !important; }
}

/* Mobile: "Total distance" + "Total time" are emitted by CBS as a single
   layout-2 summary field (a .chbs-layout-50x50 two-column block). Unfloat it
   into two full-width inline rows so they match the other summary fields. */
@media (max-width: 880px) {
	.chbs-main .chbs-summary .chbs-summary-field .chbs-layout-50x50 { display: block !important; width: 100% !important; }
	.chbs-main .chbs-summary .chbs-summary-field .chbs-layout-50x50 > .chbs-layout-column-left,
	.chbs-main .chbs-summary .chbs-summary-field .chbs-layout-50x50 > .chbs-layout-column-right {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: baseline !important;
		gap: 16px !important;
	}
	.chbs-main .chbs-summary .chbs-summary-field .chbs-layout-50x50 > .chbs-layout-column-left { padding-bottom: 10px !important; }
	.chbs-main .chbs-summary .chbs-summary-field .chbs-layout-50x50 .chbs-summary-field-name { flex: 0 0 auto !important; margin: 0 !important; }
	.chbs-main .chbs-summary .chbs-summary-field .chbs-layout-50x50 .chbs-summary-field-value { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; text-align: right !important; }
}