/* Styles für das VJM‑Formular */
.vjm-form { margin: 1em 0; }
.vjm-form fieldset { border: 1px solid #ccc; padding: 1em; margin-bottom: 1em; }
.vjm-form label { display: block; margin-bottom: 0.25em; font-weight: bold; }
.vjm-form .required { color: red; }
.vjm-form input,
.vjm-form select,
.vjm-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.4em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  box-sizing: border-box;
}

/* === VJM Consent and Theme Styles === */
/* Consent: Checkbox left, HTML text right */
.vjm-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vjm-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.vjm-consent label a {
  color: #0073aa;
  text-decoration: underline;
}

/* === Form Themes === */
/* Standard theme inherits base styles; we add minor enhancements */
.vjm-form.vjm-theme-standard .vjm-group {
  background: #fff;
  border: 1px solid #e5e5e5;
}
.vjm-form.vjm-theme-standard .vjm-submit {
  background: #0073aa;
  border: none;
  color: #fff;
}

/* Airy Theme: more whitespace and lighter appearance */
.vjm-form.vjm-theme-airy {
  font-size: 17px;
}
.vjm-form.vjm-theme-airy .vjm-group {
  padding: 1.25em;
  border: 1px solid #edf0f2;
  box-shadow: none;
}
.vjm-form.vjm-theme-airy input,
.vjm-form.vjm-theme-airy select,
.vjm-form.vjm-theme-airy textarea {
  padding: 14px 16px;
  border-radius: 12px;
}

/* Card Theme: card-like groups with soft shadow */
.vjm-form.vjm-theme-card .vjm-group {
  border: 1px solid #e9eef3;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
}
.vjm-form.vjm-theme-card .vjm-submit {
  background: linear-gradient(180deg, #1e89e5, #0b5cab);
  border: 1px solid #0b5cab;
  border-radius: 12px;
  color: #fff;
}

/* Outline Theme: minimal with dashed lines */
.vjm-form.vjm-theme-outline .vjm-group {
  background: #fff;
  border: 1px dashed #cbd5e1;
  box-shadow: none;
}
.vjm-form.vjm-theme-outline input,
.vjm-form.vjm-theme-outline select,
.vjm-form.vjm-theme-outline textarea {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
.vjm-form.vjm-theme-outline .vjm-submit {
  background: #111827;
  border-radius: 6px;
  color: #fff;
}

/* Dark Theme: dark backgrounds with light text */
.vjm-form.vjm-theme-dark {
  background: #0f172a;
  padding: 16px;
  border-radius: 12px;
  color: #e5e7eb;
}
.vjm-form.vjm-theme-dark .vjm-group {
  background: #0b1220;
  border: 1px solid #1f2937;
  color: #e5e7eb;
}
.vjm-form.vjm-theme-dark label {
  color: #e5e7eb;
}
.vjm-form.vjm-theme-dark input,
.vjm-form.vjm-theme-dark select,
.vjm-form.vjm-theme-dark textarea {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
}
.vjm-form.vjm-theme-dark .vjm-submit {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border: 1px solid #1d4ed8;
  color: #fff;
}
.vjm-form.vjm-theme-dark .vjm-consent label a {
  color: #93c5fd;
}
.vjm-form .vjm-submit { padding: 0.6em 1.2em; }

/* Flexibles Layout: Gruppen als Container mit Spaltenlogik */
.vjm-group {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1em;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.vjm-group legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.vjm-field {
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
.vjm-col-1 { flex: 1 1 100%; }
.vjm-col-2 { flex: 1 1 calc(50% - 0.5rem); min-width: 200px; }
.vjm-col-3 { flex: 1 1 calc(33.333% - 0.5rem); min-width: 180px; }

/* Neue Reihen im Formular – richten Felder nebeneinander aus */
.vjm-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  /* Felder in einer Zeile nicht umbrechen – so bleiben Tag/Monat/Jahr nebeneinander */
  flex-wrap: nowrap;
}

/* Stil für Labels und Eingaben im modernen Look */
.vjm-field label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: #333;
}

.vjm-submit {
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 0.5rem;
}
.vjm-submit:hover {
  background-color: #005f8d;
}

/* ------------------------------------------------------------------ */
/* Responsive adjustments for smaller screens                          */
/* On very narrow viewports (below 480px) we allow form fields to     */
/* wrap onto multiple lines and use 100% width. We also increase      */
/* padding and font size on inputs and buttons for better touch       */
/* targets.                                                           */
@media (max-width: 479px) {
  /* Wrap fields within a row on mobile devices */
  .vjm-row {
    flex-wrap: wrap;
  }
  /* Force multi‑column fields to full width on mobile */
  .vjm-col-2,
  .vjm-col-3 {
    flex: 1 1 100%;
  }
  /* Increase padding and font size for inputs and selects */
  .vjm-form input,
  .vjm-form select,
  .vjm-form textarea {
    padding: 0.6em;
    font-size: 16px;
  }
  /* Ensure submit button spans full width and is easier to tap */
  .vjm-form .vjm-submit {
    width: 100%;
    padding: 0.8em;
    font-size: 16px;
  }
}