/*
Theme Name: CarRental TiranaRoad
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carrentaltirana
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: 7.5rem var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* ===== Midnight: type & colour ===== */
:root {
	--gold: var( --wp--preset--color--primary );
	--navy: var( --wp--preset--color--background );
	--panel: var( --wp--preset--color--panel );
	--rule: var( --wp--preset--color--rule );
	--cream: var( --wp--preset--color--text );
	--serif: var( --wp--preset--font-family--cormorant-garamond );
	--sans: var( --wp--preset--font-family--albert-sans );
}

html {
	scroll-behavior: smooth;
}

/* ===== header ===== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: linear-gradient(180deg, rgb(15 27 51 / 0.9), rgb(15 27 51 / 0));
	padding-block: 1.25rem;
	padding-inline: var( --wp--style--root--padding-left );
	transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.is-scrolled {
	background: linear-gradient(180deg, rgb(15 27 51 / 0.98), rgb(23 39 67 / 0.94));
	box-shadow: 0 1px 0 0 rgb(58 79 120 / 0.35);
	padding-block: 0.8rem;
}
.site-header-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.site-header .site-title {
	font-family: var( --serif );
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var( --cream );
	margin: 0;
}
.site-header .site-title a {
	color: var( --cream );
	text-decoration: none;
}
.site-brand-text {
	font-family: var( --serif );
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var( --cream );
	margin: 0;
}
.site-brand-text a { color: inherit; text-decoration: none; }
.brand-gold {
	font-style: normal;
	font-family: var( --sans );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gold );
	margin-left: 0.4rem;
}
.nav-links {
	gap: clamp(0.9rem, 2.2vw, 1.75rem);
	align-items: center;
}
.nav-links .wp-block-navigation-link > .wp-block-navigation-item__content,
.nav-links .wp-block-navigaion-link {
	color: var( --cream );
	opacity: 0.92;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	padding: 0.45rem 0.5rem;
	background: linear-gradient( currentColor, currentColor ) bottom left / 0 2px no-repeat;
	transition: opacity 0.3s ease, background-size 0.3s ease;
}
.nav-links .wp-block-navigation-link > .wp-block-navigation-item__content:is( :hover, :focus ) {
	opacity: 1;
	background-size: 100% 2px;
}
.wp-block-navigation-item a { color: inherit; }
.nav-links li,
.nav-links .wp-block-navigation-item {
	list-style: none;
	list-style-type: none;
}

/* ===== hero ===== */
/* Core cover blocks default their inner padding to 17px, which throws the
   hero text off the body's 48px padding column. Pin it to the root padding
   so the hero aligns with the header and every band. */
.wp-block-cover {
	padding-inline: var( --wp--style--root--padding-left );
}
.hero-content {
	padding-block: 4rem;
	max-width: 600px;
	width: 100%;
	margin: 0;
	align-content: center;
	justify-content: center;
}
.is-layout-constrained > .hero-content {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.hero-eyebrow,
.band-label,
.fleet-type,
.step-number,
.cta-eyebrow {
	font-family: var( --sans );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gold );
	margin-bottom: 1rem;
}
.hero-title {
	font-family: var( --serif );
	font-size: clamp(2.5rem, 6.5vw, 5.5rem);
	line-height: 1.05;
	font-weight: 500;
	color: var( --cream );
	margin-block: 0 1.25rem;
	max-width: 11ch;
}
.hero-title::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 2px;
	background: var( --gold );
	margin-top: 1.5rem;
}
.hero-lede {
	font-family: var( --sans );
	font-size: 1.25rem;
	line-height: 1.6;
	color: var( --cream );
	opacity: 0.82;
	max-width: 42ch;
	margin-block: 0 2rem;
}

/* ===== bands: rhythm & surfaces ===== */
.band-about, .band-process {
	background-color: var( --panel );
}
.band-about {
	border-block: 1px solid rgb(58 79 120 / 0.35);
}
.band-about, .band-fleet, .band-process, .band-contact {
	padding-block: clamp(5rem, 9vh, 7rem);
}
.band-label { margin-bottom: 1.25rem; }
.band-heading {
	font-family: var( --serif );
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.05;
	font-weight: 500;
	color: var( --cream );
	margin-block: 0 1.5rem;
}
.band-body {
	font-family: var( --sans );
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var( --cream );
	opacity: 0.82;
	max-width: 58ch;
	margin-block: 0 1rem;
}

