/**
 * Styles für den Wohnwagen-Buchungsassistenten.
 * Orientiert sich an der ruhigen, typografiebetonten Optik von Twenty Twenty-Five:
 * viel Weißraum, dezente Rahmen, zurückhaltende Akzentfarbe.
 */

/* Deaktiviert das browsereigene "Scroll Anchoring" für den gesamten Assistenten. Dieses
   Verhalten versucht normalerweise, die visuelle Position von Inhalten stabil zu halten, wenn
   sich Inhalte in der Nähe der sichtbaren Fläche in ihrer Höhe ändern (z. B. asynchron
   nachladende Bilder) – wählt der Browser dafür aber ein Element als neuen "Anker" aus, das
   gerade durch ein Neuzeichnen ersetzt wurde (z. B. beim Monatswechsel im Kalender, wo sich die
   Anzahl der Wochenreihen je nach Monat ändert), kann er die Seite dabei ungewollt spürbar
   verschieben. Für einen in sich geschlossenen, per JavaScript dynamisch aktualisierten
   Assistenten wie diesen ist das browsereigene Anchoring nicht hilfreich und wird daher bewusst
   vollständig abgeschaltet – die Scrollposition bleibt dadurch bei jeder internen Aktualisierung
   (Monatswechsel, Zeitraum-Auswahl usw.) garantiert unverändert.
 */
.wv-wizard,
.wv-wizard * {
	overflow-anchor: none;
}

.wv-wizard {
	--wv-color-text: var(--wp--preset--color--contrast, #1a1a1a);
	--wv-color-bg: var(--wp--preset--color--base, #ffffff);
	--wv-color-muted: var(--wp--preset--color--contrast-2, #6b6b6b);
	--wv-color-border: #dedcd7;
	--wv-color-accent: #16324f;
	--wv-color-accent-soft: #eef2f6;
	--wv-color-accent-contrast: #ffffff;
	--wv-color-success: #2fa84f;
	--wv-color-error: #c0392b;
	--wv-radius: 10px;
	font-family: var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif);
	color: var(--wv-color-text);
	max-width: 760px;
	margin: 0 auto;
	background: var(--wv-color-bg);
	scroll-margin-top: 20px; /* Sicherheitsabstand für scrollIntoView(), z. B. wegen fixierter Theme-Header. */
}

.wv-wizard * {
	box-sizing: border-box;
}

.wv-progress__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	gap: 0.25rem;
	font-size: 0.8rem;
	border-bottom: 1px solid var(--wv-color-border);
	padding-bottom: 0.75rem;
}

.wv-progress__item {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	color: var(--wv-color-muted);
	background: transparent;
}

.wv-progress__item.is-active {
	background: var(--wv-color-accent);
	color: var(--wv-color-accent-contrast);
}

.wv-progress__item.is-done {
	color: var(--wv-color-success);
	padding: 0;
}

.wv-progress__link {
	display: block;
	width: 100%;
	padding: 0.3rem 0.7rem;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.wv-progress__link:hover,
.wv-progress__link:focus-visible {
	background: color-mix( in srgb, var(--wv-color-success) 14%, transparent );
	text-decoration: underline;
}

.wv-offer-banner {
	background: #f7f6f3;
	border: 1px solid var(--wv-color-border);
	border-radius: var(--wv-radius);
	padding: 0.7rem 1rem;
	margin-bottom: 1.1rem;
	font-size: 0.92rem;
	color: var(--wv-color-text);
}

.wv-step-content h2 {
	font-size: 1.4rem;
	margin-top: 0;
	margin-bottom: 0.2rem;
}

.wv-step-content p.wv-step-desc {
	color: var(--wv-color-muted);
	margin-top: 0;
	margin-bottom: 1rem;
}

.wv-field {
	margin-bottom: 0.9rem;
}

.wv-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
}

.wv-required-mark {
	color: var(--wv-color-error, #c0392b);
	font-weight: 700;
}

.wv-optional-mark {
	color: var(--wv-color-muted, #6b6b6b);
	font-weight: 400;
	font-size: 0.85em;
}

.wv-field input[type="text"],
.wv-field input[type="email"],
.wv-field input[type="tel"],
.wv-field input[type="number"],
.wv-field select,
.wv-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wv-color-border);
	border-radius: var(--wv-radius);
	font-size: 1rem;
	background: var(--wv-color-bg);
	color: var(--wv-color-text);
}

.wv-field input:focus,
.wv-field select:focus,
.wv-field textarea:focus {
	outline: 2px solid var(--wv-color-accent);
	outline-offset: 1px;
}

.wv-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 560px) {
	.wv-field-row {
		grid-template-columns: 1fr;
	}
}

