/*
 * MZ Ride — booking wizard, styled to the site's active "Obsidian & Champagne"
 * design system: near-black charcoal-gold ground, Cormorant Garamond serif
 * headings over a light-weight Montserrat body, restrained glass cards with
 * champagne-gold hairlines. Default token values live on body.mzride-has-app
 * so Settings → Branding can override them via an inline style block without
 * fighting specificity (see MZRide_Frontend::enqueue_assets()).
 */

body.mzride-has-app {
	--mzr-bg: #151311;
	--mzr-ink: #ffffff;
	--mzr-accent: #ddb48d;

	--mzr-ink-soft: rgba(255, 255, 255, 0.82);
	--mzr-ink-softer: rgba(255, 255, 255, 0.62);
	--mzr-ink-faint: rgba(255, 255, 255, 0.42);
	--mzr-surface: rgba(255, 255, 255, 0.06);
	--mzr-surface-hover: rgba(255, 255, 255, 0.09);
	--mzr-panel: rgba(20, 18, 16, 0.86);
	--mzr-border: rgba(221, 180, 141, 0.22);
	--mzr-border-hover: rgba(221, 180, 141, 0.4);
	--mzr-accent-wash: rgba(221, 180, 141, 0.08);
	--mzr-accent-wash-strong: rgba(221, 180, 141, 0.16);
	--mzr-danger: #e8a3a3;
	--mzr-danger-wash: rgba(220, 90, 90, 0.12);
	--mzr-success: #b9d9b0;

	--mzr-radius-sm: 16px;
	--mzr-radius-md: 20px;
	--mzr-radius-pill: 999px;

	--mzr-font-heading: "Cormorant Garamond", Georgia, serif;
	--mzr-font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;

	--mzr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Automatic page backdrop (matches the site's own global luxury-background) ---- */
body.mzride-has-app::before {
	content: "";
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 72% 60% at 102% -6%, rgba(235, 202, 166, 0.24) 0%, rgba(221, 180, 141, 0.13) 24%, rgba(181, 132, 88, 0.045) 48%, transparent 72%),
		radial-gradient(ellipse 62% 70% at -10% 52%, rgba(156, 108, 71, 0.11) 0%, rgba(156, 108, 71, 0.035) 45%, transparent 72%),
		radial-gradient(ellipse 68% 48% at 96% 104%, rgba(221, 180, 141, 0.12) 0%, rgba(176, 124, 79, 0.04) 46%, transparent 74%),
		radial-gradient(ellipse 90% 75% at 52% 42%, rgba(255, 244, 229, 0.035) 0%, rgba(255, 244, 229, 0.012) 36%, transparent 68%),
		linear-gradient(118deg, transparent 0%, transparent 29%, rgba(255, 235, 211, 0.018) 42%, rgba(221, 180, 141, 0.045) 49%, rgba(255, 240, 220, 0.022) 55%, transparent 68%, transparent 100%),
		linear-gradient(142deg, #2a241f 0%, #211c18 19%, #191614 42%, var(--mzr-bg) 58%, #1c1815 76%, #241d18 90%, #171412 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

body.mzride-has-app::after {
	content: "";
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, transparent 0%, transparent 48%, rgba(5, 4, 3, 0.16) 76%, rgba(5, 4, 3, 0.36) 100%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.008) 0, rgba(255, 255, 255, 0.008) 1px, transparent 1px, transparent 7px);
}

body.mzride-has-app {
	background: var(--mzr-bg);
}

/* ---- Base container ---- */
.mzride-app,
.mzride-standalone {
	font-family: var(--mzr-font-body);
	font-weight: 300;
	color: var(--mzr-ink-soft);
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 20px;
	box-sizing: border-box;
}

.mzride-app *,
.mzride-standalone * {
	box-sizing: border-box;
}

.mzride-app h1,
.mzride-app h2,
.mzride-app h3,
.mzride-standalone h1,
.mzride-standalone h2,
.mzride-standalone h3 {
	font-family: var(--mzr-font-heading);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--mzr-ink);
	margin: 0 0 10px;
}

.mzride-app em,
.mzride-standalone em {
	font-style: italic;
	color: var(--mzr-accent);
	font-weight: 500;
}

.mzride-app h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.mzride-heading-after-badge { margin-top: 14px; }
.mzride-app p { margin: 0 0 16px; }

/* Android Chrome's default tap-highlight is a translucent gray/blue flash
   that briefly overlays a button on every tap — against pills/circles with
   already-translucent gold borders, that reads as a glitchy double-outline
   right when tapped. Applies to every button in the app, not just .mzride-btn
   (back-links, steppers, picker nav/day/time buttons all use plain <button>). */
