/* =================================================
   PURPLE • BLACK • WHITE — NEON GLASS THEME
   ================================================= */

/* ---------- VARIABLES ---------- */
:root{
  --glass-bg: rgba(255,255,255,0.10);
  --glass-bg-soft: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.28);

  --neon-purple: #b84bff;
  --neon-pink: #ff4dff;
  --neon-blue: #6a7cff;

  --glow-purple: rgba(184,75,255,0.45);
  --glow-pink: rgba(255,77,255,0.35);
  --glow-blue: rgba(106,124,255,0.35);

  --text:#f4f5ff;
}

/* ---------- RESET ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(184,75,255,0.25), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(255,77,255,0.22), transparent 55%),
    radial-gradient(800px 500px at 40% 95%, rgba(106,124,255,0.18), transparent 60%),
    #05050a;
}

/* ---------- BANNER ---------- */
/* ✅ Keep banner original size (no crop, no forced height) */
.banner{ width:100%; background:#000; }
.banner img{
  width:100%;
  height:auto;          /* IMPORTANT: keep original aspect ratio */
  display:block;
  object-fit:contain;   /* prevents cropping */
}

/* ---------- GRID ---------- */
.container{
  width:min(1100px,92%);
  margin:18px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

/* ---------- APP CARDS (GLASS) ---------- */
.app-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:18px;
  text-align:center;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border:1px solid var(--glass-border);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 20px 80px rgba(0,0,0,0.65),
    0 0 30px var(--glow-purple),
    0 0 45px var(--glow-pink);
}

.app-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 240px at 10% 10%, var(--glow-purple), transparent 60%),
    radial-gradient(800px 240px at 90% 0%, var(--glow-pink), transparent 55%),
    radial-gradient(700px 260px at 40% 110%, var(--glow-blue), transparent 60%);
  opacity:.55;
  pointer-events:none;
}

.app-card > *{ position:relative; }

.app-card img{
  width:78px;
  height:78px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 14px 40px rgba(0,0,0,0.7);
}

.app-card h2{
  margin:12px 0 6px;
  font-size:20px;
}

.app-card p{
  margin:0 0 14px;
  opacity:.85;
  font-size:13px;
}

/* ---------- BUTTONS (NEON GLASS) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin:6px 0;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  user-select:none;

  background: linear-gradient(
    135deg,
    rgba(184,75,255,0.60),
    rgba(255,77,255,0.60)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color:#fff;
  border:1px solid rgba(255,255,255,0.40);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 12px 35px rgba(0,0,0,0.6),
    0 0 25px var(--glow-purple),
    0 0 45px var(--glow-pink);

  transition:.2s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 18px 55px rgba(0,0,0,0.75),
    0 0 40px var(--glow-purple),
    0 0 70px var(--glow-pink);
}

/* outline glass */
.btn.outline{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.06)
  );
  color:#fff;
  border:1px solid rgba(255,255,255,0.40);
  box-shadow:
    0 0 18px rgba(255,255,255,0.15),
    0 0 35px var(--glow-blue);
}

.btn.small{
  width:auto;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
}

/* ---------- PAYMENT ---------- */
.payment{
  width:min(900px,92%);
  margin:34px auto 0;
  text-align:center;
}
.payment h2{ margin:0 0 14px; }

.payment-box{ display:grid; gap:12px; }

.payment-btn{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px;
  border-radius:22px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.20),
    rgba(255,255,255,0.06)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border:1px solid rgba(255,255,255,0.40);
  color:#fff;
  font-weight:900;
  text-decoration:none;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 20px 80px rgba(0,0,0,0.7),
    0 0 35px var(--glow-purple),
    0 0 60px var(--glow-pink);

  transition:.2s ease;
}
.payment-btn span{
  font-size:12px;
  opacity:.85;
  font-weight:700;
}
.payment-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20) inset,
    0 26px 110px rgba(0,0,0,0.85),
    0 0 50px var(--glow-purple),
    0 0 85px var(--glow-pink);
}
.payment-btn.qr{ cursor:pointer; }

/* ---------- REVIEWS ---------- */
.reviews{
  width:min(1100px,92%);
  margin:40px auto 0;
  text-align:center;
}
.review-sub{ opacity:.75; margin-top:8px; }

