/* -----------------------------------------------------------------------------
 * Gridbox – eigene Anpassungen (custom.css)
 *
 * Wird von GridboxHelper::checkCustom() automatisch geladen, sobald die Datei
 * nicht leer ist (siehe components/com_gridbox/src/Helper/GridboxHelper.php).
 * Geladen auf JEDER Vollseite -> alle Regeln bewusst eng scopen!
 *
 * Inhalt aktuell:
 *   EventBooking – Override der Einzel-Registrierung
 *   (templates/gridbox/html/com_eventbooking/register/default.php)
 *   Diese Styles standen frueher als <style>-Bloecke direkt im Override und
 *   wurden hierher ausgelagert. Die EB-Regeln sind unter
 *   #eb-individual-registration-page gescopt.
 *
 *   Ausnahme: der Abschnitt "System-Meldungen" am Ende ist BEWUSST global
 *   (greift site-weit, nicht nur auf der Registrierungsseite).
 * -----------------------------------------------------------------------------
 */

/* === Veranstaltungs-Info-Block oberhalb des Formulars ===================== */
/* Aufbau: Titel ueber die volle Breite, darunter 3 Spalten
   (Datum | Veranstaltungsort | Kosten) – ohne Labels. */
#eb-individual-registration-page .eb-register-event-info {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	background: #f5f5f5;
	border-left: 4px solid #00afdb;
	border-right: 4px solid #00afdb;
}
#eb-individual-registration-page .eb-register-event-info .eb-event-title {
	margin: 0 0 .6em;
	text-align: center;
}
/* 3-Spalten-Reihe unter dem Titel */
#eb-individual-registration-page .eb-register-event-info .eb-event-cols {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5em 2.5em;
}
#eb-individual-registration-page .eb-register-event-info .eb-event-col-when {
	flex: 4 1 0;
	min-width: 180px;
}
#eb-individual-registration-page .eb-register-event-info .eb-event-col-where {
	flex: 4 1 0;
	min-width: 180px;
	/* Trennlinien links und rechts -> Ort als mittlere Box abgesetzt */
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 0 1.25em;
	text-align: center;
}
/* Veranstaltungsort (Name) und Adresse in eigene Zeilen trennen */
#eb-individual-registration-page .eb-register-event-info .eb-event-loc-name,
#eb-individual-registration-page .eb-register-event-info .eb-event-loc-address {
	display: block;
}
/* Kosten-Spalte rechtsbuendig */
#eb-individual-registration-page .eb-register-event-info .eb-event-col-amount {
	flex: 4 1 0;
	min-width: 120px;
	text-align: right;
}
/* Kosten-Wert hervorheben */
#eb-individual-registration-page .eb-register-event-info .eb-event-amount {
	font-weight: 500;
}
/* "Kosten:"-Label vor dem Betrag */
#eb-individual-registration-page .eb-register-event-info .eb-event-col-amount .eb-meta-label {
	margin-right: .4em;
}

/* === Debug-Tabelle der Feldstruktur (nur mit ?debugfields=1) ============== */
#eb-individual-registration-page .eb-debug-fields {
	margin: 1em 0;
	padding: 1em;
	border: 2px dashed #c00;
	background: #fff8f8;
}
#eb-individual-registration-page .eb-debug-fields > strong {
	color: #c00;
}
#eb-individual-registration-page .eb-debug-fields table {
	width: 100%;
	margin-top: .5em;
	font-size: 13px;
}

/* === Eigenes Zeilen-Grid der Registrierungsfelder ======================== */
/* Feld-Spalten buendig ausrichten.
   Jede Feld-Spalte traegt von EventBooking zusaetzlich .row/.form-row
   mit eigenen negativen Aussenraendern -> Kanten enden je Zeile
   unterschiedlich. Hier neutralisieren wir nur die seitlichen Margins
   (Padding der Spalte bleibt -> gleichmaessiger Gutter, buendig bei 6/12). */
#eb-individual-registration-page .eb-register-grid > [id^="field_"] {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Eingabefelder sollen die volle Spaltenbreite ausfuellen */
#eb-individual-registration-page .eb-register-grid .controls {
	width: 100%;
}
#eb-individual-registration-page .eb-register-grid input:not([type=radio]):not([type=checkbox]):not([type=hidden]),
#eb-individual-registration-page .eb-register-grid select,
#eb-individual-registration-page .eb-register-grid textarea {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 1.35rem;
	line-height: 1.4;
}

