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

/* Base body styles */
body {
  background: #000000; /* light ash */
  color: #1a202c; /* 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;
}


body {
  background-color: #000000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}


:root {
    --brand-orange: #D70A0A; /* Exact FINOVATE Green */
    --text-dark: #1e293b;
    --text-gray: #64748b;
    --input-bg: #f8fafc;
    --border-color: #f1f5f9;
}

body {
    background-color: #fcfcfc;
    font-family: 'Outfit', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
    display: none;
    flex-direction: column;
}

.container.active { display: flex; }

/* Logo Area - Side by Side */
.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 35px;
}

.main-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Makes it round */
    object-fit: cover;   /* Prevents stretching */
    border: 2px solid #f1f5f9; /* Optional: adds a thin clean border around the circle */
}
.brand-name {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    letter-spacing: -1px;
}

.form-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.form-subtitle {
    text-align: center;
    color: var(--text-gray);
    margin-top: 8px;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Slim Inputs Style */
.input-group { margin-bottom: 20px; }

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 8px;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 15px;
    height: 50px; /* Slimmer look */
    transition: 0.2s;
}

.input-wrapper:focus-within {
    border-color: #cbd5e1;
    background: #fff;
}

.input-icon {
    color: #94a3b8;
    font-size: 16px;
    margin-right: 12px;
}

.eye-icon {
    color: #cbd5e1;
    cursor: pointer;
    font-size: 16px;
}

input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #1e293b;
    outline: none;
    width: 100%;
}

input::placeholder { color: #94a3b8; }

/* The Orange Button */
.brand-btn {
    width: 100%;
    height: 52px;
    background: var(--brand-orange);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

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

/* Footer Links */
.footer-links {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: var(--text-gray);
}

.back-link, .orange-text {
    color: var(--brand-orange);
    text-decoration: none;
    font-weight: 600;
}


/* 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 {
  color: #1b4332; /* Dark green text */
  font-size: 22px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
}

/* Right Side Info Icon */
.header-right .info-icon {
  color: #D70A0A; /* 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;
}


/* ================= BOTTOM ACTION BUTTONS - ICEPICK STYLE ================= */
.bottom-action-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff; /* White background from 499277.jpg */
  border-radius: 24px; /* Soft rounded corners */
  padding: 20px 10px;
  margin: 20px auto;
  width: 92%;
  max-width: 420px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Very light shadow */
  border: 1px solid #f0fdf4; /* Optional subtle mint border */
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.action-btn:active {
  transform: scale(0.95);
}

/* Circular Backgrounds from 499277.jpg */
.action-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%; /* Makes it a perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: #FFF5F5; /* Light mint circle color from image */
  transition: background 0.3s ease;
}

/* Icon Specific Styles */
.action-icon i {
  font-size: 24px;
  color: #D70A0A; /* Solid green from 499277.jpg */
}

/* Special case for Telegram/Support if needed */
.support-bg-solid {
  background: #D70A0A !important;
  color: #ffffff !important;
}

/* Text Styling below circles */
.action-btn span {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a; /* Clean black text */
  font-family: 'Outfit', sans-serif;
}

/* Overriding your old background colors to keep it uniform green */
.recharge-bg, .withdraw-bg, .gift-bg, .profile-bg {
  background: #e6fcf0; 
}

/* Ensuring icons stay green to match the image */
.green-icon, .blue-icon, .gold-icon, .purple-icon {
  color: #D70A0A !important;
}

/* 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;                 
}



/* ================= GLASS CONTAINER ================= */
.bottom-nav-container {
  position: fixed;
  bottom: 15px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  padding: 10px 0;
}

/* ================= INNER NAV ================= */
.bottom-nav {
  width: 80%;           /* Leaves space on left & right */
  background: #ffffff;  /* deep navy slate */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', sans-serif;
}

