/* ================= GENERAL RESET ================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg-main: #f8f9fa;            /* Light premium canvas background */
  --text-main: #192231;          /* Dark deep blue/black for headings */
  --text-label: #4a5464;         /* Slate gray for form input labels */
  --text-muted: #718096;         /* Secondary soft gray text */
  --input-border: #e2e8f0;       /* Light structural border lines */
  --brand-blue: #2f6df6;         /* Primary Royal Blue brand color */
  
  /* Core Royal Blue gradients */
  --gradient-brand-blue: linear-gradient(135deg, #1e3a8a 0%, #2f6df6 50%, #60a5fa 100%);
  --btn-gradient: linear-gradient(90deg, #1e3a8a 0%, #2f6df6 50%, #60a5fa 100%);
  
  /* Interactive focus glow in Royal Blue */
  --input-focus: #2f6df6;        
}

/* Global Reset Setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Visibility Framework Core */
.honda-auth-container {
  display: none !important;
  width: 100%;
  max-width: 420px;
  padding: 20px 10px;
}

.honda-auth-container.active {
  display: flex !important;
  flex-direction: column;
}

.fieldmark-card {
  width: 100%;
  background: transparent;
}

/* Header & Logo Architecture */
.fieldmark-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 36px;
}

.fieldmark-logo-wrapper {
  margin-bottom: 24px;
}

/* Circular Badge mirroring Royal Blue brand */
.fieldmark-logo-circle {
  width: 90px;
  height: 90px;
  background: var(--gradient-brand-blue);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(47, 109, 246, 0.15);
}

.fieldmark-logo-circle .logo-icon {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff; 
  letter-spacing: -2px;
  font-style: italic;
  margin-bottom: -2px;
}

.fieldmark-logo-circle .logo-text {
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.fieldmark-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

/* Form Structural Layout */
.fieldmark-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fieldmark-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fieldmark-input-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-label);
}

/* Ultra-Clean Input Boxes */
.fieldmark-field-box {
  background-color: #ffffff;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fieldmark-field-box:focus-within {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.15);
}

.fieldmark-field-box input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
}

.fieldmark-field-box input::placeholder {
  color: #a0aec0;
  font-weight: 400;
}