/* === Zahlungssektion: Zahlungsmethode + Betrag nebeneinander ============== */
/* In der Zahlungssektion Label ueber das Feld stellen (stacked) */
#eb-individual-registration-page .eb-payment-grid .form-group {
	display: block;
}
#eb-individual-registration-page .eb-payment-grid .form-group > * {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}
/* Betrag unten ausblenden (steht jetzt oben im Info-Block).
   Element bleibt im DOM, damit die Gebuehren-JS weiter funktioniert. */
#eb-individual-registration-page .eb-payment-grid #eb-amount-container {
	display: none;
}
/* Betrag deutlich groesser hervorheben */
#eb-individual-registration-page .eb-payment-grid #total_amount {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	height: auto;
	/* Feld auf Inhaltsbreite schrumpfen, damit das Waehrungszeichen
	   direkt hinter dem Betrag steht statt am rechten Rand */
	width: auto;
	field-sizing: content;
	min-width: 3ch;
	max-width: 9ch;
	flex: 0 0 auto;
	text-align: right;
}
/* Addon-Container nur so breit wie noetig + kleine Leerstelle */
#eb-individual-registration-page .eb-payment-grid #eb-amount-container .eb-addon-container {
	display: inline-flex;
	align-items: baseline;
	width: auto;
	gap: .3em;
}
/* Waehrungszeichen in gleicher Groesse wie der Betrag */
#eb-individual-registration-page .eb-payment-grid #eb-amount-container .input-group-text {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 0;
	background: transparent;
	border: 0;
}

/* === Zahlungs- und Ruecktrittsbedingungen ================================ */
#eb-individual-registration-page .eb-payment-terms-text {
	border: 1px solid #ccc;
	padding: .75em 1em;
	background: #fff;
	margin-bottom: .5em;
}
/* Template-CSS der <p>/<li> ueberschreiben -> Vererbung allein reicht nicht */
#eb-individual-registration-page .eb-payment-terms-text,
#eb-individual-registration-page .eb-payment-terms-text * {
	font-size: 1.2rem !important;
	line-height: 1.6rem !important;
}
#eb-individual-registration-page .eb-payment-terms-text p {
	margin: 0 0 .6em;
}
#eb-individual-registration-page .eb-terms-details {
	margin-top: .5em;
}
#eb-individual-registration-page .eb-terms-details > summary {
	cursor: pointer;
	font-weight: 500;
	color: #0066cc;
	list-style: none;
}
#eb-individual-registration-page .eb-terms-details > summary::-webkit-details-marker {
	display: none;
}
#eb-individual-registration-page .eb-terms-details > summary::before {
	content: "\25B8\00a0"; /* > */
}
#eb-individual-registration-page .eb-terms-details[open] > summary::before {
	content: "\25BE\00a0"; /* v */
}
/* Beschriftung je nach Zustand: zu = "... anzeigen", auf = "Weniger anzeigen" */
#eb-individual-registration-page .eb-terms-details > summary .eb-terms-less {
	display: none;
}
#eb-individual-registration-page .eb-terms-details[open] > summary .eb-terms-more {
	display: none;
}
#eb-individual-registration-page .eb-terms-details[open] > summary .eb-terms-less {
	display: inline;
}
#eb-individual-registration-page .eb-terms-details-body {
	margin-top: .6em;
}
/* Pflicht-Checkbox unter den Bedingungen als Block; Bestaetigungstext fett */
#eb-individual-registration-page .eb-payment-terms-container label.checkbox {
	display: block;
	font-weight: 500;
}

/* === Anmelde-Button (Absenden) =========================================== */
/* Grundzustand: kraeftiges Gruen, weisser Text gut lesbar, etwas groesser
   mit Letterspacing. Schatten = Gridbox-Elevation "Stufe 2"
   (Schattenfarbe = Theme-Token --shadow: rgba(0,0,0,0.15)). */
#eb-individual-registration-page #btn-submit {
	background-color: #1e8e3e;          /* schoenes, gut lesbares Gruen */
	background-image: none;             /* evtl. Framework-Verlauf entfernen */
	border: 0;
	color: #ffffff;
	font-size: 1.25rem;                 /* etwas groesser */
	font-weight: 500;                   /* zusammen mit 20px -> "large text", weiss klar lesbar */
	letter-spacing: .08em;
	padding: .7em 2.2em;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);   /* Gridbox-Schatten Stufe 2 */
	transition: background-color .25s ease, box-shadow .25s ease, color .25s ease, transform .1s ease;
}
/* Hover & Tastatur-Fokus: schoenes Blau, Schatten sanft weg
   (auf Gridbox-"kein Schatten" = 0 0 0 0 transparent ausblenden). */