/* about split */
.band-split { gap: clamp(2rem, 5vw, 4rem) !important; align-items: center; }
.split-text { padding-right: clamp(1rem, 3vw, 3rem); }
.band-image {
	border-radius: 4px;
	overflow: hidden;
	margin: 0;
	box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
}
.band-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.9); }

/* fleet */
.fleet-heading-row {
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
.fleet-note {
	font-family: var( --sans );
	font-size: 0.95rem;
	color: var( --cream );
	opacity: 0.7;
	margin: 0;
	max-width: 30ch;
}
.fleet-offer {
	font-family: var( --sans );
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	color: var( --gold );
	border: 1px solid rgb(212 168 83 / 0.4);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	margin: 0;
	white-space: nowrap;
}
.fleet-offer strong { font-weight: 700; }
.fleet-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.5rem;
}
.fleet-grid > .fleet-card { width: auto; }
.fleet-grid .fleet-card {
	background: var( --panel );
	border: 1px solid rgb(58 79 120 / 0.4);
	border-radius: 4px;
	padding: 0 0 2rem;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease;
}
.fleet-grid .fleet-card:hover {
	transform: translateY(-6px);
	border-color: rgb(212 168 83 / 0.5);
}
.fleet-image { margin: 0; }
.fleet-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: contrast(1.05) saturate(0.9); }
.fleet-card .fleet-type, .fleet-card .fleet-name, .fleet-card .fleet-desc, .fleet-card .fleet-price {
	margin-inline: 1.75rem;
}
.fleet-type { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.fleet-name {
	font-family: var( --serif );
	font-size: 1.75rem;
	font-weight: 500;
	color: var( --cream );
	margin-block: 0 0.75rem;
}
.fleet-name .fleet-year {
	font-family: var( --sans );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --gold );
	margin-left: 0.55rem;
	white-space: nowrap;
}
.fleet-desc {
	font-family: var( --sans );
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --cream );
	opacity: 0.75;
	margin-block: 0 1.5rem;
}
.fleet-price {
	font-family: var( --serif );
	font-size: 2rem;
	font-weight: 500;
	color: var( --gold );
	margin-block: 0;
}
.fleet-price span {
	font-family: var( --sans );
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --cream );
	opacity: 0.6;
}
.fleet-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 1.75rem 1.25rem;
}
.fleet-spec {
	font-family: var( --sans );
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --cream );
	background: #172743;
	border: 1px solid rgb(58 79 120 / 0.5);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
}
.fleet-grid .fleet-card { margin-block-start: 0; }
.fleet-card { display: flex; flex-direction: column; }
.fleet-card--inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-bottom: 1.75rem;
}
.fleet-book { margin-top: auto; }
.fleet-grid .fleet-card .fleet-book { margin-inline: 1.75rem; }
.fleet-book .wp-block-button__link {
	display: block;
	text-align: center;
	width: 100%;
	border: 1px solid var( --gold );
	background: transparent;
	color: var( --gold );
}
.fleet-book .wp-block-button__link:hover,
.fleet-book .wp-block-button__link:focus {
	background: var( --gold );
	color: var( --navy );
	box-shadow: none;
}

/* process */
.process-heading { margin-bottom: 2.5rem; }
.process-grid .process-step {
	border-top: 1px solid rgb(58 79 120 / 0.4);
	padding-top: 1.5rem;
}
.step-number { margin-bottom: 1.25rem; }
.step-title {
	font-family: var( --serif );
	font-size: 1.75rem;
	font-weight: 500;
	color: var( --cream );
	margin-block: 0 0.75rem;
}
.step-body {
	font-family: var( --sans );
	font-size: 0.98rem;
	line-height: 1.6;
	color: var( --cream );
	opacity: 0.75;
	margin-block: 0;
	max-width: 44ch;
}