.review-box{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.review-card{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:20px;
  padding:14px;
  text-align:left;
  min-height:120px;
  box-shadow:0 18px 70px rgba(0,0,0,0.45);
}
.review-text{ margin:0; font-size:13px; line-height:1.35; }
.review-name{ display:block; margin-top:10px; opacity:.75; font-size:12px; }

/* ---------- RESELLER + HOURS ---------- */
.reseller,.hours{
  width:min(900px,92%);
  margin:38px auto 0;
  text-align:center;
  padding:20px 16px;
  border-radius:22px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border:1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 18px 70px rgba(0,0,0,0.55),
    0 0 30px var(--glow-purple);
}
.reseller p,.hours p{ opacity:.8; margin:8px 0 14px; }

/* ---------- FOOTER ---------- */
footer{
  text-align:center;
  padding:26px 12px;
  opacity:.7;
  font-size:12px;
}

/* ---------- FLOATING BUTTONS ---------- */
.floating-whatsapp,.floating-telegram{
  position:fixed;
  right:18px;
  width:58px;
  height:58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:22px;
  text-decoration:none;
  color:#fff;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.06)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border:1px solid rgba(255,255,255,0.40);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 0 30px var(--glow-purple),
    0 0 55px var(--glow-pink);

  transition:.2s ease;
  z-index:60;
}
.floating-whatsapp{ bottom:92px; }
.floating-telegram{ bottom:26px; }

.floating-whatsapp:hover,
.floating-telegram:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20) inset,
    0 0 45px var(--glow-purple),
    0 0 85px var(--glow-pink);
}

/* ✅ NEW: Floating AFTER PAID button */
.floating-afterpaid{
  position:fixed;
  right:18px;
  bottom:160px; /* above WhatsApp */
  width:58px;
  height:58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  text-decoration:none;
  color:#fff;

  background: linear-gradient(
    135deg,
    rgba(184,75,255,0.70),
    rgba(255,77,255,0.55)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border:1px solid rgba(255,255,255,0.40);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 0 30px var(--glow-purple),
    0 0 55px var(--glow-pink);

  transition:.2s ease;
  z-index:70;
}
.floating-afterpaid:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20) inset,
    0 0 45px var(--glow-purple),
    0 0 85px var(--glow-pink);
}

/* ---------- MODALS ---------- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.80);
  backdrop-filter: blur(12px);
  z-index:80;
  align-items:center;
  justify-content:center;
  padding:18px;
}

/* ✅ Make modal content fit phone screen better */
.modal-box{
  width:min(560px,94%);
  border-radius:26px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.08)
  );
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  border:1px solid rgba(255,255,255,0.40);

  box-shadow:
    0 40px 160px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 0 45px var(--glow-purple),
    0 0 80px var(--glow-pink);

  padding:18px;

  max-height: calc(100vh - 64px); /* IMPORTANT for mobile */
  overflow:hidden;               /* we will scroll list inside */
}

.modal-box h2{ margin:0 0 12px; }

/* ✅ Scrollable package list (up/down) */
#priceList{
  list-style:none;
  padding:0;
  margin:0 0 12px;
  display:flex;
  flex-direction:column;
  gap:10px;

  max-height: calc(100vh - 260px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-right:6px; /* space for scrollbar */
}

/* nice scrollbar */
#priceList::-webkit-scrollbar{ width:8px; }
#priceList::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
}
#priceList::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}

#priceList li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:16px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border:1px solid rgba(255,255,255,0.32);
}
#priceList strong{ font-size:16px; }

/* QR image */
.qr-img{
  width:100%;
  max-width:320px;
  display:block;
  margin:10px auto 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.30);
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .container{ grid-template-columns:repeat(2,1fr); }
  .review-box{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:520px){
  .container{ grid-template-columns:1fr; }
  .review-box{ grid-template-columns:1fr; }

  /* better tap area + spacing on small phones */
  .floating-whatsapp,.floating-telegram,.floating-afterpaid{
    right:14px;
    width:56px;
    height:56px;
    border-radius:18px;
  }
}