/**
 * Miju Reservierung – Frontend (fester „by Vu"-Look).
 * Palette bewusst fest verdrahtet, damit das Design nicht versehentlich
 * über Elementor verstellt werden kann.
 */
.mr-form {
	--mr-green: #304c3d;
	--mr-green-dark: #263d31;
	--mr-beige: #f3eae1;
	--mr-cream: #fbf8f4;
	--mr-ink: #2f342f;
	--mr-muted: #6f7a70;
	--mr-line: rgba( 48, 76, 61, 0.18 );
	--mr-line-soft: rgba( 48, 76, 61, 0.12 );
	--mr-disabled: #b9bcb2;

	/* Überschriften-Schrift = Elementor-H1 (Global „Primary"); Fallback: geerbte Theme-Schrift. */
	--mr-heading-font: var( --e-global-typography-primary-font-family, inherit );

	background: var( --mr-beige );
	color: var( --mr-ink );
	padding: 2rem 2.25rem 2.25rem;
	border-radius: 16px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

.mr-form *,
.mr-form *::before,
.mr-form *::after {
	box-sizing: border-box;
}

/* Überschrift übernimmt die Elementor-H1-Schrift (siehe --mr-heading-font). */
.mr-form__heading {
	font-family: var( --mr-heading-font );
	font-weight: 600;
	font-size: clamp( 1.8rem, 3vw, 2.4rem );
	line-height: 1.1;
	color: var( --mr-green );
	margin: 0 0 0.25rem;
}

.mr-form__subheading {
	color: var( --mr-muted );
	font-size: 0.95rem;
	margin: 0 0 1.75rem;
}

/* --- Schritt-Überschriften --- */
.mr-step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.75rem 0 0.85rem;
}

.mr-step__num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --mr-green );
	color: var( --mr-beige );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 600;
}

.mr-step__label {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --mr-green );
	font-weight: 600;
}

/* --- Felder --- */
.mr-field {
	margin-bottom: 1.25rem;
}

.mr-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.mr-row .mr-field {
	flex: 1 1 220px;
}

.mr-label {
	display: block;
	margin-bottom: 0.4rem;
	color: var( --mr-muted );
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

.mr-req {
	color: #b5623a;
	margin-left: 3px;
}

.mr-input {
	width: 100%;
	padding: 0.8rem 0.95rem;
	background: var( --mr-cream );
	border: 1px solid var( --mr-line );
	border-radius: 8px;
	color: var( --mr-ink );
	font: inherit;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mr-input::placeholder {
	color: #a7aca2;
}

.mr-input:focus {
	outline: none;
	border-color: var( --mr-green );
	box-shadow: 0 0 0 3px rgba( 48, 76, 61, 0.12 );
}

select.mr-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23304c3d' d='M6 8 0 0h12z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

textarea.mr-input {
	resize: vertical;
	min-height: 110px;
}

.mr-field--error .mr-input {
	border-color: #c0492f;
	box-shadow: 0 0 0 3px rgba( 192, 73, 47, 0.12 );
}

/* --- Picker-Karte (Kalender + Zeiten) --- */
.mr-picker {
	display: grid;
	grid-template-columns: minmax( 0, 360px ) minmax( 0, 1fr );
	gap: 1.75rem;
	background: var( --mr-cream );
	border: 1px solid var( --mr-line );
	border-radius: 14px;
	padding: 1.4rem;
}

/* min-width:0 verhindert, dass Inhalte über die Spalte hinauslaufen. */
.mr-calendar {
	min-width: 0;
}

/* --- Kalender --- */
.mr-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var( --mr-green );
	color: var( --mr-beige );
	padding: 0.55rem 0.9rem;
	border-radius: 8px;
	margin-bottom: 0.75rem;
}

.mr-cal-title {
	font-family: var( --mr-heading-font );
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mr-cal-nav {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
	color: var( --mr-beige );
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0 0.4rem;
	min-width: 0;
	line-height: 1;
	border-radius: 4px;
}

.mr-cal-nav:hover:not( :disabled ) {
	background: rgba( 255, 255, 255, 0.12 );
}

.mr-cal-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.mr-calendar__weekdays,
.mr-calendar__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 3px;
}

.mr-calendar__weekdays {
	margin-bottom: 5px;
}

.mr-calendar__weekdays span {
	text-align: center;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --mr-muted );
	padding: 4px 0;
}

