body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

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

:root {
    --bg-black: #fbfbfb;
    --primary-purple: #007500;
    --text-white: #000000;
    --text-dim: #303030;
    --input-bg: #ffffff;
    --border-dark: #262626;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-black);
    font-family: 'Poppins', sans-serif;
    color: var(--text-white);
}

/* Hide all containers by default */
.container {
    display: none; 
}

/* Only show the one that has the active class */
.container.active {
    display: flex !important;
    flex-direction: column;
    position: relative; /* Essential to anchor our fixed spacer inside its wrapper */
}

.auth-wrapper {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ========================================================
   FIXED STATUS BAR SPACER (SOLID BLACK FORCED LAYER)
   ======================================================== */
.status-bar-spacer {
    position: absolute; /* Pulls it out of flex-flow completely */
    top: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-top, 24px); 
    background: #000000 !important; /* Forces solid rich black tint */
    z-index: 99999;
}

/* ========================================================
   ADJUSTED TOP BANNER HEADER
   ======================================================== */
.top-header-image {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    /* Pushes the background element down right under the fixed black bar */
    padding-top: env(safe-area-inset-top, 24px); 
    box-sizing: border-box;
}

.header-overlay {
    width: 50%; 
    padding-right: 30px;
    text-align: left;
    z-index: 5;
}

.main-title {
    font-size: 38px;
    font-weight: 800;
    margin: 0;
    color: #000000; 
}

.sub-title {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Tab Styles from the screenshot */
.tab-container {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    padding-left: 5px;
}

.tab-item {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    position: relative;
    padding-bottom: 8px;
    transition: color 0.3s ease;
}

.tab-item.active {
    color: var(--text-white);
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25px; 
    height: 3px;
    background-color: var(--primary-purple);
    border-radius: 2px;
}

/* Form Body Styling */
.form-body {
    background-color: var(--bg-black);
    padding: 25px 20px;
    margin-top: -30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    z-index: 10;
}

.input-group { margin-bottom: 15px; }

.input-label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--border-dark);
    border-radius: 15px;
    padding: 16px 20px;
    color: var(--text-white);
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

input:focus {
    border-color: var(--primary-purple);
}

/* Action button design rules */
.btn-purple {
    width: 100%;
    padding: 16px;
    background-color: var(--primary-purple); 
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 15px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(26, 234, 81, 0.3);
}

.btn-purple:active { transform: scale(0.98); }

/* Password visibility structures */
.password-wrapper {
    position: relative;
    width: 100%;
}

.toggle-password.noticed-monkey {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-style: normal;
    font-size: 18px;
    z-index: 5;
}

.password-wrapper input {
    padding-right: 45px !important;
}
/* Dashboard container */
.dashboard {
  width: 100%;
  max-width: 400px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box;
  background: #ffffff;
  color: #f8f9fa;
}


/* Clean White Sticky Header */
.dashboard-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff; /* Pure white background from 499265_2.jpg */
  width: 100%;
  max-width: 600px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes content to left and right */
  padding: 0 16px;
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Very light shadow */
  box-sizing: border-box;
}

/* Logo and Text Wrapper */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Circular Logo Style */
.header-logo-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #f0fdf4; /* Very light green ring */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-logo-circle img {
  width: 70%;
  height: auto;
}


/* Brand Name */
.brand-name-1 {
  color: #007500; /* Dark green text */
  font-size: 20px; /* Slightly smaller for mobile optimization */
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Right Side Info Icon */
.header-right .info-icon {
  color: #007500; /* Green color from image */
  font-size: 24px;
  cursor: pointer;
}

/* Add padding to the body so content doesn't hide under the header */
body {
  padding-top: 80px;
}
/* Remove extra spacing in dashboard cards if used */
.dashboard-card h2.dashboard-header {
  margin: 0;
}


/* ===== COMPLETELY NEW ISOLATED DESIGN (500711.jpg) ===== */

.k-header-text {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 25px 0 12px 15px;
}

.k-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
}

.k-action-item {
    background: #ffffff !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 20px !important;
    padding: 15px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
    cursor: pointer;
    transition: 0.2s ease;
}

.k-action-item:active {
    transform: scale(0.92);
}

