/*
 * Reservation Online by WaytoCode — modern stylesheet
 * Uses CSS custom properties driven by the Apparence admin page.
 * Override any value in your theme by re-defining the variable inside .containerw.
 */

.containerw {
	/* ---- Colors ---- */
	--rsv-primary: #a27e3e;
	--rsv-primary-hover: #8a6a30;
	--rsv-primary-text: #ffffff;
	--rsv-heading-bg: #0d3323;
	--rsv-heading-text: #ffffff;
	--rsv-body-bg: #f7f8fa;
	--rsv-card-bg: #ffffff;
	--rsv-border: #e5e7eb;
	--rsv-text: #1f2937;
	--rsv-muted-text: #6b7280;
	--rsv-input-bg: #ffffff;
	--rsv-input-border: #d1d5db;
	--rsv-input-text: #111827;
	--rsv-tab-active-bg: #0d3323;
	--rsv-tab-active-text: #ffffff;
	--rsv-tab-inactive-bg: #f3f4f6;
	--rsv-tab-inactive-text: #374151;
	--rsv-error-bg: #fee2e2;
	--rsv-error-text: #991b1b;

	/* ---- Typography scale ---- */
	--rsv-fs-micro:    11px;  /* uppercase labels */
	--rsv-fs-small:    12px;  /* secondary helper text */
	--rsv-fs-body:     14px;  /* default body, inputs */
	--rsv-fs-strong:   15px;  /* emphasized values */
	--rsv-fs-card:     16px;  /* card headings (h1/h2/h3) */
	--rsv-fs-title:    17px;  /* vehicle name */
	--rsv-fs-hero:     22px;  /* total price */
	--rsv-fs-hero-lg:  26px;  /* selected vehicle total */
	--rsv-radius:      8px;
	--rsv-radius-lg:   12px;

	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--rsv-fs-body);
	line-height: 1.45;
	color: var(--rsv-text);
	background: var(--rsv-body-bg);
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	border-radius: var(--rsv-radius-lg);
}

.containerw, .containerw * {
	box-sizing: border-box;
}

/* ========== Admin notice (only visible to admins when API key is missing) ========== */
.rsv-admin-notice {
	max-width: 1100px;
	margin: 16px auto;
	padding: 14px 18px;
	background: #fff7e6;
	border-left: 4px solid #d97706;
	color: #78350f;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
}
.rsv-admin-notice a {
	color: #1d4ed8;
	font-weight: 600;
}

