/* === Custom additions for improved dashboard and landing page styling === */

/* Style the time period selector buttons in the dashboard investment statistics */
.time-period-selector {
  display: flex;
  gap: 0.5rem;
}

.period-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--light-blue);
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.period-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

.period-btn.active {
  background: var(--accent-blue);
  color: var(--primary-blue);
  border-color: var(--accent-blue);
}

/* Style for login link in the navigation (appears as plain text by default) */
.nav-links a.login-link {
  color: var(--white);
  font-weight: 600;
  background: rgba(96, 165, 250, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-links a.login-link:hover {
  background: var(--accent-blue);
  color: var(--primary-blue);
}

/* Footer styling for landing page and general use */
.footer {
  background: var(--primary-blue);
  color: var(--white);
  padding: 4rem 0 2rem;
  position: relative;
}

.footer .footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.footer .footer-section h4 {
  margin-bottom: 1rem;
  color: var(--light-blue);
  font-size: 1rem;
  font-weight: 600;
}

.footer .footer-section p,
.footer .footer-section a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer .footer-section a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer .footer-section a:hover {
  color: var(--accent-blue);
}

.footer .footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.footer .footer-logo .logo-icon {
  background: var(--accent-blue);
  color: var(--primary-blue);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.25rem;
}

.footer .social-links a {
  color: var(--light-blue);
  margin-right: 0.75rem;
  font-size: 1.25rem;
  transition: color 0.3s ease;
}

.footer .social-links a:hover {
  color: var(--accent-blue);
}

.footer .contact-info p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.footer .contact-info i {
  color: var(--accent-blue);
}

.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}
/* Complete CSS styling for Zelus Investments platform */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-blue: #1e3a8a;
  --dark-blue: #1e40af;
  --light-blue: #60a5fa;
  --accent-blue: #3b82f6;
  --text-black: #000000;
  --text-gray: #374151;
  --text-light: #6b7280;
  --white: #ffffff;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-50: #f9fafb;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
  color: var(--text-black);
  min-height: 100vh;
  line-height: 1.6;
  /* Prevent horizontal scrolling on mobile devices. Without this rule
     some layouts could become horizontally oversized when elements
     (like the sidebar or charts) extend beyond the viewport width. */
  /* Prevent horizontal scrolling on mobile devices. This rule hides
     horizontal overflow but allows the body to expand naturally so
     that no content is cut off on narrow screens. */
  overflow-x: hidden;
}

/* Currency Ticker Styles */
.currency-ticker {
  background: var(--text-black);
  color: var(--white);
  padding: 0.5rem 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
  border-bottom: 1px solid var(--gray-200);
}

.ticker-content {
  display: flex;
  animation: scroll 30s linear infinite;
  white-space: nowrap;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 2rem;
  font-size: 0.875rem;
}

.ticker-item .pair {
  font-weight: 600;
}

.ticker-item .rate {
  color: var(--light-blue);
}

.ticker-item .change.positive {
  color: var(--success);
}

.ticker-item .change.negative {
  color: var(--error);
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Live Notifications Styles */
.live-notifications {
  position: fixed;
  top: 120px;
  right: 20px;
  z-index: 1000;
  max-width: 350px;
}

.notification {
  background: var(--white);
  color: var(--text-black);
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.5s ease-out;
  border-left: 4px solid var(--success);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}

.notification:hover {
  transform: translateX(-5px);
}

/* Added specific styling for withdrawal notifications */
.notification.withdrawal {
  border-left-color: var(--error);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), var(--white));
}

.notification.deposit {
  border-left-color: var(--success);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), var(--white));
}

.notification-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.notification-action {
  color: var(--text-black);
}

.notification-body {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-gray);
}

.notification-body strong {
  color: var(--text-black);
  font-weight: 600;
}

.notification-body em {
  color: var(--text-light);
  font-style: normal;
  font-size: 0.85rem;
}

.notification-time {
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: right;
  margin-top: 0.25rem;
}

.notification i {
  font-size: 1.1rem;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Navigation Styles */
.navbar {
  background: rgba(30, 58, 138, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  position: fixed;
  top: 40px; /* Adjusted for currency ticker */
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--light-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: var(--light-blue);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-links a:hover {
  color: var(--white);
  background: rgba(96, 165, 250, 0.1);
  transform: translateY(-1px);
}

.nav-links a:active {
  transform: translateY(0);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: var(--primary-blue);
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2rem;
    transition: left 0.3s ease;
  }

  .nav-links.active {
    left: 0;
  }

  .mobile-menu-btn {
    display: block;
  }

  .currency-ticker {
    font-size: 0.75rem;
  }

  .ticker-item {
    margin-right: 1rem;
  }

  .live-notifications {
    right: 10px;
    max-width: 280px;
  }

  .notification {
    padding: 0.75rem;
  }

  .notification-body {
    font-size: 0.85rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .form-container .btn {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

/* Main Content */
.main-content {
  margin-top: 120px; /* Adjusted for currency ticker and navbar */
  min-height: calc(100vh - 120px);
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--white);
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--white) 0%, var(--light-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Statistics Styles */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.stat {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.stat h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--light-blue);
  margin-bottom: 0.5rem;
}

.stat p {
  color: var(--white);
  opacity: 0.9;
  font-weight: 500;
}

/* Market Overview Styles */
.market-overview {
  padding: 4rem 1rem;
  background: var(--gray-100);
}

.market-overview h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--text-black);
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.market-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.market-card:hover {
  transform: translateY(-5px);
}

.market-icon {
  width: 60px;
  height: 60px;
  background: var(--light-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

.market-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-black);
  margin-bottom: 0.5rem;
}

.market-change {
  font-weight: 600;
  font-size: 0.9rem;
}

.market-change.positive {
  color: var(--success);
}

.market-change.negative {
  color: var(--error);
}

/* Investment Strategies Styles */
.investment-strategies {
  padding: 4rem 1rem;
  background: var(--white);
}

.investment-strategies h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--text-black);
}

.strategies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.strategy-card {
  background: var(--gray-100);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease;
}

.strategy-card:hover {
  transform: translateY(-5px);
}

.strategy-card.featured {
  background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
  color: var(--white);
}

.strategy-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.strategy-icon {
  width: 60px;
  height: 60px;
  background: var(--light-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

.strategy-card.featured .strategy-icon {
  background: var(--white);
}

.strategy-return {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 1rem;
}

.strategy-card ul {
  text-align: left;
  margin-top: 1rem;
  list-style: none;
}

.strategy-card li {
  padding: 0.25rem 0;
  position: relative;
  padding-left: 1rem;
}

.strategy-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: bold;
}

/* Features Section */
.features {
  padding: 4rem 1rem;
  background: var(--gray-100); /* Changed background color */
}

.features h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--text-black);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--gray-100);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: var(--light-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

/* Forms */
.form-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-black);
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--light-blue);
}

