/* Экраны 5 и 6 воронки — оплата и подтверждение («isPay» / «isSuccess» в
   хендоффе «Nila Quiz White.dc.html»). Та же построчная транскрипция
   inline-стилей в классы, что и в остальных файлах стилей лендинга.

   Поля карты рисует Stripe внутри .nl-pay-mount и .nl-pay-express: своей
   вёрстки у них нет и быть не может — данные карты не должны попадать в наш
   DOM. Всё, что здесь описано вокруг них, — это оправа. */

.nl-pay {
  flex: 1 1 auto; width: 100%; display: flex; justify-content: center;
  padding: clamp(16px, 4vw, 44px) 0 clamp(40px, 6vw, 72px); animation: nlFadeUp 380ms ease both;
}
.nl-pay-card { width: 100%; max-width: 448px; display: flex; flex-direction: column; }

.nl-pay-back {
  appearance: none; background: none; border: 0; cursor: pointer; align-self: flex-start;
  font-family: 'Satoshi', system-ui, sans-serif; font-size: 15px; color: #4A3F35;
  padding: 10px 2px; min-height: 44px; margin-bottom: clamp(6px, 1.4vw, 12px);
  transition: color 160ms ease;
}
.nl-pay-back:hover { color: #17110D; }

.nl-pay-title {
  font-family: Lora, Georgia, serif; font-weight: 400; font-size: clamp(30px, 7vw, 40px);
  line-height: 1.1; letter-spacing: -.018em; color: #17110D;
  margin: 0 0 clamp(20px, 3.4vw, 28px); text-wrap: pretty;
}

/* Разбивка цены: строка плана, строка «Total today», линейка и условия
   продления. Рамка и отступ — на всём блоке, а не на строке: строк теперь
   несколько, и линия должна отделять блок от формы, а не строки друг от друга. */
.nl-pay-breakdown {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: clamp(14px, 2.4vw, 18px); border-bottom: 1px solid #D7E1EF;
  margin-bottom: clamp(20px, 3.4vw, 26px);
}
.nl-pay-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.nl-pay-plan { font-size: clamp(16px, 4vw, 17px); line-height: 1.4; color: #17110D; }
.nl-pay-trial { font-size: clamp(15px, 3.8vw, 16px); line-height: 1.4; color: #4A3F35; flex: 0 0 auto; }
.nl-pay-total { font-family: Lora, Georgia, serif; font-size: clamp(18px, 4.4vw, 20px); line-height: 1.2; color: #17110D; }
.nl-pay-amount { font-family: Lora, Georgia, serif; font-size: clamp(26px, 6vw, 32px); line-height: 1; color: #17110D; flex: 0 0 auto; }
.nl-pay-hr { height: 1px; background: #D7E1EF; }
.nl-pay-terms { margin: 0; font-size: 13px; line-height: 1.5; color: #4A3F35; text-wrap: pretty; }

.nl-pay-form { display: flex; flex-direction: column; gap: 12px; }
.nl-pay-mount { width: 100%; }
/* Express Checkout Element (Apple Pay / Google Pay / Link). Пока кошельки не
   определились, высота держится заранее — иначе кнопка «Pay» прыгает вниз
   через полсекунды после отрисовки формы. */
.nl-pay-express { width: 100%; min-height: 128px; }
.nl-pay-express[data-empty='1'] { min-height: 0; }

/* Здесь нет и не заводится ни одного правила под свои поля карты или свои
   кнопки кошельков: весь платёжный интерфейс рисует Stripe в .nl-pay-mount и
   .nl-pay-express, а стиль под «заглушку» — первый шаг к тому, чтобы заглушка
   появилась. См. SPEC в paymentScreen.js. */

.nl-pay-submit {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Satoshi', system-ui, sans-serif; font-size: 17px; font-weight: 500; color: #17110D;
  background: #E8703C; border-radius: 999px; padding: 18px 26px; min-height: 58px;
  box-shadow: 0 14px 30px -18px rgba(232,112,60,.9); transition: background 180ms ease, transform 180ms ease;
}
.nl-pay-submit:hover { background: #F0824F; transform: translateY(-1px); }
.nl-pay-submit:disabled { background: #E8F0FA; color: #4B607C; cursor: not-allowed; box-shadow: none; transform: none; }

.nl-pay-divider { display: flex; align-items: center; gap: 14px; margin: clamp(8px, 1.6vw, 12px) 0 2px; }
.nl-pay-rule { flex: 1 1 auto; height: 1px; background: #D7E1EF; }
.nl-pay-or { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #4A3F35; }

.nl-pay-busy {
  border: 1px solid #D7E1EF; background: #FFFFFF; border-radius: 20px;
  padding: clamp(20px, 3.4vw, 28px); display: flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 84px;
}
.nl-pay-spinner {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #E4DED6; border-top-color: #E8703C;
  animation: nlSpin 700ms linear infinite; flex: 0 0 auto;
}
.nl-pay-busy-text { font-size: 16.5px; line-height: 1.4; color: #17110D; }

.nl-pay-error {
  margin-top: 14px; border: 1px solid #E0B4A0; background: #FDF3EE; border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.nl-pay-error-text { margin: 0; font-size: 15.5px; line-height: 1.5; color: #8A3A14; text-wrap: pretty; }
.nl-pay-retry {
  appearance: none; background: none; border: 0; cursor: pointer; align-self: flex-start;
  font-family: 'Satoshi', system-ui, sans-serif; font-size: 15px; font-weight: 500;
  color: #8A3A14; text-decoration: underline; min-height: 44px; padding: 0;
}

.nl-pay-secure {
  margin: clamp(20px, 3.4vw, 26px) 0 0; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: #4A3F35; user-select: none;
}

/* --- экран 6: подтверждение --- */
.nl-done {
  flex: 1 1 auto; width: 100%; display: flex; justify-content: center; align-items: center;
  padding: clamp(28px, 6vw, 72px) 0; animation: nlFadeUp 420ms ease both;
}
.nl-done-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nl-done-mark {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #C9DDBC; background: #F3F8EF;
  display: flex; align-items: center; justify-content: center; margin-bottom: clamp(20px, 3.4vw, 26px);
}
/* Собственная dasharray — галочка тут крупнее той, что в чек-листе оффера. */
.nl-done-tick {
  fill: none; stroke: #5D8A3F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 21; stroke-dashoffset: 21;
  animation: nlTick 520ms cubic-bezier(.22,.7,.24,1) 140ms both;
}
.nl-done-title {
  font-family: Lora, Georgia, serif; font-weight: 400; font-size: clamp(30px, 7vw, 40px);
  line-height: 1.1; letter-spacing: -.018em; color: #17110D; margin: 0 0 clamp(12px, 2.2vw, 16px);
}
.nl-done-sub {
  margin: 0 0 clamp(26px, 4vw, 34px); font-size: clamp(16.5px, 4.2vw, 18.5px);
  line-height: 1.55; color: #4A3F35; max-width: 30ch; text-wrap: pretty;
}
.nl-done-cta {
  text-decoration: none; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Satoshi', system-ui, sans-serif; font-size: 17px; font-weight: 500; color: #17110D;
  background: #E8703C; border-radius: 999px; padding: 18px 26px; min-height: 58px;
  box-shadow: 0 14px 30px -18px rgba(232,112,60,.9); transition: background 180ms ease, transform 180ms ease;
}
.nl-done-cta:hover { background: #F0824F; transform: translateY(-1px); color: #17110D; }
.nl-done-note { margin: clamp(16px, 2.6vw, 20px) 0 0; font-size: 15px; line-height: 1.5; color: #4A3F35; }

/* nlTick в funnel.css идёт from dashoffset 17 — здесь у галочки длина 21,
   поэтому конечный кадр задаётся своим правилом, а не общей раскладкой. */
@keyframes nlTickDone { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }
.nl-done-tick { animation-name: nlTickDone; }