/* cta */
.band-cta {
	padding-block: clamp(4rem, 8vh, 6rem);
}
.band-cta .wp-block-cover__inner-container { min-height: 0 !important; }
.cta-content { padding-block: 1rem; }
.cta-eyebrow { margin-bottom: 1.25rem; }
.cta-title {
	font-family: var( --serif );
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.05;
	font-weight: 500;
	color: var( --cream );
	margin-block: 0 2rem;
	max-width: 12ch;
}

/* contact */
.contact-split { gap: clamp(2rem, 5vw, 4rem) !important; }
.contact-details { gap: 0.35rem; margin-top: 2rem; }
.contact-line {
	font-family: var( --sans );
	font-size: 1.02rem;
	color: var( --cream );
	opacity: 0.85;
	margin: 0;
}
.contact-line a { color: var( --cream ); text-decoration: none; border-bottom: 1px solid rgb(212 168 83 / 0.5); }
.contact-line a:hover { color: var( --gold ); border-bottom-color: var( --gold ); }
.contact-line--wa a { color: var( --gold ); border-bottom-color: rgb(212 168 83 / 0.5); }
.contact-line--wa a:hover { color: var( --cream ); }
.contact-form-col .enquiry-form { gap: 1.25rem; }
.enquiry-form .wp-block-jetpack-contact-form { gap: 1.25rem; }
.enquiry-form [class^="wp-block-jetpack-field"],
.enquiry-form > div { display: block; width: 100%; }
.enquiry-form .jetpack-field-label,
.enquiry-form label {
	font-family: var( --sans );
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --cream );
	opacity: 0.8;
	margin-bottom: 0.4rem;
}
.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"],
.enquiry-form textarea {
	width: 100%;
	background: transparent;
	border: 1px solid rgb(58 79 120 / 0.6);
	border-radius: 4px;
	color: var( --cream );
	font-family: var( --sans );
	font-size: 1rem;
	padding: 0.85rem 1rem;
	transition: border-color 0.3s ease;
}
.enquiry-form input:focus, .enquiry-form textarea:focus {
	outline: none;
	border-color: var( --gold );
}
.enquiry-form textarea { min-height: 7rem; resize: vertical; }

/* footer */
.site-footer {
	background: var( --navy );
	border-top: 1px solid rgb(58 79 120 / 0.4);
	padding-block: 3.5rem;
}
.footer-brand {
	font-family: var( --serif );
	font-size: 1.5rem;
	font-weight: 500;
	color: var( --cream );
	margin: 0;
}
.footer-links { gap: clamp(1.25rem, 3vw, 2.25rem); }
.footer-links a {
	color: var( --cream );
	opacity: 0.75;
	text-decoration: none;
	font-size: 0.9rem;
}
.footer-links a:hover { opacity: 1; color: var( --gold ); }
.site-footer .wp-block-separator { border-color: rgb(58 79 120 / 0.5); margin-block: 2rem; }
.footer-note {
	font-family: var( --sans );
	font-size: 0.85rem;
	color: var( --cream );
	opacity: 0.6;
	margin: 0;
}
.footer-note a { color: var( --cream ); text-decoration: none; border-bottom: 1px solid rgb(212 168 83 / 0.4); }
.footer-note a:hover { color: var( --gold ); }

/* buttons */
.wp-block-button__link {
	transition: background-color 0.35s ease, transform 0.35s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: #e0b869;
	transform: translateY(-1px);
}

