/* dictor.site — страницы покупки и активации.
   Своих цветов и размеров здесь нет: всё через токены из style.css, иначе
   магазин через полгода станет «почти как сайт, но чуть-чуть другой». */

.buy-form { max-width: var(--prose); margin: var(--sp-6) 0 0; }

/* --- выбор тарифа ------------------------------------------------------ */

.buy-plans { border: 0; margin: 0 0 var(--sp-6); padding: 0; }

.buy-plans legend {
  padding: 0;
  margin: 0 0 var(--sp-3);
  font: 600 var(--fs-sm) / 1.4 var(--font-display);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.buy-plan {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-2);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
}

.buy-plan:hover { background: var(--hover); }

/* Выделяем выбранный тариф самим браузером: :has по вложенной радиокнопке
   работает без единой строки скрипта, а класс из PHP держит первый показ. */
.buy-plan:has(input:checked),
.buy-plan.is-on:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.buy-plan input { margin: 0; flex: none; accent-color: var(--accent); }
.buy-plan-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.buy-plan-name { font: 600 var(--fs-base) / 1.35 var(--font-display); }
.buy-plan-note { color: var(--muted); font-size: var(--fs-sm); }
.buy-plan-price { font: 600 var(--fs-lg) / 1.2 var(--font-display); white-space: nowrap; }

/* --- поля -------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.field > label { font-weight: 600; }

.field input[type="email"],
.field input[type="text"] {
  font: inherit;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  max-width: 26em;
}

.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-note { color: var(--muted); font-size: var(--fs-sm); }

.field-code {
  font: 600 24px/1.2 var(--font-mono);
  letter-spacing: 0.3em;
  max-width: 8em !important;
  text-align: center;
}

.field-check { flex-direction: row; }
.field-check label { display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: 400; }
.field-check input { margin-top: 3px; flex: none; accent-color: var(--accent); }

/* --- предупреждения ---------------------------------------------------- */

.banner-test { background: var(--warn-bg); color: var(--warn-text); }

.banner-bad {
  background: color-mix(in srgb, #d70015 8%, var(--bg-alt));
  color: #a3000f;
  border-color: color-mix(in srgb, #d70015 30%, transparent);
}

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

.keybox {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.keybox code {
  font: 600 var(--fs-base) / 1.6 var(--font-mono);
  word-break: break-all;
  user-select: all;   /* один клик выделяет ключ целиком */
}

.steps { margin: var(--sp-5) 0; padding-left: 1.4em; }
.steps li { margin: 0 0 var(--sp-3); }

.stub-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; }

@media (prefers-color-scheme: dark) {
  .banner-bad {
    background: color-mix(in srgb, #ff453a 14%, var(--bg-alt));
    color: #ff6961;
  }
}