/* ========== Stepper ========== */
.rsv-stepper {
	max-width: 1100px;
	margin: 0 auto 8px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rsv-step {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	background: transparent;
	color: #6b7280;
	transition: all 0.2s ease;
	font-size: 13px;
	font-weight: 500;
}
.rsv-step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #374151;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}
.rsv-step.active .rsv-step-num {
	background: var(--rsv-primary, #a27e3e);
	color: var(--rsv-primary-text, #fff);
	box-shadow: 0 0 0 4px rgba(162, 126, 62, 0.15);
}
.rsv-step.active {
	color: #111827;
	font-weight: 600;
}
.rsv-step.completed .rsv-step-num {
	background: #10b981;
	color: #fff;
}
.rsv-step-divider {
	flex: 0 1 60px;
	height: 2px;
	background: #e5e7eb;
	border-radius: 2px;
}
.rsv-step-label { white-space: nowrap; }

@media (max-width: 768px) {
	.rsv-stepper { flex-wrap: wrap; }
	.rsv-step-divider { display: none; }
	.rsv-step-label { font-size: 12px; }
}

/* ========== Single-bar validation message ========== */
.containerw .rsv-validation-bar {
	flex: 1 1 100%;
	margin: 0 0 12px;
	padding: 12px 16px;
	background: var(--rsv-error-bg);
	color: var(--rsv-error-text);
	border: 1px solid var(--rsv-error-text);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	display: none;
}

/* ========== Summary block (right card on step 2) ========== */
.containerw .gare {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--rsv-border);
	padding: 12px 0;
	font-size: 14px;
}
.containerw .gare svg.rsv-icon {
	color: var(--rsv-primary);
	flex-shrink: 0;
}
.containerw .gare-label {
	font-weight: 600;
	color: var(--rsv-muted-text);
	margin: 0;
	min-width: 70px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.containerw .gare-value {
	font-weight: 500;
	color: var(--rsv-text);
	flex: 1;
	margin: 0;
	word-break: break-word;
}

/* ========== Cards ========== */
.containerw .left-box {
	flex: 1 1 calc(50% - 12px);
	min-width: 280px;
	background: var(--rsv-card-bg);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.containerw .left-box:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.containerw .vote-t h1 {
	background: var(--rsv-heading-bg);
	color: var(--rsv-heading-text);
	font-size: var(--rsv-fs-card);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 18px 20px;
	margin: 0;
	border-radius: 0;
	line-height: 1.4;
	display: block;
	min-height: 56px;
	box-sizing: border-box;
}

.containerw .box-dep {
	padding: 20px;
	min-height: auto;
	display: block;
	background: var(--rsv-card-bg);
}

.containerw .box-dep.box-mapd {
	min-height: 380px;
}

/* ========== Inputs ========== */
.containerw .input-container {
	display: flex;
	width: 100%;
	margin-bottom: 16px;
	height: auto;
}

.containerw .icon {
	padding: 0 12px;
	background: var(--rsv-tab-inactive-bg);
	color: var(--rsv-primary);
	border: 1px solid var(--rsv-input-border);
	border-right: none;
	border-radius: 8px 0 0 8px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	flex-shrink: 0;
}
.containerw .rsv-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}
.containerw .icon .rsv-icon {
	width: 18px;
	height: 18px;
}
.containerw .passagers .rsv-icon { color: var(--rsv-primary); margin-right: 6px; }
.containerw .number-e .rsv-icon { color: var(--rsv-muted-text); }

.containerw .input-field,
.containerw input[type="text"],
.containerw input[type="email"],
.containerw input[type="password"],
.containerw input[type="number"],
.containerw select,
.containerw textarea {
	border: 1px solid var(--rsv-input-border) !important;
	background: var(--rsv-input-bg) !important;
	color: var(--rsv-input-text) !important;
	width: 100% !important;
	padding: 10px 12px !important;
	outline: none;
	border-radius: 8px;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.4;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.containerw .input-container .input-field {
	border-radius: 0 8px 8px 0 !important;
}

.containerw .input-field:focus,
.containerw input:focus,
.containerw select:focus,
.containerw textarea:focus {
	border-color: var(--rsv-primary) !important;
	box-shadow: 0 0 0 3px rgba(162, 126, 62, 0.15) !important;
}

.containerw .title-d span {
	font-size: 14px;
	font-weight: 600;
	color: var(--rsv-text);
	padding-bottom: 8px;
	display: inline-block;
}

/* ========== Modern options layout (rsv-options) ========== */
.containerw .rsv-options {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}
.containerw .rsv-row {
	display: flex;
	gap: 12px;
	width: 100%;
	flex-wrap: wrap;
}
.containerw .rsv-row-2 .rsv-field { flex: 1 1 0; min-width: 0; }
.containerw .rsv-row-date {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 12px;
}
.containerw .rsv-row-flight .rsv-field-full { flex: 1 1 100%; }

.containerw .rsv-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.containerw .rsv-field-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--rsv-muted-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}
.containerw .rsv-select,
.containerw .rsv-input {
	width: 100% !important;
	height: 44px;
	padding: 10px 12px !important;
	border: 1px solid var(--rsv-input-border) !important;
	background: var(--rsv-input-bg) !important;
	color: var(--rsv-input-text) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 400;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: none !important;
	appearance: auto;
}
.containerw .rsv-select:focus,
.containerw .rsv-input:focus {
	border-color: var(--rsv-primary) !important;
	box-shadow: 0 0 0 3px rgba(162, 126, 62, 0.15) !important;
}

/* ========== Trip type radio cards ========== */
.containerw .rsv-trip-type {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.containerw .rsv-radio-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 16px;
	background: var(--rsv-card-bg);
	border: 2px solid var(--rsv-input-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
}
.containerw .rsv-radio-card:hover {
	border-color: var(--rsv-primary);
	background: rgba(162, 126, 62, 0.04);
}
.containerw .rsv-radio-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	top: 0;
	left: 0;
	cursor: pointer;
}
.containerw .rsv-radio-card-content {
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}
.containerw .rsv-radio-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--rsv-text);
}
.containerw .rsv-radio-card:has(input:checked) {
	border-color: var(--rsv-primary);
	background: rgba(162, 126, 62, 0.08);
	box-shadow: 0 0 0 3px rgba(162, 126, 62, 0.12);
}
.containerw .rsv-radio-card:has(input:checked) .rsv-radio-card-title {
	color: var(--rsv-primary);
}

/* ========== Section divider (Retour) ========== */
.containerw .rsv-section-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--rsv-muted-text);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 4px 0 -4px;
}
.containerw .rsv-section-divider::before,
.containerw .rsv-section-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rsv-border);
}

