/*
 * On-demand reservation form — professional styles
 * matching the design of the main paid reservation form.
 * Used by the [reservation_on_demand] shortcode.
 */

.rsv-od {
	/* Inherit main-form palette when available, with sensible fallbacks. */
	--rsv-od-primary:        var(--rsv-primary, #a27e3e);
	--rsv-od-primary-hover:  var(--rsv-primary-hover, #8a6a30);
	--rsv-od-primary-text:   var(--rsv-primary-text, #ffffff);
	--rsv-od-heading-bg:     var(--rsv-heading-bg, #0d3323);
	--rsv-od-heading-text:   var(--rsv-heading-text, #ffffff);
	--rsv-od-text:           var(--rsv-text, #1f2937);
	--rsv-od-muted:          var(--rsv-muted-text, #6b7280);
	--rsv-od-border:         var(--rsv-border, #e5e7eb);
	--rsv-od-card-bg:        var(--rsv-card-bg, #ffffff);
	--rsv-od-body-bg:        var(--rsv-body-bg, #f7f8fa);
	--rsv-od-input-border:   var(--rsv-input-border, #d1d5db);
	--rsv-od-input-bg:       var(--rsv-input-bg, #ffffff);
	--rsv-od-tab-bg:         var(--rsv-tab-inactive-bg, #f3f4f6);
	--rsv-od-error:          #b91c1c;
	--rsv-od-success-bg:     #d1fae5;
	--rsv-od-success-text:   #064e3b;
	--rsv-od-badge-bg:       #fef3c7;
	--rsv-od-badge-text:     #78350f;

	/* Typography scale */
	--rsv-od-fs-micro:  11px;
	--rsv-od-fs-small:  13px;
	--rsv-od-fs-body:   14px;
	--rsv-od-fs-card:   16px;
	--rsv-od-fs-title:  17px;

	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: var(--rsv-od-fs-body);
	color: var(--rsv-od-text);
	line-height: 1.45;
	box-sizing: border-box;
}
.rsv-od *, .rsv-od *::before, .rsv-od *::after { box-sizing: border-box; }

/* ===== Intro / badge ===== */
.rsv-od-intro { margin-bottom: 22px; }
.rsv-od-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--rsv-od-badge-bg);
	color: var(--rsv-od-badge-text);
	border-radius: 999px;
	font-size: var(--rsv-od-fs-small);
	font-weight: 600;
	margin-bottom: 14px;
}
.rsv-od-badge::before {
	content: "⚡";
	font-size: 14px;
}
.rsv-od-intro-text {
	font-size: var(--rsv-od-fs-body);
	color: var(--rsv-od-muted);
	line-height: 1.6;
	margin: 0;
	max-width: 700px;
}

/* ===== Success / error ===== */
.rsv-od-success {
	background: var(--rsv-od-success-bg);
	color: var(--rsv-od-success-text);
	border: 1px solid var(--rsv-od-success-text);
	border-radius: 12px;
	padding: 28px 24px;
	font-size: 15px;
	line-height: 1.55;
	text-align: center;
	font-weight: 500;
}
.rsv-od-error {
	background: #fee2e2;
	color: var(--rsv-od-error);
	border: 1px solid var(--rsv-od-error);
	padding: 14px 16px;
	border-radius: 10px;
	font-size: var(--rsv-od-fs-body);
	font-weight: 500;
}

/* ===== Form layout ===== */
.rsv-od-form { display: flex; flex-direction: column; gap: 20px; }

.rsv-od-fieldset {
	background: var(--rsv-od-card-bg);
	border: 1px solid var(--rsv-od-border);
	border-radius: 12px;
	padding: 0;
	margin: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}
.rsv-od-fieldset legend {
	background: var(--rsv-od-primary);
	color: var(--rsv-od-primary-text);
	font-size: var(--rsv-od-fs-card);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 18px 22px;
	margin: 0;
	width: 100%;
	display: block;
	float: none;
	box-sizing: border-box;
	min-height: 56px;
	line-height: 1.3;
	text-transform: none;
}
/* Fieldset legend wraps awkwardly in some browsers — neutralize that */
.rsv-od-fieldset {
	display: block;
}
.rsv-od-fieldset > legend {
	float: left;
	width: 100%;
	margin: 0;
	padding: 18px 22px;
	border-radius: 0;
}
.rsv-od-fieldset > legend + * { clear: both; }
.rsv-od-fieldset-body {
	padding: 22px;
}

/* Wrap children of fieldset (other than legend) in a body container at runtime
 * via CSS — actually we use padding on the fieldset itself. Simpler:
 */
.rsv-od-fieldset {
	padding: 0 0 22px;
}
.rsv-od-fieldset > legend ~ * {
	padding-left: 22px;
	padding-right: 22px;
}
.rsv-od-fieldset > legend ~ *:first-of-type { padding-top: 22px; }

/* ===== Vehicle grid ===== */
.rsv-od-vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.rsv-od-vehicle {
	position: relative;
	display: block;
	background: var(--rsv-od-card-bg);
	border: 2px solid var(--rsv-od-border);
	border-radius: 12px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.15s ease;
}
.rsv-od-vehicle:hover {
	border-color: var(--rsv-od-primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Hide the radio visually but keep it focusable & clickable
 * (no pointer-events:none — that was breaking click-via-label on some browsers).
 */
.rsv-od-vehicle input[type=radio] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.rsv-od-vehicle.is-active,
.rsv-od-vehicle:has(input:checked) {
	border-color: var(--rsv-od-primary);
	box-shadow: 0 0 0 3px rgba(162, 126, 62, 0.18), 0 8px 20px rgba(0, 0, 0, 0.06);
	background: rgba(162, 126, 62, 0.04);
}
.rsv-od-vehicle.is-active::after,
.rsv-od-vehicle:has(input:checked)::after {
	content: "✓";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	background: var(--rsv-od-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(162, 126, 62, 0.4);
}
.rsv-od-vehicle-body { display: flex; flex-direction: column; }
.rsv-od-vehicle-img {
	width: 100%;
	height: 160px;
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
	background-size: cover;
	background-position: center;
	display: block;
}
.rsv-od-vehicle-noimg::after {
	content: "🚗";
	font-size: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0.4;
}
.rsv-od-vehicle-info {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rsv-od-vehicle-name {
	font-size: var(--rsv-od-fs-title);
	font-weight: 700;
	color: var(--rsv-od-text);
	line-height: 1.3;
}
.rsv-od-vehicle-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.rsv-od-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--rsv-od-tab-bg);
	color: var(--rsv-od-text);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}
.rsv-od-chip-price {
	background: rgba(162, 126, 62, 0.12);
	color: var(--rsv-od-primary);
}
.rsv-od-vehicle-desc {
	font-size: 12px;
	line-height: 1.5;
	color: var(--rsv-od-muted);
}

/* ===== Form rows & fields ===== */
.rsv-od-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}
.rsv-od-row:last-child { margin-bottom: 0; }
.rsv-od-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rsv-od-field-full  { grid-column: 1 / -1; }
.rsv-od-field label {
	font-size: var(--rsv-od-fs-micro);
	font-weight: 700;
	color: var(--rsv-od-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
}

/* Input with icon prefix (matches the main form's .input-container) */
.rsv-od-input-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
}
.rsv-od-input-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 0 12px;
	background: var(--rsv-od-tab-bg);
	color: var(--rsv-od-primary);
	border: 1px solid var(--rsv-od-input-border);
	border-right: none;
	border-radius: 8px 0 0 8px;
}
.rsv-od-input-wrap input,
.rsv-od-input-wrap select {
	flex: 1;
	min-width: 0;
	border-radius: 0 8px 8px 0 !important;
}
.rsv-od-field input,
.rsv-od-field select,
.rsv-od-field textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: var(--rsv-od-fs-body);
	border: 1px solid var(--rsv-od-input-border);
	border-radius: 8px;
	background: var(--rsv-od-input-bg);
	color: var(--rsv-od-text);
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	height: 44px;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}
.rsv-od-field input[type=number]::-webkit-inner-spin-button,
.rsv-od-field input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: auto;
}
.rsv-od-field textarea {
	resize: vertical;
	min-height: 90px;
	height: auto;
}
.rsv-od-field input:focus,
.rsv-od-field select:focus,
.rsv-od-field textarea:focus,
.rsv-od-input-wrap:focus-within .rsv-od-input-icon {
	border-color: var(--rsv-od-primary);
}
.rsv-od-field input:focus,
.rsv-od-field select:focus,
.rsv-od-field textarea:focus {
	box-shadow: 0 0 0 3px rgba(162, 126, 62, 0.15);
}

/* Invalid-state highlight (after client-side validation fails) */
.rsv-od-field.is-invalid label { color: var(--rsv-od-error); }
.rsv-od-field.is-invalid input,
.rsv-od-field.is-invalid textarea,
.rsv-od-field.is-invalid .rsv-od-input-icon {
	border-color: var(--rsv-od-error) !important;
}
.rsv-od-field.is-invalid input:focus,
.rsv-od-field.is-invalid textarea:focus {
	box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18) !important;
}
.rsv-od-fieldset.is-invalid legend {
	background: var(--rsv-od-error) !important;
}
.rsv-od-fieldset.is-invalid legend::after {
	content: " — " attr(data-invalid);
}

/* Honeypot */
.rsv-od-honey {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Empty state */
.rsv-od-empty {
	background: #fff7e6;
	border-left: 4px solid #d97706;
	padding: 16px 20px;
	border-radius: 8px;
	color: #78350f;
	font-size: var(--rsv-od-fs-body);
	margin: 0 22px 22px;
}
.rsv-od-link {
	color: var(--rsv-od-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* Submit */
.rsv-od-submit-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.rsv-od-submit {
	background: var(--rsv-od-primary);
	color: var(--rsv-od-primary-text);
	border: none;
	padding: 16px 32px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(162, 126, 62, 0.3);
	transition: all 0.15s ease;
	letter-spacing: 0.02em;
}
.rsv-od-submit:hover {
	background: var(--rsv-od-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(162, 126, 62, 0.4);
}
.rsv-od-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.rsv-od-disclaimer {
	font-size: 12px;
	color: var(--rsv-od-muted);
	font-style: italic;
}

/* Google Places autocomplete dropdown — match form palette + force above theme overlays.
 * Note: .pac-container is appended directly to <body> by Google, so styles must be global. */
.pac-container {
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
	border: 1px solid #e5e7eb !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	margin-top: 4px;
	padding: 6px 0;
	z-index: 999999 !important;
	background: #fff !important;
}
.pac-item {
	padding: 10px 14px;
	font-size: 13px;
	cursor: pointer;
	border-top: 1px solid #f1f3f5;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover { background: rgba(162, 126, 62, 0.08); }
.pac-item-query { font-weight: 600; color: var(--rsv-od-text); font-size: 13px; }
.pac-logo::after { display: none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
	.rsv-od { padding: 16px 12px; }
	.rsv-od-fieldset { padding-bottom: 18px; }
	.rsv-od-fieldset > legend { padding: 16px 18px; min-height: 52px; }
	.rsv-od-fieldset > legend ~ *:first-of-type { padding-top: 18px; }
	.rsv-od-fieldset > legend ~ * { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 600px) {
	.rsv-od { padding: 12px 8px; }
	.rsv-od-vehicle-grid { grid-template-columns: 1fr; }
	.rsv-od-row { grid-template-columns: 1fr; gap: 14px; }
	.rsv-od-submit { width: 100%; padding: 14px 24px; }
	.rsv-od-submit-row { flex-direction: column; align-items: stretch; }
	.rsv-od-fieldset > legend { padding: 14px 16px; min-height: 48px; font-size: 15px; }
	.rsv-od-fieldset > legend ~ *:first-of-type { padding-top: 16px; }
	.rsv-od-fieldset > legend ~ * { padding-left: 16px; padding-right: 16px; }
}