body{

  margin:0;
  padding:0;

  background:
  linear-gradient(
    180deg,
    #07111F,
    #0F172A
  );

  font-family:Arial,sans-serif;

  color:white;

  min-height:100vh;

}


/* PAGE */

.voucher-page{

  width:100%;
  max-width:480px;

  margin:auto;

  padding:20px 16px 120px;

  box-sizing:border-box;

}


/* =========================
TOP HEADER
========================= */

.voucher-top{

  position:fixed;

  top:0;

  left:50%;

  transform:translateX(-50%);

  width:100%;

  max-width:480px;

  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 16px;

  box-sizing:border-box;

  background:#0F172A;

  border-bottom:
  1px solid rgba(255,255,255,.06);

}

.voucher-top h1{

  margin:0;
  margin-top:12px;
  font-size:30px;

  font-weight:900;

}

.voucher-top p{

  margin-top:10px;
  opacity:.7;

  font-size:18px;

}

.voucher-logo{
  position: relative;
  width:60px;
  height:60px;
  margin-top: 40px;
  border-radius:20px;

  background:
  linear-gradient(
    135deg,
    #ffffff00,
    #ffffff00
  );

  display:flex;
  align-items:right;
  justify-content:right;

  font-size:30px;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.3);

}


/* =========================
HERO
========================= */

.voucher-hero{

  margin-top:10px;
  width:100%;

  border-radius:30px;

  padding:28px;

  box-sizing:border-box;

  background:
  linear-gradient(
    135deg,
    #008f62,
    #008165
  );

  position:relative;

  overflow:hidden;

  margin-bottom:22px;

}

.voucher-hero::before{

  content:"";

  position:absolute;

  top:-60px;
  right:-60px;

  width:180px;
  height:180px;

  border-radius:50%;

  background:
  rgba(255,255,255,.08);

}

.hero-badge{

  display:inline-block;

  background:
  rgba(255,255,255,.15);

  padding:8px 14px;

  border-radius:999px;

  font-size:12px;

  font-weight:700;

  margin-bottom:18px;

}

.voucher-hero h2{

  margin:0;

  font-size:32px;

  line-height:1.2;

  font-weight:900;

}

.voucher-hero p{

  margin-top:14px;

  opacity:.9;

  font-size:15px;

  line-height:1.6;

}


/* =========================
STATS
========================= */

.voucher-stats{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:12px;

  margin-bottom:28px;

}

.stat-card{

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.06);

  border-radius:22px;

  padding:16px;

  text-align:center;

}

.stat-card h3{

  margin:0;

  font-size:15px;

}

.stat-card p{

  margin-top:10px;

  font-size:12px;

  opacity:.7;

  line-height:1.5;

}


/* =========================
SECTION HEADER
========================= */

.section-header{

  margin-bottom:18px;

}

.section-header h2{

  margin:0;

  font-size:22px;

}

.section-header span{

  display:block;

  margin-top:8px;

  opacity:.6;

  font-size:14px;

}


/* =========================
GRID
========================= */

.voucher-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:16px;

}


/* =========================
CARD
========================= */

.card{

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.07);

  border-radius:26px;

  padding:20px;

  box-sizing:border-box;

  position:relative;

  overflow:hidden;

  transition:.25s;

}

.card:hover{

  transform:
  translateY(-3px);

  border-color:
  rgba(0,212,146,.35);

}

.card::before{

  content:"";

  position:absolute;

  top:-40px;
  right:-40px;

  width:100px;
  height:100px;

  border-radius:50%;

  background:
  rgba(255,255,255,.04);

}

.card h3{

  margin:0;

  font-size:28px;

  font-weight:900;

  color:#00D492;

}

.card p{

  margin-top:10px;

  opacity:.75;

  font-size:14px;

}


/* =========================
BUTTON
========================= */