.wv-hint {
	font-size: 0.82rem;
	color: var(--wv-color-muted);
	margin-top: 0.3rem;
}

/* Wagen-Auswahl: bewusst fest zweispaltig (statt automatisch so viele Spalten wie möglich),
   damit die Karten bei aktuell zwei Wohnwagen mittig stehen und bei künftig mehr Wohnwagen
   automatisch paarweise in weitere Reihen umbrechen (2, 4, 6, … Wohnwagen). */
.wv-wagen-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 260px));
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.wv-wagen-options {
		grid-template-columns: minmax(200px, 260px);
	}
}

.wv-wagen-option {
	border: 1px solid var(--wv-color-border);
	border-radius: 14px;
	padding: 0.85rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.wv-wagen-option:hover {
	border-color: var(--wv-color-accent);
	box-shadow: 0 4px 14px rgba(22, 50, 79, 0.08);
}

.wv-wagen-option.is-selected {
	border-color: var(--wv-color-accent);
	background: var(--wv-color-accent-soft);
	box-shadow: 0 4px 14px rgba(22, 50, 79, 0.1);
}

.wv-wagen-option__image {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: calc(var(--wv-radius) - 2px);
	margin-bottom: 0.5rem;
	display: block;
}

.wv-wagen-option h3 {
	margin: 0 0 0.15rem;
	font-size: 1rem;
}

.wv-wagen-option .wv-price {
	color: var(--wv-color-accent);
	font-weight: 700;
}

.wv-wagen-option {
	position: relative;
}

.wv-wagen-option__check {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wv-color-accent);
	color: var(--wv-color-accent-contrast);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Nummerierte Abschnitte auf der ersten Seite (Wohnwagen wählen / Zeitraum wählen) – klare
   optische Gliederung und großzügiger Abstand, damit der Ablauf auf einen Blick erfassbar ist. */
.wv-zeitraum-section {
	margin-bottom: 1.35rem;
	transition: opacity 0.2s ease;
}

.wv-zeitraum-section.is-disabled {
	opacity: 0.5;
}

.wv-zeitraum-section__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 1rem;
	margin: 0 0 0.6rem;
}

.wv-zeitraum-section__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wv-color-accent);
	color: var(--wv-color-accent-contrast);
	font-size: 0.85rem;
	font-weight: 700;
	flex: 0 0 auto;
}

/* Fehlerhervorhebung für ganze Abschnitte ohne einzelnes <input> (Wohnwagen-Karten, Kalender):
   deutlicher roter Rahmen plus dezenter Hintergrund, konsistent mit der Feld-Fehlermarkierung. */