#eb-individual-registration-page #btn-submit:hover,
#eb-individual-registration-page #btn-submit:focus {
	background-color: #007df7;          /* Theme-Blau (--secondary) */
	color: #ffffff;
	box-shadow: 0 0 0 0 transparent;    /* Schatten ausgeblendet */
}
/* Klick/aktiv: ebenfalls blau, etwas dunkler + leicht "gedrueckt" */
#eb-individual-registration-page #btn-submit:active {
	background-color: #0067cc;          /* dunkleres Blau als Klick-Feedback */
	color: #ffffff;
	box-shadow: 0 0 0 0 transparent;
	transform: translateY(1px);
}

/* === System-Meldungen (global, NICHT seitengescopt) ====================== */
/* Warn-/Fehler-Boxen rot einfaerben, Text weiss + lesbar. */
#system-message-container .alert.alert-warning,
#system-message-container .alert.alert-danger,
#system-message-container .alert.alert-error {
	background-color: #c62828 !important;
	border-color: #c62828 !important;
}
#system-message > div .alert-message {
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 300 !important;
	line-height: 1.5rem !important;
	opacity: 1 !important;
}

/* === Abbruch-Seite (PayPal-Abbruch, view=cancel) ========================= */
#eb-registration-cancel-page {
	display: flex;
	justify-content: center;
	padding: 2em 1em;
}
#eb-registration-cancel-page .eb-cancel-card {
	width: 100%;
	max-width: 560px;
	text-align: center;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);   /* Gridbox-Schatten Stufe 2 */
	padding: 2.5em 2em;
}
#eb-registration-cancel-page .eb-cancel-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 1em;
	color: #c62828;                              /* Akzent-Rot wie System-Meldungen */
}
#eb-registration-cancel-page .eb-cancel-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
#eb-registration-cancel-page .eb-cancel-title {
	margin: 0 0 .5em;
	font-size: 1.6rem;
}
#eb-registration-cancel-page .eb-cancel-message {
	color: #555;
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 1.5em;
}
#eb-registration-cancel-page .eb-cancel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	justify-content: center;
}
#eb-registration-cancel-page .eb-cancel-btn {
	display: inline-block;
	padding: .7em 1.6em;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: .03em;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Primär: grün (wie Anmelde-Button), Hover blau */
#eb-registration-cancel-page .eb-cancel-btn-primary {
	background-color: #1e8e3e;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#eb-registration-cancel-page .eb-cancel-btn-primary:hover,
#eb-registration-cancel-page .eb-cancel-btn-primary:focus {
	background-color: #007df7;
	color: #fff;
	box-shadow: 0 0 0 0 transparent;
}
/* Sekundär: dezent (grauer Rahmen) */
#eb-registration-cancel-page .eb-cancel-btn-secondary {
	background: transparent;
	border: 1px solid #ccc;
	color: #555;
}
#eb-registration-cancel-page .eb-cancel-btn-secondary:hover,
#eb-registration-cancel-page .eb-cancel-btn-secondary:focus {
	background-color: #ececec;
	color: #333;
}

/* === Bestaetigungsseite (nach erfolgreicher Anmeldung) =================== */
/* Container selbst begrenzen + zentrieren + seitliches Padding.
   Grund: In bestimmten Fensterbreiten (xl-Bereich, ~1200–1399px) verliert der
   Template-Container seitlich den Rand -> Inhalt klebte am linken Rand. */
#eb-registration-complete-page {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	box-sizing: border-box;
}
/* Alle Labels des Detailblocks -> Schriftstärke 500.
   Feste Labels (Veranstaltung, Betrag, …) sind <label>, die Formularfelder
   (Vorname–Hinweis) sind <div class="form-control-label"> -> beide Klassen/Element
   abdecken. */
#eb-registration-complete-page label,
#eb-registration-complete-page .form-control-label,
#eb-registration-complete-page .control-label {
	font-weight: 500;
}
/* Button "Zur Veranstaltungsuebersicht" oben und unten -> /workshops.
   Optik wie der Anmelde-/Primaer-Button: gruen, Hover blau. */
#eb-registration-complete-page .eb-complete-actions {
	display: flex;
	justify-content: center;
}
#eb-registration-complete-page .eb-complete-actions-top {
	margin-bottom: 1.2em;
}
#eb-registration-complete-page .eb-complete-actions-bottom {
	margin-top: 1.6em;
}
#eb-registration-complete-page .eb-overview-btn {
	display: inline-block;
	padding: .7em 1.6em;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: .03em;
	background-color: #1e8e3e;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#eb-registration-complete-page .eb-overview-btn:hover,
