/* ==========================================================================
   Form Inputs — MBA ACT
   Source: Figma component sets (Text input, Text Area, Select)
   All inputs: 1px border, 2px radius, 16px font, 8px 12px padding
   ========================================================================== */

/* --------------------------------------------------------------------------
   Form Group — label + input wrapper
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px */
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-sm-lh);
  color: var(--text);
}

.form-label--required::after {
  content: " *";
  color: var(--color-tangerine);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-tangerine-dark);
}

/* --------------------------------------------------------------------------
   Shared input base
   -------------------------------------------------------------------------- */
.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--text);
  background-color: transparent;
  border: 1px solid var(--color-navy-light); /* #545b68 */
  border-radius: var(--radius-xs); /* 2px */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-dark-60); /* rgba(13,11,0,0.6) */
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

/* Focus */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-tangerine);
  box-shadow: 0 0 0 2px var(--color-tangerine-lightest);
}

/* Error */
.form-input--error,
.form-textarea--error,
.form-select--error {
  border-color: var(--color-tangerine-dark);
}

.form-input--error:focus,
.form-textarea--error:focus,
.form-select--error:focus {
  box-shadow: 0 0 0 2px var(--color-tangerine-lighter);
}

/* Disabled */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--color-neutral-lightest);
}

/* --------------------------------------------------------------------------
   Text Input — specific
   -------------------------------------------------------------------------- */
.form-input {
  height: 48px;
}

/* Input with icon */
.form-input-wrap {
  position: relative;
}

.form-input-wrap .form-input {
  padding-right: 44px;
}

.form-input-wrap .form-input--icon-left {
  padding-left: 44px;
  padding-right: 12px;
}

.form-input-wrap .form-input--icon-both {
  padding-left: 44px;
  padding-right: 44px;
}

.form-input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text);
  pointer-events: none;
}

.form-input-icon--left {
  left: 12px;
}

.form-input-icon--right {
  right: 12px;
}

/* --------------------------------------------------------------------------
   Textarea
   -------------------------------------------------------------------------- */
.form-textarea {
  min-height: 180px;
  padding: 12px;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   Select
   -------------------------------------------------------------------------- */
.form-select {
  height: 48px;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230b1628' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px;
  cursor: pointer;
}

/* Select with left icon */
.form-select--icon {
  padding-left: 44px;
}

.form-select-wrap {
  position: relative;
}

.form-select-wrap .form-select-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Dark background variants (.scheme-navy)
   -------------------------------------------------------------------------- */
.scheme-navy .form-input,
.scheme-navy .form-textarea,
.scheme-navy .form-select {
  color: var(--color-white);
  border-color: var(--color-white);
}

.scheme-navy .form-input::placeholder,
.scheme-navy .form-textarea::placeholder {
  color: var(--color-white-60);
}

.scheme-navy .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}

.scheme-navy .form-input:focus,
.scheme-navy .form-textarea:focus,
.scheme-navy .form-select:focus {
  border-color: var(--color-tangerine);
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.3);
}

.scheme-navy .form-label {
  color: var(--color-white);
}

.scheme-navy .form-hint {
  color: var(--color-white-60);
}

.scheme-navy .form-select-icon,
.scheme-navy .form-input-icon {
  color: var(--color-white);
}