/* Только страницы Medium и Premium.
   Общие оформление и поведение подключаются из готового проекта:
   styles.css, donation.css, registration.css, script.js, donation.js. */

.paid-registration-page .donation-hero {
  padding-bottom: clamp(30px, 3vw, 48px);
}

.paid-registration-page .paid-title {
  max-width: 1150px;
  font-size: clamp(42px, 4.7vw, 74px);
  text-wrap: balance;
}

.paid-registration-page .paid-intro {
  max-width: 1040px;
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1.35;
}

.paid-registration-page .paid-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 24px;
}

.paid-registration-page .paid-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: 100%;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(255 255 255 / .88);
  font-size: 20px;
  line-height: 1.3;
}

.paid-registration-page .paid-amount strong {
  font-size: 32px;
  white-space: nowrap;
}

.paid-registration-page .paid-form-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--blue);
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none;
  text-underline-offset: 5px;
}

.paid-registration-page .paid-form-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 220ms var(--ease);
}

.paid-registration-page .paid-form-section {
  margin-top: clamp(40px, 4.6vw, 72px);
  scroll-margin-top: 24px;
}

.paid-registration-page .paid-form-heading {
  width: min(100%, 1000px);
  margin: 0 auto 26px;
}

.paid-registration-page .paid-form-heading h2 {
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  text-wrap: balance;
}

.paid-registration-page .paid-form-heading p {
  margin-top: 13px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.4;
}

/* Плавный переход действует только при явном выборе ссылки. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.paid-registration-page) { scroll-behavior: smooth; }
}

@media (hover: hover) and (pointer: fine) {
  .paid-registration-page .paid-form-link:hover { text-decoration: underline; }
  .paid-registration-page .paid-form-link:hover svg { transform: translateY(3px); }
}

@media (max-width: 600px) {
  .paid-registration-page .paid-title { font-size: clamp(32px, 8vw, 44px); }
  .paid-registration-page .paid-intro { font-size: 20px; }
  .paid-registration-page .paid-summary { margin-top: 22px; gap: 12px 20px; }
  .paid-registration-page .paid-amount { padding: 12px 17px; font-size: 18px; }
  .paid-registration-page .paid-amount strong { font-size: 28px; }
  .paid-registration-page .paid-form-link { font-size: 18px; }
  .paid-registration-page .paid-form-section { width: calc(100% - 24px); }
  .paid-registration-page .paid-form-heading { padding-inline: 8px; margin-bottom: 22px; }
  .paid-registration-page .paid-form-heading h2 { font-size: 29px; }
  .paid-registration-page .paid-form-heading p { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .paid-registration-page .paid-form-link svg { transition: none; transform: none !important; }
}