.wv-zeitraum-section.wv-section-invalid {
	outline: 2px solid var(--wv-color-error, #c0392b);
	outline-offset: 8px;
	border-radius: var(--wv-radius);
}

/* Kalender */
.wv-calendar {
	border: 1px solid var(--wv-color-border);
	border-radius: 14px;
	padding: 1rem;
	max-width: 380px;
	margin: 0 auto;
	background: var(--wv-color-bg, #fff);
	box-shadow: 0 4px 18px rgba(22, 50, 79, 0.06);
}

@media (max-width: 560px) {
	.wv-calendar {
		padding: 0.85rem 0.5rem;
		border-radius: 14px;
	}
}

.wv-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.wv-calendar__title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.wv-calendar__nav {
	background: var(--wv-color-bg, #fff);
	border: 1px solid var(--wv-color-border);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	line-height: 1;
	font-size: 1rem;
	color: var(--wv-color-accent);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.wv-calendar__nav:hover {
	border-color: var(--wv-color-accent);
	background: var(--wv-color-accent-soft);
}

.wv-calendar__nav:active {
	transform: scale(0.94);
}

.wv-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.1rem;
	text-align: center;
}

.wv-calendar__daylabel {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wv-color-muted);
	padding: 0.1rem 0 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wv-calendar__day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wv-calendar__daynum {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	max-width: 84%;
	height: 36px;
	max-height: 84%;
	margin: 0 auto;
	border-radius: 50%;
	font-size: 0.9rem;
	color: var(--wv-color-text);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* Wird kurzzeitig gesetzt, während mehrere Tages-Kästchen auf einmal aktualisiert werden (z. B.
   beim Monatswechsel). Ohne dies würden alle betroffenen Kästchen gleichzeitig ihre eigene
   Farb-Übergangsanimation starten – das gemeinsame, gebündelte Aufblitzen mehrerer Kästchen auf
   einmal wird sonst als kurzes Ruckeln/Flackern wahrgenommen, obwohl sich die Seite selbst gar
   nicht bewegt. Für die Datumsauswahl (immer nur 1–2 einzelne Kästchen betroffen) bleibt die
   Übergangsanimation dagegen bewusst aktiv, da sie dort zur hochwertigen Optik beiträgt. */
.wv-calendar__grid.wv-no-transition .wv-calendar__daynum {
	transition: none !important;
}

.wv-calendar__day.is-empty {
	cursor: default;
}

/* Verfügbare Tage: klar lesbar und deutlich als anklickbar erkennbar. */
.wv-calendar__day:not(.is-disabled):not(.is-past):not(.is-empty):hover .wv-calendar__daynum {
	background: var(--wv-color-accent-soft);
	transform: scale(1.06);
}

/* Vergangene Tage: schlicht ausgeblendet, ohne Durchstreichung (kein Fehlerzustand, einfach
   nicht mehr wählbar). */
.wv-calendar__day.is-past .wv-calendar__daynum {
	color: #d5d2cb;
}
.wv-calendar__day.is-past {
	cursor: not-allowed;
}

/* Belegte Tage: deutlich als eigener Zustand erkennbar (gefüllter grauer Kreis mit
   Durchstreichung) statt kaum sichtbarem, verwaschenem Text. */
.wv-calendar__day.is-disabled .wv-calendar__daynum {
	background: #eeece7;
	color: #a6a29a;
	text-decoration: line-through;
}
.wv-calendar__day.is-disabled {
	cursor: not-allowed;
}

.wv-calendar__day.is-today .wv-calendar__daynum {
	font-weight: 700;
	box-shadow: inset 0 0 0 2px var(--wv-color-accent);
}

/* Ausgewählter Zeitraum: durchgehender, sanft eingefärbter Balken zwischen Start und Ende
   (wie bei modernen Reise-Buchungsseiten üblich), mit voll eingefärbten, runden Kreisen exakt
   am Start- und Endtag – dadurch ist der gewählte Zeitraum auf einen Blick erfassbar. */
.wv-calendar__day.is-in-range {
	background: var(--wv-color-accent-soft);
}
.wv-calendar__day.is-start:not(.is-single) {
	background: linear-gradient(to right, transparent 50%, var(--wv-color-accent-soft) 50%);
}
.wv-calendar__day.is-end:not(.is-single) {
	background: linear-gradient(to left, transparent 50%, var(--wv-color-accent-soft) 50%);
}

.wv-calendar__day.is-start .wv-calendar__daynum,
.wv-calendar__day.is-end .wv-calendar__daynum {
	background: var(--wv-color-accent);
	color: var(--wv-color-accent-contrast);
	font-weight: 700;
	box-shadow: none;
}

.wv-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wv-color-border);
	font-size: 0.78rem;
	color: var(--wv-color-muted);
}

.wv-calendar__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.wv-calendar__legend-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}
.wv-calendar__legend-dot.is-free {
	border: 1.5px solid var(--wv-color-text);
	background: var(--wv-color-bg, #fff);
}
.wv-calendar__legend-dot.is-booked {
	background: #eeece7;
	box-shadow: inset 0 0 0 1px #d5d2cb;
}
.wv-calendar__legend-dot.is-picked {
	background: var(--wv-color-accent);
}

.wv-selected-range {
	margin-top: 0.65rem;
	padding: 0.55rem 0.9rem;
	background: var(--wv-color-accent-soft);
	border-radius: var(--wv-radius);
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
}

.wv-calendar-error {
	margin-top: 0.6rem;
	padding: 0.65rem 1rem;
	background: #fbeceb;
	border: 1px solid #f0c7c3;
	border-radius: var(--wv-radius);
	color: var(--wv-color-error);
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 560px) {
	.wv-calendar__daynum {
		width: 34px;
		height: 34px;
		font-size: 0.85rem;
	}
	.wv-calendar__grid {
		gap: 0.1rem;
	}
}

/* Übergabe */
.wv-transfer-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 560px) {
	.wv-transfer-options {
		grid-template-columns: 1fr;
	}
}

.wv-transfer-option {
	border: 1px solid var(--wv-color-border);
	border-radius: var(--wv-radius);
	padding: 1rem;
	cursor: pointer;
	/* Resets, falls auf einem <button> statt <div> verwendet,
	   damit beide Varianten identisch aussehen. Wirkungslos auf <div>-Elementen. */
	background: var(--wv-color-bg, #fff);
	font: inherit;
	text-align: left;
	width: 100%;
	display: block;
	color: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wv-transfer-option:hover {
	border-color: var(--wv-color-accent);
}

.wv-transfer-option:focus-visible {
	outline: 2px solid var(--wv-color-accent);
	outline-offset: 2px;
}

.wv-transfer-option__label {
	display: block;
	font-size: 1.17em;
	font-weight: 700;
	line-height: 1.3;
}

.wv-transfer-option.is-selected {
	border-color: var(--wv-color-accent);
	background: color-mix(in srgb, var(--wv-color-accent) 6%, transparent);
}

/* Extras */
.wv-extra-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wv-color-border);
	border-radius: var(--wv-radius);
	margin-bottom: 0.6rem;
}

.wv-extra-item label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 500;
	cursor: pointer;
}

