/* rental-s-colors.css — vehicle card redesign (Rental Product Grid widget) */

/* =========================================================================
   Custom preloader — J Dream logo with gold loading bar
   The Motors theme JS adds/removes stm-site-preloader + stm-site-loaded
   on <html>; we suppress the theme's default spinner and replace it here.
   ========================================================================= */

/* Suppress theme's default spinner pseudo-elements */
html.stm-site-preloader:before,
html.stm-site-preloader:after,
html.stm-site-preloader-anim:before,
html.stm-site-preloader-anim:after {
	display: none !important;
}

/* Prevent page scroll during preload (theme sets this via .no-scroll too) */
html.stm-site-preloader body {
	overflow: hidden;
}

/* Preloader overlay */
#jdream-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0.55s ease;
}

/* Fade out when theme JS adds stm-site-loaded */
html.stm-site-loaded #jdream-preloader {
	opacity: 0;
	visibility: hidden;
}

/* Hide entirely once theme removes stm-site-preloader */
html:not(.stm-site-preloader) #jdream-preloader {
	display: none;
}

/* Logo — gentle pulse */
#jdream-preloader .jdream-logo {
	width: 180px;
	height: auto;
	animation: jdream-pulse 1.4s ease-in-out infinite alternate;
	filter: drop-shadow(0 6px 18px rgba(240, 197, 64, 0.35));
}

@keyframes jdream-pulse {
	from { transform: scale(0.93); opacity: 0.82; }
	to   { transform: scale(1);    opacity: 1; }
}

/* Car scene — muscle car bouncing on its suspension while the wheels stay
   planted on a moving road, with a street lamp passing by for depth. */
#jdream-preloader .jdream-car-scene {
	position: relative;
	width: 240px;
	height: 112px;
	overflow: hidden;
	margin-top: 4px;
}

/* Body and wheels are separate cutout layers of the same illustration so the
   body can bounce independently while the wheels stay fixed on the road. */
#jdream-preloader .jdream-car-rig {
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: 200px;
	height: 57px;
	z-index: 2;
	transform: translateX(-50%);
	filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.18));
}

#jdream-preloader .jdream-car-rig img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

#jdream-preloader .jdream-car-wheels {
	z-index: 1;
}

#jdream-preloader .jdream-car-body {
	z-index: 2;
	animation: jdream-car-bounce 0.9s ease-in-out infinite;
}

@keyframes jdream-car-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

/* Street lamp obstacle drifting past in the foreground, in front of the car */
#jdream-preloader .jdream-lamp {
	position: absolute;
	bottom: 3px;
	right: -50px;
	height: 100px;
	width: 44px;
	z-index: 3;
	opacity: 0.92;
	animation: jdream-lamp-pass 1.8s linear infinite;
}

@keyframes jdream-lamp-pass {
	from { transform: translateX(0); }
	to   { transform: translateX(-330px); }
}

/* Dashed road line scrolling under the car to sell forward motion */
#jdream-preloader .jdream-road {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background-image: repeating-linear-gradient(90deg, #d9d9d9 0 14px, transparent 14px 28px);
	background-size: 28px 3px;
	animation: jdream-road-move 0.5s linear infinite;
}

@keyframes jdream-road-move {
	from { background-position: 0 0; }
	to   { background-position: -28px 0; }
}

.stm_products_grid_class .stm_product_grid_single .inner {
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stm_products_grid_class .stm_product_grid_single .inner:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	transform: translateY(-3px);
}

/* The plugin's own widget CSS (motors-rental-product-grid.css) fills the whole
   `.inner` card with solid --motors-base-color on hover — meant for its original
   card layout, but with our redesigned white card body it turns the entire card
   yellow and swallows the "View details" button border (same yellow) into it.
   Keep the card white; the shadow lift above is the hover cue instead. */
.stm_products_grid_class .stm_product_grid_single:hover .inner {
	background-color: #fff;
}

.stm_products_grid_class .stm_product_grid_single .inner .stm_image {
	position: relative;
	padding: 0;
	text-align: initial;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}

.stm_products_grid_class .stm_product_grid_single .inner .stm_image img {
	position: static;
	top: 0;
	width: 100%;
	display: block;
	aspect-ratio: 798 / 466;
	object-fit: cover;
}

.stm_category_badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.stm_category_badge i {
	font-size: 16px;
	color: var(--motors-base-color);
}

.stm_price_badge {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 5;
	background-color: #fff;
	border-radius: 50px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 15px;
	color: var(--motors-secondary-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.stm_price_badge .woocommerce-Price-amount {
	color: var(--motors-secondary-color);
}

.stm_card_body {
	padding: 20px 22px 22px;
}

.stm_card_body h3 {
	margin: 0 0 2px;
	font-size: 20px;
	color: var(--motors-secondary-color);
}

.stm_card_body .s_title {
	font-size: 13px;
	color: #888;
	margin-bottom: 10px;
}

.stm_location_row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #555;
	margin-bottom: 12px;
}

.stm_location_row i {
	color: var(--motors-base-color);
	font-size: 14px;
}

.stm_tags_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.stm_tags_row .stm_tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: #fbeee0;
	color: #b5651d;
	border-radius: 50px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
}

.stm_tags_row .stm_tag i {
	font-size: 12px;
	color: #b5651d;
}

.stm_divider {
	height: 1px;
	background-color: #eee;
	margin: 0 0 14px;
}

.stm_meta_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.stm_new_tag {
	background-color: #eef7ee;
	color: #3a8a3a;
	border-radius: 50px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
}

.stm_mileage_pill {
	background-color: #f5f5f5;
	color: #555;
	border-radius: 50px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
}

.stm_card_highlights {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.stm_highlight_row {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: #555;
}

.stm_highlight_row i {
	color: #3a8a3a;
	font-size: 13px;
	flex-shrink: 0;
}

.stm_availability_row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #3a8a3a;
	font-weight: 600;
	margin-bottom: 18px;
}

.stm_availability_dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #3a8a3a;
	display: inline-block;
}

.stm_view_details_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--motors-base-color);
	color: var(--motors-secondary-color);
	border-radius: 50px;
	padding: 12px;
	font-size: 14px;
	font-weight: 700;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.stm_products_grid_class .stm_product_grid_single .inner:hover .stm_view_details_btn {
	background-color: var(--motors-base-color);
	border-color: var(--motors-secondary-color);
	color: #fff;
}