.form-control select {
  cursor: pointer;
}

/* Deposit and Withdrawal Specific Styles */
.balance-card {
  background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
  color: var(--white);
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  text-align: center;
}

.balance-info h3 {
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.balance-amount {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
}

.deposit-form-container,
.withdrawal-form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.form-section {
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-section h3 {
  margin-bottom: 1.5rem;
  color: var(--text-black);
}

/* Enhanced Crypto Deposit Styles */
.crypto-selection-container {
  margin: 2rem 0;
}

.crypto-selection-container h3 {
  margin-bottom: 1.5rem;
  color: var(--text-black);
  font-weight: 600;
}

.crypto-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.crypto-option {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.crypto-option:hover {
  border-color: var(--light-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.crypto-option.active {
  border-color: var(--primary-blue);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 197, 253, 0.05));
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.crypto-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--white);
  flex-shrink: 0;
}

.crypto-icon.bitcoin {
  background: linear-gradient(135deg, #f7931a, #ff9500);
}

.crypto-icon.ethereum {
  background: linear-gradient(135deg, #627eea, #8a92b2);
}

.crypto-icon.usdt {
  background: linear-gradient(135deg, #26a17b, #50af95);
}

.crypto-icon.bnb {
  background: linear-gradient(135deg, #f3ba2f, #f0b90b);
}

.crypto-icon.litecoin {
  background: linear-gradient(135deg, #bfbbbb, #a6a6a6);
}

.crypto-icon.dogecoin {
  background: linear-gradient(135deg, #c2a633, #ba9f33);
}

.crypto-icon.cardano {
  background: linear-gradient(135deg, #0033ad, #1e3a8a);
}

.crypto-info {
  flex: 1;
}

.crypto-info h4 {
  margin: 0 0 0.25rem 0;
  color: var(--text-black);
  font-weight: 600;
}

.crypto-info p {
  margin: 0 0 0.25rem 0;
  color: var(--text-gray);
  font-size: 0.875rem;
}

.crypto-network {
  font-size: 0.75rem;
  color: var(--light-blue);
  font-weight: 500;
  background: rgba(59, 130, 246, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
}

.crypto-rate {
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 1rem;
  text-align: right;
}

.payment-details {
  background: var(--white);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

.payment-details h3 {
  margin-bottom: 2rem;
  color: var(--text-black);
  font-weight: 600;
}

.payment-info {
  display: grid;
  gap: 2rem;
}

.payment-address {
  background: var(--gray-50);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.address-header label {
  font-weight: 600;
  color: var(--text-black);
}

.network-info {
  text-align: right;
}

.network-name {
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 0.875rem;
}

.network-details {
  display: block;
  font-size: 0.75rem;
  color: var(--text-gray);
  margin-top: 0.25rem;
}

.address-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.address-container input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  font-family: monospace;
  font-size: 0.875rem;
}

.copy-btn {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.copy-btn:hover {
  background: var(--dark-blue);
}

.copy-btn.copied {
  background: #10b981;
}

.address-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  color: #dc2626;
  font-size: 0.875rem;
}

.payment-amount {
  text-align: center;
  padding: 1.5rem;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.payment-amount label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-black);
}

.amount-display {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
  font-family: monospace;
}

.amount-usd {
  font-size: 1rem;
  color: var(--text-gray);
}

.qr-code-section {
  text-align: center;
}

.qr-code-section label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--text-black);
}

.qr-code {
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}

.qr-placeholder {
  text-align: center;
  color: var(--text-gray);
}

.qr-placeholder i {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  display: block;
}

.qr-placeholder p {
  margin: 0.5rem 0;
  font-weight: 500;
}

.qr-placeholder small {
  font-size: 0.75rem;
  color: var(--text-light);
  font-family: monospace;
}

.qr-instruction {
  color: var(--text-gray);
  font-size: 0.875rem;
  margin: 0;
}

.transaction-confirmation {
  background: var(--gray-50);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.transaction-confirmation h4 {
  margin-bottom: 1rem;
  color: var(--text-black);
  font-weight: 600;
}

.confirmation-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.step-content h5 {
  margin: 0 0 0.25rem 0;
  color: var(--text-black);
  font-weight: 600;
}

.step-content p {
  margin: 0;
  color: var(--text-gray);
  font-size: 0.875rem;
}

.payment-instructions {
  background: var(--gray-50);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.payment-instructions h4 {
  margin-bottom: 1rem;
  color: var(--text-black);
  font-weight: 600;
}

.payment-instructions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-instructions li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.payment-instructions li:last-child {
  margin-bottom: 0;
}

.payment-instructions li i {
  color: #10b981;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.payment-instructions li i.fa-exclamation-triangle {
  color: #f59e0b;
}

@media (max-width: 768px) {
  .crypto-options {
    grid-template-columns: 1fr;
  }

  .crypto-option {
    padding: 1rem;
  }

  .crypto-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .payment-info {
    gap: 1.5rem;
  }

  .address-container {
    flex-direction: column;
  }

  .copy-btn {
    width: 100%;
    justify-content: center;
  }

  .confirmation-steps {
    gap: 0.75rem;
  }

  .step {
    gap: 0.75rem;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}

/* Updated dashboard styles to use dark theme instead of bright white backgrounds */
.dashboard {
  padding: 2rem 1rem;
  background: var(--primary-blue);
  min-height: calc(100vh - 80px);
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
  border-left: 4px solid #8b5cf6;
}

.stat-card.secondary {
  border-left: 4px solid #06b6d4;
}

.stat-card.tertiary {
  border-left: 4px solid #10b981;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.stat-card.primary .stat-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.stat-card.secondary .stat-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}

.stat-card.tertiary .stat-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.stat-header h3 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.stat-change {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-change.positive {
  color: #10b981;
}

.stat-change.negative {
  color: #ef4444;
}

/* Content Grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Enhanced Investment Details and Statistics with proper Zelus dark theme styling */
.content-card {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.content-card:hover {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
}

.card-header h3 {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.card-header p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin: 0;
}

.card-menu-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.card-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

/* Investment Details */
.investment-summary {
  margin-bottom: 2rem;
}

.total-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.growth-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.growth-percentage {
  color: #10b981;
  font-weight: 600;
}

.growth-icon {
  color: #10b981;
  font-size: 0.875rem;
}

.growth-period {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.investment-breakdown {
  margin-bottom: 1.5rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.breakdown-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.breakdown-color.money-market {
  background: #8b5cf6;
}

.breakdown-color.stocks {
  background: #06b6d4;
}

.breakdown-color.bonds {
  background: #10b981;
}

.breakdown-color.sharia {
  background: #6b7280;
}

.breakdown-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.breakdown-label {
  color: var(--white);
  font-weight: 500;
}

.breakdown-amount {
  color: var(--white);
  font-weight: 600;
}

.breakdown-percentage {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  min-width: 40px;
  text-align: right;
}

.investment-progress {
  margin-top: 1rem;
}

.progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.progress-segment {
  height: 100%;
}

.progress-segment.money-market {
  background: #8b5cf6;
}

.progress-segment.stocks {
  background: #06b6d4;
}

.progress-segment.bonds {
  background: #10b981;
}

.progress-segment.sharia {
  background: #6b7280;
}

/* Chart Styles */
.chart-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.chart-tab {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.chart-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
}

.chart-tab.active {
  background: var(--light-blue);
  color: var(--white);
  border-color: var(--light-blue);
}

.chart-container {
  height: 300px;
  margin-bottom: 1.5rem;
  position: relative;
}

.investment-chart {
  width: 100%;
  height: 100%;
}

.chart-legend {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

.legend-value {
  color: var(--white);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Quick Actions */
.quick-actions-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.action-card {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-card.deposit {
  border-left: 4px solid #10b981;
}

.action-card.withdrawal {
  border-left: 4px solid #ef4444;
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.action-card.deposit .action-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.action-card.withdrawal .action-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.action-content {
  flex: 1;
}

.action-content h4 {
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.action-content p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin: 0;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(2px);
}

/* Dashboard Layout */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background: var(--primary-blue);
}

/* Dashboard Sidebar */
.dashboard-sidebar {
  /* Reduce the default sidebar width slightly so that the collapsed
     off‑canvas behaviour works consistently across all pages.  The
     width is now 260px instead of 280px, and the main content
     margin has been adjusted accordingly. */
  width: 260px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1000;
  overflow-y: auto;
}

.sidebar-header {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--light-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
}

/* Sidebar Navigation */
.sidebar-nav {
  padding: 1rem 0;
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin-bottom: 0.25rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active .nav-link {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.active .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--light-blue);
}

.nav-badge {
  background: var(--light-blue);
  color: var(--white);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-left: auto;
}

/* Added logout button styling to sidebar navigation */
.nav-item.logout {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}

.logout-link {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s ease;
}

.logout-link:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.logout-link i {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.logout-link:hover i {
  color: #ef4444;
}

/* Dashboard Main Content */
/* The main content needs to account for the narrower sidebar on larger
   screens.  The margin-left now matches the sidebar width (260px).
 */
.dashboard-main {
  flex: 1;
  margin-left: 260px;
  background: var(--primary-blue);
  min-height: 100vh;
}

/* Responsive sidebar behaviour */
@media (max-width: 768px) {
  /* On small screens hide the sidebar off-canvas by default using left positioning */
  .dashboard-sidebar {
    /* On small screens the sidebar is hidden off‑canvas to the left.  The
       negative left value must match the sidebar width exactly so that it
       doesn’t peek out from the edge and cut off content.  Previously
       it was set to -280px while the width was 260px, which left a
       20px strip visible. */
    width: 260px;
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    transition: left 0.3s ease;
  }
  .dashboard-sidebar.open {
    left: 0;
  }
  /* Remove left margin from main content on small screens */
  .dashboard-main {
    margin-left: 0;
  }
  /* Show the sidebar toggle button */
  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    margin-right: 1rem;
    cursor: pointer;
  }
}

/*
 * Display the hamburger sidebar toggle button by default. It
 * will be hidden again on larger viewports via a media query
 * defined below. By declaring the default state as visible,
 * users on tablet‑sized devices or when the browser is zoomed
 * in will still see the toggle icon. Without this override,
 * some users reported that the toggle was never rendered.
 */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  margin-right: 1rem;
  cursor: pointer;
}

/* Hide the sidebar toggle on larger screens (desktops) so it
 * doesn’t clutter the header when the sidebar is always visible.
 */
@media (min-width: 769px) {
  .sidebar-toggle {
    display: none;
  }
}

/* Dashboard Header */
.dashboard-header {
  padding: 2rem 2rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-left h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.header-left p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  color: var(--white);
  font-weight: 500;
}

/* Dashboard Content */
.dashboard-content {
  padding: 2rem;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
  border-left: 4px solid #8b5cf6;
}

.stat-card.secondary {
  border-left: 4px solid #06b6d4;
}

.stat-card.tertiary {
  border-left: 4px solid #10b981;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.stat-card.primary .stat-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.stat-card.secondary .stat-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}

.stat-card.tertiary .stat-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.stat-header h3 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.stat-change {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-change.positive {
  color: #10b981;
}

.stat-change.negative {
  color: #ef4444;
}

/* Content Grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Investment Details Enhanced Styling */
.investment-details {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.investment-details .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
}

.investment-details .header-content h3 {
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.investment-details .header-content h3::before {
  content: "💼";
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.investment-details .header-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.investment-total {
  text-align: center;
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  border-radius: 20px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  position: relative;
  overflow: hidden;
}

.investment-total::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.total-amount {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1rem;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.growth-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 30px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.growth-percentage {
  color: #10b981;
  font-weight: 800;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.growth-icon {
  color: #10b981;
  font-size: 1.1rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

.growth-period {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 600;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.breakdown-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, var(--light-blue), var(--accent-blue));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.breakdown-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(8px);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.breakdown-item:hover::before {
  opacity: 1;
}

.breakdown-visual {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 100px;
}

.breakdown-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.breakdown-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.breakdown-item:hover .breakdown-icon {
  background: rgba(96, 165, 250, 0.2);
  color: var(--light-blue);
  transform: scale(1.1);
}

.breakdown-label {
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.breakdown-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
}

.breakdown-amount {
  color: var(--white);
  font-weight: 800;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.breakdown-percentage {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  background: rgba(96, 165, 250, 0.15);
  border-radius: 15px;
  border: 1px solid rgba(96, 165, 250, 0.2);
}

/* Investment Statistics Enhanced Styling */
.investment-statistics {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.investment-statistics .header-content h3 {
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.investment-statistics .header-content h3::before {
  content: "📊";
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.investment-statistics .header-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.chart-container {
  height: 350px;
  margin-bottom: 2rem;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.chart-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--light-blue), var(--accent-blue), var(--light-blue));
  opacity: 0.6;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 1;
  min-width: 220px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.legend-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--light-blue), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.legend-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.legend-item:hover::before {
  opacity: 1;
}

.legend-label {
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-value {
  color: var(--white);
  font-weight: 800;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s ease;
}

.summary-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(96, 165, 250, 0.2);
  color: var(--light-blue);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

.summary-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
}

.summary-value {
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness for investment sections */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .breakdown-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .breakdown-info {
    width: 100%;
  }

  .chart-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .chart-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .legend-item {
    min-width: 100%;
  }

  .performance-summary {
    grid-template-columns: 1fr;
  }

  .total-amount {
    font-size: 2.5rem;
  }
}

/* Enhanced Recent Deposits Professional Styling */
.recent-deposits {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 3rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.recent-deposits h3 {
  color: var(--text-black);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recent-deposits h3::before {
  content: "📊";
  font-size: 1.25rem;
}

.deposits-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.transaction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.transaction-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: rgba(96, 165, 250, 0.3);
}

.transaction-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.transaction-type {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-black);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.transaction-type::before {
  content: "💰";
  font-size: 1rem;
}

.transaction-method {
  font-size: 0.875rem;
  color: var(--text-gray);
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  background: rgba(96, 165, 250, 0.1);
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.transaction-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

.transaction-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.transaction-amount::before {
  content: "↗";
  font-size: 1rem;
  color: #10b981;
}

.transaction-status {
  padding: 0.375rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.transaction-status.status-pending {
  background: rgba(251, 191, 36, 0.1);
  color: #d97706;
  border-color: rgba(251, 191, 36, 0.3);
}

.transaction-status.status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

.transaction-status.status-rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
}

.transaction-date {
  font-size: 0.875rem;
  color: var(--text-gray);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.transaction-date::before {
  content: "📅";
  font-size: 0.875rem;
}

/* Empty state styling */
.deposits-list .text-center {
  padding: 3rem 2rem;
  color: var(--text-gray);
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  border: 2px dashed rgba(96, 165, 250, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.deposits-list .text-center::before {
  content: "💳";
  font-size: 3rem;
}

/* Loading spinner for deposits */
.deposits-list .loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  font-size: 1.5rem;
}

.deposits-list .loading-spinner::after {
  content: "⏳";
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobile responsiveness for transaction items */
@media (max-width: 768px) {
  .transaction-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
  }

  .transaction-details {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .transaction-amount {
    font-size: 1.1rem;
  }

  .recent-deposits {
    padding: 1.5rem;
    margin-top: 2rem;
  }

  .recent-deposits h3 {
    font-size: 1.25rem;
  }
}

/* Enhanced Investment Details Professional Styling */
.investment-details .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content h3 {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-content h3::before {
  content: "💼";
  font-size: 1.25rem;
}

.header-content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.investment-total {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.total-amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.growth-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 25px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  display: inline-flex;
}

.growth-percentage {
  color: #10b981;
  font-weight: 700;
  font-size: 1.1rem;
}

.growth-icon {
  color: #10b981;
  font-size: 1rem;
}

.growth-period {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
}

.investment-breakdown {
  margin-bottom: 2rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.breakdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
  border-color: rgba(255, 255, 255, 0.1);
}

.breakdown-item:last-child {
  margin-bottom: 0;
}

.breakdown-visual {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 80px;
}

.breakdown-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.breakdown-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.breakdown-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.breakdown-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.breakdown-label {
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
}

.breakdown-description {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.breakdown-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Adding comprehensive professional styling for terms and conditions page */
/* Terms and Conditions Page Styles */
.terms-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
  padding: 2rem 0;
}

.terms-page .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

.terms-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.terms-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.terms-header h1 i {
  color: var(--light-blue);
  font-size: 2rem;
}

.terms-header .last-updated {
  color: var(--light-blue);
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.9;
}

.terms-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.terms-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-200);
}

.terms-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.terms-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--light-blue);
}

.terms-section h2 i {
  color: var(--light-blue);
  font-size: 1.5rem;
}

.terms-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-blue);
  margin: 1.5rem 0 1rem 0;
}

.terms-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-gray);
  margin-bottom: 1rem;
  text-align: justify;
}

.terms-section ul {
  margin: 1rem 0 1rem 2rem;
  color: var(--text-gray);
}

.terms-section li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  position: relative;
}

.terms-section li::marker {
  color: var(--light-blue);
  font-weight: 600;
}

.contact-info {
  background: var(--gray-50);
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid var(--light-blue);
  margin-top: 1rem;
}

.contact-info p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.contact-info strong {
  color: var(--primary-blue);
  font-weight: 600;
}

/* Terms page responsive design */
@media (max-width: 768px) {
  .terms-page .container {
    padding: 0 0.5rem;
  }

  .terms-header {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .terms-header h1 {
    font-size: 2rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  .terms-content {
    padding: 2rem 1.5rem;
  }

  .terms-section h2 {
    font-size: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .terms-section ul {
    margin-left: 1rem;
  }
}

/* Enhanced footer for terms page */
.terms-page .footer {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 3rem;
}

.terms-page .footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.terms-page .footer-section h3,
.terms-page .footer-section h4 {
  color: var(--white);
  margin-bottom: 1rem;
}

.terms-page .footer-section p,
.terms-page .footer-section a {
  color: var(--light-blue);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.terms-page .footer-section a:hover {
  opacity: 1;
  color: var(--white);
}

.terms-page .footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.terms-page .footer-section li {
  margin-bottom: 0.5rem;
}

.terms-page .footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--light-blue);
  opacity: 0.8;
}

/* ------------------------------------------------------------------
   Custom styles for payment page, dashboard charts, savings plans and
   mutual funds. These classes were previously undefined, which left
   the pages unstyled.  By appending these rules at the end of the
   stylesheet we avoid interfering with existing selectors while
   providing a coherent look and feel that matches the rest of the
   Zelus Investments platform.  The colour palette and elevations
   mirror the dashboard cards and statistics components defined above.
   ------------------------------------------------------------------ */

/* ====== Payment (Credit Card) Page ====== */
.payment-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100vh;
  color: var(--text-black);
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  background: rgba(30, 58, 138, 0.9);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.payment-header .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.payment-header .security-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--light-blue);
}

.payment-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.payment-summary {
  flex: 1 1 300px;
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.payment-summary h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.payment-summary .amount-display {
  font-size: 2.5rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--primary-blue);
}

.payment-summary .payment-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--text-gray);
}

.payment-summary .payment-details .detail-row {
  display: flex;
  justify-content: space-between;
}

.payment-summary .payment-details .total span:last-child {
  font-weight: 700;
  color: var(--text-black);
}

.payment-form-container {
  flex: 2 1 480px;
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card-preview {
  display: flex;
  justify-content: center;
}

.credit-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
}

.credit-card .card-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(30, 58, 138, 0.3));
  backdrop-filter: blur(4px);
}

.credit-card .card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.credit-card .card-chip {
  width: 50px;
  height: 35px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.credit-card .card-number {
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  font-family: monospace;
}

.credit-card .card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.credit-card .card-info .label {
  display: block;
  font-size: 0.65rem;
  opacity: 0.7;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.credit-card .card-brand {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  font-size: 1.75rem;
  opacity: 0.8;
}

.payment-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.payment-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.payment-form label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-black);
}

.payment-form input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text-black);
  background: var(--gray-50);
}

.payment-form input:focus {
  outline: none;
  border-color: var(--light-blue);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
  background: var(--white);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.card-types {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--gray-400);
  font-size: 1.25rem;
}

.cvv-help {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--gray-400);
  cursor: default;
}

.cvv-help .tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: var(--white);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.cvv-help:hover .tooltip {
  opacity: 1;
}

.billing-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 0.75rem;
}

.security-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-gray);
}

.security-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pay-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  background: linear-gradient(135deg, var(--light-blue), var(--accent-blue));
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pay-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.payment-spinner.hidden {
  display: none;
}

.payment-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.85rem;
  color: var(--white);
}

.payment-footer .footer-links {
  display: flex;
  gap: 1.5rem;
}

.payment-footer .footer-links a {
  color: var(--light-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.payment-footer .footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.payment-footer .footer-security {
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive styles for payment page */
@media (max-width: 768px) {
  .payment-content {
    flex-direction: column;
  }
  .payment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ====== Dashboard Chart Sections ====== */
.chart-section {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ====== Forex Trading Chart ====== */
/* Style the live forex trading chart similar to dashboard chart sections */
.forex-trading-chart {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.forex-trading-chart .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--white);
}

.forex-trading-chart .chart-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--light-blue);
  margin: 0;
}

.forex-trading-chart .chart-header p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.forex-trading-chart .trading-interface {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Controls styling */
.forex-trading-chart .chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.forex-trading-chart .chart-select,
.forex-trading-chart .timeframe-btn,
.forex-trading-chart .tool-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.forex-trading-chart .chart-select:hover,
.forex-trading-chart .timeframe-btn:hover,
.forex-trading-chart .tool-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.forex-trading-chart .timeframe-btn.active {
  background: var(--accent-blue);
  color: var(--primary-blue);
}

.forex-trading-chart .price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--white);
}

.forex-trading-chart .current-price {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 1rem;
}

.forex-trading-chart .current-price .price-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.forex-trading-chart .price-change.positive {
  color: var(--success);
}

.forex-trading-chart .price-change.negative {
  color: var(--error);
}

.forex-trading-chart .price-details {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
}

.forex-trading-chart .price-detail .label {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 0.25rem;
}

.forex-trading-chart .price-detail .value {
  font-weight: 500;
}

.forex-trading-chart .chart-canvas-container {
  position: relative;
  width: 100%;
  height: 320px;
  margin-bottom: 1rem;
}

.forex-trading-chart .chart-indicators {
  margin-bottom: 1.5rem;
}

.forex-trading-chart .indicator-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.forex-trading-chart .indicator-tab {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
}

.forex-trading-chart .indicator-tab.active,
.forex-trading-chart .indicator-tab:hover {
  background: var(--accent-blue);
  color: var(--primary-blue);
}

.forex-trading-chart .indicator-values {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.forex-trading-chart .market-depth {
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  color: var(--white);
}

.forex-trading-chart .depth-header h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--light-blue);
}

.forex-trading-chart .depth-content {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.forex-trading-chart .bids-section,
.forex-trading-chart .asks-section {
  flex: 1;
}

.forex-trading-chart .bids-section h5,
.forex-trading-chart .asks-section h5 {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-blue);
}

.forex-trading-chart .depth-levels {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.forex-trading-chart .depth-level {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

.forex-trading-chart .depth-level.bid {
  color: var(--success);
}

.forex-trading-chart .depth-level.ask {
  color: var(--error);
}

/* ====== Portfolio Table Styles ====== */
.portfolio-table table {
  width: 100%;
  border-collapse: collapse;
}

.portfolio-table th,
.portfolio-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.9rem;
}

.portfolio-table thead th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--light-blue);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.portfolio-table tbody td {
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.portfolio-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ====== Toast Message Styles ====== */
.message {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #fff;
  z-index: 1050;
  opacity: 0.95;
}

.message.success {
  background-color: var(--success);
}

.message.error {
  background-color: var(--error);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--white);
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.chart-price-info {
  text-align: right;
}

.chart-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--light-blue);
}

.chart-change {
  font-size: 0.875rem;
  font-weight: 500;
}

.chart-change.positive {
  color: var(--success);
}

.chart-change.negative {
  color: var(--error);
}

.chart-description {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 320px;
  margin-bottom: 1.5rem;
}

.chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  color: var(--white);
}

.chart-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.chart-stat-value {
  font-size: 1rem;
  font-weight: 600;
}

/* ====== Buttons ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--light-blue), var(--accent-blue));
  color: var(--primary-blue);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-blue), var(--light-blue));
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary button styling (e.g. Login in hero CTA) */
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--light-blue);
  border: 1px solid var(--light-blue);
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background: var(--light-blue);
  color: var(--primary-blue);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ====== Savings Plans ====== */
.savings-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.plan-card {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--white);
  transition: transform 0.2s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.plan-card.featured {
  border-left: 4px solid #8b5cf6;
}
.plan-card.premium {
  border-left: 4px solid #06b6d4;
}
.plan-card.flexible {
  border-left: 4px solid #10b981;
}
.plan-card.basic {
  border-left: 4px solid #f59e0b;
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning);
  color: var(--white);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.plan-card.featured .plan-badge {
  background: #8b5cf6;
}
.plan-card.premium .plan-badge {
  background: #06b6d4;
}
.plan-card.flexible .plan-badge {
  background: #10b981;
}
.plan-card.basic .plan-badge {
  background: #f59e0b;
}

.plan-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.plan-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary-blue);
  background: rgba(96, 165, 250, 0.2);
}

.plan-card.featured .plan-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}
.plan-card.premium .plan-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}
.plan-card.flexible .plan-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.plan-card.basic .plan-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.plan-rate {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--success);
}

.plan-description p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.plan-features ul {
  list-style: none;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan-features i {
  color: var(--success);
}

.plan-stats {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.plan-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.plan-stats .stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--light-blue);
}

.plan-stats .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ====== Mutual Funds ====== */
.funds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.fund-card {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--white);
  transition: transform 0.2s ease;
}

.fund-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.fund-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning);
  color: var(--white);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.fund-card.growth-fund .fund-badge {
  background: #3b82f6;
}
.fund-card.balanced-fund .fund-badge {
  background: #06b6d4;
}
.fund-card.tech-fund .fund-badge {
  background: #10b981;
}
.fund-card.income-fund .fund-badge {
  background: #8b5cf6;
}

.fund-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.fund-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary-blue);
  background: rgba(96, 165, 250, 0.2);
}

.fund-card.growth-fund .fund-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}
.fund-card.balanced-fund .fund-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}
.fund-card.tech-fund .fund-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.fund-card.income-fund .fund-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.fund-type {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.fund-performance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.performance-chart {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.performance-chart .chart-bar {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--light-blue), var(--accent-blue));
}

