/*
 * Nutzt die Design-Tokens (Farben, Radien, Fonts) aus dem Theme
 * (--wp--preset--*), damit das Widget sich einfügt statt aufgesetzt zu
 * wirken. Funktioniert nur zusammen mit dem "Kleines Vorwerk"-Theme, ist
 * aber bewusst so eng gekoppelt (kein generisches Plugin für den Store).
 */

.kvad-booking-widget {
	background: var(--wp--preset--color--secondary, #ede5d8);
	border-radius: 20px;
	padding: 2rem 2.25rem;
	max-width: 46rem;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

.kvad-booking-widget__row {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.kvad-booking-widget__field {
	flex: 1 1 13rem;
}

.kvad-booking-widget__field--full {
	flex-basis: 100%;
}

.kvad-booking-widget__field--narrow {
	flex: 0 1 8rem;
}

.kvad-booking-widget__field label,
.kvad-booking-widget__checkbox {
	display: block;
	font-size: var(--wp--preset--font-size--label, 0.85rem);
	font-weight: 600;
	color: var(--wp--preset--color--primary, #6b5a3f);
	margin-bottom: 0.5rem;
}

.kvad-booking-widget__field input,
.kvad-booking-widget__field select,
.kvad-booking-widget__field textarea,
.kvad-booking-widget input[type="date"],
.kvad-booking-widget input[type="text"],
.kvad-booking-widget input[type="email"],
.kvad-booking-widget input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body, 1rem);
	color: var(--wp--preset--color--primary, #6b5a3f);
	background: var(--wp--preset--color--background, #f5f0e8);
	border: 1.5px solid rgba(118, 102, 74, 0.28);
	border-radius: 14px;
	padding: 0.85rem 1rem;
	min-height: 3rem;
}

.kvad-booking-widget__field textarea {
	resize: vertical;
}

.kvad-booking-widget__field input:focus,
.kvad-booking-widget__field select:focus,
.kvad-booking-widget__field textarea:focus,
.kvad-booking-widget input[type="date"]:focus,
.kvad-booking-widget input[type="text"]:focus,
.kvad-booking-widget input[type="email"]:focus,
.kvad-booking-widget input[type="number"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary, #6b5a3f);
	box-shadow: 0 0 0 3px rgba(118, 102, 74, 0.15);
}

.kvad-booking-widget__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

/* "Anzahl Hunde" direkt neben der Checkbox statt als eigener Block darunter
   – kompakt, da es nur 1 oder 2 zur Auswahl gibt. */
.kvad-booking-widget__dog-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.kvad-booking-widget__dog-row .kvad-booking-widget__checkbox {
	margin-bottom: 0;
}

/*
 * Per visibility statt display/hidden ausgeblendet: das Element behält so
 * IMMER seinen Platz in der Zeile (auch unsichtbar), die Zeilenhöhe ändert
 * sich beim Ein-/Ausblenden also nie – anders als mit display:none/[hidden]
 * bleibt dadurch garantiert, dass die Checkbox daneben nicht durch
 * align-items:center neu zentriert wird und "springt".
 */
.kvad-booking-widget__dog-count {
	width: auto;
	min-height: 2.25rem;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body, 1rem);
	color: var(--wp--preset--color--primary, #6b5a3f);
	background: var(--wp--preset--color--background, #f5f0e8);
	border: 1.5px solid rgba(118, 102, 74, 0.28);
	border-radius: 10px;
	padding: 0.35rem 0.6rem;
	visibility: hidden;
}

.kvad-booking-widget__dog-count.is-visible {
	visibility: visible;
}

.kvad-booking-widget__room-picker {
	background: var(--wp--preset--color--background, #f5f0e8);
	border: 1.5px solid rgba(118, 102, 74, 0.28);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
	margin: -0.75rem 0 1.5rem;
}
.kvad-booking-widget__room-picker[hidden] {
	display: none;
}
.kvad-booking-widget__room-picker-label {
	font-size: var(--wp--preset--font-size--label, 0.85rem);
	font-weight: 600;
	color: var(--wp--preset--color--primary, #6b5a3f);
	margin: 0 0 0.75rem;
}
.kvad-booking-widget__checkbox--room {
	margin-bottom: 0.6rem;
	font-weight: 400;
}
.kvad-booking-widget__room-picker-hint {
	font-size: var(--wp--preset--font-size--label, 0.8rem);
	margin: 0.75rem 0 0;
}

.kvad-booking-widget__submit {
	background: var(--wp--preset--color--primary, #6b5a3f);
	color: var(--wp--preset--color--background, #f5f0e8);
	border: none;
	border-radius: 999px;
	padding: 14px 28px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.kvad-booking-widget__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.kvad-booking-widget__submit:hover:not(:disabled) {
	background: var(--wp--preset--color--hero-dark, #2f2a24);
}

.kvad-booking-widget__hint {
	font-size: var(--wp--preset--font-size--label, 0.8rem);
	/* Kein opacity-Dimmen mehr (drückte den Kontrast unter 4.5:1) – die
	 * kleinere Schriftgröße reicht als visuelle Abstufung. */
	margin-top: 0.75rem;
}

.kvad-booking-widget__price {
	min-height: 1.4em;
	font-size: var(--wp--preset--font-size--card, 0.95rem);
	font-weight: 600;
	margin: 0 0 0.75rem;
}
.kvad-booking-widget__price:empty {
	display: none;
}

.kvad-booking-widget__message {
	min-height: 1.4em;
	font-size: var(--wp--preset--font-size--card, 0.95rem);
	margin: 0 0 0.75rem;
}
.kvad-booking-widget__message.is-error {
	color: #a33b2a;
	font-weight: 600;
}

/*
 * .kvad-booking-widget__row hat display:flex (gleiche Spezifität wie das
 * [hidden]-Default der UA-Stylesheet) – ohne diese Regel würde
 * element.hidden=true den Kalender-Ersatz nicht wirklich ausblenden.
 */
.kvad-booking-widget__row--dates[hidden] {
	display: none;
}

/* Kalender-Widget (ersetzt die nativen Datumsfelder, sobald JS lädt). */
.kvad-cal {
	margin-bottom: 1.5rem;
}

.kvad-cal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.kvad-cal__nav-label {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #6b5a3f);
}

.kvad-cal__nav-btn {
	background: var(--wp--preset--color--background, #f5f0e8);
	border: 1.5px solid rgba(118, 102, 74, 0.28);
	color: var(--wp--preset--color--primary, #6b5a3f);
	border-radius: 999px;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.kvad-cal__nav-btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary, #6b5a3f);
}
.kvad-cal__nav-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.kvad-cal__months {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.kvad-cal__month {
	flex: 1 1 15rem;
	min-width: 15rem;
}

.kvad-cal__month-heading {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-weight: 600;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--primary, #6b5a3f);
}

.kvad-cal__weekdays,
.kvad-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.2rem;
}

.kvad-cal__weekdays {
	margin-bottom: 0.3rem;
}
.kvad-cal__weekdays span {
	text-align: center;
	font-size: var(--wp--preset--font-size--label, 0.78rem);
	font-weight: 600;
	/* Kein opacity-Dimmen mehr (drückte den Kontrast auf 2.45:1, weit unter
	 * dem AA-Minimum 4.5:1) – Größe + Fettung reichen als Abstufung. */
}

.kvad-cal__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--card, 0.9rem);
	color: var(--wp--preset--color--primary, #6b5a3f);
	cursor: pointer;
}
.kvad-cal__day--blank {
	cursor: default;
}
.kvad-cal__day:not(.is-disabled):not(.kvad-cal__day--blank):hover {
	background: rgba(118, 102, 74, 0.12);
}
.kvad-cal__day.is-disabled {
	opacity: 0.3;
	text-decoration: line-through;
	cursor: not-allowed;
}
.kvad-cal__day.is-in-range,
.kvad-cal__day.is-preview-end {
	background: rgba(252, 202, 172, 0.45);
	border-radius: 0;
}
.kvad-cal__day.is-selected {
	background: var(--wp--preset--color--primary, #6b5a3f);
	color: var(--wp--preset--color--background, #f5f0e8);
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
	.kvad-cal__day {
		transition: background-color 120ms ease;
	}
}

.kvad-cal__hint {
	min-height: 1.3em;
	font-size: var(--wp--preset--font-size--label, 0.85rem);
	color: var(--wp--preset--color--primary, #6b5a3f);
	/* Kein opacity-Dimmen mehr (Kontrast sonst < 4.5:1). */
	margin: 0.75rem 0 0;
}

@media (max-width: 480px) {
	.kvad-cal__months {
		gap: 1.5rem;
	}
}

/* Honeypot-Feld: für Menschen (auch Screenreader/Tastatur) unerreichbar,
 * aber im Markup vorhanden – Bots füllen es oft trotzdem aus. */
.kvad-booking-widget__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}