/* Плашка відмови (paywall.js). Свій шар поверх усього: під нею може
   лишатись відкрита форма угоди, і псувати її вигляд не можна. */

.pw-back{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  animation:pwIn .18s var(--ease, ease) both;
}

.pw-w{
  width:100%; max-width:392px; padding:30px 30px 22px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:pwUp .22s var(--ease, ease) both;
}

.pw-w h3{margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-.01em}
.pw-w p{margin:0 0 20px; font-size:13px; line-height:1.6; color:var(--dim)}

.pw-go{
  display:block; width:100%; padding:12px 0; border-radius:9px; border:none;
  background:var(--accent); color:var(--accent-ink, #fff);
  font-size:14px; font-weight:500; cursor:pointer;
  transition:opacity .2s var(--ease, ease);
}
.pw-go:hover{opacity:.88}
.pw-go:active{transform:translateY(1px)}

.pw-later{
  display:block; width:100%; text-align:center; margin-top:14px;
  font-size:12.5px; color:var(--faint); background:none; border:none; cursor:pointer;
}
.pw-later:hover{color:var(--dim)}

@keyframes pwIn{from{opacity:0} to{opacity:1}}
@keyframes pwUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .pw-back, .pw-w{animation:none}
}

@media (max-width:560px){
  .pw-back{align-items:flex-end; padding:0}
  .pw-w{max-width:none; border-radius:16px 16px 0 0; border-bottom:none;
        padding:26px 20px calc(20px + env(safe-area-inset-bottom))}
}

/* ---- докупка бектест-перенесень: лічильник і ползунок ----
   Та сама картка .pw-w, тільки всередині замість одного рядка тексту —
   скільки перенесень береш, почому вони виходять і кнопка з сумою.
   Окремого вікна не робимо: людина впирається в межу посеред
   перенесення, і вести її звідси нікуди.

   Головне тут — число. Першу версію зробили сумою вперед, і виходило
   дивно: людина тягне ползунок, а скільки саме набрала — ніде не
   написано. */

/* Дві половини замість рядка по центру: число впирається в середину
   справа, слово починається від середини зліва. Інакше «3» і «20»
   різної ширини, і підпис при кожній цифрі сіпається вбік. */
.pw-pack .pk-count{
  display:grid; grid-template-columns:1fr 1fr; align-items:baseline;
  gap:9px; margin:0 0 4px;
}
.pw-pack .pk-n{
  font-family:var(--mono); font-size:62px; font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--text);
  text-align:right; transition:filter .13s linear,
              transform .13s var(--ease, ease);
}
.pw-pack .pk-word{font-size:14px; color:var(--dim)}

/* Два стовпці назавжди, і висота рядка теж стала. Пилюля вигоди
   з'являється на четвертому перенесенні, і поки вона то була, то
   не була, від неї сіпався текст і підростала вся картка: пилюля
   вища за рядок на кілька пікселів. Тому місце під неї стоїть
   завжди, а поки вигоди немає — вона просто невидима.
   nowrap тут не про красу: у вузькому стовпці «вигода 29%»
   переносилось на другий рядок і картка стрибала ще сильніше. */
.pw-pack .pk-sum{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:8px; margin:0 0 20px; min-height:22px;
  font-size:12.5px; color:var(--dim);
}
.pw-pack .pk-each{text-align:right; white-space:nowrap}
.pw-pack .pk-off{
  justify-self:start; white-space:nowrap;
  padding:2px 8px; border-radius:99px; font-size:11px; font-weight:500;
  color:var(--accent); background:var(--accent-soft);
  font-variant-numeric:tabular-nums;
}

.pw-pack .pk-row{display:flex; align-items:center; gap:12px}

/* «−» і «+» — для тих, кому ползунком незручно потрапити в рівно 14. */
.pw-pack .pk-step{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--dim);
  font:inherit; font-size:19px; line-height:1; cursor:pointer;
  transition:background .15s var(--ease, ease), color .15s var(--ease, ease),
             transform .15s var(--ease, ease);
}
.pw-pack .pk-step:hover:not(:disabled){background:var(--mark-bg); color:var(--text)}
.pw-pack .pk-step:active:not(:disabled){transform:scale(.92)}
.pw-pack .pk-step:disabled{opacity:.35; cursor:default}

/* Ползунок. Свій вигляд, бо стандартний у трьох браузерах різний, а тут
   він мусить читатись як частина картки. Сам <input> лишається на місці
   прозорим — з нього клавіатура, доступність і перетягування, — а видимі
   частини малюємо поруч і возимо їх однією змінною --pk. */