.mzride-app button { -webkit-tap-highlight-color: transparent; }

/* ---- Banner ----
 * Self-contained: declares its own copy of every custom property it (and its
 * descendant .mzride-btn) needs, rather than relying on body.mzride-has-app.
 * It's injected via wp_body_open on the front page — a page with no wizard
 * shortcode in its post content, so mzride-has-app is never added there, and
 * that class also paints a fixed full-page dark backdrop we don't want
 * bleeding onto the homepage's own design.
 */
.mzride-banner {
	--mzr-bg: #151311;
	--mzr-ink: #ffffff;
	--mzr-accent: #ddb48d;
	--mzr-ink-soft: rgba(255, 255, 255, 0.82);
	--mzr-border: rgba(221, 180, 141, 0.32);
	--mzr-radius-pill: 999px;
	--mzr-font-heading: "Cormorant Garamond", Georgia, serif;
	--mzr-font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--mzr-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 7px 22px;
	color: var(--mzr-ink);
	text-align: center;
	max-width: none;
	background: linear-gradient(90deg, #171310, #201a15 50%, #171310);
	border-bottom: 1px solid var(--mzr-border);
	overflow: hidden;
	font-family: var(--mzr-font-body);
}

/* A slow, subtle diagonal sweep of light — like foil catching light, not a
   flashy loading-bar shimmer. Purely decorative; disabled below under
   prefers-reduced-motion alongside the rest of the plugin's animations. */
.mzride-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(221, 180, 141, 0.12) 50%, transparent 60%);
	background-size: 220% 100%;
	animation: mzrideBannerShimmer 7s linear infinite;
	pointer-events: none;
}

@keyframes mzrideBannerShimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -120% 0; }
}

.mzride-banner-badge {
	color: var(--mzr-accent);
	font-size: 0.72rem;
	line-height: 1;
	animation: mzrideBannerBadgePulse 2.4s var(--mzr-ease) infinite;
}

@keyframes mzrideBannerBadgePulse {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.15); }
}

.mzride-banner .mzride-banner-text {
	position: relative;
	font-weight: 500;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mzr-ink-soft);
}

.mzride-banner .mzride-banner-divider {
	color: rgba(221, 180, 141, 0.4);
	margin: 0 2px;
	font-weight: 400;
}

.mzride-banner .mzride-banner-text strong {
	color: var(--mzr-accent);
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: 0.02em;
	text-shadow: 0 0 10px rgba(221, 180, 141, 0.45);
	animation: mzrideBannerHighlightPulse 2.4s var(--mzr-ease) infinite;
}

@keyframes mzrideBannerHighlightPulse {
	0%, 100% { text-shadow: 0 0 6px rgba(221, 180, 141, 0.3); }
	50% { text-shadow: 0 0 16px rgba(221, 180, 141, 0.8); }
}

.mzride-banner .mzride-btn {
	position: relative;
	white-space: nowrap;
	padding: 7px 18px !important;
	font-size: 0.58rem !important;
	animation: mzrideBannerCtaGlow 2.6s var(--mzr-ease) infinite;
}

/* Narrow phones: the badge+text already fill the width at the base font
   size, pushing the button onto its own line — shrink further so that
   wrapped second line stays as short/slim as possible instead of adding
   noticeable extra height. */
@media (max-width: 480px) {
	.mzride-banner {
		padding: 6px 14px;
		gap: 6px;
	}

	.mzride-banner-badge { font-size: 0.62rem; }

	.mzride-banner .mzride-banner-text {
		font-size: 0.58rem;
		letter-spacing: 0.02em;
	}

	.mzride-banner .mzride-btn {
		padding: 5px 14px !important;
		font-size: 0.5rem !important;
	}
}

