/* ============================================================
   PAYMENT — последний экран, форма захвата
   Три колонки: form-card слева, photo Алины в gradient-border
   по центру, столбец 3 glass-widgets справа с dashed connectors.
   ============================================================ */

.payment {
  position: relative;
  padding-top: clamp(68px, 10vh, 119px);
  padding-bottom: clamp(85px, 12vh, 136px);
}

/* Локальный radial-blob фон (.payment::before) удалён — секция
   получает фон из глобальной зебры в shared.css (payment = tinted). */

/* ----- HEAD — центрированный заголовок над layout'ом ----- */
.payment__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  text-align: center;
  max-width: 646px;
  margin: 0 auto clamp(34px, 5vh, 54px);
}

.payment__title {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04;
  text-align: center;
}

.payment__lead {
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 459px;
  margin: 0 auto;
  text-align: center;
}

/* ----- LAYOUT — 3 колонки. Photo шире чем form, чтобы лицо
   Алины было визуальным центром секции. ----- */
.payment__layout {
  /* Упрощённый layout — только форма по центру.
     Фото и .payment__widgets теперь hidden, занимают одну колонку 480px. */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* ----- LEFT: только форма-карточка + support ----- */
.payment__left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
}

/* ----- FORM CARD ----- */
.payment__form {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  box-shadow:
    0 31px 60px -31px rgba(28,34,54,0.28),
    0 5px 15px -7px rgba(28,34,54,0.08);
  border: 1px solid var(--hairline);
}

/* ----- Выбранный тариф — мини-чип над email-полем.
   Заполняется JS-ом из sessionStorage. Подсвечивает текущий выбор
   и даёт ссылку «изменить» обратно к секции тарифов. ----- */