/* Premium Gradient Action Buttons */
.fieldmark-btn-submit {
  width: 100%;
  background: var(--btn-gradient) !important;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(47, 109, 246, 0.3) !important;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.fieldmark-btn-submit:hover {
  opacity: 0.95;
}

.fieldmark-btn-submit:active {
  transform: scale(0.99);
}

/* Switch View Container */
.fieldmark-switch-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.fieldmark-link-btn {
  background: transparent;
  border: none;
  color: var(--brand-blue); 
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.fieldmark-link-btn:hover {
  text-decoration: underline;
}

.dashboard {
  width: 100%;
  max-width: 800px; /* Increase this to whatever width you prefer */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 16px;
  box-sizing: border-box;
  background: #f8f9fa;
  background-attachment: fixed;
  color: #192231;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ================= DASHBOARD HEADER (PREMIUM SOFT WHITE THEME) ================= */
.dashboard-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 64px;
  background: #ffffff; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 10000;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f2f5;
}

/* Left Brand Wrapping Alignment */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Precision Circular Branding Badge - Updated to use Royal Blue theme */
.header-brand-badge {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2f6df6 50%, #60a5fa 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(47, 109, 246, 0.25);
}

.header-brand-badge .brand-badge-shape {
  display: flex;
  gap: 3px;
  transform: skewX(-12deg);
}

.header-brand-badge .badge-bar {
  width: 5px;
  height: 14px;
  background-color: #ffffff; /* White contrast */
  border-radius: 1px;
}

.header-brand-badge .badge-bar:last-child {
  background-color: #dbeafe; /* Light blue variant */
  height: 18px;
  margin-top: -3px;
}

/* Crisp Slate Typography Branding */
.welcome-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1d3557;
  letter-spacing: -0.02em;
}

/* Right Side Navigation Action Link Rules */
.header-actions {
  display: flex;
  align-items: center;
}

.profile-link-btn {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2f6df6; /* Updated to Royal Blue link shade */
  text-decoration: none;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.profile-link-btn:hover {
  opacity: 0.8;
}

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

.action-btn {
  width: 45px;
  height: 45px;
  background: transparent;
  border: 1.5px solid #0e3047;
  border-radius: 12px; /* Rounded square look from image */
  color: #00d4ff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}

.action-btn:hover {
  border-color: #00d4ff;
  box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.2), 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Ensure FontAwesome icons glow */
.action-btn i {
  filter: drop-shadow(0 0 3px #00d4ff);
}

.user-phone {
  margin: 2px 0 0 0;
  font-size: 15px;
  color: #94a3b8; /* Muted grey for the phone number */
  font-weight: 400;
  letter-spacing: 0.5px;
}
/* Push main content down */
body {
padding-top: 0px !important; 
  margin: 0;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-main: #f8f9fa;               /* Light soft background canvas context */
  --text-dark: #1e2638;             /* Clean deep dark blue/gray text from screenshot */
  
  /* Gradient Schemes precisely matched to reference images */
  --grad-blue: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --grad-green: linear-gradient(135deg, #10b981, #047857);
  --grad-orange: linear-gradient(135deg, #f97316, #ea580c);
  --grad-purple: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* Base Structural Wrapper Control */
.main-container {
  width: 100%;
  max-width: 400px; 
  margin: 0 auto;
  padding: 12px 4px;
  box-sizing: border-box;
  background: transparent;
}

/* Premium Floating Soft White Container Card Box */
.mx-menu-wrapper {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px 16px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.015);
}

/* Force Clean Grid Layout in one line row */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 8px; 
  width: 100%;
}

/* Flat, Minimal Action Card Sockets */
.action-card {
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* Precise tight layout padding layout spacing */
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.action-card:active {
  transform: scale(0.94);
}

/* Small, Compact Gradient Badge Spheroid Circles */
.mx-circle-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Micro Icon Sizing within Badges */
.action-icon {
  width: 22px;
  height: 22px;
  color: #ffffff; /* Clean white stroke icons */
}

/* Dynamic Shadow Glow Assignments mapping screenshot aesthetics */
.bg-gradient-blue { 
  background: var(--grad-blue); 
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.25);
}
.bg-gradient-green { 
  background: var(--grad-green); 
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.25);
}
.bg-gradient-orange { 
  background: var(--grad-orange); 
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.25);
}
.bg-gradient-purple { 
  background: var(--grad-purple); 
  box-shadow: 0 6px 14px rgba(168, 85, 247, 0.25);
}

/* Card Interaction States */
.action-card:hover .mx-circle-badge {
  transform: translateY(-1px);
}

/* Crisp Balanced Text styling beneath elements */
.action-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Layout optimization for medium views */
@media (min-width: 576px) {
  .action-grid {
    gap: 12px;
  }
  .mx-circle-badge {
    width: 58px;
    height: 58px;
  }
  .action-text {
    font-size: 14px;
  }
}

/* HEADER INFO (Icon + Title) */
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.card-header i {
  font-size: 22px;
}

/* Dynamic Text/Icon Coloring matching the top gradients */
.card-recharge .card-header { color: #ff944d; }
.card-withdraw .card-header { color: #4ade80; }
.card-team .card-header { color: #79a6ff; }
.card-checkin .card-header { color: #c084fc; }

.card-header span {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

/* THE FUTURISTIC ANGLED BUTTONS */
.tech-btn-wrapper {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}

.tech-btn {
  width: 100%;
  border: none;
  padding: 8px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
  
  /* Creates the signature cyber-cut tech corners */
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 30%, 100% 70%, calc(100% - 10px) 100%, 10px 100%, 0% 70%, 0% 30%);
  
  transition: filter 0.2s ease;
}

/* Button Gradients matched to look outstanding against the cards */
.card-recharge .tech-btn {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
}
.card-withdraw .tech-btn {
  background: linear-gradient(90deg, #00b4db, #0083b0);
}
.card-team .tech-btn {
  background: linear-gradient(90deg, #7f00ff, #e100ff);
}
.card-checkin .tech-btn {
  background: linear-gradient(90deg, #11998e, #38ef7d);
}

.tech-btn:hover {
  filter: brightness(1.2);
}

/* CONTAINER & HEADER */
.features-section {
  padding: 20px;
  background: transparent;
  font-family: sans-serif;
}

.features-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.features-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
}

.view-all-link {
  color: #2D6BEF; /* Matching Syncox Blue */
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

/* HORIZONTAL SCROLLING WRAPPER */
.features-scroll-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  /* Hide scrollbar for Chrome/Safari */
  scrollbar-width: none; 
}

.features-scroll-container::-webkit-scrollbar {
  display: none;
}

/* THE CARDS - Optimized for Mobile */
.feature-card {
  flex: 1 1 calc(33.33% - 10px); /* Adjusts to fit 3 cards per row */
  max-width: calc(33.33% - 10px); 
  background: #ffffff;
  border-radius: 15px; /* Slightly smaller radius for mobile */
  padding: 15px 5px;   /* Reduced padding to save space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  margin: 5px; /* Adds breathing room between cards */
}

.feature-title {
  font-size: 18px; /* Scaled down from 22px for mobile */
  font-weight: 800;
  color: #1a1a1a; 
  margin-bottom: 2px;
  text-align: center;
}

/* The 100% Blue Highlight */
.highlight-text {
  color: #2D6BEF !important;
}

.feature-subtitle {
  font-size: 11px; /* Scaled down from 14px */
  font-weight: 600;
  color: #99a1b7; 
  text-align: center;
  white-space: nowrap; /* Prevents text from wrapping ugly */
}


/*/* PREMIUM FLYER CONTAINER - STRETCHED BOX STYLE */
.flyer-container {
  width: 100%;
  background-color: transparent;
  padding: 0 px; /* Adds a clean breathing margin on the sides */
  margin-top: 50px; 
  margin-bottom: 20px;
  box-sizing: border-box;
}

.balance-flyer {
  width: 100%;       /* STRETCHED: Expands to full container width */
  max-width: 100%;   /* REMOVED: No more 368px limit */
  margin: 0 auto;
  height: auto; 
  height: 450px;      /* STRETCHED: Height adjusts to image aspect ratio */
  position: relative;
  border-radius: 24px; /* Matches your dashboard card radius */
  border: 1px solid #edf2f7; 
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Slightly deeper shadow for pop */
  overflow: hidden;
}

.flyer-card {
  width: 100%; 
  height: 100%;      /* Ensures the whole image shows */
  display: block;    /* Removes bottom spacing bugs */
  object-fit: cover; /* Ensures it fills the box area gracefully */
}

/* Subtle modern premium gradient overlay */
.flyer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
  border-radius: 24px; /* Matches card radius */
}

/* 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: #d01e1e;          /* 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: linear-gradient(135deg, #1E3A8A, #2f6df6); /* SONY-style blue */
  color: white;
  border-radius: 12px;       
  padding: 30px;             
  margin: 0;                 /* remove side margins */
  width: 100%;               /* full width of container/screen */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


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

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

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


.record-id {
  font-weight: 700;           /* Makes it bold */
  font-family: 'Courier New', Courier, monospace; /* Monospace for numbers */
  color: #000000;                /* Slightly darker for readability */
  background: #f0f0f0;        /* Light grey background badge */
  padding: 2px 6px;           /* Space inside the badge */
  border-radius: 4px;         /* Rounded corners */
  display: inline-block;      /* Keeps the background tight to the text */
  margin-top: 4px;            /* Space from the time above */
  font-size: 11px;            /* Keeps it small but clear */
  letter-spacing: 0.5px;      /* Spacing between numbers */
  user-select: all;           /* Allows user to select full ID with one tap */
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ================= PREMIUM MOBILE SOFT LIGHT THEME BOTTOM NAV ================= */
.bottom-nav {
  position: fixed;
  bottom: 0; /* Tied directly to base of viewport with zero floating gaps */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px; /* Locked constraint to perfectly fit our dashboard spec layout box */
  background: #ffffff; /* Premium pure clean white layout canvas surface */
  border-top: 1px solid #f0f2f5; /* Micro-thin soft top indicator separator border */
  z-index: 9999;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px); 
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02); /* Soft elite backdrop shadow blend */
}

.nav-pill-container {
  width: 100%;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Balanced structural columns allocation across 4 links */
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
}

/* ================= NAV ITEMS GRID INTERFACES ================= */
.nav-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 2px;
  color: #a0aec0; /* Soft inactive icon text color exactly from screenshot */
  transition: color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  font-family: 'Inter', sans-serif;
}

/* Vector Framework Wrap Scaling Box Container */
.nav-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  transition: color 0.15s ease;
}

.nav-icon-wrapper svg {
  width: 24px; /* Scaled perfectly to balance matching font-icon widths */
  height: 24px;
}

/* Component Navigation Text Labels */
.nav-label-text {
  font-size: 11px;
  font-weight: 600; /* Crisp mid-range alignment text font weight rules */
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

/* ================= THE ARCHITECTURE ACTIVE CONTRAST MATRIX ================= */
.nav-item.active {
  color: #5c6a7e; /* Premium focused corporate slate gray/blue color state from image */
}

.nav-item.active .nav-icon-wrapper {
  background: transparent; /* Clean transparent canvas state background */
  color: #5c6a7e;
}

.nav-item.active .nav-label-text {
  color: #5c6a7e; /* Activated label text matches active selection states */
  font-weight: 600;
}

/* UI Haptic Finger Down Tap Scale Feedback */
.nav-item:active {
  transform: scale(0.95);
}


/* ================= THE FIX: AUTOMATIC SCROLL SPACING OFFSET ================= */
/* This rule safely injects extra breathing room at the bottom of your scroll container.
  It dynamically calculates the 64px height of your nav bar, the mobile safe zone, plus extra layout padding.
*/
.profile-scroll-container {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Global fall-back: If you have other pages using this navigation track, 
  this class can be added to their main containers to keep items from getting blocked.
*/
.nav-spacer-fix {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-main: #f4f6f8;            /* Premium light gray dashboard base body canvas background */
  --bg-header: #2f6df6;          /* Custom requested vibrant focal top banner color */
  --bg-card-light: #ffffff;      /* Pure solid white canvas surface blocks */
  --text-dark: #1e293b;          /* Soft modern dark charcoal profile typography string */
  --text-muted: #8a99ad;         /* Refined inactive list labels and subheaders description */
  --border-soft: #edf2f7;        /* Clean hairline row separator gray lines */
}


body {
  background-color: var(--bg-main);
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
}

.profile-page {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--bg-main);
}

/* ===== HIGH LEVEL HEADER SECTION ===== */
.dashboard-top-section {
  background-color: var(--bg-header);
  padding: 28px 16px 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Dark Circular Brand Logo Element Block */
.profile-brand-logo-circle {
  width: 72px;
  height: 72px;
  background: #02021e; /* Matches deep dark signature icon background from image references */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo-geometric-shape {
  width: 28px;
  height: 28px;
  background-color: #3b82f6; /* Accent styling for brand identity node layout */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.honda-user-meta h2 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff; /* Clean readable white text on color surface banner background */
  margin: 0 0 2px 0;
  letter-spacing: -0.02em;
}

.honda-user-meta p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85); /* Highly readable alpha tone variant text label */
  margin: 0 0 20px 0;
  font-weight: 400;
}

/* ===== SLIM SEMI-TRANSPARENT CARD BALANCE CARD ===== */
.honda-main-card {
  background: rgba(255, 255, 255, 0.2); /* Soft glass glow background context */
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.honda-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}

.honda-amount-row {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.currency-symbol {
  font-size: 24px;
  font-weight: 600;
}

/* ===== INNER LAYOUT WRAP CONTAINER ===== */
.profile-scroll-container {
  padding: 0px 16px 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

/* ===== FLOATING DUAL HOOK CONTAINER PLACEMENT ===== */
.honda-action-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  margin-top: -26px; /* High fidelity intersect alignment overlapping section divider line */
  z-index: 10;
  position: relative;
}

.honda-btn-primary, .honda-btn-outline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  background-color: var(--bg-card-light);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Crisp, clean dynamic floating card shadows */
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: none;
  color: var(--text-dark);
  box-sizing: border-box;
}

.honda-btn-primary:active, .honda-btn-outline:active {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* Rounded Profile Action Core Graphic Elements */
.btn-circle-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-circle-icon svg {
  width: 18px;
  height: 18px;
}

.icon-blue-bg {
  background-color: rgba(37, 99, 235, 0.08); /* Minimalist active blue hue mask */
  color: #D6D100;
}

.icon-green-bg {
  background-color: rgba(22, 163, 74, 0.08); /* Minimalist active green hue mask */
  color: #16a34a;
}

/* ===== ALIGNED SECTIONS LIST VIEW ===== */
.settings-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding-left: 4px;
}

.settings-list-box {
  background-color: var(--bg-card-light);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); /* Delicate floating structural layer base shadow */
  overflow: hidden;
  border: 1px solid rgba(237, 242, 247, 0.6);
}

.settings-item-link {
  text-decoration: none;
  color: inherit;
}

.settings-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background-color 0.15s ease;
  background-color: var(--bg-card-light);
}

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

.settings-item-row:active {
  background-color: #f8fafc;
}

.item-left-side {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Portable Weight Non-Bold Menu Icons Blueprint */
.menu-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.blue-tint { color: #3b82f6; }
.purple-tint { color: #8b5cf6; }
.red-tint { color: #ef4444; }
.text-red { color: #ef4444 !important; }

.item-left-side span {
  font-size: 13.5px;
  font-weight: 400; /* Flat clean light font text scaling */
  color: #334155;
  letter-spacing: -0.01em;
}

.chevron-indicator {
  font-size: 10px;
  color: #cbd5e1; /* Smooth low contrast chevron tracking markers */
}

.red-chevron {
  color: rgba(239, 68, 68, 0.3);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --canvas-light-gray: #f8fafc;
  --surface-pure-white: #ffffff;
  --primary-royal-blue: #2f6df6; /* Primary brand blue */
  --text-primary-dark: #1e293b;
  --text-slate-muted: #64748b;
  --custom-brand-blue: #2f6df6; /* Updated from yellow */
  --input-fill-tint: #f1f5f9;
  --border-divider-line: #e2e8f0;
}

/* Master Fixed Sheet Configuration - MOBILE APP WRAPPER SETUP */
.bank-page {
  background-color: var(--canvas-light-gray);
  min-height: 100vh;
  width: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary-dark);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   HEADER ARTIFACTS
   ========================================================================== */
.bank-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: var(--surface-pure-white);
  border-bottom: 1px solid var(--border-divider-line);
  box-sizing: border-box;
  z-index: 1000;
}

.bank-back-btn {
  background: transparent;
  border: none;
  color: var(--primary-royal-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-left: -4px;
  transition: opacity 0.15s ease;
}

.bank-back-btn:active {
  opacity: 0.5;
}

.bank-header h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text-primary-dark);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   CONTAINER AND INTERACTION FORM LAYOUTS
   ========================================================================== */
.honda-bank-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 80px 16px 40px 16px;
  box-sizing: border-box;
}

.honda-bank-form {
  width: 100%;
  background-color: var(--surface-pure-white);
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.honda-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.honda-input-label {
  color: var(--text-primary-dark);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

/* Form Input Control Framework Setup */
.honda-bank-form input,
.honda-bank-form select {
  background-color: var(--input-fill-tint);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text-primary-dark);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
  appearance: none;
}

/* CUSTOM BLUE FIELD INTERACTIVE HIGHLIGHT */
.honda-bank-form input:focus,
.honda-bank-form select:focus {
  border-color: var(--custom-brand-blue);
  background-color: var(--surface-pure-white);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.15);
}

/* Read-Only Grayed Out State Visual Formatting */
.honda-bank-form input[readonly] {
  background-color: #f1f5f9;
  color: var(--text-slate-muted);
  border-color: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.8;
}

.honda-bank-form input::placeholder {
  color: #94a3b8;
}

.honda-select-wrapper {
  position: relative;
  width: 100%;
}

.honda-select-wrapper::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-slate-muted);
  border-bottom: 2px solid var(--text-slate-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.honda-verification-notice {
  font-size: 13px;
  color: var(--text-slate-muted);
  text-align: center;
  margin: 4px 0;
  font-weight: 400;
  line-height: 1.4;
}

/* ==========================================================================
   PRIMARY ACTION CONTROLS
   ========================================================================== */
.honda-submit-btn {
  width: 100%;
  background-color: var(--primary-royal-blue);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(47, 109, 246, 0.2);
}

.honda-submit-btn:active {
  transform: scale(0.97);
  opacity: 0.92;
}

/* ==========================================================================
   PRIVACY/SECURITY INFO CARD
   ========================================================================== */
.honda-notice-card {
  background-color: #f0f4f9; /* Blue tint instead of amber */
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 14px;
  margin-top: 8px;
  box-sizing: border-box;
  text-align: left;
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-royal-blue);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.notice-content {
  color: #475569;
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
}

@media (min-width: 576px) {
  .honda-bank-container {
    padding-top: 96px;
  }
  .honda-bank-form {
    padding: 32px 24px;
    gap: 20px;
  }
}

.recharge-header-fixed {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 15px;
}

.recharge-header-fixed h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
}

.recharge-page-container {
  padding: 0 16px 20px 16px;
  max-width: 500px;
  margin: 0 auto;
}

/* Base Card Elements */
.payment-card {
  background: #1c2333;
  border-radius: 24px;
  padding: 20px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.card-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Individual Data Row Panels */
.info-row {
  background: #0f141e;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.info-value {
  color: #3b82f6; 
  font-weight: 700;
  font-size: 1.05rem;
}

/* Dynamic Rounded Copy Buttons */
.copy-icon-btn {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Banner Indicator Display */
.amount-banner {
  background: #0f141e; 
  color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.amount-banner span {
  font-size: 1.2rem;
  color: #3b82f6;
}

/* Styled Alert Sub-Box Notification Box */
.warning-alert-box-amber {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert-item i {
  color: #fbbf24;
  font-size: 0.9rem;
  margin-top: 3px;
}

.alert-item p {
  color: #fde68a;
  font-size: 0.82rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

/* Input Styles */
.input-label {
  display: block;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  margin: 16px 0 6px 2px;
}

.payment-input {
  width: 100%;
  background: #0f141e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  border-radius: 14px;
  outline: none;
  font-size: 0.9rem;
  color: #ffffff;
  box-sizing: border-box;
}

.payment-input:focus {
  border-color: #3b82f6;
}

.expiry-text {
  color: #6b7280;
  font-size: 0.78rem;
  margin-top: 20px;
  text-align: center;
  line-height: 1.4;
}

/* Luxury Interactive UI Buttons */
.primary-gradient-btn {
  background: linear-gradient(90deg, #2c0091, #1a0055);
  color: #ffffff;
  border: none;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 20px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.change-amount-btn {
  background: transparent;
  color: #ffffff;
  border: 2px solid #1c2333;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 12px;
  cursor: pointer;
}

/* Bottom Technical Help Info Wrapper Box */
.help-box {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 18px;
  margin-top: 25px;
}

.help-box h4 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.help-box p {
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-main: #f4f6f8;
  --bg-banner: #2f6df6; /* Primary Royal Blue */
  --bg-card-white: #ffffff;
  --bg-input-tint: #f0f4f9;
  --text-dark: #1e293b;
  --text-muted: #8a99ad;
  --accent-blue: #2f6df6; /* Updated from yellow */
  --border-soft: #edf2f7;
}

/* Master Fixed Sheet Overrides - SCROLL REPAIRS ACTIVE */
.recharge-page {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* ================= THE SOLID BLUE HIGH CAPACITY BANNER HEADER ================= */
.recharge-header-fixed {
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--bg-banner);
  display: flex;
  flex-direction: column;
  padding: 20px 16px 0 16px;
  box-sizing: border-box;
  z-index: 10;
  flex-shrink: 0;
}

.header-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.recharge-header-fixed h2 {
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0;
}

.recharge-back-btn-v2, .recharge-history-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  transition: opacity 0.15s ease;
}

.recharge-back-btn-v2:active, .recharge-history-btn:active {
  opacity: 0.6;
}

/* ===== TRANSLUCENT INTEGRATED BALANCE OVERLAY MODULE ===== */
.balance-display-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.balance-title {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

.balance-value {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ================= PORTABLE SCROLL STREAM CONTAINER ================= */
.recharge-page-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 16px 50px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto;
}

/* ===== MASTER FORM INPUT INTERSECTING CONTAINER ===== */
.recharge-card {
  width: 100%;
  background-color: var(--bg-card-white);
  border-radius: 16px;
  padding: 24px 16px 20px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: -35px;
  z-index: 30;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(237, 242, 247, 0.8);
}

.recharge-card .section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  text-align: left;
}

.recharge-card .section-label.centered {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* ===== HIGH CONTRAST INPUT ELEMENT WRAPPERS ===== */
.custom-amount-wrapper {
  background-color: var(--bg-input-tint);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 52px;
  box-sizing: border-box;
}

.currency-icon {
  color: #a0aec0;
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
}

#customAmount {
  background: transparent;
  border: none;
  color: var(--text-dark);
  font-size: 16px;
  font-family: inherit;
  font-weight: 400;
  outline: none;
  width: 100%;
  padding: 0;
}

#customAmount::placeholder {
  color: #cbd5e1;
}

/* ===== 3-COLUMN BADGE FORM GRID LAYOUTS ===== */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.amount-option {
  background-color: var(--bg-card-white);
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 10px 2px;
  border-radius: 8px;
  text-align: center;
  color: var(--text-dark);
  font-weight: 400;
  font-size: 13.5px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

.amount-option:active {
  background-color: var(--bg-input-tint);
  border-color: #cbd5e1;
}

/* ===== SOLID ACTIVE BLUE TRIGGER BUTTON ===== */
.deposit-btn {
  width: 100%;
  background-color: var(--bg-banner);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 24px;
  font-family: inherit;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 0 4px 14px rgba(47, 109, 246, 0.2);
}

.deposit-btn:active {
  transform: scale(0.97);
  opacity: 0.92;
}

.ssl-security-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--text-muted);
}

.ssl-security-notice svg {
  color: #cbd5e1;
}

.ssl-security-notice span {
  font-size: 12px;
  font-weight: 400;
}

/* ================= STEP PLATFORM GUIDELINES BOX ================= */
.info-guidelines-box {
  width: 100%;
  background-color: var(--bg-card-white);
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(237, 242, 247, 0.7);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.guidelines-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bg-banner);
  margin-bottom: 16px;
}

.info-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.info-icon {
  width: 22px;
  height: 22px;
  background-color: #dbeafe;
  color: var(--bg-banner);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.info-list p {
  font-size: 13px;
  font-weight: 400;
  color: #475569;
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.highlight-blue {
  color: var(--accent-blue);
  font-weight: 600;
}

@media (min-width: 576px) {
  .recharge-page-container {
    gap: 24px;
  }
  .recharge-card {
    padding: 28px 24px;
  }
  .amount-grid {
    gap: 12px;
  }
}

.fintech-toast {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-family: Inter, sans-serif;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== SCREEN CANVAS PORT OVERLAY OVERRIDES ===== */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px); 
  -webkit-backdrop-filter: blur(6px); 
  z-index: 100000;
  padding: 16px;
  box-sizing: border-box;
}

/* ===== ADVANCED FLOATING POPUP FRAME ===== */
.mx-unique-modal {
  width: 100%;
  max-width: 375px; 
  background: #ffffff; 
  border-radius: 28px !important; 
  padding: 32px 20px 24px 20px;
  text-align: center;
  font-family: 'Inter', sans-serif !important;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  animation: zoomInPopup 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes zoomInPopup {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Close Corner Button */
.mx-close-x-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f3f7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0aec0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mx-close-x-btn:hover { background: #e2e8f0; }
.mx-close-x-btn svg { width: 12px; height: 12px; }

/* ===== FLOATING BRAND BADGE WITH BLUE GRADIENT ===== */
.mx-modal-brand-token {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a 0%, #2f6df6 50%, #60a5fa 100%);
  box-shadow: 0 6px 20px rgba(47, 109, 246, 0.25);
  margin: -64px auto 14px auto; 
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
}

.mx-token-shape {
  display: flex;
  gap: 3px;
  transform: skewX(-12deg);
}

/* Internal token indicator lines in blue */
.mx-token-shape .token-bar {
  width: 5px;
  height: 14px;
  background-color: #2f6df6;
  border-radius: 1px;
}

.mx-token-shape .token-bar:last-child {
  background-color: #60a5fa;
  height: 18px;
  margin-top: -3px;
}

/* ===== INTERFACE HEADER TYPOGRAPHY RULES ===== */
.mx-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #1e2638;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

.mx-modal-subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: #718096;
  margin: 0 0 20px 0;
}

/* ===== CUSTOM BLUE BONUS STRIP ===== */
.mx-yellow-bonus-strip {
  background-color: rgba(47, 109, 246, 0.06); 
  border: 1px solid rgba(47, 109, 246, 0.22);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  text-align: left;
}

.mx-bonus-icon-box {
  width: 38px;
  height: 38px;
  background: rgba(47, 109, 246, 0.14);
  color: #2f6df6; 
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mx-bonus-icon-box svg { width: 18px; height: 18px; }

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

.mx-bonus-label {
  font-size: 11px;
  font-weight: 700;
  color: #2f6df6;
  letter-spacing: 0.03em;
}

.mx-bonus-value {
  font-size: 16px;
  font-weight: 700;
  color: #1e2638;
}

/* ===== MICRO MATRIX SPLIT GRID ALIGNMENT ===== */
.mx-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.mx-grid-cell {
  background: #f7fafc;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.mx-cell-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.mx-cell-icon svg { width: 16px; height: 16px; }

.icon-purple-tint { background: #f3e8ff; color: #9333ea; }
.icon-blue-tint { background: rgba(47, 109, 246, 0.12); color: #2f6df6; }

.mx-cell-label {
  font-size: 12px;
  font-weight: 500;
  color: #718096;
  margin-bottom: 2px;
}

.mx-cell-value {
  font-size: 15px;
  font-weight: 700;
  color: #1e2638;
}

/* System Footnotes Indicator Text */
.mx-popup-sub-notice {
  font-size: 12px;
  font-weight: 500;
  color: #a0aec0;
  margin: 0 0 20px 0;
  letter-spacing: -0.01em;
}

/* ===== MAIN CTA INVEST BUTTON (BLUE GRADIENT) ===== */
.mx-button-group {
  width: 100%;
  margin-bottom: 16px;
}

.mx-invest-now-btn {
  width: 100%;
  background: linear-gradient(90deg, #1e3a8a 0%, #2f6df6 50%, #60a5fa 100%) !important; 
  color: #ffffff !important;
  border: none;
  padding: 15px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(47, 109, 246, 0.25);
  transition: transform 0.1s ease, opacity 0.2s ease;
}

.mx-invest-now-btn:active { transform: scale(0.99); }

/* Horizontal Community Boundary Lines Separator */
.mx-community-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.mx-community-divider .divider-line {
  flex: 1;
  height: 1px;
  background-color: #e2e8f0;
}

.mx-community-divider .divider-text {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e0;
  letter-spacing: 0.03em;
}

/* ===== SOCIAL LINK TELEGRAM ROW (BLUE TINT) ===== */
.mx-dual-links-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.mx-community-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: rgba(47, 109, 246, 0.07); 
  border: 1px solid rgba(47, 109, 246, 0.2);
  color: #2f6df6; 
  padding: 11px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: background 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.mx-community-card-btn:active {
  background-color: rgba(47, 109, 246, 0.18);
  transform: scale(0.97);
}

.mx-tg-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
#welcomePopup {
  display: none; /* Changed from none to flex for visibility during testing */
}

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

/* ===== PREMIUM PRODUCT CARD REWRITTEN ===== */
.premium-card {
  background: #ffffff !important;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  color: #9babc3; 
  border: 1px solid #f1f5f9; 
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03); 
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

/* HEADER STRUCTURE */
.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.plan-icon-box {
  background: #f0f5ff !important; 
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f6df6 !important; 
  font-size: 16px;
}

.title-group {
  flex: 1;
}

.plan-title {
  font-size: 15px;
  color: #0f172a !important;
  font-weight: 600; 
  margin: 0;
}

.plan-duration-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 400;
  margin-top: 1px;
}

/* STATUS PILL (MATCHING SCREENSHOT ACTIVE DESIGN) */
.active-tag {
  background: #f0fdf4 !important; 
  color: #16a34a !important; 
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 🚀 NEW UNIQUE NAME TO BYPASS OLD OVERRIDES */
.premium-invest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 10px;
  margin: 18px 0;
}

/* 🚀 NEW UNIQUE NAME + FORCE LIGHT BLUE */
.invest-metric-card {
  background: #f0f5ff !important; /* Forces the beautiful light brand blue tint */
  padding: 12px 8px;
  border-radius: 10px;
  text-align: center;
  border: none !important; /* Wipes out old borders */
}

.stat-label {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
}

.stat-value {
  font-size: 13px;
  font-weight: 600;
  color: #2f6df6 !important; /* Keeps metrics matched with your brand blue */
}

/* PRESERVED FOR STABILITY CONTROL */
.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  padding: 2px 0;
}

/* HORIZONTAL TIMELINE METADATA FOOTER LINE */
.details-summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0; 
  font-size: 12px;
  color: #64748b;
}

.detail-date-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-date-item i {
  color: #94a3b8;
}

.countdown-live-tracker {
  font-size: 12px;
  font-weight: 500;
  color: #334155;
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 480px) {
  .premium-card {
    padding: 16px;
  }
  .stat-value {
    font-size: 12px;
  }
  .stat-label {
    font-size: 10px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-main: #f4f6f8;
  --bg-banner: #2f6df6; /* Primary brand blue */
  --bg-card-white: #ffffff;
  --bg-input-tint: #f0f4f9;
  --text-dark: #1e293b;
  --text-muted: #8a99ad;
  --accent-blue: #2f6df6; /* Updated from accent-yellow */
  --border-soft: #edf2f7;
}

/* ================= MASTER PAGE ================= */
.invite-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 999;
  background-color: var(--bg-main);
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 80px;
}

/* ================= HEADER ================= */
.invite-header-fixed-v2 {
  position: relative;
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px 0 20px;
  background-color: var(--bg-banner);
  box-sizing: border-box;
  flex-shrink: 0;
}

.invite-header-fixed-v2 h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.invite-back-btn-v2 {
  position: absolute;
  left: 16px;
  top: 22px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

/* ================= SCROLL CONTAINER ================= */
.referral-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 16px 100px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-block-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.section-block-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin: 0 0 14px 4px;
  text-align: center;
}

/* ================= WHITE CARDS ================= */
.referral-master-card,
.earnings-master-card,
.how-it-works-card {
  background-color: var(--bg-card-white);
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(237, 242, 247, 0.7);
  box-sizing: border-box;
  width: 100%;
}

.referral-master-card {
  margin-top: -65px;
  z-index: 20;
  position: relative;
}

.referral-inner-brick {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

.referral-inner-brick:last-child {
  margin-bottom: 0;
}

.card-label {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 13px;
  margin: 0 auto 10px auto;
  text-align: center;
}

/* ================= INPUT ROWS ================= */
.copy-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-input-tint);
  border-radius: 10px;
  padding: 0 16px;
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  border: 1px solid rgba(226, 232, 240, 0.5);
}

.code-display {
  color: var(--text-dark);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.link-display {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-dark);
  font-size: 13.5px;
  font-family: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}

.copy-inline-icon {
  color: var(--bg-banner);
  font-size: 15px;
  cursor: pointer;
  padding-left: 10px;
  transition: opacity 0.1s ease;
}

.copy-inline-icon:active {
  opacity: 0.6;
}

/* ================= BUTTONS ================= */
.copy-action-btn {
  width: 100%;
  background-color: var(--bg-banner);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 0 4px 12px rgba(47, 109, 246, 0.2);
}

.copy-action-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* ================= EARNINGS TIERS ================= */
.earnings-master-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.earnings-tier-row {
  background-color: var(--bg-input-tint);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(226, 232, 240, 0.4);
}

.tier-badge-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.badge-gold {
  background-color: #e3efff; /* Subtle blue */
  color: var(--bg-banner);
}

.badge-silver {
  background-color: #f1f5f9;
  color: #64748b;
}

.tier-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tier-info-text h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dark);
}

.tier-info-text p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tier-value-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.reward-blue-pill {
  background-color: #dbeafe;
  color: var(--bg-banner);
}

/* ================= HOW IT WORKS ================= */
.how-it-works-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.how-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dark);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.how-header h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.how-header i {
  color: var(--bg-banner);
  font-size: 15px;
}

.step-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.step-check-icon {
  color: var(--bg-banner);
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-top: 1px;
}

.step-content p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.4;
}

.highlight-yellow {
  color: var(--accent-blue);
  font-weight: 600;
}


/* ================= GLOBAL CANVAS & HEADER ================= */
#earningsPage {
  background-color: #f4f7fe !important; /* Premium light canvas frame tint */
  color: #1e293b;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.recharge-page-container {
  padding: 75px 16px 40px 16px; /* Room for fixed top navbar header */
  max-width: 500px;
  margin: 0 auto;
  box-sizing: border-box;
}

.team-header-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #2f6df6 !important; /* Premium Blue Top Nav Panel Bar */
  color: white;
  z-index: 1000;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(47, 109, 246, 0.1);
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

.team-header-main span {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff !important;
}

.back-btn-white {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.back-btn-white:active {
  transform: translateY(-50%) scale(0.92);
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ================= 1. PROMOTIONAL REFERRAL TOP BANNER CARD ================= */
.premium-invite-banner {
  background: linear-gradient(135deg, #0b63ff 0%, #0046ca 100%);
  border-radius: 24px;
  padding: 22px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 99, 255, 0.25);
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.invite-header-brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-code-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 4px;
}

.invite-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.invite-code-string {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.invite-copy-pill {
  background: #2575fc;
  color: #ffffff;
  border: none;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.invite-desc-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* Float Gold Circle Accent Badge Graph Node */
.invite-floating-gold-orb {
  position: absolute;
  right: 20px;
  top: 45px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, #38bdf8 0%, #0369a1 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.invite-floating-gold-orb img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.invite-floating-gold-orb span {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 8px;
  border-radius: 10px;
  margin-top: 2px;
  font-weight: 600;
}

/* Social Media Row Links styling */
.invite-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.social-node-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
}

/* ================= 2. CENTRAL SIX-PACK SUMMARY GRID ================= */
.premium-sixpack-container {
  background: #ffffff;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  margin-bottom: 24px;
  border: 1px solid #eef2f6;
}

.sixpack-grid-structure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 16px;
  column-gap: 8px;
  text-align: center;
}

.sixpack-item-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sixpack-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
}

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

/* ================= 3. LEVEL CARD WRAPPERS ================= */
.tier-card-main {
  position: relative;
  border-radius: 20px;
  padding: 20px 16px 16px 16px;
  margin-bottom: 18px;
  cursor: pointer;
  border: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
  overflow: visible;
}

/* LEVEL 1: Pink Gradient Theme Frame Box */
.tier-card-main.level-theme-1 {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
}

/* LEVEL 2: Emerald Green Gradient Theme Frame Box */
.tier-card-main.level-theme-2 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* Absolute Pinned Medallion Ribbons */
.tier-floating-medal-ribbon {
  position: absolute;
  left: -6px;
  top: -8px;
  width: 44px;
  height: 44px;
  z-index: 10;
}

.tier-header-row-layout {
  display: flex;
  justify-content: flex-end; /* Push title text blocks rightward */
  align-items: center;
  margin-bottom: 14px;
}

.tier-badge-title-string {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inner Lightened Translucent Core Box Display Container */
.tier-inner-stats-plate {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 10px;
  margin-bottom: 14px;
}

.stats-grid-override-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  text-align: center;
}

.stat-inner-item-element {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-inner-value-string {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}

.stat-inner-label-string {
  color: rgba(255, 255, 255, 0.75);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* Action Execution Details Dark Trigger Button Layout Component node */
.tier-footer-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tier-action-dark-pill-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ================= USER DETAIL MEMBERS LIST CARD VIEW ================= */
.user-list-wrapper-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  border: 1px solid #f1f5f9;
  margin-top: 15px;
}

.tier-card {
  background: #f8fafc;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.tier-badge {
  background: #e0ebff;
  color: #2f6df6;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}

.inner-user-grid-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.inner-user-box {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 10px 4px;
}

.inner-user-value {
  color: #2f6df6;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

.inner-user-label {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
}

/* --- BENEFITS INFO PANEL DESCRIPTION WRAPPER --- */
.benefits-container {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  margin-top: 25px;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 15px rgba(0,0,0,0.01);
}

.benefits-title {
  color: #e11d48;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.benefit-item i {
  color: #2f6df6;
  font-size: 10px;
  margin-top: 3px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-canvas: #f4f6f8;
  --bg-banner-blue: #2f6df6; /* Primary brand blue */
  --bg-surface-white: #ffffff;
  --bg-input-tint: #f0f4f9;
  --text-dark: #1e293b;
  --text-grey-muted: #8a99ad;
  --accent-blue: #2f6df6; /* Updated from accent-yellow */
  --border-hairline: #edf2f7;
}

/* Master Fixed Sheet Configuration - VERTICAL SCROLL ENABLED */
.withdraw-page {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-canvas);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* ================= ROYAL BLUE BACKDROP MAIN BANNER HEADER ================= */
.withdraw-header-fixed {
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--bg-banner-blue);
  display: flex;
  flex-direction: column;
  padding: 20px 16px 0 16px;
  box-sizing: border-box;
  z-index: 10;
  flex-shrink: 0;
}

.withdraw-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.withdraw-header-fixed h2 {
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0;
}

.withdraw-back-btn-v2, .history-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  transition: opacity 0.15s ease;
}

.withdraw-back-btn-v2:active, .history-btn:active {
  opacity: 0.6;
}

/* ===== TRANSLUCENT INNER LAYER BALANCE BOX OVERLAY ===== */
.balance-display-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.balance-title {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

.balance-value {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ================= COMPACT SCROLLING WRAPPER FLOW CONTAINER ================= */
.recharge-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 16px 60px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
}

/* Generic Section Typography Labels */
.section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  text-align: left;
}

.section-label.group-title {
  margin-top: 8px;
  margin-bottom: -4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-grey-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-left: 2px;
}

/* ===== INTERSECTING TRANSACTION INPUT CARD STYLING ===== */
.input-card-ev {
  width: 100%;
  background-color: var(--bg-surface-white);
  border-radius: 16px;
  padding: 24px 16px 20px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: -35px;
  z-index: 30;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(237, 242, 247, 0.8);
}

/* Modern Input Module Framework */
.withdraw-input-box-ev {
  background-color: var(--bg-input-tint);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 52px;
  box-sizing: border-box;
}

.currency-icon {
  color: #a0aec0;
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
}

#withdrawAmountInput {
  background: transparent;
  border: none;
  color: var(--text-dark);
  font-size: 16px;
  font-family: inherit;
  font-weight: 400;
  outline: none;
  width: 100%;
  padding: 0;
}

#withdrawAmountInput::placeholder {
  color: #cbd5e1;
}

/* Dual Dynamic Calculator Parameter Rows */
.withdrawal-calculation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
  padding: 0 2px;
}

.calc-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-grey-muted);
}

/* PRIMARY SYSTEM EXECUTION CTA */
#withdrawSubmitBtn {
  width: 100%;
  background-color: var(--bg-banner-blue);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 20px;
  font-family: inherit;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 0 4px 14px rgba(47, 109, 246, 0.2);
}

#withdrawSubmitBtn:active {
  transform: scale(0.97);
  opacity: 0.92;
}

/* Secondary Action Anchor Links */
.max-btn-link {
  color: var(--bg-banner-blue);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin: 14px 0 0 0;
  cursor: pointer;
  display: inline-block;
  align-self: center;
}

.max-btn-link:active {
  opacity: 0.6;
}

/* ================= CONNECTED BANK SUMMARY INFO SYSTEM ================= */
.bank-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.bank-sub-card {
  background-color: var(--bg-surface-white);
  border: 1px solid rgba(237, 242, 247, 0.9);
  padding: 14px 16px;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}

.sub-card-label {
  color: var(--text-grey-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.sub-card-value {
  color: var(--text-dark);
  font-size: 13.5px;
  font-weight: 500;
}

/* ===== COHESIVE BANK LAYER EMPTY SLOTS UI ===== */
.bank-empty {
  width: 100%;
  background-color: var(--bg-surface-white);
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 32px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bank-empty-icon-wrap {
  color: #94a3b8;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bank-empty h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 6px 0;
}

.bank-empty p {
  font-size: 12px;
  color: var(--text-grey-muted);
  line-height: 1.45;
  margin: 0 0 16px 0;
  max-width: 280px;
}

.add-bank-btn {
  background-color: var(--bg-banner-blue);
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(47, 109, 246, 0.15);
  transition: transform 0.1s ease;
}

.add-bank-btn:active {
  transform: scale(0.96);
}

/* ================= MASTER RULES PLATFORM PLATFORM GRAPH ================= */
.rules-card-ev {
  width: 100%;
  background-color: var(--bg-surface-white);
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(237, 242, 247, 0.7);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.rules-title-ev {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bg-banner-blue);
  margin-bottom: 16px;
}

.info-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.info-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Icon Color Variant Matrices */
.info-icon.green-tick {
  background-color: #e2fbe8;
  color: #22c55e;
}

.info-icon.time-clock {
  background-color: #e3efff;
  color: var(--bg-banner-blue);
}

.info-list p {
  font-size: 13px;
  font-weight: 400;
  color: #475569;
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

/* FIXED FOCUS METRIC TARGET BLUE TOKEN HIGHLIGHT */
.highlight-yellow {
  color: var(--accent-blue);
  font-weight: 600;
}

/* High-resolution monitor responsive optimization layer */
@media (min-width: 576px) {
  .recharge-container {
    gap: 20px;
  }
  .input-card-ev {
    padding: 28px 24px;
  }
  .bank-info-grid {
    gap: 12px;
  }
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --app-canvas-gray: #f8fafc;    /* Premium soft white app backdrop track */
  --card-surface-white: #ffffff; /* Bright card sheets */
  --brand-primary-blue: #1d72f6; /* Premium royal active blue interaction hue */
  --text-dark-navy: #1e293b;     /* Primary bold copy typography shade */
  --text-slate-muted: #64748b;   /* Clean description gray */
  --border-subtle-line: #e2e8f0; /* Ultra-thin light dividers */
  
  /* Status Color Palette */
  --status-orange-text: #c2410c; /* Soft orange/amber text for bonus attributes */
  --status-orange-bg: #fff7ed;   /* Light amber pill filling tint */
}

/* Base Viewport Container Configuration */
.bank-page {
  background-color: var(--app-canvas-gray);
  min-height: 100vh;
  width: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark-navy);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   CLEAN FIXED HEADER
   ========================================================================== */
.records-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--card-surface-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  border-bottom: 1px solid var(--border-subtle-line);
  box-sizing: border-box;
}

.records-header h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text-dark-navy);
  letter-spacing: -0.01em;
}

/* Circular back button layout matching application standard styles */
.records-back-btn {
  position: absolute;
  left: 16px;
  background: transparent;
  border: none;
  color: var(--brand-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.15s ease;
  outline: none;
}

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

/* ==========================================================================
   RECORDS CONTENT MAIN CONTENT LAYOUT
   ========================================================================== */
.records-content-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 76px 16px 40px 16px; /* Offset clean space below fixed top navigation */
  box-sizing: border-box;
}

/* Total Transactions Summary Box */
.records-total-summary-card {
  width: 100%;
  background-color: var(--card-surface-white);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.015);
  text-align: left;
}

.summary-metric-label {
  font-size: 13px;
  color: var(--text-slate-muted);
  font-weight: 400;
  margin-bottom: 6px;
}

.summary-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark-navy);
  line-height: 1;
}