.wv-extra-item .wv-extra-price {
	color: var(--wv-color-muted);
	font-size: 0.88rem;
}

/* Rabatt */
.wv-discount-row {
	display: flex;
	gap: 0.6rem;
}

.wv-discount-row input {
	flex: 1;
}

.wv-discount-row button {
	white-space: nowrap;
}

.wv-discount-msg {
	margin-top: 0.5rem;
	font-size: 0.88rem;
}

.wv-discount-msg.is-valid {
	color: var(--wv-color-success);
}

.wv-discount-msg.is-invalid {
	color: var(--wv-color-error);
}

/* Zahlung */
.wv-payment-box {
	border: 1px solid var(--wv-color-border);
	border-radius: var(--wv-radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	background: #f7f6f3;
}

.wv-payment-box p {
	margin: 0.4rem 0;
}

.wv-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.wv-checkbox-row input {
	margin-top: 0.25rem;
}

/* Zusammenfassung */
.wv-summary-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}

.wv-summary-table td {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wv-color-border);
}

.wv-summary-table td:last-child {
	text-align: right;
	font-weight: 600;
}

.wv-summary-table tr.wv-total-row td {
	font-size: 1.15rem;
	border-top: 2px solid var(--wv-color-text);
	border-bottom: none;
	padding-top: 0.8rem;
}

