/* General Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Base body styles */
body {
  background: linear-gradient(135deg, #ffffff, #e6f0ff); /* White-to-light-blue gradient */
  color: #000000; /* deep blue text */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 20px;
  font-family: 'Poppins', sans-serif;
  transition: background 0.3s, color 0.3s;
}


/* ================= CONTAINER ================= */
.container {
  width: 100%;
  max-width: 400px;

  background: linear-gradient(135deg, #0a1a40, #1b3a7b); /* deep blue gradient */
  padding: 20px;
  border-radius: 14px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),   /* subtle black shadow */
    0 0 12px rgba(255, 255, 255, 0.1); /* faint white glow */

  display: none;
  margin-top: 50px;

  color: #0b1a3a; /* dark blue text */
  border: 1.5px solid #ffffff; /* white border */
}

/* ================= SIGNUP FORM BACKGROUND ================= */
#signupContainer {
  background: 
    linear-gradient(
      rgba(10, 26, 64, 0.85),
      rgba(27, 58, 123, 0.85)
    ),
    url("photo.jpg") center/cover no-repeat;  /* background image */

  border-radius: 14px;
  padding: 30px 20px;
  position: relative;

  color: #0b1a3a; /* dark blue text inside form */
}

/* ================= LIGHT OVERLAY (SO TEXT IS CLEAR) ================= */
#signupContainer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),   /* soft white overlay */
    rgba(0, 0, 0, 0.15)          /* subtle black overlay */
  );
  border-radius: 14px;
  z-index: 0;
}

/* Keep content above overlay */
#signupContainer > * {
  position: relative;
  z-index: 1;
}

/* ================= LOGIN FORM BACKGROUND ================= */
#loginContainer {
  background:
    linear-gradient(
      rgba(10, 26, 64, 0.85),
      rgba(18, 58, 122, 0.85)
    ),
    url("photo.jpg") center/cover no-repeat;

  border-radius: 12px;
  padding: 30px 20px;
  position: relative;
}

/* ================= SOFT OVERLAY FOR READABILITY ================= */
#loginContainer::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(0, 0, 0, 0.25)
  );

  border-radius: 12px;
  z-index: 0;
}

/* Keep content above overlay */
#loginContainer > * {
  position: relative;
  z-index: 1;
}

/* ================= CONTAINER VISIBILITY ================= */
.container.active {
  display: block;
}

/* ================= MAIN CONTAINER ================= */
.container {
  width: 100%;
  max-width: 400px;

  background: linear-gradient(135deg, #0a1f44, #123a7a); /* deep Sony blue */
  padding: 20px;
  border-radius: 12px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); /* clean black shadow */
  display: none;
  margin-top: 50px;

  color: #0b1a3a; /* dark blue text */
  border: 1.5px solid #ffffff; /* white border */
}

/* ================= LOGO ================= */
.logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.logo img {
  max-width: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffffff; /* white ring */
  background: #ffffff;
}

/* ================= FORM ================= */
form {
  display: flex;
  flex-direction: column;
}

/* ================= LABELS ================= */
label {
  margin: 10px 0 5px;
  font-weight: bold;
  color: #0b1a3a; /* dark blue */
}

/* ================= INPUTS ================= */
input {
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid #1e3a8a; /* Sony blue */
  outline: none;
  font-size: 16px;

  background-color: #ffffff;
  color: #0b1a3a; /* dark blue text */
}

input::placeholder {
  color: #6b7280; /* soft gray */
}

