/* =========================
   INTERNET PAGE
========================= */

.airtime-page{

  padding:110px 16px 120px;

  min-height:100vh;

  background:
  linear-gradient(
    180deg,
    #07111F 0%,
    #0B1730 100%
  );
}



/* =========================
   ACTIVE VOUCHER CARD
========================= */

.subscription-card{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    rgba(20,37,71,.95),
    rgba(11,23,48,.95)
  );

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

  border-radius:24px;

  padding:22px;

  margin-bottom:20px;

  backdrop-filter:blur(20px);

  box-shadow:
  0 20px 40px
  rgba(0,0,0,.25);
}

.subscription-card::before{

  content:"";

  position:absolute;

  top:-80px;
  right:-80px;

  width:180px;
  height:180px;

  border-radius:50%;

  background:
  rgba(200,155,60,.08);
}



/* TITLE */

.subscription-title{

  font-size:13px;

  letter-spacing:.8px;

  text-transform:uppercase;

  color:#8FA0B8;

  margin-bottom:15px;
}



/* PACKAGE */

.current-plan-name{

  font-size:28px;

  font-weight:800;

  color:#fff;

  margin-bottom:14px;
}



/* INFO ROWS */

.current-plan-speed,
.current-plan-expiry,
.current-plan-devices{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:10px 0;

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

  color:#C7D3E3;

  font-size:14px;
}

.current-plan-devices:last-child{

  border-bottom:none;
}



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

.wallet-btn{

  width:100%;

  height:52px;

  margin-top:18px;

  border:none;

  border-radius:16px;

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

  color:#07111F;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  transition:.3s;
}

.wallet-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 10px 20px
  rgba(200,155,60,.25);
}



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

.history-card{

  background:
  rgba(16,27,45,.95);

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

  border-radius:24px;

  padding:20px;

  margin-bottom:15px;
}

.history-title{

  color:white;

  font-size:16px;

  font-weight:700;

  margin-bottom:15px;
}



/* =========================
   HISTORY ITEM
========================= */

.history-item{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:15px 0;

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

.history-item:last-child{

  border-bottom:none;
}

.history-plan{

  color:#fff;

  font-size:15px;

  font-weight:700;
}

.history-voucher{

  color:#8FA0B8;

  font-size:12px;

  margin-top:4px;
}



/* =========================
   STATUS BADGES
========================= */

.history-status{

  padding:8px 14px;

  border-radius:999px;

  font-size:11px;

  font-weight:700;

  text-transform:uppercase;
}

.history-status.active{

  background:
  rgba(0,208,132,.15);

  color:#00D084;
}

.history-status.expired{

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

  color:#FF6B6B;
}



/* =========================
   MOBILE EFFECTS
========================= */

.subscription-card,
.history-card{

  transition:.3s;
}

.subscription-card:hover,
.history-card:hover{

  transform:
  translateY(-2px);
}







.internet-stats-grid{

  display:grid;

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

  gap:12px;

  margin-top:20px;
}



.stat-card{

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

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

  border-radius:16px;

  padding:14px;

  backdrop-filter:
  blur(10px);
}



.stat-label{

  font-size:12px;

  color:#8FA0B8;

  margin-bottom:8px;

  text-transform:uppercase;

  letter-spacing:.5px;
}



.stat-value{

  color:#fff;

  font-size:16px;

  font-weight:700;

  word-break:break-word;
}




.online-status{

  color:#00D084;
}

.offline-status{

  color:#FF6B6B;
}