#eb-registration-complete-page .eb-overview-btn:focus {
	background-color: #007df7;
	color: #fff;
	box-shadow: 0 0 0 0 transparent;
}

/* === Übersicht /workshops: Event-Karten farblich nach Veranstaltungsort === */
/* Die Karte (.eb-event-item-grid-default-layout) bekommt je nach Ort eine
   Klasse (eb-loc-*), gesetzt im Template-Override
   templates/gridbox/html/com_eventbooking/eventgrid/default.php.
   Damit wird die ganze Karte im Ort-Farbton gerahmt:
     Just in Style -> rot | EinLaden -> blau | Villa von Boyneburgk -> grün
   Rahmenstärke (6px) passend zu den Veranstaltungsort-Boxen in der Sidebar. */
.eb-events-grid-items .eb-event-item-grid-default-layout {
	/* Rahmen nur links und rechts (oben/unten offen) */
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-radius: 8px;
	/* padding bewusst entfernt */
	/* height: 100% entfernt -> Karte nur so hoch wie ihr Inhalt
	   (sonst streckt die Flex-Reihe sie auf die höchste Nachbarkarte) */
	box-sizing: border-box;
}
/* Abstand zwischen den Event-Karten (vertikal je Reihe) */
/*
.eb-events-grid-items > [class*="eb-events-grid-row-"] {
	margin-bottom: 1.5em;
}
*/
/* EB-Standard setzt margins auf die inneren Karten-Elemente -> entfernen
   (Thumbnail-Container ausgenommen). Scope macht sie spezifischer als der
   EB-Default, daher ohne !important. */
.eb-events-grid-items .eb-event-item-grid-default-layout > div:not(.eb-event-thumb-container) {
	margin: 0;
}
.eb-events-grid-items .eb-event-item-grid-default-layout.eb-loc-jis {
	border-color: #d32f2f;       /* rot  – Studio JUST IN STYLE */
}
.eb-events-grid-items .eb-event-item-grid-default-layout.eb-loc-einladen {
	border-color: #2e7d32;       /* grün – EinLaden */
}
.eb-events-grid-items .eb-event-item-grid-default-layout.eb-loc-villa {
	border-color: #1565c0;       /* blau – Villa von Boyneburgk */
}

/* === Sidebar „Veranstaltungsorte" (Gridbox): gleiche Rahmenfarben ======== */
/* Klassen werden in Gridbox an den jeweiligen Orts-Boxen gesetzt:
     .ansch-jis  -> Studio JUST IN STYLE | .ansch-einl -> EinLaden | .ansch-eise -> Villa von Boyneburgk */
