/**
 * Kurs- & Terminbuchung – Frontend-Styles
 *
 * ANPASSBAR OHNE DIESE DATEI ZU BEARBEITEN:
 * Alle Farben, Schriftarten, Abstände und Rundungen laufen über die
 * CSS-Variablen unten (":root"). Um sie zu überschreiben, z. B. in
 * Elementor unter "Website-Einstellungen > Custom CSS" oder
 * "Design > Zusätzliches CSS", genügt z. B.:
 *
 *   :root {
 *     --ycb-color-primary: #a3673f;
 *     --ycb-color-primary-hover: #8a5533;
 *     --ycb-font-family: 'Poppins', sans-serif;
 *     --ycb-radius: 4px;
 *     --ycb-spacing: 20px;
 *   }
 *
 * Diese Überschreibung übersteht auch Plugin-Updates, da die Datei
 * selbst dabei unverändert bleibt.
 */

:root {
	--ycb-color-primary: #6b8f71;
	--ycb-color-primary-hover: #587a5d;
	--ycb-color-success-bg: #eef7ee;
	--ycb-color-success-text: #256029;
	--ycb-color-danger-bg: #fdecea;
	--ycb-color-danger-text: #b32d2e;
	--ycb-color-border: #ccc;
	--ycb-color-text: #222;
	--ycb-color-text-muted: #555;
	--ycb-font-family: inherit;
	--ycb-font-size-base: 1rem;
	--ycb-font-size-title: 1.35rem;
	--ycb-radius: 6px;
	--ycb-radius-lg: 10px;
	--ycb-spacing: 16px;
	/* Kalender-Bedienelemente: standardmäßig an die Akzentfarbe gekoppelt
	   bzw. neutral hellgrau - beide über die Einstellungsseite überschreibbar,
	   unabhängig von --ycb-color-primary. */
	--ycb-calendar-button-bg: var(--ycb-color-primary);
	--ycb-calendar-day-bg: #f3f4f2;
	--ycb-list-day-bg: #f6f7f5;
	--ycb-list-day-text: #222222;
}

.ycb-wrapper {
	max-width: 960px;
	margin: 0 auto;
	font-family: var(--ycb-font-family);
	color: var(--ycb-color-text);
}

#ycb-calendar {
	margin-bottom: calc(var(--ycb-spacing) * 2);
}

/* Modal */
.ycb-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.55);
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: var(--ycb-spacing);
}

/* Nur sichtbar, solange das "hidden"-Attribut NICHT gesetzt ist (siehe frontend.js).
   Ohne diese Regel würde die obige "display:none" (bzw. das hidden-Attribut)
   von einer eigenen "display:flex"-Regel überschrieben und das Modal bliebe
   dauerhaft sichtbar, unabhängig vom Öffnen-/Schließen-Status. */
.ycb-modal-overlay:not([hidden]) {
	display: flex;
}

body.ycb-modal-open {
	overflow: hidden;
}

.ycb-modal {
	background: #fff;
	border-radius: var(--ycb-radius-lg);
	max-width: 440px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: calc(var(--ycb-spacing) * 1.75) calc(var(--ycb-spacing) * 1.5);
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	font-family: var(--ycb-font-family);
	color: var(--ycb-color-text);
}

.ycb-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}
.ycb-modal-close:hover {
	color: #111;
}

.ycb-modal-title,
.ycb-storno-title {
	margin: 0 0 6px;
	font-size: var(--ycb-font-size-title);
	font-family: var(--ycb-font-family);
}

.ycb-modal-meta {
	margin: 2px 0;
	color: var(--ycb-color-text-muted);
	font-size: 0.95rem;
}

.ycb-modal-description {
	margin: 12px 0;
	color: var(--ycb-color-text);
	font-size: 0.95rem;
	line-height: 1.5;
}