/* THE SQUARE BOX FOR ICONS */
.k-icon-square {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

/* FORCING THE NEW COLORS - NO MORE RED */
.k-teal { background-color: #f0fdfa !important; color: #0d9488 !important; }
.k-blue { background-color: #eff6ff !important; color: #2563eb !important; }
.k-purple { background-color: #faf5ff !important; color: #9333ea !important; }
.k-pink { background-color: #fff1f2 !important; color: #e11d48 !important; }

/* Forces FontAwesome icons to use the specific colors above */
.k-icon-square i {
    font-size: 19px !important;
    color: inherit !important; 
}

.k-label {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    font-family: 'Outfit', sans-serif;
}
/* White container around the flyer */
.flyer-container {
  background-color: #fefefe;      /* white background */
  padding: 16px;               /* space around flyer */
  border-radius: 16px;         /* rounded corners */
  box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* subtle shadow */
  max-width: 600px;            /* optional: limit width */
  margin: 20px auto;           /* center container with some vertical margin */
}

/* Flyer Banner - full width inside container */
.balance-flyer {
  width: 100%;       /* fill the container width */
  height: auto;
  overflow: hidden;
  border-radius: 12px; /* match container rounded corners slightly */
  position: relative;
  margin: 0;
}

/* Slider wrapper */
.flyer-slider {
  display: flex;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease-in-out;
}

/* Each image in the slider */
.flyer-card {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  border-radius: 12px; /* match container */
}

/* Product Section Wrapper */
.product-section {
  margin-top: 20px;
  padding: 0 10px;
}

/* Products Header */
.products-header {
  margin-bottom: 12px;
  text-align: left; /* align text to left */
}

.products-header h2 {
  display: inline-block;        
  padding: 6px 16px;            
  font-size: 18px;
  font-weight: bold;
  color: #D4AF37;               /* white text */
  background: #000000;          /* sky blue background */
  border-radius: 50px;          
  font-family: 'Arial Black', 'Helvetica', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;    
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* subtle black shadow */
}





.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;                 
}


/* ================= BOTTOM NAV FIX (MATCHED UI) ================= */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* Stretches to full width */
  height: 70px; /* Precise height */
  background: #ffffff; /* Solid white background */
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #f0f0f0; /* Subtle top border seen in 500833.jpg */
  box-sizing: border-box;
  z-index: 10000;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #94a3b8; /* Professional light gray for inactive items */
  transition: all 0.2s ease;
  flex: 1;
}

.nav-icon-wrapper {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8px;
}

.nav-item span {
  font-size: 12px;
  font-weight: 600; /* Matched weight from 500833.jpg */
}

/* ================= ACTIVE STATE (NEUTRAL & CLEAN) ================= */
.nav-item.active {
  color: #1a1a1a; /* Darker/active text color */
}

/* Removed the red dots and glow to match the new clean UI */
.nav-item.active svg {
  stroke-width: 2.2px;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: none;
  padding: 0 10px 80px 10px;
  height: calc(100vh);
  overflow-y: auto;
  box-sizing: border-box;
  background: #ffffff; /* page background */
  color: #ffffff;      /* text color */
  font-family: 'Inter', sans-serif;
}

/* ===== PREMIUM CENTERED HEADER (500843.jpg STYLE) ===== */
.profile-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px; /* Standard professional height */
  background: #ffffff; /* Pure white */
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the title container */
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 10000;
  border-bottom: 1px solid #f8f8f8; /* Very subtle divider */
}

/* Position the back button so it doesn't push the title to the right */
.back-btn {
  position: absolute;
  left: 16px;
  font-size: 18px;
  color: #666666 !important; /* Neutral gray as seen in 500843.jpg */
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 10;
}

.header-center-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bold, Centered Title Style */
.profile-title {
  font-size: 20px; /* Precise size from 500843.jpg */
  font-weight: 700; /* Bold weight */
  color: #1a1a1a; /* Professional dark text */
  margin: 0 !important;
  letter-spacing: -0.3px;
}

/* Adjust body padding so content starts below header */
body {
  padding-top: 64px;
}

/* ===== PROFILE CONTENT CONTAINER ===== */
.profile-content {
  display: flex;
  flex-direction: column;
  gap: 25px; /* space between sections */
  margin-top: 15px; /* avoid overlap with fixed header */
  padding-bottom: 10px;
}

/* ===== FINTECH DARK CARD (500706.jpg) ===== */
.top-header {
    position: relative;
    background: #121212; /* Deep charcoal/black from image */
    border-radius: 24px;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    color: white;
    margin-bottom: 20px;
    min-height: 160px; /* Slimmer profile */
    box-sizing: border-box;
}

/* Top Row: Label & User ID */
.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balance-label {
    font-size: 15px;
    color: #888; /* Dimmed text for "Total Balance" */
    font-weight: 400;
}

.user-id-display {
    font-size: 14px;
    color: #555; /* Darker text for the ID/Number */
    letter-spacing: 0.5px;
}

/* Middle Row: Balance */
.main-balance-area {
    margin: 10px 0;
}

.balance-amount-slim {
    font-size: 40px; /* Large and bold balance */
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    color: #ffffff;
}

/* Button Container */
.action-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 15px;
}

/* Teal Deposit Button */
.btn-deposit {
    flex: 1;
    height: 52px;
    background: #148f83; /* Investment Teal Green */
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}

/* Dark Outlined Withdraw Button */
.btn-withdraw-alt {
    flex: 1;
    height: 52px;
    background: #1e1e1e; /* Slightly lighter than card bg */
    color: #ffffff;
    border: 1px solid #333; /* Soft border */
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}

/* Active states for feedback in Acode/TrebEdit */
.btn-deposit:active, .btn-withdraw-alt:active {
    transform: scale(0.96);
    opacity: 0.8;
}

/* Cleanup for old styles */
.brand-name, .user-avatar, .logo-section {
    display: none;
}


/* ===== FEATURE ROW (499305.jpg STYLE) ===== */
.feature-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 5px;
  background: transparent;
}

.feature-card {
  background: #ffffff; /* White card from 499305.jpg */
  flex: 1;
  border-radius: 20px; /* Smooth rounded corners */
  padding: 20px 10px;
  display: flex;
  flex-direction: row; /* Side-by-side alignment */
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* Very soft shadow */
  height: 80px; /* Slimmer height */
  cursor: pointer;
}

/* Feature Icon Box */
.feature-icon-box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #D70A0A; /* Blue outline from image */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #D70A0A; /* Matching blue icon color */
  background: transparent; /* No gradient */
}

/* Specific styling for the Task Center icon if it needs a different look */
.task-icon {
  border: none; /* Task icon in 499305.jpg doesn't have a circle border */
  font-size: 22px;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b; /* Dark text */
  margin: 0;
}

.feature-subtext {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

/* Remove your old gradient classes to keep it uniform blue */
.purple-gradient, .green-gradient, .orange-gradient {
  background: transparent;
}


/* ===== LIST GROUP DESIGN (500752.jpg) ===== */

.settings-container {
    background: #fcfcfc !important; /* Very light clean background */
    padding: 15px !important;
    font-family: 'Outfit', sans-serif;
}

.k-group-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important; /* Grayish caps header */
    margin: 20px 0 10px 10px !important;
    letter-spacing: 0.5px;
}

.k-list-group {
    background: #ffffff !important;
    border-radius: 20px !important; /* Big rounded corners for the box */
    border: 1px solid #f1f5f9 !important;
    overflow: hidden;
    margin-bottom: 20px;
}

.k-item {
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f8fafc !important; /* Divider */
    cursor: pointer;
    transition: 0.2s;
}

.k-item:last-child {
    border-bottom: none !important;
}

.k-item:active {
    background-color: #f8fafc !important;
}

/* SOFT ICON BOXES */
.k-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
}

.k-icon i {
    font-size: 16px !important;
}

