/* =====================================================================
   public-form.css — App-Defaults: Anmeldeformular (regform-*)
   =====================================================================
   Styling des Anmeldeformulars, gerendert von render_registration_form()
   in public-render.inc. Alle Elemente tragen regform-*-Klassen und
   data-field-name/data-field-type-Attribute, damit Event-CSS gezielt
   eingreifen kann, ohne die HTML-Struktur zu aendern.

   Geladen NACH css/public-base.css und VOR den pro-Event <style>-Bloecken
   (page_css, form_css). Alle Selektoren nutzen :where() = Spezifitaet 0,
   damit Event-CSS mit normalen Selektoren gewinnt.
   ===================================================================== */

/* Formular-Struktur (Tabellen-Layout per Default, auf Flex umstellbar). */
:where(.regform-table) {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
:where(.regform-table tr) { display: table-row; }
:where(.regform-cell) {
  padding: 10px;
  vertical-align: top;
}
/* Erste Formularzeile buendig zum oberen Rand: Abstand nach oben entsteht
   nur noch durch den Karten-Innenabstand (.form-section) bzw. den Inhalt
   ueber dem Formular — kein zusaetzlicher Leerraum mehr. */
:where(.regform-table tr:first-child .regform-cell) {
  padding-top: 0;
}

:where(.regform-label) { display: block; margin-bottom: 4px; }

:where(.regform-input) {
  width: 95%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
:where(.regform-checkbox) { width: auto; }

/* GDPR-Checkbox: Checkbox links, Text rechts (Flexbox, nicht mittig). */
:where(.regform-consent-label) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  cursor: pointer;
}
:where(.regform-consent-label input[type="checkbox"]) {
  flex: 0 0 auto !important;
  margin-top: 3px !important;
}
:where(.regform-consent-label span) {
  flex: 1 1 auto !important;
  text-align: left !important;
}

:where(.regform-submit) {
  background-color: #0072CE;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}
:where(.regform-submit:hover) { background-color: #005bb5; }

/* GDPR-/Hinweis-Boxen. */
:where(.notice) {
  margin-top: 10px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-size: 0.7em;
  color: #777;
}

/* Serverseitige Validierungs-/Spam-Fehlermeldung ueber dem Formular
   (4-Zustands-Zweig 'Formular' in render_event_body()). Bewusst als
   Klasse statt Inline-Styles: gehoert zum Design-System und kann per
   Event-CSS (page_css/form_css) uebersteuert werden. */
:where(.regform-error) {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #842029;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

:where(.regform-intro) {
  margin-bottom: 16px;
  font-size: 0.9em;
  line-height: 1.5;
}

/* Beschreibung/Untertitel unter einem Eingabefeld (nur wenn ausgefuellt) */
:where(.regform-field-desc) {
  font-size: 0.82em;
  color: #777;
  margin-top: 4px;
  line-height: 1.35;
}

/* Bild rechts neben dem Formular (erste Zeile, rowspan). */
:where(.image-container) { text-align: center; }
:where(.image-container img) {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
:where(.description) {
  text-align: center;
  font-size: 0.9em;
  margin-top: 10px;
}