/**
 * widgets-forms.css - Formular-Styles
 * Alle Formular-Elemente
 */

/* Formular-Container */
.widget-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
}

/* Formular-Titel */
.widget-form-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: 15px;
  text-align: center;
}

/* Formular-Beschreibung */
.widget-form-description {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  margin-bottom: 30px;
  text-align: center;
  line-height: var(--line-height-body);
}

/* Formular-Gruppe */
.widget-form-group {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
}

/* Label */
.widget-form-label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
  padding-right: 10px;
}

.widget-form-label-required::after {
  content: '*';
  color: var(--color-error);
  margin-left: 5px;
}

/* Input, Textarea, Select */
.widget-form-input,
.widget-form-textarea,
.widget-form-select,
.widget-input-text,
.widget-select {
  width: 100%;
  padding: 12px 15px;
  font-size: var(--font-size-body);
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.widget-form-input:focus,
.widget-form-textarea:focus,
.widget-form-select:focus,
.widget-input-text:focus,
.widget-select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

.widget-form-input::placeholder,
.widget-form-textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* Textarea */
.widget-form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Fehler-State */
.widget-form-input-error,
.widget-form-textarea-error,
.widget-form-select-error {
  border-color: var(--color-error);
}

/* Fehler-Nachricht */
.widget-form-error-message {
  grid-column: 2;
  color: var(--color-error);
  font-size: var(--font-size-small);
  margin-top: 5px;
}

/* Button-Bereich */
.widget-form-actions {
  grid-column: 1 / -1;
  margin-top: 20px;
  text-align: center;
}

/* Responsive */
@media (max-width: 576px) {
  .widget-form {
    padding: 20px;
  }
  
  .widget-form-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .widget-form-label {
    text-align: left;
    padding-right: 0;
  }
  
  .widget-form-error-message {
    grid-column: 1;
  }
}