.btn{

  width:100%;

  height:48px;

  border:none;

  border-radius:16px;

  margin-top:18px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  color:white;

  font-size:15px;

  font-weight:800;

  cursor:pointer;

  transition:.2s;

}

.btn:hover{

  transform:scale(1.02);

}


/* =========================
SUCCESS OVERLAY
========================= */

.success-overlay{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,.7);

  backdrop-filter:blur(10px);

  display:none;

  align-items:center;
  justify-content:center;

  z-index:99999;

  padding:20px;

  box-sizing:border-box;

}


/* =========================
SUCCESS CARD
========================= */

.success-card{

  width:100%;
  max-width:360px;

  background:#111827;

  border-radius:30px;

  padding:34px 24px;

  text-align:center;

  box-sizing:border-box;

}

.success-circle{

  width:90px;
  height:90px;

  border-radius:50%;

  margin:auto;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:42px;

}

.success-card h2{

  margin-top:24px;

  margin-bottom:0;

  font-size:28px;

}

.success-card p{

  margin-top:14px;

  opacity:.7;

  line-height:1.6;

}

.success-card button{

  width:100%;

  height:54px;

  border:none;

  border-radius:18px;

  margin-top:24px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  color:white;

  font-size:16px;

  font-weight:800;

}


/* =========================
RECEIPT
========================= */

.receipt-overlay{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,.75);

  backdrop-filter:blur(12px);

  display:flex;

  align-items:center;
  justify-content:center;

  z-index:999999;

  padding:20px;

  box-sizing:border-box;

}

.receipt-card{

  width:100%;
  max-width:380px;

  background:#111827;

  border-radius:28px;

  padding:24px;

  box-sizing:border-box;

}

.receipt-header h2{

  margin:0;

  text-align:center;

}

.receipt-content{

  margin-top:22px;

}

.receipt-btn{

  width:100%;

  height:54px;

  border:none;

  border-radius:18px;

  margin-top:24px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  color:white;

  font-size:16px;

  font-weight:800;

}





/* =========================
CASHBACK BADGE
========================= */

.cashback-badge{

  position:absolute;

  top:-0px;
  right:10px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  color:white;

  padding:5px 10px;

  border-radius:999px;

  font-size:11px;
  font-weight:700;

  box-shadow:
  0 4px 10px rgba(0,0,0,0.18);

  z-index:5;

}

/* =========================
CASHBACK TEXT
========================= */

.cashback-text{

  margin-top:10px;

  color:#00D492;

  font-size:13px;

  font-weight:700;

}





.receipt-overlay{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.75);

  display:none;

  justify-content:center;
  align-items:center;

  z-index:99999;

}

.receipt-card{

  width:90%;
  max-width:420px;

  background:#111827;

  color:white;

  border-radius:24px;

  padding:24px;

}

.receipt-logo{

  text-align:center;

  color:#00D492;

  font-size:28px;

  font-weight:900;

  margin-bottom:20px;

}




#receiptCard h2{
  text-align:center;
  margin-bottom:25px;
  font-size:28px;
  font-weight:900;
}

#receiptContent{
  margin-top:20px;
}

#receiptCard{
  box-shadow:
    0 20px 60px rgba(0,0,0,.45);
}




/* =========================
   MONTHLY WIFI PLAN
========================= */

.wifi-monthly-card{

  background:
  linear-gradient(
    135deg,
    #07111F,
    #0F172A
  );

  border:
  1px solid
  rgba(0,212,146,.25);

  border-radius:24px;

  padding:25px;

  margin:20px 15px;

  text-align:center;

  position:relative;

  overflow:hidden;

}

.wifi-ribbon{

  position:absolute;

  top:12px;

  right:-35px;

  background:#00D492;

  color:#07111F;

  padding:8px 40px;

  font-size:12px;

  font-weight:700;

  transform:
  rotate(35deg);

}

.wifi-monthly-card h2{

  margin:0;

  color:white;

  font-size:26px;

}

.wifi-duration{

  color:#94A3B8;

  margin-top:8px;

}