.fund-return {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--success);
}

.fund-return.negative {
  color: var(--error);
}

.fund-period {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.fund-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.detail-label {
  color: rgba(255, 255, 255, 0.6);
}

.detail-value {
  font-weight: 600;
  color: var(--light-blue);
}

.risk-high {
  color: #ef4444;
}
.risk-medium {
  color: #f59e0b;
}
.risk-low {
  color: #10b981;
}

.fund-description p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* ensure buttons in fund cards fill width */
.fund-card button {
  margin-top: auto;
}

/* Category tabs for mutual funds */
.category-tabs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.category-tab {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.category-tab.active,
.category-tab:hover {
  background: var(--light-blue);
  color: var(--primary-blue);
}

/* ====== Form Messages for Payment ====== */
.form-message {
  display: none;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.form-message.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.form-message.success {
  display: block;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ====== Transactions Table Styles ====== */
.transactions-table table {
  width: 100%;
  border-collapse: collapse;
}

.transactions-table th,
.transactions-table td {
  padding: 0.75rem 1rem;
  text-align: left;
}

.transactions-table thead th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--light-blue);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.transactions-table tbody td {
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

.transactions-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.transactions-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Status badges for transactions */
.transaction-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid;
}

.transaction-status.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.transaction-status.status-approved,
.transaction-status.status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.transaction-status.status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* ====== Password visibility toggle ====== */
.password-wrapper {
  position: relative;
}

.password-wrapper .toggle-password {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--gray-400);
  font-size: 1rem;
}

.password-wrapper .toggle-password:hover {
  color: var(--primary-blue);
}

/* ====== Misc ====== */
/* Adjust some typography defaults for consistency */
h3 {
  margin: 0;
  font-weight: 600;
}

h4 {
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
  line-height: 1.5;
}

/* =========================================================
   Additional styling for lower homepage sections and user pages
   These rules style the testimonials, performance charts,
   how-it-works and FAQ sections, footer, transaction filters
   and table, as well as settings navigation and password
   visibility toggles.  They unify the look and feel with
   card-based layouts, responsive grids and consistent
   typography and colouring.
   ========================================================= */

/* === Testimonials Section === */
.testimonials {
  padding: 4rem 0;
  background: var(--gray-50);
}

.testimonials h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary-blue);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: var(--white);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.testimonial-rating i {
  color: var(--warning);
  margin-right: 0.25rem;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.testimonial-author strong {
  font-size: 1rem;
  color: var(--text-black);
}

/* === Performance Charts Section === */
.performance-charts {
  /* Updated styling for performance charts to match the dark themed dashboard */
  padding: 4rem 0;
  /* Use the same deep blue gradient as the rest of the site */
  background: linear-gradient(180deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
}

.performance-charts h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--white);
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.chart-card {
  /* Match dashboard chart card styling */
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.chart-card h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--light-blue);
}

.chart-placeholder {
  width: 100%;
  height: 200px;
  /* Wrapper holds the nested .chart-bars container */
  display: block;
}

/* Ensure the bar container inside performance charts uses flexbox for equal-width bars */
.chart-placeholder .chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 100%;
}