@keyframes mzrideBannerCtaGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(221, 180, 141, 0.35); }
	50% { box-shadow: 0 0 0 6px rgba(221, 180, 141, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.mzride-banner::after,
	.mzride-banner-badge,
	.mzride-banner .mzride-btn,
	.mzride-banner .mzride-banner-text strong {
		animation: none !important;
	}
}

/* ---- Buttons ---- */
.mzride-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 32px;
	border-radius: var(--mzr-radius-pill) !important;
	font-family: var(--mzr-font-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* Android Chrome's default tap-highlight is a translucent gray/blue flash
	   that briefly overlays the button on every tap — against a pill with an
	   already-translucent gold border, that reads as a glitchy double-outline
	   right when tapped. This is the standard fix. */
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.25s var(--mzr-ease), background-color 0.25s var(--mzr-ease), color 0.25s var(--mzr-ease), border-color 0.25s var(--mzr-ease), box-shadow 0.25s var(--mzr-ease);
}

.mzride-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/*
 * The active theme (Hello Biz) applies a global reset to native
 * [type="button"]/[type="submit"]/button elements at specificity (0,3,0),
 * which beats a plain .mzride-btn-primary class. These properties are
 * declared !important specifically to win that fight — every wizard
 * button is a real <button> element, so this is unavoidable rather than
 * a stylistic shortcut.
 */
.mzride-btn-primary {
	background: transparent !important;
	color: var(--mzr-ink) !important;
	border: 1px solid rgba(221, 180, 141, 0.5) !important;
}

.mzride-btn-primary:hover:not(:disabled) {
	background: var(--mzr-accent) !important;
	color: #171412 !important;
	border-color: var(--mzr-accent) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(221, 180, 141, 0.35);
}

.mzride-btn-secondary {
	background: transparent !important;
	color: var(--mzr-ink-soft) !important;
	border: 1px solid var(--mzr-border) !important;
}

.mzride-btn-secondary:hover:not(:disabled) {
	border-color: var(--mzr-border-hover) !important;
	color: var(--mzr-ink) !important;
	transform: translateY(-1px);
}

.mzride-btn-block { display: flex !important; width: 100% !important; margin-top: 8px; }

/* A solid, clearly "colored" secondary action (e.g. Resend Code) — distinct
   from the outlined mzride-btn-secondary, which reads as too muted/disabled
   for an action a customer needs to notice and can actually tap again. */
.mzride-btn-accent {
	background: var(--mzr-accent) !important;
	color: #171412 !important;
	border: 1px solid var(--mzr-accent) !important;
}

.mzride-btn-accent:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(221, 180, 141, 0.35);
}

/* Minimal top-left "back" control — a plain <button>, so it inherits the
   Hello Biz theme's global button reset (pink border/color) unless every
   property below is !important; see the .mzride-btn-primary comment above
   for the full explanation of why that reset keeps recurring. */
.mzride-back-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
	width: auto !important;
	color: var(--mzr-ink-softer) !important;
	font-family: var(--mzr-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s var(--mzr-ease), transform 0.2s var(--mzr-ease);
}

.mzride-back-link:hover {
	color: var(--mzr-accent) !important;
	transform: translateX(-2px);
}

.mzride-back-link svg { width: 14px; height: 14px; flex-shrink: 0; }

.mzride-otp-resend {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--mzr-border);
	text-align: center;
}

.mzride-otp-resend .mzride-field-hint {
	margin-bottom: 14px;
}

/*
 * The main step card: mostly-opaque dark panel (not a translucent white
 * tint) so the busy page-background gradient behind it can't bleed through
 * unevenly and read as washed-out/patchy on real devices — it should look
 * like a solid card with a subtle glow, not haze.
 */
.mzride-card {
	background: var(--mzr-panel);
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-md);
	padding: 40px 36px;
	margin-bottom: 20px;
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

@media (max-width: 560px) {
	.mzride-card { padding: 28px 22px; }
}

/*
 * Step transitions: intentionally NOT a CSS @keyframes animation.
 * Combining `display:none -> block` with a keyframe animation in the same
 * style pass is unreliable across mobile browsers — on some devices the
 * animation gets stuck rendering its very first frame (opacity: 0)
 * forever, leaving the whole step invisible. The entrance effect is
 * instead driven from JS (see animateStepIn() in mz-ride.js), which forces
 * a reflow before transitioning and — critically — clears any inline
 * opacity/transform on a hard timeout no matter what, so a step can never
 * get stuck invisible even if the transition itself misbehaves.
 */
.mzride-step { display: none; opacity: 1; }
.mzride-step.active { display: block; }

/* ---- Progress ---- */
.mzride-progress {
	display: flex;
	gap: 6px;
	margin-bottom: 32px;
}

.mzride-progress span {
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: var(--mzr-border);
	overflow: hidden;
	position: relative;
}

.mzride-progress span.done,
.mzride-progress span.current {
	background: var(--mzr-accent);
	box-shadow: 0 0 8px rgba(221, 180, 141, 0.5);
}

/* ---- Form fields ---- */
.mzride-field-row { margin-bottom: 18px; }

.mzride-field-row label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mzr-ink-faint);
	margin-bottom: 8px;
}

.mzride-field-row label svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--mzr-accent);
}

/* ---- Stepper (passengers / luggage) ---- */
.mzride-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	padding: 6px 8px;
}