.wifi-price{

  font-size:42px;

  font-weight:900;

  color:#00D492;

  margin-top:18px;

}

.wifi-cap{

  margin-top:12px;

  color:#FFC107;

  font-weight:700;

}

.wifi-features{

  margin-top:18px;

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:10px;

}

.wifi-features span{

  background:
  rgba(255,255,255,.05);

  padding:8px 12px;

  border-radius:999px;

  font-size:13px;

}

.wifi-subscribe-btn{

  width:100%;

  height:52px;

  border:none;

  border-radius:14px;

  margin-top:22px;

  background:#00D492;

  color:white;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

}





/* =========================
   WIFI CONFIRM MODAL
========================= */

.wifi-confirm-overlay{

  position:fixed;
  inset:0;

  background:
  rgba(0,0,0,.75);

  display:none;

  justify-content:center;
  align-items:center;

  z-index:999999;

  padding:20px;

}

.wifi-confirm-card{

  width:100%;
  max-width:360px;

  background:#0F172A;

  border-radius:24px;

  padding:25px;

  color:white;

  text-align:center;

}

.wifi-confirm-price{

  font-size:36px;

  font-weight:800;

  color:#00D492;

  margin:15px 0;

}

.wifi-confirm-features{

  text-align:left;

  margin:20px 0;

}

.wifi-confirm-features p{

  margin:10px 0;

}

.wifi-confirm-actions{

  display:flex;

  gap:12px;

}

.wifi-cancel-btn{

  flex:1;

  height:48px;

  border:none;

  border-radius:12px;

  background:#334155;

  color:white;

}

.wifi-confirm-btn{

  flex:1;

  height:48px;

  border:none;

  border-radius:12px;

  background:#00D492;

  color:white;

  font-weight:700;

}






.back-arrow{

  position:fixed;

  top:20px;
  left:20px;

  width:35px;
  height:35px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #ffffff
    );

  color:#000000;

  border-radius:50%;

  font-size:16px;

  font-weight:400;

  cursor:pointer;

  z-index:1000;

  box-shadow:
    0 4px 15px
    rgba(0, 0, 0, 0.35);

}





/* =========================
   PAGE HEADER
========================= */

.page-header{

  position:fixed;

  top:0;
  left:0;
  right:0;

  height:65px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;

  box-sizing:border-box;

  background:
  rgba(7,17,31,.92);

  backdrop-filter:
  blur(12px);

  border-bottom:
  1px solid
  rgba(255,255,255,.06);

  z-index:9999;

}


/* BACK BUTTON */

.header-back{

  margin-top: 20px;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
  rgba(255,255,255,.08);

  color:#fff;

  font-size:18px;

  cursor:pointer;

}


/* TITLE */

.header-title{

  flex:1;
  margin-top: 20px;

  text-align:center;

  font-size:18px;

  font-weight:700;

  color:#fff;

}


/* RIGHT ACTION */

.header-action{

  width:38px;
  height:38px;

}







/* =========================
   BENEFICIARY PHONE INPUT
========================= */

.beneficiary-phone{

  width:100%;

  height:35px;

  border:none;

  outline:none;

  border-radius:18px;

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.08);

  color:#fff;

  padding:0 16px;

  box-sizing:border-box;

  font-size:11px;

  margin-bottom:10px;

  transition:.25s;

}

.beneficiary-phone::placeholder{

  color:
  rgba(255,255,255,.45);

}

.beneficiary-phone:focus{

  border-color:
  #00D492;

  box-shadow:
  0 0 0 3px
  rgba(0,212,146,.15);

}


/* =========================
   RECIPIENT NAME
========================= */

.recipient-name{

  min-height:22px;

  margin-bottom:12px;

  font-size:14px;

  font-weight:600;

  transition:.2s;

}

.recipient-name.success{

  color:#00D492;

}

.recipient-name.error{

  color:#ff5c5c;

}