/* booking modal */
.booking-modal { display: none; }
.booking-modal.is-open { display: block; }
.booking-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgb(6 13 25 / 0.7);
	backdrop-filter: blur(6px);
	overflow-y: auto;
	padding: 4vh 1rem;
}
.booking-dialog {
	max-width: 640px;
	margin: 0 auto;
	background: var( --navy );
	border: 1px solid rgb(58 79 120 / 0.5);
	border-radius: 6px;
	padding: 2.5rem 2rem;
	position: relative;
	box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
}
.booking-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	font-family: var( --sans );
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --cream );
	opacity: 0.7;
	cursor: pointer;
	margin: 0;
}
.booking-close:hover { opacity: 1; color: var( --gold ); }
.booking-cash {
	font-family: var( --sans );
	font-size: 1rem;
	line-height: 1.6;
	color: var( --gold );
	margin-bottom: 1.75rem;
	max-width: 56ch;
}
.booking-dialog .wp-block-jetpack-contact-form { gap: 1.1rem; }
.booking-dialog [class^="wp-block-jetpack-field"],
.booking-dialog .wp-block-jetpack-contact-form > div { display: block; width: 100%; }
.booking-dialog .jetpack-field-label,
.booking-dialog label {
	font-family: var( --sans );
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --cream );
	opacity: 0.85;
	margin-bottom: 0.4rem;
}
.booking-dialog input[type="text"],
.booking-dialog input[type="email"],
.booking-dialog input[type="tel"],
.booking-dialog input[type="number"],
.booking-dialog input[type="date"],
.booking-dialog select,
.booking-dialog textarea {
	width: 100%;
	background: rgb(15 27 51 / 0.4);
	border: 1px solid rgb(58 79 120 / 0.6);
	border-radius: 10px;
	color: var( --cream );
	font-family: var( --sans );
	font-size: 0.95rem;
	padding: 0.6rem 0.85rem;
	transition: border-color 0.3s ease;
}
.booking-dialog input:focus, .booking-dialog select:focus, .booking-dialog textarea:focus {
	outline: none;
	border-color: var( --gold );
}
.booking-dialog select option { background: var( --navy ); color: var( --cream ); }
.booking-dialog textarea { min-height: 5rem; resize: vertical; }
/* booking wizard — step bar + stages */
.booking-stepbar {
	display: flex;
	gap: 1.6rem;
	align-items: center;
	margin-bottom: 1.5rem;
}
.booking-step {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var( --sans );
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --cream );
	opacity: 0.4;
	transition: opacity 0.3s ease, color 0.3s ease;
}
.booking-step b {
	font-family: var( --sans );
	font-size: 0.7rem;
	letter-spacing: 0;
	color: var( --gold );
}
.booking-step + .booking-step { position: relative; padding-left: 1.6rem; }
.booking-step + .booking-step::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 1px;
	background: rgb(58 79 120 / 0.6);
}
.booking-step--active { opacity: 1; color: var( --gold ); }
.booking-cash {
	font-family: var( --sans );
	font-size: 0.92rem;
	color: var( --gold );
	margin-bottom: 0.6rem;
}
.booking-offer {
	font-family: var( --sans );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --cream );
	background: rgb(212 168 83 / 0.14);
	border: 1px solid rgb(212 168 83 / 0.4);
	border-radius: 999px;
	padding: 0.5rem 0.9rem;
	margin-block: 0 1.5rem;
}
.booking-offer strong { color: var( --gold ); font-weight: 700; }
.booking-stage[hidden] { display: none; }

/* car picker grid */
.booking-picker {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
	margin-bottom: 1.4rem;
}
.booking-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(58 79 120 / 0.6);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: rgb(15 27 51 / 0.25);
	transition: border-color 0.3s ease;
}
.booking-tile:hover { border-color: rgb(212 168 83 / 0.7); }
.booking-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.booking-tile-name, .booking-tile-price { padding-inline: 0.85rem; }
.booking-tile-name {
	font-family: var( --serif );
	font-size: 1.02rem;
	font-weight: 500;
	color: var( --cream );
	padding-top: 0.65rem;
}
.booking-tile-specs {
	font-family: var( --sans );
	font-size: 0.72rem;
	color: rgb(243 237 224 / 0.65);
	padding-inline: 0.85rem;
	margin-top: 0.2rem;
}
.booking-tile-price {
	font-family: var( --sans );
	font-size: 0.78rem;
	color: var( --gold );
	padding-bottom: 0.75rem;
}
.booking-tile-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.booking-tile:has(.booking-tile-radio:checked) {
	border-color: var( --gold );
	box-shadow: inset 0 0 0 1.5px var( --gold );
}
.booking-tile:has(.booking-tile-radio:checked)::after {
	content: '✓ Selected';
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	font-family: var( --sans );
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #0f1b33;
	background: var( --gold );
	border-radius: 999px;
	padding: 0.28rem 0.62rem;
}
/* chosen-car strip + back */
.booking-selected {
	display: flex;
	gap: 1rem;
	align-items: center;
	border: 1px solid rgb(212 168 83 / 0.4);
	border-radius: 12px;
	padding: 0.7rem;
	margin-bottom: 1.5rem;
	background: rgb(212 168 83 / 0.07);
}
.booking-selected--img {
	width: 96px;
	flex: 0 0 96px;
	border-radius: 9px;
	overflow: hidden;
}
.booking-selected--img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.booking-selected--meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	flex: 1;
}
.booking-selected--name {
	font-family: var( --serif );
	font-size: 1.32rem;
	font-weight: 500;
	color: var( --cream );
	line-height: 1.15;
}
.booking-selected--price { font-family: var( --sans ); font-size: 0.9rem; color: var( --gold ); }
.booking-back {
	align-self: stretch;
	background: none;
	border: 1px solid rgb(58 79 120 / 0.7);
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font-family: var( --sans );
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	white-space: nowrap;
	color: var( --gold );
	cursor: pointer;
	transition: border-color 0.3s ease, color 0.3s ease;
}
.booking-back:hover { border-color: var( --gold ); color: var( --cream ); }