/* ================= NAV ITEMS ================= */
.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex: 1;
  color: #161717;
  transition: all 0.3s ease;
}

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

.bottom-nav .nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5px;
}

.bottom-nav .nav-item span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ================= ACTIVE STATE ================= */
.nav-item.active {
  color: #ffffff;
}

.nav-item.active svg {
  color: #D70A0A;
  filter: drop-shadow(0 0 5px rgba(34, 164, 93, 0.4));
}

.nav-item.active::after {
  content: "";
  width: 4px;
  height: 4px;
  background: #D70A0A;
  border-radius: 50%;
  margin-top: 4px;
  box-shadow: 0 0 8px #D70A0A;
}


/* ===== 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;
}

/* ===== MINIMALIST NAVIGATION HEADER (499334.jpg STYLE) ===== */
.profile-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* Slightly taller for better touch targets */
  background: #ffffff; /* Pure white from 499334.jpg */
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 10000;
  box-shadow: none; /* Removed shadow to match image */
  border-bottom: 1px solid #f1f5f9; /* Optional subtle divider */
}

/* Left-aligned content wrapper */
.header-left-nav {
  display: flex;
  align-items: center;
  gap: 25px; /* Space between arrow and title */
}

/* Thin Green Back Arrow from 499334.jpg */
.back-btn {
  font-size: 22px;
  color: #D70A0A; /* Signature Icepick Green */
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Page Title Style */
.profile-title {
  font-size: 24px; /* Larger, cleaner font size */
  font-weight: 500;
  color: #1b4332; /* Deep forest green from image */
  margin: 0;
  font-family: 'Outfit', sans-serif;
}

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

/* ===== 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;
}

/* ===== ICEPICK WALLET CARD (499282.jpg) ===== */
.top-header {
  position: relative;
  border-radius: 28px; /* Slightly more rounded like image */
  padding: 25px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Exact green gradient from 499282.jpg */
  background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
 box-shadow: 0 10px 30px rgba(215, 10, 10, 0.3);
  overflow: hidden;
  color: white;
  margin-bottom: 25px;
}

/* Balance Section Styling */
.balance-section {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 18px; /* Larger like "Your Balance" in image */
  font-weight: 400;
  margin-bottom: 8px;
}

.balance-amount-slim {
  font-size: 42px; /* Very bold balance */
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Welcome Text / Greeting */
.brand-name {
  font-size: 15px;
  font-weight: 400;
  /* Premium Metallic Gold */
background: linear-gradient(
  135deg, 
  #BF953F 0%, 
  
  #B38728 50%, 
  
  #AA771C 100%
);

/* To apply it to text instead of a box */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  opacity: 0.9;
  margin-top: 10px;
}

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

/* Semi-transparent Pill Buttons matching 499282.jpg */
.btn-topup,
.btn-withdraw {
  flex: 1;
  padding: 12px;
  border-radius: 50px; /* Perfect pill shape */
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2); /* Transparent white look */
  color: #ffffff;
  backdrop-filter: blur(5px);
  transition: 0.3s;
}

.btn-topup:active, .btn-withdraw:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.96);
}

/* Hide old avatar/logo elements not in the new design */
.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;
}

/* ===== PROFILE CONTAINER (ICEPICK WHITE STYLE) ===== */
.settings-container {
  background: #f8fafc; /* Very light gray/white background */
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 0px; /* No gap because we use borders as dividers */
  min-height: 100vh;
}

/* Updated Section Title */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #1b4332;
  margin: 25px 0 10px 5px;
}

.section-title i {
  background: #FFF5F5; /* Light mint background */
  color: #D70A0A;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
}

/* White List Item matching 499283.jpg */
.settings-item {
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9; /* Simple divider line */
  transition: background 0.2s;
}

/* Round top corners for the first item and bottom for the last */
.settings-item:first-of-type { border-radius: 15px 15px 0 0; }
.settings-item:last-of-type { border-radius: 0 0 15px 15px; border-bottom: none; }