.mzride-stepper-btn {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	min-width: 0 !important;
	flex-shrink: 0;
	border-radius: 50% !important;
	background: var(--mzr-accent) !important;
	border: 1px solid var(--mzr-accent) !important;
	color: #171412 !important;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s var(--mzr-ease), background-color 0.2s var(--mzr-ease);
}

.mzride-stepper-btn:hover {
	transform: scale(1.08);
}

.mzride-stepper input {
	width: auto !important;
	flex: 1;
	text-align: center;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	font-family: var(--mzr-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--mzr-ink);
	-moz-appearance: textfield;
}

.mzride-stepper input::-webkit-outer-spin-button,
.mzride-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mzride-field-row input[type="text"],
.mzride-field-row input[type="email"],
.mzride-field-row input[type="tel"],
.mzride-field-row input[type="date"],
.mzride-field-row input[type="time"],
.mzride-field-row input[type="number"],
.mzride-field-row select,
.mzride-field-row textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	font-family: var(--mzr-font-body);
	font-size: 0.95rem;
	font-weight: 400;
	background: rgba(255, 255, 255, 0.08);
	color: var(--mzr-ink);
	transition: border-color 0.25s var(--mzr-ease), background-color 0.25s var(--mzr-ease), box-shadow 0.25s var(--mzr-ease);
}

.mzride-field-row input::placeholder,
.mzride-field-row textarea::placeholder { color: var(--mzr-ink-faint); }

.mzride-field-row input:focus,
.mzride-field-row select:focus,
.mzride-field-row textarea:focus {
	outline: none;
	border-color: var(--mzr-accent);
	background: rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 0 3px var(--mzr-accent-wash);
}

.mzride-field-row select option { background: #201b17; color: var(--mzr-ink); }

.mzride-checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	color: var(--mzr-ink-softer);
	margin-bottom: 14px;
	line-height: 1.5;
}

.mzride-checkbox-row input {
	accent-color: var(--mzr-accent);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.mzride-checkbox-row label { padding-top: 1px; }

.mzride-checkbox-row a { color: var(--mzr-accent); text-decoration: underline; text-underline-offset: 2px; }

.mzride-phone-row { display: flex; gap: 10px; }
.mzride-phone-row select {
	flex: 0 0 46%;
	padding: 13px 34px 13px 12px;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	font-size: 0.85rem;
	background-color: rgba(255, 255, 255, 0.08);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23DDB48D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	color: var(--mzr-ink);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.mzride-phone-row select:focus,
.mzride-phone-row input:focus { outline: none; border-color: var(--mzr-accent); }
.mzride-phone-row input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 480px) {
	.mzride-phone-row { flex-direction: column; }
	.mzride-phone-row select { flex: 1 1 auto; }
}

.mzride-form-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 560px) {
	.mzride-form-grid-2 { grid-template-columns: 1fr; }
}

/* See the step-transition comment above: no @keyframes here either — the
   fade-in is driven from JS (showError()) with a forced reflow and a hard
   timeout that guarantees full opacity no matter what. */
.mzride-error {
	display: none;
	opacity: 1;
	background: var(--mzr-danger-wash);
	color: var(--mzr-danger);
	padding: 12px 16px;
	border-radius: var(--mzr-radius-sm);
	border: 1px solid rgba(220, 90, 90, 0.2);
	margin-bottom: 18px;
	font-size: 0.85rem;
}

/* !important: the Hello Biz theme's own paragraph spacing resets otherwise
   win by loading later at equal specificity, collapsing this back down and
   crowding the hint text against whatever sits above it (phone row, price
   summary, etc.) — the same theme-collision pattern documented elsewhere
   in this stylesheet for buttons/inputs. */
.mzride-field-hint { color: var(--mzr-ink-faint); font-size: 0.78rem; margin-top: 18px !important; line-height: 1.5; }

.mzride-inline-success {
	color: var(--mzr-success);
	font-size: 0.85rem;
	margin-top: 14px;
}

/* ---- Vehicle cards (pricing step) ---- */
.mzride-vehicle-grid,
[data-mzride-vehicle-list] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.mzride-vehicle-card {
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-md);
	padding: 22px;
	text-align: center;
	background: var(--mzr-surface);
	transition: border-color 0.3s var(--mzr-ease), transform 0.3s var(--mzr-ease), background-color 0.3s var(--mzr-ease);
}

.mzride-vehicle-card:hover {
	border-color: var(--mzr-border-hover);
	background: var(--mzr-surface-hover);
	transform: translateY(-4px);
}

.mzride-vehicle-card .mzride-vehicle-image {
	width: 100%;
	height: 150px;
	object-fit: contain;
	object-position: center;
	border-radius: 12px;
	margin-bottom: 14px;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
	padding: 6px;
}

