/* ===== Paleta (inspirada no brasão) ===== */
:root{
  --bg-900:#0b0f17; --bg-800:#0f1522;
  --card-800:#121a29; --card-700:#162138;

  --primary-500:#8d1423;   /* bordô */
  --primary-600:#7e1220;
  --primary-700:#650f1a;

  --text-100:#e9eef7; 
  --text-200:#d7dfef;      /* novo tom para dicas/legendas */
  --text-300:#c8d2e3; 
  --muted-400:#90a3c0;

  --accent-500:#2ec6ff;    /* brilho sutil */
  --ring:#2ec6ff30;
}

/* ===== Reset + base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%, #1a2236 0%, transparent 60%),
    radial-gradient(900px 500px at 120% 10%, #1d1120 0%, transparent 60%),
    var(--bg-900);
  color:var(--text-100);
  line-height:1.45;
}

/* ===== Header ===== */
.main-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(10,14,22,.9), rgba(10,14,22,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid #ffffff10;
  padding:.9rem 0;
}
.brand-logo{ width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 6px 14px #0006); }
.site-title{ font-size:1.35rem; font-weight:800; letter-spacing:.2px; }
.site-subtitle{ color:var(--muted-400); font-weight:600; }
.badge-event{
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color:#fff; padding:.45rem .8rem; border-radius:999px; font-size:.85rem;
  box-shadow:0 6px 20px #0008, inset 0 0 0 1px #ffffff1f;
}

/* ===== Cartão padrão ===== */
.card-default{
  max-width:980px;
  background:linear-gradient(180deg, var(--card-800), var(--card-700));
  border:1px solid #ffffff12; border-radius:20px;
  box-shadow:0 30px 120px #0009, 0 0 0 1px #000 inset;
}
.card-title{ font-weight:800; letter-spacing:.2px; }

/* ===== Inputs ===== */
.form-label{ color:var(--text-300); }
.form-control{
  background:#0f1726; color:var(--text-100);
  border:1px solid #ffffff1a; border-radius:14px; padding:.9rem 1rem;
  transition:.18s;
}
.form-control::placeholder{ color:#8da0bf; opacity:.7; }
.form-control:focus{
  background:#0e1625; color:var(--text-100);
  border-color:transparent; outline:0; box-shadow:0 0 0 4px var(--ring);
}

/* ===== Botões ===== */
.btn-primary{
  --bs-btn-bg:var(--primary-500); --bs-btn-border-color:var(--primary-500);
  --bs-btn-hover-bg:var(--primary-600); --bs-btn-hover-border-color:var(--primary-600);
  --bs-btn-active-bg:var(--primary-700); --bs-btn-active-border-color:var(--primary-700);
  --bs-btn-disabled-bg:#5b0e16; --bs-btn-disabled-border-color:#5b0e16;
  border-radius:14px; box-shadow:0 16px 40px #0008, 0 0 0 1px #ffffff12 inset;
  font-weight:700;
}

/* ===== Alert suave ===== */
.soft-success{ background:#12281b; color:#b7f3c6; border:1px solid #2a6c3a; }

/* ===== Steps ===== */
.step-card{
  position:relative; background:linear-gradient(180deg,#0e1625,#0b1220);
  border:1px solid #ffffff12; border-radius:16px; padding:1.1rem 1rem 1rem;
  box-shadow:0 8px 30px #0008;
}
.step-card::after{
  content:""; position:absolute; inset:-1px; border-radius:16px;
  background:linear-gradient(120deg,#ffffff08,transparent 35%,#ffffff05 65%,transparent 100%);
  pointer-events:none;
}
.step-number{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; background:radial-gradient(120% 120% at 30% 20%,var(--accent-500),#6bd7ff 40%,#1a2539 41%);
  color:#001019; border:2px solid #58cfff; box-shadow:0 6px 20px #1bc0ff55; margin-bottom:.6rem;
}
.step-title{ font-weight:800; margin-bottom:.25rem; }

/* ===== Fundo decorativo ===== */
.bg-ornament{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(400px 200px at 15% 25%, #7b1222aa 0%, transparent 65%),
    radial-gradient(420px 220px at 85% 20%, #7b122260 0%, transparent 70%),
    radial-gradient(700px 380px at 50% 120%, #10203f 0%, transparent 60%);
  filter:blur(30px) saturate(1.1);
}

/* ===== Footer ===== */
.main-footer{
  border-top:1px solid #ffffff12; background:#0b111c; padding:1.2rem 0; color:var(--text-300);
}

/* ===== Helpers ===== */
.opacity-75{ opacity:.75; }

/* ===== Responsivo ===== */
@media (max-width:576px){
  .brand-logo{ width:52px; height:52px; }
  .site-title{ font-size:1.1rem; }
}

/* ===== Pagamento / PIX ===== */
.date-time-display{
  font-size:1.75rem; font-weight:800; color:var(--accent-500);
  text-align:center; margin-bottom:1.1rem;
}
.info-box{
  background:#0e1625; border:1px solid #ffffff14; border-radius:12px;
  padding:1rem 1.1rem; text-align:center;
}
.info-title{ font-weight:800; font-size:.9rem; color:var(--text-300); margin-bottom:.25rem; }

.pix-card{
  background:linear-gradient(180deg,#0e1625,#0b1220);
  border:1px solid #ffffff12; border-radius:16px; padding:1.25rem; text-align:center;
  box-shadow:0 8px 30px #0008;
}

/* QR Code SEMPRE limitado */
.pix-card img,
.qr-code-image{
  display:block; margin:1rem auto;
  background:#fff; border-radius:10px; padding:.6rem;
  max-width:260px; width:100%; height:auto; object-fit:contain;
  box-shadow:0 10px 24px #0005;
}
@media (max-width:480px){
  .pix-card img, .qr-code-image{ max-width:200px; }
}

/* Copia-e-cola */
.pix-copy-group{ display:flex; gap:.5rem; align-items:stretch; margin-top:.5rem; }
.pix-copy-paste{
  flex:1; background:#0F172A; color:#CBD5E0;
  border:1px solid #4A5568; border-radius:12px; padding:.7rem .9rem;
}
.pix-copy-paste:focus{ border-color:#94A3B8; box-shadow:0 0 0 4px var(--ring); }
.btn-copy{
  border:1px solid #4A5568; color:#E2E8F0; background:#0f172a;
  border-radius:12px; padding:.7rem 1rem; white-space:nowrap; transition:.2s;
}
.btn-copy:hover{ background:#334155; color:#fff; }

/* ===== Ícone PIX + contagem ===== */
.pix-icon{
  width:42px; height:42px; color:#E2E8F0;
  margin:0 auto .75rem auto; display:block; opacity:.9;
}

/* Mostra tudo em uma linha e com cor clara */
.countdown-wrap{
  display:flex; justify-content:center; align-items:center; gap:.5rem;
  font-size:.95rem; color:var(--text-200);
  margin-top:.6rem;
}
#pix-countdown{ font-weight:800; color:#f59e0b; }

/* ===== Legibilidade nas dicas/legendas do PIX ===== */
.pix-card p{ color:var(--text-200); }
.pix-card p.opacity-75{ opacity:1 !important; color:var(--text-200) !important; }

/* placeholder do copia-e-cola mais visível */
.pix-copy-paste::placeholder{ color:var(--text-200); opacity:.9; }


/* ===== Força a legibilidade dentro do card PIX ===== */
.pix-card p,
.pix-card small,
.pix-card .text-muted,
.pix-card .opacity-75,
.pix-card .countdown-wrap {
  color: var(--text-200) !important;
  opacity: 1 !important;
}

/* Mantém o tempo em destaque */
.pix-card #pix-countdown {
  color: #f59e0b !important;
  font-weight: 800;
}

/* Caso “Ou copie o código abaixo” esteja em <small> dentro de um container específico */
.pix-card .help-text,
.pix-card .legend,
.pix-card .caption {
  color: var(--text-200) !important;
  opacity: 1 !important;
}