/* ————————————————————————————————————————————————
   Оплата подписки — общий слой для /pay, /pay/success,
   /pay/fail и /pay/subscription.

   Мир тот же, что у главной: индиго-ночь, золото Ting, зелёное
   действие, плита с кантом и нижней губой. Отличие одно: здесь
   не витрина, а форма, поэтому крупных леттеринг-заголовков нет
   и колонка узкая — глазу некуда убегать во время оплаты.
   ———————————————————————————————————————————————— */

@font-face{
  font-family:'Nunito';
  src:url(Nunito.sub.woff2) format('woff2-variations');
  font-weight:200 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'InterVar';
  src:url(Inter.sub.woff2) format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  color-scheme:dark;

  --night:#141230;
  --night-2:#1B1840;
  --panel:#302C5C;
  --panel-2:#3B3670;
  --edge:#0D0B20;

  --bone:#FFFFFF;
  --text:#EFECFF;
  --muted:#B4ADE4;
  --muted-2:#A49CD6;

  --gold:#FFC426;
  --gold-deep:#C98C08;
  --gold-lit:#FFD766;
  --green:#52D94D;
  --green-deep:#2B8C28;
  --green-lit:#63E85E;
  --red:#E2574B;
  --red-bg:rgb(196 59 46 / .16);
  --red-edge:rgb(226 87 75 / .45);

  --on-gold:#231A00;
  --on-green:#0C2A0B;

  --chip-bg:#241F4E;
  --hairline:#332E63;
  --field:#1E1A46;
  --foot-legal:#9A93C8;

  --fs-micro:.74rem;
  --fs-xs:.8rem;
  --fs-sm:.92rem;
  --fs-base:1rem;

  --display:'Nunito','Trebuchet MS',system-ui,sans-serif;
  --body:'InterVar',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-lg:22px;
  --r-md:14px;
  --r-sm:11px;
  --r-focus:6px;

  --lip:6px;
  --shadow:0 16px 28px -14px rgba(0,0,0,.72);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.8,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--night);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--gold);text-underline-offset:3px;}
a:hover{color:var(--gold-lit);}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r-focus);}
p{margin:0;}

/* язык — три соседних span, показывается один */
[data-lang="ru"] .kk,[data-lang="ru"] .en{display:none;}
[data-lang="kk"] .ru,[data-lang="kk"] .en{display:none;}
[data-lang="en"] .ru,[data-lang="en"] .kk{display:none;}

/* ——— шапка ————————————————————————————————————— */
.top{border-bottom:2px solid var(--edge);background:rgb(20 18 48 / .96);}
.top .row{
  max-width:760px;margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{
  font-family:var(--display);font-weight:1000;text-transform:uppercase;
  font-size:1.25rem;letter-spacing:-.02em;color:var(--bone);text-decoration:none;
  -webkit-text-stroke:.09em var(--edge);paint-order:stroke fill;
}
.brand span{color:var(--gold);}
.langs{display:flex;gap:7px;}
.pill{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-micro);letter-spacing:.02em;
  padding:.5em .8em;border-radius:11px;
  background:var(--panel-2);color:var(--bone);
  border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge);
  cursor:pointer;
  transition:background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.pill[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);box-shadow:0 3px 0 var(--gold-deep);}

/* ——— каркас ———————————————————————————————————— */
main{flex:1;width:100%;max-width:760px;margin-inline:auto;padding:clamp(24px,5vw,48px) 20px 64px;}
.card{
  background:var(--panel);
  border:2px solid var(--edge);border-radius:var(--r-lg);
  box-shadow:0 var(--lip) 0 var(--edge), var(--shadow);
  padding:clamp(20px,4vw,34px);
}
h1{
  font-family:var(--display);font-weight:1000;text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1.06;letter-spacing:-.015em;
  color:var(--bone);margin:0 0 10px;
  -webkit-text-stroke:.09em var(--edge);paint-order:stroke fill;
}
h2{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.25rem);line-height:1.14;letter-spacing:-.01em;
  color:var(--bone);margin:0 0 6px;
}
.sub{color:var(--muted);font-size:var(--fs-sm);margin:0 0 24px;}
.stack{display:flex;flex-direction:column;gap:18px;}