.settings-item:active {
  background: #FFF5F5;
}

/* Clean Icon Box Style from 499283.jpg */
.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  background: #FFF5F5 !important; /* Soft green box */
  color: #D70A0A !important;    /* Solid green icon */
}

/* Text Content */
.text-content {
  flex-grow: 1;
}

.item-label {
  font-size: 15px;
  font-weight: 500;
  color: #334155; /* Dark gray text */
}

.item-subtext {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 1px;
}

/* Thin Right Arrow matching 499283.jpg */
.arrow {
  font-size: 14px;
  color: #cbd5e1; /* Very light gray arrow */
}

/* Removed the glowing blue borders from your original CSS to match the image */
#withdrawalBtn, #depositBtnrec, #bankAccountBtn, #incomeBtn, 
#myTeamBtn, #myRecordsBtn .settings-item, #telegramBtn, #logoutBtn {
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

/* Special styling for Logout label */
#logoutBtn .item-label {
  color: #ef4444;
}

/* ===== 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 ================= */
.bank-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Reduced height slightly for more screen real estate */
  height: 60px; 
  background: linear-gradient(135deg, #fcf8ff, #ffffff);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
}

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

.bank-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
}

.mini-logo-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

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

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


/* Container */
.bank-form-container {
    padding: 10px 15px;
    background-color: #f8f9fa; 
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Card Style from 499487.jpg */
.bank-form-card {
    background: #ffffff;
    width: 100%;
    max-width: 400px;
    padding: 20px 10px;
    border-radius: 15px;
    border: 1px solid #eef0f2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Label Styling */
.crest-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 10px;
}

/* Input Containers */
.field-container {
    position: relative;
    display: flex;
    align-items: center;
}

.gamex-input {
    width: 100%;
    padding: 14px 15px 14px 45px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 15px;
    color: #2d3748;
    outline: none;
    transition: border-color 0.2s;
}

/* Dark style for Select dropdown */
.select-dark {
    background: #1a202c !important;
    color: white !important;
    padding-left: 15px !important;
    font-weight: 500;
    appearance: none;
}

/* Icons */
.input-icon {
    position: absolute;
    left: 15px;
    color: #a0aec0;
    font-size: 16px;
}

.select-icon {
    position: absolute;
    right: 15px;
    color: #cbd5e0;
    pointer-events: none;
}

/* The Green Button from 499487.jpg */
.update-bank-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    background: #D70A0A; /* Exact Green */
    color: white;
    cursor: pointer;
    margin-top: 5px;
    box-shadow: 0 4px 12px rgba(215, 10, 10, 0.2);
}