.payment__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  background:
    linear-gradient(135deg,
      rgba(255, 122, 69, 0.07) 0%,
      rgba(233, 74, 161, 0.09) 50%,
      rgba(155, 95, 223, 0.10) 100%);
  border: 1px solid rgba(233, 74, 161, 0.18);
  position: relative;
}
.payment__plan::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(233, 74, 161, 0.15);
  margin-right: 2px;
}
.payment__plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.payment__plan-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.payment__plan-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.payment__plan-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.payment__plan-price {
  font-size: 17px;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.payment__plan-change {
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(28, 34, 54, 0.25);
  transition: color .2s ease, border-color .2s ease;
}
.payment__plan-change:hover {
  color: var(--g2);
  border-bottom-color: var(--g2);
}

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

.payment__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.payment__input {
  appearance: none;
  width: 100%;
  padding: 14px 17px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.payment__input::placeholder { color: var(--ink-mute); font-weight: 400; }
.payment__input:focus {
  outline: none;
  border-color: var(--g2);
  box-shadow: 0 0 0 4px rgba(233,74,161,0.12);
}

/* ----- CHECKBOXES ----- */
.payment__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment__check {
  display: flex;
  align-items: flex-start;     /* checkbox на 1-й строке многострочного текста */
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.payment__check > span:last-child { padding-top: 1px; }
.payment__check a {
  color: var(--g2);
  text-decoration: none;
  border-bottom: 1px dashed rgba(233,74,161,0.4);
  padding-bottom: 1px;
}
.payment__check a:hover { border-bottom-style: solid; }

.payment__check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 19px;
  height: 19px;
  margin: 0;
  cursor: pointer;
}
.payment__check-box {
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid rgba(28,34,54,0.18);
  flex-shrink: 0;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
/* Галочка — SVG, чтобы линия была ровной на любом размере/масштабе.
   Раньше была собрана из двух border'ов с rotate(42deg) и выглядела «колено». */
.payment__check-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.8 11.7 12.5 5'/%3E%3C/svg%3E");
  background-size: 76% 76%;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(0);
  transition: transform .18s cubic-bezier(.4,1.4,.6,1);
}
.payment__check input:checked ~ .payment__check-box {
  background: var(--grad);
  border-color: transparent;
}
.payment__check input:checked ~ .payment__check-box::after {
  transform: scale(1);
}
.payment__check input:focus-visible ~ .payment__check-box {
  box-shadow: 0 0 0 4px rgba(233,74,161,0.18);
}

/* ----- Обязательная галочка (согласие на оферту/ПДн) -----
   Маленький gradient-* как визуальный маркер «нужно отметить».
   В error-состоянии: коробочка краснеет + shake-анимация + появляется
   подсказка под чекбоксами. Снимается, как только юзер ставит галочку. */
.payment__check-required-mark {
  display: inline;
  margin-left: 2px;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.payment__check--required.is-error .payment__check-box {
  border-color: #e94aa1;
  background: rgba(233, 74, 161, 0.06);
  box-shadow: 0 0 0 4px rgba(233, 74, 161, 0.14);
}
.payment__check--required.is-shake {
  animation: paymentConsentShake .42s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes paymentConsentShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.payment__check-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -2px 0 4px 29px;     /* 19px коробка + 10px gap = 29px — выравниваем под текст */
  font-size: 12px;
  line-height: 1.4;
  color: #e94aa1;
  font-weight: 500;
  animation: paymentConsentErrorFade .25s ease-out both;
}
.payment__check-error[hidden] { display: none; }
.payment__check-error svg { flex-shrink: 0; }
@keyframes paymentConsentErrorFade {
  0%   { opacity: 0; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ----- CTA ----- */
.payment__cta {
  appearance: none;
  border: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 49px;
  padding: 0 48px 0 17px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 15px 34px -14px rgba(233,74,161,0.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.payment__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 19px 41px -14px rgba(233,74,161,0.70);
}
.payment__cta:active { transform: translateY(0); }
.payment__cta-text { white-space: nowrap; }
.payment__cta-arrow {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  transition: transform .2s ease;
}
.payment__cta:hover .payment__cta-arrow { transform: translate(2px, -50%); }

/* SUPPORT */
.payment__support {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.payment__support a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.payment__support a:hover { color: var(--g2); }

/* ----- PHOTO (gradient-border, +1° tilt) ----- */
.payment__photo {
  position: relative;
  width: 100%;
  background: var(--grad);
  padding: 5px;
  border-radius: 24px;
  transform: rotate(1.4deg);
  box-shadow:
    0 34px 68px -29px rgba(28,34,54,0.42),
    0 8px 20px -8px rgba(28,34,54,0.18);
}
.payment__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 19px;
}

/* ----- DASHED CONNECTORS — CSS-пунктир от left-края каждой
   widget'ы влево до photo. Гарантированное попадание т.к. крепится
   к самому widget'у, а не к произвольным координатам viewBox. ----- */

/* ----- WIDGETS COLUMN ----- */
.payment__widgets {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-self: center;
  position: relative;
  z-index: 1;
}

.pwidget {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 17px;
  padding: 14px 15px;
  box-shadow:
    0 15px 31px -17px rgba(28,34,54,0.18),
    0 4px 8px -4px rgba(28,34,54,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: rotate(-1deg);
}
/* CSS-пунктир из widget влево к photo */
.pwidget::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: calc(clamp(20px, 3vw, 37px) + 12px);
  height: 2px;
  background: repeating-linear-gradient(to right,
    rgba(28,34,54,0.28) 0 4px,
    transparent 4px 8px);
  transform: translateY(-50%);
  margin-right: 5px;
  pointer-events: none;
}
.pwidget:nth-child(2) { transform: rotate(0.8deg); }
.pwidget:nth-child(3) { transform: rotate(-0.6deg); }

.pwidget--row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* ----- COMMON widget bits ----- */
.pwidget__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pwidget__hint {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ----- COUNTER widget ----- */
.pwidget__counter {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 2px;
}
.pwidget__plus {
  font-size: 20px;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.pwidget__big {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.pwidget__big--grad { font-size: 24px; }

.pwidget__caption {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.pwidget__avatars {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.pwidget__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px -2px rgba(28,34,54,0.20);
}
.pwidget__avatar + .pwidget__avatar { margin-left: -8px; }
.pwidget__more {
  margin-left: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--g3);
  background: linear-gradient(135deg, rgba(255,122,69,0.10), rgba(233,74,161,0.10), rgba(155,95,223,0.10));
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ----- ROW widgets (countdown / gesscoin) ----- */
.pwidget__icon {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 14px;
  background: var(--grad);
  box-shadow: 0 7px 15px -8px rgba(233,74,161,0.45);
  color: #fff;
}
.pwidget__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pwidget__line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
  white-space: nowrap;
}
.pwidget__unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================
   ADAPTIVE
   ============================================================ */
@media (max-width: 935px) {
  .payment__layout {
    grid-template-columns: minmax(323px, 1fr) 238px 170px;
    gap: 24px;
  }
}

@media (max-width: 765px) {
  .payment__layout {
    grid-template-columns: 1fr;
    gap: 31px;
    text-align: left;
  }
  .payment__left { order: 1; align-items: stretch; max-width: 442px; margin: 0 auto; width: 100%; }
  .payment__photo { order: 2; max-width: 272px; margin: 0 auto; transform: rotate(1deg); }
  .payment__connectors { display: none; }
  .payment__widgets {
    order: 3;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 442px;
    margin: 0 auto;
  }
  .pwidget { flex: 1 1 170px; transform: none !important; }
}

@media (max-width: 476px) {
  .payment__title { font-size: 31px; }
  .payment__form { padding: 19px; }
  .payment__cta { padding: 0 50px; font-size: 12px; letter-spacing: 0.18em; }
  .payment__cta-arrow { width: 34px; height: 34px; }
}