.stm_products_grid_class .stm_product_grid_single .inner:hover .stm_view_details_btn i {
	color: #fff;
}

/* Single vehicle detail page */

.stm-vehicle-detail {
	margin: 0 0 60px;
}

.stm-vehicle-detail-photo {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 24px;
}

.stm-vehicle-detail-photo img {
	width: 100%;
	display: block;
	aspect-ratio: 798 / 466;
	object-fit: cover;
}

/* Single vehicle page: cover + gallery thumbnail strip. Clicking the cover
   or any thumb opens the lightGallery lightbox (already enqueued by the
   Motors dealership plugin). JS: rental-s-security.php section 0d. */
.stm-vehicle-detail-photo {
	margin-bottom: 12px;
	position: relative;
}
.stm-vehicle-detail-photo.stm-vehicle-photo-zoom {
	cursor: zoom-in;
}
.stm-vehicle-detail-photo.stm-vehicle-photo-zoom::after {
	content: "\f00e"; /* fa magnifying-glass-plus */
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
	font-weight: 900;
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 4;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(20, 30, 32, .55);
	color: #fff;
	font-size: 15px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
}
.stm-vehicle-detail-photo.stm-vehicle-photo-zoom:hover::after {
	opacity: 1;
}
.stm-vehicle-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.stm-vehicle-gallery-thumb {
	flex: 0 0 auto;
	width: 96px;
	height: 66px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #1e2c2e url("../jdream-logo.png") center / 58% auto no-repeat;
	line-height: 0;
	transition: border-color .15s ease, opacity .15s ease;
	opacity: .78;
}
.stm-vehicle-gallery-thumb img {
	transition: opacity .3s ease;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.stm-vehicle-gallery-thumb img.cg-loading {
	opacity: 0;
}
.stm-vehicle-gallery-thumb:hover,
.stm-vehicle-gallery-thumb:focus-visible {
	opacity: 1;
	border-color: var(--motors-base-color, #f0c540);
}
@media (max-width: 480px) {
	.stm-vehicle-gallery-thumb {
		width: 72px;
		height: 52px;
	}
}

/* Vehicle card image gallery - homepage grid + reservation cards.
   Markup: rental_s_card_gallery_markup() (rental-s-security.php 0c).
   Mobile = native scroll-snap swipe; desktop = hover prev/next arrows.
   JS: rental-s-security.php section 0d. */
.stm-card-gallery {
	position: relative;
	overflow: hidden;
}
.stm-card-gallery-track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.stm-card-gallery-track::-webkit-scrollbar {
	display: none;
}
.stm-card-gallery-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	line-height: 0;
	/* J Dream logo placeholder, visible through the image while it (lazily)
	   loads. The <img> paints on top; when it loads it fades in and covers
	   this entirely. */
	background: #1e2c2e url("../jdream-logo.png") center / 40% auto no-repeat;
}
.stm-card-gallery-slide img {
	width: 100%;
	display: block;
	aspect-ratio: 798 / 466;
	object-fit: cover;
	transition: opacity .3s ease;
}
.stm-card-gallery-slide img.cg-loading {
	opacity: 0;
}
.stm-card-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	min-width: 0;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #1e3236;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	z-index: 6;
	opacity: .82;
	transition: opacity .15s ease, background .15s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.stm-card-gallery-arrow i {
	margin: 0;
}
.stm-card-gallery-arrow.prev {
	left: 10px;
}
.stm-card-gallery-arrow.next {
	right: 10px;
}
.stm-card-gallery-arrow.is-hidden {
	/* fade rather than display:none - no layout flicker mid-interaction,
	   and clicks pass straight through to the image below. */
	opacity: 0;
	pointer-events: none;
}
.stm-card-gallery-arrow:hover,
.stm-card-gallery-arrow:focus-visible {
	opacity: 1;
	background: #fff;
}
.stm-grid-card:hover .stm-card-gallery-arrow,
.stm_product_grid_single:hover .stm-card-gallery-arrow,
.stm_image:hover .stm-card-gallery-arrow,
.stm_single_class_car .image:hover .stm-card-gallery-arrow {
	opacity: 1;
}
.stm-card-gallery-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 6;
	pointer-events: none;
}
.stm-card-gallery-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.stm-card-gallery-dot.is-active {
	background: #fff;
}
.stm-card-gallery-count {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 6;
	background: rgba(20, 30, 32, .58);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
	pointer-events: none;
}
.stm-card-gallery-count i {
	margin-right: 3px;
	font-size: 11px;
}
/* On the grid the arrows/dots/count are lifted out of the card <a> by JS
   (cgSetup) into this overlay - a sibling of the link, so an arrow click has
   no <a> ancestor and can't navigate. It sits exactly over the image box
   (same width + 798:466 ratio). Only the controls inside catch pointer
   events. Reservation cards keep the controls in place (no link there). */
.stm-card-gallery-ui {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	aspect-ratio: 798 / 466; /* fallback until JS sets exact px dims */
	pointer-events: none;
	/* Must sit above .stm_image (z-index:20 in the grid card) so the arrows
	   are not buried behind the slide images. */
	z-index: 30;
}
.stm-card-gallery-ui .stm-card-gallery-arrow,
.stm-card-gallery-ui .stm-card-gallery-dots,
.stm-card-gallery-ui .stm-card-gallery-count {
	z-index: 2;
}
.stm-card-gallery-ui .stm-card-gallery-arrow {
	pointer-events: auto;
}
/* Narrow / single-column cards: rely on swipe, drop the arrows. Uses width,
   NOT @media (hover), because hybrid + touchscreen laptops report
   `hover: none` even with a mouse attached. */
@media (max-width: 600px) {
	.stm-card-gallery-arrow {
		display: none;
	}
}

.stm-vehicle-detail-body h1 {
	font-size: 30px;
	margin: 0 0 4px;
	color: var(--motors-secondary-color);
}

.stm-vehicle-detail-body .s_title {
	font-size: 15px;
	color: #888;
	margin-bottom: 12px;
}

.stm-vehicle-detail-description {
	font-size: 15px;
	line-height: 1.6;
	color: #444;
	margin: 16px 0 24px;
}

