/* ============================================================
   components/forms.css
   ============================================================ */

.plx-form-group {
  margin-bottom: var(--plx-space-4);
}

.plx-label {
  display: block;
  font-size: var(--plx-font-size-xs);
  font-weight: 500;
  margin-bottom: var(--plx-space-2);
  color: var(--plx-text-soft);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.plx-input, .plx-select, .plx-textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--plx-radius-md);
  border: 1px solid var(--plx-border-subtle);
  background: rgba(15,23,42,.4);
  color: var(--plx-text-primary);
  font-size: var(--plx-font-size-sm);
  transition: border-color var(--plx-transition-fast), box-shadow var(--plx-transition-fast), background var(--plx-transition-fast);
}

.plx-input::placeholder, .plx-textarea::placeholder {
  color: var(--plx-text-muted);
}

.plx-input:focus, .plx-select:focus, .plx-textarea:focus {
  outline: none;
  border-color: var(--plx-brand-primary);
  box-shadow: 0 0 0 1px rgba(var(--plx-brand-primary-raw), 0.3), var(--plx-glow-blue);
  background: var(--plx-bg-tertiary);
}

.plx-input-error {
  border-color: var(--plx-status-red) !important;
}

.plx-error-text {
  font-size: var(--plx-font-size-xs);
  color: var(--plx-status-red);
  margin-top: var(--plx-space-1);
}

/* Light placeholder text for dark backgrounds */
::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1; /* Firefox fix */
}

/* Vendor prefixes for full compatibility */
::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}