/* ——— шаги ——————————————————————————————————————— */
.steps{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-micro);letter-spacing:.03em;
}
.steps li{
  display:flex;align-items:center;gap:6px;
  color:var(--muted-2);background:var(--chip-bg);
  border:2px solid var(--edge);border-radius:10px;padding:.42em .7em;
}
.steps li b{
  font-weight:900;color:var(--muted);background:var(--night-2);
  border-radius:50%;width:1.5em;height:1.5em;display:grid;place-items:center;font-size:.9em;
}
.steps li[data-on="now"]{background:var(--gold);color:var(--on-gold);box-shadow:0 3px 0 var(--gold-deep);}
.steps li[data-on="now"] b{background:rgb(0 0 0 / .18);color:var(--on-gold);}
.steps li[data-on="done"]{background:var(--green);color:var(--on-green);box-shadow:0 3px 0 var(--green-deep);}
.steps li[data-on="done"] b{background:rgb(0 0 0 / .18);color:var(--on-green);}

/* ——— поля ——————————————————————————————————————— */
label.field{display:flex;flex-direction:column;gap:8px;}
.field .lbl{font-size:var(--fs-sm);color:var(--muted);}
input[type="email"],input[type="text"]{
  width:100%;font:inherit;font-size:1.05rem;color:var(--text);
  background:var(--field);border:2px solid var(--hairline);border-radius:var(--r-md);
  padding:.72em .9em;
  transition:border-color .18s var(--ease-soft);
}
input::placeholder{color:#6F68A8;}
input:focus{border-color:var(--gold);}
input[aria-invalid="true"]{border-color:var(--red);}
input.code{
  font-family:var(--display);font-weight:900;font-size:1.7rem;
  letter-spacing:.42em;text-align:center;padding-inline:.4em;
}

/* ——— кнопки ————————————————————————————————————— */
.btn{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-base);letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  color:var(--on-green);background:var(--green);
  border:2px solid var(--edge);border-radius:var(--r-md);
  padding:.68em 1.2em;cursor:pointer;text-decoration:none;
  box-shadow:0 5px 0 var(--green-deep), 0 10px 16px -8px rgb(0 0 0 / .6);
  transition:transform .09s ease-out, box-shadow .09s ease-out, background .15s ease-out;
}
.btn:hover{background:var(--green-lit);color:var(--on-green);}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--green-deep);}
.btn[disabled],.btn[aria-disabled="true"]{
  background:#2B2760;color:var(--muted);box-shadow:0 5px 0 var(--edge);
  cursor:not-allowed;pointer-events:none;
}
.btn.wide{width:100%;}
.btn-ghost{
  font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:var(--fs-xs);
  color:var(--muted);background:none;border:0;padding:.5em 0;cursor:pointer;
  text-decoration:none;letter-spacing:.02em;
}
.btn-ghost:hover{color:var(--gold);}
.btn-ghost[disabled]{color:#6F68A8;cursor:default;}
.btn-danger{
  font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:var(--fs-xs);
  color:var(--red);background:none;border:2px solid var(--red-edge);border-radius:var(--r-sm);
  padding:.55em .9em;cursor:pointer;
  transition:background .18s var(--ease-soft);
}
.btn-danger:hover{background:var(--red-bg);}
.row-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;}

