/* ==========================================================================
   monkeyz – Anbindung an Bestandsausgaben
   Hier wird ausschließlich umgestylt, niemals umgebaut. Alle Selektoren des
   Plugins MNK Airtable Sync (mnk-*) bleiben unverändert erhalten, damit
   Buchung, Dashboard und Airtable-Anbindung weiterlaufen.
   ========================================================================== */

/* --- Grundtypografie der Seite ------------------------------------------ */

/* Elementor setzt eigene globale Schriften. Die Vorschau-Klasse am body gibt
   den Redesign-Regeln das nötige Gewicht, um sich durchzusetzen. */

body.mnkz-preview,
body.mnkz-preview p,
body.mnkz-preview li,
body.mnkz-preview .elementor-widget-text-editor,
body.mnkz-preview .elementor-widget-container {
	font-family: var(--font-core);
	line-height: var(--lh-body);
}

body.mnkz-preview h1,
body.mnkz-preview h2,
body.mnkz-preview h3,
body.mnkz-preview .elementor-heading-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-headline);
	font-weight: var(--fw-regular);
}

body.mnkz-preview h4,
body.mnkz-preview h5,
body.mnkz-preview h6 {
	font-family: var(--font-core);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

/* --- Portal / Mitgliederbereich ----------------------------------------- */
/* Der Mitgliederbereich ist im Entwurf durchgehend dunkel. */

.mnk-dashboard,
.mnk-booking,
.mnk-documents {
	background: var(--black);
	color: var(--white);
	font-family: var(--font-core);
}

.mnk-dashboard a,
.mnk-booking a,
.mnk-documents a { color: var(--green-500); }

.mnk-dashboard a:hover,
.mnk-booking a:hover,
.mnk-documents a:hover { color: var(--green-400); }

/* Zugangs-Sperren (kein Kontingent, nicht eingeloggt) */
.mnk-booking-gate {
	background: var(--grey-900);
	border: var(--border-width) solid var(--white-a12);
	border-radius: var(--radius-md);
	padding: var(--space-8);
	text-align: center;
	color: var(--white);
}

/* --- Buchung: Kalender und Zeitfenster ---------------------------------- */
/* Achtung: Klassennamen stammen aus assets/booking.js und dürfen nicht
   umbenannt werden – hier wird nur ihr Aussehen verändert. */

.mnk-calendar__weekday {
	font-size: var(--fs-2xs);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--grey-500);
}

.mnk-calendar__day {
	border-radius: var(--radius-sm);
	transition: var(--transition-control);
	color: var(--white);
}

.mnk-calendar__day:hover:not(.mnk-calendar__day--disabled):not(.mnk-calendar__day--empty) {
	background: var(--white-a08);
}

.mnk-calendar__day--disabled { color: var(--grey-600); }

.mnk-calendar__day--selected,
.mnk-calendar__day--selected:hover,
.mnk-calendar__day--selected:focus {
	background: var(--green-500);
	color: var(--black);
	font-weight: var(--fw-bold);
}

.mnk-timeslot {
	border: var(--border-width) solid var(--white-a12);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--white);
	font-family: var(--font-core);
	font-size: var(--fs-sm);
	transition: var(--transition-control);
}

.mnk-timeslot:hover:not(.mnk-timeslot--booked) {
	border-color: var(--green-500);
	color: var(--green-500);
}

.mnk-timeslot--selected,
.mnk-timeslot--selected:hover,
.mnk-timeslot--selected:focus {
	background: var(--green-500);
	border-color: var(--green-500);
	color: var(--black);
	font-weight: var(--fw-bold);
}

.mnk-timeslot--booked { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

.mnk-empty { color: var(--grey-500); font-size: var(--fs-sm); }

/* --- Formulare ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	font-family: var(--font-core);
	border-radius: var(--radius-md);
	transition: var(--transition-control);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--ring-focus);
}

/* --- Elementor ---------------------------------------------------------- */
/* Elementor setzt eigene Schriftgrößen; die Tokens sollen sich durchsetzen,
   ohne dass jede einzelne Sektion angefasst werden muss. */

.mnkz-preview .elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--ls-headline);
}

.mnkz-preview .elementor-button {
	border-radius: var(--radius-pill);
	font-family: var(--font-core);
	font-weight: var(--fw-bold);
	transition: var(--transition-control);
}

/* --- Sichtbarer Hinweis im Vorschaumodus -------------------------------- */

.mnkz-preview-flag {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 99999;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: var(--green-500);
	color: var(--black);
	font-family: var(--font-core);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: var(--shadow-md);
	text-decoration: none;
}

.mnkz-preview-flag:hover { background: var(--green-600); color: var(--black); }

/* Auf schmalen Bildschirmen darf die Vorschau-Fahne nicht bis zum
   WhatsApp-Knopf unten rechts reichen. */
@media (max-width: 900px) {
	.mnkz-preview-flag {
		max-width: calc(100% - 104px);
		font-size: 10px;
		padding: 6px 10px;
	}

	/* Nur im Vorschaumodus: WhatsApp-Baustein nach oben schieben, damit die
	   Fahne die Sprechblase nicht verdeckt. Für echte Besucher gibt es die
	   Klasse .mnkz-preview nicht – dort bleibt alles wie gebaut. */
	.mnkz-preview .mz-wa { bottom: 76px; }
}