.mzride-vehicle-card h3 {
	margin: 6px 0 4px;
	font-size: 1.3rem;
}

.mzride-vehicle-card p {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--mzr-ink-faint);
	margin-bottom: 6px;
}

/* Default (no discount): the regular price IS the price — shown plain and prominent. */
.mzride-price-regular {
	font-size: 0.65rem;
	color: var(--mzr-ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 14px 0 2px;
}
.mzride-price-regular span {
	display: block;
	font-family: var(--mzr-font-heading);
	font-size: 2.1rem;
	color: var(--mzr-ink);
	font-weight: 700;
	line-height: 1.1;
}

/* When a discount applies, the regular price becomes the small, struck-through
   reference point sitting under the big discount price. */
.mzride-price-regular.mzride-has-discount {
	margin: 4px 0 14px;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.85rem;
	color: var(--mzr-ink-faint);
}
.mzride-price-regular.mzride-has-discount span {
	display: inline;
	font-family: var(--mzr-font-body);
	font-size: 0.85rem;
	color: var(--mzr-ink-faint);
	text-decoration: line-through;
	font-weight: 400;
}

.mzride-price-weekend {
	font-size: 0.65rem;
	color: var(--mzr-accent);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 14px 0 2px;
	font-weight: 600;
}
.mzride-price-weekend span {
	display: block;
	font-family: var(--mzr-font-heading);
	font-size: 2.3rem;
	color: var(--mzr-accent);
	font-weight: 700;
	line-height: 1.1;
}

.mzride-price-savings {
	display: inline-block;
	background: var(--mzr-accent-wash-strong);
	color: var(--mzr-accent);
	padding: 4px 14px;
	border-radius: var(--mzr-radius-pill);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 10px 0 16px;
}

/* ---- Gratuity / method options ---- */
.mzride-gratuity-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	margin-bottom: 10px;
	cursor: pointer;
	background: var(--mzr-surface);
	transition: border-color 0.25s var(--mzr-ease), background-color 0.25s var(--mzr-ease), transform 0.25s var(--mzr-ease);
	color: var(--mzr-ink-softer);
	font-size: 0.9rem;
}

.mzride-gratuity-option:hover {
	border-color: var(--mzr-border-hover);
	transform: translateX(2px);
}

.mzride-gratuity-option:has(input:checked) {
	border-color: var(--mzr-accent);
	background: var(--mzr-accent-wash);
	color: var(--mzr-ink);
}

.mzride-gratuity-option input {
	accent-color: var(--mzr-accent);
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.mzride-gratuity-option strong { color: var(--mzr-ink); }

/* ---- Review ---- */
.mzride-review-table { width: 100%; border-collapse: collapse; }
.mzride-review-table th,
.mzride-review-table td {
	text-align: left;
	padding: 10px 4px;
	border-bottom: 1px solid var(--mzr-border);
	font-size: 0.85rem;
	font-weight: 300;
	color: var(--mzr-ink-soft);
}
.mzride-review-table th {
	width: 42%;
	color: var(--mzr-ink-faint);
	font-weight: 500;
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mzride-review-table tr:last-child th,
.mzride-review-table tr:last-child td { border-bottom: none; }

.mzride-review-group + .mzride-review-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--mzr-border); }

.mzride-review-group-title {
	font-family: var(--mzr-font-body);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mzr-accent);
	margin: 0 0 12px;
}

.mzride-review-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
}

.mzride-review-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mzride-review-item-wide { grid-column: 1 / -1; }

.mzride-review-label {
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mzr-ink-faint);
}

.mzride-review-value {
	font-size: 0.88rem;
	font-weight: 300;
	color: var(--mzr-ink-soft);
	word-break: break-word;
}

.mzride-review-price {
	margin-top: 20px;
	padding: 16px 18px;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	background: var(--mzr-surface);
}

.mzride-review-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
	font-weight: 300;
	color: var(--mzr-ink-softer);
	padding: 6px 0;
}

.mzride-review-price-total {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--mzr-border);
	font-family: var(--mzr-font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--mzr-accent);
}

@media (max-width: 560px) {
	.mzride-review-grid { grid-template-columns: 1fr; }
}

/* ---- Confirmation ---- */
.mzride-confirmation {
	text-align: center;
	padding: 12px 0;
}

.mzride-confirmation .mzride-confirmation-icon {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--mzr-accent);
	color: #171412;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin: 0 auto 20px;
	animation: mzrideCheckIn 0.6s var(--mzr-ease);
}

