.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-heading);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-heading);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-dim);
}

.form__input:hover,
.form__select:hover,
.form__textarea:hover {
  border-color: var(--color-border-hover);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.form__input:disabled,
.form__select:disabled,
.form__textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__error {
  font-size: var(--text-sm);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form__hint {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Checkbox / Radio */
.form__check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.form__check-input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

.form__check-label {
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

/* File input — bez tego wygląda ohydnie domyślnie */
.form__input[type="file"] {
  padding: var(--space-2) var(--space-2);
  font-family: var(--font-body);
  cursor: pointer;
}

.form__input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(241, 236, 219, 0.20);
  border-radius: 9999px;
  background-color: transparent;
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.form__input[type="file"]::file-selector-button:hover {
  border-color: var(--color-ball-yellow);
  color: var(--color-ball-yellow);
}

/* Compact size — inline forms w listach / akcje per-row */
.form__input--sm,
.form__select--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  width: auto;
}

/* Variant: na kremowym tle (np. dla profile edit gdy karta cream) */
.form--on-cream .form__label {
  color: var(--color-ink);
}

.form--on-cream .form__input,
.form--on-cream .form__select,
.form--on-cream .form__textarea {
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--color-ink);
  border-color: rgba(11, 19, 48, 0.15);
}

.form--on-cream .form__input::placeholder,
.form--on-cream .form__textarea::placeholder {
  color: rgba(11, 19, 48, 0.40);
}

.form--on-cream .form__hint {
  color: rgba(11, 19, 48, 0.55);
}