/* ============================================================
   Атомы форм: поля, чекбокс, кнопки, ссылки
   ============================================================ */

/* --- Поле ввода --- */
.field { margin-bottom: var(--sp-4); }
.field__label {
  display: block; font-size: var(--fz-13); color: var(--c-text-2);
  margin-bottom: var(--sp-2);
}
.field__control { position: relative; }
.input {
  width: 100%; height: 48px;
  padding: 0 var(--sp-4);
  background: var(--c-field-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--fz-14);
  transition: border-color .15s ease;
}
.input::placeholder { color: var(--c-muted); }
.input:focus { outline: none; border-color: var(--c-primary); }
.input.has-icon { padding-right: 44px; }

/* Кнопка показа пароля внутри поля */
.input-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--c-muted); line-height: 0;
}
.input-eye:hover { color: var(--c-text-2); }

/* select со стрелкой */
.select { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B7B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* --- Чекбокс (checkbox_info) --- */
.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  font-size: var(--fz-14); color: var(--c-text); user-select: none; }
.checkbox__box {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--c-border-strong); border-radius: 4px;
  background: var(--c-surface); position: relative;
}
.checkbox input { position: absolute; opacity: 0; }
.checkbox input:checked + .checkbox__box { background: var(--c-primary); border-color: var(--c-primary); }
.checkbox input:checked + .checkbox__box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* --- Радио (radio) --- */
.radio { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; padding: var(--sp-2) 0; }
.radio input { position: absolute; opacity: 0; }
.radio__dot { width: 18px; height: 18px; border: 1px solid var(--c-border-strong); border-radius: 50%; position: relative; flex: 0 0 auto; background: #fff; }
.radio input:checked + .radio__dot { border-color: var(--c-primary); }
.radio input:checked + .radio__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-primary); }
.radio input:focus-visible + .radio__dot { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.radio__hint { color: var(--c-muted); font-size: var(--fz-12); }

/* --- Кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 48px; padding: 0 var(--sp-6);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fz-16); font-weight: var(--fw-medium);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-primary-dark); }
.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--outline:hover { background: rgba(37,99,214,.06); }
.btn--muted { background: var(--c-disabled); color: #fff; }   /* «Войти» в макете */
.btn--muted:hover { background: #949ba3; }
.btn--danger { background: var(--c-accent); color: #fff; }     /* «Перейти к оплате» */
.btn--danger:hover { background: var(--c-accent-dark); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* --- Текстовые ссылки-действия --- */
.link-row { display: flex; gap: var(--sp-6); margin-top: var(--sp-4); }
.link { color: var(--c-link); font-size: var(--fz-13); text-decoration: underline; }