/* frontend/style.css
   Tema: dourado / preto — gamer medieval (Priston Tale)
   Coloque <link rel="stylesheet" href="style.css"> no head (já está no HTML).
*/

/* Fontes (opcional: precisa de internet para carregar do Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;600&display=swap');

:root{
  --bg-900: #060506;
  --panel-800: #0f0d08;
  --accent-gold: #d9a800; /* ouro brilhante */
  --accent-gold-dark: #b07f00; /* ouro mais escuro para sombras */
  --muted-gold: #f0d88b;
  --text-primary: #f6edd6;
  --text-muted: #a89b7a;
  --glass: rgba(255,255,255,0.04);
  --card-border: rgba(217,168,0,0.12);
  --shadow-strong: 0 10px 30px rgba(0,0,0,0.6);
  --glow: 0 6px 22px rgba(217,168,0,0.12);
  --radius-xl: 18px;
}

/* Reset básico / defaults */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(217,168,0,0.03), transparent 6%),
              radial-gradient(800px 400px at 90% 90%, rgba(176,127,0,0.02), transparent 6%),
              linear-gradient(180deg, var(--bg-900) 0%, #020202 100%);
  color:var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

/* Container principal — card estilizado */
.card {
  width:100%;
  max-width:420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.16));
  border-radius:var(--radius-xl);
  padding:22px;
  border:1px solid var(--card-border);
  box-shadow: var(--shadow-strong), var(--glow);
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(4px) saturate(120%);
}

/* Pseudo-texture / borda superior com dourado */
.card::before{
  content:'';
  position:absolute;
  left:-30%;
  top:-50%;
  width:160%;
  height:200px;
  background: linear-gradient(90deg, transparent 0%, rgba(217,168,0,0.06) 20%, rgba(217,168,0,0.12) 50%, rgba(217,168,0,0.06) 80%, transparent 100%);
  transform: rotate(-12deg);
  pointer-events:none;
}

/* Cabeçalho */
.header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.logo-coin {
  width:56px;
  height:56px;
  border-radius:12px;
  background: conic-gradient(from 180deg at 50% 50%, var(--accent-gold) 0deg, var(--accent-gold-dark) 120deg, rgba(0,0,0,0.12) 240deg);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.6), inset 0 -6px 12px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.5);
}
.logo-coin::after{
  content:'💰';
  transform: scale(1.2);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  font-size:20px;
}
.title {
  font-family: 'Cinzel', serif;
  font-weight:700;
  color:var(--accent-gold);
  letter-spacing:1px;
  font-size:20px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.6);
}
.subtitle {
  font-size:12px;
  color:var(--text-muted);
  margin-top:2px;
}

/* Inputs estilizados (substitui classes básicas) */
.input,
.select {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.22));
  border:1px solid rgba(217,168,0,0.08);
  color:var(--text-primary);
  outline: none;
  transition: box-shadow .15s, border-color .12s, transform .08s;
  font-size:14px;
  margin-top:8px;
}
.input:focus,
.select:focus{
  box-shadow: 0 6px 24px rgba(217,168,0,0.06);
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

/* Labels */
.label {
  display:block;
  font-size:12px;
  color:var(--text-muted);
  margin-top:12px;
}

/* Valor / Badge */
.price-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  gap:12px;
}
.unit {
  font-size:12px;
  color:var(--text-muted);
}
.price {
  font-family: 'Cinzel', serif;
  font-size:22px;
  color:var(--accent-gold);
  text-shadow: 0 6px 18px rgba(176,127,0,0.08);
  padding:6px 12px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(217,168,0,0.02), rgba(0,0,0,0.16));
  border:1px solid rgba(217,168,0,0.06);
}

/* Pix key */
.pix {
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pix .key {
  font-weight:600;
  color:var(--muted-gold);
  background: linear-gradient(90deg, rgba(217,168,0,0.02), rgba(0,0,0,0.12));
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(217,168,0,0.06);
  font-size:13px;
}

/* Botões */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border: none;
  transition: transform .08s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-dark));
  color:#080608;
  box-shadow: 0 8px 30px rgba(184,128,0,0.14), inset 0 -6px 12px rgba(0,0,0,0.2);
}
.btn-ghost{
  background: transparent;
  color:var(--text-primary);
  border:1px solid rgba(217,168,0,0.08);
  backdrop-filter: blur(6px);
}

/* WhatsApp button verde estilizado */
.btn-whats {
  background: linear-gradient(180deg, #1fa84a, #157c39);
  color:white;
  border-radius:12px;
  padding:12px;
  font-weight:800;
  box-shadow: 0 8px 18px rgba(31,168,74,0.12);
}

/* Resultado / status */
.status {
  margin-top:12px;
  font-size:13px;
  color:var(--text-muted);
}

/* Small decorative footer */
.card-footer {
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--text-muted);
}
.selo {
  background: linear-gradient(90deg, rgba(217,168,0,0.06), rgba(217,168,0,0.14));
  padding:6px 10px;
  border-radius:8px;
  color:var(--muted-gold);
  font-weight:700;
  border:1px solid rgba(217,168,0,0.06);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

/* Responsividade */
@media (max-width:480px){
  :root{ --radius-xl:14px }
  .card{ padding:16px; max-width: 92vw; }
  .title{ font-size:18px; }
  .price{ font-size:18px; }
}

/* Extras: estilo para inputs nativos do seu HTML atual */
#quantidade, #personagem, #servidor {
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  margin:6px 0 0 0;
  padding:12px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.24));
  border:1px solid rgba(217,168,0,0.06);
  color:var(--text-primary);
  font-size:14px;
}
#valor {
  margin-top:10px;
  text-align:center;
  font-family: 'Cinzel', serif;
  color:var(--accent-gold);
  font-size:18px;
}

/* Utility: destaque no hover para botões */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(176,127,0,0.12); }
.btn-whats:hover { transform: translateY(-2px); }

/* Pequeno ornamento lateral (fundo medieval ornament) */
.card .ornament {
  position:absolute;
  right:-40px;
  top: -30px;
  width:220px;
  height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(217,168,0,0.025), transparent 8%),
              radial-gradient(circle at 70% 70%, rgba(217,168,0,0.02), transparent 6%);
  filter: blur(10px);
  opacity:0.55;
  pointer-events:none;
}