.ycb-modal-seats {
	margin: var(--ycb-spacing) 0;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: var(--ycb-radius);
	background: var(--ycb-color-success-bg);
	color: var(--ycb-color-success-text);
	display: inline-block;
}
.ycb-modal-seats.ycb-seats-full {
	background: var(--ycb-color-danger-bg);
	color: var(--ycb-color-danger-text);
}

#ycb-booking-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 10px;
}

#ycb-booking-form label {
	font-weight: 600;
	font-size: 0.9rem;
	margin-top: 8px;
}

/* Honeypot-Feld: für Menschen unsichtbar & nicht per Tab erreichbar, aber im DOM vorhanden (Bots füllen es oft trotzdem aus). */
.ycb-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	overflow: hidden;
}

#ycb-booking-form input:not([type="checkbox"]):not([type="radio"]) {
	padding: 9px 10px;
	border: 1px solid var(--ycb-color-border);
	border-radius: var(--ycb-radius);
	font-size: var(--ycb-font-size-base);
	font-family: var(--ycb-font-family);
}

.ycb-field-error {
	color: var(--ycb-color-danger-text);
	font-size: 0.82rem;
	margin-top: 4px;
}

.ycb-consent-row {
	margin-top: 14px;
}
.ycb-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400 !important;
	font-size: 0.9rem;
	line-height: 1.4;
	cursor: pointer;
}
.ycb-consent-label input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	padding: 0 !important;
	border-radius: 3px;
}
.ycb-consent-text {
	/* Ein einziges Flex-Element für den gesamten Text (inkl. Link),
	   damit dieser als normaler, zusammenhängender Absatz fließt statt
	   in einzelne, vom Flex-Layout fragmentierte Textstücke zu zerfallen. */
	flex: 1 1 auto;
}
.ycb-consent-label a {
	position: relative;
	z-index: 1;
	color: var(--ycb-color-primary);
	text-decoration: underline;
}

.ycb-multi-date-row {
	margin-top: 14px;
	border-top: 1px solid var(--ycb-color-border);
	padding-top: 12px;
}
.ycb-multi-date-options {
	margin-top: 10px;
	padding-left: 24px;
}
.ycb-multi-date-loading,
.ycb-multi-date-empty {
	font-size: 0.85rem;
	color: var(--ycb-color-text-muted);
	margin: 4px 0;
}
.ycb-multi-date-item {
	margin-bottom: 6px;
}
.ycb-multi-date-item input:disabled + span {
	color: var(--ycb-color-text-muted);
	text-decoration: line-through;
}

.ycb-submit-btn,
.ycb-page-btn {
	margin-top: var(--ycb-spacing);
	padding: 11px 18px;
	border: none;
	border-radius: var(--ycb-radius);
	background: var(--ycb-color-primary);
	color: #fff;
	font-weight: 600;
	font-size: var(--ycb-font-size-base);
	font-family: var(--ycb-font-family);
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
}
.ycb-submit-btn:hover,
.ycb-page-btn:hover {
	filter: brightness(0.88);
}
.ycb-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ycb-page-btn-danger {
	background: var(--ycb-color-danger-text);
}
.ycb-page-btn-danger:hover {
	filter: brightness(0.9);
}
.ycb-page-btn-secondary {
	background: #eee;
	color: #333;
	margin-left: 8px;
}
.ycb-page-btn-secondary:hover {
	background: #e2e2e2;
}

.ycb-form-message {
	margin-top: 12px;
	font-size: 0.95rem;
}
.ycb-message-success {
	color: var(--ycb-color-success-text);
	font-weight: 600;
}
.ycb-message-error {
	color: var(--ycb-color-danger-text);
	font-weight: 600;
}

/* Storno-Seite (Shortcode [ycb_storno]) */
.ycb-storno-wrapper {
	max-width: 480px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--ycb-radius-lg);
	padding: calc(var(--ycb-spacing) * 1.75) calc(var(--ycb-spacing) * 1.5);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.ycb-storno-body p {
	margin: 0 0 10px;
	line-height: 1.5;
}
.ycb-storno-form {
	margin-top: var(--ycb-spacing);
}