input:focus {
  border-color: #2563eb; /* bright Sony blue */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}


/* ================= BUTTON ================= */
button {
  margin-top: 20px;
  padding: 12px;

  background: linear-gradient(135deg, #0a1f44, #2563eb); /* deep blue → Sony blue */
  color: #ffffff;

  border: none;
  border-radius: 8px;

  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}

button:hover {
  background: linear-gradient(135deg, #2563eb, #0a1f44);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ================= TOGGLE TEXT ================= */
.toggle-text {
  text-align: center;
  margin-top: 10px;
  color: #0b1a3a; /* dark blue */
}

/* ================= WELCOME TEXT ================= */
.welcome-text {
  text-align: center;
  margin-bottom: 20px;
  color: #0b1a3a; /* dark blue */
}

.welcome-text h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #0a1f44; /* deep blue heading */
}

.welcome-text p {
  font-size: 14px;
  color: #374151; /* soft dark gray (Sony-like) */
}


.dashboard {
  width: 100%;
  max-width: 400px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;                /* removed top margin */
  box-sizing: border-box;
}

.dashboard-header {
  position: fixed;          /* makes it stay in place */
  top: 0;                   /* stick to top */
  left: 50%;                /* center horizontally */
  transform: translateX(-50%);
  color: #ededed;
  font-weight: bold;
  line-height: 1.3;
  font-size: 18px;
  margin: 0;
  padding: 12px 20px;
  z-index: 10000;           /* always on top */
  background: #000000;      /* optional: solid bg so text is visible */
  width: 100%;
  max-width: 600px;
  text-align: center;
}

/* Remove extra spacing */
.dashboard-card h2.dashboard-header {
  margin: 0;
}


.image-slider {
  width: 100%;
  max-width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin: 10px auto;        /* reduced vertical spacing */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.slider-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-image.active {
  opacity: 1;
}

/* Quick Actions Section */
.quick-actions {
  width: 100%;
  margin: 10px 0;
}

/* Header */
.qa-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: bold;
  color: #070707;
  margin: 5px 0;
}


/* Buttons container */
.qa-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  gap: 12px;
  box-sizing: border-box;
}


/* Quick Actions Box */
.quick-actions {
  background: #1E3A8A;           /* solid purple */
  border-radius: 16px;
  padding: 15px 10px;
  box-shadow: 0 6px 18px rgba(30, 58, 138, 0.4);
}


/* Buttons */
.qa-btn {
  flex: 1;                        
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  border-radius: 12px;
  font-weight: bold;
  font-size: 16px;
  color: #1E3A8A;                 /* text color dark blue */
  background: #ffffff;             /* button background white */
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

/* Icons inside buttons */
.qa-btn i {
  font-size: 22px;
  margin-bottom: 6px;
  width: 50px;
  height: 50px;
  border-radius: 50%;              /* round icon background */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;                  /* icon itself in white */
}

/* Individual icon background colors */
.qa-btn.recharge i {
  background-color: #38BDF8;       /* sky blue */
}

.qa-btn.customer-service i {
  background-color: #4ADE80;       /* sky green */
}

.qa-btn.withdraw i {
  background-color: #F87171;       /* sky red */
}

.qa-btn.invite-friends i {
  background-color: #FBBF24;  /* golden yellow */
  color: #ffffff;             /* icon in white */
}

/* Hover effect */
.qa-btn:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* Mobile responsive */
@media (max-width: 450px) {
  .qa-btn {
    padding: 10px 0;
    font-size: 14px;
  }

  .qa-btn i {
    font-size: 18px;
    width: 40px;
    height: 40px;
  }
}


.welcome-card {
  background-color: #1E3A8A; /* SONY-style blue */
  color: white;
  border-radius: 12px;       
  padding: 30px;             
  margin: 0;                 /* remove side margins */
  width: 100%;               /* full width of container/screen */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.welcome-content {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: flex-start;  /* all left aligned */
}

.welcome-text {
  font-size: 16px;           
  font-weight: 300;          
  margin: 0;                 
}

.user-number {
  font-size: 20px;           
  font-weight: 700;          
  margin: 4px 0 0 0;         /* small space below header */
  letter-spacing: 1px;
}



.dashboard-logo {
  width: 100%;                     
  margin: 16px 0;                  
  border-radius: 12px;             
  overflow: hidden;                
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
}

.dashboard-logo img {
  width: 100%;                     
  height: auto;                   /* allows full height based on image ratio */
  object-fit: contain;             /* shows full image without cropping */
  display: block;                  
}


.icon-circle {
  background-color: #1E40AF;      /* dark blue circle */
  width: 60px;
  height: 60px;
  border-radius: 50%;             /* perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;            /* space between circle and text */
}

.icon-circle i {
  color: #ffffff;                 /* human icon in white */
  font-size: 28px;
}

.card-title {
  font-size: 16px;
  color: #1E40AF;
  font-weight: 600;
  margin-bottom: 4px;
}

.card-subtitle {
  font-size: 14px;
  color: #1E40AF;
  font-weight: 400;
}


/* ================= BALANCE BAR ================= */
.balance-bar {
  width: 100%;
  height: 150px;
  background: linear-gradient(135deg, #0b3c91, #1e40af); /* blue card */
  border-radius: 18px;
  padding: 0 36px;

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

  box-shadow: 0 10px 25px rgba(11, 60, 145, 0.35);
}

/* ================= TEXT SIDE ================= */
.balance-text {
  display: flex;
  flex-direction: column;
}

/* Title */
.balance-title {
  font-size: 18px;
  font-weight: 700;
  color: #e5edff; /* soft white-blue */
}

/* Amount */
.balance-amount {
  font-size: 36px;
  font-weight: bold;
  color: #ffffff; /* pure white amount */
  margin-top: 6px;
}

/* ================= ICON ================= */
.balance-icon {
  font-size: 42px;
  color: #dbeafe; /* light blue icon */
}

/* ================= MOBILE ================= */
@media (max-width: 450px) {
  .balance-bar {
    height: 130px;
    padding: 0 28px;
  }

  .balance-title {
    font-size: 16px;
  }

  .balance-amount {
    font-size: 28px;
  }

  .balance-icon {
    font-size: 36px;
  }
}



.offer-icon {
  cursor: pointer;
  font-size: 20px;
  color: #FFD700; /* gold */
}


.code-popup {
  display: none;          /* start hidden */
  position: absolute;
  top: 60%;               /* adjust vertical position */
  right: 20px;            /* near the icon */
  width: 180px;           /* fixed width */
  height: 100px;          /* fixed height */
  background: #111;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  z-index: 10;
  padding: 10px;

  display: flex;          /* flex layout */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}


.code-popup input {
  width: 90%;
  padding: 5px;
  border-radius: 4px;
  border: none;
  outline: none;
  font-size: 14px;
}

.code-popup button {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  background: #007bff;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.close-popup {
  position: absolute;
  top: 5px;
  right: 7px;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
}


/* ================= PHONE INPUT ================= */
.phone-input {
  display: flex;
  align-items: center;
}

/* ================= COUNTRY CODE ================= */
.phone-input .country-code {
  background: linear-gradient(135deg, #0a1f44, #2563eb); /* deep blue → Sony blue */
  padding: 10px;

  border: 1px solid #1e3a8a;
  border-right: none;
  border-radius: 8px 0 0 8px;

  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

/* ================= PHONE NUMBER INPUT ================= */
.phone-input input {
  flex: 1;
  padding: 10px;

  border: 1px solid #1e3a8a;
  border-radius: 0 8px 8px 0;
  outline: none;

  font-weight: bold;
  color: #0b1a3a; /* dark blue text */
  background: #ffffff;
}

/* ================= FOCUS STATE ================= */
.phone-input input:focus {
  border-color: #2563eb; /* Sony blue focus */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}


.bottom-nav {
  position: fixed; /* fixed at bottom */
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  box-shadow: 0 -2px 12px rgba(30, 58, 138, 0.25); /* subtle blue shadow */
  z-index: 1000; /* stays on top */
}

/* Individual nav items */
.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #1E3A8A; /* blue text */
  font-size: 12px;
  transition: color 0.2s ease;
}

.bottom-nav .nav-item img {
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
  filter: drop-shadow(0 0 2px #6B21A8); /* subtle purple glow on icons */
}

.bottom-nav .nav-item:hover {
  color: #000000; /* gold text on hover */
}

/* ===== PROFILE FIXED HEADER ===== */
.profile-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  background: linear-gradient(135deg, #0b3c91, #1e40af); /* blue only */
  padding: 10px 0;

  text-align: center;
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;

  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.profile-header-bar i {
  margin-right: 8px;
  color: #ffffff;
}

/* Push content down so it doesn’t go under header */
.profile-content {
  padding-top: 60px;
}

/* ================= PROFILE PAGE ================= */
.profile-page {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: none;

  padding: 0 10px 80px 10px;
  height: calc(100vh - 0px);
  overflow-y: auto;
  box-sizing: border-box;
}

/* ================= PROFILE IMAGE ================= */
.profile-header img {
  width: 150px;
  height: 150px;

  object-fit: cover;
  border-radius: 50%;
  display: block;

  margin: 0 auto 40px auto;
  border: 4px solid #1e40af; /* blue border */
}

/* ================= TITLE ================= */
.profile-title {
  margin: 15px 0;
  font-size: 18px;
  font-weight: bold;

  color: #0b3c91; /* deep blue */
  text-align: center;
}

/* ================= SETTINGS LIST ================= */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

/* ================= SETTINGS ITEM ================= */
.settings-item,
.logout-btn {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  max-width: 400px;
  padding: 14px 20px;

  border-radius: 12px;
  font-weight: bold;

  color: #0b3c91;        /* blue text */
  background: #ffffff;  /* white card */

  cursor: pointer;

  box-shadow: 0 2px 8px rgba(11, 60, 145, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}

/* Hover effect (blue only) */
.settings-item:hover,
.logout-btn:hover {
  background: #0b3c91;
  color: #ffffff;
  transform: translateX(4px);
}

/* ================= ICONS ================= */
.settings-item i,
.logout-btn i {
  font-size: 20px;
  color: #1e40af; /* blue icon */
  transition: color 0.2s;
}

/* Hover icon color */
.settings-item:hover i,
.logout-btn:hover i {
  color: #ffffff;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 450px) {
  .settings-item,
  .logout-btn {
    padding: 12px 15px;
    font-size: 14px;
  }

  .settings-item i,
  .logout-btn i {
    font-size: 18px;
  }
}

/* CSS: hide by default */
#bottomNav {
  display: none;
}


/* BANK PAGE */
.bank-page {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 10px;
  display: none;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(30,58,138,0.3),
              0 -2px 12px rgba(30,58,138,0.15);
  color: #000000;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 70px; /* space for fixed header */
}


/* Header */
.bank-header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  z-index: 100;
  background: #1E3A8A; /* solid blue header */
  padding: 4px 10px;   /* further reduced vertical padding */
  box-shadow: 0 2px 4px rgba(30,58,138,0.2);
  height: 40px;        /* set explicit thin height */
}

/* Title */
.bank-header h2 {
  font-size: 16px;     
  line-height: 1.2;    /* tighter line height to fit */
  color: #000000;      
  flex-grow: 1;
  text-align: center;
  margin: 0;
}



/* Back Button */
.back-btn {
  background: #000000; /* blue button */
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 18px;
  color: #000000; /* black text */
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(30,58,138,0.3),
              -2px -2px 6px rgba(30,58,138,0.15);
  transition: transform 0.2s, background 0.3s;
}

.back-btn:hover {
  transform: translateY(-2px);
  background: #14306b; /* darker blue hover */
}

/* Form Section */
.bank-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff; /* blue form background */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(30,58,138,0.2);
  color: #000000;
}

/* Form Section Headers */
.form-section h3 {
  color: #1E3A8A; /* blue */
  font-weight: bold;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #000000; /* black */
}

/* Inputs & Selects */
select, input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #1E3A8A; /* blue border */
  margin-bottom: 10px;
  font-size: 15px;
  background: #ffffff;
  color: #000000;
  box-shadow: inset 2px 2px 5px rgba(30,58,138,0.2);
}

/* Update Button */
.update-bank-btn {
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  background: #1E3A8A; /* solid blue button */
  color: #000000; /* black text */
  border: none;
  border-radius: 12px;
  box-shadow: 5px 5px 15px rgba(30,58,138,0.4),
              -5px -5px 15px rgba(30,58,138,0.2);
  cursor: pointer;
  transition: transform 0.2s, background 0.3s;
}

.update-bank-btn:hover {
  transform: translateY(-3px);
  background: #14306b; /* darker blue hover */
}

/* Instructions Container */
.instructions {
  background: #ffffff; /* blue container */
  padding: 20px;
  border-radius: 12px;
  box-shadow: inset 2px 2px 5px rgba(30,58,138,0.2);
  color: #000000;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.instructions h3 {
  margin-top: 0;
  color: #000000; /* blue */
  font-weight: bold;
  font-size: 18px;
}

.instructions ol {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.instructions ol li {
  background: #ffffff; /* blue list items */
  padding: 10px 15px;
  border-radius: 8px;
  border-left: 4px solid #14306b; /* darker blue highlight */
  line-height: 1.4;
  font-size: 15px;
  color: #000000; /* black text */
}

/* Success Message */
.success-message {
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin-top: 15px;
  font-size: 16px;
}

/* Mobile Responsive */
@media (max-width: 450px) {
  .bank-header h2 {
    font-size: 18px;
  }

  select, input {
    padding: 10px;
    font-size: 14px;
  }

  .update-bank-btn {
    padding: 12px;
    font-size: 15px;
  }

  .instructions {
    padding: 15px;
    gap: 12px;
  }

  .instructions ol li {
    padding: 8px 12px;
    font-size: 14px;
  }
}



/* Chip */
.card-chip {
  width: 40px;
  height: 30px;
  background: #ff0000; /* red chip */
  border-radius: 4px;
  margin-bottom: 20px;
}


.card-chip {
  width: 50px;
  height: 50px; /* make it square for perfect circle */
  background: #ffffff;
  border-radius: 50%; /* make it circular */
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2), -5px -5px 15px rgba(255,255,255,0.7);
  transition: all 0.3s ease;
  overflow: hidden; /* ensures image inside doesn't overflow */
}

.card-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* make profile image fit nicely */
  border-radius: 50%; /* ensure image is circular */
}

.daily-label {
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
  font-weight: bold;
  color: #FFA500; /* keep daily label blue */
}


/* ================= FIXED RECHARGE HEADER ================= */
.recharge-header-fixed {
  position: fixed;        
  top: 0;
  left: 50%;              
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;       
  background: #0b3c91;    /* solid blue header */
  z-index: 10000;         
  text-align: center;
  padding: 15px 20px;
  border-bottom: 2px solid #1e40af; /* darker blue underline */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Header icon style */
.recharge-header-fixed .header-icon {
  font-size: 24px;       
  color: #ffffff;        /* white icon */
}

/* Header text */
.recharge-header-fixed h2 {
  margin: 0;
  color: #ffffff;        /* white text */
  font-size: 20px;
  font-weight: bold;
}

/* Add top padding to page content so it doesn't go under fixed header */
.recharge-page .recharge-logo {
  margin-top: 90px; 
}

/* ================= RECHARGE PAGE ================= */
.recharge-page {
  width: 100%;
  max-width: 400px;
  margin: 40px auto;
  padding: 15px;
  text-align: center;
  display: none;
  color: #000000;       /* black text */
  background: #f3f6ff;  /* light blue page background */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(11,60,145,0.2);
}

/* Logo */
.recharge-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%; 
  margin-bottom: 20px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(11,60,145,0.25); /* subtle blue glow */
}

/* Header */
.recharge-header {
  font-size: 22px;
  color: #0b3c91;      /* deep blue header */
  margin-bottom: 5px;
  font-weight: bold;
}

/* Subheader */
.recharge-subheader {
  font-size: 16px;
  color: #000000;       /* black subheader */
  margin-bottom: 20px;
}

/* Amount Options Grid */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* Amount Button Style */
.amount-option {
  background: #0b3c91;  /* blue card */
  padding: 12px 0;
  border-radius: 12px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  border: 2px solid #1e40af; /* darker blue border */
  transition: all 0.2s;
}

.amount-option:hover {
  transform: translateY(-3px);
  background: #1e40af;  /* darker blue on hover */
}

/* Selected Amount */
.amount-option.active {
  background: #1e40af;
  color: #ffffff;
  transform: translateY(-3px);
}

/* Mobile Responsive */
@media (max-width: 450px) {
  .amount-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* Custom Amount Input */
.custom-amount input {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid #0b3c91; /* blue border */
  background: #ffffff;         /* white input */
  color: #000000;              /* black text */
}

/* Deposit Button */
.deposit-btn {
  width: 100%;
  padding: 15px;
  background: #0b3c91;       /* blue button */
  color: #ffffff;             /* white text */
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 17px;
  transition: all 0.2s;
}

.deposit-btn:hover {
  transform: translateY(-3px);
  background: #1e40af;        /* darker blue on hover */
  color: #ffffff;
}


/* ================= RECHARGE CONFIRMATION PAGE ================= */
.recharge-confirmation-page {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 20px 15px;
  display: none;
  overflow-y: auto;
  text-align: center;
  background: #f3f6ff;      /* light blue background */
  color: #000000;           /* black text */
  box-sizing: border-box;
}

/* Account Details Card */
.account-details {
  background: #0b3c91;      /* solid blue card */
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  color: #ffffff;            /* white text */
  box-shadow: 0 4px 12px rgba(11,60,145,0.2); /* subtle blue shadow */
}

/* Detail Rows */
.detail-row {
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 12px 0;
  border-bottom: 1px solid #1e40af;  /* darker blue separator */
  position: relative;
}

.detail-row:last-child {
  border-bottom: none;
}

/* Copy Button */
.copy-btn {
  background: #0b3c91;   /* blue button */
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #ffffff;
  font-weight: bold;
  transition: 0.2s;
  
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.copy-btn:hover {
  background: #1e40af;   /* darker blue hover */
}

/* Confirm Payment Button */
.confirm-payment-btn {
  width: 100%;
  padding: 15px;
  background: #0b3c91;     /* blue button */
  color: #ffffff;           /* white text */
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 17px;
  box-shadow: 5px 5px 15px rgba(11,60,145,0.3);
  transition: all 0.2s;
}

.confirm-payment-btn:hover {
  transform: translateY(-3px);
  background: #1e40af;     /* darker blue hover */
}

/* Mobile Responsive */
@media (max-width: 450px) {
  .recharge-confirmation-page {
    padding: 15px 10px;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}


/* ================= WAITING PAGE ================= */
.waiting-page {
  display: flex;
  flex-direction: column;    /* stack items vertically */
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f3f6ff;       /* light blue background */
  text-align: center;
  color: #000000;            /* default black text */
}

.countdown {
  font-size: 28px;
  font-weight: bold;
  color: #0b3c91;            /* deep blue countdown text */
  margin-top: 15px;
}

.status-icon {
  font-size: 70px;
  margin-bottom: 15px;
  color: #0b3c91;            /* deep blue icon */
}

.refresh-warning {
  margin-top: 15px;
  font-size: 13px;
  color: #1e40af;            /* dark blue */
  font-weight: bold;
}

/* ================= RECHARGE BACK BUTTON ================= */
.recharge-back-btn {
  position: absolute;
  top: 4px;
  left: 16px;
  z-index: 10001;
  background: #0b3c91;       /* blue */
  color: #ffffff;            /* white text */
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}

.recharge-back-btn:hover {
  transform: translateY(-2px);
  background: #1e40af;       /* darker blue hover */
}

/* ================= LOGO STYLING FOR RECHARGE & WITHDRAW ================= */
.recharge-logo img,
.withdraw-logo img,
.confirmation-logo img {
  width: 80px;               /* size */
  height: 80px;              /* size */
  border-radius: 50%;        /* round */
  margin-bottom: 20px;       /* spacing below */
  object-fit: cover;         /* maintain aspect ratio */
  display: block;
  margin-left: auto;
  margin-right: auto;        /* center horizontally */
  border: 2px solid #0b3c91; /* blue border */
  box-shadow: 0 4px 12px rgba(11,60,145,0.25); /* subtle blue glow */
  background: #ffffff;       /* white background behind logo */
}


/* ================= FULLSCREEN OVERLAY ================= */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 20, 50, 0.45); /* dark blue overlay */
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

/* ================= POPUP BOX ================= */
.popup-box {
  width: 100%;
  max-width: 420px;
  min-height: 500px;
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  animation: popIn 0.3s ease;
  color: #000000;

  box-shadow:
    0 0 30px rgba(0, 0, 0, 0.25),
    0 0 25px rgba(0, 64, 175, 0.25);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}

/* Mobile */
@media (max-width: 450px) {
  .popup-box {
    padding: 25px 20px;
    border-radius: 16px;
    min-height: 450px;
  }
}

/* ================= INFO BOX ================= */
.popup-info-box {
  background: linear-gradient(
    145deg,
    #1e3a8a,  /* deep blue */
    #2563eb,  /* lighter blue */
    #3b82f6   /* sky blue */
  );
  color: #ffffff;
  border-radius: 20px;
  padding: 20px 25px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    0 0 25px rgba(59,130,246,0.35);

  position: relative;
}

/* Header inside info box */
.popup-info-box .popup-header {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.5);
  padding-bottom: 6px;
}

/* Text cards */
.popup-info-box .popup-card {
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

/* ================= LOGO ================= */
.popup-logo img {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #1e3a8a; /* deep blue ring */
}

/* Welcome text */
.popup-welcome-text {
  font-size: 14px;
  color: #0b3c91; /* dark blue */
  text-align: center;
  margin: 12px 0 20px;
  line-height: 1.5;
}

/* ================= TELEGRAM BUTTON ================= */
.telegram-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(
    135deg,
    #1e40af, /* deep blue */
    #3b82f6  /* sky blue */
  );

  color: #ffffff;
  padding: 15px 25px;
  border-radius: 14px;
  margin: 10px auto;
  text-decoration: none;

  font-weight: bold;
  font-size: 16px;
  width: 260px;
  height: 60px;

  box-shadow:
    0 6px 20px rgba(30,64,175,0.5),
    0 0 15px rgba(59,130,246,0.4);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icon spacing */
.telegram-btn .tg-icon {
  margin-right: 12px;
  width: 30px;
  height: 30px;
}

/* Hover */
.telegram-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 25px rgba(30,64,175,0.6),
    0 0 20px rgba(59,130,246,0.6);
}

/* ================= CLOSE BUTTON ================= */
.popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  cursor: pointer;
  color: #0b3c91; /* dark blue */
  font-weight: bold;
}

/* ================= ANIMATION ================= */
@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}



/* ===== PRODUCT PAGE ===== */
.product-page {
  width: 100%;
  padding: 20px;
  display: none;
  padding-bottom: 80px;

  background: linear-gradient(180deg, #f8faff, #eef2ff);
  min-height: 100vh;
  color: #000000;
}

/* ===== FIXED HEADER ===== */
.product-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  background: linear-gradient(90deg, #0b3c91, #1e40af);
  padding: 12px 0;

  z-index: 1000;
  text-align: center;

  font-size: 22px;
  font-weight: bold;
  color: #ffffff;

  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.product-header i {
  margin-right: 8px;
  color: #ffffff;
}

/* Ensure content below the header */
.product-page {
  padding-top: 65px;
}

/* ================= PRODUCT GRID ================= */
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

/* FORCE SINGLE COLUMN ON SMALL MOBILE */
@media (max-width: 600px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}

/* ================= PRODUCT CARD ================= */
.product-card {
  background: linear-gradient(135deg, #0b3c91, #1e40af);
  border-radius: 20px;
  padding: 20px;

  box-shadow:
    4px 4px 16px rgba(0,0,0,0.35),
   -4px -4px 16px rgba(255,255,255,0.05);

  text-align: center;
  color: #ffffff;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* hover removed */
}

/* ================= PRODUCT LOGO ================= */
.product-logo {
  width: 60px;
  height: 60px;

  background: linear-gradient(135deg, #1e40af, #0b3c91);
  border-radius: 14px;

  margin-bottom: 15px;

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

  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

.product-logo img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

/* ================= TEXT ================= */
.product-card h3 {
  margin: 10px 0;
  color: #ffffff;
}

.product-card p {
  margin: 5px 0;
  font-size: 14px;
  color: #e5e7eb;
}

/* ================= INVEST BUTTON ================= */
.invest-btn {
  width: 100%;
  margin-top: 15px;
  padding: 12px;

  background: #ffffff;
  color: #000000;

  border: none;
  border-radius: 14px;

  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  /* hover removed */
}

/* ================= EXTRA SMALL MOBILE ================= */
@media (max-width: 450px) {
  .product-card {
    padding: 15px;
    border-radius: 16px;
  }

  .product-logo {
    width: 50px;
    height: 50px;
    font-size: 12px;
  }

  .invest-btn {
    padding: 10px;
    font-size: 15px;
  }
}



/* Fixed My Team header */
.team-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 950px;
  background: #1e3fdc;
  z-index: 9999;
  text-align: center;
  padding: 12px 20px;
  border-bottom: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.team-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

/* === INVITE & TEAM PAGES === */
.invite-page, .team-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  min-height: 100vh;
  background: #0f1c4d; /* dark blue background */
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* === Header === */
.invite-header {
  text-align: center;
  margin-bottom: 25px;
}

.invite-logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(30,63,220,0.5), 0 0 15px rgba(59,130,246,0.5), 0 0 10px rgba(59,130,246,0.5); /* blue glow */
  transition: transform 0.3s;
}

.invite-logo:hover {
  transform: scale(1.05);
}

/* === Container === */
.invite-container {
  width: 100%;
  max-width: 950px;
   background: #000000;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(30,63,220,0.2), 0 -5px 20px rgba(59,130,246,0.2), 0 0 15px rgba(59,130,246,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* === Referral Box === */
.ref-box {
  display: flex;
  width: 100%;
  gap: 12px;
  margin-bottom: 25px;
  padding: 14px;
  background: #16236c; /* dark blue box */
  border-radius: 16px;
  box-shadow: inset 2px 2px 6px rgba(30,63,220,0.2), inset -2px -2px 6px rgba(59,130,246,0.1);
}

.ref-box input {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff; /* white input */
  color: #000000;      /* black text */
  font-weight: 500;
  border: 1px solid #000000; /* blue border */
  outline: none;
}

.ref-box button {
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: bold;
  border: none;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s, background 0.3s;
}

.ref-box button:hover {
  transform: translateY(-2px) scale(1.03);
  background: #1e3fdc;
}

/* === Referral Levels Grid === */
.ref-levels {
  display: grid;
  width: 100%;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 5px;
}

.ref-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  font-weight: 600;
  color: #000000;
  box-shadow: 4px 4px 15px rgba(30,63,220,0.3), -4px -4px 10px rgba(59,130,246,0.2);
  transition: transform 0.2s, box-shadow 0.3s;
}

.ref-card:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 6px 6px 20px rgba(30,63,220,0.4), -5px -5px 15px rgba(59,130,246,0.25);
}

/* === Team Button === */
.team-btn {
  margin-top: 20px;
  padding: 16px 0;
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  border: none;
  font-weight: bold;
   background: #1e3fdc;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s, background 0.3s;
}

.team-btn:hover {
  transform: translateY(-2px) scale(1.03);
   background: #1e3fdc;
}

/* === Back Button === */
.back-btn {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: #1e3fdc; /* blue text */
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.2s, color 0.3s;
}

.back-btn:hover {
  color: #2563eb; /* lighter blue hover */
  transform: translateX(-2px);
}

/* === Team List Container === */
#teamList {
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
 background: #1e3fdc;
  color: #000000; /* black text */
  border-radius: 16px;
  box-shadow: inset 2px 2px 6px rgba(30,63,220,0.2), inset -2px -2px 6px rgba(59,130,246,0.1);
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
  .ref-levels {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
  }
  .invite-container {
    padding: 20px;
  }
  .ref-box input {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .invite-logo {
    width: 70px;
    height: 70px;
  }
  .team-btn {
    max-width: 100%;
  }
  .ref-levels {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}




/* Invite Page Back Button - stuck left under fixed header */
.invite-back-btn {
  position: absolute;          /* position relative to invite-page */
  top: 60px;                   /* space below fixed header (adjust as needed) */
  left: 0;                     /* stick to left edge */
  margin: 0;                   /* remove default margins */
  background: #1E3A8A;         
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;  /* rounded only on right side */
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;              /* above everything */
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}

.invite-back-btn:hover {
  transform: translateY(-2px);
  background: #2563eb;
}


/* WITHDRAW PAGE STYLES */
.withdraw-page {
  width: 100%;
  height: 100vh;
  padding: 15px;
  background: #ffffff; /* page background white */
  color: #000000;      /* default text black */
  overflow-y: auto;
  display: none;
}

/* HEADER */
.withdraw-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.withdraw-back-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #1E3A8A;       /* updated blue back button */
}

.withdraw-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1E3A8A;       /* updated blue header text */
}

/* LOGO */
.withdraw-logo img {
  width: 90px;
  height: 90px;
  margin: 10px auto;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #1E3A8A; /* updated blue border */
}

/* BALANCE CARD */
.withdraw-card {
  background: #1E3A8A; /* updated blue card */
  color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin: 10px 0;
}

.withdraw-label {
  font-size: 14px;
  opacity: 0.9;
}

.withdraw-balance {
  font-size: 28px;
  font-weight: bold;
}

/* BANK CARD */
.bank-display-card {
  background: #1E3A8A; /* updated blue card */
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 10px rgba(30,58,138,0.2);
  border-left: 4px solid #14306b; /* darker blue accent */
  margin: 10px 0;
}

.bank-name {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff; /* white text */
}

.bank-account-number,
.bank-account-name {
  font-size: 16px;
  margin: 5px 0;
  font-weight: 600;
  color: #ffffff;
}

/* WITHDRAWAL FORM */
.withdraw-form {
  margin-top: 20px;
}

.withdraw-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #1E3A8A; /* updated blue border */
  border-radius: 10px;
  margin-top: 5px;
  font-size: 16px;
  background: #ffffff;        /* white input background */
  color: #000000;             /* black text */
}

.withdraw-submit-btn {
  width: 100%;
  background: #1E3A8A; /* updated blue button */
  color: #ffffff;
  padding: 14px;
  border: none;
  margin-top: 12px;
  font-size: 17px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.withdraw-submit-btn:hover {
  opacity: 0.9;
  background: #14306b; /* darker blue hover */
}

.withdraw-info {
  font-size: 13px;
  text-align: center;
  margin-top: 8px;
  color: #1E3A8A; /* updated blue text */
}

/* MOBILE RESPONSIVE */
@media screen and (max-width: 480px) {
  .withdraw-card {
    padding: 15px;
  }
  .withdraw-balance {
    font-size: 24px;
  }
}

.withdraw-instructions {
  background: #1E3A8A; /* updated blue box */
  color: #ffffff;
  border-left: 4px solid #14306b; /* darker blue accent */
  padding: 15px 20px;
  margin-top: 20px;
  margin-bottom: 80px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.withdraw-instructions h3 {
  color: #ffffff; /* heading white */
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.withdraw-instructions ol {
  padding-left: 20px;
  margin: 0;
}

.withdraw-instructions li {
  margin-bottom: 8px;
  line-height: 1.4;
  font-size: 0.95rem;
}

/* Fixed Withdraw Header */
.withdraw-header-fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  background: #1E3A8A; /* updated blue header */
  z-index: 10000;
  text-align: center;
  padding: 15px 20px;
  border-bottom: 2px solid #14306b; /* darker blue underline */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Header icon style */
.withdraw-header-fixed .header-icon {
  font-size: 24px;
  color: #ffffff;           /* white icon */
}

/* Header text */
.withdraw-header-fixed h2 {
  margin: 0;
  color: #ffffff;            /* white text */
  font-size: 20px;
  font-weight: bold;
}

/* Add top spacing so logo and content don't go under fixed header */
.withdraw-page .withdraw-logo {
  margin-top: 90px;
}

.withdraw-back-btn {
  position: absolute;      
  top: 30%;                
  left: 8px;       /* closer to left edge */
  transform: translateY(-50%); 
  z-index: 10001;          
  background: #1E3A8A;     /* updated blue same as cards */
  color: #ffffff;           /* white text */
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}

.withdraw-back-btn:hover {
  transform: translateY(-50%) translateY(-2px); 
  background: #14306b;     /* darker blue on hover */
}


/* RECORDS PAGE */
.records-page {
  padding: 0;                /* remove padding */
  font-family: Arial, sans-serif;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* Logo and Title */
.records-logo {
  text-align: center;
  margin: 20px 0; /* space above and below logo */
}

.records-logo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.records-logo h2 {
  margin-top: 10px;
  font-size: 22px;
  color: #1e3fdc; /* blue title, can switch to purple #9b30ff */
  font-weight: bold;
}

/* Individual Transaction Card */
.record-card {
  width: 100vw;              /* full viewport width */
  margin-bottom: 12px;       /* space below each card */
  padding: 12px 15px;
  background: #ffffff;       /* white background */
  border-left: 6px solid #1e3fdc; /* accent left border */
  border-radius: 0;          /* no border-radius */
  display: flex;
  flex-direction: column;    /* stack text vertically */
  align-items: flex-start;   /* left-align text */
  font-size: 0.95rem;
  color: #000000;
  box-shadow: none;          /* remove shadow for flush edges */
  box-sizing: border-box;
}

/* Card Content Text */
.record-transaction,
.record-amount,
.record-status,
.record-time {
  color: #000000;
  font-weight: bold;
  text-align: left;          /* always left-aligned */
  width: 100%;               /* take full width */
}

/* Status Colors */
.status-success { color: #1e3fdc; }
.status-pending { color: #a97b00; }
.status-failed  { color: #9b30ff; }

/* Mobile adjustments */
@media (max-width: 480px) {
  .record-card {
    padding: 10px 12px;
  }
}

/* Records Page Back Button */
.records-back-btn {
  position: absolute;      /* relative to parent container */
  top: 16px;               /* adjust vertical position */
  left: 16px;              /* stick to left */
  z-index: 10001;
  background: #1E3A8A;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}

.records-back-btn:hover {
  transform: translateY(-2px);
  background: #2563eb;
}


/* ================= FULL PAGE ================= */
#myInvestmentPage {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  background: #f7f9ff;
}

/* ================= FIXED HEADER ================= */
.investment-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #0a1f44, #3b1c6e);
  z-index: 1000;
  padding: 15px 0 25px 0; /* extra bottom padding for title under logo */
  text-align: center;
  border-bottom: 3px solid #d4af37;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Back Button */
.investment-back-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1001;
  background: #1E3A8A;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}

.investment-back-btn:hover {
  transform: translateY(-2px);
  background: #2563eb;
}

/* Header Logo */
#investmentLogo img {
  height: 60px;
  width: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #d4af37;
  display: block;
  margin-bottom: 8px;
}

/* Header Title */
.investment-header h2 {
  color: #fff;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

/* ================= RESET BODY MARGINS ================= */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ================= INVESTMENT CONTENT ================= */
.investment-content {
  flex: 1;
  margin-top: 140px;       /* space for header */
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  scroll-behavior: smooth;
  width: 100%;             /* full width */
  padding: 0;              /* remove padding to allow edge-to-edge */
}

/* ================= INVESTMENT CARD ================= */
.investment-card {
  background: linear-gradient(145deg, #ffffff, #eef2ff);
  color: #000;
  width: 100vw;                  /* full edge-to-edge */
  border-radius: 16px;           /* smooth curved edges */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* subtle modern shadow */
  transition: none;              /* no hover effect */
  margin-left: auto;             /* center properly on mobile */
  margin-right: auto;
}

/* Remove hover effect */
.investment-card:hover {
  transform: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* keep subtle shadow even on hover */
}




/* ================= LOGO & HEADER ================= */
.investment-card-logo {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.investment-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.investment-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;       /* center horizontally */
  text-align: center;        /* center text inside */
  padding: 12px 16px;
  gap: 4px;

  /* New box styling */
  background: linear-gradient(145deg, #000000, #000000); /* subtle gradient */
  border-radius: 12px;       /* rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* soft shadow */
}

.plan-name {
  font-size: 18px;
  font-weight: bold;
  color: #1d4ed8;
}

.plan-price {
  font-size: 14px;
  color: #ffffff;
}


/* ================= BODY ================= */
.investment-card-body {
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px 16px;
  gap: 12px;
}


/* Container for the four items */
.income-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 12px;                             /* space between items */
}

/* Individual item styling */
.income-grid .income-item {
  background: linear-gradient(145deg, #ffffff, #eef2ff);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Labels and values */
.income-grid .label {
  font-size: 12px;
  font-weight: 600;
  color: #6d28d9; /* purple */
}

.income-grid .value {
  font-size: 16px;
  font-weight: bold;
  color: #10b981; /* green */
}

/* Countdown styling (if used in one of the items) */
.income-grid .countdown {
  font-weight: bold;
  color: #6366f1; /* purple-blue */
  font-size: 14px;        /* slightly smaller */
  white-space: nowrap;    /* prevent line breaks */
  overflow: hidden;       /* hide overflow if any */
  text-overflow: ellipsis; /* optional: add ... if too long */
}


/* ================= RESPONSIVE ================= */
@media screen and (max-width: 420px) {
  .income-row, .earn-countdown-row {
    flex-direction: column;
    gap: 6px;
  }
}



/* ================= CUSTOM ALERT ================= */
.custom-alert {
  position: fixed;
  top: 20px;
  right: 20px;

  background: linear-gradient(135deg, #1e3cff, #6a5acd); /* blue → purple */
  color: #ffffff;

  padding: 15px 20px;
  border-radius: 14px;

  font-weight: bold;
  font-size: 16px;

  box-shadow: 
    0 6px 18px rgba(30,60,255,0.4),
    0 0 12px rgba(255,215,0,0.4); /* gold glow */

  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 99999;
}



/* ================= FULLSCREEN LOADER ================= */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(5, 10, 50, 0.85); /* dark blue overlay */

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

  z-index: 99999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ================= LOADER DOTS ================= */
.loader {
  display: flex;
  gap: 12px;
}

.loader div {
  width: 16px;
  height: 16px;

  background: #1e40af; /* solid blue dots */
  border-radius: 50%;

  animation: bounce 0.6s infinite alternate;
  box-shadow: 0 0 12px rgba(30, 64, 175, 0.7); /* blue glow */
}

.loader div:nth-child(2) {
  animation-delay: 0.2s;
}

.loader div:nth-child(3) {
  animation-delay: 0.4s;
}

/* ================= ANIMATION ================= */
@keyframes bounce {
  from {
    transform: translateY(0);
    opacity: 0.6;
  }
  to {
    transform: translateY(-15px);
    opacity: 1;
  }
}