/* ========== Mobile: stack ========== */
@media (max-width: 600px) {
	.containerw .rsv-row-date {
		grid-template-columns: 1fr 1fr;
	}
	.containerw .rsv-row-date .rsv-field-date {
		grid-column: 1 / -1;
	}
}

/* ========== Legacy compatibility ========== */
.containerw .dates-labels {
	font-weight: 600;
	font-size: 12px;
	float: left;
	margin-bottom: 12px;
}

.containerw .dates-labels label {
	font-weight: 500;
	margin-bottom: 6px;
	display: inline-block;
	color: var(--rsv-muted-text);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.containerw input[type="radio"]:not(:disabled):hover,
.containerw input[type="checkbox"]:not(:disabled):hover {
	border-color: var(--rsv-primary) !important;
}

.containerw input[type="radio"],
.containerw input[type="checkbox"] {
	height: 18px !important;
	width: 18px !important;
	margin: 4px 5px 5px 0;
	border: 1px solid var(--rsv-input-border) !important;
	background: var(--rsv-input-bg) !important;
	border-radius: 50% !important;
	-webkit-appearance: radio;
	appearance: radio;
	box-shadow: none;
	accent-color: var(--rsv-primary);
}

.containerw .dates-labels select {
	height: 40px;
	width: 100%;
	min-width: 60px;
	border: 1px solid var(--rsv-input-border) !important;
	background: var(--rsv-input-bg) !important;
	border-radius: 8px !important;
	margin: 4px 0;
}
.containerw .dates-labels select:not([multiple]) {
	-webkit-appearance: menulist;
	background: var(--rsv-input-bg) no-repeat;
	padding: 8px 10px;
}

.containerw .number-left {
	float: left;
	width: 48%;
	margin-right: 4%;
}
.containerw .number-left:last-child { margin-right: 0; }

.containerw .cleared {
	clear: both;
	height: 0;
	font-size: 0;
	line-height: 0;
}

.containerw .number-left label {
	font-size: 12px;
	font-weight: 500;
	color: var(--rsv-muted-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.containerw .second-maint {
	margin: 24px 0 0;
	display: block;
	width: 100%;
}

/* ========== Buttons ========== */
.containerw .sub-btn {
	background: var(--rsv-primary);
	padding: 14px 24px;
	float: right;
	width: auto;
	min-width: 200px;
	margin: 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	text-align: center !important;
	display: inline-block;
	box-shadow: 0 2px 4px rgba(162, 126, 62, 0.2);
}

.containerw .sub-btn a {
	color: var(--rsv-primary-text) !important;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	display: block;
	margin: 0 auto;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.containerw .sub-btn:hover {
	background: var(--rsv-primary-hover);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.containerw .sub-btn .single_add_to_cart_button,
.containerw .single_add_to_cart_button {
	background: var(--rsv-primary) !important;
	color: var(--rsv-primary-text) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
}

.containerw .single_add_to_cart_button:hover {
	background: var(--rsv-primary-hover) !important;
}

/* ========== Summary block ========== */
.containerw .gare {
	border-bottom: 1px solid var(--rsv-border);
	padding: 10px 0;
	line-height: 1.5;
	font-size: 14px;
}

.containerw .gare label {
	font-weight: 500;
	color: var(--rsv-muted-text);
	margin-right: 4px;
}

.containerw .heure p {
	padding: 12px 0 4px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--rsv-muted-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.containerw .heure span {
	margin-right: 8px;
	font-size: 14px;
}

.containerw .heure-part {
	margin: 16px 0;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.containerw .heure-l p {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

.containerw .passagers span { margin: 0 8px 0 6px; }
.containerw .heure-l { flex: 1 1 50%; min-width: 200px; }
.containerw .passagers {
	margin: 6px 0;
	line-height: 1.4;
	font-size: 14px;
}

.containerw .heure { line-height: 1.4; }

/* ========== Vehicle section (modern grid) ========== */
.containerw .rsv-vehicle-section {
	flex: 1 1 100%;
	width: 100%;
	margin-top: 8px;
	padding: 0;
	background: var(--rsv-card-bg);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}
.containerw .rsv-section-title {
	background: var(--rsv-heading-bg);
	color: var(--rsv-heading-text);
	font-size: var(--rsv-fs-card);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 18px 20px;
	margin: 0;
	border-radius: 0;
	line-height: 1.4;
	min-height: 56px;
	box-sizing: border-box;
	display: block;
}
.containerw .rsv-vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	padding: 20px;
}
.containerw .rsv-vehicle-card {
	background: var(--rsv-card-bg);
	border: 1px solid var(--rsv-border);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.containerw .rsv-vehicle-card:hover {
	border-color: var(--rsv-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.containerw .rsv-vehicle-image {
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.containerw .rsv-vehicle-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.containerw .rsv-vehicle-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rsv-muted-text);
	opacity: 0.4;
}
.containerw .rsv-vehicle-body {
	padding: 16px 18px 8px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.containerw .rsv-vehicle-name {
	font-size: var(--rsv-fs-title);
	font-weight: 700;
	color: var(--rsv-text);
	margin: 0;
	line-height: 1.3;
}
.containerw .rsv-vehicle-specs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.containerw .rsv-spec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--rsv-tab-inactive-bg);
	color: var(--rsv-text);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: var(--rsv-fs-small);
	font-weight: 600;
	line-height: 1.4;
}
.containerw .rsv-spec .rsv-icon { color: var(--rsv-primary); }
.containerw .rsv-vehicle-desc {
	font-size: var(--rsv-fs-small);
	line-height: 1.5;
	color: var(--rsv-muted-text);
	margin: 0;
}
.containerw .rsv-vehicle-desc p { margin: 0; }
/* ============================================================
 * Vehicle-card footer — stacked vertically so each price row uses
 * the full card width. The "Réserver" button is full-width below.
 * ============================================================ */
.containerw .rsv-vehicle-footer {
	padding: 14px 18px 18px;
	border-top: 1px solid var(--rsv-border);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	background: rgba(243, 244, 246, 0.4);
}
.containerw .rsv-vehicle-pricing {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	min-width: 0;
}
.containerw .rsv-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--rsv-muted-text);
	width: 100%;
}
.containerw .rsv-price-row .rsv-price-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 1.3;
}
.containerw .rsv-price-row .rsv-price-value {
	font-weight: 700;
	color: var(--rsv-text);
	white-space: nowrap;
	flex: 0 0 auto;
	text-align: right;
}
.containerw .rsv-price-total .rsv-price-label { color: var(--rsv-primary); }
.containerw .rsv-price-total .rsv-price-value {
	color: var(--rsv-primary);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
}
.containerw .rsv-price-deposit .rsv-price-value {
	color: #047857;
	font-size: 15px;
	font-weight: 700;
}
.containerw .rsv-price-balance .rsv-price-value {
	color: var(--rsv-muted-text);
	font-size: 14px;
	font-weight: 600;
}
.containerw .rsv-price-currency {
	font-size: 12px;
	font-weight: 600;
	margin-left: 2px;
}
.containerw .rsv-price-total .rsv-price-currency { font-size: 14px; }

/* In the vehicle card, "Réserver" button is full width. */
.containerw .rsv-vehicle-card .rsv-btn-primary {
	width: 100%;
	padding: 12px 18px;
	font-size: 14px;
}

/* ========== Step-3 payment-mode choice (Acompte vs Totalité) ========== */
.containerw .rsv-payment-choice {
	margin: 16px 0 4px;
	padding: 14px;
	background: #fafafa;
	border: 1px solid var(--rsv-border);
	border-radius: 10px;
}
.containerw .rsv-payment-choice-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--rsv-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}
.containerw .rsv-payment-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.containerw .rsv-payment-option {
	position: relative;
	display: block;
	padding: 14px 14px 14px 14px;
	background: var(--rsv-card-bg);
	border: 2px solid var(--rsv-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.15s ease;
	overflow: hidden;
}
.containerw .rsv-payment-option:hover {
	border-color: var(--rsv-primary);
	background: rgba(162, 126, 62, 0.03);
}
.containerw .rsv-payment-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	top: 0;
	left: 0;
	cursor: pointer;
}
.containerw .rsv-payment-option-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
.containerw .rsv-payment-option-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.containerw .rsv-payment-option-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--rsv-text);
}
.containerw .rsv-payment-option-amount {
	font-size: 16px;
	font-weight: 800;
	color: var(--rsv-primary);
	white-space: nowrap;
}
.containerw .rsv-payment-option-desc {
	font-size: 12px;
	line-height: 1.5;
	color: var(--rsv-muted-text);
}
.containerw .rsv-payment-option-desc small {
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--rsv-text);
}
.containerw .rsv-payment-option.is-active,
.containerw .rsv-payment-option:has(input:checked) {
	border-color: var(--rsv-primary);
	background: rgba(162, 126, 62, 0.06);
	box-shadow: 0 0 0 3px rgba(162, 126, 62, 0.12);
}
.containerw .rsv-payment-option[data-mode='deposit'] .rsv-payment-option-amount { color: #047857; }
.containerw .rsv-payment-option.is-active[data-mode='deposit'],
.containerw .rsv-payment-option[data-mode='deposit']:has(input:checked) {
	border-color: #047857;
	background: rgba(4, 120, 87, 0.05);
	box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.10);
}

@media (max-width: 600px) {
	.containerw .rsv-payment-options { grid-template-columns: 1fr; }
}

/* ========== Step-3 vehicle summary box (.vec-box on the selected vehicle) ==========
 * When the breakdown (Total / Acompte / Solde) is shown, .vec-box receives the
 * class `.has-breakdown` and switches to a vertical stack so each line gets
 * the full box width — no more truncated "Solde sur place 782.0".
 */
.containerw .vec-box.has-breakdown {
	display: block;
}
.containerw .vec-box.has-breakdown .van-l,
.containerw .vec-box.has-breakdown .van-r {
	width: 100% !important;
	float: none !important;
	border-right: none !important;
	box-sizing: border-box;
	padding: 12px 16px;
}
.containerw .vec-box.has-breakdown .van-l {
	border-bottom: 1px solid var(--rsv-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.containerw .vec-box.has-breakdown .van-l .product_name {
	font-size: 16px;
	font-weight: 700;
	color: var(--rsv-text);
	margin: 0;
}
.containerw .vec-box.has-breakdown .van-l a {
	margin-top: 0;
}
.containerw .vec-box.has-breakdown .van-r {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0;
	background: rgba(243, 244, 246, 0.4);
}

/* Summary lines */
.containerw .van-r .rsv-summary-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.containerw .van-r .rsv-summary-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	color: var(--rsv-muted-text);
	border-bottom: 1px dashed var(--rsv-border);
	width: 100%;
	text-align: left;
}
.containerw .van-r .rsv-summary-line > span:first-child {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--rsv-fs-micro);
	color: var(--rsv-muted-text);
	flex: 0 1 auto;
	min-width: 0;
	line-height: 1.3;
}
.containerw .van-r .rsv-summary-line strong {
	color: var(--rsv-text);
	font-size: var(--rsv-fs-body);
	font-weight: 700;
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}
.containerw .van-r .rsv-summary-line:last-child { border-bottom: none; }
.containerw .van-r .rsv-summary-pay strong     { color: #047857;            font-size: var(--rsv-fs-strong); }
.containerw .van-r .rsv-summary-balance strong { color: var(--rsv-muted-text); }
/* Total in the step-3 summary box gets the hero size */
.containerw .van-r .rsv-summary-wrap .rsv-summary-line:first-child strong {
	color: var(--rsv-primary);
	font-size: var(--rsv-fs-hero-lg);
	font-weight: 800;
	line-height: 1.1;
}
.containerw .rsv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.containerw .rsv-btn-primary {
	background: var(--rsv-primary);
	color: var(--rsv-primary-text);
	box-shadow: 0 2px 4px rgba(162, 126, 62, 0.25);
}
.containerw .rsv-btn-primary:hover {
	background: var(--rsv-primary-hover);
	color: var(--rsv-primary-text);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(162, 126, 62, 0.35);
}
.containerw .rsv-btn .rsv-icon { color: currentColor; }

.containerw .rsv-empty-state {
	padding: 40px 20px;
	text-align: center;
	color: var(--rsv-muted-text);
	font-size: 14px;
}
.containerw .rsv-empty-state p { margin: 0 0 8px; }
.containerw .rsv-empty-admin a {
	color: var(--rsv-primary);
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.containerw .rsv-vehicle-grid {
		grid-template-columns: 1fr;
	}
}

/* Legacy .car-part / .car-f / .car-s / .price-pool styles intentionally removed —
 * the new .rsv-vehicle-card markup above replaces them. The `.car-part` class
 * is kept on the new article element only for JS compatibility (hide-on-select). */

/* ========== Vehicle summary box (right column) ========== */
.containerw .vec-box {
	border: 1px solid var(--rsv-border);
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 16px;
}
.containerw .box-dep p { font-size: 14px; margin: 0; }
.containerw .preom p { font-size: 13px; color: var(--rsv-muted-text); margin: 0 0 4px; }

.containerw .vec-box h3 {
	background: var(--rsv-tab-inactive-bg);
	color: var(--rsv-text);
	padding: 12px 16px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.containerw .vec-box .van-l,
.containerw .vec-box .van-r {
	padding: 14px 16px;
}

.containerw .vec-box .van-l,
.containerw .vec-box .van-r {
	box-sizing: border-box;
}
.containerw .van-l {
	width: 60%;
	float: left;
	border-right: 1px solid var(--rsv-border);
}
.containerw .van-r {
	width: 40%;
	float: left;
	text-align: center;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}
.containerw .van-r span {
	color: var(--rsv-primary);
	font-size: 26px;
	font-weight: 700;
	display: inline-block;
	margin: 0;
	line-height: 1.2;
}
.containerw .van-r span:first-child {
	font-size: 18px;
	font-weight: 600;
}

.containerw .van-l a {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 14px;
	color: var(--rsv-primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--rsv-primary);
	border-radius: 6px;
	transition: all 0.2s ease;
}
.containerw .van-l a:hover {
	background: var(--rsv-primary);
	color: var(--rsv-primary-text);
}

/* ========== Tabs ========== */
.containerw .tab {
	overflow: hidden;
	border-radius: 8px;
	background: var(--rsv-tab-inactive-bg);
	margin: 16px 0;
	display: flex;
}

.containerw .tab button {
	background: var(--rsv-tab-inactive-bg);
	color: var(--rsv-tab-inactive-text);
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: background 0.2s ease, color 0.2s ease;
	font-size: 14px;
	font-weight: 600;
	flex: 1;
}

.containerw .tab button:hover {
	background: var(--rsv-primary);
	color: var(--rsv-primary-text);
}

.containerw .tab button.active {
	background: var(--rsv-tab-active-bg);
	color: var(--rsv-tab-active-text);
}

.containerw .tabcontent {
	display: none;
	border-top: none;
}

/* ========== Form fields in account section ========== */
.containerw .preom,
.containerw .preom-r {
	float: left;
	width: calc(50% - 8px);
}
.containerw .preom-r { margin-left: 16px; }

.containerw .preom input,
.containerw .preom-r input {
	border: 1px solid var(--rsv-input-border);
	border-radius: 8px;
	height: 40px;
	width: 100%;
	padding: 0 12px;
	font-size: 14px;
	background: var(--rsv-input-bg);
	color: var(--rsv-input-text);
}

.containerw .main-p {
	display: flex;
	width: 100%;
	gap: 0;
	margin-bottom: 12px;
}

.containerw .com-t { width: 100%; }
.containerw .com-t p { font-size: 13px; color: var(--rsv-muted-text); margin: 0 0 4px; }
.containerw .com-t textarea {
	border: 1px solid var(--rsv-input-border);
	border-radius: 8px;
	height: 80px;
	width: 100%;
	padding: 10px 12px;
	background: var(--rsv-input-bg);
	color: var(--rsv-input-text);
}

.containerw .distanceBlock span { font-size: 14px; }

/* ========== Validation messages ========== */
.containerw .validation_message_1,
.containerw .user_validation {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	width: 100%;
	background: var(--rsv-error-bg);
	color: var(--rsv-error-text);
	margin-bottom: 12px;
	display: none;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--rsv-error-text);
}

.containerw .user_validation { margin-top: 16px; margin-bottom: 0; }

/* ========== Visibility toggles ==========
 * NOTE: .part1 / .part2 are classes ON the .containerw element itself
 * (e.g. <div class="containerw part2">), so the selector is `.containerw.part2`
 * (no space). A descendant selector here would never match.
 */
.containerw.part1 { display: flex; }
.containerw.part2 { display: none; }
.containerw .twoWay { display: none; }
.containerw .secondBox { display: none; }
.containerw .final_submit,
.containerw #final_submit { display: none; text-align: center; }
.containerw .user_submit { display: none; }
.containerw .price-pool br { display: none; }
.containerw .returnBlock { display: none; }

/* ========== Helpers ========== */
.containerw #wayoptions input[type="radio"] {
	-webkit-appearance: radio;
	box-shadow: none;
}
.containerw a#update_map_:hover,
.containerw #reserve_booking_btn:hover { text-decoration: none; }
.containerw #one-way-date-input input#depart_date { width: 100% !important; }

.containerw .depart_date_time,
.containerw .distance_calculation,
.containerw .return_date_time { float: right; font-weight: 600; }
.containerw .distance_calculation { margin-right: 0; }

.containerw #map {
	width: 100%;
	height: 360px;
	border-radius: 8px;
	overflow: hidden;
}