.chart-placeholder .bar {
  flex: 1 1 0;
  /* Use a gradient fill for bars to stand out on dark background */
  background: linear-gradient(135deg, var(--light-blue), var(--accent-blue));
  position: relative;
  border-radius: 4px 4px 0 0;
}

.chart-placeholder .bar span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  padding-bottom: 0.25rem;
}

.pie-chart {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 1rem auto;
  border-radius: 50%;
  overflow: hidden;
}

.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 50%, 100% 0, 50% 0);
  transform-origin: center;
}

.pie-segment.stocks {
  background: var(--primary-blue);
}
.pie-segment.bonds {
  background: var(--light-blue);
}
.pie-segment.reits {
  background: var(--success);
}
.pie-segment.cash {
  background: var(--warning);
}

.chart-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.legend-color.stocks {
  background: var(--primary-blue);
}
.legend-color.bonds {
  background: var(--light-blue);
}
.legend-color.reits {
  background: var(--success);
}
.legend-color.cash {
  background: var(--warning);
}

/* === How It Works Section === */
.how-it-works {
  padding: 4rem 0;
  background: var(--gray-50);
}

.how-it-works h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary-blue);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.step-card {
  background: var(--white);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.step-card:hover {
  transform: translateY(-4px);
}

.step-number {
  position: absolute;
  top: -20px;
  right: -20px;
  background: var(--primary-blue);
  color: var(--white);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}

.step-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--light-blue);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

