/*
 * Страница отмены подписки (FR-7). Общее — в base.css: тема, карточки, .cta, каркас
 * в одну колонку. Здесь только поля формы, подсказки и блок с результатом.
 *
 * Как и на остальных страницах, правила написаны под узкий экран: на широком меняется
 * только ширина колонки, она задана в base.css.
 */

.cancel-title {
  font-size: 22px;
  font-weight: 800;
}

.cancel-intro .cancel-note {
  margin-top: 10px;
}

.cancel-note {
  color: var(--text-muted);
  font-size: 13px;
}

/* --- форма --- */

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

.cancel-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cancel-label {
  font-size: 14px;
  font-weight: 700;
}

.cancel-input {
  width: 100%;
  padding: 12px var(--gap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
}

.cancel-input::placeholder {
  color: var(--text-muted);
}

.cancel-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Четыре цифры и шесть цифр кода: короткое поле крупными символами. */
.cancel-input-last4,
.cancel-input-code {
  max-width: 180px;
  letter-spacing: 0.22em;
  text-align: center;
}

.cancel-hint {
  color: var(--text-muted);
  font-size: 12px;
}

.cancel-error {
  color: var(--danger);
  font-size: 13px;
}

/* Ответ сервера на запрос кода: один и тот же текст во всех случаях (FR-7, п. 2). */
.cancel-sent {
  font-size: 14px;
}

/* --- результат --- */

.cancel-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cancel-done-title {
  font-size: 18px;
  font-weight: 700;
}

/* --- ссылка на кабинет платёжного сервиса (FR-7, п. 6) --- */

.cancel-cp-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 14px;
  word-break: break-all;
}

/* Кнопка на время запроса: видно, что нажатие принято. */
.cta[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}