/* transform-only: even if this animation gets stuck on its first frame on
   some mobile browser, the icon stays fully visible (opacity 1 throughout) —
   only the scale bounce is decorative, never the icon's visibility. */
@keyframes mzrideCheckIn {
	0% { transform: scale(0.6); }
	70% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.mzride-otp-success {
	text-align: center;
	padding: 20px 0;
}

.mzride-otp-success-icon {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--mzr-success);
	color: #16321c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin: 0 auto 16px;
	animation: mzrideCheckIn 0.6s var(--mzr-ease);
}

.mzride-otp-success-text {
	color: var(--mzr-success);
	font-family: var(--mzr-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
}

.mzride-confirmation .mzride-booking-number {
	font-family: var(--mzr-font-heading);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--mzr-ink);
	margin: 14px 0;
}

.mzride-confirmation .mzride-status-pill {
	margin: 0 0 20px;
}

.mzride-confirmation p {
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}

.mzride-status-pill {
	display: inline-block;
	background: var(--mzr-accent-wash-strong);
	color: var(--mzr-accent);
	padding: 5px 16px;
	border-radius: var(--mzr-radius-pill);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- Verified badge ---- */
.mzride-badge {
	display: inline-block;
	padding: 5px 14px;
	border-radius: var(--mzr-radius-pill);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.04);
	color: var(--mzr-ink-faint);
	border: 1px solid var(--mzr-border);
}
.mzride-badge-verified {
	background: var(--mzr-accent-wash-strong);
	color: var(--mzr-accent);
	border-color: rgba(221, 180, 141, 0.3);
}

/* ---- Policies ---- */
.mzride-select-all-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mzr-accent);
	cursor: pointer;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mzr-border);
}
.mzride-select-all-row input {
	accent-color: var(--mzr-accent);
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.mzride-policy-item {
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	padding: 16px 18px;
	margin-bottom: 10px;
	background: var(--mzr-surface);
	transition: border-color 0.25s var(--mzr-ease);
}
.mzride-policy-item:hover { border-color: var(--mzr-border-hover); }
.mzride-policy-item label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--mzr-ink-soft); cursor: pointer; }
.mzride-policy-item input { accent-color: var(--mzr-accent); width: 16px; height: 16px; flex-shrink: 0; }
.mzride-policy-item strong { color: var(--mzr-ink); font-weight: 500; }
.mzride-policy-item details { margin-top: 10px; margin-left: 26px; font-size: 0.82rem; color: var(--mzr-ink-softer); line-height: 1.6; }
.mzride-policy-item summary {
	cursor: pointer;
	color: var(--mzr-accent);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	list-style: none;
}
.mzride-policy-item summary::-webkit-details-marker { display: none; }
.mzride-policy-content { padding-top: 8px; }

.mzride-policy-learn-more {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mzr-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

/* ---- Weekend offer landing ---- */
.mzride-offer-hero {
	text-align: center;
	margin-bottom: 24px;
	padding: 8px 0 24px;
}

.mzride-offer-hero h1 {
	font-size: clamp(2rem, 6vw, 3.1rem);
	margin: 0 0 12px;
}

.mzride-offer-hero .mzride-gold-text { color: var(--mzr-accent); }
.mzride-offer-hero p { font-size: 1rem; color: var(--mzr-ink-softer); max-width: 480px; margin: 0 auto 16px; }

.mzride-offer-hero img {
	max-width: 100%;
	border-radius: var(--mzr-radius-md);
	margin: 24px 0;
	border: 1px solid var(--mzr-border);
}

.mzride-offer-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin: 28px 0;
	text-align: left;
}

.mzride-offer-step {
	background: var(--mzr-surface);
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	padding: 18px;
	transition: border-color 0.3s var(--mzr-ease), transform 0.3s var(--mzr-ease);
}

.mzride-offer-step:hover { border-color: var(--mzr-border-hover); transform: translateY(-3px); }

.mzride-offer-step .mzride-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--mzr-accent);
	color: var(--mzr-accent);
	font-family: var(--mzr-font-heading);
	font-weight: 700;
	margin-bottom: 10px;
}

.mzride-offer-step div:last-child { font-size: 0.85rem; color: var(--mzr-ink-soft); }

.mzride-offer-benefits { list-style: none; padding: 0; text-align: left; max-width: 420px; margin: 20px auto; }
.mzride-offer-benefits li { padding: 7px 0 7px 28px; position: relative; color: var(--mzr-ink-soft); font-size: 0.92rem; }
.mzride-offer-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--mzr-accent); font-weight: 700; }