.step-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--primary-blue);
}

.step-card p {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* === FAQ Section === */
.faq {
  padding: 4rem 0;
  background: var(--gray-100);
}

.faq h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary-blue);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.faq-item {
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--primary-blue);
}

.faq-item p {
  font-size: 0.9rem;
  color: var(--gray-700);
}

/* === Footer Section === */
footer,
.footer {
  padding: 2rem 0;
  background: var(--dark-blue);
  color: var(--white);
}

.footer .container,
footer .container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Override contact info styles within the footer. The generic .contact-info class is used on
   multiple pages, including the terms page, but in the footer we don't want the light background.
   These overrides remove the background card and reset spacing for footer contact details. */
.footer .contact-info {
  background: transparent;
  padding: 0;
  border: none;
  margin-top: 0;
}
.footer .contact-info p {
  color: var(--gray-200);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.footer .contact-info p i {
  margin-right: 0.5rem;
  color: var(--light-blue);
}

.footer-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--light-blue);
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-security {
  font-size: 0.8rem;
  color: var(--gray-300);
}

/* === Transactions Page === */
.filters-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 150px;
}

.filter-group label {
  font-size: 0.85rem;
  color: var(--gray-700);
}

.filter-group .form-control {
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-900);
  font-size: 0.875rem;
}

