/* Futuristic Neon / Holographic UI */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-1: #03040f; /* deep */
  --bg-2: #0b1020; /* deep */
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff4dff;
  --neon-blue: #6a8cff;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --accent: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
}

html,body { height: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(800px 400px at 10% 10%, rgba(80,60,255,0.06), transparent),
              radial-gradient(600px 300px at 90% 80%, rgba(0,240,255,0.04), transparent),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color: #e6eef8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* animated aurora overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255,0,255,0.03), rgba(0,255,255,0.03), rgba(255,255,0,0.03));
  mix-blend-mode: screen;
  animation: rotateAurora 18s linear infinite;
  pointer-events: none;
}
@keyframes rotateAurora { to { transform: rotate(360deg); } }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
header { position: sticky; top: 0; z-index: 60; padding: 14px 0; backdrop-filter: blur(8px); }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { font-weight:800; font-size:20px; letter-spacing:0.4px; color: white; display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.logo .mark { background: linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:900; font-family: 'Orbitron', sans-serif; }

.nav-links { display:flex; gap:18px; align-items:center; }
.nav-links a { color: rgba(230,238,248,0.85); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px; transition: all .2s ease; }
.nav-links a:hover { transform: translateY(-2px); color: var(--neon-cyan); text-shadow: 0 6px 30px rgba(0,240,255,0.06); }

/* HERO */
.hero { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:80px 0; position:relative; }
.hero .left { max-width:640px; }
.hero h1 { font-family: 'Orbitron', sans-serif; font-size:56px; line-height:1.02; background: linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 12px 30px rgba(102,79,255,0.2)); }
.hero p { color: rgba(230,238,248,0.85); margin-top:12px; font-size:18px; }