.wv-summary-table tr.wv-deposit-row td,
.wv-summary-table tr.wv-remainder-row td {
	color: var(--wv-color-accent);
}

/* Buttons */
.wv-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 1.75rem;
}

.wv-btn {
	padding: 0.75rem 1.6rem;
	border-radius: var(--wv-radius);
	font-size: 1rem;
	cursor: pointer;
	border: 1px solid transparent;
	font-weight: 600;
}

.wv-btn--primary {
	background: var(--wv-color-accent);
	color: var(--wv-color-accent-contrast);
	border-color: var(--wv-color-accent);
	margin-left: auto;
}

.wv-btn--primary:hover {
	opacity: 0.92;
}

.wv-btn--primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wv-btn--secondary {
	background: transparent;
	color: var(--wv-color-text);
	border-color: var(--wv-color-border);
}

.wv-error {
	color: var(--wv-color-error);
	margin-top: 1rem;
	font-size: 0.92rem;
}

/* Wiederverwendbarer kleiner Lade-Spinner (z. B. im Absenden-Button während einer
   AJAX-Anfrage). Rein additiv – beeinflusst keine bestehenden Elemente. */
.wv-spinner {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: wv-spin 0.7s linear infinite;
	vertical-align: -2px;
	margin-right: 0.5em;
}

@keyframes wv-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.wv-spinner { animation-duration: 1.4s; }
}

/* Feld-spezifische Fehlermarkierung (z. B. leeres Pflichtfeld nach Absendeversuch) */
.wv-field-error {
	border-color: var(--wv-color-error) !important;
}
.wv-field-error-text {
	color: var(--wv-color-error);
	font-size: 0.82rem;
	margin: 0.3rem 0 0;
}

.wv-loading {
	color: var(--wv-color-muted);
}

.wv-confirmation {
	text-align: center;
	padding: 2rem 1rem;
}

/* Erfolgs-Modal nach Buchungsanfrage */
.wv-modal-overlay,
.wv-modal-overlay *,
.wv-modal-overlay *::before,
.wv-modal-overlay *::after {
	box-sizing: border-box;
}

.wv-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 999999;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.wv-modal-overlay.is-visible {
	opacity: 1;
}

.wv-modal {
	background: var(--wv-color-bg, #ffffff);
	color: var(--wv-color-text, #1a1a1a);
	border-radius: 14px;
	padding: 2.5rem 2rem 2rem;
	max-width: 440px;
	width: 100%;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	transform: translateY(14px) scale(0.96);
	transition: transform 0.28s ease;
	font-family: var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif);
}

.wv-modal-overlay.is-visible .wv-modal {
	transform: translateY(0) scale(1);
}

.wv-modal__icon {
	width: 68px;
	height: 68px;
	margin: 0 auto 1.25rem;
}

.wv-modal__check {
	width: 68px;
	height: 68px;
}

.wv-modal__check-circle {
	stroke: var(--wv-color-success, #2fa84f);
	stroke-width: 3;
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	animation: wv-modal-circle 0.5s ease forwards;
}

.wv-modal__check-mark {
	stroke: var(--wv-color-success, #2fa84f);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	animation: wv-modal-check 0.35s 0.45s ease forwards;
}

@keyframes wv-modal-circle {
	to { stroke-dashoffset: 0; }
}

@keyframes wv-modal-check {
	to { stroke-dashoffset: 0; }
}

.wv-modal__title {
	font-size: 1.3rem;
	margin: 0 0 0.6rem;
	color: var(--wv-color-text, #1a1a1a);
}

.wv-modal__text {
	font-size: 0.92rem;
	color: var(--wv-color-muted, #6b6b6b);
	margin: 0 0 1.25rem;
	line-height: 1.55;
}

.wv-modal__redirect {
	font-size: 0.82rem;
	color: var(--wv-color-muted, #6b6b6b);
	margin: 0 0 1.25rem;
}

.wv-modal__btn {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	margin-left: 0;
}