/* Dynamic Log Container Frame */
#recordsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  min-height: auto;
}

/* ==========================================================================
   RECORD CARD STYLING (MATCHING IMAGE SCREENSHOT LOG FOR LOG)
   ========================================================================== */
.record-card {
  width: 100%;
  background-color: var(--card-surface-white);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.015);
  display: flex;
  flex-direction: column;
  gap: 12px; /* Smooth secondary padding inside card structure split */
  text-align: left;
}

/* Top Horizontal Segment Alignment row layout details */
.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}

.record-amount-label {
  font-size: 13px;
  color: var(--text-slate-muted);
  font-weight: 400;
}

.record-amount-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark-navy);
}

/* Middle Row Alignment Data Layout Details */
.card-mid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.record-date-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-slate-muted);
  font-size: 12.5px;
}

.record-date-wrapper i {
  font-size: 12px;
  color: #94a3b8;
}

/* Bottom Descriptor Footer Line Segment Styles */
.card-bottom-row {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9; /* Flat light dividing indicator rule */
  font-size: 13px;
  color: var(--text-slate-muted);
  font-weight: 400;
}

/* ==========================================================================
   STATUS PILL REMAPPED FOR CLEAN APP UI TONE TRIMMINGS
   ========================================================================== */
.record-status-pill {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--status-orange-bg);
  color: var(--status-orange-text);
  letter-spacing: -0.01em;
}