.ansch-jis,
.ansch-einl,
.ansch-eise {
	/* Rahmen nur links und rechts (oben/unten offen) */
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-radius: 8px;
	padding: .8em 1em;
	margin-bottom: 1em;
	background-color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .18);   /* etwas kräftiger Schatten */
	transition: box-shadow .2s ease;
}
/* Hover: Schatten weg */
.ansch-jis:hover,
.ansch-einl:hover,
.ansch-eise:hover {
	box-shadow: none;
}
.ansch-jis  { border-color: #d32f2f; }  /* rot   – Studio JUST IN STYLE */
.ansch-einl { border-color: #2e7d32; }  /* grün  – EinLaden */
.ansch-eise { border-color: #1565c0; }  /* blau  – Villa von Boyneburgk */

/* --- Sidebar-Orte als Klick-Filter (JS im eventgrid-Override) --- */
.ansch-clickable { cursor: pointer; }
.ansch-clickable:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
/* aktiver (ausgewählter) Ort hervorgehoben */
.ansch-active { background-color: #fafafa; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
/* Reset-Link "Alle Orte anzeigen" – per JS oberhalb des Grids eingefügt */
.eb-loc-filter-reset {
	display: inline-block;
	margin: 0 0 1em;
	font-weight: 500;
	color: #555;
	text-decoration: none;
}
.eb-loc-filter-reset::before { content: "\00d7\00a0"; }  /* × */
.eb-loc-filter-reset:hover,
.eb-loc-filter-reset:focus { color: #000; }

/* === „improved"-Modul-Layout (mod_eb_events): Orts-Farbe + Datums-Chip ==== */
/* Klassen werden im Override gesetzt:
   templates/gridbox/html/mod_eb_events/improved.php
   Jede Event-Zeile (.up-event-item) wird je Ort links/rechts gerahmt
   (gleiche Farben wie Sidebar/altes Grid). */
.ebm-upcoming-events-improved .up-event-item {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-radius: 8px;
	padding: 0.2em 0.8em;
	margin-bottom: 1em;
	background-color: #fff;
	box-sizing: border-box;
	align-items: center;          /* Datum-Kachel und Text vertikal mittig */
}
/* Modul-CSS setzt beim LETZTEN Eintrag padding:0 (höhere Spezifität) -> seitliches
   Padding wiederherstellen, sonst rutscht dort der Datumsblock nach links. */
.ebm-upcoming-events-improved .up-event-item:last-child {
	padding: 0.2em 0.8em;
}
.ebm-upcoming-events-improved .up-event-item.eb-loc-jis      { border-color: #d32f2f; }  /* rot  */
.ebm-upcoming-events-improved .up-event-item.eb-loc-einladen { border-color: #2e7d32; }  /* grün */
.ebm-upcoming-events-improved .up-event-item.eb-loc-villa    { border-color: #1565c0; }  /* blau */

/* Datums-Kachel: Wochentag / Tag / Monat – deutlich größer.
   Höhere Spezifität (.up-event-item div.…) als das Modul-CSS (media/mod_eb_events/
   css/style.css), damit die Größen greifen. Die weiß/blauen Box-Farben kommen
   weiterhin aus dem Modul-CSS (Tag = weiß, Monat = blau #214865). */
.ebm-upcoming-events-improved .up-event-item div.ebm-event-date {
	width: 140px;
	text-align: center;
	line-height: 1.1;
}
.ebm-upcoming-events-improved .up-event-item div.ebm-event-weekday {
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #214865;                 /* gleiche Blau-Akzentfarbe wie die Box */
	margin-bottom: 2px;
	white-space: nowrap;
}
.ebm-upcoming-events-improved .up-event-item div.ebm-event-day {
	font-size: 2.2rem;
	line-height: 1.05;
	padding: 5px 4px;
	font-weight: 500;
}
.ebm-upcoming-events-improved .up-event-item div.ebm-event-month {
	font-size: 1.05rem;
	line-height: 1.2;
	padding: 4px 4px;
	white-space: nowrap;
	font-weight: 500;
}
/* Uhrzeit unter dem Datumsblock – klein, zentriert, dezent */
.ebm-upcoming-events-improved .up-event-item .ebm-event-time {
	width: 140px;                 /* gleiche Breite wie die Datums-Kachel -> zentriert darunter */
	margin-top: 4px;
	text-align: center;
	white-space: nowrap;          /* Uhrzeit in einer Zeile */
	font-size: 1.2rem;
	line-height: 1.2;
	color: #000;
}

/* Titel + Ort: Theme-Textfarbe (keine Link-Optik), Titel etwas kräftiger */
.ebm-upcoming-events-improved .up-event-item .ebm-event-title,
.ebm-upcoming-events-improved .up-event-item .ebm-location-name {
	color: inherit;
}
.ebm-upcoming-events-improved .up-event-item .ebm-event-title {
	font-weight: 500;
}
/* Preis-Zeile + Anmelde-Button nebeneinander, Button rechtsbündig */
.ebm-upcoming-events-improved .up-event-item .ebm-event-bottom {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: .6em;
}
.ebm-upcoming-events-improved .up-event-item .ebm-register-btn {
	margin-left: auto;            /* schiebt den Button nach rechts */
	display: inline-block;
	background-color: #1e8e3e;    /* grün wie der Anmelde-Button der Registrierung */
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: .03em;
	padding: 0.2em 0.6em;
	border-radius: 6px;
	transition: background-color .2s ease;
}
.ebm-upcoming-events-improved .up-event-item .ebm-register-btn:hover,
.ebm-upcoming-events-improved .up-event-item .ebm-register-btn:focus {
	background-color: #007df7;    /* Hover blau */
	color: #fff;
}
/* Status-Hinweis statt Button, wenn Anmeldung nicht (mehr) möglich (z. B. Frist vorbei) */
.ebm-upcoming-events-improved .up-event-item .ebm-event-closed {
	margin-left: auto;            /* rechtsbündig wie der Button */
	font-weight: 500;
	color: #c62828;               /* rot – signalisiert „zu" */
}
/* Ganze Zeile ausgrauen, wenn Anmeldung nicht (mehr) möglich */
.ebm-upcoming-events-improved .up-event-item.up-event-closed {
	opacity: .55;
}