.hero .ctas { margin-top:26px; display:flex; gap:12px; }
.btn { cursor:pointer; border: none; padding:12px 20px; border-radius:12px; font-weight:700; display:inline-flex; align-items:center; gap:10px; }
.btn-primary { background: linear-gradient(90deg,var(--neon-cyan),var(--neon-blue)); color:#001018; box-shadow: 0 12px 48px rgba(0,240,255,0.08), 0 6px 20px rgba(106,140,255,0.06); }
.btn-ghost { background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.06); color: #e6eef8; }
.btn:hover { transform: translateY(-3px); }

/* right hero artwork */
.hero .art { flex:1; display:flex; align-items:center; justify-content:center; }
.art .card-avatar { width:420px; height:300px; border-radius:18px; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 20px 80px rgba(102,79,255,0.12); display:flex; align-items:center; justify-content:center; }
.art .neon-ring { width:240px; height:240px; border-radius:50%; background: conic-gradient(from 180deg, rgba(0,240,255,0.08), rgba(255,77,255,0.06)); display:flex; align-items:center; justify-content:center; }

/* Cards: Glass + neon highlight */
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; border: 1px solid var(--glass-border); padding:22px; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 64px rgba(0,0,0,0.75); }
.card .title { color: #f2f8ff; font-weight:700; margin-bottom:8px; }

/* Product card variant */
.product-header { padding:18px; border-radius:12px; margin-bottom:12px; background: linear-gradient(90deg, rgba(0,240,255,0.08), rgba(255,77,255,0.06)); }
.product-price { font-size:28px; color: var(--neon-cyan); font-weight:900; }

/* QR and PIX blocks */
.qrcode-box { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:24px; border-radius:12px; text-align:center; }
.qrcode-box img { max-width:320px; width:100%; border-radius:10px; box-shadow: 0 12px 40px rgba(0,240,255,0.06); }
.pix-code-box { position:relative; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border: 1px solid rgba(255,255,255,0.03); padding:18px; border-radius:10px; }
.pix-code-input { font-family: 'Monaco', monospace; background: rgba(0,0,0,0.45); color: var(--neon-cyan); padding:16px; border-radius:8px; width:100%; border:none; }
.copy-button { position:absolute; top:12px; right:12px; }

/* Alerts */
.alert { padding:12px 16px; border-radius:10px; }
.alert-success { background: linear-gradient(90deg,#062614,#0f3f2a); border-left: 4px solid #16a34a; }
.alert-warning { background: linear-gradient(90deg,#3a2f0a,#4b3d10); border-left: 4px solid #f59e0b; }
.alert-info { background: linear-gradient(90deg,#031a2e,#04283f); border-left: 4px solid #0284c7; }

/* Badges & status */
.badge { padding:6px 12px; border-radius:999px; background: rgba(255,255,255,0.03); color:#dbeafe; font-weight:800; }
.status-indicator { font-weight:800; }
.status-paid::before { content:''; display:inline-block; width:10px;height:10px;border-radius:50%; margin-right:8px; background: linear-gradient(90deg,#10b981,#34d399); box-shadow: 0 6px 22px rgba(16,185,129,0.12); }
.status-pending::before { content:''; display:inline-block; width:10px;height:10px;border-radius:50%; margin-right:8px; background: linear-gradient(90deg,#f59e0b,#f97316); box-shadow: 0 6px 22px rgba(245,158,11,0.12); }

/* Footer */
footer { padding:40px 0; color: #8fa6cc; text-align:center; }

/* Utilities & responsive */
.text-muted { color: #8fa6cc; }
.mt-20 { margin-top:20px; }
.mb-20 { margin-bottom:20px; }

@media (max-width: 900px) {
  .hero { flex-direction:column; padding:40px 0; }
  .hero h1 { font-size:36px; text-align:center; }
  .art .card-avatar { width:320px; height:220px; }
  .grid-2 { grid-template-columns: 1fr !important; }
}

/* Checkout-specific */
.checkout-grid { display:grid; grid-template-columns: 1fr 360px; gap:32px; align-items:start; }
@media (max-width:1100px){ .checkout-grid { grid-template-columns: 1fr 320px; } }
@media (max-width:900px){ .checkout-grid { grid-template-columns: 1fr; } }
.form-column { }
.summary-column { position:relative; }
.summary-card { padding:22px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); box-shadow: 0 18px 48px rgba(2,6,23,0.7); position:sticky; top:100px; }
.product-sku { color: #9fb6dc; font-weight:700; font-size:12px; margin-bottom:8px; }
.big-price { font-size:38px; font-weight:900; color:var(--neon-cyan); margin:8px 0 16px; }
.benefits { color:#9fb6dc; font-size:14px; line-height:1.6; }

/* Improved form elements */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; color: #cfe9ff; margin-bottom:8px; font-weight:700; }
input[type="text"], input[type="email"], input[type="tel"], select { background: rgba(0,0,0,0.36); border:1px solid rgba(255,255,255,0.06); color: #e6eef8; padding:12px 14px; border-radius:10px; outline: none; transition: box-shadow .18s ease, border-color .14s ease, transform .12s ease; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus { box-shadow: 0 8px 28px rgba(0,240,255,0.06); border-color: rgba(0,240,255,0.6); transform: translateY(-2px); }

/* invalid state */
input.invalid { box-shadow: 0 8px 24px rgba(255,77,77,0.06); border-color: rgba(255,77,77,0.85) !important; }
.field-note { font-size:12px; color:#8fa6cc; margin-top:6px; }

/* Payment options improved */
.payment-options { display:flex; gap:12px; margin-top:6px; }
.payment-option { flex:1; padding:14px; border-radius:12px; background: rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.04); cursor:pointer; display:flex; gap:12px; align-items:center; justify-content:center; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; flex-direction:column; min-height:78px; }
.payment-option:focus { outline: 2px solid rgba(0,240,255,0.12); }
.payment-option[aria-disabled="true"] { opacity:0.5; cursor:not-allowed; }
.payment-option .label { font-weight:800; color:#e6eef8; font-size:15px; }
.payment-option .sub { font-size:12px; color:#8fa6cc; }
.payment-option.active { border: 1px solid rgba(0,240,255,0.6); box-shadow: 0 12px 44px rgba(0,240,255,0.06); background: linear-gradient(90deg, rgba(0,240,255,0.03), rgba(255,77,255,0.02)); transform: translateY(-4px); }

/* Card fields container (animated) */
#card-fields.card-hidden { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .28s ease; }
#card-fields.card-visible { max-height: 900px; opacity: 1; transition: max-height .45s ease, opacity .35s ease; }
#card-fields { margin-top:12px; border-left: 3px solid rgba(0,240,255,0.04); padding-left:12px; }

/* Buttons */
.btn-primary { width:100%; padding:14px 18px; border-radius:12px; font-size:16px; }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; filter:grayscale(.1); }
.btn-secondary { width:100%; }

/* small helpers */
.tiny-muted { color:#8fa6cc; font-size:13px; }

/* Product features list */
.product-features { list-style: none; padding-left: 0; margin-top: 12px; }
.product-features li { position: relative; padding-left: 34px; margin-bottom: 10px; color: #cfe9ff; }
.product-features li::before { content: '✓'; position: absolute; left: 0; top: 0; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color: var(--neon-cyan); font-weight:800; background: rgba(0,240,255,0.04); border-radius:6px; box-shadow: 0 6px 22px rgba(0,240,255,0.06); }

@media (max-width: 900px) {
  .summary-card { position: static; top:auto; }
}

/* small helper */
.tiny-muted { color:#8fa6cc; font-size:13px; }

/* small copy feedback */
.copy-feedback { position: fixed; right:16px; bottom:16px; background: linear-gradient(90deg,#10b981,#34d399); color:black; padding:12px 16px; border-radius:10px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }

/* subtle animated highlight */
@keyframes floaty { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } }
.art .neon-ring { animation: floaty 6s ease-in-out infinite; }

  font-weight: 600;
}

.copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Footer */
footer {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 40px 20px;
  text-align: center;
  margin-top: 60px;
}

footer p {
  opacity: 0.8;
  margin: 0;
}

/* Utilities */
.text-center {
  text-align: center;
}

.text-muted {
  color: #666;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.gap-20 {
  gap: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 36px;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .header-content {
    flex-direction: column;
    gap: 12px;
  }

  .nav-links {
    width: 100%;
    flex-direction: column;
  }

  .card {
    padding: 20px;
  }

  .btn {
    width: 100%;
  }
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(102, 126, 234, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Copy feedback */
.copy-feedback {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #16a34a;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease-out;
  z-index: 1000;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}