@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

/* ========================================
   ROOT VARIABLES - UNIFIED THEME SYSTEM
   All color, spacing, and styling variables
======================================== */
:root {
  /* Base Colors */
  --navbar-color: white;
  --border-bottoms: lightgrey;
  --green-theme: lime;
  --greenish-theme: #b8ffb8;
  --product-container: lightgrey;
  --text-color-1: black;
  --text-color-2: black;
  --lighter-text: #666666;
  --green-text: green;
  --orange-text: darkorange;
  --red-text: #ff4500;
  --link-color: #32cd32;
  --bg-color-1: #fafffa;
  --bg-color-2: white;
  --toast-bg: #32cd32;
  --icon-bg: lightgrey;

  /* Shadow Variables */
  --topnavbar-shadow: 0 2px 9px rgba(0, 0, 0, 0.7);
  --bottomnavbar-shadow: 0 0px 9px rgba(0, 0, 0, 0.7);
  --address-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --popup-box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --box-shadow: rgba(0, 0, 0, 0.6);

  /* Button Variables */
  --btn-border-radius: 5px;
  --section-btn-border: lightgrey;
  --primary-btn-color: #32cd32;
  --primary-btn-text-color: black;
  --primary-btn-padding: 6px 10px;
  --primary-btn-font-weight: bold;
  --primary-btn-font-size: 14px;
  --orange-btn-color: orange;
  --orange-btn-text-color: black;
  --danger-btn-color: red;
  --danger-btn-text-color: white;

  /* Card Variables */
  --product-card-border-radius: 15px;
  --product-card-padding: 15px;
  --card-border-radius: 8px;
  --card-padding: 5px;

  /* Gradient Backgrounds */
  --credit-score-gradient: linear-gradient(135deg, rgba(255,210,160,0.85) 0%, rgba(190,240,190,0.85) 100%);
  --wallet-gradient: linear-gradient(135deg, rgba(130,232,190,0.87) 0%, rgba(130,232,190,0.82) 60%, rgba(130,190,245,0.78) 100%);

  /* Icon Styles */
  --icon-bg-color: rgba(255, 255, 255, 0.7);
  --icon-text-color: #333;
  --icon-border-radius: 8px;
  --icon-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Status Variables */
  --status-badge-bg: orange;
  --status-badge-text-color: black;
  --status-badge-border-radius: 7px;

  /* Message Section Variables */
  --message-bg: #e7f8e7;
  --message-border: #2ecc71;
  --message-text: #1e6b35;
  --message-icon: #27ae60;
  --red-message-bg: #ffeded;
  --red-message-border: #e74c3c;
  --red-message-text: #922b21;
  --red-message-icon: #c0392b;
  --blue-message-bg: #e7f1ff;
  --blue-message-border: #3498db;
  --blue-message-text: #1a5089;
  --blue-message-icon: #2980b9;

  /* Toggle Variables */
  --toggle-bg: lightgrey;

  /* Status Colors - Light Theme */
  --success-color: #2ecc71;
  --success-bg: rgba(46, 204, 113, 0.15);
  --success-border: rgba(46, 204, 113, 0.3);
  --success-text: #155724;
  --warning-color: #f39c12;
  --warning-bg: rgba(243, 156, 18, 0.15);
  --warning-border: rgba(243, 156, 18, 0.3);
  --warning-text: #856404;
  --danger-color: #e74c3c;
  --danger-bg: rgba(231, 76, 60, 0.15);
  --danger-border: rgba(231, 76, 60, 0.3);
  --danger-text: #721c24;
  --info-color: #3498db;
  --info-bg: rgba(52, 152, 219, 0.15);
  --info-border: rgba(52, 152, 219, 0.3);
  --info-text: #0c5460;

  /* Overlay Variables */
  --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* ========================================
   DARK MODE VARIABLES
   All dark theme overrides
======================================== */
body.active {
  /* Base Colors - Dark Mode */
  --navbar-color: #1c1c1c;
  --product-container: #3b3c36;
  --text-color-1: white;
  --text-color-2: white;
  --green-text: lime;
  --orange-text: orange;
  --red-text: #ff4500;
  --link-color: #32cd32;
  --bg-color-1: #1c1c1c;
  --bg-color-2: #242424;
  --icon-bg: #1c1c1c;
  --toast-bg: #32cd32;
  --lighter-text: #CCCCCC;
  --section-btn-border: #3a3a3a;

  /* Shadow Variables - Dark Mode */
  --topnavbar-shadow: 0 2px 9px rgba(255, 255, 255, 0.7);
  --bottomnavbar-shadow: 0 0px 9px rgba(255, 255, 255, 0.7);
  --address-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --popup-box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  --box-shadow: rgba(255, 255, 255, 0.6);

  /* Gradient Backgrounds - Dark Mode */
  --credit-score-gradient: linear-gradient(135deg, rgba(100,70,20,0.8) 0%, rgba(60,100,60,0.8) 100%);
  --wallet-gradient: linear-gradient(135deg, rgba(40,100,80,0.8) 0%, rgba(40,100,80,0.75) 60%, rgba(40,70,120,0.75) 100%);

  /* Icon Styles - Dark Mode */
  --icon-bg-color: rgba(60, 60, 60, 0.7);
  --icon-text-color: #eee;

  /* Message Section Variables - Dark Mode */
  --message-bg: #193319;
  --message-border: #2ecc71;
  --message-text: #7bed9f;
  --message-icon: #2ecc71;
  --red-message-bg: #331919;
  --red-message-border: #e74c3c;
  --red-message-text: #ff7675;
  --red-message-icon: #e74c3c;
  --blue-message-bg: #192533;
  --blue-message-border: #3498db;
  --blue-message-text: #74b9ff;
  --blue-message-icon: #3498db;

  /* Toggle Variables - Dark Mode */
  --toggle-bg: #1c1c1c;

  /* Status Colors - Dark Theme */
  --success-color: #2ecc71;
  --success-bg: rgba(46, 204, 113, 0.15);
  --success-border: rgba(46, 204, 113, 0.3);
  --success-text: #7bed9f;
  --warning-color: #f39c12;
  --warning-bg: rgba(243, 156, 18, 0.15);
  --warning-border: rgba(243, 156, 18, 0.3);
  --warning-text: #ffeaa7;
  --danger-color: #e74c3c;
  --danger-bg: rgba(231, 76, 60, 0.15);
  --danger-border: rgba(231, 76, 60, 0.3);
  --danger-text: #ff7675;
  --info-color: #3498db;
  --info-bg: rgba(52, 152, 219, 0.15);
  --info-border: rgba(52, 152, 219, 0.3);
  --info-text: #74b9ff;

  /* Overlay Variables - Dark Mode */
  --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ========================================
   GLOBAL STYLES
   Base body and html styles
======================================== */
body, html {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background-color: var(--bg-color-1);
  color: var(--text-color-1);
  transition: background-color 0.3s, color 0.3s;
}

/* ========================================
   CONTAINER STYLES
   Main content wrapper
======================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ========================================
   NAVIGATION STYLES
   Header navigation bar
======================================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

/* Logo Styles */
.logo img {
  height: 35px;
}

.bottom-logo img {
  height: 100px;
}

/* Theme Toggle Button */
.theme-toggle {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color-1);
  border: 2px solid var(--green-text);
  background-color: var(--bg-color-2);
}

.theme-toggle i {
  color: orange;
  font-size: 20px;
}

/* ========================================
   HERO SECTION STYLES
   Main hero area with content and image
======================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.content {
  text-align: center;
  margin-bottom: 30px;
}

/* Hero Typography */
h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

p {
  font-size: 1.1em;
  margin-bottom: 30px;
  opacity: 0.8;
}

/* Hero Buttons */
.buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: bold;
  font-size: 13px;
  color: white;
  font-family: "Inter", sans-serif;
}

