/* ===== Subscription page =====
   Layout only — colours, buttons, inputs and error styles come from style.css
   so this page cannot drift from the rest of the site. */

/* .btn sets an explicit display, which beats the browser's own
   [hidden] { display: none } — without this a hidden button stays on screen. */
[hidden] { display: none !important; }

.pay-body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* Wide enough for the two plan cards; the other steps stay narrow via
   .pay-card's own max-width. */
.pay-wrap {
  width: 100%;
  max-width: 880px;
}

.pay-logo {
  display: block;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  text-align: center;
}
.pay-logo:hover { text-decoration: none; color: var(--accent); }

.pay-card {
  padding: 32px 28px;
  max-width: 520px;
  margin: 0 auto;
}
.pay-card-wide { max-width: none; }

.pay-title {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

.pay-lead {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 22px;
}

.pay-form .form-row { margin-bottom: 12px; }

.pay-code-input {
  text-align: center;
  font-size: 22px;
  letter-spacing: 8px;
  font-weight: 600;
}

.pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.pay-actions .btn { flex: 1 1 auto; }

/* ===== Plans ===== */
.pay-plans {
  display: grid;
  gap: 16px;
  margin-bottom: 8px;
  /* minmax(0, 1fr) instead of the default 1fr: a grid track refuses to shrink
     below its content, so one wide child would push the whole page sideways. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .pay-plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.pay-plan {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card-alt);
}
.pay-plan-featured { border-color: var(--border-strong); }

.pay-plan h2 {
  font-size: 18px;
  font-weight: 700;
}

.pay-price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.pay-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.pay-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
  /* Push the buttons of both cards onto the same line. */
  flex: 1 1 auto;
}
.pay-features li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-muted);
}
.pay-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-green);
}

.pay-buy {
  width: 100%;
  /* .btn forbids wrapping, and "1 990 ₽ за год — выгоднее на 17%" does not fit
     a phone on one line — it dragged the page 36px wider than the screen. */
  white-space: normal;
}
.pay-buy + .pay-buy { margin-top: 8px; }

.pay-confirm {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-card-alt);
}
.pay-confirm p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.pay-confirm .pay-actions { margin-top: 0; }

.pay-disclaimer { margin-top: 18px; }

/* ===== Spinner ===== */
.pay-spinner {
  width: 28px;
  height: 28px;
  margin: 8px auto 0;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pay-spin 0.8s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pay-spinner { animation-duration: 3s; }
}

/* ===== Footer ===== */
.pay-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 13px;
}
.pay-footer a { color: var(--text-dim); }
.pay-footer a:hover { color: var(--text-muted); }