/* ========== Responsive breakpoints ========== */

/* Tablet — 1 column, smaller hero numbers */
@media (max-width: 900px) {
	.containerw {
		padding: 16px 12px;
		gap: 16px;
	}
	.containerw .left-box { flex: 1 1 100%; }
	.containerw .van-l, .containerw .van-r {
		width: 100%;
		float: none;
		border-right: none;
	}
	.containerw .van-l { border-bottom: 1px solid var(--rsv-border); }
	.containerw .preom, .containerw .preom-r {
		width: 100%;
		margin-left: 0;
		margin-bottom: 8px;
	}
	.containerw .main-p { flex-direction: column; gap: 8px; }
	.containerw .sub-btn {
		width: calc(100% - 32px);
		float: none;
		display: block;
	}
	.containerw .rsv-vehicle-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		padding: 14px;
		gap: 12px;
	}
}

/* Small tablet / large phone — collapse stepper labels, shrink prices */
@media (max-width: 700px) {
	.containerw {
		--rsv-fs-hero:    20px;
		--rsv-fs-hero-lg: 22px;
		--rsv-fs-card:    15px;
	}
	.containerw .vote-t h1,
	.containerw .rsv-section-title {
		font-size: var(--rsv-fs-card);
		min-height: 52px;
		padding: 16px 16px;
	}
	.containerw .box-dep { padding: 16px; }
	.containerw .rsv-vehicle-grid { grid-template-columns: 1fr; }
	.containerw .rsv-vehicle-image { height: 180px; }
}