.content-card .card-header button.btn-outline {
  background: transparent;
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.content-card .card-header button.btn-outline:hover {
  background: var(--primary-blue);
  color: var(--white);
}

.transactions-table table {
  width: 100%;
  border-collapse: collapse;
}

.transactions-table th,
.transactions-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--gray-200);
}

.transactions-table th {
  background: var(--gray-50);
  color: var(--primary-blue);
  font-weight: 600;
}

.transactions-table tbody tr:hover {
  background: var(--gray-50);
}

.transaction-status {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  text-transform: capitalize;
  display: inline-block;
}

.transaction-status.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.transaction-status.status-approved,
.transaction-status.status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.transaction-status.status-rejected {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

/* === Settings Navigation & Password Visibility === */
.settings-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.settings-tab {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--primary-blue);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.settings-tab.active {
  border-bottom-color: var(--primary-blue);
  color: var(--primary-blue);
}

.settings-tab:hover {
  color: var(--dark-blue);
}

.settings-content {
  display: none;
}

.settings-content.active {
  display: block;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 2.5rem;
}

.toggle-password {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--gray-400);
  font-size: 0.875rem;
}

.toggle-password:hover {
  color: var(--primary-blue);
}

/* -----------------------------------------------------------------
 * Notifications panel styles
 *
 * The notifications panel appears when the user clicks the bell
 * icon on the dashboard.  It overlays on the right side of the
 * header and lists recent account notifications.  On smaller
 * screens it expands to fill the width for better usability.
 */

