/*
    Copyright MyEkonomy.com 2025
    
    Common/Shared Styles & Theming
    - Global light and dark mode support
    - Shared components (toast, modals, forms, navbar)
    - Font, color, and layout base rules
    - Utility classes and responsive design
*/
body {
  font-family: 'Inter', sans-serif;
  background-color: #fefefe; /* Near white for light mode */
  color: #343a40; /* Dark text for light mode */
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Dark Mode styles */
body.dark-mode {
  background-color: #000000; /* Pure black for dark mode */
  color: #f8f9fa; /* Light text for dark mode */
}
body.dark-mode .text-dark,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f8f9fa !important; /* Lighter headings for dark mode */
}
body.dark-mode .text-secondary { color: #ced4da !important; } /* Lighter secondary text for dark mode */
body.dark-mode .text-muted { color: #adb5bd !important; } /* Lighter muted text for dark mode */

/* Ensure all main content sections adopt the darker background */
body.dark-mode .page-content {
  background-color: #1a1a1a !important; /* Very dark gray/off-black for sections */
}
body.dark-mode .bg-white { background-color: #1a1a1a !important; } /* Explicit for elements using bg-white */
body.dark-mode .bg-light { background-color: #1a1a1a !important; } /* Explicit for elements using bg-light */

/* Specific dark mode style for tier cards */
body.dark-mode .tier-card {
  background-color: #2d3748 !important; /* Slightly different dark shade for cards */
  border-color: #4a5568 !important; /* Darker border for cards */
}
body.dark-mode .tier-card .fs-1,
body.dark-mode .tier-card .fw-bold {
  color: #f8f9fa !important; /* Ensure pricing and bold text are light */
}
body.dark-mode .tier-card .text-secondary {
  color: #ced4da !important; /* Ensure secondary text within cards is light */
}
body.dark-mode .card.border-success { /* Adjust popular card border in dark mode */
  border-color: #a020f0 !important; /* Violet border */
}
body.dark-mode .badge.bg-success { /* Adjust popular badge in dark mode */
  background-color: #a020f0 !important; /* Violet badge */
}


body.dark-mode .navbar-light { background-color: #1a1a1a !important; }
body.dark-mode .navbar-brand { color: #f8f9fa !important; }
body.dark-mode .nav-link { color: #ced4da !important; }
body.dark-mode .nav-link:hover { color: #a020f0; } /* Purple accent for nav links */
body.dark-mode .modal-content-custom { 
  background-color: #1a1a1a; 
}
body.dark-mode .modal-content-custom h3,
body.dark-mode .modal-content-custom h4,
body.dark-mode .modal-content-custom h5,
body.dark-mode .modal-content-custom h6 {
  color: #f8f9fa !important;
}
body.dark-mode .modal-content-custom p {
  color: #ced4da !important;
}
body.dark-mode .form-control {
  background-color: #2d3748;
  border-color: #6c757d;
  color: #f8f9fa;
  box-shadow: 0 0 0 0.2rem rgba(160, 32, 240, 0.25);
}
body.dark-mode .form-control:focus {
  background-color: #2d3748;
  border-color: #a020f0;
  color: #f8f9fa;
  box-shadow: 0 0 0 0.2rem rgba(160, 32, 240, 0.25);
}
body.dark-mode .form-control::placeholder { color: #a0aec0; }
body.dark-mode .border-bottom { border-color: #4a5568 !important; }
body.dark-mode .tab-button { 
  color: #ced4da; 
  border: 1px solid #495057; /* Darker grey border for inactive tabs in dark mode */
}
body.dark-mode .tab-button.active { 
  border: 1px solid #a020f0; 
  border-bottom: 2px solid #a020f0; 
  color: #a020f0; 
} /* Purple accent for tabs */

/* Dark mode form label and text styling */
body.dark-mode .form-label {
  color: #f8f9fa !important;
}
body.dark-mode .text-dark-emphasis {
  color: #e9ecef !important;
}
body.dark-mode .text-secondary {
  color: #ced4da !important;
}
body.dark-mode .text-muted {
  color: #adb5bd !important;
}
body.dark-mode .form-text {
  color: #adb5bd !important;
}
body.dark-mode .form-text.text-success {
  color: #a020f0 !important;
}
body.dark-mode .form-text.text-danger {
  color: #ff6b6b !important;
}
body.dark-mode .btn-success {
  background-color: #a020f0 !important; /* Violet button */
  border-color: #a020f0 !important;
}
body.dark-mode .btn-success:hover {
  background-color: #8a2be2 !important; /* Slightly darker violet on hover */
  border-color: #8a2be2 !important;
}
body.dark-mode .btn-outline-secondary {
  border-color: #4a5568 !important;
  color: #ced4da !important;
}
body.dark-mode .btn-outline-secondary:hover {
  background-color: #4a5568 !important;
  color: #f8f9fa !important;
}
body.dark-mode .bg-dark { background-color: #000000 !important; } /* Footer and similar */
body.dark-mode .timeline::before { background-color: #4a5568; } /* Darker timeline line */
body.dark-mode .timeline-dot { border-color: #1a1a1a; } /* Adjust dot ring color for dark mode background */
body.dark-mode .timeline-dot.active {
    background-color: #a020f0 !important; /* Violet timeline dot */
}
body.dark-mode .text-success { color: #a020f0 !important; } /* Violet text for roadmap status */
body.dark-mode .close-button { color: #f8f9fa !important; } /* White color for close button in dark mode */
body.dark-mode .navbar-toggler-icon {
  filter: invert(1); /* Invert the color of the SVG icon to white */
}


/* Specific light mode color for headings, brand, and success elements */
.navbar-brand,
.text-dark, /* Applies to list items in opportunity section, etc. */
h1, h2, h3, h4, h5, h6 {
  color: #343a40 !important; /* Default dark for these, will override for purple where specified */
}

/* Specific purple for elements in light mode */
.navbar-brand { color: #800080 !important; } /* Dark purple for light mode brand */
.btn-success {
  background-color: #800080 !important; /* Dark purple button */
  border-color: #800080 !important;
}
.btn-success:hover {
  background-color: #6a006a !important; /* Slightly darker purple on hover */
  border-color: #6a006a !important;
}
.text-success {
  color: #800080 !important; /* Dark purple for success text in light mode */
}
.card.border-success {
  border-color: #800080 !important; /* Dark purple border for popular card */
}
.badge.bg-success {
  background-color: #800080 !important; /* Dark purple badge background */
}
.tab-button.active {
  border-color: #800080; /* Dark purple for light mode active tab */
  color: #800080;
}
.timeline-dot.active {
  background-color: #800080 !important; /* Dark purple for light mode timeline dot */
}


.chart-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  max-height: 400px;
}
@media (min-width: 768px) {
  .chart-container {
      height: 350px;
  }
}
.chart-container-bar {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  height: 350px;
  max-height: 450px;
}
.nav-link {
  transition: color 0.3s ease;
  color: #9370DB !important; /* Medium Slate Blue - lighter purple for light mode nav links */
  font-size: 1.1rem !important; /* Bigger font size */
  padding: 0.75rem 1.25rem !important; /* More padding for spacing */
  margin: 0 0.5rem; /* Add margin between nav items */
  font-weight: bold !important; /* Bold font weight */
}
.nav-link:hover {
  color: #8A2BE2 !important; /* Blue Violet - slightly darker on hover */
}
body.dark-mode .nav-link { 
  color: #DDA0DD !important; /* Plum - lighter violet for dark mode nav links */
}
body.dark-mode .nav-link:hover { 
  color: #D8BFD8 !important; /* Thistle - slightly darker on hover */
}
.tier-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tier-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.modal-custom {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
}
.modal-content-custom {
  background-color: #fefefe;
  padding: 2rem;
  border-radius: 0.5rem;
  /* Enhanced 3D shadow */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
  position: relative;
}
.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background: none;
}
.tab-button {
  padding: 0.75rem 1.25rem;
  border: 1px solid #dee2e6; /* Light grey border for inactive tabs */
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
  background: none;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  color: #6c757d; /* Bootstrap text-secondary */
}
.tab-button.active {
  border: 1px solid #800080; /* Dark purple border for active tab */
  border-bottom: 2px solid #800080; /* Dark purple for light mode active tab */
  color: #800080;
  font-weight: 600;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
.social-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; /* Fixed width */
  height: 50px; /* Fixed height */
  padding: 0; /* Remove padding as width/height are fixed */
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 1.5rem; /* Icon size */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  text-decoration: none; /* Remove underline for anchor tags if used */
  border: none; /* Remove default button border */
}
.google-btn { background-color: #DB4437; color: white; }
.google-btn:hover { background-color: #C23321; }
.apple-btn { background-color: #000000; color: white; }
.apple-btn:hover { background-color: #333333; }
.twitter-btn { background-color: #1DA1F2; color: white; }
.twitter-btn:hover { background-color: #0F82D9; }
.facebook-btn { background-color: #1877F2; color: white; }
.facebook-btn:hover { background-color: #115FCD; }

/* Timeline specific styles to integrate with Bootstrap */
.timeline {
  position: relative;
  padding-left: 50px; /* Space for the line and dots */
}
.timeline::before {
  content: '';
  position: absolute;
  left: 20px; /* Center the line */
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #dee2e6; /* Bootstrap border color */
}
.timeline-item {
  position: relative;
  padding-bottom: 3rem; /* Spacing between items */
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: 13px; /* Align with the line */
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #6c757d; /* Default dot color */
  border: 4px solid #fefefe; /* Body background color to create a ring effect */
}
.timeline-dot.active {
    background-color: #800080; /* Dark purple for light mode timeline dot */
}

/* Mobile: One card per view, centered */
@media (max-width: 767px) {
  .card-carousel .carousel-item > .card:first-child {
      flex-basis: calc(100% - (2 * 1rem)); /* 100% of item width, minus item padding */
      max-width: calc(100% - (2 * 1rem));
  }
  .card-carousel .carousel-item > .card:not(:first-child) {
      display: none; /* Hide additional cards on mobile */
  }
  .card-carousel .carousel-item {
      justify-content: center; /* Center the single card */
  }
}
/* Desktop: Three cards per view */
@media (min-width: 768px) {
  .card-carousel .carousel-item {
      justify-content: space-between; /* Distribute 3 cards with space between */
  }
  .card-carousel .carousel-item > .card {
      display: block; /* Ensure all cards are visible */
      /* Calculate flex-basis: (Total available width in item - total gap space) / number of cards */
      /* Total available width in item = 100% - (2 * 1rem padding) */
      /* Total gap space for 3 cards = 2 * 20px gap */
      flex-basis: calc((100% - (2 * 1rem) - (2 * 20px)) / 3);
      max-width: calc((100% - (2 * 1rem) - (2 * 20px)) / 3);
  }
}
/* Carousel control styling */
.carousel-control-prev,
.carousel-control-next {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 4px;
  font-size: 1rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 18px !important;
  height: 18px !important;
}
body.dark-mode .carousel-control-prev,
body.dark-mode .carousel-control-next {
  background-color: rgba(160, 32, 240, 0.5); /* Semi-transparent violet in dark mode */
}
body.dark-mode .carousel-control-prev:hover,
body.dark-mode .carousel-control-next:hover {
  background-color: rgba(160, 32, 240, 0.8); /* Darker violet on hover */
}
.card-carousel .carousel-inner {
  min-height: 600px; /* or whatever is 100% bigger than your current height */
}
.card-carousel .carousel-item,
.card-carousel .card {
  height: 100%;
}
.card-carousel {
  position: relative;
  background-color: transparent;
}
.card-carousel .carousel-inner {
  width: 100%;
  height: 55vh; /* Increased from 50vh */
  min-height: 380px; /* Increased from 350px */
  max-height: 450px; /* Increased from 400px */
  display: block; /* Let Bootstrap handle positioning */
  align-items: stretch;
  margin-bottom: 60px; /* Increased space for shadows to be visible */
}
.card-carousel .carousel-item {
  /* No custom display, width, or height here! Let Bootstrap handle it. */
}
.card-carousel .card {
  width: 60%;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent !important; /* Transparent background to blend with page */
  border: none !important; /* Remove border for seamless blending */
}
body.dark-mode .card-carousel .card {
  background-color: transparent !important; /* Transparent background in dark mode too */
}

/* Ensure text content in carousel cards is visible in both modes */
.card-carousel .card .text-dark {
  color: #343a40 !important; /* Dark text for light mode */
}
body.dark-mode .card-carousel .card .text-dark {
  color: #f8f9fa !important; /* Light text for dark mode */
}
.card-carousel .card .text-secondary {
  color: #6c757d !important; /* Secondary text for light mode */
}
body.dark-mode .card-carousel .card .text-secondary {
  color: #ced4da !important; /* Lighter secondary text for dark mode */
}
.card-bg-expenses,
.card-bg-expense-tracking,
.card-bg-goal-setting,
.card-bg-debt-management,
.card-bg-investment-overview,
.card-bg-family-sync,
.card-bg-tax-preparation,
.card-bg-dashboard {
  background-color: inherit; /* Inherit from .card for mode match */
}
.card-bg-expenses .card-overlay,
.card-bg-expense-tracking .card-overlay,
.card-bg-goal-setting .card-overlay,
.card-bg-debt-management .card-overlay,
.card-bg-investment-overview .card-overlay,
.card-bg-family-sync .card-overlay,
.card-bg-tax-preparation .card-overlay,
.card-bg-dashboard .card-overlay {
  background: rgba(0,0,0,0.30); /* Slightly lighter overlay for better image visibility in both modes */
}
@media (max-width: 767px) {
  .card-carousel .carousel-inner {
      height: 260px;
      min-height: 180px;
      max-height: 320px;
  }
  .card-carousel .card {
      width: 85% !important;
      max-width: 85% !important;
  }
  .card-carousel .card,
  .card-bg-expenses,
  .card-bg-expense-tracking,
  .card-bg-goal-setting,
  .card-bg-debt-management,
  .card-bg-investment-overview,
  .card-bg-family-sync,
  .card-bg-tax-preparation,
  .card-bg-dashboard {
      min-height: 180px !important;
      height: 220px !important;
      background-size: contain !important;
      background-position: center center !important;
  }
  .card-bg-expenses .card-content,
  .card-bg-expense-tracking .card-content,
  .card-bg-goal-setting .card-content,
  .card-bg-debt-management .card-content,
  .card-bg-investment-overview .card-content,
  .card-bg-family-sync .card-content,
  .card-bg-tax-preparation .card-content,
  .card-bg-dashboard .card-content {
      padding-bottom: 0.5rem !important;
  }
  .card-bg-expenses .card-overlay,
  .card-bg-expense-tracking .card-overlay,
  .card-bg-goal-setting .card-overlay,
  .card-bg-debt-management .card-overlay,
  .card-bg-investment-overview .card-overlay,
  .card-bg-family-sync .card-overlay,
  .card-bg-tax-preparation .card-overlay,
  .card-bg-dashboard .card-overlay {
      bottom: 0 !important;
  }
}
.max-w-800 { max-width: 800px !important; }
.max-w-600 { max-width: 600px !important; }
.img-200 { width: 200px !important; height: 200px !important; object-fit: cover !important; }
.h-1px { height: 1px !important; }
.card-bg-expenses {
  position: relative;
  background-image: url('../img/caraousel/low_res/Indian_Woman_Wondering_Expenses.jpeg?v=4');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 0; /* Remove padding from card */
}
.card-bg-expenses .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-expenses .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-expense-tracking {
  position: relative;
  background-image: url('../img/caraousel/low_res/Indian_Man_Thinking_House.jpeg?v=4'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 0;
}
.card-bg-expense-tracking .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-expense-tracking .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-expenses,
.card-bg-expense-tracking {
  min-height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.card-bg-goal-setting {
  min-height: 400px;
  background-image: url('../img/caraousel/low_res/Indian_Man_Invested_Right_Funds.jpeg?v=4');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: #fff;
}
.card-bg-goal-setting .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-goal-setting .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-debt-management {
  min-height: 400px;
  background-image: url('../img/caraousel/low_res/Indian_Couple_Thinking_Kids_Education.jpeg?v=4');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: #fff;
}
.card-bg-debt-management .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-debt-management .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-investment-overview {
  min-height: 400px;
  background-image: url('../img/caraousel/low_res/Indian_Woman_Thinking_Insurance.jpeg?v=4');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: #fff;
}
.card-bg-investment-overview .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-investment-overview .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-family-sync {
  min-height: 400px;
  background-image: url('../img/caraousel/low_res/Indian_Man_Thinking_Retirement.jpeg?v=4');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: #fff;
}
.card-bg-family-sync .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-family-sync .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-tax-preparation {
  min-height: 400px;
  background-image: url('../img/caraousel/low_res/Track_Expenses.jpg?v=4');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: #fff;
}
.card-bg-tax-preparation .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-tax-preparation .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card-bg-dashboard {
  min-height: 60px;
  background-image: url('../img/caraousel/low_res/dashboard.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: #fff;
}
.card-bg-dashboard .card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 1;
}
.card-bg-dashboard .card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem 1.5rem 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
body:not(.dark-mode) footer.bg-dark {
  background-color: #ffffffe0 !important;
  color: #212529 !important;
}
body:not(.dark-mode) footer.bg-dark a,
body:not(.dark-mode) footer.bg-dark p,
body:not(.dark-mode) footer.bg-dark .text-muted {
  color: #212529 !important;
}
/* Header color matches footer */
header.bg-dark {
  background-color: #000 !important;
  color: #fff !important;
}
body:not(.dark-mode) header.bg-dark {
  background-color: #e5e5ea !important;
  color: #23232b !important;
}
body:not(.dark-mode) header.bg-dark .navbar-brand,
body:not(.dark-mode) header.bg-dark .nav-link {
  color: #800080 !important;
}
body.dark-mode header.bg-dark .navbar-brand,
body.dark-mode header.bg-dark .nav-link {
  color: #bd93d8 !important;
}
/* Navbar background and text colors */
body:not(.dark-mode) .navbar {
  background-color: #fff !important;
}
body.dark-mode .navbar {
  background-color: #000 !important;
}
body:not(.dark-mode) .navbar-toggler {
  border-color: #800080 !important;
}
body.dark-mode .navbar-toggler {
  border-color: #a020f0 !important;
}
body:not(.dark-mode) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(128, 0, 128, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
body.dark-mode .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(160, 32, 240, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
#solution {
scroll-margin-top: 90px;
}
#solution .card {
  border: 1px solid #e0e0e0 !important;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#solution .card ul {
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
#solution .card h4 {
  color: #a66dc9 !important;
}
body:not(.dark-mode) #plans .tier-card {
  background-color: #f5f5f7 !important;
}
/*
  Carousel Controls
  - Custom styling for carousel prev/next buttons
  - Responsive: smaller, purple, always visible
*/
.card-carousel .carousel-controls-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  z-index: 2;
  pointer-events: none;
  gap: 0 !important;
}
.card-carousel .carousel-controls-bottom > * {
  pointer-events: auto;
}
.card-carousel .carousel-controls-bottom button,
.carousel-pause-btn {
  margin: 0 1px !important;
}
.card-carousel .carousel-controls-bottom button {
  background: #b57fe6 !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
body.dark-mode .card-carousel .carousel-controls-bottom button {
  background: #a66dc9 !important;
}
.card-carousel .carousel-controls-bottom .carousel-control-prev-icon,
.card-carousel .carousel-controls-bottom .carousel-control-next-icon {
  filter: none !important;
  background-color: transparent !important;
  width: 18px !important;
  height: 18px !important;
}
#login-signup-btn {
  background-color: #a45be8 !important;
  border-color: #b57fe6 !important;
  color: #fff !important;
}
#login-signup-btn:hover {
  background-color: #9851c4 !important;
  border-color: #ac5dde !important;
  color: #fff !important;
}
body:not(.dark-mode) {
  color: #23232b;
}
body:not(.dark-mode) .lead,
body:not(.dark-mode) .text-secondary,
body:not(.dark-mode) .text-muted,
body:not(.dark-mode) .card,
body:not(.dark-mode) .card-content,
body:not(.dark-mode) .card p,
body:not(.dark-mode) .card ul,
body:not(.dark-mode) .card li {
  color: #23232b !important;
}
.carousel-pause-btn {
  background: #b57fe6 !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
body.dark-mode .carousel-pause-btn {
  background: #a66dc9 !important;
}
/*
  Hyperlink Styling
  - Purple links in both light and dark mode
*/
a {
  color: #800080 !important;
  text-decoration: underline;
  transition: color 0.2s;
}
body.dark-mode a {
  color: #bd93d8 !important;
}
a:hover, body.dark-mode a:hover {
  color: #a020f0 !important;
}

/* Toast notification styles */
.toast-z-index {
  z-index: 1050;
}

.toast {
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.toast.bg-danger {
  background-color: #dc3545 !important;
}

.toast.bg-success {
  background-color: #198754 !important;
}

.toast.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

.toast.bg-info {
  background-color: #0dcaf0 !important;
}

/* Ensure toast is visible above modal */
.modal-custom ~ .toast-container {
  z-index: 1060 !important;
}

body.dark-mode .card-carousel {
  background-color: #1a1a1a !important; /* Same as the page-content background in dark mode */
}


/* ===== CLEAN CAROUSEL CARDS (2025-08-19) =====
   Goal: No grey boxes around images, no cropping.
   Approach: remove full-rect overlay; force image classes to use `contain` and transparent bg;
   make all wrappers transparent so they inherit the page background.
*/

/* 1) Remove the full-card overlay that tints the letterboxed areas */
.card-carousel .card-overlay { display: none !important; }

/* 2) Ensure the image holders don't paint a background (so gaps show page bg) */
.card-carousel .card,
.card-carousel .card-bg-expenses,
.card-carousel .card-bg-expense-tracking,
.card-carousel .card-bg-goal-setting,
.card-carousel .card-bg-debt-management,
.card-carousel .card-bg-investment-overview,
.card-carousel .card-bg-family-sync,
.card-carousel .card-bg-tax-preparation,
.card-carousel .card-bg-dashboard {
  background-color: transparent !important;
  /* 3D Effects */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25), 0 6px 15px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  transform: translateY(0) !important;
  transition: all 0.3s ease !important;
  z-index: 5 !important; /* Ensure cards are above navigation buttons */
}

/* 3D hover effects for carousel cards */
.card-carousel .card:hover,
.card-carousel .card-bg-expenses:hover,
.card-carousel .card-bg-expense-tracking:hover,
.card-carousel .card-bg-goal-setting:hover,
.card-carousel .card-bg-debt-management:hover,
.card-carousel .card-bg-investment-overview:hover,
.card-carousel .card-bg-family-sync:hover,
.card-carousel .card-bg-tax-preparation:hover,
.card-carousel .card-bg-dashboard:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Dark mode 3D effects */
body.dark-mode .card-carousel .card,
body.dark-mode .card-carousel .card-bg-expenses,
body.dark-mode .card-carousel .card-bg-expense-tracking,
body.dark-mode .card-carousel .card-bg-goal-setting,
body.dark-mode .card-carousel .card-bg-debt-management,
body.dark-mode .card-carousel .card-bg-investment-overview,
body.dark-mode .card-carousel .card-bg-family-sync,
body.dark-mode .card-carousel .card-bg-tax-preparation,
body.dark-mode .card-carousel .card-bg-dashboard {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .card-carousel .card:hover,
body.dark-mode .card-carousel .card-bg-expenses:hover,
body.dark-mode .card-carousel .card-bg-expense-tracking:hover,
body.dark-mode .card-carousel .card-bg-goal-setting:hover,
body.dark-mode .card-carousel .card-bg-debt-management:hover,
body.dark-mode .card-carousel .card-bg-investment-overview:hover,
body.dark-mode .card-carousel .card-bg-family-sync:hover,
body.dark-mode .card-carousel .card-bg-tax-preparation:hover,
body.dark-mode .card-carousel .card-bg-dashboard:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 8px 15px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3) Force all background-image cards to use contain (no cropping) */
.card-carousel .card-bg-expenses,
.card-carousel .card-bg-expense-tracking,
.card-carousel .card-bg-goal-setting,
.card-carousel .card-bg-debt-management,
.card-carousel .card-bg-investment-overview,
.card-carousel .card-bg-family-sync,
.card-carousel .card-bg-tax-preparation {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* 4) Make all immediate wrappers inside the carousel transparent too */
.card-carousel,
.card-carousel .carousel-inner,
.card-carousel .carousel-item,
.card-carousel .row,
.card-carousel .col-12 {
  background-color: transparent !important;
}

/* Optional: keep text readable without overlay */
.card-carousel .card-content,
.card-carousel .card-content * {
  text-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
}

/* ===== 3D EFFECTS FOR VALUE PROPOSITION AND REVENUE MODEL CARDS ===== */

/* 3D effects for Value Proposition cards */
.card.bg-light.rounded-3 {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transform: translateY(0) !important;
  transition: all 0.3s ease !important;
}

.card.bg-light.rounded-3:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 8px 15px rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 3D effects for Revenue Model cards */
.tier-card {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transform: translateY(0) !important;
  transition: all 0.3s ease !important;
}

.tier-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 8px 15px rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Dark mode 3D effects for Value Proposition cards */
body.dark-mode .card.bg-light.rounded-3 {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .card.bg-light.rounded-3:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 8px 15px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Dark mode 3D effects for Revenue Model cards */
body.dark-mode .tier-card {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .tier-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 8px 15px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}