/* ============================================================
   AvixBot — Register CSS (2025) — refeito
   - Página rola normalmente (vertical)
   - Planos em carrossel horizontal (scroll lateral em PC e Mobile)
   - Snap suave + sombras de borda
   - Estados: selecionado / grátis / popular
   ============================================================ */

/* ---------------- Tokens locais ---------------- */
:root{
  --bg:#0e0e12; --bg-2:#111117; --card:#181820;
  --panel:#1b1b24; --panel-2:#22222d;
  --txt:#f0f0f5; --txt-dim:#cfcfe4; --muted:#9ba0ae;
  --brand:#f05454; --brand-2:#c43c3c; --accent:#0E64FF; --ok:#10b981;
  --border:#2a2a38; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:12px; --radius-sm:8px;
  --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem;
}

/* ---------------- Base ---------------- */
*{box-sizing:border-box}
html{height:100%; scroll-behavior:smooth;}
body{
  min-height:100%;
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background: radial-gradient(circle at 30% -10%, #1a1a24 0%, #0f0f14 60%, #0b0b10 100%);
  /* IMPORTANTE: a página precisa rolar */
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
}

/* Moldura leve */
body::after{
  content:""; position:fixed; top:15px; left:15px; right:15px; bottom:15px;
  border:1px solid color-mix(in oklab, var(--brand), #000 25%);
  box-shadow:0 0 18px color-mix(in oklab, var(--brand), #000 40%);
  pointer-events:none; z-index:1; opacity:.7;
}

/* Ajudantes */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Elementos decorativos (não bloqueiam interação) */
.particles{position:fixed; inset:0; pointer-events:none; z-index:0;}
.particles::before{
  content:''; position:absolute; top:100%; left:50%; width:4px; height:4px;
  background:var(--brand); border-radius:50%;
  animation:floatUp 5s infinite ease-in;
  box-shadow:0 0 6px var(--brand),
             -60px 30px 4px var(--brand),
              40px 80px 5px var(--brand),
             -30px 120px 6px var(--brand);
  opacity:.14;
}
@keyframes floatUp{0%{transform:translateY(0);opacity:.6}100%{transform:translateY(-150vh);opacity:0}}

.aviator{
  position:fixed; top:10%; left:-120px; width:150px; opacity:.22;
  filter:drop-shadow(0 0 8px var(--brand)); z-index:0;
  animation:fly 12s linear infinite;
}
@keyframes fly{0%{left:-120px;top:10%;transform:rotate(10deg)}50%{top:15%}100%{left:110%;top:10%;transform:rotate(-10deg)}}

/* Conteúdo principal */
.container{
  width:min(1100px, 100% - 2rem);
  margin: clamp(48px,6vw,72px) auto var(--space-5);
  position:relative; z-index:2;
}

.top{ text-align:center; margin-bottom:var(--space-3); }
.top h1{ margin:0 0 .25rem; font-size:clamp(1.6rem,2.6vw,2.1rem); }
.lead{ color:var(--txt-dim); margin:0; }

/* ---------------- Planos (carrossel horizontal) ---------------- */
.planos-cadastro{ margin-top:1rem; }

/* trilho rolável (touch + mouse/trackpad) */
.planos-grid{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;                   /* rolagem lateral */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; /* suaviza no iOS */
  scroll-snap-type: x proximity;     /* snap suave entre cards */
  padding: 15px 1px 5px;
  margin: 0 calc(-1 * 0px);         /* cards encostam nas bordas visuais */
  scrollbar-gutter: stable both-edges;
  position:relative;
  /* sombras nas bordas para sugerir rolagem */
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent);
}
.planos-grid::-webkit-scrollbar{ height:10px; }
.planos-grid::-webkit-scrollbar-thumb{ background: #333; border-radius:999px; border:2px solid #1a1a24; }
.planos-grid::-webkit-scrollbar-track{ background: #0f0f14; }

/* cada card vira um slide */
.card-plano{
  scroll-snap-align: center;
  min-width: clamp(260px, 32vw, 340px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--txt);
  box-shadow:var(--shadow);
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  text-align:left; cursor:pointer; position:relative;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, outline-color .25s ease;
  outline:0 solid transparent;
}
.card-plano:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.22); }
.card-plano:focus-visible{ outline:3px solid color-mix(in oklab, var(--accent), #000 15%); }

.card-hd{ display:flex; align-items:center; gap:.5rem; justify-content:space-between; }
.card-hd .nome{ font-weight:800; font-size:1.05rem; }

.selo{
  font-size:.72rem; font-weight:800; padding:.22rem .5rem; border-radius:999px; color:#fff;
}
.selo.free{
  background:linear-gradient(135deg, color-mix(in oklab,var(--ok),#000 10%), color-mix(in oklab,var(--accent),#000 10%));
}
.selo.pop{
  background:linear-gradient(135deg, color-mix(in oklab,var(--brand),#000 10%), color-mix(in oklab,var(--accent),#000 10%));
}

.preco{ font-variant-numeric:tabular-nums; font-size:1.35rem; color:var(--brand); }
.preco .mes{ font-size:.9rem; color:var(--txt-dim); margin-left:4px; }

.features{
  list-style:none; padding:0; margin:6px 0 0;
  display:flex; flex-direction:column; gap:6px;
}
.features li{ color:var(--txt-dim); display:flex; align-items:center; gap:.5rem; }

/* sinal de seleção (check verde) */
.card-plano .check{
  position:absolute; top:10px; left:90%; width:22px; height:22px;
  border-radius:999px; background:color-mix(in oklab, var(--ok), #000 10%);
  display:grid; place-items:center; color:#00190f; font-size:14px;
  border:1px solid color-mix(in oklab, var(--ok), #000 35%);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease;
}
.card-plano.is-selected .check{ opacity:1; transform:scale(1); }

/* estados */
.card-plano.is-selected{
  border:2px solid var(--accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), #000 7%), var(--card));
  box-shadow:0 16px 40px color-mix(in oklab,var(--accent),#000 80%);
}
.card-plano.is-free{
  border:2px solid transparent;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg, color-mix(in oklab,var(--ok),#000 10%), color-mix(in oklab,var(--accent),#000 10%)) border-box;
}
.card-plano.is-pop .card-hd .nome{ text-shadow:0 0 18px rgba(240,84,84,.3); }

/* ---------------- Formulário ---------------- */
.form-cadastro{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-top:var(--space-4);
  box-shadow:var(--shadow);
  margin: 5px;
}
label{ display:block; font-weight:600; margin:.4rem 0 .25rem; }
input, select{
  width:100%; background:var(--card); color:var(--txt);
  border:1px solid var(--border); border-radius:10px; padding:10px;
}
input:focus, select:focus{ outline:2px solid color-mix(in oklab, var(--accent), #000 10%); outline-offset:1px; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media (max-width:720px){ .split{ grid-template-columns:1fr; } }

/* Botão principal */
.btn-primary{
  margin-top:14px;
  background:var(--brand); color:#fff;
  border:1px solid color-mix(in oklab,var(--brand),#000 20%);
  padding:.8rem 1.2rem;
  border-radius:10px; font-weight:800;
  display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 12px 28px color-mix(in oklab,var(--brand),#000 65%);
  transition:transform .15s ease, background .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.btn-primary:hover{ background:var(--brand-2); transform:translateY(-1px); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

/* Rodapé do form */
.footer{ margin-top:10px; color:var(--txt-dim); }
.footer a{ color:#fff; text-decoration:underline; }

/* Efeito "velas" do JS */
#velas{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
@keyframes subir{ 0%{ transform:translateY(0); opacity:.8; } 100%{ transform:translateY(-120vh); opacity:0; } }

/* Mensagem de erro da confirmação de senha */
.erro-senha{
  color:var(--brand); font-size:.9rem; font-weight:700;
  margin-top: 0.5rem; margin-bottom:1rem;
}

/* ---------------- Motion safety ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}