/* Security Footer */
.security-footer {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.security-footer i {
    color: #D70A0A;
    font-size: 18px;
    margin-top: 2px;
}

.security-footer p {
    font-size: 12.5px;
    color: #718096;
    line-height: 1.4;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .bank-form-card {
        padding: 20px 15px;
    }
}

/* ===== 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: #D70A0A !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;
}

/* Title Styling */
.rc-page-title {
  font-size: 24px;
  font-weight: 500;
  color: #8B0000; /* Deep Forest Green */
  margin: 0 !important;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}
/* ===== RECHARGE PAGE CONTAINER ===== */
.recharge-page-container {
    background-color: #FFF5F5; /* Light mint background from 499338.jpg */
    min-height: 100vh;
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

/* ===== MINIMUM AMOUNT BANNER ===== */
.min-amount-banner {
    background: #ffffff;
    border-radius: 15px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    border: 1px solid #e2f2e9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.min-amount-banner i {
    color: #D70A0A;
    font-size: 20px;
}

.min-amount-text {
    font-size: 16px;
    color: #8B0000;
    font-weight: 500;
}

.min-amount-text span {
    font-weight: 700;
    color: #8B0000;
}

/* ===== HEADERS ===== */
.recharge-subheader {
    font-size: 18px;
    font-weight: 600;
    color: #8B0000;
    text-align: center;
    margin-bottom: 20px;
}

/* ===== AMOUNT GRID (3-Columns) ===== */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

/* ===== AMOUNT BOX (White Pill Style) ===== */
.amount-option {
    background: #ffffff;
    border: 1px solid #d8ede2;
    border-radius: 12px;
    padding: 15px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-price {
    font-size: 16px;
    font-weight: 600;
    color: #D70A0A; /* Green currency text */
}

/* Active State matching the image */
.amount-option.active {
    background: #ffffff;
    border: 2px solid #D70A0A;
}

/* Hide the dot/plan label to match 499338.jpg */
.plan-label, .active-dot {
    display: none;
}

/* ===== CUSTOM INPUT ===== */
.custom-amount-wrapper {
    background: #ffffff;
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border: 1px solid #d8ede2;
}

.currency-icon {
    font-size: 20px;
    font-weight: 600;
    color: #D70A0A;
    margin-right: 10px;
}

#customAmount {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-size: 17px;
    color: #1b4332;
    font-weight: 500;
}

#customAmount::placeholder {
    color: #94a3b8;
}

/* ===== PROCEED BUTTON ===== */
.deposit-btn {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
   background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(34, 164, 93, 0.2);
}

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


/* ================= PAGE CONTAINER ================= */
.confirmation-page {
    padding: 20px;
    max-width: 400px; /* Mobile focused */
    margin: 0 auto;
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
}

.instruction-text {
    text-align: center;
    font-size: 16px;
    color: #334155;
    margin-bottom: 20px;
}

.green-text {
    color: #D70A0A;
    font-weight: 700;
}

/* ================= IMPORTANT ALERT BOX ================= */
.important-alert {
    background: #fff1f2;
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.alert-bar {
    width: 6px;
    background: #ef4444;
}

.important-alert p {
    padding: 15px;
    font-size: 14px;
    color: #991b1b;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* ================= WHITE DETAILS CARD ================= */
.white-details-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px 15px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    margin-bottom: 20px;
}

.input-display-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f8fafc;
}

.input-display-group:last-child {
    border-bottom: none;
}

.input-display-group label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.display-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

/* ================= SPECIAL STYLING ================= */
.amount-green {
    color: #D70A0A;
    font-size: 18px;
}

.copy-icon-btn {
    background: transparent;
    border: none;
    color: #D70A0A;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

.payment-note {
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 25px;
    line-height: 1.6;
}

.clean-input {
    border: none;
    outline: none;
    background: transparent;
    text-align: right; /* Aligns input text with other data */
    font-size: 14px;
    color: #1e293b;
    font-family: inherit;
    font-weight: 600;
    width: 150px;
}

/* ================= THE GREEN BUTTON ================= */
.i-have-paid-btn {
    width: 100%;
    background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

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

#welcomePopup.active {
  display: flex;
}

/* ================= POPUP BOX (CLEAN WHITE) ================= */
.popup-box {
  width: 92%;
  max-width: 380px;
  background: #ffffff; /* White background like 499423.jpg */
  border-radius: 24px;
  position: relative;
  padding: 30px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  text-align: center;
  font-family: 'Inter', sans-serif;
}

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

.welcome-subtext {
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 20px;
}

/* ================= BONUS CARDS (GREEN STYLE) ================= */
.bonus-card {
  background: #FFF5F5; /* Light green background */
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  border: 1px solid #FFF5F5;
}

.bonus-label {
  font-size: 16px;
  font-weight: 700;
 color: #8B0000;
  margin-bottom: 4px;
  display: block;
}

.bonus-value {
  font-size: 15px;
  color: #374151;
  font-weight: 500;
}

/* ================= ACTION BUTTONS (BOTTOM) ================= */
.popup-footer-btns {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Changed to 2 columns: one left, one right */
  gap: 15px; /* Slightly more gap for a cleaner look */
  margin-top: 20px;
}

.btn-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 5px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 400;
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  transition: transform 0.2s;
}

.btn-mini:active {
  transform: scale(0.95); /* Adds that "Boss Kingsley" premium feel */
}

/* Updated colors to match RedPay branding */
.bg-dark-red { background: #8B0000; } /* Dark Red for Group */
.bg-brand-red { background: #D70A0A; } /* Vibrant Red for Channel */

/* Close Button */
.popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 18px;
  color: #94a3b8;
  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;
  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 */
}


/* Page background matching login */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  padding-bottom: 140px;
  background: #FFF5F5; /* Light mint background */
}

/* Slim Card matching 499265.jpg */
.product-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  color: #1b4332;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

/* Header Section (Logo on Left, Details on Right) */
.card-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.brand-box {
  display: flex;
  width: 100%;
  gap: 15px;
}

/* Green Square Logo Box */
.vtradex-logo {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 100%);
  padding: 8px;
}