.btn-primary {
  background-color: var(--green-theme);
  color: black;
}

.btn-secondary {
  background-color: orange;
  color: black;
}

/* Hero Image */
.hero-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-top: 30px;
}

/* ========================================
   FEATURES SECTION STYLES
   Product features showcase
======================================== */
.features {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.feature {
  text-align: center;
}

/* Feature Icons */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: orange;
}

.feature-icon i {
  font-size: 80px;
}

/* Feature Typography */
.feature h2 {
  margin-bottom: 15px;
}

.feature p {
  color: var(--text-color-2);
  font-size: 0.9em;
}

/* ========================================
   FOOTER SECTION STYLES
   Footer content and layout
======================================== */
.footer {
  padding: 40px 0 20px;
  margin-top: 50px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

/* Location Information */
.location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-color-1);
  font-weight: bold;
}

.location i {
  font-size: 1.2em;
  color: red;
}

/* Social Media Links */
.social-links {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  justify-content: center;
}

.social-links a {
  color: var(--text-color-1);
  font-size: 1.2em;
  text-decoration: none;
  background-color: var(--green-theme);
  width: 40px;
  height: 40px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;
}

.social-links a i {
  color: black;
}

.social-links a:hover {
  transform: translateY(-2px);
}

/* Footer Bottom Section */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  font-size: 0.9em;
  text-align: center;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: var(--text-color-2);
  margin: 0 10px;
  text-decoration: none;
}

/* ========================================
   STYLISH DIVIDER
   Decorative separator between sections
======================================== */
.stylish-divider {
  margin: 40px auto;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--link-color), transparent);
  width: 80%;
  position: relative;
}

.stylish-divider:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--link-color);
  border-radius: 50%;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* ========================================
   RESPONSIVE DESIGN - TABLET AND DESKTOP
   Media queries for larger screens
======================================== */
@media (min-width: 768px) {
  /* Hero Section - Desktop Layout */
  .hero {
    flex-direction: row;
    justify-content: space-between;
  }

  .content {
    text-align: left;
    max-width: 50%;
  }

  .buttons {
    justify-content: flex-start;
  }

  .hero-image {
    width: 40%;
    margin-top: 0;
  }

  /* Features Section - Desktop Layout */
  .features {
    flex-direction: row;
    justify-content: space-between;
  }

  .feature {
    flex-basis: 30%;
  }

  /* Footer Section - Desktop Layout */
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .footer-links {
    margin-top: 0;
  }

  .social-links {
    justify-content: flex-start;
  }
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE
   Mobile-specific styling overrides
======================================== */
@media (max-width: 767px) {
  /* Social Links - Mobile Centered */
  .social-links {
    justify-content: center;
    width: 100%;
  }

  /* Footer - Mobile Centered */
  .footer-bottom {
    text-align: center;
  }

  .footer-bottom p {
    margin: 0;
    text-align: center;
  }
}