/* Neon Glass overrides (loads after style.css). High specificity + !important to defeat stale styles. */
:root{
  --bg0:#070815;
  --bg1:#0b0e1a;
  --glass:rgba(255,255,255,.08);
  --glass2:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.16);
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --p1:#7b5cff;
  --p2:#3a8dff;
  --p3:#ff4dc7;
}

html,body{height:100%;}

body{
  color:var(--text) !important;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(123,92,255,.38), rgba(123,92,255,0) 55%),
    radial-gradient(900px 420px at 82% -10%, rgba(58,141,255,.28), rgba(58,141,255,0) 55%),
    radial-gradient(900px 520px at 50% 110%, rgba(255,77,199,.16), rgba(255,77,199,0) 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 70%) !important;
}

.container{color:var(--text) !important;}

.topbar{
  background: rgba(7,8,21,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand, .nav a{color: rgba(255,255,255,.92) !important;}
.nav a:hover{color:#fff !important; opacity:1 !important;}
.nav-toggle{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 12px !important;
}

.announce{
  background: linear-gradient(135deg, rgba(123,92,255,.35), rgba(58,141,255,.25)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.card, .plan-card, .addon-card, .summary-card, .box, .panel, .well, .payment-box{
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(255,255,255,.92) !important;
}

/* ---- Ultra readable text inside plan/addon cards (base CSS contains dark text rules) ---- */
label.plan.card, label.card.addon, .summary.card, .hero-card, .step-card{
  color: rgba(255,255,255,.92) !important;
}

label.plan.card .plan-name,
label.plan.card .price-once,
label.plan.card .plan-price,
label.plan.card .plan-select span,
label.plan.card .badge-pop{
  color:#fff !important;
}

label.plan.card .plan-tag,
label.plan.card .price-month,
label.plan.card .plan-desc,
label.plan.card .plan-feat,
label.plan.card .plan-feat li{
  color: rgba(255,255,255,.86) !important;
}

label.card.addon .card-title,
label.card.addon .addon-price{color:#fff !important;}

label.card.addon .card-text,
label.card.addon .small,
label.card.addon .muted{color: rgba(255,255,255,.84) !important;}

/* Increase contrast for any text accidentally set to dark */
label.plan.card *, label.card.addon *{
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Make text inside glass cards readable / luxury */
.card h1,.card h2,.card h3,.card h4,.card h5,
.plan-card h1,.plan-card h2,.plan-card h3,.plan-card h4,.plan-card h5,
.addon-card h1,.addon-card h2,.addon-card h3,.addon-card h4,.addon-card h5{
  color:#fff !important;
}

.card p, .card li, .card small,
.plan-card p, .plan-card li, .plan-card small,
.addon-card p, .addon-card li, .addon-card small{
  color: rgba(255,255,255,.82) !important;
}

.muted{color: rgba(255,255,255,.70) !important;}
.total-price, .monthly-price, .price, .amount, .plan-price{color:#fff !important;}

.stepper, .steps, .step{background: transparent !important;}

input[type="text"], input[type="email"], input[type="tel"], input[type="file"], select, textarea, .form-control{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 15.5px !important;
  min-height: 46px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Luxury file upload (Step 2) */
.file-uploader{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.file-uploader .file-input{
  position:absolute;
  left:-9999px;
}
.file-uploader .file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  user-select:none;
  min-height:46px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.file-uploader .file-btn:hover{
  box-shadow: 0 0 0 4px rgba(123,92,255,.15), 0 10px 26px rgba(0,0,0,.28);
  border-color: rgba(123,92,255,.55);
}
.file-uploader .file-name{
  flex:1;
  min-height:46px;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Step 2 layout: force full-width columns and equal field blocks */
.checkout-step[data-step="2"] .grid{
  width: 100% !important;
  align-items: start !important;
  column-gap: 26px !important;
  row-gap: 22px !important;
}
.checkout-step[data-step="2"] .grid.grid-2{
  grid-template-columns: 1fr 1fr !important;
}
.checkout-step[data-step="2"] .grid > div{
  width: 100% !important;
}
.checkout-step[data-step="2"] .grid > div *{
  max-width: none !important;
}
.checkout-step[data-step="2"] label{
  display: block !important;
  margin-bottom: 8px !important;
}

input::placeholder, textarea::placeholder{color: rgba(255,255,255,.55) !important;}

input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(123,92,255,.85) !important;
  box-shadow: 0 0 0 3px rgba(123,92,255,.30) !important;
  background: rgba(255,255,255,.14) !important;
}

label, .form-label{color: rgba(255,255,255,.78) !important;}

.btn, button, .btn-primary{border-radius: 14px !important; font-weight: 650 !important;}

.btn-primary, .btn-continue, .btn-pay{
  background: linear-gradient(135deg, var(--p1), var(--p2)) !important;
  border: none !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(123,92,255,.35) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover, .btn-continue:hover, .btn-pay:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(58,141,255,.45) !important;
  filter: brightness(1.02);
}

.btn-secondary, .btn-back{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color:#fff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Responsive polish */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr !important;}
  .hero-right{margin-top:16px;}
  .grid.grid-2{grid-template-columns:1fr !important;}
  .checkout-step[data-step="2"] .grid.grid-2{grid-template-columns:1fr !important;}
  .nav{gap:10px;}
}

@media (max-width: 520px){
  .container{padding-left:14px !important; padding-right:14px !important;}
  .card, .plan-card, .addon-card{border-radius:16px !important;}
  .btn, button{width:100%;}
  .file-uploader{flex-direction:column; align-items:stretch;}
}

.hero{
  background:
    radial-gradient(circle at 28% 30%, rgba(123,92,255,.55), transparent 55%),
    radial-gradient(circle at 72% 22%, rgba(58,141,255,.45), transparent 55%),
    radial-gradient(circle at 55% 75%, rgba(255,77,199,.25), transparent 55%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.hero-inner{color:#fff !important;}
.hero .hero-badge{background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important;}


/* Hero uploaded image */
.hero-uploaded{width:100%;height:220px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.35);}
@media (min-width: 900px){.hero-uploaded{height:260px;}}

/* Plan card demo area */
.plan-actions{margin-top:10px;display:flex;gap:10px;align-items:center}
.btn.tiny{padding:6px 10px !important;border-radius:10px !important;font-size:12px !important;line-height:1.1}
.btn.ghost{background:rgba(255,255,255,0.10)!important;border:1px solid rgba(255,255,255,0.20)!important;color:#fff!important}
.btn.ghost:hover{box-shadow:0 12px 28px rgba(58,141,255,0.35)!important;transform:translateY(-1px)}

/* Demo modal images */
.demo-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.demo-img{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.demo-img img{display:block;width:100%;height:120px;object-fit:cover}

/* WhatsApp floating button */
.wa-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(37,211,102,.95), rgba(18,140,126,.95));
  color:#fff !important;
  text-decoration:none !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wa-fab:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(0,0,0,.42)}
.wa-fab-ico{display:inline-flex}
.wa-fab-text{font-weight:700;letter-spacing:.2px}
@media (max-width: 520px){
  .wa-fab{right:14px;bottom:14px;padding:12px 12px}
  .wa-fab-text{display:none}
}

/* WhatsApp hero/button */
.btn.whatsapp, .btn-whatsapp{
  background: linear-gradient(135deg, rgba(37,211,102,.95), rgba(18,140,126,.95)) !important;
  border: none !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(37,211,102,.25) !important;
}
.btn.whatsapp:hover, .btn-whatsapp:hover{box-shadow:0 14px 30px rgba(37,211,102,.35) !important;transform:translateY(-1px)}