/* Пейвол соло-режима: шторка поверх экрана (см. js/client/solo-paywall.js) */

/* Выше обзорного тура: оплата — это ответ на действие человека, и она не должна
   оказаться под подсказкой. Вес [class] — потому что слой подключён позже. */
[class].spw-overlay {
  z-index: var(--ui-z-paywall);
}

.spw-body {
  padding: var(--ui-s-2) var(--ui-s-5) var(--ui-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-s-3);
}

.spw-title {
  font-size: var(--ui-t-xl);
  font-weight: 800;
  color: var(--ui-text);
  line-height: 1.25;
}

.spw-text {
  font-size: var(--ui-t-md);
  line-height: 1.45;
  color: var(--ui-text-3);
}

.spw-perks {
  list-style: none;
  margin: 0;
  padding: var(--ui-s-3) var(--ui-s-4);
  border-radius: var(--ui-r-md);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  display: flex;
  flex-direction: column;
  gap: var(--ui-s-2);
}

.spw-perk {
  font-size: var(--ui-t-md);
  color: var(--ui-text);
}

.spw-price {
  display: flex;
  align-items: baseline;
  gap: var(--ui-s-2);
  flex-wrap: wrap;
}

.spw-price__v {
  font-size: var(--ui-t-2xl);
  font-weight: 800;
  color: var(--ui-accent);
}

.spw-price__l {
  font-size: var(--ui-t-xs);
  color: var(--ui-text-2);
}

.spw-auto {
  display: flex;
  align-items: center;
  gap: var(--ui-s-3);
  font-size: var(--ui-t-md);
  color: var(--ui-text-3);
}

.spw-error:empty {
  display: none;
}

.spw-error {
  font-size: var(--ui-t-sm);
  color: var(--ui-danger);
}