/* ---- Wizard hero (weekend offer summary above the booking form) ---- */
.mzride-wizard-hero {
	max-width: 640px;
	margin: 0 auto;
	/* Generous top clearance: the theme's own header sits taller than it
	   first appears to occupy in normal flow, so a small padding here left
	   the hero heading crowding right up against the nav with no breathing
	   room. */
	padding: 130px 20px 0;
	text-align: center;
	font-family: var(--mzr-font-body);
}

@media (max-width: 768px) {
	.mzride-wizard-hero { padding-top: 100px; }
}

.mzride-hero-eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mzr-accent);
	font-weight: 600;
	margin: 0 0 10px;
}

.mzride-hero-heading {
	font-family: var(--mzr-font-heading);
	font-weight: 600;
	font-size: clamp(1.7rem, 4.5vw, 2.4rem);
	color: var(--mzr-ink);
	line-height: 1.15;
	margin: 0 0 18px;
}

.mzride-hero-heading em { color: var(--mzr-accent); font-style: italic; font-weight: 500; }

.mzride-hero-offer {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	background: linear-gradient(180deg, var(--mzr-accent-wash-strong), var(--mzr-accent-wash));
	border: 1px solid rgba(221, 180, 141, 0.35);
	border-radius: var(--mzr-radius-md);
	padding: 16px 30px;
	margin-bottom: 8px;
	box-shadow: 0 10px 28px -14px rgba(221, 180, 141, 0.3);
}

.mzride-hero-offer-label {
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mzr-accent);
	font-weight: 700;
}

.mzride-hero-offer-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.mzride-hero-offer-text {
	font-size: 1.02rem;
	color: var(--mzr-ink-soft);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.mzride-hero-offer-price {
	/* Cormorant Garamond's numerals are old-style figures with descenders
	 * that hang below the baseline (confirmed via pixel-ink measurement:
	 * ~27% of the font size droops under the line), which reads as
	 * "sinking" next to the surrounding lining-figure/cap text. Montserrat's
	 * digits sit flush on the baseline like the rest of the row. */
	display: inline-block;
	color: var(--mzr-accent);
	font-family: var(--mzr-font-body);
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}

.mzride-hero-offer-suffix {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mzr-ink-softer);
	font-weight: 600;
}

/* ---- Custom date / time pickers ----
 * Both render as a centered modal over a dimmed/blurred backdrop rather than
 * a popover anchored to the trigger field: anchoring a ~380px-tall calendar
 * to a field that can sit anywhere on the page never reliably fits the
 * viewport (flip-when-overflowing just trades "overflows the bottom" for
 * "overflows upward into unrelated content above the card" on shorter
 * screens). A centered modal sidesteps the whole problem.
 */
.mzride-picker-anchor { position: relative; }
.mzride-picker-trigger { cursor: pointer; }

.mzride-picker-overlay {
	position: fixed;
	inset: 0;
	z-index: 38;
	background: rgba(8, 7, 6, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--mzr-ease), visibility 0s linear 0.25s;
}

.mzride-picker-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s var(--mzr-ease);
}

.mzride-picker-popover {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	z-index: 40;
	background: #1c1815;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-md);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.85);
	padding: 20px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--mzr-ease), transform 0.2s var(--mzr-ease), visibility 0s linear 0.2s;
}

.mzride-picker-popover.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity 0.2s var(--mzr-ease), transform 0.2s var(--mzr-ease);
}

.mzride-datepicker { width: 300px; max-width: 88vw; }

/* ---- Off-day pricing notice (Saturday-exclusive promo picked on another day) ---- */
.mzride-offday-overlay {
	position: fixed;
	inset: 0;
	z-index: 48;
	background: rgba(8, 7, 6, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--mzr-ease), visibility 0s linear 0.25s;
}

.mzride-offday-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s var(--mzr-ease);
}

.mzride-offday-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	z-index: 50;
	width: 380px;
	max-width: calc(100vw - 32px);
	background: #1c1815;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-md);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.85);
	padding: 28px 24px 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--mzr-ease), transform 0.2s var(--mzr-ease), visibility 0s linear 0.2s;
}

.mzride-offday-modal.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity 0.2s var(--mzr-ease), transform 0.2s var(--mzr-ease);
}

.mzride-offday-title {
	font-family: var(--mzr-font-heading);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--mzr-accent);
	margin: 0 0 12px;
	text-align: center;
}

.mzride-offday-body {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--mzr-ink-soft);
	margin: 0 0 20px;
	text-align: center;
}

.mzride-offday-price {
	color: var(--mzr-accent);
	font-weight: 700;
}

.mzride-offday-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mzride-offday-actions .mzride-btn-block { margin-top: 0; }