/* Backup Transaction Status Indicators Styling */
.status-confirmed-green {
  color: #16a34a;
  background-color: #f0fdf4;
}

.status-failed-red {
  color: #dc2626;
  background-color: #fef2f2;
}

/* Media query updates scaling layout padding rules for tighter displays */
@media (max-width: 480px) {
  .records-content-container {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ================= MODAL OVERLAY ================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

/* ================= MODAL CARD ================= */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}

/* ================= HEADER ================= */
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheet-title {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
}

.close-sheet {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

/* ================= INNER CARD ================= */
.slim-card {
  background: #f7f7f7;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ================= PRODUCT ROW ================= */
.product-main-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-icon-container {
  width: 48px;
  height: 48px;
  background: #2D6BEF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  color: #000000;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================= PRODUCT DETAILS ================= */
.product-details strong {
  font-size: 17px;
  font-weight: 700;
  display: block;
  color: #111;
}

.product-details p {
  font-size: 14px;
  color: #444;
  margin-top: 3px;
}

/* ================= DIVIDER ================= */
.divider-line {
  height: 1px;
  background: #e5e5e5;
  margin: 14px 0;
}

/* ================= BALANCE ================= */
.account-balance-row {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* ================= PURCHASE BUTTON ================= */
.purchase-btn {
  background: #2D6BEF;
  color: white;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  margin: auto;
  box-shadow: 0 6px 15px rgba(47,72,236,0.4);
  transition: transform 0.15s ease;
}

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

/* ================= MOBILE ================= */
@media (max-width:480px){

.modal-card{
padding:20px;
}

.sheet-title{
font-size:20px;
}

.product-details strong{
font-size:16px;
}

.product-details p,
.account-balance-row{
font-size:13px;
}

.purchase-btn{
font-size:14px;
padding:10px 22px;
}

}

/* ================= PAGE WRAPPER ================= */
.investment-page {
  background: #f8fafc; /* Sleek, ultra-clean premium light gray canvas */
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important; 
  align-items: stretch; 
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ================= CLEAN LIGHT TOP NAV BAR ================= */
.investment-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #ffffff; /* Crisp white header line wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  border-bottom: 1px solid #f1f5f9; /* Flat, hairline divider line edge */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.investment-header h2 {
  margin: 0;
  font-size: 16px; /* Elegant, compact typography sizing */
  font-weight: 600;
  color: #0f172a; /* Slate dark title text color */
  font-family: 'Poppins', sans-serif;
}

/* Clean Back Button Navigation Icon Link */
.investment-back-btn {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #2f6df6; /* Using your exact premium blue accent color */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

/* ================= SUB-HEADER OVERVIEW PANEL ================= */
.investment-sub-header {
  /* 60px for fixed header height + 24px extra top padding space = 84px */
  padding: 84px 20px 16px 20px; 
  background: #ffffff; /* Smooth flat white base background flow */
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #f1f5f9;
}

.investment-sub-header h1 {
  margin: 0;
  font-size: 22px; /* Balanced font weight sizing—not overly bulky */
  font-weight: 700;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.02em;
}

.investment-sub-header p {
  margin: 4px 0 0 0;
  font-size: 13px; /* Clean tracking font spacing setup */
  color: #64748b; /* Soft gray secondary text line descriptor */
  line-height: 1.4;
}

/* ================= CARD WRAPPER & STREAM TILES ================= */
.card-wrapper {
  padding: 20px 16px 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Aligns cards dead-center in container space */
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Dynamic Active List Category Row Header Text */
.product-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* Reduced sizing to fit the sleek aesthetic profile */
  font-weight: 600;
  color: #334155; /* Refined text tone */
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  padding-left: 4px; 
  width: 100%;
  max-width: 500px; /* Perfectly locks widths alongside the card architecture widths */
  text-align: left;
  box-sizing: border-box;
}

/* Desktop screen alignment correction boundaries wrapper layers */
@media (min-width: 576px) {
  .product-section-title {
    margin: 0 auto 4px auto;
    padding-left: 0;
  }
}

/* ================= INVESTMENT SUB-HEADER FILTERS ================= */
.investment-sub-header {
  padding: 84px 16px 16px 16px; /* 60px Fixed Nav bar + breathing room top clearance */
  background: #f8fafc; /* Canvas surface background */
  width: 100%;
  box-sizing: border-box;
}

.investment-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  overflow-x: auto; /* Scrollable for responsive narrow screens */
  padding-bottom: 4px;
}

/* Hide native desktop browser scrollbars inside navigation filter row wrappers */
.investment-filter-row::-webkit-scrollbar {
  display: none;
}

.inv-filter-btn {
  background: #ffffff;
  color: #64748b; /* Soft charcoal text label for clean contrast */
  border: 1px solid #e2e8f0; /* Subtle card border edge lines */
  padding: 8px 20px;
  border-radius: 24px; /* Pill layout structure matching screenshot */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

/* 🚀 ACTIVE SELECTED TAB STATE - SWITCHED TO YOUR EXACT BLUE */
.inv-filter-btn.active {
  background: #2f6df6; /* Your premium electric brand blue */
  color: #ffffff; /* Sharp crisp white text for excellent readability */
  border-color: #2f6df6;
  box-shadow: 0 4px 12px rgba(47, 109, 246, 0.15); /* Sleek soft color depth glow */
}

:root {
  --bg-main: #f4f6f9;
  --primary-blue: #003399;
  --text-dark: #1a1a1a;
  --text-muted: #718096;
  --accent-green: #00a86b;
}

#dynamicProductList {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding-bottom: 120px !important; 
  margin-bottom: 60px !important;
  padding: 12px !important; /* Tight padding to edges */
  background: var(--bg-main) !important;
  width: 100%; /* Spans full width */
  box-sizing: border-box;
}

.mx-product-card {
  background-color: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  width: 100%;
  box-sizing: border-box;
}

.mx-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; /* Keeps elements compact */
}

.mx-plan-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 4px 0 !important;
}

.mx-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mx-main-price {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--primary-blue) !important;
}

.mx-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mx-grid-cell {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 12px;
}

.mx-total-revenue {
  text-align: center;
  padding: 10px 0;
}

.mx-total-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--primary-blue) !important;
  margin-top: 2px;
}

