/* Checkout — Logan's Bitcoin Search System.
   Палитра: белый фон, чёрный текст, зелёные кнопки.
   Переменные переопределяем здесь же: файл подключается ПОСЛЕ style.css,
   поэтому чекаут выглядит правильно независимо от того, перекрашен ли
   основной лендинг. */

:root{
  --bg:#fff;
  --fg:#111;
  --muted:#555;
  --line:#e2e2e2;
  --soft:#f6f6f6;
  --btn:#16a34a;
  --btn-hover:#15803d;
  --btn-fg:#fff;
}

body{background:var(--bg);color:var(--fg)}

.co-back{
  display:inline-block;
  margin:28px 0 0;
  font-size:16px;
  color:var(--muted);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.co-back:hover{color:var(--fg)}

.co-step[hidden]{display:none}
/* Лендинг рисует линию между соседними .block. Шаги чекаута — тоже .block,
   и соседство в разметке считается даже когда предыдущий шаг скрыт: без этой
   строки над видимым шагом висела бы черта ни от чего. */
.co-step + .co-step{border-top:0}

/* ── шаги ─────────────────────────────────────────────────────────────── */
.co-steps{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0 0 34px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  flex-wrap:wrap;
}
.co-steps i{font-style:normal;white-space:nowrap}
.co-steps i.on{color:var(--btn);font-weight:700}
.co-steps s{text-decoration:none;opacity:.4}

/* ── кнопки ───────────────────────────────────────────────────────────── */
.btn,button.btn{
  display:block;
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:22px 28px;
  border:0;
  border-radius:6px;
  background:var(--btn);
  color:var(--btn-fg);
  font:inherit;
  font-size:24px;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
}
.btn:hover{background:var(--btn-hover);filter:none}
.btn[disabled]{opacity:.55;cursor:default}
.btn--ghost{
  background:#fff;
  color:var(--fg);
  border:2px solid var(--line);
}
.btn--ghost:hover{background:#fff;border-color:var(--btn);color:var(--btn)}
.btn + .btn{margin-top:14px}

/* ── форма ────────────────────────────────────────────────────────────── */
.co-form{max-width:520px;margin:0 auto;text-align:left}
.fld{display:block;margin:0 0 20px}
.fld > span{
  display:block;
  margin:0 0 8px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.fld input{
  width:100%;
  padding:18px;
  font:inherit;
  font-size:20px;
  color:var(--fg);
  background:#fff;
  border:2px solid var(--line);
  border-radius:6px;
  -webkit-appearance:none;
  appearance:none;
}
.fld input::placeholder{color:#a5a5a5}
.fld input:focus{outline:none;border-color:var(--btn)}
.fld input.bad{border-color:#d32f2f}
.fld .hint{display:block;margin:8px 0 0;font-size:15px;color:var(--muted)}

.co-err{
  margin:0 0 20px;
  padding:14px 16px;
  background:#fdecec;
  border:2px solid #d32f2f;
  border-radius:6px;
  color:#a01c1c;
  font-size:17px;
  text-align:center;
}
.co-err[hidden]{display:none}

/* ── оплата ───────────────────────────────────────────────────────────── */
.pay-sum{
  margin:0 auto 28px;
  max-width:520px;
  padding:22px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:6px;
}
.pay-sum .row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:18px;
  padding:8px 0;
  text-align:left;
}
.pay-sum .row span{color:var(--muted);white-space:nowrap}
.pay-sum .row b{font-size:19px;word-break:break-all;text-align:right}

.qr{
  width:260px;
  height:260px;
  margin:0 auto 24px;
  padding:12px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:6px;
}
.qr img,.qr svg{width:100%;height:100%;display:block}

.copybox{max-width:520px;margin:0 auto 14px;text-align:left}
.copybox > span{
  display:block;
  margin:0 0 8px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.copybox .val{
  display:flex;
  align-items:stretch;
  background:var(--soft);
  border:2px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.copybox code{
  flex:1;
  padding:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px;
  line-height:1.35;
  word-break:break-all;
  color:var(--fg);
}
.copybox button{
  flex:0 0 auto;
  padding:0 20px;
  border:0;
  border-left:2px solid var(--line);
  background:#fff;
  color:var(--btn);
  font:inherit;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}
.copybox button:hover{background:#f0f7f2}
.copybox button.done{color:var(--btn-hover)}

.pay-state{
  max-width:520px;
  margin:26px auto 0;
  padding:18px;
  background:var(--soft);
  border:2px solid var(--line);
  border-radius:6px;
  font-size:18px;
}
.pay-state .dot{
  display:inline-block;
  width:11px;height:11px;
  margin-right:10px;
  border-radius:50%;
  background:var(--btn);
  vertical-align:middle;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.pay-state.seen{border-color:var(--btn);background:#f0f9f3}
.pay-state.dead .dot{background:#d32f2f;animation:none}
.timer{margin:14px 0 0;font-size:16px;color:var(--muted)}

/* ── код доступа ──────────────────────────────────────────────────────── */
.done-mark{font-size:64px;line-height:1;margin:0 0 18px}
.code{
  max-width:560px;
  margin:0 auto 18px;
  padding:26px 18px;
  background:#f0f9f3;
  border:3px dashed var(--btn);
  border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(26px,7vw,44px);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--btn-hover);
  word-break:break-all;
  user-select:all;
}
.warn{
  max-width:560px;
  margin:0 auto 28px;
  padding:16px;
  background:#fff8e6;
  border:2px solid #e0b64a;
  border-radius:6px;
  font-size:17px;
  color:#6b4e0d;
}
.btn--tg{background:#229ED9;color:#fff}
.btn--tg:hover{background:#1b87ba}
.order-id{margin:26px 0 0;font-size:15px;color:var(--muted)}
.order-id code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.note{color:var(--muted)}
.foot{color:var(--muted)}

@media (max-width:480px){
  .fld input{font-size:18px;padding:16px}
  .btn,button.btn{font-size:20px;padding:18px 22px}
  .qr{width:220px;height:220px}
  .copybox code{font-size:15px;padding:14px}
  .copybox button{padding:0 14px;font-size:13px}
  .pay-sum .row{font-size:16px}
  .pay-sum .row b{font-size:17px}
  .done-mark{font-size:52px}
}