/* Phone — vertical stepper, tighter spacing */
@media (max-width: 480px) {
	.containerw {
		padding: 12px 8px;
		gap: 12px;
		--rsv-fs-title: 16px;
		--rsv-fs-hero: 18px;
		--rsv-fs-hero-lg: 20px;
	}
	.containerw .vote-t h1,
	.containerw .rsv-section-title {
		padding: 14px 14px;
		min-height: 48px;
	}
	.containerw .box-dep { padding: 14px; }
	.containerw .rsv-options { gap: 14px; }
	.containerw .rsv-trip-type { grid-template-columns: 1fr; }
	.containerw .rsv-row-date  { grid-template-columns: 1fr 1fr; }
	.containerw .rsv-row-date .rsv-field-date { grid-column: 1 / -1; }
	.containerw .rsv-vehicle-body { padding: 14px 14px 6px; }
	.containerw .rsv-vehicle-footer { padding: 12px 14px 14px; }

	/* Stepper labels hidden on phone, keep only numbers */
	.rsv-stepper { gap: 4px; padding: 10px 8px; }
	.rsv-step { padding: 6px 8px; }
	.rsv-step-label { display: none; }
	.rsv-step.active .rsv-step-label { display: inline; font-size: 11px; }
	.rsv-step-divider { flex: 1; }

	/* Vehicle summary block in step 3 — already vertical via has-breakdown */
	.containerw .vec-box.has-breakdown .van-l {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.containerw .vec-box.has-breakdown .van-l a { width: 100%; text-align: center; }

	/* Payment options stack on small screens */
	.containerw .rsv-payment-options { grid-template-columns: 1fr; }

	.containerw .preom input,
	.containerw .preom-r input { height: 44px; }
}

/* WooCommerce specific overrides used in original plugin */
input#payment_method_bacs,
input#payment_method_ppec_paypal {
	-webkit-appearance: radio;
	box-shadow: none;
}