.mx-add-to-portfolio-btn {
  width: 100% !important;
  background: var(--primary-blue) !important;
  color: #ffffff !important;
  padding: 16px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}


/* This targets the <a> tag wrapping your settings item */
a.settings-link-wrapper {
    text-decoration: none !important; /* Forces the underline to disappear */
    color: inherit !important;        /* Forces the text to stay your app's color */
    display: block;                   /* Makes the whole row clickable */
    -webkit-tap-highlight-color: transparent; /* Removes the gray box on mobile tap */
}

/* Optional: Add a slight hover or active effect so the user knows it's a button */
a.settings-link-wrapper:active {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* ================= CUSTOM ALERT ================= */
.custom-alert {
  position: fixed !important;

  top: 50% !important;
  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

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

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

  max-width: 90%;
  width: max-content;

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

  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;

  z-index: 999999; /* higher than EVERYTHING */
}

.custom-alert.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) !important;
}
.custom-alert {
  right: auto;
  margin: 0;
}

.custom-alert.show {
  animation: alertPop 0.3s ease;
}

@keyframes alertPop {
  0% {
    transform: translate(-50%, -60%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}


/* ================= EMPTY STATE UI (PRODUCT STYLE) ================= */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  padding: 40px 20px; 
  margin: 15px;
  text-align: center;
  
  /* Card Design: Stretch like an ATM card */
  background: #ffffff;
  border-radius: 16px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  
  width: auto; 
  max-width: 100%; 
  box-sizing: border-box;
}

.empty-icon-circle {
  width: 70px; /* Slightly larger for product focus */
  height: 70px;
  background: #f8f9fa; /* Clean grey/white tint */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.empty-icon-circle i {
  font-size: 28px;
  color: #121b1e; /* Bold dark icon */
}

.empty-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Poppins', sans-serif;
}

