/* NIGHT store — checkout, painel PIX, status do pedido e sucesso. */

.page{padding:34px 0 60px}
.page-hd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;
  justify-content:space-between;margin-bottom:22px}
.page-hd h1{font-size:clamp(30px,5vw,46px)}
.page-hd p{color:var(--dim);font-size:14px;margin-top:8px}
.back{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

.co{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start}
.co-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}

/* ------------------------------------------------------------- resumo do plano */
.sum .card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sum .card-hd h2{font-size:20px;letter-spacing:.05em}
.sum .amount{font-family:var(--font-mono);font-weight:500;font-size:28px;letter-spacing:-.01em}
.sum .amount.was{font-size:14px;color:var(--dim);text-decoration:line-through;font-weight:400;
  margin-left:auto}
.sum dl{display:flex;flex-direction:column;gap:9px;margin:0}
.sum dl > div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.sum dt{color:var(--dim)}
.sum dd{margin:0;color:var(--ink);font-family:var(--font-mono);font-size:13px;text-align:right}
.sum ul{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line)}
.sum li{display:flex;gap:8px;font-size:13px;color:var(--ink)}

/* --------------------------------------------------------------------- checkout */
.co-main{display:flex;flex-direction:column;gap:14px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tabs button{background:var(--panel);border:0;padding:14px 8px;display:flex;flex-direction:column;
  align-items:center;gap:5px;color:var(--dim);transition:background .13s ease,color .13s ease}
.tabs button svg{width:22px;height:22px}
.tabs button b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.08em;
  text-transform:uppercase}
.tabs button small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim)}
.tabs button[aria-selected='true']{background:var(--field);color:var(--txt);box-shadow:inset 0 -2px 0 var(--accent)}
.tabs button[aria-selected='true'] small{color:var(--dim)}
.tabs button:hover{color:var(--txt)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.panel-note{color:var(--dim);font-size:12.5px;line-height:1.6;margin-top:4px}
.recap{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  border:1px solid var(--line);background:var(--field);border-radius:var(--r);padding:13px 15px;
  margin-top:4px}
.recap span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim)}
.recap b{font-family:var(--font-mono);font-weight:500;font-size:22px}
.form-err{display:block;border:1px solid var(--red);background:rgba(240,96,90,.09);
  border-radius:var(--r);padding:12px 14px;color:#FFB4B1;font-size:13.5px;margin-bottom:14px}
.form-err[hidden]{display:none}
.form-err code{font-family:var(--font-mono);font-size:11.5px;color:var(--red)}

/* -------------------------------------------------------------------------- pix */
.pix{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.qr{background:#fff;border-radius:var(--r);padding:10px;width:220px;height:220px;
  display:flex;align-items:center;justify-content:center}
.qr img{width:100%;height:100%;object-fit:contain}
.qr-ph{font-family:var(--font-mono);font-size:11px;color:#4a4a52;text-align:center;letter-spacing:.06em}
.copy-row{display:flex;gap:8px;margin-top:10px}
.copy-row input{font-size:12px}
.steps-mini{counter-reset:s;display:flex;flex-direction:column;gap:9px;margin-top:14px}
.steps-mini li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--dim)}
.steps-mini li::before{counter-increment:s;content:counter(s);flex:0 0 20px;height:20px;
  border:1px solid var(--line-hi);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10.5px;color:var(--accent-hi)}
.expiry{font-family:var(--font-mono);font-size:12px;color:var(--amber);letter-spacing:.06em}

/* -------------------------------------------------------------------- status */
.status{display:flex;flex-direction:column;gap:16px}
.st-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.st-code{font-family:var(--font-mono);font-weight:500;font-size:20px;letter-spacing:.04em}
.badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-hi);color:var(--dim)}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.badge.pending{color:var(--amber);border-color:rgba(245,184,74,.4);background:rgba(245,184,74,.08)}
.badge.paid{color:var(--green);border-color:rgba(87,217,122,.4);background:rgba(87,217,122,.08)}
.badge.failed,.badge.expired,.badge.refunded{color:var(--red);border-color:rgba(240,96,90,.4);
  background:rgba(240,96,90,.08)}
.badge.pending i{animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.wait{border:1px solid var(--line);border-radius:var(--r);background:var(--field);
  padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.wait p{font-size:13.5px;color:var(--dim)}
.track{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.track i{display:block;height:100%;width:34%;background:var(--accent);
  animation:slide 1.7s ease-in-out infinite}
@keyframes slide{0%{margin-left:-34%}100%{margin-left:100%}}

.keybox{border:1px solid var(--green);background:rgba(87,217,122,.07);border-radius:var(--r);
  padding:16px}
.keybox .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);display:block;margin-bottom:8px}
.keybox .k{font-family:var(--font-mono);font-weight:500;font-size:clamp(17px,3.4vw,25px);
  letter-spacing:.06em;word-break:break-all}
.keybox .copy-row{margin-top:12px}
.act{counter-reset:a;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act li{display:flex;gap:11px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;font-size:13.5px;color:var(--ink)}
.act li::before{counter-increment:a;content:counter(a);font-family:var(--font-mono);font-size:12px;
  color:var(--accent-hi);flex:0 0 auto}
.act code{font-family:var(--font-mono);font-size:12.5px;color:var(--txt);background:var(--field);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 5px}
.dl-row{display:flex;flex-wrap:wrap;gap:10px}

.lookup{max-width:520px;margin:0 auto;text-align:center}
.lookup .field{text-align:left}
.lookup input{text-align:center;letter-spacing:.1em;font-size:16px;text-transform:uppercase}

.empty-state{border:1px dashed var(--line-hi);border-radius:var(--r-lg);padding:26px 20px;
  text-align:center;color:var(--dim);font-size:14px}

@media (max-width:900px){
  .co{grid-template-columns:1fr}
  .co-side{position:static}
  .pix{grid-template-columns:1fr}
  .qr{margin:0 auto}
  .act{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tabs button small{display:none}
  .grid2,.grid3{grid-template-columns:1fr}
  .page{padding:22px 0 44px}
  .qr{width:190px;height:190px}
}
/* Aba de pagamento TRAVADA (ex.: cartao desligado no arquivo de planos): cadeado
   visivel + "em breve". O servidor recusa o metodo de qualquer forma — isto aqui
   e' so' a explicacao para quem olha a tela. */
.tabs [role="tab"]:disabled { opacity: .5; cursor: not-allowed; }
.tabs [role="tab"]:disabled:hover { border-color: var(--line); }
.tabs [role="tab"] .lock { display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; color: var(--amber); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.tabs [role="tab"] .lock svg { width: 12px; height: 12px; }