.mzride-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.mzride-picker-title {
	font-family: var(--mzr-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mzr-accent);
}

.mzride-picker-nav {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	min-width: 0 !important;
	border-radius: 10px;
	border: 1px solid var(--mzr-border) !important;
	background: transparent !important;
	color: var(--mzr-ink) !important;
	font-size: 1.1rem;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s var(--mzr-ease), background-color 0.2s var(--mzr-ease);
}
.mzride-picker-nav:hover { border-color: var(--mzr-border-hover) !important; background: var(--mzr-surface-hover) !important; }

.mzride-picker-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 6px;
}
.mzride-picker-weekdays span {
	text-align: center;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	color: var(--mzr-ink-faint);
	font-weight: 600;
}

.mzride-picker-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.mzride-picker-day {
	aspect-ratio: 1;
	/* The theme's global button reset adds 8px 16px padding and a min-width,
	   which a real <button> here inherits unless overridden — 7 of those per
	   row demands far more width than a 1fr grid track can shrink to fit,
	   forcing the whole popover into unwanted horizontal scroll. */
	padding: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: var(--mzr-ink-soft) !important;
	font-size: 0.85rem;
	font-family: var(--mzr-font-body);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s var(--mzr-ease), border-color 0.2s var(--mzr-ease), color 0.2s var(--mzr-ease);
}
.mzride-picker-day:hover:not(:disabled) { background: var(--mzr-surface-hover) !important; }
.mzride-picker-day.is-empty { visibility: hidden; cursor: default; }
.mzride-picker-day.is-disabled { color: var(--mzr-ink-faint) !important; opacity: 0.35; cursor: not-allowed; }
.mzride-picker-day.is-today { border-color: var(--mzr-border-hover) !important; }
.mzride-picker-day.is-selected {
	border-color: var(--mzr-accent) !important;
	color: var(--mzr-accent) !important;
	font-weight: 700;
	background: var(--mzr-accent-wash) !important;
}

.mzride-timepicker { width: 280px; max-width: 88vw; text-align: center; }
.mzride-timepicker .mzride-picker-title { display: block; margin-bottom: 18px; }

.mzride-time-columns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

.mzride-time-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.mzride-time-arrow {
	background: transparent !important;
	border: none !important;
	color: var(--mzr-accent) !important;
	font-size: 0.7rem;
	cursor: pointer;
	padding: 4px 10px !important;
	min-width: 0 !important;
	transition: transform 0.15s var(--mzr-ease);
}
.mzride-time-arrow:hover { transform: scale(1.2); }

.mzride-time-value {
	min-width: 56px;
	padding: 12px 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--mzr-border);
	border-radius: 10px;
	font-family: var(--mzr-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--mzr-ink);
	text-align: center;
}

.mzride-time-sep {
	font-size: 1.4rem;
	color: var(--mzr-ink);
	font-weight: 700;
	padding-top: 30px;
}

/* ---- Payment step ---- */
.mzride-payment-option {
	position: relative;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-md);
	background: var(--mzr-surface);
	padding: 22px;
	margin: 0 0 16px;
	text-align: left;
}

.mzride-payment-option-zelle {
	border-color: var(--mzr-border-hover);
}

.mzride-payment-option h3 {
	margin: 0 0 6px;
	font-family: var(--mzr-font-heading);
	font-size: 1.1rem;
	color: var(--mzr-ink);
}

.mzride-payment-option .mzride-field-hint {
	margin-top: 0 !important;
	margin-bottom: 16px !important;
}

.mzride-payment-badge {
	position: absolute;
	top: -11px;
	right: 18px;
	display: inline-block;
	background: var(--mzr-accent);
	color: #171412;
	padding: 4px 12px;
	border-radius: var(--mzr-radius-pill);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mzride-copy-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--mzr-border);
	border-radius: var(--mzr-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	padding: 10px 12px;
	margin-bottom: 16px;
}

.mzride-copy-value {
	flex: 1;
	font-family: var(--mzr-font-heading);
	font-size: 0.92rem;
	color: var(--mzr-ink);
	word-break: break-all;
}

.mzride-copy-btn {
	flex-shrink: 0;
	width: auto !important;
	padding: 7px 16px !important;
	font-size: 0.72rem !important;
}

[data-mzride-payment-note] {
	color: var(--mzr-success);
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.mzride-step.active,
	.mzride-error,
	.mzride-confirmation .mzride-confirmation-icon {
		animation: none !important;
	}
	.mzride-btn,
	.mzride-vehicle-card,
	.mzride-gratuity-option,
	.mzride-policy-item,
	.mzride-offer-step {
		transition: none !important;
	}
}