.stm-vehicle-detail-specs-heading {
	font-size: 18px;
	margin-bottom: 16px;
	color: var(--motors-secondary-color);
}

.stm-vehicle-detail-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 10px;
}

.stm-spec-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #f8f8f8;
	border-radius: 10px;
	padding: 14px;
}

.stm-spec-item i {
	font-size: 22px;
	color: var(--motors-base-color);
	flex-shrink: 0;
}

.stm-spec-item .stm-spec-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #999;
}

.stm-spec-item .stm-spec-value {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

.stm-vehicle-detail-sidebar-box {
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
	padding: 24px;
	position: sticky;
	top: 20px;
}

.stm-change-dates-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	text-decoration: none;
	transition: border-color 0.3s ease, color 0.3s ease;
}

.stm-change-dates-link:hover {
	border-color: var(--motors-base-color);
	color: var(--motors-base-color);
}

@media (max-width: 992px) {
	.stm-vehicle-detail-sidebar {
		margin-top: 30px;
	}

	.stm-vehicle-detail-sidebar-box {
		position: static;
	}

	.stm-vehicle-detail-specs {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.stm-vehicle-detail-specs {
		grid-template-columns: 1fr;
	}

	.stm-vehicle-detail-body h1 {
		font-size: 24px;
	}
}

/* Style the reused price.php booking widget inside the new sidebar context
   (theme's own button styling is scoped to .stm_single_class_car, which
   isn't an ancestor here) */

.stm-vehicle-detail-sidebar-box .stm_rent_prices {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stm-vehicle-detail-sidebar-box .stm_rent_price {
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 16px;
}

.stm-vehicle-detail-sidebar-box .stm_rent_price .total {
	font-size: 20px;
	font-weight: 700;
	color: var(--motors-secondary-color);
	margin-bottom: 6px;
}

.stm-vehicle-detail-sidebar-box .stm_rent_price .period {
	font-size: 13px;
	font-weight: 600;
	color: #777;
	margin-bottom: 6px;
}

.stm-vehicle-detail-sidebar-box .stm_rent_mileage {
	font-size: 13px;
	color: #777;
	margin-bottom: 12px;
}

.stm-vehicle-detail-sidebar-box .pay a {
	display: block;
	text-align: center;
	background-color: var(--motors-base-color);
	color: #fff;
	border-radius: 50px;
	padding: 12px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.stm-vehicle-detail-sidebar-box .pay a:hover {
	opacity: 0.85;
	color: #fff;
}

.stm-vehicle-detail-sidebar-box .stm_discount {
	font-size: 12px;
	color: #3a8a3a;
	margin-top: 8px;
	text-align: center;
}

/* Rental Form widget (pickup/return office + dates), embedded directly in the vehicle
   detail sidebar so a shopper can set/change dates without leaving the vehicle page.
   The widget is designed as a full-width hero search bar; these overrides make its
   inner box sit cleanly inside a ~300-380px sidebar column instead of leaving its normal
   large hero spacing/margins/fixed widths. */
.stm-vehicle-detail-datepicker {
	margin-bottom: 20px;
	padding: 20px;
}

.stm-vehicle-detail-datepicker-heading,
.stm-vehicle-detail-pricebox-heading {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 14px;
	color: var(--motors-secondary-color);
}

.stm-vehicle-detail-datepicker .stm_rent_car_form_wrapper {
	margin-top: 0;
	padding: 0;
	text-align: left;
}

.stm-vehicle-detail-datepicker .stm_rent_car_form {
	width: 100%;
	padding: 0;
	background-color: transparent !important;
}

/*
 * The plugin's style_2 CSS sets a hard `width: 635px` (not max-width) on this same
 * element — `.stm_rent_car_form_wrapper.style_2 .stm_rent_car_form` — at higher CSS
 * specificity (3 classes) than the generic `width:100%` override above (2 classes), so
 * without this it would win and overflow this ~300-380px sidebar column at any viewport
 * width, not just mobile. Match its specificity (4 classes here) to guarantee this wins.
 */
.stm-vehicle-detail-datepicker .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form {
	width: 100%;
}

.stm-vehicle-detail-datepicker .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form .stm_rent_form_fields {
	padding: 16px;
	margin-bottom: 16px;
}

.stm-vehicle-detail-datepicker .stm_rent_car_form_wrapper .stm_rent_car_form h4:not(.stm_form_title) {
	font-size: 13px;
	margin-bottom: 12px;
}

/* Sidebar state toggle: date picker vs. price/pay-now box — only one is ever shown at
   once, so a shopper isn't asked to read both a "pick your dates" form and a price for
   dates that haven't been confirmed available yet. */
.stm-vehicle-booking.is-ready-to-book .stm-vehicle-detail-datepicker,
.stm-vehicle-booking.is-picking-dates .stm-vehicle-detail-pricebox {
	display: none;
}

.stm-vehicle-availability-notice {
	background-color: #fdecea;
	border: 1px solid #f3c2bc;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 16px;
}

.stm-vehicle-availability-notice p {
	font-size: 13px;
	color: #a33;
	margin: 0 0 4px;
}

.stm-vehicle-availability-notice p:last-child {
	color: #555;
	margin-bottom: 0;
}

.stm-change-dates-toggle {
	background: none;
	cursor: pointer;
	width: 100%;
	font: inherit;
}

/* Selected pickup/return summary shown at the top of the price box once ready-to-book,
   so the dates/office chosen in the (now hidden) picker are still visible somewhere. */
.stm-selected-dates {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.stm-selected-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.stm-selected-row + .stm-selected-row {
	margin-top: 8px;
}

.stm-selected-row i {
	margin-top: 3px;
	color: var(--motors-base-color);
}

.stm-selected-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #999;
}

.stm-selected-value {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

/* =========================================================================
   Datetimepicker popup — z-index, white background, and full colour fix.
   The filter bar lives inside a dark Elementor section that propagates
   color:white down the DOM, so we use a blanket * rule to break that
   inheritance, then restore white text for states that need it.
   ========================================================================= */

/* 1. Picker shell */
.xdsoft_datetimepicker {
	z-index: 99999 !important;
	background: #fff !important;
	border: 1px solid #ccc !important;
	color: #333 !important;
}

/* 2. Blanket dark-text reset — overrides any inherited white from parent section */
.xdsoft_datetimepicker * {
	color: #333 !important;
}

/* 3. Month / year navigation bar — force white background so text is readable */
.xdsoft_datetimepicker .xdsoft_monthpicker {
	background: #fff !important;
}
.xdsoft_datetimepicker .xdsoft_label {
	background: #fff !important;
	color: #333 !important;
}
.xdsoft_datetimepicker .xdsoft_month,
.xdsoft_datetimepicker .xdsoft_year {
	color: #333 !important;
}

/* 4. Month/year dropdown list */
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
	background: #fff !important;
	border: 1px solid #ccc !important;
}
/* Selected option in the dropdown keeps its blue highlight + white text */
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
	background: #3ab4f2 !important;
	color: #fff !important;
}

/* 5. Calendar day-of-week header row */
.xdsoft_datetimepicker .xdsoft_calendar th {
	background: #e8e8e8 !important;
	color: #555 !important;
}

/* 6. Calendar date cells */
.xdsoft_datetimepicker .xdsoft_calendar td {
	background: #f5f5f5 !important;
	color: #555 !important;
}

/* 7. Time-picker items */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
	background: #f5f5f5 !important;
	color: #555 !important;
}

/* 8. Selected / current date and time — restore white text on blue */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
	background: #3ab4f2 !important;
	color: #fff !important;
}

