/* ================================================================
   COMPONENT: Text Box Input
   FILE: components/textbox/textbox.css
   ================================================================ */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ui-field__label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.ui-field__req {
  color: var(--ui-error);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.ui-field__ctrl {
  position: relative;
  display: flex;
  align-items: center;
}

.ui-field__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--ui-text-1);
  background: var(--ui-surface);
  border: 1.5px solid var(--ui-border);
  border-radius: var(--r-md);
  outline: none;
  appearance: none;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base);
}

.ui-field__input::placeholder { color: var(--ui-text-4); }

.ui-field__input:hover:not(:focus):not(:disabled) {
  border-color: var(--ui-border-mid);
}

.ui-field__input:focus {
  border-color: var(--ui-border-focus);
  box-shadow: var(--sh-focus);
  background: var(--ui-white);
}

.ui-field__input:disabled {
  background: var(--ui-surface-alt);
  color: var(--ui-text-3);
  cursor: not-allowed;
  opacity: 0.65;
}

.ui-field__hint {
  font-size: 12px;
  color: var(--ui-text-3);
  line-height: 1.5;
}

.ui-field__err {
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-error);
  display: none;
  line-height: 1.4;
}

/* ---- Error state ---- */
.ui-field--error .ui-field__input {
  border-color: var(--ui-error);
  background: var(--ui-error-bg);
}
.ui-field--error .ui-field__input:focus {
  box-shadow: 0 0 0 3px var(--ui-error-glow);
}
.ui-field--error .ui-field__err  { display: block; }
.ui-field--error .ui-field__hint { display: none;  }

/* ---- Success state ---- */
.ui-field--success .ui-field__input { border-color: var(--ui-success); }