.notification-panel {
  position: absolute;
  top: 60px;
  right: 1rem;
  width: 350px;
  max-height: 60vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
  z-index: 1001;
}

.notification-panel .notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.notification-panel .notification-header h3 {
  color: var(--white);
  font-size: 1.25rem;
  margin: 0;
}

.notification-panel .close-btn {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.notification-panel .notification-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-panel .notification-content li {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--white);
}

.notification-panel .notification-content li .notif-title {
  font-weight: 600;
}

.notification-panel .notification-content li .notif-message {
  font-size: 0.875rem;
  margin-top: 0.25rem;
  color: var(--gray-100);
}

.notification-panel .notification-content li .notif-date {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .notification-panel {
    width: 100%;
    right: 0;
    left: 0;
    top: 60px;
    max-height: 70vh;
  }
}

/* === Profile summary card (Settings page) === */
.profile-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-info h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--primary-blue);
}
.profile-info p {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* -----------------------------------------------------------------
 * Layout hardening across all dashboard pages
 *
 * The dashboard layout uses a sidebar and a main content area.  On
 * smaller screens some elements, such as charts or tables, would
 * stretch beyond the viewport causing the page to be visually cut
 * off.  These rules ensure the layout flexes properly, the sidebar
 * width is consistent, and content can shrink or scroll instead of
 * forcing the body to expand beyond the screen width.  The
 * media queries mirror the sidebar off‑canvas behaviour declared
 * earlier in the file but override the flexbox properties so that
 * every page using the dashboard layout benefits from the same
 * responsive behaviour.
 */

/* Main dashboard container should stretch to fill the viewport and
   allow its children to flex. */
.dashboard-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* Sidebar dimensions: give it a fixed basis so flexbox doesn’t
   compress it and ensure the width matches the off‑canvas value. */
.dashboard-sidebar {
  width: 260px;
  flex: 0 0 260px;
}

/* Main content: take up the remaining space and allow its children
   (cards, charts, tables) to shrink instead of forcing overflow. */
.dashboard-main {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 260px;
  overflow-x: hidden;
}

/* On tablet sized screens and below, remove the left margin so the
   content spans the full width when the sidebar is hidden off‑canvas. */
@media (max-width: 1024px) {
  .dashboard-main {
    margin-left: 0;
  }
}

/* Off‑canvas behaviour for small screens: slide the sidebar off
   screen and restore it when open.  Keep the negative offset
   exactly equal to the sidebar width to avoid leaving a strip. */
@media (max-width: 768px) {
  .dashboard-sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    transition: left 0.3s ease;
    z-index: 1000;
  }
  .dashboard-sidebar.open {
    left: 0;
  }
}