.plan-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.plan-name {
  font-size: 20px;
  font-weight: 700;
  /* Premium Gold Color */
 color: #AA771C;
  margin-bottom: 8px;
}

/* Stats Styling - Stretched Row Look */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  border-bottom: 1px solid #f8fafc;
  padding-bottom: 4px;
}

.info-label {
  font-size: 14px;
  color: #94a3b8;
}

.info-value {
  font-size: 15px;
  font-weight: 600;
  color: #AA771C;
}

/* Join Plan Button */
.invest-btn {
  width: 100%;
  border: none;
  padding: 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #D70A0A 0%, #1A0101 100%);
  cursor: pointer;
  margin-top: 10px;
  transition: 0.2s;
}

.invest-btn:hover {
  background: #D70A0A;
}

/* 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;    /* Crucial: Takes it out of the home page flow */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;      /* Full screen height */
  background: #f8faff; /* Set to a solid color so home page doesn't bleed through */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #ffffff;     /* Dark text for readability */
  z-index: 2000;      /* Higher than home page and most popups */
  overflow-y: auto;   /* Allows scrolling if content is long */
  display: none;      /* JavaScript will toggle this to 'flex' */
  flex-direction: column;
}


/* ================= INVITE HEADER (FIXED) ================= */
.invite-header-fixed-v2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px; /* Matches your other pro headers */
  background: linear-gradient(135deg, #fcf8ff, #ffffff);
  display: flex;
  align-items: center;
  z-index: 1000;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
  padding: 0 16px;
}

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

/* Header title */
.invite-header-fixed-v2 h2 {
  margin: 0;
  font-size: 17px; /* Professional mobile size */
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.3px;
}

/* ================= BACK BUTTON ================= */
.invite-back-btn-v2 {
  position: absolute;
  left: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  font-size: 18px;
  padding: 8px;
}

/* Adjust the content below the header */
.invite-content-container {
  padding-top: 90px; /* Ensures content doesn't hide under fixed header */
}
.invite-page-content {
  padding: 60px 16px;
  background-color: #ffffff;
  min-height: 100vh;
}

/* Page Header Title */
.page-title {
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: #000000;
  margin-bottom: 30px;
}

/* Main Box Container */
.referral-box {
  background: #f8faff; /* Very light blue tint from the screenshot */
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.label-text {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 8px;
  display: block;
}

/* Large display text (The Code) */
.display-value {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 1px;
}

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

/* Rounded Copy Button */
.copy-btn-purple {
  background: #D70A0A; /* Velvet Purple */
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  transition: 0.2s;
}

#refLink {
     /* black background */
  color: #000000;                /* white text */
  border: 1px solid #222;     /* subtle border */
  padding: 10px 12px;
  border-radius: 8px;
  width: 100%;

  outline: none;
}

/* Optional: when user clicks it */
#refLink:focus {
  border-color: #555;
}

