/* ============================================================
   ASSINAR — VERSÃO BLACK
   Só carrega quando o link vem com ?oferta=black e a Black vale
   (utils/oferta_black.php). Não muda o formulário nem o pagamento:
   só repinta, no mesmo café com ouro do pop-up da página
   black.upofficeeu.com. Ela sai do pop-up escuro e continua no
   escuro até pagar.

   Tudo preso em .bk (classe do <html>), então o assinar.php de
   sempre não é tocado. As variáveis do topo são trocadas aqui
   porque o próprio assinar.php usa var(--muted), var(--gold-deep)…
   em estilos escritos direto no HTML e na janela de pagamento —
   trocando a variável, eles viram junto.
   ============================================================ */
html.bk{
  color-scheme:dark;

  /* as do assinar.php, versão escura */
  --ink:#FFFDF8;
  --ink-2:rgba(255,253,248,0.74);
  --muted:#A39684;                 /* 6,2:1 no fundo */
  --line:rgba(229,197,143,0.18);
  --gold:#E5C58F;
  --gold-deep:#E5C58F;             /* lá é cor de texto e link: no escuro, o dourado claro */
  --gold-3:#D4A64E;
  --cream:rgba(255,253,248,0.05);
  --gold-soft:rgba(229,197,143,0.08);
  --green:#6FD39A;

  /* as da Black — mesmas do black.css da landing */
  --bk-noite:#15100A;
  --bk-noite-2:#2A1D0F;
  --bk-creme:#FFFDF8;
  --bk-dourado:#E5C58F;
  --bk-linha:rgba(229,197,143,0.22);
  --bk-ouro:linear-gradient(150deg,#EBD09B 0%,#C09545 26%,#8C6624 58%,#E3C489 82%,#B98F3F 100%);

  background:
    radial-gradient(90% 46% at 50% -6%, rgba(201,154,62,0.24) 0%, rgba(201,154,62,0) 72%),
    linear-gradient(180deg, #110C07 0%, #1A130B 45%, #15100A 100%);
  background-color:#15100A;
}
html.bk body{ background:transparent; color:var(--ink); }
.bk ::selection{ background:rgba(229,197,143,0.35); color:#FFFDF8; }
.bk :focus-visible{ outline:2px solid var(--bk-dourado); outline-offset:2px; }


/* ---------- topo: logo + cadeado ---------- */
.bk-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 4px 18px;
}
.bk-topo img{ height:36px; width:auto; display:block; }
.bk-seguro{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  font-weight:600;
  color:var(--muted);
}
.bk-seguro i{ color:var(--bk-dourado); }


/* ---------- o cartão: moldura de ouro em volta do café ----------
   O mesmo truque do pop-up: degradê na borda (border-box) por baixo
   do fundo café (padding-box). */
.bk .card{
  background:
    linear-gradient(180deg, #24190E 0%, #17110A 100%) padding-box,
    var(--bk-ouro) border-box;
  border:1.5px solid transparent;
  border-radius:24px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.85),
             0 0 70px -24px rgba(201,154,62,0.35);
}

.bk .card-head{
  background:radial-gradient(120% 90% at 50% 0%, rgba(201,154,62,0.18) 0%, rgba(201,154,62,0) 70%);
  color:var(--ink);
  padding:1.9rem 1.5rem 1rem;
}
.bk .card-head::after{ display:none; }
.bk .plan-eyebrow{ color:var(--bk-dourado); opacity:1; letter-spacing:.22em; }
.bk .plan-title{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:1.95rem;
  letter-spacing:-.01em;
  color:var(--bk-creme);
}
.bk .plan-desc{ color:var(--ink-2); opacity:1; }


/* ---------- preço ---------- */
.bk .price-card{
  background:rgba(255,253,248,0.035);
  border:1px solid var(--bk-linha);
  border-radius:18px;
  padding:1.2rem 1.1rem 1.1rem;
}
.bk .price-tag span{
  background:var(--bk-ouro);
  color:#21170B;
  border:0;
  padding:.34rem .95rem;
  letter-spacing:.18em;
}
.bk .save-pill{
  background:rgba(229,197,143,0.07);
  border:1px dashed rgba(229,197,143,0.45);
  color:var(--bk-dourado);
}
.bk .save-pill i{ color:var(--bk-dourado); }
.bk .save-pill .save-amount{ color:var(--bk-creme); }
.bk .save-pill .save-when{ color:var(--muted); }
.bk .price-main .big{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:3.4rem;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--bk-dourado);
}
.bk .price-main .label{ color:var(--bk-creme); }
/* no assinar.php de sempre o "Depois, R$ X/mês" sai riscado — aqui não:
   riscar o preço que ela VAI pagar do 2º mês em diante confunde */
.bk .price-main .old{ text-decoration:none; color:var(--muted); }
.bk .price-foot{ color:var(--ink-2); }
.bk .price-foot .dot{ color:var(--bk-dourado); }

.bk-tempo{
  margin:.95rem 0 0;
  padding-top:.85rem;
  border-top:1px dashed var(--bk-linha);
  text-align:center;
  font-size:.86rem;
  color:var(--ink-2);
}
.bk-tempo span{ margin-left:4px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bk-tempo b{ font-weight:700; color:var(--bk-creme); }


/* ---------- o que vem no plano ---------- */
.bk .features{ border-bottom:1px solid var(--bk-linha); }
.bk .feature-ic{
  background:rgba(229,197,143,0.09);
  border:1px solid rgba(229,197,143,0.18);
  color:var(--bk-dourado);
}
.bk .feature-tx{ color:var(--ink-2); }


/* ---------- campos ---------- */
.bk .field .field-inner{
  background:rgba(255,253,248,0.04);
  border:1.5px solid rgba(229,197,143,0.2);
}
.bk .field .field-inner:focus-within{
  background:rgba(255,253,248,0.07);
  border-color:var(--bk-dourado);
  box-shadow:0 0 0 4px rgba(229,197,143,0.12);
}
.bk .field-ic{
  background:rgba(229,197,143,0.08);
  border-color:rgba(229,197,143,0.2);
  color:var(--bk-dourado);
}
.bk .field-body label{ color:var(--ink-2); }
.bk .field-body input{ color:var(--bk-creme); caret-color:var(--bk-dourado); }
.bk .field-body input::placeholder{ color:rgba(255,253,248,0.42); }
/* o preenchimento automático do navegador pinta o campo de branco ou
   amarelo por cima de tudo — a sombra interna "repinta" de café */
.bk .field-body input:-webkit-autofill,
.bk .field-body input:-webkit-autofill:hover,
.bk .field-body input:-webkit-autofill:focus{
  -webkit-text-fill-color:#FFFDF8;
  -webkit-box-shadow:0 0 0 1000px #231A11 inset;
  transition:background-color 9999s ease-out 0s;
}

.bk .errors{ background:rgba(220,38,38,0.12); border-color:rgba(248,113,113,0.35); color:#FCA5A5; }
.bk .pago{ background:rgba(74,222,128,0.1); border-color:rgba(74,222,128,0.3); color:#86EFAC; }

/* o botão é o dourado da landing: letra escura, não branca */
.bk .btn{
  background:linear-gradient(135deg,#EBC97F 0%,#D6A94F 100%);
  color:#2A241E;
  border:1px solid #AE7D24;
  box-shadow:0 14px 30px -12px rgba(201,154,62,0.55),
             inset 0 1px 2px rgba(255,255,255,0.55);
}
.bk .btn:hover{
  filter:none;
  background:linear-gradient(135deg,#F0D291 0%,#DDB259 100%);
  box-shadow:0 18px 36px -12px rgba(201,154,62,0.65),
             inset 0 1px 2px rgba(255,255,255,0.65);
}

.bk .reassure i,
.bk .abacate i,
.bk .trust-item i{ color:var(--bk-dourado); }
.bk .trust-item span{ color:var(--ink-2); }
.bk .abacate{ border-top:1px dashed var(--bk-linha); }

.bk .summary{ background:rgba(255,253,248,0.03); border:1px solid var(--bk-linha); }
.bk .summary h4{ color:var(--bk-dourado); }
.bk .summary-row{ color:var(--ink-2); }
.bk .summary-row.total{ border-top-color:var(--bk-linha); }
.bk .summary-row .v{ color:var(--bk-creme); }

.bk .footer-note{ color:var(--muted); }
.bk .footer-note a{ color:var(--bk-dourado); }


/* ---------- janela de pagamento (cartão / Pix) ----------
   Mesma cara do pop-up da landing: moldura de ouro, café por dentro,
   opções que acendem no dourado quando escolhidas. */
.bk .pm-overlay{ background:rgba(10,7,4,0.74); }
.bk .pm-box{
  background:
    radial-gradient(120% 45% at 50% 0%, rgba(201,154,62,0.16) 0%, rgba(201,154,62,0) 60%) padding-box,
    linear-gradient(180deg, #2A1D0F 0%, #15100A 100%) padding-box,
    var(--bk-ouro) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:1.5rem 1.4rem 1.2rem;
  color:var(--bk-creme);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.75),
             0 0 70px -20px rgba(201,154,62,0.45);
}
.bk .pm-head h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:1.45rem;
  letter-spacing:-.01em;
  color:var(--bk-creme);
}
.bk .pm-x{
  background:rgba(255,253,248,0.05);
  border:1px solid var(--bk-linha);
  color:var(--ink-2);
}
.bk .pm-x:hover{ color:var(--bk-creme); border-color:rgba(229,197,143,0.55); }

.bk .pm-resumo{
  background:rgba(229,197,143,0.07);
  border:1.5px solid rgba(229,197,143,0.32);
}
.bk .pm-resumo .n{ color:var(--bk-creme); text-transform:uppercase; letter-spacing:.07em; font-size:.88rem; }
.bk .pm-resumo .u,
.bk .pm-resumo .d,
.bk .pm-resumo .p small{ color:var(--muted); }
.bk .pm-resumo .p{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.55rem;
  color:var(--bk-dourado);
}
.bk .pm-resumo .p small{ font-family:'Inter',sans-serif; }

.bk .pm-op{
  background:rgba(255,253,248,0.035);
  border:1.5px solid var(--bk-linha);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.bk .pm-op:hover{ border-color:rgba(229,197,143,0.5); }
.bk .pm-op:has(input:checked){
  border-color:var(--bk-dourado);
  background:rgba(229,197,143,0.1);
  box-shadow:0 0 0 3px rgba(229,197,143,0.12);
}
.bk .pm-op input{ accent-color:#D4A64E; }
.bk .pm-op .t{ color:var(--bk-creme); }
.bk .pm-op .d{ color:var(--ink-2); }
.bk .pm-selo{ background:var(--bk-ouro); color:#21170B; }

.bk .pm-btn{
  background:linear-gradient(135deg,#EBC97F 0%,#D6A94F 100%);
  color:#2A241E;
  border:1px solid #AE7D24;
  box-shadow:0 12px 26px -12px rgba(201,154,62,0.6),
             inset 0 1px 2px rgba(255,255,255,0.55);
}
.bk .pm-btn:hover{ background:linear-gradient(135deg,#F0D291 0%,#DDB259 100%); }

.bk .pm-passos{ color:var(--ink-2); }
.bk .pm-passos li::marker{ color:var(--bk-dourado); font-weight:700; }
.bk .pm-lead{ color:var(--ink-2); }
.bk .pm-nota{ color:var(--muted); }
/* o QR fica no BRANCO de propósito: o leitor do app do banco precisa
   de módulo escuro em fundo claro */
.bk .pm-qr{ background:#FFFFFF; border:2px solid rgba(229,197,143,0.55); }
.bk .pm-copia input{
  background:rgba(255,253,248,0.05);
  border:1.5px solid var(--bk-linha);
  color:var(--bk-creme);
}
.bk .pm-copia button{
  background:transparent;
  border-color:var(--bk-dourado);
  color:var(--bk-dourado);
}
.bk .pm-espera{
  background:rgba(229,197,143,0.07);
  border:1px solid var(--bk-linha);
  color:var(--ink-2);
}
.bk .pm-spin{ border-color:rgba(229,197,143,0.22); border-top-color:var(--bk-dourado); }
.bk .pm-erro{ background:rgba(220,38,38,0.12); border-color:rgba(248,113,113,0.35); color:#FCA5A5; }
.bk .pm-ok{
  background:rgba(74,222,128,0.1);
  border:1px solid rgba(74,222,128,0.3);
  color:#86EFAC;
}
.bk .pm-seguro{ color:var(--muted); }
.bk .pm-seguro i{ color:var(--bk-dourado); }


/* ---------- celular ---------- */
@media (max-width:520px){
  .bk-topo{ margin:0; padding:14px 16px 12px; }
  .bk-topo img{ height:32px; }
  /* tela inteira, como no assinar.php de sempre: sem canto e sem sombra,
     só os fios de ouro em cima e embaixo */
  .bk .card{ border-radius:0; border-width:1.5px 0; box-shadow:none; }
  .bk .card-head{ padding:1.4rem 1rem .8rem; }
  .bk .plan-title{ font-size:1.6rem; }
  .bk .price-main .big{ font-size:2.9rem; }

  /* os 4 itens do plano numa linha só (o assinar.php de sempre quebra em
     2×2 no celular). Ícone e letra menores pra caber até em 320px. */
  .bk .features{ grid-template-columns:repeat(4,1fr); gap:.2rem; padding:.95rem .5rem; }
  .bk .feature{ padding:.35rem .1rem; }
  .bk .feature-ic{ width:32px; height:32px; font-size:.88rem; margin-bottom:.4rem; }
  .bk .feature-tx{ font-size:.68rem; }

  /* "Economize R$ 80,00 no 1º mês" quebrava em pedaços no celular pequeno */
  .bk .save-pill{ gap:.45rem; }
  .bk .save-pill > *{ white-space:nowrap; }

  /* a janela de pagamento vira gaveta que sobe de baixo, como o pop-up */
  .bk .pm-overlay{ align-items:flex-end; padding:0; }
  .bk .pm-box{
    max-width:none;
    max-height:94vh;
    border-radius:22px 22px 0 0;
    border-width:2px 0 0;
    padding:1.3rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
}