.empty-subtitle {
  margin: 8px 0 25px 0;
  font-size: 14px;
  color: #777;
  font-weight: 400;
  line-height: 1.5;
  max-width: 280px; /* Keeps text centered and readable */
}

/* THE BUTTON - Full width button */
.browse-plans-btn {
  background: #000000; 
  color: #ffffff;
  border: none;
  width: 100%; 
  max-width: 300px; /* Adjusted for better card balance */
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

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


:root {
  --agromint-blue: #2f6df6; /* Primary brand blue */
  --light-blue-accent: #87aafb; /* Lighter shade for inner spinner contrast */
}

/* FULLSCREEN LIGHT OVERLAY */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cyber-container {
  position: relative;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.neon-ring {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Thinned borders */
.ring-spinner-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2.5px solid transparent;
  border-top: 2.5px solid var(--agromint-blue);
  border-right: 2.5px solid var(--agromint-blue);
  border-radius: 50%;
  animation: spin-clockwise 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ring-spinner-inner {
  position: absolute;
  width: 70%;
  height: 70%;
  border: 2.5px solid transparent;
  border-bottom: 2.5px solid var(--light-blue-accent);
  border-left: 2.5px solid var(--light-blue-accent);
  border-radius: 50%;
  animation: spin-counter-clockwise 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Clean blue text */
.processing-title {
  color: var(--agromint-blue);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin: 5px 0 12px 0;
  letter-spacing: 0.3px;
}

/* Mini Progress Bar Track */
.scan-line-wrapper {
  width: 90px;
  height: 3px;
  background: #eef2f6;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* Active Progress Filler using blue gradient */
.scan-line {
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, var(--light-blue-accent), var(--agromint-blue));
  border-radius: 10px;
  position: absolute;
  animation: scan-move 1.8s ease-in-out infinite;
}

/* ANIMATIONS */
@keyframes spin-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-counter-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes scan-move {
  0% { left: -35%; }
  50% { left: 100%; }
  100% { left: -35%; }
}

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

.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;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
    max-width: 320px;
    pointer-events: none;
}

/* Individual Toast Styling - White & Blue Theme */
.modern-toast {
    pointer-events: auto;
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    background: #ffffff; /* White Background */
    color: #1a1a1a;      /* Dark text for readability */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Softer shadow */
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* Blue Border Theme */
    border: 1px solid rgba(0, 51, 153, 0.1); 
    border-left: 5px solid #003399;           /* Solid Blue Accent */
    
    /* Animation */
    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;
}

/* Blue Accents for Icons */
.toast-icon {
    font-size: 18px;
    color: #003399; /* Makes every icon Blue */
}

/* Status Borders */
.toast-success { border-left-color: #003399; } /* Primary Blue */
.toast-error { border-left-color: #ff4d4d; }   /* Kept Red for contrast */
.toast-warning { border-left-color: #f6ad55; } /* Amber for Warning */

#signupContainer,
#loginContainer {
  display: none !important;
}