/* ------------------------------------------------------------------ *
 * Eigene Termin-Kartendarstellung (siehe eventContent() in frontend.js):
 * farbiger Balken links (individuelle Terminfarbe), Titel, darunter
 * Uhrzeit + Dauer links und freie Plätze rechts in einer Zeile. Ersetzt
 * FullCalendars Standard-Termindarstellung komplett - die Farbe kommt
 * hier NICHT von FullCalendar selbst (siehe class-ycb-rest-api.php),
 * sondern wird gezielt nur als Rahmenfarbe gesetzt.
 * ------------------------------------------------------------------ */
.ycb-event-card {
	background: #fff;
	border: 1px solid var(--ycb-color-border);
	border-left: 4px solid var(--ycb-color-primary);
	border-radius: 4px;
	padding: 4px 8px;
	width: 100%;
	box-sizing: border-box;
	/* Harte Begrenzung: Inhalt kann niemals visuell über die Kartenbreite
	   (und damit über die Tagesbox) hinausragen, unabhängig davon, wie
	   schmal die Spalte gerade ist. */
	overflow: hidden;
}
.ycb-event-card-title {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--ycb-color-text);
	white-space: normal;
	overflow: visible;
	text-overflow: unset;
	line-height: 1.25;
	word-break: break-word;
}
/* In der Listenansicht (Mobil) ist noch mehr Platz vorhanden - dort
   etwas größere Schrift als in der engeren Monatsansicht. */
.ycb-event-card-list .ycb-event-card-title {
	font-size: 0.95rem;
}
.ycb-event-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px;
	font-size: 0.78rem;
	color: var(--ycb-color-text-muted);
	margin-top: 2px;
}
/* Flex-Kinder dürfen sich standardmäßig NICHT unter ihre Inhaltsbreite
   verkleinern (CSS-Standardverhalten: min-width:auto) - genau das war
   die Ursache dafür, dass Uhrzeit+Dauer und "X frei" zusammen breiter
   werden konnten als die Tagesbox. "min-width:0" erlaubt das Schrumpfen,
   "text-overflow:ellipsis" schneidet bei echtem Platzmangel sauber ab,
   statt den Rahmen zu sprengen. */
.ycb-event-card-time,
.ycb-event-card-seats {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ycb-event-card-seats {
	color: var(--ycb-color-success-text);
	font-weight: 600;
	/* "X frei"/"Ausgebucht" ist meist kurz und die wichtigere Info -
	   bei Platzmangel wird bevorzugt die Uhrzeit/Dauer gekürzt, nicht
	   diese Angabe. */
	flex-shrink: 0;
}
.ycb-event-card-time {
	flex-shrink: 1;
}
.ycb-event-card-seats-full {
	color: var(--ycb-color-danger-text);
}

.ycb-event-card-list {
	margin: 4px 0;
}

/* Bereits begonnene/vergangene Termine (von FullCalendar automatisch mit
   "fc-event-past" markiert) sind nicht mehr buchbar - optisch abgeblendet
   und mit "not-allowed"-Cursor gekennzeichnet, statt normal klickbar zu wirken. */
#ycb-calendar .fc-event-past .ycb-event-card {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Runde, minimalistische Vor-/Zurück-Buttons statt eckiger Standard-Buttons. */
#ycb-calendar .fc-prev-button,
#ycb-calendar .fc-next-button {
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	color: var(--ycb-calendar-button-bg) !important;
	border: 1px solid var(--ycb-calendar-button-bg) !important;
}
#ycb-calendar .fc-prev-button:hover,
#ycb-calendar .fc-next-button:hover {
	background: var(--ycb-calendar-button-bg) !important;
	color: #fff !important;
	filter: none;
}
/* FullCalendar behandelt Vor-/Zurück standardmäßig als zusammenhängende
   Button-Gruppe (kein Zwischenraum, überlappende Ränder). Bewusst NICHT
   über ".fc-button-group { gap: ... }" gelöst, da das auch den Abstand
   der Monat/Woche/Liste-Buttongruppe rechts verändern würde - stattdessen
   gezielt nur auf den "Weiter"-Button angewendet. */