.mr-day {
	/* Theme-Button-Styles hart zurücksetzen, damit die Kacheln nicht aufgeblasen werden. */
	appearance: none;
	-webkit-appearance: none;
	aspect-ratio: 1 / 1;
	width: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	box-shadow: none;
	color: var( --mr-ink );
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.mr-day--empty {
	aspect-ratio: 1 / 1;
	cursor: default;
}

.mr-day--disabled {
	color: var( --mr-disabled );
	text-decoration: line-through;
	cursor: default;
}

.mr-day:not( .mr-day--disabled ):not( .mr-day--empty ):hover {
	background: rgba( 48, 76, 61, 0.1 );
}

.mr-day.is-today {
	color: var( --mr-green );
	font-weight: 700;
}

.mr-day.is-selected {
	background: var( --mr-green );
	color: var( --mr-beige );
	font-weight: 600;
}

/* --- Zeiten-Panel --- */
.mr-slots {
	min-width: 0;
	border-left: 1px solid var( --mr-line-soft );
	padding-left: 1.75rem;
}

.mr-slots__title {
	font-family: var( --mr-heading-font );
	font-size: 1.35rem;
	font-weight: 600;
	color: var( --mr-green );
	display: block;
	line-height: 1.2;
}

.mr-slots__date {
	display: block;
	font-size: 0.8rem;
	color: var( --mr-muted );
	margin-bottom: 1rem;
	text-transform: capitalize;
}

.mr-slots__hint {
	color: var( --mr-muted );
	font-size: 0.9rem;
	margin: 0.5rem 0;
}

.mr-slots__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
	gap: 0.55rem;
}

.mr-slot {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	min-width: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0.6rem 0.4rem;
	background: var( --mr-cream );
	color: var( --mr-ink );
	border: 1px solid var( --mr-line );
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.mr-slot__cap {
	font-size: 0.72rem;
	color: var( --mr-muted );
}

.mr-slot:hover:not( :disabled ) {
	border-color: var( --mr-green );
}

.mr-slot.is-selected {
	background: var( --mr-green );
	border-color: var( --mr-green );
	color: var( --mr-beige );
}

.mr-slot.is-selected .mr-slot__cap {
	color: rgba( 243, 234, 225, 0.75 );
}

.mr-slot--full {
	color: var( --mr-disabled );
	border-color: var( --mr-line-soft );
	cursor: default;
}

.mr-slot--full .mr-slot__cap {
	color: var( --mr-disabled );
}

/* --- Zusammenfassung --- */
.mr-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	background: var( --mr-green );
	color: var( --mr-beige );
	border-radius: 10px;
	padding: 0.9rem 1.25rem;
	margin: 1.25rem 0 0;
}

.mr-summary strong {
	font-family: var( --mr-heading-font );
	font-size: 1.15rem;
	font-weight: 600;
}

.mr-summary span {
	font-size: 0.92rem;
	opacity: 0.9;
}

.mr-summary [data-mr="summary-time"] {
	font-weight: 600;
	opacity: 1;
}

/* --- Checkbox --- */
.mr-field--check {
	margin-top: 1.25rem;
}

.mr-check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	cursor: pointer;
	font-size: 0.92rem;
	color: var( --mr-ink );
}

.mr-check input {
	margin-top: 0.15rem;
	accent-color: var( --mr-green );
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.mr-check a {
	color: var( --mr-green );
	text-decoration: underline;
}

/* --- Submit --- */
.mr-submit {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.9rem 2.75rem;
	background: var( --mr-green );
	color: var( --mr-beige );
	border: 1px solid var( --mr-green );
	border-radius: 8px;
	font-family: var( --mr-heading-font );
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s;
}

.mr-submit:hover {
	background: var( --mr-green-dark );
}

.mr-submit.is-loading {
	opacity: 0.65;
	cursor: wait;
}

/* --- Meldungen --- */
.mr-message {
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	margin-top: 1.25rem;
	font-size: 0.95rem;
}

.mr-message--success {
	background: rgba( 48, 76, 61, 0.1 );
	border: 1px solid var( --mr-green );
	color: var( --mr-green );
}

.mr-message--error {
	background: rgba( 192, 73, 47, 0.1 );
	border: 1px solid #c0492f;
	color: #9c3620;
}

.mr-empty {
	color: var( --mr-muted );
}

/* --- Responsive --- */
@media ( max-width: 720px ) {
	.mr-form {
		padding: 1.5rem 1.25rem;
	}
	.mr-picker {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.mr-slots {
		border-left: none;
		border-top: 1px solid var( --mr-line-soft );
		padding-left: 0;
		padding-top: 1.25rem;
	}
	.mr-submit {
		width: 100%;
		text-align: center;
	}
}