/* fields */
.booking-fields { display: grid; gap: 1.2rem; }
.booking-form .booking-field { margin: 0; }
.booking-form .booking-field label {
	display: block;
	margin-bottom: 0.4rem;
}
.booking-fields--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}
.booking-field input,
.booking-field textarea {
	width: 100%;
	box-sizing: border-box;
}
/* Keep the number phone field looking like the other inputs (no spinners). */
.booking-field input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.booking-field input[type="number"]::-webkit-outer-spin-button,
.booking-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.booking-field textarea { resize: vertical; }

/* custom date-blocking calendar */
.booking-datefield {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var( --sans );
	font-size: 0.95rem;
	color: var( --cream );
	background: #172743;
	border: 1px solid rgb(58 79 120 / 0.6);
	border-radius: 5px;
	padding: 0.6rem 0.8rem;
	text-align: left;
	cursor: pointer;
	appearance: none;
}
.booking-datefield:hover { border-color: var( --gold ); }
.booking-datefield--caret { color: var( --gold ); font-size: 0.7rem; }
.booking-datefield.is-empty { color: rgb(243 237 224 / 0.45); }
.booking-datefield.is-set { color: var( --cream ); }

.booking-dialog select.booking-time {
	background-color: #172743;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23d4a853' d='M6 8 0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	border-radius: 5px;
	padding-right: 2.2rem;
	appearance: none;
}
.booking-dialog select.booking-time:hover { border-color: var( --gold ); }
.booking-dialog select.booking-time option { background: #172743; color: var( --cream ); }

#booking-cal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 400;
	height: 100%;
}
#booking-cal.is-open { display: flex; align-items: center; justify-content: center; }
#booking-cal--backdrop {
	position: absolute;
	inset: 0;
	background: rgb(6 12 26 / 0.7);
}
#booking-cal--box {
	position: relative;
	width: min(340px, calc(100vw - 2rem));
	background: #101c36;
	border: 1px solid rgb(58 79 120 / 0.6);
	border-radius: 8px;
	padding: 1rem 1.1rem 1.1rem;
}
#booking-cal--head {
	font-family: var( --serif );
	font-size: 1.15rem;
	color: var( --cream );
	text-align: center;
	margin-bottom: 0.25rem;
}
#booking-cal--head b { color: var( --gold ); font-weight: 500; }
#booking-cal--nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0.25rem 0 0.6rem;
}
#booking-cal--title {
	font-family: var( --sans );
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --gold );
}
#booking-cal--prev, #booking-cal--next {
	background: none;
	border: none;
	color: var( --gold );
	font-size: 1rem;
	cursor: pointer;
	padding: 0.1rem 0.4rem;
}
#booking-cal--prev:hover, #booking-cal--next:hover { color: var( --cream ); }
#booking-cal--week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
#booking-cal--week span {
	font-family: var( --sans );
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: rgb(243 237 224 / 0.4);
	padding: 0.25rem 0;
}
#booking-cal--grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-top: 0.5rem;
}
.booking-cal--day {
	font-family: var( --sans );
	font-size: 0.82rem;
	color: var( --cream );
	background: #172743;
	border-radius: 4px;
	padding: 0.42rem 0;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
}
.booking-cal--day:hover { border-color: var( --gold ); }
.booking-cal--day.is-out { visibility: hidden; }
.booking-cal--day.is-past,
.booking-cal--day.is-blocked {
	color: rgb(243 237 224 / 0.28);
	cursor: not-allowed;
	border-color: transparent;
}
.booking-cal--day.is-blocked { text-decoration: line-through; }
.booking-cal--day.is-today { outline: 1px solid rgb(212 168 83 / 0.5); outline-offset: -1px; }
.booking-cal--day.is-in-range { background: rgb(212 168 83 / 0.16); }
.booking-cal--day.is-selected {
	background: var( --gold );
	color: #0f1b33;
	font-weight: 700;
}
#booking-cal--foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.9rem;
}
#booking-cal--hint {
	font-family: var( --sans );
	font-size: 0.72rem;
	line-height: 1.4;
	color: rgb(243 237 224 / 0.6);
}
#booking-cal--done {
	font-family: var( --sans );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #0f1b33;
	background: var( --gold );
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
	white-space: nowrap;
}
#booking-cal--done:hover { background: #e0b869; }