#primary { width: 100% !important; }
#site-sidebar { display: none; }

/* ============================================================
 * jQuery UI Datepicker — full restyle to match modern design
 * Overrides the default Smoothness theme.
 * ============================================================ */
.ui-datepicker {
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
	padding: 14px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 13px !important;
	width: 320px !important;
	color: #1f2937 !important;
	z-index: 99999 !important;
}

/* Header bar (month/year + nav arrows) */
.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 4px 0 12px !important;
	position: relative !important;
}
.ui-datepicker .ui-datepicker-title {
	display: flex !important;
	gap: 8px !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 !important;
	line-height: 1 !important;
}
.ui-datepicker .ui-datepicker-title select {
	height: 34px !important;
	min-width: 110px !important;
	width: auto !important;
	padding: 4px 28px 4px 10px !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 10px 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #1f2937 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	text-overflow: ellipsis;
	display: inline-block !important;
}
.ui-datepicker .ui-datepicker-title select:hover,
.ui-datepicker .ui-datepicker-title select:focus {
	border-color: var(--rsv-primary, #a27e3e) !important;
	outline: none !important;
}
.ui-datepicker .ui-datepicker-month { min-width: 130px !important; }
.ui-datepicker .ui-datepicker-year  { min-width: 90px  !important; }

/* Prev / Next arrows (round buttons) */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute !important;
	top: 4px !important;
	width: 32px !important;
	height: 32px !important;
	background: #f3f4f6 !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	overflow: hidden;
}
.ui-datepicker .ui-datepicker-prev { left: 4px !important; }
.ui-datepicker .ui-datepicker-next { right: 4px !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: var(--rsv-primary, #a27e3e) !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	background: none !important;
	text-indent: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 0 !important;
}
.ui-datepicker .ui-datepicker-prev:hover .ui-icon,
.ui-datepicker .ui-datepicker-next:hover .ui-icon {
	color: #fff !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon::after { content: "‹"; font-size: 22px; font-weight: 600; line-height: 1; }
.ui-datepicker .ui-datepicker-next .ui-icon::after { content: "›"; font-size: 22px; font-weight: 600; line-height: 1; }

/* Calendar grid */
.ui-datepicker table {
	border-collapse: separate !important;
	border-spacing: 2px !important;
	margin: 4px 0 0 !important;
	width: 100% !important;
}
.ui-datepicker th {
	padding: 6px 0 !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	color: #9ca3af !important;
	letter-spacing: 0.05em !important;
	border: none !important;
	background: transparent !important;
}
.ui-datepicker td {
	padding: 0 !important;
	border: none !important;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 36px !important;
	width: 36px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	color: #1f2937 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.12s ease !important;
}
.ui-datepicker td a:hover {
	background: rgba(162, 126, 62, 0.12) !important;
	color: var(--rsv-primary, #a27e3e) !important;
}

/* Today */
.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td a.ui-state-highlight {
	background: rgba(162, 126, 62, 0.15) !important;
	color: var(--rsv-primary, #a27e3e) !important;
	font-weight: 700 !important;
	border: 1px dashed var(--rsv-primary, #a27e3e) !important;
}

/* Selected / hovered */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-hover {
	background: var(--rsv-primary, #a27e3e) !important;
	color: #fff !important;
	border: none !important;
}

/* Disabled (other-month) days */
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-datepicker-other-month span {
	color: #d1d5db !important;
	background: transparent !important;
	cursor: default !important;
}

/* Week column (if enabled) */
.ui-datepicker .ui-datepicker-week-col {
	color: #9ca3af !important;
	font-weight: 600 !important;
	font-size: 11px !important;
}