.pw-pack .pk-sl{position:relative; flex:1 1 auto; height:44px}
.pw-pack .pk-range{
  position:absolute; left:0; top:0; z-index:3;
  width:100%; height:44px; margin:0; padding:0;
  opacity:0; cursor:grab; background:none;
  -webkit-appearance:none; appearance:none;
}
.pw-pack .pk-range:active{cursor:grabbing}
.pw-pack .pk-range:disabled{cursor:default}
/* Рідна кулька — рівно така, як намальована, і стоїть під нею. Спершу
   ми зробили її шириною в піксель, щоб значення розклалось по всій
   ширині; вийшло, що хапатись нема за що: Firefox і Safari починають
   тягнути лише з самої кульки, а влучити в піксель неможливо. Тепер
   ширина збігається, а зсув на 11px з країв ми враховуємо в --pk. */
.pw-pack .pk-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%; background:none;
}
.pw-pack .pk-range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  border:none; background:none;
}

.pw-pack .pk-tr, .pw-pack .pk-fl,
.pw-pack .pk-th, .pw-pack .pk-bub{position:absolute; pointer-events:none}
.pw-pack .pk-tr{
  left:0; right:0; top:50%; height:6px; margin-top:-3px;
  border-radius:99px; background:var(--line);
}
.pw-pack .pk-fl{
  left:0; top:50%; height:6px; margin-top:-3px;
  width:calc(11px + var(--pk, 0) * (100% - 22px));
  border-radius:99px; background:var(--accent);
  box-shadow:0 0 16px var(--accent-soft);
  transition:width .16s var(--ease, ease);
}
.pw-pack .pk-th{
  top:50%; width:22px; height:22px; margin-top:-11px;
  left:calc(var(--pk, 0) * (100% - 22px));
  border-radius:50%; background:var(--accent);
  border:3px solid var(--panel); box-shadow:0 2px 10px rgba(0,0,0,.45);
  transition:left .16s var(--ease, ease),
             transform .2s cubic-bezier(.34,1.56,.64,1);
}
.pw-pack .pk-bub{
  bottom:36px; left:calc(11px + var(--pk, 0) * (100% - 22px));
  padding:3px 9px; border-radius:8px;
  font-family:var(--mono); font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--accent); color:var(--accent-ink, #fff);
  opacity:0; transform:translateX(-50%) translateY(4px) scale(.8);
  transition:left .16s var(--ease, ease), opacity .18s var(--ease, ease),
             transform .22s cubic-bezier(.34,1.56,.64,1),
             filter .13s linear;
}

/* Поки тягнуть — кулька більшає, над нею спливає число, а лічильник
   трохи підростає: видно, що журнал слухає руку. */
.pw-pack.on .pk-th{transform:scale(1.28)}
/* Під рукою кулька й заливка йдуть без згладжування — рівно за
   пальцем. Згладжування лишається для стрілок, «−/+» і тику по
   доріжці, де стрибок через пів шкали інакше виглядав би різко. */
.pw-pack.on .pk-fl{transition:none}
.pw-pack.on .pk-th{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.pw-pack.on .pk-bub{
  transition:opacity .18s var(--ease, ease),
             transform .22s cubic-bezier(.34,1.56,.64,1),
             filter .13s linear;
}
.pw-pack.on .pk-bub,
.pw-pack .pk-range:focus-visible ~ .pk-bub{
  opacity:1; transform:translateX(-50%) translateY(0) scale(1);
}
.pw-pack .pk-range:focus-visible ~ .pk-th{
  box-shadow:0 0 0 4px var(--accent-soft), 0 2px 10px rgba(0,0,0,.45);
}
.pw-pack .pk-range:disabled ~ .pk-fl,
.pw-pack .pk-range:disabled ~ .pk-th{opacity:.5}

/* Підписи країв стоять рівно під доріжкою, тому відступ збоку дорівнює
   кнопці «−» з проміжком. */
.pw-pack .pk-scale{
  display:flex; justify-content:space-between;
  margin:4px 46px 20px; padding:0 11px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--faint);
}

/* Рядок стану: «чекаємо оплату», «готово», помилка. Місця під нього не
   тримаємо — поки він пустий, кнопка стоїть там, де й стояла. */
.pw-pack .pk-note:not(:empty){
  margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--dim);
}

@media (prefers-reduced-motion:reduce){
  .pw-pack .pk-n, .pw-pack .pk-step,
  .pw-pack .pk-fl, .pw-pack .pk-th, .pw-pack .pk-bub{transition:none}
}

@media (max-width:560px){
  .pw-pack .pk-step{width:44px; height:44px; border-radius:12px}
  .pw-pack .pk-scale{margin-left:56px; margin-right:56px}
}