.booking-submit {
	text-align: center;
	margin-top: 0.25rem;
}
.booking-quote {
	background: rgb(15 27 51 / 0.55);
	border: 1px solid rgb(212 168 83 / 0.35);
	border-radius: 6px;
	padding: 1rem 1.1rem;
	margin-block: 1.25rem 0.25rem;
	text-align: left;
}
.booking-quote--row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var( --sans );
	font-size: 0.88rem;
	color: var( --cream );
	opacity: 0.85;
	padding-block: 0.12rem;
}
.booking-quote--row-disc { color: var( --gold ); opacity: 1; }
.booking-quote--row-total {
	border-top: 1px dashed rgb(58 79 120 / 0.6);
	margin-top: 0.5rem;
	padding-top: 0.6rem;
}
.booking-quote--row-total strong { font-size: 1.02rem; color: var( --cream ); }
.booking-quote--offers {
	margin: 0.75rem 0 0;
	font-family: var( --sans );
	font-size: 0.8rem;
	color: var( --cream );
	opacity: 0.75;
}
.booking-quote--offers strong { color: var( --gold ); font-weight: 600; }
.booking-submit--btn {
	font-family: var( --sans );
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #0f1b33;
	background: var( --gold );
	border: none;
	border-radius: 999px;
	padding: 0.62rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.booking-submit--btn:hover { background: #e0b869; }
.booking-paynote {
	font-family: var( --sans );
	font-size: 0.82rem;
	color: var( --cream );
	opacity: 0.62;
	margin-top: 0.75rem;
}

/* booking confirmation page */
.crb-confirm {
	max-width: 660px;
	margin: 3rem auto;
	padding: 2.5rem 2rem;
	background: var( --navy );
	border: 1px solid rgb(58 79 120 / 0.5);
	border-radius: 6px;
	text-align: center;
}
.crb-confirm--eyebrow {
	font-family: var( --sans );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gold );
	margin-bottom: 0.75rem;
}
.crb-confirm--title {
	font-family: var( --serif );
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.1;
	color: var( --cream );
	margin-bottom: 1.25rem;
}
.crb-confirm--lead {
	font-family: var( --sans );
	font-size: 1.1rem;
	line-height: 1.6;
	color: var( --cream );
	margin-bottom: 0.9rem;
}
.crb-confirm--lead strong { color: var( --gold ); font-weight: 600; }
.crb-confirm--body {
	font-family: var( --sans );
	font-size: 1rem;
	line-height: 1.6;
	color: var( --cream );
	opacity: 0.85;
	max-width: 46ch;
	margin: 0 auto 0.9rem;
}
.crb-confirm--ref {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.4rem 1rem;
	border: 1px solid rgb(212 168 83 / 0.5);
	border-radius: 999px;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var( --gold );
}
.crb-confirm--contact {
	font-family: var( --sans );
	font-size: 0.95rem;
	color: var( --cream );
	opacity: 0.8;
}
.crb-confirm--contact a {
	color: var( --gold );
	text-decoration: none;
	border-bottom: 1px solid rgb(212 168 83 / 0.5);
}
.crb-confirm--contact a:hover { color: var( --cream ); }

/* success / error flash banner */
.crb-flash {
	max-width: 740px;
	margin: 2rem auto 0;
	padding: 1rem 1.5rem;
	border-radius: 4px;
	font-family: var( --sans );
	font-size: 1rem;
	text-align: center;
}
.crb-flash--success {
	background: rgb(212 168 83 / 0.14);
	border: 1px solid rgb(212 168 83 / 0.5);
	color: var( --cream );
}
.crb-flash--error {
	background: rgb(224 138 128 / 0.12);
	border: 1px solid rgb(224 138 128 / 0.5);
	color: var( --cream );
}
/* admin booking status chip */
.crb-status { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 600; }
.crb-status--pending   { background: #f4e8c9; color: #6b5410; }
.crb-status--confirmed { background: #d8e6f4; color: #1d4e89; }
.crb-status--completed { background: #d6eedb; color: #1f6b34; }
.crb-status--cancelled { background: #e7e7eb; color: #5a5a66; }

@media ( max-width: 782px ) {
	.booking-dialog { padding: 2rem 1.25rem; }
}

/* ===== Jetpack form validation, quiet for Midnight ===== */
.contact-form {
	--jetpack--contact-form--error-color: #e08a80;
}
/* hide the generic "Please fill out the form correctly." banner entirely */
.contact-form__error.show-errors {
	display: none !important;
}
.contact-form__error {
	display: none !important;
}
/* invalid field: remove the harsh red block, use a subtle warm underline only */
.contact-form .wp-block-jetpack-contact-form:not(.is-style-outlined) [aria-invalid=true]:not(fieldset),
.contact-form [aria-invalid=true]:not(fieldset) {
	border: 1px solid rgb(224 138 128 / 0.6) !important;
	border-radius: 4px;
}
.contact-form .wp-block-jetpack-contact-form:not(.is-style-outlined) fieldset[aria-invalid=true],
.contact-form fieldset[aria-invalid=true] {
	outline: none;
	margin-bottom: 0;
}
/* per-field message: small, warm, unobtrusive */
.contact-form__input-error {
	color: var( --jetpack--contact-form--error-color );
	font-family: var( --sans );
	font-size: 0.8rem;
}

/* motion */
@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.fleet-grid .fleet-card, .wp-block-button__link { transition: none; }
}

/* responsive */
@media ( max-width: 782px ) {
	.site-header { padding-block: 0.7rem; }
	.site-header-inner { flex-wrap: wrap; row-gap: 0.6rem; }
	.site-brand-text { font-size: 1.35rem; line-height: 1.1; }
	.site-brand-text .brand-gold { font-size: 0.72rem; }
	.nav-links {
		flex-wrap: wrap;
		gap: 0.5rem 0.9rem;
		justify-content: flex-start;
	}
	.nav-links .wp-block-navigation-item__content { font-size: 0.95rem; }
	.nav-links .wp-block-button__link { padding: 0.55rem 1.1rem; }
	.fleet-note { display: none; }
	.fleet-heading-row { gap: 1rem; }
	.fleet-offer { white-space: normal; text-align: left; }
	.split-text { padding-right: 0; }
	.booking-picker { grid-template-columns: repeat(2, 1fr); }
	.booking-fields--half { grid-template-columns: 1fr; gap: 1.2rem; }
	.fleet-grid { grid-template-columns: 1fr; }
	/* chosen-car strip: let the title shrink and the Change car pill wrap to
	   its own line instead of overflowing the card on narrow screens. */
	.booking-selected { flex-wrap: wrap; gap: 0.75rem; }
	.booking-selected--img { flex-basis: 80px; width: 80px; }
	.booking-selected--meta { min-width: 0; flex: 1 1 8rem; }
	.booking-selected--name { overflow-wrap: anywhere; }
	.booking-back { align-self: flex-start; white-space: normal; }
}