#ycb-calendar .fc-next-button {
	margin-left: 12px !important;
}
#ycb-calendar .fc-toolbar-title {
	font-size: 1.2rem;
}

/* Tagesüberschriften in der Listenansicht ("Montag, 24.08.2026") -
   Farben über die Plugin-Einstellungen konfigurierbar. */
#ycb-calendar .fc-list-day-cushion {
	background: var(--ycb-list-day-bg);
	color: var(--ycb-list-day-text);
	font-weight: 700;
}
/* FullCalendar rendert in der Listenansicht standardmäßig eigene Spalten
   für Uhrzeit (Punkt) und Uhrzeit-Text links neben dem Titel - beides wird
   ausgeblendet, da unsere eigene Karte (eventContent) Uhrzeit und Dauer
   bereits selbst anzeigt; sonst stünde die Zeit doppelt da. */
#ycb-calendar .fc-list-event-graphic,
#ycb-calendar .fc-list-event-time {
	display: none;
}
#ycb-calendar .fc-list-event-title {
	width: 100%;
}
#ycb-calendar .fc-list-event td {
	padding: 4px 8px;
}

/* ------------------------------------------------------------------ *
 * Kalender-Bedienelemente (Buttons, Tageszellen-Hintergrund) - Farben
 * über die Plugin-Einstellungen konfigurierbar (siehe CSS-Variablen
 * oben und class-ycb-frontend.php für die Inline-Überschreibung).
 * Ohne diese Regeln würden hier die Standardfarben des WordPress-Themes
 * bzw. von FullCalendar selbst durchschlagen.
 * ------------------------------------------------------------------ */
#ycb-calendar .fc-button-primary {
	background-color: var(--ycb-calendar-button-bg) !important;
	border-color: var(--ycb-calendar-button-bg) !important;
	color: #fff !important;
}
#ycb-calendar .fc-button-primary:hover {
	filter: brightness(0.9);
}
#ycb-calendar .fc-button-primary:not(:disabled).fc-button-active,
#ycb-calendar .fc-button-primary:not(:disabled):active {
	filter: brightness(0.8);
}
/* "Heute" ist der einzige Termin, dessen Hervorhebung wir bewusst nicht
   überschreiben, damit er weiterhin sichtbar vom Rest abgesetzt bleibt. */
#ycb-calendar .fc-daygrid-day:not(.fc-day-today) {
	background-color: var(--ycb-calendar-day-bg);
}

/* ------------------------------------------------------------------ *
 * Mobiloptimierung für den Kalender (FullCalendar), Hochformat
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
	/* Toolbar (< > | heute | Titel | Monat/Woche/Liste) umbricht in
	   mehrere zentrierte Zeilen statt sich in eine Zeile zu quetschen. */
	#ycb-calendar .fc-header-toolbar {
		flex-wrap: wrap;
		row-gap: 8px;
		justify-content: center;
	}
	#ycb-calendar .fc-toolbar-chunk {
		display: flex;
		justify-content: center;
		flex: 1 1 100%;
	}
	#ycb-calendar .fc-toolbar-title {
		font-size: 1.1rem;
		text-align: center;
	}

	/* Etwas kompaktere Buttons/Zellen, damit auf schmalen Bildschirmen
	   mehr vom eigentlichen Kalender sichtbar ist. */
	#ycb-calendar .fc-button {
		padding: 5px 8px;
		font-size: 0.85rem;
	}
	#ycb-calendar .fc-daygrid-day-number {
		font-size: 0.85rem;
		padding: 2px 4px;
	}
	.ycb-event-card {
		padding: 3px 6px;
	}
	.ycb-event-card-title {
		font-size: 0.75rem;
	}
	.ycb-event-card-meta {
		font-size: 0.7rem;
	}

	/* Wochenansicht (timeGridWeek) - Standardansicht auf schmalen
	   Hochformat-Handys: schmalere Zeitachse links und kompaktere
	   Termin-Kacheln, damit die 7 Tagesspalten nicht zu eng werden. */
	#ycb-calendar .fc-timegrid-axis,
	#ycb-calendar .fc-timegrid-slot-label {
		font-size: 0.7rem;
	}
	#ycb-calendar .fc-col-header-cell-cushion {
		font-size: 0.8rem;
		padding: 4px 2px;
	}
	#ycb-calendar .fc-timegrid-event .fc-event-main {
		font-size: 0.72rem;
		padding: 1px 2px;
	}
	#ycb-calendar .fc-timegrid-event .fc-event-time {
		font-size: 0.68rem;
	}

	.ycb-modal {
		padding: calc(var(--ycb-spacing) * 1.25) var(--ycb-spacing);
	}
}

