/* =========================
   UPSpeed — Tema Neon/Dark
   Cole inteiro no CSS do site
   ========================= */

/* variáveis de tema */
:root{
  --ups-bg: #0a0a14;
  --ups-card: #111018;
  --ups-primary: #00ff88;
  --ups-accent: #ff00aa;
  --ups-blue: #0066ff;
  --ups-text: #e6e7ff;
  --ups-dim: rgba(255,255,255,0.06);
  --ups-border: rgba(0,255,136,0.18);
  --ups-gradient: linear-gradient(135deg,var(--ups-primary),var(--ups-accent),var(--ups-blue));
  --ups-shadow: 0 20px 50px rgba(0,255,136,0.12);
  --radius-lg: 28px;
  --radius-pill: 50px;
  --glass: rgba(255,255,255,0.03);
}

/* reset / base (top priority) */
html,body{height:100%;}
body{
  background: var(--ups-bg) !important;
  color: var(--ups-text) !important;
  font-family: "Poppins", "Source Sans Pro", sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* header */
header.header, header{
  position:fixed !important;
  top:0;left:0;right:0;
  background: rgba(10,10,20,0.96) !important;
  border-bottom: 1px solid var(--ups-border) !important;
  backdrop-filter: blur(16px) !important;
  padding: 14px 20px !important;
  z-index: 1100 !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* logo */
header .logo-img, .logo-img{
  max-height:52px !important;
  border-radius:8px !important;
  display:block;
}

/* header right button (pedido) */
.header-right, .header .header-right{ display:flex; gap:12px; align-items:center; }
.status-btn, .header .status-btn{
  background: var(--ups-gradient) !important;
  color:#000 !important;
  padding:10px 18px !important;
  border-radius:var(--radius-pill) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  box-shadow: var(--ups-shadow) !important;
  transform-origin:center;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.status-btn:hover{ transform: scale(1.06) !important; }

/* hero */
.hero{
  min-height:78vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding: 120px 20px 80px !important; /* leave room for fixed header */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0,255,136,0.08), transparent 15%),
    radial-gradient(circle at 90% 80%, rgba(255,0,170,0.06), transparent 15%),
    linear-gradient(135deg, rgba(10,10,20,0.82), rgba(0,0,0,0.98));
  background-size: cover !important;
}

/* hero typography */
.hero h1{
  font-family: "Orbitron", sans-serif !important;
  font-weight:900 !important;
  font-size: clamp(32px, 6.4vw, 64px) !important;
  line-height:1.02 !important;
  margin-bottom:12px !important;
  background: var(--ups-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 6px 26px rgba(0,255,136,0.06) !important;
  animation: ups-glow 2.2s ease-in-out infinite alternate;
}
@keyframes ups-glow{ from{ text-shadow:0 0 16px rgba(0,255,136,0.45);} to{ text-shadow:0 0 56px rgba(0,255,136,0.95);} }

.hero p{
  color: rgba(230,230,255,0.9) !important;
  font-size: clamp(14px, 1.8vw, 18px) !important;
  margin-bottom:22px !important;
  font-weight:600 !important;
  opacity:.95;
}

/* primary button */
a.btn-primary, .btn-primary, button.btn-primary{
  display:inline-block !important;
  padding: 14px 42px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--ups-gradient) !important;
  color: #000 !important;
  font-weight:900 !important;
  font-size: 1.05rem !important;
  text-decoration:none !important;
  box-shadow: var(--ups-shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
a.btn-primary:hover, button.btn-primary:hover{ transform:scale(1.04) !important; box-shadow: 0 30px 70px rgba(0,255,136,0.12) !important; }

/* tabs container */
.tabs{
  display:flex !important;
  gap:16px !important;
  justify-content:center !important;
  align-items:center !important;
  padding: 28px 20px !important;
  max-width:1200px !important;
  margin: 0 auto 28px !important;
}

/* tab buttons */
.tab-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  border-radius: 18px !important;
  padding: 12px 20px !important;
  font-weight:800 !important;
  color: var(--ups-text) !important;
  border: 2px solid transparent !important;
  cursor:pointer !important;
  transition: all .24s ease !important;
  display:inline-flex; align-items:center; gap:10px;
}
.tab-btn.active{
  background: var(--ups-gradient) !important;
  color: #000 !important;
  transform: scale(1.04) !important;
  box-shadow: var(--ups-shadow) !important;
}

/* tab content */
.tab-content{ padding: 6px 12px 36px !important; display:block; }
.tab-content:not(.active){ display:none !important; }

/* packages grid */
.packages{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 28px !important;
  max-width:1300px !important;
  margin: 18px auto 80px !important;
  padding: 0 18px !important;
}

/* card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 22px !important;
  text-align:center !important;
  border: 1.5px solid var(--ups-border) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55) !important;
  transition: transform .32s cubic-bezier(.16,.84,.42,1), box-shadow .32s !important;
  position:relative !important;
  overflow:hidden !important;
}
.card:hover{ transform: translateY(-10px) !important; box-shadow: var(--ups-shadow) !important; }

/* featured card bump */
.card[style*="transform:scale(1.05)"], .card.featured, .card.z-top{ transform: scale(1.04) !important; z-index:2 !important; }

/* badge */
.badge{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-weight:800 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
}

/* card title / price */
.card h3{
  color: var(--ups-primary) !important;
  font-size: 1.4rem !important;
  margin: 8px 0 8px !important;
  font-weight:800 !important;
}
.price{
  font-size: clamp(22px, 4.5vw, 44px) !important;
  font-weight:900 !important;
  margin: 8px 0 18px !important;
  background: var(--ups-gradient) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* list inside card */
.card ul{
  list-style:none !important;
  margin: 14px 0 20px !important;
  padding:0 !important;
  text-align:left !important;
}
.card ul li{
  padding:10px 0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  color: rgba(230,230,255,0.95) !important;
  font-weight:600 !important;
}
.card ul li i{ color: var(--ups-primary) !important; font-size:1.05rem !important; }

/* forms / buttons inside cards */
.card form{ margin-top:8px !important; }
.card form button, .card form .btn-primary{
  width:100% !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-weight:800 !important;
  margin-top:8px !important;
  background: var(--ups-gradient) !important;
  color:#000 !important;
  box-shadow: 0 12px 32px rgba(0,255,136,0.08) !important;
}

/* right column price area (if present) */
.checkout-right-content, .summary, .order-summary{
  background: var(--glass) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* footer */
footer, .footer{
  background: rgba(10,10,16,0.98) !important;
  color: #a8a9c8 !important;
  padding: 24px !important;
  border-top: 1px solid var(--ups-border) !important;
  text-align:center !important;
  font-size: 0.95rem !important;
}
footer span{ color: var(--ups-primary) !important; font-weight:700 !important; }

/* whatsapp floating button — keep existing style but refine */
a[href*="api.whatsapp.com"]{
  width:60px !important; height:60px !important; border-radius:50% !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important; display:flex !important;
  align-items:center !important; justify-content:center !important; z-index:1200 !important;
  position:fixed !important; bottom:34px !important; right:34px !important;
}

/* notification popup */
.notification-popup{ border-radius:14px !important; padding:12px 16px !important; }

/* small screens tweaks */
@media (max-width: 991px){
  header{ padding:12px 14px !important; }
  .hero{ padding: 100px 16px 48px !important; min-height:56vh !important; }
  .tabs{ flex-direction:column !important; gap:12px !important; padding-top:10px !important; }
  .card{ padding:18px 14px !important; border-radius:20px !important; }
  .card h3{ font-size:1.15rem !important; }
  .price{ font-size: 26px !important; }
  .btn-primary{ padding:12px 20px !important; font-size:1rem !important; }
}

/* accessibility / focus */
a:focus, button:focus, .tab-btn:focus{ outline: 3px solid rgba(0,255,136,0.12) !important; outline-offset:3px !important; }

/* helpers to strongly override older css (use only when necessary) */
body *{ transition: color .18s ease, background .18s ease, border-color .18s ease !important; }

/* small polish: make icons match theme */
.fa, .fas, .fab, .far, i[class*="fa-"]{
  color: var(--ups-primary) !important;
  text-shadow: 0 6px 18px rgba(0,255,136,0.03) !important;
}

/* end of theme */