/* ——— выбор ученика ——————————————————————————————— */
.picks{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;}
.pick{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--night-2);border:2px solid var(--hairline);border-radius:var(--r-md);
  padding:14px 16px;cursor:pointer;
  transition:border-color .18s var(--ease-soft), background .18s var(--ease-soft);
}
.pick:hover{border-color:var(--panel-2);background:#221E4C;}
.pick input{margin:0;accent-color:var(--green);width:20px;height:20px;flex:none;margin-top:3px;}
.pick:has(input:checked){border-color:var(--green);background:#1E2444;}
.pick .nm{color:var(--bone);font-weight:600;}
.pick .ds{color:var(--muted);font-size:var(--fs-sm);margin-top:3px;}
.pick .st{font-size:var(--fs-xs);margin-top:6px;}
.st-on{color:var(--green-lit);}
.st-off{color:var(--muted-2);}

/* ——— счёт ———————————————————————————————————————— */
.invoice{
  background:var(--night-2);border:2px solid var(--edge);border-radius:var(--r-md);
  padding:16px 18px;display:flex;flex-direction:column;gap:0;
}
.invoice .ln{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-block:11px;border-top:1px solid var(--hairline);
  font-size:var(--fs-sm);
}
.invoice .ln:first-child{border-top:0;}
.invoice .ln .k{color:var(--muted);}
.invoice .ln .v{color:var(--text);text-align:right;}
.invoice .ln.total{border-top:2px solid var(--hairline);padding-top:14px;}
.invoice .ln.total .k{color:var(--text);}
.invoice .ln.total .v{
  font-family:var(--display);font-weight:1000;font-size:1.6rem;color:var(--gold);
  -webkit-text-stroke:.06em var(--edge);paint-order:stroke fill;
}

/* ——— согласия ——————————————————————————————————— */
.agree{display:flex;flex-direction:column;gap:14px;}
.agree label{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:var(--fs-sm);color:var(--muted);cursor:pointer;
}
.agree input{margin:0;width:22px;height:22px;accent-color:var(--green);margin-top:1px;}
.agree label:has(input:checked){color:var(--text);}

/* ——— сообщения ——————————————————————————————————— */
.msg{
  border-radius:var(--r-md);padding:13px 15px;font-size:var(--fs-sm);line-height:1.55;
  border:2px solid transparent;
}
.msg.err{background:var(--red-bg);border-color:var(--red-edge);color:#F6B6AF;}
.msg.err b{color:#FFD9D4;display:block;margin-bottom:3px;}
.msg.info{background:var(--night-2);border-color:var(--hairline);color:var(--muted);}
.note{color:var(--text);font-size:var(--fs-sm);}
.fine{color:var(--muted-2);font-size:var(--fs-xs);line-height:1.6;}
.fine a{color:var(--muted);}
.hidden{display:none !important;}

/* исход платежа: крупный знак вместо картинки */
.mark{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--edge);margin-bottom:18px;
}
.mark.ok{background:var(--green);box-shadow:0 5px 0 var(--green-deep);}
.mark.no{background:var(--red);box-shadow:0 5px 0 #8F1116;}
.mark.wait{background:var(--panel-2);box-shadow:0 5px 0 var(--edge);}

/* спиннер — единственная анимация на страницах оплаты */
.spin{
  width:18px;height:18px;border-radius:50%;flex:none;
  border:3px solid rgb(255 255 255 / .25);border-top-color:var(--bone);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.mark .spin{width:28px;height:28px;border-width:4px;}

/* демонстрационный режим: видно сразу, чтобы никто не принял его за оплату */
.demo-flag{
  background:var(--gold);color:var(--on-gold);
  font-family:var(--display);font-weight:900;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.03em;
  padding:9px 20px;text-align:center;border-bottom:2px solid var(--edge);
}

/* ——— подвал ————————————————————————————————————— */
footer{
  border-top:1px solid #232049;background:var(--night);
  padding:22px 20px 34px;color:var(--foot-legal);font-size:var(--fs-xs);line-height:1.6;
}
footer .row{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:8px;}
footer a{color:var(--muted);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .spin{border-top-color:transparent;border-right-color:var(--bone);}
}