/* ------------------------------------------------------------------ *
 * Teilnehmerlisten-Ansicht (Shortcode [ycb_teilnehmerliste_ansicht]) -
 * eingeschränkter Frontend-Zugang ohne WordPress-Backend, siehe
 * class-ycb-participant-viewer.php.
 * ------------------------------------------------------------------ */
.ycb-viewer-login {
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--ycb-font-family);
}
.ycb-viewer-wrapper {
	max-width: 1100px;
	margin: 0 auto;
	font-family: var(--ycb-font-family);
}
.ycb-viewer-login form p {
	margin: 0 0 12px;
}
.ycb-viewer-login label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}
.ycb-viewer-login input[type="text"],
.ycb-viewer-login input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ycb-color-border);
	border-radius: var(--ycb-radius);
	box-sizing: border-box;
}
.ycb-viewer-login input[type="submit"] {
	background: var(--ycb-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--ycb-radius);
	padding: 10px 20px;
	font-weight: 600;
	cursor: pointer;
}
.ycb-viewer-account {
	text-align: right;
	font-size: 0.85rem;
	color: var(--ycb-color-text-muted);
	margin-bottom: var(--ycb-spacing);
}
/* Desktop/Tablet (ab 600px): jeder Kurs in einer eigenen Spalte,
   maximal 3 Spalten nebeneinander, danach automatischer Zeilenumbruch -
   "repeat(3, 1fr)" erzwingt exakt 3 gleich breite Spalten, "gap" sorgt
   für einheitlichen Abstand zwischen Spalten UND Zeilen gleichermaßen. */
.ycb-viewer-events-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
.ycb-viewer-event {
	border: 1px solid var(--ycb-color-border);
	border-left: 4px solid var(--ycb-color-primary);
	border-radius: var(--ycb-radius);
	padding: 14px 18px;
	margin: 0; /* Abstand kommt jetzt vom Grid-"gap", nicht mehr von margin. */
}
.ycb-viewer-event h3 {
	margin: 0 0 4px;
}
.ycb-viewer-event-time {
	color: var(--ycb-color-text-muted);
	margin: 0 0 10px;
	font-size: 0.9rem;
}
.ycb-viewer-event ol {
	margin: 0;
	padding-left: 22px;
}
.ycb-viewer-denied {
	color: var(--ycb-color-danger-text);
	font-weight: 600;
}

/* Mobil (unter 600px, dieselbe Grenze wie beim Kalender): Kurse
   untereinander statt in Spalten, mit schwarzem Trennstrich zwischen
   den einzelnen Kursen statt der Kasten-Optik. */
@media (max-width: 600px) {
	.ycb-viewer-events-grid {
		display: block;
	}
	.ycb-viewer-event {
		border: none;
		border-radius: 0;
		padding: 18px 0;
		margin: 0;
		border-bottom: 2px solid #000;
	}
	.ycb-viewer-event:last-child {
		border-bottom: none;
	}
}