/* Prevent cards, charts and other containers from expanding beyond
   their parent.  This ensures they shrink gracefully on small
   screens instead of causing horizontal overflow. */
.card,
.stat-card,
.chart,
.widget,
.summary-card,
.content-card {
  min-width: 0;
}

/* Allow tables to scroll horizontally rather than forcing the page
   width to increase. */
.transactions-table,
.portfolio-table,
.table-wrap,
.transactions-table-wrap {
  overflow-x: auto;
}

/* Grid layouts: define a 12‑column grid on larger screens and
   collapse to a single column on phones.  This preserves spacing
   while ensuring content doesn’t overflow. */
.cards-grid,
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .cards-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/*  Responsive fixes and visual improvements for the dashboard and form
    pages.  These rules appear near the end of the stylesheet so they
    override earlier definitions.                                         */

/* Stats cards: allow the grid to shrink cards on large screens so they
   never overlap or spill into each other.  The original template
   defined a minimum width of 300px which caused the three cards on
   desktop to overflow the available space (especially once the
   sidebar margin is accounted for).  Reducing the minimum to 240px
   allows the grid to create as many columns as will fit without
   causing overlap. */
@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Balance, deposit and withdrawal cards: give these sections a soft
   glassy backdrop with padding and rounded corners.  This matches
   the rest of the dashboard aesthetic and improves readability on
   both desktop and mobile. */
.balance-card,
.form-section,
.payment-instructions,
.withdrawal-form-container .form-section {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Instruction and detail cards within deposit/withdrawal pages */
.instruction-card,
.withdrawal-details {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Notes and small text blocks */
.instruction-note,
.withdrawal-warning {
  background: rgba(255, 255, 255, 0.04);
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* Headings inside the forms to align with the dashboard styling */
.balance-card h3,
.payment-instructions h3,
.withdrawal-form-container h3 {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  color: var(--light-blue);
}

/* Adjust spacing for recent deposits/withdrawals sections on forms */
.dashboard .container > .recent-deposits,
.dashboard .container > .recent-withdrawals {
  margin-top: 2rem;
}