.copy-btn-white {
  background: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Commission Rows */
.commission-item {
  background: #f8faff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

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

.level-1 { background: #D70A0A; color: white; }
.level-2 { background: #e2e8f0; color: #64748b; }

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

.commission-text span {
  font-weight: 400;
  color: #94a3b8;
}


/* ================= Team Page Layout ================= */
#teamPage {
  width: 100%;
  min-height: 100vh;
  background-color: #f9fafb; /* Light grey app background */
  font-family: 'Inter', sans-serif;
}

/* Header - Matches "My Team" UI */
.team-header {
  background-color: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #f1f5f9;
}

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

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

/* Tabs Section - The "Pill" Switcher */
.tabs {
  display: flex;
  background-color: #f1f5f9;
  margin: 20px;
  padding: 6px;
  border-radius: 14px;
}

.tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #64748b;
  border-radius: 10px;
  transition: background 0.3s, color 0.3s;
}

/* Your JS uses .active class */
.tab.active {
  background-color: #ffffff;
  color: #6366f1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Container for the Dynamic List */
#teamList {
  padding-bottom: 30px;
}

/* Member Card (To be generated by your JS) */
.team-user-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 20px;
  margin: 0 20px 12px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid #f1f5f9;
}

.user-avatar-circle {
  width: 45px;
  height: 45px;
  background-color: #818cf8; /* Purple icon from image */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.user-info-main { flex-grow: 1; }
.user-phone { display: block; font-size: 16px; font-weight: 700; color: #1e293b; }
.user-status-text { display: block; font-size: 13px; color: #94a3b8; margin-top: 2px; }

.user-earnings-box { text-align: right; }
.investment-label { display: block; font-size: 11px; color: #cbd5e1; margin-bottom: 2px; }
.investment-value { display: block; font-size: 17px; font-weight: 800; color: #6366f1; }

/* Empty/Loading State */
.empty-state {
  text-align: center;
  margin-top: 60px;
  padding: 20px;
}
.no-users { color: #94a3b8; font-size: 15px; }


/* 1. THE MAIN WRAPPER - SHIFTED UP */
.withdraw-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  overflow-y: auto;
  /* Reduced to 60px to match header height exactly */
  padding-top: 60px !important; 
  padding-bottom: 60px;
  box-sizing: border-box;
}

/* 2. THE HEADER - LOCKED TO TOP */
.wd-header-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  height: 60px;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 100000;
  border-bottom: 1px solid #f1f5f9;
}

/* 3. REMOVE GAP FROM TOP CARD */
/* This ensures the very first card inside your page starts right at the header line */
.withdraw-page > div:first-child,
.recharge-container > div:first-child,
.w-card:first-of-type {
  margin-top: 10px !important;
}

/* 4. CLEAN UP CONTAINER DUPLICATION */
.recharge-container {
  /* Remove the background and height here so it doesn't double up with .withdraw-page */
  padding: 0 15px; 
  box-sizing: border-box;
}



/* ===== UNIQUE WITHDRAWAL HEADER (499402.jpg STYLE) ===== */
.wd-header-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px; /* Adjust to match your app container width */
  height: 60px;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 100000; /* Stays above all cards */
  border-bottom: 1px solid #f1f5f9;
}

/* Flex wrapper to control spacing between arrow and title */
.wd-nav-group {
  display: flex;
  align-items: center;
  gap: 25px; /* Exact spacing from your recharge page */
  width: 100%;
}

/* Thin Green Back Arrow Style */
.wd-back-control {
  font-size: 20px !important;
  color: #D70A0A !important; /* Signature Green */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
}

/* Header Title Style */
.wd-main-title {
  font-size: 24px;
  font-weight: 600;
  color: #1b4332; /* Deep forest green */
  margin: 0 !important;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

/* Adjusting the main container so it doesn't hide under the header */




/* White Card Base */
.w-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #edf2f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* White Card Base */
.w-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #edf2f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Top Balance Card with Blue Accent Bar */
.balance-card-accent {
  border-left: 5px solid #D70A0A; /* Blue accent from 499402.jpg */
}

.label-gray {
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.balance-amount-text {
  font-size: 32px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.trend-icon {
  color: #D70A0A;
  font-size: 18px;
  margin-top: 10px;
}

/* Input Styling */
.input-wrapper {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.currency-sym {
  font-size: 20px;
  color: #94a3b8;
  margin-right: 10px;
}

.clean-input-field {
  border: none;
  outline: none;
  width: 100%;
  font-size: 18px;
  color: #1e293b;
  font-weight: 500;
}

/* Withdraw Button */
.withdraw-submit-btn {
  width: 100%;
  padding: 18px;
  background: #D70A0A; /* Forest Green from 499402.jpg */
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

/* Details Section */
.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #475569;
}

.icon-green { color: #D70A0A; }
.icon-orange { color: #f59e0b; }

/* Account Info Details */
.account-info-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.6;
}

/* ================= 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;
}



/* ================= CRESTPOINT RECORDS UI ================= */
.records-page {
  width: 100vw;
  min-height: 100vh;
  background: #fcfcfc; /* Pure, clean background */
  padding-top: 15px;
  box-sizing: border-box;
}


/* ===============================================
   FIXED RECORDS HEADER (PREMIUM WHITE STYLE)
   =============================================== */
.records-header {
  position: fixed;
  top: 0;
  left: 50%; /* Center alignment for mobile-first containers */
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px; /* Consistent with your other pages */
  height: 60px;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 100000;
  border-bottom: 1px solid #f1f5f9;
}

.records-header h2 {
  margin: 0 !important;
  font-size: 22px;
  font-weight: 600;
  color: #1b4332; /* Deep green from your profile style */
  font-family: 'Outfit', sans-serif;
  flex: 1;
  text-align: left;
  margin-left: 45px !important; /* Spacing from back button */
}

/* ===============================================
   BACK BUTTON (GREEN ACCENT STYLE)
   =============================================== */
.records-back-btn {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.records-back-btn i {
  font-size: 20px;
  color: #D70A0A !important; /* Matching your profile back icon color */
}

.records-back-btn:active {
  opacity: 0.6;
}

/* Ensure content doesn't hide under the fixed header */
.records-container {
  padding-top: 5px !important;
}

/* ================= RECORDS PAGE ================= */

.records-list-wrapper{
  padding:6px;
  background:#f1f5f9;
}

/* ================= RECORD CARD (499450.jpg STYLE) ================= */
.record-card {
  background: #ffffff;
  border-radius: 12px; /* Slightly sharper corners like the image */
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #f1f5f9; /* Subtle border like the image */
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.record-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f8fafc; /* Thin divider line */
  margin-bottom: 12px;
}

/* TRANSACTION ID WITH ICON */
.record-transaction {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

.record-transaction i {
  color: #D70A0A; /* Green arrow icon */
  font-size: 18px;
}

/* BLUE AMOUNT STYLE */
.record-amount {
  font-size: 18px;
  font-weight: 800;
  color: #D70A0A ; /* Green color from 499450.jpg */
}

/* DATE & STATUS ROW */
.record-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.record-time i {
  color: #3b82f6; /* Blue calendar icon */
}

/* SUCCESS PILL */
.record-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: capitalize;
}

.status-success {
  background: #dcfce7;
  color: #15803d;
}

.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, #fcf8ff, #ffffff);
  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: #1e293b;
  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: #1e293b;
  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,#a855f7,#ec4899);
  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, #D70A0A 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: #D70A0A; 
}

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

/* ================= INDIVIDUAL DOTS ================= */
.loader-dots span {
  width: 12px;
  height: 12px;
  background: #D70A0A; /* 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;
}