/* 9. Hover on date / time cells — gold brand colour, white text */
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
	background: #e6a817 !important;
	color: #fff !important;
}

/* =========================================================================
   Category filter pills above the vehicle grid
   ========================================================================= */
.stm-grid-cat-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}
.stm-grid-cat-btn {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 50px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	white-space: nowrap;
}
.stm-grid-cat-btn:hover {
	background: #ece8e0;
	border-color: #c8a44a;
	color: #333;
}
.stm-grid-cat-btn.active {
	background: var(--motors-secondary-color, #1e3236);
	border-color: var(--motors-secondary-color, #1e3236);
	color: #fff;
}

/* =========================================================================
   Load more button below the vehicle grid
   ========================================================================= */
.stm-grid-load-more-wrap {
	text-align: center;
	margin-top: 28px;
}
.stm-grid-load-more-btn {
	background: transparent;
	border: 2px solid var(--motors-base-color, #e6a817);
	border-radius: 50px;
	padding: 12px 32px;
	font-size: 14px;
	font-weight: 700;
	color: var(--motors-secondary-color, #1e3236);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s, color 0.2s;
}
.stm-grid-load-more-btn:hover {
	background: var(--motors-base-color, #e6a817);
	color: #fff;
}
.stm-grid-no-results {
	text-align: center;
	color: #888;
	font-size: 15px;
	padding: 24px 0;
}

/* =========================================================================
   Date filter bar above the vehicle grid
   ========================================================================= */
.stm-grid-date-filter {
	background: #1e3236;
	border-radius: 10px;
	padding: 16px 20px;
	margin-bottom: 28px;
	position: relative;
	z-index: 10; /* stay below #header (z-index:1055/1056) so the sticky menu doesn't get covered on scroll */
}
/* If another widget on the page activates stm_background_overlay (z-index:9500), still clear it */
body.stm_background_overlay .stm-grid-date-filter {
	z-index: 9600;
}
.stm-grid-date-filter-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.stm-grid-date-filter-label {
	color: #e6a817;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 6px;
}
.stm-grid-date-filter-label i {
	font-size: 16px;
}
.stm-grid-date-inputs {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 280px;
}
.stm-grid-date-arrow {
	color: #e6a817;
	font-size: 18px;
	flex-shrink: 0;
}
.stm-grid-date-field {
	position: relative;
	flex: 1;
}
.stm-grid-date-field input {
	width: 100%;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 6px;
	color: #fff;
	padding: 9px 36px 9px 12px;
	font-size: 13px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s;
}
.stm-grid-date-field input::placeholder { color: rgba(255,255,255,0.5); }
.stm-grid-date-field input:focus,
.stm-grid-date-field input:not([value=""]) { border-color: #e6a817; }
.stm-grid-date-field input.stm_error { border-color: #e52727 !important; }
.stm-grid-date-field > i {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #e6a817;
	pointer-events: none;
}
.stm-grid-date-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.stm-grid-check-btn {
	background: #e6a817;
	color: #1e3236;
	border: none;
	border-radius: 6px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s;
}
.stm-grid-check-btn:hover { background: #d4970f; }
.stm-grid-clear-btn {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	color: rgba(255,255,255,0.7);
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: border-color 0.2s, color 0.2s;
}
.stm-grid-clear-btn:hover { border-color: #fff; color: #fff; }
.stm-grid-date-summary {
	margin-top: 10px;
	color: rgba(255,255,255,0.75);
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.stm-grid-date-summary i { color: #e6a817; }

/* =========================================================================
   Availability states on vehicle cards
   ========================================================================= */

/* Green availability dot (existing) — ensure it's green */
.stm_availability_row .stm_availability_dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1bc744;
	margin-right: 6px;
	flex-shrink: 0;
}

/* Unavailable card — grayed-out overlay */
.stm_product_grid_single.stm-car-unavailable {
	opacity: 0.6;
	filter: grayscale(60%);
	position: relative;
}
.stm_product_grid_single.stm-car-unavailable .inner {
	pointer-events: auto;
}
.stm_product_grid_single.stm-car-unavailable .stm_image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.25);
	border-radius: 4px 4px 0 0;
}

/* Unavailable availability row */
.stm_availability_row.stm_unavailable {
	color: #c0392b;
}
.stm_unavailable_dot {
	background: #c0392b !important;
}
.stm_unavail_label {
	font-size: 12px;
	font-weight: 600;
}

/* "Available from …" hint */
.stm_next_avail_hint {
	margin-top: 4px;
	font-size: 11px;
	color: #888;
	display: flex;
	align-items: center;
	gap: 5px;
}
.stm_next_avail_hint i { color: #e6a817; font-size: 12px; }

/* =========================================================================
   Single vehicle page — enhanced availability notice
   ========================================================================= */
.stm-vehicle-availability-notice {
	background: #fff4f4;
	border: 1px solid #f5c6cb;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.stm-vehicle-availability-notice p {
	margin: 0 0 6px;
	font-size: 13px;
	color: #721c24;
	line-height: 1.5;
}
.stm-vehicle-availability-notice p:last-child { margin-bottom: 0; }
/* "Next available" line uses a slightly different colour */
.stm-vehicle-availability-notice p:nth-child(2) {
	color: #333;
	font-weight: 600;
}

/* =========================================================================
   Cart state — vehicle already in cart shows a badge + "Continue booking" CTA
   ========================================================================= */

/* Highlight border on in-cart cards */
.stm-grid-card.stm-in-cart .inner {
	border: 2px solid var(--motors-base-color, #e6a817);
	box-shadow: 0 4px 20px rgba(230, 168, 23, 0.25);
}

/* Gold "In cart" badge overlay on the vehicle image */
.stm-cart-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	background: var(--motors-base-color, #e6a817);
	color: #1e3236;
	border-radius: 50px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.stm-cart-badge i {
	font-size: 12px;
}

/* "Continue booking" button — gold fill, replaces the bordered "View details" */
.stm-checkout-btn {
	background: var(--motors-base-color, #e6a817) !important;
	border-color: var(--motors-base-color, #e6a817) !important;
	color: #1e3236 !important;
}
.stm-checkout-btn:hover,
.stm_products_grid_class .stm_product_grid_single .inner:hover .stm-checkout-btn {
	background: #d4970f !important;
	border-color: #d4970f !important;
	color: #fff !important;
}

/* =========================================================================
   Top-bar layout: pin currency to the true left edge, Login/Register to
   the true right edge.
   #top-bar .top-bar-wrapper is "clearfix top-bar-wrapper" and is
   display:flex + justify-content:space-between (theme CSS). Bootstrap's
   .clearfix::before/::after (content:" "; display:table;) become REAL,
   if zero-width, flex items once the parent is display:flex — with only
   2 visible children (currency, login) that's 4 flex items total, so
   space-between's gaps land between every adjacent pair instead of just
   the 2 visible ones, pushing currency away from the left edge toward
   the middle. Clearfix exists purely to contain floats, which flex
   containers don't need, so it's safe to drop here specifically.
   ========================================================================= */
#top-bar .top-bar-wrapper.clearfix::before,
#top-bar .top-bar-wrapper.clearfix::after {
	content: none;
	display: none;
}

/* =========================================================================
   Top-bar currency switcher (matches #top-bar's rgb(42,64,65) / 24px bar)
   Hides currency-switcher-woocommerce's native wSelect flag dropdown and
   replaces it with a compact custom dropdown driven by the same <select>.
   ========================================================================= */
.rs-topbar-currency {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 24px;
	margin-right: 14px;
}
.rs-topbar-currency form {
	display: inline-block;
}

.rs-cs {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.rs-cs-trigger {
	display: flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 7px;
	height: 18px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rs-cs-trigger:hover,
.rs-cs.open .rs-cs-trigger {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.rs-cs-globe { flex-shrink: 0; opacity: 0.7; }
.rs-cs-label { text-transform: uppercase; }
.rs-cs-chevron {
	flex-shrink: 0;
	opacity: 0.6;
	transition: transform 0.2s ease;
}
.rs-cs.open .rs-cs-chevron { transform: rotate(180deg); }

.rs-cs-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
	min-width: 170px;
	overflow: hidden;
	z-index: 99999;
	padding: 4px 0;
}
.rs-cs.open .rs-cs-menu { display: block; }

/* Scoped through .rs-cs-menu (not just .rs-cs-opt) so this beats the theme's
   global ".stm-template-car_rental_elementor button" default background
   (specificity 0,1,1) — these option rows are real <button> elements, and
   without the extra scoping the theme's dark-teal button background was
   winning for every non-hover/non-active row, making the option text
   (dark-on-dark-teal) unreadable. */
.rs-cs-menu .rs-cs-opt {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 7px 12px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: background 0.12s;
}
.rs-cs-opt:hover { background: #f5f2ea; }
.rs-cs-opt.rs-cs-active { background: #f0e9d8; }

.rs-cs-code {
	font-size: 11px;
	font-weight: 700;
	color: #1e3236;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}
.rs-cs-name {
	font-size: 11px;
	color: #888;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	/* wp-content/themes/motors/assets/css/dist/headers/header-car_rental.css
	   unconditionally hides #top-bar below 1024px and only reveals a second,
	   deeply-nested CLONE of it inside the mobile menu drawer
	   (".stm-opened-menu-listing #top-bar") — i.e. by theme design the top
	   bar was only ever meant to appear once you open the hamburger menu.
	   Show the real, page-level instance instead (confirmed via live DOM
	   inspection to be a direct child of <body>, distinct from the drawer's
	   nested clone at .stm-opened-menu-listing > ... > #top-bar) so it's
	   visible on the page itself. The drawer's own clone is left exactly as
	   the theme built it. */
	body.stm-layout-header-car_rental > div > #top-bar {
		display: block !important;
	}

	/* header-car_rental.css also has a generic
	   "#top-bar .top-bar-wrapper .pull-left { padding: 15px 10px 0px 0px; }"
	   at this breakpoint (meant for stacked mobile items) that incidentally
	   matches .rs-topbar-currency too, since it also carries .pull-left —
	   the 15px top padding pushed the currency button visibly below
	   Login/Register. Reset it back to the button's own natural centering. */
	#top-bar .top-bar-wrapper .pull-left.rs-topbar-currency {
		padding: 0 !important;
	}
}

/* =========================================================================
   Reservation page (/reservation/ shop archive) vehicle spec icons.
   Theme markup (main-shop/loop.php) previously rendered icon + a single
   merged span (e.g. icon + "2 Seats"), laid out inline via app.css's
   ".single_info { display:inline-block }" + ".single_info span
   { margin-left:5px }". Template now emits two spans (label, value)
   instead of one merged string; restack them vertically under the icon
   (icon on top, small label below, bold value below that) so the label
   ("Seats") only has to be entered once instead of embedded in the value
   text. !important used throughout since app.css's rules below share the
   same selector specificity and load after this file in <head> (mu-plugin
   enqueues on wp_enqueue_scripts before the theme's own callback runs). */
.stm-template-car_rental_elementor .stm_single_class_car .infos .single_info,
.stm-template-car_rental .stm_single_class_car .infos .single_info {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	min-width: 62px;
}

.stm-template-car_rental_elementor .stm_single_class_car .infos .single_info i,
.stm-template-car_rental .stm_single_class_car .infos .single_info i {
	position: static !important;
	top: 0 !important;
	margin-bottom: 6px;
}

.stm-template-car_rental_elementor .stm_single_class_car .infos .single_info span,
.stm-template-car_rental .stm_single_class_car .infos .single_info span {
	margin-left: 0 !important;
	display: block;
}

.stm-template-car_rental_elementor .stm_single_class_car .infos .single_info_label,
.stm-template-car_rental .stm_single_class_car .infos .single_info_label {
	font-size: 10px !important;
	letter-spacing: 0.4px;
	color: #999 !important;
}

.stm-template-car_rental_elementor .stm_single_class_car .infos .single_info_value,
.stm-template-car_rental .stm_single_class_car .infos .single_info_value {
	font-size: 13px !important;
	font-weight: 700;
	color: #2a4045 !important;
	margin-top: 2px;
	text-transform: none !important;
}

@media (max-width: 767px) {
	.stm-template-car_rental_elementor .stm_single_class_car .infos .single_info,
	.stm-template-car_rental .stm_single_class_car .infos .single_info {
		min-width: 54px;
	}
	/* Centre the spec-icon row under the vehicle title on mobile (the
	   .single_info chips are inline-flex, so text-align on .infos centres them). */
	.stm-template-car_rental_elementor .stm_single_class_car .infos,
	.stm-template-car_rental .stm_single_class_car .infos {
		text-align: center !important;
	}
	/* The 350px vehicle thumb is narrower than the stacked mobile column and
	   app.css leaves an asymmetric padding-right on .image, so it sits left of
	   centre. Shrink .image to the thumb width and centre it in the column
	   (keeps the absolutely-positioned photo-count badge anchored to the image). */
	.stm-template-car_rental_elementor .stm_single_class_car .first,
	.stm-template-car_rental .stm_single_class_car .first {
		text-align: center;
	}
	.stm-template-car_rental_elementor .stm_single_class_car .image,
	.stm-template-car_rental .stm_single_class_car .image {
		display: inline-block;
		padding-right: 0 !important;
	}
}

@media (max-width: 767px) {
	/* Previously hidden entirely on mobile via this file (now shown above). */
	.rs-topbar-currency {
		display: inline-flex;
		margin-right: 8px;
	}
	.rs-cs-name { display: none; } /* currency option list: code only, no full name, to fit narrow menu */

	/* Login/Register is the top bar's other kept item (address/hours/phone/
	   socials were removed via the wpcfto option instead) — Bootstrap's
	   .hidden-xs (theme default) would otherwise hide it below 768px. Scoped
	   to #top-bar only, not a global .hidden-xs override. */
	#top-bar .hidden-xs {
		display: block !important;
	}
}

/* ======================================================================
   Driver option (With / Without driver) - booking price box
   Rendered by partials/rental/main-shop/price.php on the single vehicle
   page (.stm-vehicle-detail-pricebox) and the /reservation/ archive loop
   (.stm_single_class_car). Behaviour: mu-plugin rental-s-driver-option.php.
   ====================================================================== */

.stm-price-wrap { position: relative; }

.stm-driver-choice {
	margin: 0 0 14px;
	font-family: inherit;
}

/* Without / With Driver booking toggle - same pill style as the .stm-driver-seg3
   filter (white rounded track, gold active pill, FA icons), but 2 segments and
   driven by the .is-active class the mu-plugin JS toggles on radio change. */
.stm-driver-seg {
	display: flex;
	gap: 4px;
	padding: 5px;
	background: #fff;
	border: 1px solid rgba(20, 30, 32, .08);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(20, 30, 32, .12);
	overflow: hidden; /* keep the active pill inside the rounded track */
}
.stm-driver-seg-opt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 50%;
	min-width: 0;
	margin: 0;
	padding: 9px 10px;
	border-radius: 999px;
	line-height: 1.12;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	white-space: normal;
	color: #5b6b6e;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.stm-driver-seg-opt i {
	flex: none;
	font-size: 15px;
	color: #aab4b6;
	transition: color .18s ease;
}
/* The theme runs jQuery.uniform on every radio, replacing the bare <input>
   with <div class="radio"><span><input></span></div> AND sizing the sibling
   label <span> to a 16px sprite box. Clamp the uniform widget + raw input out
   of flow and let the icon + label centre naturally in each half. */
.stm-driver-seg-opt .radio,
.stm-driver-seg-opt input {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}
.stm-driver-seg .stm-driver-seg-opt > span {
	display: inline !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
}
.stm-driver-seg-opt:hover { background: #f3f0e8; color: #1e3236; }
.stm-driver-seg-opt:hover i { color: #6a7a7d; }
.stm-driver-seg-opt.is-active {
	background: linear-gradient(180deg, #f7bf2c 0%, #e6a017 100%);
	color: #1e3236;
	box-shadow: 0 3px 8px rgba(230, 160, 23, .4);
}
.stm-driver-seg-opt.is-active i { color: #d9641b; }

/* Per-km panel */
.stm-driver-panel {
	margin-top: 10px;
	padding: 12px;
	border: 1px solid #f0e2bf;
	background: #fbf6e9;
	border-radius: 6px;
}
.stm-driver-rate-line {
	font-size: 15px;
	font-weight: 700;
	color: #1e3236;
}
.stm-driver-est-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #2a4045;
}
.stm-driver-est-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	text-transform: none;
}
.stm-driver-est-wrap input.stm-driver-est-km {
	width: 90px;
	padding: 6px 8px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	font-size: 14px;
	text-align: right;
	background: #fff;
}
.stm-driver-est-unit { font-size: 13px; color: #6a7a7d; }
.stm-driver-min-warning {
	display: flex;
	visibility: visible; /* beat the theme's .stm-hidden { visibility:hidden } */
	gap: 6px;
	margin: 8px 0 0;
	padding: 7px 10px;
	border: 1px solid #f0cf86;
	border-radius: 6px;
	background: #fff3dc;
	color: #8a5a1a;
	font-size: 11px;
	line-height: 1.4;
}
.stm-driver-min-warning::before {
	content: "\26A0"; /* warning triangle */
	flex: none;
	font-size: 12px;
	line-height: 1.3;
}
.stm-driver-total-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #e2d3ab;
}
.stm-driver-total-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #2a4045;
}
.stm-driver-total-val {
	font-size: 19px;
	font-weight: 800;
	color: #1e3236;
}
.stm-driver-note {
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #6a7a7d;
}

/* When "With driver" is active, the per-day price figures are replaced by the
   per-km panel; keep the Pay now / Pay later buttons visible. */
.stm-price-wrap.stm-driver-active .stm_rent_prices .total,
.stm-price-wrap.stm-driver-active .stm_rent_prices .period,
.stm-price-wrap.stm-driver-active .stm_rent_prices .stm_rent_mileage,
.stm-price-wrap.stm-driver-active .stm_rent_prices .stm_discount {
	display: none !important;
}
.stm-price-wrap.stm-driver-active .stm_rent_prices .stm_rent_price {
	padding-top: 4px;
}

@media (max-width: 767px) {
	.stm-driver-est-label { flex-wrap: wrap; }
	/* Specs column stacks above the price/driver toggle on mobile - give them room. */
	.stm-price-wrap { margin-top: 20px; }
	.stm-driver-choice { margin-bottom: 16px; }
}

/* =========================================================================
   Driver-option filter pills - homepage grid (.stm-grid-driver-filter) and
   /reservation/ archive (.stm-reservation-driver-filter), plus the
   /reservation/ vehicle-type row (.stm-reservation-cat-filter). All share the
   .stm-grid-driver-btn pill style with the category pills above.
   ========================================================================= */
.stm-grid-driver-heading {
	/* Sits on the dark "Browse Our Fleet" section, above the driver pills, so
	   the With/Without driver choice isn't mistaken for a vehicle-type filter. */
	text-align: center;
	margin: 4px 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .6);
}
.stm-grid-driver-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}
.stm-reservation-cat-filter,
.stm-reservation-driver-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}
/* Vehicle-type row sits directly above the driver row - tighten the gap. */
.stm-reservation-cat-filter {
	margin-bottom: 12px;
}
.stm-reservation-driver-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #6a7a7d;
	margin-right: 4px;
}
.stm-grid-driver-btn {
	display: inline-block;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 50px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
	white-space: nowrap;
}
.stm-grid-driver-btn:hover {
	background: #ece8e0;
	border-color: #c8a44a;
	color: #333;
}
.stm-grid-driver-btn.active {
	background: #e6a817;
	border-color: #e6a817;
	color: #1e3236;
}
a.stm-grid-driver-btn:focus { outline: none; }

/* =========================================================================
   Driver selector inside the hero rental search form (.stm-heroform-driver,
   injected by rental-s-driver-option.php) + the per-km rate line on grid cards.
   ========================================================================= */
/* Own heading class - the theme hides the hero form's native .stm_form_title
   (display:none in the style_1 layout), so the injected filter blocks need a
   visible label of their own. The prefix + h4 match the theme's own
   `.stm_rent_car_form_wrapper .stm_rent_car_form h4` (0,0,3,1) so this wins on
   load order (rental-s-colors.css loads after app.css). Dark text for the
   gold (#f0c540) hero form. */
.stm-heroform-filter {
	margin: 20px 0 4px;
}
.stm-heroform-filter + .stm-heroform-filter {
	margin-top: 18px;
}
.stm-heroform-driver {
	margin-bottom: 22px;
}
.stm_rent_car_form .stm-heroform-filter h4.stm-heroform-title {
	display: block;
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #1e3236;
}
.stm-heroform-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* Vehicle-type chips: auto-width pills that wrap to as many rows as needed, so
   on mobile they read as a compact chip cloud instead of 5 full-width stacked
   pills. White on the gold hero form for contrast. (The driver toggle that
   also lives in .stm-heroform-filter is styled by the .stm-driver-seg3 block.) */
.stm-heroform-vehicle .stm-grid-cat-btn {
	flex: 0 0 auto;
	padding: 8px 14px;
	font-size: 12px;
	line-height: 1;
	background: #fff;
	border-color: rgba(30, 50, 54, 0.18);
	color: #1e3236;
	text-decoration: none;
	cursor: pointer;
}
.stm-heroform-vehicle .stm-grid-cat-btn:hover {
	background: #fff;
	border-color: #1e3236;
	color: #1e3236;
}
/* On the gold hero form a gold active pill has no contrast - use dark instead. */
.stm-heroform-vehicle .stm-grid-cat-btn.active {
	background: #1e3236;
	border-color: #1e3236;
	color: #fff;
}

/* =========================================================================
   3-way driver segmented toggle (.stm-driver-seg3)
   [ (car) Vehicle Only | (layers) Both | (tie) With Driver ]
   Shared by the homepage grid (.stm-grid-driver-filter > .stm-driver-seg3),
   the hero form (.stm-heroform-driver-pills.stm-driver-seg3) and /reservation/
   (.stm-reservation-driver-filter > .stm-driver-seg3). White rounded track,
   gold active pill. Reuses the .stm-grid-driver-btn hook so the existing
   paint/click JS keeps working; this block comes after the base pill + hero
   rules so it wins the same-specificity ties on source order.
   ========================================================================= */
.stm-driver-seg3 {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
	max-width: 100%;
	margin: 0;
	padding: 5px;
	background: #fff;
	border: 1px solid rgba(20, 30, 32, .08);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(20, 30, 32, .12);
	vertical-align: middle;
	overflow: hidden; /* keep the active pill inside the rounded track */
}
.stm-driver-seg3 .stm-grid-driver-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 9px 18px;
	background: none;
	border: 0;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.15;
	color: #5b6b6e;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.stm-driver-seg3 .stm-grid-driver-btn i {
	flex: none;
	font-size: 15px;
	color: #aab4b6;
	transition: color .18s ease;
}
/* The homepage "Browse Our Fleet" section forces child text white and
   uppercase; pin the label back for this control (harmless elsewhere). */
.stm-driver-seg3 .stm-grid-driver-btn span {
	color: #5b6b6e !important;
	text-transform: none !important;
	letter-spacing: normal;
}
.stm-driver-seg3 .stm-grid-driver-btn:hover {
	background: #f3f0e8;
	color: #1e3236;
}
.stm-driver-seg3 .stm-grid-driver-btn:hover span { color: #1e3236 !important; }
.stm-driver-seg3 .stm-grid-driver-btn:hover i { color: #6a7a7d; }
.stm-driver-seg3 .stm-grid-driver-btn.active,
.stm-driver-seg3 a.stm-grid-driver-btn.active {
	background: linear-gradient(180deg, #f7bf2c 0%, #e6a017 100%);
	color: #1e3236;
	box-shadow: 0 3px 8px rgba(230, 160, 23, .4);
}
.stm-driver-seg3 .stm-grid-driver-btn.active span { color: #1e3236 !important; }
.stm-driver-seg3 .stm-grid-driver-btn.active i { color: #d9641b; }
.stm-driver-seg3 a.stm-grid-driver-btn:focus { outline: none; }

/* Homepage grid + /reservation/ already give the wrapper
   (.stm-grid-driver-filter / .stm-reservation-driver-filter)
   display:flex; align-items/justify-content:center, so the inline track
   centres itself next to (reservation) or under (grid) its heading/label. */

/* Hero form (gold bg): fill the form width, equal thirds, labels wrap to two
   lines (the form column is only ~300px, "Vehicle Only" / "With Driver" don't
   fit on one line). */
.stm-heroform-pills.stm-driver-seg3 { display: flex; width: 100%; }
.stm-heroform-pills.stm-driver-seg3 .stm-grid-driver-btn {
	flex: 1 1 0;
	min-width: 0;
	gap: 6px;
	padding: 8px 4px;
	line-height: 1.12;
	text-align: center;
	white-space: normal;
}
.stm-heroform-pills.stm-driver-seg3 .stm-grid-driver-btn span { white-space: normal; }

/* Narrow screens: same treatment on the grid + reservation tracks. */
@media (max-width: 600px) {
	.stm-driver-seg3 { display: flex; width: 100%; }
	.stm-driver-seg3 .stm-grid-driver-btn {
		flex: 1 1 0;
		min-width: 0;
		gap: 5px;
		padding: 8px 4px;
		font-size: 12px;
		line-height: 1.12;
		text-align: center;
		white-space: normal;
	}
	.stm-driver-seg3 .stm-grid-driver-btn span { white-space: normal; }
}

/* Grid card: "With driver: LKR X / day" */
.stm-grid-card .stm_driver_rate_line {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #1e3236;
}
.stm-grid-card .stm_driver_rate_line i {
	color: #e6a817;
	font-size: 13px;
}

/* =========================================================================
   Page title bar (.entry-header - the "heading bar" shown on my-account,
   register, terms, about, service, contacts, etc. via partials/title_box.php)
   Theme default is a washed-out #8f9fad with a 50% dark scrim on ::after,
   which with no background image just reads as muddy grey-blue. Swap to the
   brand charcoal and give the bar more height so the title has room to
   breathe under the fixed header.
   ========================================================================= */
.entry-header {
	background-color: #2a4045;
	border-top: 3px solid #f0c540; /* brand accent - separates it from the dark header */
}
/* No background image to darken - drop the scrim so the colour stays clean. */
.entry-header::after {
	background: transparent !important;
}
.entry-header.small_title_box > .container {
	min-height: 300px;
}
.entry-header > .container {
	min-height: 380px;
}
/* Vertically centre the title in the bar. The theme absolutely-positions
   .entry-title with a top:50% / translateY(-50%) hack on desktop and makes it
   `position: static` on mobile (so it stuck to the top with all the slack
   below). Flex-centre it instead - works the same at every width. */
.entry-header > .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.entry-header .entry-title {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
}
/* Gold accent line the theme puts under the title. */
.entry-header .entry-title .colored-separator .first-long,
.entry-header .entry-title .colored-separator .last-short {
	background-color: #f0c540;
}
/* Breadcrumb row under the bar - a touch more separation. */
.stm_breadcrumbs,
.woocommerce-breadcrumb {
	padding-top: 18px;
	padding-bottom: 18px;
}
@media (max-width: 767px) {
	.entry-header.small_title_box > .container,
	.entry-header > .container {
		min-height: 190px;
	}
	.entry-header.small_title_box .entry-title h1 {
		font-size: 26px;
	}
}

/* =========================================================================
   Homepage hero YouTube background video (section .elementor-element-9a0df26)
   YouTube's embed flashes a large pause/play glyph centre-screen for the
   first few seconds while it buffers/starts. Rather than paint over it, hide
   the whole video layer while the .jd-hero-video-loading class is on the
   section (added on load, removed by the mu-plugin script in
   rental-s-security.php once the YT iframe is in + a beat). While hidden, the
   section's own Background Fallback image (background_video_fallback) shows
   through with the overlay + headline; the video then cross-fades in over it.
   ========================================================================= */
.elementor-element-9a0df26 .elementor-background-video-embed,
.elementor-element-9a0df26 .elementor-background-video-embed iframe {
	pointer-events: none !important;
}
.elementor-element-9a0df26 .elementor-background-video-container {
	transition: opacity .8s ease;
}
.elementor-element-9a0df26.jd-hero-video-loading .elementor-background-video-container {
	opacity: 0;
}

/* -------------------------------------------------------------------------
   Homepage hero: fixed ("parallax") cover photo. The hero section's
   background image (background_image / background_video_fallback, set in
   Elementor) stays pinned to the viewport while the hero content and the
   rest of the page scroll up over it. Applied on every breakpoint per the
   brief. The YouTube bg video (desktop) still plays on top of this image,
   so the fixed cover mainly reads on mobile and during the video's load
   beat; on desktop it is what shows behind the .jd-hero-video-loading
   fade. background-attachment:fixed makes the image size to the viewport,
   so keep cover/centre framing explicit.
   ------------------------------------------------------------------------- */
.elementor-element-9a0df26 {
	background-attachment: fixed !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* -------------------------------------------------------------------------
   Refundable Security Deposit - booking-flow order summary
   (partials/rental/common/order-info.php). Own section, visually set apart
   from the "Add-ons" table above it so it doesn't read as just another
   add-on charge, with the refund-condition note called out beneath it.
   See rental-s-security-deposit.php (PART 2 - Cart line).
   ------------------------------------------------------------------------- */
.stm-deposit-table {
	border-left: 3px solid var(--motors-base-color, #e52727);
	padding-left: 12px;
}
.stm-deposit-note {
	margin: 8px 0 0;
	font-size: 13px;
	font-style: italic;
	opacity: 0.85;
}