/* ICON COLORS FROM 500752.jpg */
.bg-light-blue { background: #eff6ff !important; color: #3b82f6 !important; }
.bg-light-purple { background: #faf5ff !important; color: #a855f7 !important; }
.bg-light-orange { background: #fff7ed !important; color: #f97316 !important; }
.bg-light-red { background: #fef2f2 !important; color: #ef4444 !important; }
.bg-light-teal { background: #f0fdfa !important; color: #0d9488 !important; }

.k-text {
    flex-grow: 1 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1e293b !important; /* Dark text */
}

.k-red-text {
    color: #ef4444 !important; /* For Logout */
}

/* THIN RIGHT ARROW */
.k-arrow {
    font-size: 14px !important;
    color: #cbd5e1 !important; /* Light gray arrow */
    font-weight: 300 !important;
}

/* ===== PURE GLASS SECTION ===== */
.apex-info-section {
  width: 100%;
  min-height: 60vh;
  margin-top: 20px;

  /* GLASS ONLY */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-top-left-radius: 22px;
  border-top-right-radius: 22px;

  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);

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

  padding: 30px 20px;
}

/* TEXT CONTENT */
.apex-glass-overlay {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

/* TITLE */
.apex-glass-overlay h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0a3cff;
  margin-bottom: 16px;
}

/* PARAGRAPH */
.apex-glass-overlay p {
  font-size: 15px;
  font-weight: 600;
  color: #0a3cff;
  line-height: 1.7;
  margin-bottom: 12px;
}


/* ================= BANK PAGE GLOBAL ================= */
.bank-page {
  width: 100%;
  background: #f8fafc;
  /* Changed from 100vh to min-height to prevent layout breaking */
  min-height: 100vh; 
  /* Reduced top padding since header is only 60px */
  padding-top: 65px; 
  padding-bottom: 20px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* ================= CLEAN WHITE HEADER (500775_2.jpg) ================= */
.bank-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; 
  background: #ffffff; /* Pure white background */
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  border-bottom: 1px solid #f2f2f2; /* Subtle border */
  box-sizing: border-box;
}

.header-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bank-header h2 {
  margin: 0;
  font-size: 18px; /* Balanced size */
  font-weight: 700; /* Strong bold weight */
  color: #1a1a1a; /* Near black text */
  letter-spacing: -0.2px;
}

.bank-back-btn {
  position: absolute;
  left: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  z-index: 10;
}

/* ===== BANK FORM (500775.jpg STYLE) ===== */

.bank-form-container {
    padding: 20px;
    background-color: #fcfcfc;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
}

.bank-form-card {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/* Dark Preview Card */
.bank-preview-black {
    background: #1a1a1a;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.preview-label {
    font-size: 11px;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.preview-dots {
    margin: 25px 0;
    font-size: 20px;
    letter-spacing: 5px;
    color: #ffffff;
}

.preview-holder {
    font-size: 16px;
    color: #999;
    margin: 0;
}

/* Form Inputs */
.input-wrapper {
    margin-bottom: 20px;
}

.crest-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.gamex-input {
    width: 100%;
    padding: 16px 15px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    font-size: 16px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    transition: 0.3s;
}

.gamex-input:focus {
    border-color: #8cc6be;
}

.select-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    pointer-events: none;
}

/* Save Button (Exact Teal color) */
.update-bank-btn {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    background: #008000; /* Teal color from 500775.jpg */
    color: white;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}

.update-bank-btn:active {
    transform: scale(0.98);
}

/* ===== UNIQUE RECHARGE HEADER (NO CONFLICTS) ===== */
.rc-header-main {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  height: 60px;
  background: #ffffff !important; /* Force white background */
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 99999; /* Higher z-index to stay on top */
  border-bottom: 1px solid #f1f5f9;
}

/* Wrapper for spacing - Uses gap logic from your profile code */
.rc-nav-wrapper {
  display: flex;
  align-items: center;
  gap: 25px; /* Exact space between arrow and text */
  width: 100%;
}

/* Back Arrow Styling */
.rc-back-btn {
  font-size: 20px !important;
  color: #148f83 !important; /* Signature Green */
  cursor: pointer;
  display: flex !important; /* Ensures the icon shows */
  align-items: center;
  text-decoration: none;
  background: none;
  border: none;
  padding: 5px;
}

/* Forces the FontAwesome icon to be visible */
.rc-back-btn i {
  display: inline-block !important;
  font-style: normal;
}

/* ===== ETISAPAY STYLE RECHARGE (500753.jpg) ===== */
.recharge-page-container {
    background-color: #fcfcfc; /* Very light neutral background */
    min-height: 100vh;
    padding: 15px;
    font-family: 'Outfit', sans-serif;
}

/* Header with Back Arrow */
.recharge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 20px;
}

.recharge-header i {
    font-size: 18px;
    color: #666;
}

.rc-page-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Section Labels */
.recharge-section-label {
    font-size: 15px;
    color: #444;
    margin-bottom: 12px;
    font-weight: 500;
}

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

.amount-option {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.plan-price {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* Active Highlight */
.amount-option.active {
    border-color: #79c2b9; /* The teal border */
    background: #f0fdfa;
}

/* Custom Input Styling */
.custom-amount-wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.currency-icon {
    font-size: 18px;
    color: #9ca3af;
    margin-right: 8px;
}

#customAmount {
    border: none;
    outline: none;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
}

.min-deposit-hint {
    font-size: 13px;
    color: #666;
    margin-bottom: 30px;
}

.min-deposit-hint span {
    color: #148f83;
    font-weight: 600;
}

/* Main Action Button */
.deposit-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #0f3d2e; /* The specific teal from image */
    cursor: pointer;
    margin-bottom: 30px;
}

/* The Notice Box */
.automated-notice {
    background: #fffdf2;
    border: 1px solid #fffae5;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.automated-notice i {
    color: #eab308;
    margin-top: 3px;
}

.automated-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #854d0e;
}


/* ===== STICKY NAV STYLE (500772.jpg) ===== */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    z-index: 1000; /* Keeps it above everything */
}

.nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.sticky-nav i {
    font-size: 18px;
    color: #666;
    cursor: pointer;
}

/* ===== CONTENT ADJUSTMENT ===== */
/* This wrapper ensures your content starts AFTER the fixed header */
.scroll-content {
    margin-top: 75px; /* Adjust this so your cards don't hide under the header */
    width: 100%;
}

/* Ensure the main page container doesn't have its own padding-top now */
.confirmation-page {
    padding: 0 15px 40px 15px !important;
}

.confirmation-page {
    padding: 15px;
    background: #fdfdfd;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    /* Added this to push card to the very top */
    margin-top: 0 !important; 
}

/* Header Section */
.bank-transfer-header {
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    border: 1px solid #f2f2f2;
    /* Reset any internal heading margins */
    margin-top: 0 !important;
}

.bank-info h3 { 
    margin: 0 !important; /* Forces the bank name to sit tight */
    font-size: 18px; 
    color: #1a1a1a; 
}
.bank-icon-box {
    width: 40px;
    height: 40px;
    background: #f0fdfa;
    color: #148f83;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e6f4f1;
}

.bank-info h3 { margin: 0; font-size: 18px; color: #1a1a1a; }
.sub-label { font-size: 13px; color: #888; display: block; }

/* Main Card */
.transaction-card {
    background: #ffffff;
    border: 1px solid #f2f2f2;
    border-top: none;
    padding: 20px;
    margin-bottom: 20px;
}

.detail-row { margin-bottom: 20px; }
.detail-label { font-size: 14px; color: #999; display: block; margin-bottom: 6px; }
.detail-value-bold { font-size: 16px; font-weight: 600; color: #333; line-height: 1.4; }

/* Account Number Box (Light Teal) */
.account-number-box {
    background: #f0fdfa;
    border: 1px solid #e6f4f1;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
}

.teal-label { font-size: 13px; color: #148f83; font-weight: 600; display: block; margin-bottom: 10px; }
.large-number { font-size: 24px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.5px; }

.copy-pill-btn {
    background: #148f83 !important;
    color: white !important;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Amount Section */
.large-amount { font-size: 26px; font-weight: 700; color: #1a1a1a; }
.copy-small { color: #aaa; cursor: pointer; font-size: 18px; }

/* Warning Timer Box */
.timer-warning-box {
    background: #fffdf2;
    border: 1px solid #fdf2d2;
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.info-icon { color: #d9a406; margin-top: 3px; }
.timer-warning-box p { font-size: 13px; color: #854d0e; margin: 0; line-height: 1.5; }
.deadline-bold { font-weight: 700; color: #854d0e; }

/* Sender Inputs */
.sender-input-card {
    background: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
}

.input-group { margin-bottom: 15px; }
.input-group:last-child { margin-bottom: 0; }
.input-group label { font-size: 12px; color: #aaa; font-weight: 700; display: block; margin-bottom: 8px; }

.clean-payment-input {
    width: 100%;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

/* Action Button */
.i-have-paid-btn {
    width: 100%;
    background: #ffffff !important;
    color: #148f83 !important;
    border: 2px solid #148f83 !important;
    padding: 16px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.tap-hint {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    margin-top: 12px;
}

/* Helpers */
.flex-between { display: flex; justify-content: space-between; align-items: flex-start; }
.align-center { align-items: center; }

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

#welcomePopup.active {
  display: flex;
}

/* ================= POPUP BOX ================= */
.popup-box {
  width: 90%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 28px;
  position: relative;
  padding: 25px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  text-align: center;
  font-family: 'Inter', sans-serif;
}

/* ================= LOGO STYLE ================= */
.popup-logo-container {
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 15px;
  margin: -60px auto 15px auto; /* Pulls logo up like the image */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,180,216, 0.15);
}

.popup-logo-container img {
  width: 70%;
  height: auto;
}

/* ================= TITLE & SUBTEXT ================= */
.welcome-title {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 4px;
}

.welcome-subtext {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 25px;
}

/* ================= LIST STYLE CARDS ================= */
.bonus-card {
  background: #f8fafc; /* Very light grey/blue */
  border-radius: 16px;
  padding: 12px 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  text-align: left;
}

.bonus-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 18px;
}

/* Icon Tints from 500845.jpg */
.icon-blue { background: #f0f9ff; color: #0ea5e9; }
.icon-teal { background: #f0fdfa; color: #14b8a6; }
.icon-light-blue { background: #f0f9ff; color: #38bdf8; }

.bonus-info {
  display: flex;
  flex-direction: column;
}

.bonus-label {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.bonus-value {
  font-size: 12px;
  color: #64748b;
}

/* ================= FULL WIDTH BUTTONS ================= */
.popup-footer-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 25px;
}

.btn-full {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  transition: 0.3s;
}

.btn-full i {
  margin-right: 10px;
  font-size: 18px;
}

/* Gradient Buttons like 500845.jpg */
.bg-telegram { background: linear-gradient(90deg, #0088cc, #00a8ff); }
.bg-whatsapp { background: #007500; } /* Dark green like the image */

.btn-full:active {
  transform: scale(0.97);
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 18px;
  font-size: 20px;
  color: #cbd5e1;
  cursor: pointer;
}

/* ================= GIFT PILL BUTTON (SMALL & LEFT) ================= */
.gift-pill-wrapper {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.gift-pill-btn {
  padding: 6px 12px;        /* smaller padding */
  border-radius: 30px;      /* still pill but tighter */
  border: none;
  font-weight: 600;
  font-size: 12px;          /* smaller text */
  cursor: pointer;
  color: #fff;
  width: fit-content;       /* prevents stretching */

  /* Blue + Gold Gradient */
 background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
  background-size: 300% 300%;

  /* Glow */
  box-shadow: 0 0 6px rgba(10,132,255,0.7),
              0 0 12px rgba(255,215,0,0.6),
              0 0 18px rgba(10,132,255,0.8);

  animation: glowMove 3s infinite linear;
  transition: transform 0.2s ease;
}

.gift-pill-btn:hover {
  transform: scale(1.05); /* smaller hover so it doesn’t look big */
}

/* Moving gradient + glow */
@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ================= MODAL ================= */
.gift-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.gift-modal-content {
  background: #3d3333;
  padding: 25px;
  border-radius: 20px;
  width: 90%;
  max-width: 350px;
  text-align: center;
  position: relative;
  animation: popUp 0.3s ease;
}

@keyframes popUp {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close-gift {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 22px;
  cursor: pointer;
}

.gift-modal-content input {
  width: 100%;
  padding: 12px;
  margin-top: 15px;
  color: #E0E0E0;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.gift-modal-content button {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
  color: white;
  font-weight: bold;
  cursor: pointer;
}


/* DAILY LOADER OVERLAY */
.daily-loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:9999;
}

/* 3D SPINNER */
.spinner-3d{
  width:60px;
  height:60px;
  border:6px solid rgba(255,255,255,0.2);
  border-top:6px solid #00c2ff;
  border-radius:50%;
  animation:spin3d 1s linear infinite;
  margin-bottom:15px;
}

@keyframes spin3d{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.daily-loader p{
  color:white;
  font-weight:600;
  font-size:16px;
}


/* ===== PRODUCT PAGE ===== */
.product-page {
  width: 100%;
  padding: 20px;
  padding-bottom: 80px;
  padding-top: 65px; /* space for fixed header */
  background: #ffffff; /* white background */
  min-height: 100vh;
  color: #ffffff;      /* white text */
  display: none;       /* show when active */
}

/* ===== FIXED HEADER ===== */
.product-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #1e40ff; /* blue header */
  padding: 12px 0;
  z-index: 1000;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;      /* white text */
  box-shadow: 0 3px 8px rgba(30, 64, 255, 0.2); /* subtle blue shadow */
}

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


/* ===== INVESTMENT PLAN UI (500751.jpg) ===== */

.product-list {
    background-color: #f8f9fa; /* Very light grey background for page */
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-card-v2 {
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f1f3f5;
}

/* Header: Title and Active Badge */
.card-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.plan-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Outfit', sans-serif;
}

.status-badge-active {
    background: #f0fdfa;
    color: #14b8a6;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
}

/* Profit Grid: Two soft grey boxes */
.profit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.profit-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.box-label {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 5px;
}

.box-value {
    font-size: 17px;
    font-weight: 700;
    color: #000000;
}

/* Details Rows */
.details-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    font-size: 14px;
    color: #6c757d;
}

.detail-price, .detail-days {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}

/* THE SIGNATURE TEAL BUTTON */
.btn-invest-now {
    width: 100%;
    background: #008700; /* Exact Teal from 500751.jpg */
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-invest-now:active {
    transform: scale(0.97);
    background: #0f766e;
}

/* Hide old styles if they exist */
.vtradex-logo, .brand-box { display: none !important; }

/* Hide status badge or style as small indicator if needed */
.status-badge {
  display: none; 
}

.invest-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    background: #9ca3af !important; /* Grey out when processing */
}

.fa-spin {
    margin-right: 8px;
}

/* ================= INVITE PAGE (FIXED LAYER) ================= */
.invite-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #f8f9fa; /* Matches screenshot background (500785.jpg) */
  font-family: 'Outfit', sans-serif;
  z-index: 2000;
  overflow-y: auto;
  display: none; /* JavaScript toggles this */
  flex-direction: column;
}

/* ================= INVITE HEADER (FIXED) ================= */
.invite-header-fixed-v2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px; 
  background: #ffffff; /* Solid white like 500775_2.jpg */
  display: flex;
  align-items: center;
  z-index: 2100; /* Must be higher than invite-page */
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
  padding: 0 16px;
}

.invite-nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.invite-header-fixed-v2 h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.invite-back-btn-v2 {
  position: absolute;
  left: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  padding: 8px;
}


/* Teal Header Card Styling */
.invite-header-card {
    background: #139082; /* The specific teal from 500785.jpg */
    border-radius: 20px; /* Highly rounded corners */
    padding: 40px 20px; /* Generous vertical padding for that 'box' feel */
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(19, 144, 130, 0.2); /* Soft teal shadow */
}

/* The semi-transparent icon container inside the green box */
.header-icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15); /* Glassmorphism effect */
    border-radius: 15px; /* Squircle shape like the image */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 26px;
}

.header-main-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.header-sub-title {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}
/* ================= COMPLETE UI FIX (500785.jpg) ================= */

.invite-container {
    padding: 80px 15px 30px;
    background-color: #f8fafc;
    min-height: 100vh;
}

/* Main Card Wrapper */
.invite-main-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.label-text {
    display: block;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Referral & Link Boxes */
.referral-box {
    background: #f8fafb;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.link-box-white {
    background: #ffffff !important;
}

.display-value {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.5px;
}

.link-display-text {
    font-size: 14px;
    color: #94a3b8;
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Buttons */
.copy-btn-teal {
    background: #139082;
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
}

.copy-btn-white {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
}

/* Commission Items */
.commission-item {
    background: #f8fafb;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
}

.level-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.level-1 { background: #139082; color: #fff; }
.level-2 { background: #cbd5e1; color: #64748b; }

.commission-text {
    font-size: 15px;
    color: #1e293b;
}

.comm-light {
    color: #94a3b8;
    font-weight: 400;
    margin-left: 4px;
}

/* Bottom Outline Button */
.view-team-btn {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    padding: 18px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.view-team-btn i {
    color: #139082;
    font-size: 20px;
}


/* ================= Team Page Layout ================= */
#teamPage {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f6f8; /* Balanced subtle background grey */
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}

/* Container to lock Header + Tabs to the top */
.fixed-header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
}

/* Header Section */
.team-header {
  background-color: #ffffff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.team-header h1 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.team-header .back-btn {
  position: absolute;
  left: 20px;
  font-size: 22px;
  color: #4b5563;
  cursor: pointer;
}

/* Green Background Pill Switcher Panel */
.tabs {
  display: flex;
  background-color: #008000; /* Primary Deep Investment Green */
  margin: 0 16px 16px 16px;
  padding: 6px;
  border-radius: 16px;
}

.tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab .lvl-title {
  font-size: 16px;
  font-weight: 800;
}

.tab .lvl-rate {
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}

/* Active Level Tab Mode */
.tab.active {
  background-color: #ffffff;
  color: #008000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Content Area - Offset to compensate for the fixed top components */
.main-content {
  padding-top: 155px; /* Perfect offset height for fixed header containers */
  padding-left: 16px;
  padding-right: 16px;
}

#teamList {
  padding-bottom: 40px;
}

/* Member Card Stylesheet */
.team-user-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
}

/* Circular Avatar Indicator */
.user-avatar-circle {
  width: 46px;
  height: 46px;
  background-color: #14532d; /* Extremely deep corporate green background tint */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

/* Central Info Fields */
.user-info-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-phone {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.user-masked-phone {
  display: block;
  font-size: 13px;
  color: #9ca3af;
  margin-top: 2px;
}

.user-joined-date {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Status & Ledger Earnings Fields */
.user-earnings-box {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.investment-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #008000; /* Active color matched matching app currency text */
}

.investment-value.zero-amt {
  color: #111827; /* Fallback text color for 0 balances */
}

/* System Status Badges */
.status-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  margin-top: 6px;
}

.status-badge.active-status {
  background-color: #e6f4ea;
  color: #008000;
}

.status-badge.inactive-status {
  background-color: #f3f4f6;
  color: #9ca3af;
}

/* Empty View Space */
.empty-state {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
}
.no-users {
  color: #9ca3af;
  font-size: 14px;
}


/* 1. THE MAIN WRAPPER - CLEANED UP */
.withdraw-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  padding-top: 64px !important; /* Matches header height */
  box-sizing: border-box;
}


/* ================= WITHDRAWAL HEADER (MATCHED TO 500809_2.jpg) ================= */
/* Header Fix - Removed 50% left transform for better mobile stability */
.wd-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  z-index: 100000;
  border-bottom: 1px solid #f8f8f8;
}

/* Position the back button absolutely so it doesn't push the title off-center */
.wd-back-control {
  position: absolute;
  left: 16px;
  font-size: 18px !important;
  color: #666666 !important; /* Neutral gray arrow as seen in image */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}

/* Center container ensures the title is dead-center of the screen */
.wd-header-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wd-main-title {
  font-size: 20px; /* Precise size from 500809_2.jpg */
  font-weight: 700;
  color: #1a1a1a; /* Darker, professional text */
  margin: 0 !important;
  letter-spacing: -0.3px;
}

/* 3. REMOVE GAP FROM TOP CARD */
.withdraw-page > div:first-child,
.recharge-container > div:first-child,
.w-card:first-of-type {
  margin-top: 0% !important; /* Adjusted to sit nicely below the 64px header */
}


/* ================= WITHDRAWAL UI FIX (500809.jpg) ================= */

.recharge-container {
    padding: 20px 16px;
    background-color: #fcfcfc;
}

/* Black Balance Card - Full Width */
.black-balance-card {
    background: #1a1a1a;
    border-radius: 20px; /* Matched curve */
    padding: 25px 20px;
    margin-bottom: 25px;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}


.label-white-sub {
    font-size: 13px;
    opacity: 0.6;
    display: block;
    margin-bottom: 8px;
}

.balance-amount-white {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* Input Styles */
.input-group-section {
    margin-bottom: 25px;
}

.label-dark {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 12px;
}

.modern-input-wrapper {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
}

.currency-prefix {
    font-size: 18px;
    color: #999;
    margin-right: 10px;
    font-weight: 600;
}

.clean-input-field {
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    width: 100%;
}

.clean-input-field::placeholder { color: #ccc; }

/* Receiving Account Section */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.change-link {
    color: #139082;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

CSS
/* 1. THE MAIN WRAPPER - CLEANED UP */
.withdraw-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  padding-top: 64px !important; /* Matches header height */
  box-sizing: border-box;
}

/* 2. RECHARGE CONTAINER (REDUCED PADDING TO STRETCH CARDS) */
.recharge-container {
    padding: 20px 16px; /* Changed from 50px to 16px to match 500823.jpg */
    background-color: #ffffff;
}

/* Black Balance Card - Full Width */
.black-balance-card {
    background: #1a1a1a;
    border-radius: 20px; /* Matched curve */
    padding: 25px 20px;
    margin-bottom: 25px;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.label-white-sub {
    font-size: 13px;
    opacity: 0.6;
    display: block;
    margin-bottom: 8px;
}

.balance-amount-white {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* White Info Card (Bank Section) */
.white-info-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f2f2f2; /* Clean border from 500809.jpg */
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}

.bank-sub-text {
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
}

.account-number-bold {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.account-holder-name {
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Teal Confirm Button */
.confirm-withdrawal-btn {
    width: 100%;
    background: #008000; /* Specific soft teal from image */
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
    cursor: pointer;
}

/* Bottom Info Table */
.info-table-card {
    background: #fafafa;
    border-radius: 20px;
    padding: 24px 20px;
    width: 100%;
    box-sizing: border-box;
}
.info-header {
    font-size: 12px;
    font-weight: 800;
    color: #aaa;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 15px;
}

.info-row span { color: #777; }
.info-row b { color: #1a1a1a; font-weight: 700; }

/* ================= RECORDS PAGE ================= */
.records-page {
  width: 100vw;
  padding-top: 60px;
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  overflow-y: auto;
  background: #f2f4f8;
  box-sizing: border-box;
}

/* ===============================================
   RECORDS PAGE SPACING
   =============================================== */
.records-page {
  padding-top: 64px;
}


/* Force Pending to be Yellow/Gold */
.status-pending {
    color: #f1c40f !important; /* Vivid Yellow */
    background: rgba(241, 196, 15, 0.1) !important; /* Light yellow tint background */
    border: 1px solid rgba(241, 196, 15, 0.3) !important;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* Success stays Green */
.status-success {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Failed stays Red */
.status-failed {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}


/* ================= RECORD PAGE BACKGROUND ================= */
.records-page {
  width: 100%;
  min-height: 100vh;
  background: #e6e6e6; /* Muted grey background from screenshot */
  padding-top: 75px; /* Offset spacing for the fixed header */
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}

/* ===============================================
   FIXED HEINEKEN-STYLE APP HEADER BAR
   =============================================== */
.records-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px; /* Aligns smoothly with modern mobile views */
  height: 60px;
  background: #008700 !important; /* Vivid solid brand green */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 99999;
}

.records-header h2 {
  margin: 0 !important;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff !important; /* Crisp white title text */
  font-family: serif, system-ui; /* Serif feel matching screenshot logo accent */
  text-align: center;
}

/* WHITE HEADER BACK BUTTON */
.records-back-btn {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
}

.records-back-btn i {
  font-size: 18px;
  color: #ffffff !important; /* White arrow */
}

/* LIST BODY CONTAINER spacing wrapper */
.records-list-wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px; /* Card layout separation row size */
}

/* ================= THE CARD ELEMENT BLOCK ================= */
.record-card {
  background: #ffffff;
  border-radius: 16px; /* Clean rounded card edges */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* REMOVED PREVIOUS HEADER LAYOUT SPLITS */
.record-top, .record-bottom {
  display: block;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* REFERENCE TRANSACTION ID FIELD */
.record-transaction {
  font-size: 16px;
  font-weight: 600;
  color: #222222; /* Dark near black text */
  margin-bottom: 4px;
  text-transform: uppercase;
  word-break: break-all;
}

/* TIMESTAMP STRING STYLE DIRECTLY UNDER ID */
.record-time {
  font-size: 14px;
  color: #888888; /* Soft muted grey text label */
  margin-bottom: 16px;
  font-weight: 500;
}

/* REPOSITIONED ALIGNMENT WRAPPER FOR BOTH VALUE & STATUS ROW */
.card-value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* HUGE NAIRA TEXT BLOCK IN BOTTOM LEFT CORNER */
.record-amount {
  font-size: 20px;
  font-weight: 800;
  color: #111111;
  display: flex;
  align-items: center;
}

/* PILL STATUS SYSTEM */
.record-status {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 12px;
  text-align: center;
}

/* TINTED SUCCESS BADGE */
.status-success {
  background: #e6f7ed; /* Light mint backdrop */
  color: #44aa66; /* Vibrant soft green text code */
}

.status-pending { 
  background: #fef3c7; 
  color: #b45309; 
}

.status-failed { 
  background: #fee2e2; 
  color: #b91c1c; 
}

/* ================= FULL PAGE ================= */
#myInvestmentPage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f2f1f1;        /* white background */
  padding-top: 100px;         /* reduced from 120px to push cards up */
  margin: 0;
  width: 100vw;
}


/* ===============================================
   INVESTMENT PAGE SPACING
   =============================================== */
.investment-page {
  padding-top: 64px;
}


/* ===============================================
   FIXED INVESTMENT HEADER
   =============================================== */
.investment-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: linear-gradient(135deg, #008700, #008700);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  box-sizing: border-box;
  border-bottom: 1px solid #f1f5f9; /* Professional thin border */
}

.investment-nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* Ensures the center group stays centered */
  width: 100%;
  position: relative;
}

.header-center-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Header Title */
.investment-header h2 {
  margin: 0;
  font-size: 17px; /* Matching mobile app standards */
  font-weight: 800;
  color: #fdfdfd;
  letter-spacing: -0.3px;
}

/* ===============================================
   BACK BUTTON (MATCHING RECHARGE PAGE)
   =============================================== */
.investment-back-btn {
  position: absolute;
  left: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  padding: 8px;
}

/* Mini Logo Circle */
.mini-logo-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Page spacing for fixed header */
.investment-page-container {
  padding-top: 40px;
}


/* ================= PACKAGE PREMIUM CARD ================= */
.package-premium-card {
  background: #ffffff;
  border-radius: 24px;
  width: calc(100% - 40px);
  max-width: 420px;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border: 1px solid #f1f5f9;
}

/* IMAGE AREA */
.package-image-container {
  width: 100%;
  height: 200px;
  background: #f8fafc;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
}

.package-img {
  width: 100%;       /* fill entire width */
  height: 100%;      /* fill entire height */
  object-fit: cover; /* crop/scale to cover container like a card */
  border-radius: 18px; /* match container corners */
}

/* TEXT CONTENT */
.package-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 18px 0;
}

.main-stats {
  margin-bottom: 15px;
}

.stat-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 15px;
  color: #64748b;
}

.val-bold {
  font-weight: 700;
  color: #0f172a;
  font-size: 17px;
}

.val-green {
  font-weight: 700;
  color: #D70A0A; /* Target green from image */
  font-size: 18px;
}

.divider {
  border: 0;
  border-top: 1px solid #f1f5f9;
  margin: 15px 0;
}

/* FOOTER GRID */
.footer-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.footer-box small {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.footer-box p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
}

/* BUTTON */
.investi-btn {
  width: 100%;
 background: linear-gradient(135deg, #008700 0%, #008700 100%);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.investi-btn:active {
  transform: scale(0.98);
}

.package-timer {
  text-align: center;
  font-size: 13px;
  color: #ef4444;
  margin-top: 10px;
  font-weight: 500;
}


/* ================= EMPTY STATE (INVESTMENTS) ================= */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  width: 100%;
  min-height: 300px;
}

.empty-icon-box {
  width: 80px;
  height: 80px;
  background-color: #f8fafc; /* Very light slate */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a; /* Dark slate */
  margin: 0 0 8px 0;
}

.empty-description {
  font-size: 14px;
  color: #64748b; /* Muted gray */
  margin: 0 0 30px 0;
}

/* The Green Browse Button */
.browse-plans-btn {
   background: linear-gradient(135deg, #44aa66 0%, #1A0101 100%);
  color: #ffffff;
  border: none;
  padding: 14px 35px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s;
}

.browse-plans-btn:active {
  transform: scale(0.96);
   background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
}


/* ================= CUSTOM ALERT ================= */
.custom-alert {
  position: fixed;
  top: 50%;           /* center vertically */
  left: 50%;          /* center horizontally */
  transform: translate(-50%, -50%); /* center perfectly */

  background: rgba(0, 0, 0, 0.85);  /* semi-transparent black */
  color: #ffffff;                   /* white text */

  padding: 14px 24px;
  border-radius: 12px;

  font-weight: 500;
  font-size: 15px;
  text-align: center;

  max-width: 90%;       /* responsive width */
  box-sizing: border-box;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 99999;
}

/* ================= SHOW ALERT ================= */
.custom-alert.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* ================= FULLSCREEN LOADER ================= */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; 
  display: flex;
  flex-direction: column; /* This stacks text on top and dots below */
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* ================= BRANDING TEXT ================= */
.loader-brand {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #1e293b; 
  margin-bottom: 30px; /* Increased space to clear the wave animation */
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-top: 0;
}

.loader-brand span {
  color: #007500; 
}

/* ================= DOTS CONTAINER ================= */
.loader-dots {
  display: flex;
  gap: 10px;
}

/* ================= INDIVIDUAL DOTS ================= */
.loader-dots span {
  width: 12px;
  height: 12px;
  background: #007500; /* Green dots per your code */
  border-radius: 50%;
  display: inline-block;
  animation: wave 1.2s infinite ease-in-out;
}

/* Delay each dot for wave effect */
.loader-dots span:nth-child(1) { animation-delay: 0s; }
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ================= WAVE ANIMATION ================= */
@keyframes wave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); } 
}

/* Investment Ticker */
.investment-ticker {
  width: 100%;
  overflow: hidden;
  background-color: #f3f4f6;  /* light gray */
  padding: 10px 0;
  border-radius: 12px;
  margin: 20px 0;            /* space under the ATM card image */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ticker-content {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;         /* start offscreen to the right */
  animation: ticker 15s linear infinite;
}

.ticker-content span {
  margin-right: 50px;
  font-size: 14px;
  color: #111827;
}

.ticker-content i {
  color: #EF4444; /* red megaphone icon */
  margin-right: 6px;
}

/* Keyframes for horizontal scrolling */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}




/* Header Image */
.product-header-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
}


/* Reviews Ticker Wrapper - fills remaining viewport height */
.reviews-ticker-wrapper {
  width: 100%;
  height: calc(100vh - 250px); /* adjust based on your header/image height */
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff; /* blue background */
  padding: 10px;
  box-sizing: border-box;
}

/* Ticker container */
.reviews-ticker {
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: scrollReviews 300s linear infinite; /* very slow scroll */
}

/* Each review item */
.review-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #ffffff; /* white card background */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  min-height: 80px; /* make each review taller */
}

/* User logo / icon */
.review-item .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* keeps image from shrinking */
}

/* Review text */
.review-item .review-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #79a2e5; /* blue text */
}

/* Smooth scroll animation */
@keyframes scrollReviews {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}



/* Full-width black box around dashboard image */
.dashboard-image-box-full {
    width: 100%;                 /* full width of parent container */
    background-color: #000000;   /* black box (you can change to green) */
    padding: 15px;               /* space inside box for image */
    border-radius: 16px;         /* rounded corners */
    box-sizing: border-box;
    text-align: center;          /* center image */
    margin: 20px 0;              /* vertical spacing only, no horizontal shift */
    overflow: hidden;            /* prevent any overflow */
}

/* Dashboard image inside the box */
.dashboard-image {
    max-width: 100%;             /* fit inside green box */
    height: auto;
    border-radius: 12px;         /* slightly rounded corners */
    display: inline-block;       /* center properly */
}




/* ===== PAYMENT TYPE ===== */
.payment-type {
  margin: 15px 0;
  text-align: left;
  width: 100%;
  position: relative;
  font-family: sans-serif;
}

.payment-type label {
  display: block;
  margin-bottom: 6px;
  color: #f4b400; /* green label */
  font-weight: 600;
  font-size: 14px;
}

/* The clickable box */
.payment-box {
  width: 100%;
  background: #ffffff;          /* white box */
  color: #000000;               /* green text */
  border: 1px solid #c0c0c0;   /* silver edge */
  border-radius: 12px;
  padding: 12px 15px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

.payment-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.payment-box .arrow {
  font-size: 14px;
}



/* Options list hidden by default */
.payment-options {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 48px; /* below the box */
  width: 100%;
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none; /* hidden initially */
  z-index: 100;
}

.payment-options li {
  padding: 10px 15px;
  cursor: pointer;
  color: #000000;
  font-weight: 500;
  transition: background 0.2s;
}

.payment-options li:hover {
  background: rgba(15,157,88,0.1); /* light green hover */
}


/* Selected Amount Display */
.selected-amount {
  font-weight: bold;
  color: #000000;   /* black */
  font-size: 20px;
  margin-top: 8px;
  text-align: center;
}



#paymentCountdown {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #ff0707; /* green */
}


#paymentStatusMessage {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  display: none;
}


.status-pending {
  background: #f0fff6;
  color: #1faa59;
}

.status-approved {
  background: #e6fff1;
  color: #1faa59;
}

.status-declined {
  background: #ffecec;
  color: #d62828;
}

.status-timeout {
  background: #fff6e5;
  color: #c77700;
}


/* ================= PROTECTED UI ================= */
#dashboard,
#bottomNav {
  display: none;
}


/* ================= FLOATING NAV CONTROL (BLACK + GOLD) ================= */
#navToggle {
  position: fixed;
  bottom: 90px; /* sits above bottom nav */
  right: 20px;

  width: 64px;
  height: 44px;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.9); /* black semi-transparent */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #D4AF37;  /* gold text/icon */
  font-size: 22px;

  border: 1px solid rgba(212,175,55,0.35); /* subtle gold border */
  cursor: pointer;

  z-index: 2001;
  display: none; /* auth decides */

  box-shadow: 0 8px 18px rgba(212,175,55,0.25); /* subtle gold shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Show toggle ONLY when logged in */
body.logged-in #navToggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover / press feedback */
#navToggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(212,175,55,0.35); /* stronger gold glow */
}

#navToggle:active {
  transform: scale(0.95);
}


/* ================= BOTTOM NAV ================= */

/* Hidden forever by default */
#bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2000;
}

/* Visible ONLY when toggled */
#bottomNav.open {
  transform: translateY(0);
}


/* ================= FLOATING TELEGRAM (PROFILE PAGE) ================= */
.profile-page .telegram-float-profile {
  position: fixed;
  bottom: 90px;              /* above bottom nav */
  right: 16px;               /* move to right */
  z-index: 9999;

  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: #0088cc;       /* Telegram blue */
  color: #ffffff;            /* white icon/text */

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

  font-size: 26px;
  text-decoration: none;

  box-shadow: 0 8px 20px rgba(0,136,204,0.35);  /* subtle blue shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / tap */
.profile-page .telegram-float-profile:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(0,136,204,0.45); /* stronger blue shadow */
}

/* Mobile safe */
@media (max-width: 480px) {
  .profile-page .telegram-float-profile {
    bottom: 100px;
    right: 12px;            /* adjust right for mobile */
  }
}


/* Toast Container - Positioned to the Top Right */
#toast-container {
    position: fixed;
    top: 90px; /* This clears your header (64px/70px) perfectly */
    right: 20px;
    z-index: 10001; /* High z-index to stay above everything */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
    max-width: 320px;
    pointer-events: none;
}

/* Individual Toast Styling */
.modern-toast {
    pointer-events: auto;
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    background: #1e293b; /* Dark slate for high contrast */
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 5px solid #6366f1;
    
    /* Animation: Slide in from the right */
    transform: translateX(120%); 
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

.modern-toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* High Visibility Borders */
.toast-success { border-left-color: #10b981; } 
.toast-error { border-left-color: #f87171; }   
.toast-warning { border-left-color: #fbbf24; } 

.toast-icon {
    font-size: 18px;
}


/* Container card based on 499709.jpg */
.empty-state-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 20px;
    margin: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon styled with brand red */
.empty-icon-box {
    font-size: 50px;
    color: #D70A0A; /* Brand Red from 499579.jpg */
    margin-bottom: 20px;
    opacity: 0.8;
}

.empty-title {
    color: #1A0101; /* Deep near-black red */
    font-size: 1.2rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.empty-subtitle {
    color: #8B0000; /* Dark Red text for professional contrast */
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* New Generic Premium Class Name */
.action-btn-premium {
    background: linear-gradient(135deg, #D70A0A 0%, #8B0000 100%);
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 50px; /* Rounded style from the image */
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(215, 10, 10, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.action-btn-premium:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(215, 10, 10, 0.2);
}

/* Main Container Card */
#withdrawBankCard {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.bank-title {
    color: #1A0101; /* Near-black red */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: left;
}

/* The Dashed Box from 499727.jpg */
.add-bank-dashed {
    border: 2px dashed #E0E0E0; /* Light grey dashed border */
    border-radius: 15px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #8B0000; /* Professional Dark Red */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover Effect for "Pure Vibes" */
.add-bank-dashed:hover {
    border-color: #D70A0A; /* Switches to brand red on hover */
    background: #FFF5F5; /* Soft pale rose background */
    color: #D70A0A;
}

.add-bank-dashed i {
    font-size: 1.2rem;
}

.add-bank-dashed span {
    font-size: 1rem;
    font-weight: 500;
}


/* ===== WITHDRAWAL EMPTY STATE (500773.jpg STYLE) ===== */
.w-empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px; /* Provides vertical centering */
    text-align: center;
}

.w-icon-circle {
    width: 60px;
    height: 60px;
    background-color: #f5f5f5; /* Light gray circle from 500773.jpg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.w-icon-circle i {
    font-size: 22px;
    color: #9e9e9e; /* Muted icon color */
}

.w-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 6px 0;
}

.w-empty-subtitle {
    font-size: 14px;
    color: #8e8e8e; /* Subtle gray subtext from 500773.jpg */
    margin: 0;
}


/* ===== DEPOSIT EMPTY STATE (500773.jpg STYLE) ===== */
.d-empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
}

.d-icon-circle {
    width: 60px;
    height: 60px;
    background-color: #f5f5f5; /* Light gray circle per 500773.jpg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.d-icon-circle i {
    font-size: 22px;
    color: #9e9e9e; /* Muted icon color */
}

.d-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 6px 0;
}

.d-empty-subtitle {
    font-size: 14px;
    color: #8e8e8e; /* Subtle gray subtext */
    margin: 0;
}

/* ===== INCOME EMPTY STATE (500773.jpg STYLE) ===== */
.i-empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
}

.i-icon-circle {
    width: 60px;
    height: 60px;
    background-color: #f5f5f5; /* Light gray circle per 500773.jpg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.i-icon-circle i {
    font-size: 22px;
    color: #9e9e9e; /* Muted gray icon */
}

.i-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 6px 0;
}

.i-empty-subtitle {
    font-size: 14px;
    color: #8e8e8e; /* Subtle gray subtext */
    margin: 0;
}