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

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

:root {
  /* Existing variables */
  --navbar-color: white;
  --border-bottoms: lightgrey;
  --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;
  --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);


  /* New variables for button styles */
  --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 button */
  --orange-btn-color: orange;
  --orange-btn-text-color: black;

  /* Danger/Delete button */
  --danger-btn-color: red;
  --danger-btn-text-color: white;

  /* product Card styles */
  --product-card-border-radius: 15px;
  --product-card-padding: 15px;

  /* section Card styles */
  --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 indicator */
  --status-badge-bg: orange;
  --status-badge-text-color: black;
  --status-badge-border-radius: 7px;

  /* Green message section variables */
  --message-bg: #e7f8e7;
  --message-border: #2ecc71;
  --message-text: #1e6b35;
  --message-icon: #27ae60;

  /* Red message section variables */
  --red-message-bg: #ffeded;
  --red-message-border: #e74c3c;
  --red-message-text: #922b21;
  --red-message-icon: #c0392b;

  /* Blue message section variables */
  --blue-message-bg: #e7f1ff;
  --blue-message-border: #3498db;
  --blue-message-text: #1a5089;
  --blue-message-icon: #2980b9;

  /* Toggle bg section 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;

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

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

body.active {
  /* Existing dark mode variables */
  --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;
  --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);
  --lighter-text: #CCCCCC;
  --section-btn-border: #3a3a3a;

  /* Dark mode gradient backgrounds */
    --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%);

  /* You can also adjust specific variables for dark mode */
  --icon-bg-color: rgba(60, 60, 60, 0.7);
  --icon-text-color: #eee;

  /* Green message section variables in dark mode */
  --message-bg: #193319;
  --message-border: #2ecc71;
  --message-text: #7bed9f;
  --message-icon: #2ecc71;

  /* Red message section variables in dark mode */
  --red-message-bg: #331919;
  --red-message-border: #e74c3c;
  --red-message-text: #ff7675;
  --red-message-icon: #e74c3c;

  /* Blue message section variables in dark mode */
  --blue-message-bg: #192533;
  --blue-message-border: #3498db;
  --blue-message-text: #74b9ff;
  --blue-message-icon: #3498db;

  /* Toggle bg section variables */
  --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;

/* Dark mode toggle */
  --toggle-bg: #1c1c1c;

  /* Dark overlay for sidebar */
  --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* Body styles */
body {
  background-color: var(--bg-color-1);
}

/* ========== TOP NAVBAR STYLES ========== */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--navbar-color);
  height: 45px;
  z-index: 999;
  box-shadow: var(--topnavbar-shadow);
}

.menu-and-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 9px;
}

.main-logo img {
  height: 35px;
}

/* Add these CSS rules to your existing styles */

/* Default styles for navbar icons (mobile-first approach) */
.menu-btn, .theme-btn, .nav-search-btn, .notification-btn {
  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(--greenish-theme);
  background-color: var(--bg-color-2);
}

.right-navbar-icons {
  display: flex;
  gap: 8px;
  margin-right: 10px;
  font-size: 20px;
}

/* Styles for very small screens (below 320px) */
@media (max-width: 320px) {
  .menu-btn, .theme-btn, .nav-search-btn, .notification-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .right-navbar-icons {
    gap: 4px;
    font-size: 16px;
  }
}

/* Styles for desktop screens (768px and above) */
@media (min-width: 768px) {
  .menu-btn, .theme-btn, .nav-search-btn, .notification-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .right-navbar-icons {
    font-size: 18px;
  }
}

/* Styles for larger desktop screens (1024px and above) */
@media (min-width: 1024px) {
  .menu-btn, .theme-btn, .nav-search-btn, .notification-btn {
    width: 32px;
    height: 32px;
  }

  .right-navbar-icons {
    gap: 6px;
  }
}

/* ========== SIDEBAR STYLES ========== */
.sidebar {
  position: fixed;
  width: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color-1);
  overflow-y: auto;
  transition: transform 0.1s, opacity 0.3s;
  z-index: 1001;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
}

.sidebar.active {
  width: 256px;
  padding-left: 15px;
  padding-right: 15px;
}

/* Sidebar fixed content section */
.fixed-content {
  position: sticky;
  top: 0;
  background-color: var(--bg-color-1);
  z-index: 10000;
}

.side-logo {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.side-logo img {
  height: 30px;
}

.close-btn {
  margin-right: 2px;
  color: red;
  font-size: 20px;
}

/* Sidebar head section with user info */
.sidebar .head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-bottoms);
  padding-top: 10px;
}

.user-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}

.user-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-details .title,
.menu .title {
  font-size: 10px;
  font-weight: bolder;
  color: var(--text-color-1);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.user-details .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color-1);
  margin-bottom: 2px;
}

.user-details .title {
  font-weight: bold;
}

/* ====================================
 * 3. Credit Score Value Styling
 * ==================================== */
/* ====================================
 * 3. Sidebar Credit Score Value Styling
 * ==================================== */
.sidebar .credit-score-value {
    font-weight: bold;
}

/* Sidebar credit score value styling based on status */
.sidebar .credit-score-value.active {
    color: var(--text-color-1) !important;
    font-weight: bold;
}

.sidebar .credit-score-value.inactive {
    color: var(--danger-color, #ff0000) !important;
    font-weight: bold;
}

.sidebar .credit-score-value.pending {
    color: var(--orange-text, #f59e0b) !important;
    font-weight: bold;
}

.sidebar .credit-score-value.expired {
    color: var(--danger-color, #ff0000) !important;
    font-weight: bold;
}

.sidebar span.expired-text {
    color: var(--danger-color, #ff0000) !important;
    text-decoration: line-through;
    font-weight: bold;
}

.sidebar .credit-score-value.exceeds {
    color: var(--danger-color, #ff0000) !important;
    font-weight: bold;
}

.sidebar .credit-score-value.rejected {
    color: var(--danger-color, #ff0000) !important;
    font-weight: bold;
}

.sidebar .credit-score-value.active_unusable {
    color: var(--danger-color, #ff0000) !important;
    font-weight: bold;
}

.sidebar .credit-score-value.active_unusable_expired {
    color: var(--danger-color, #ff0000) !important;
    text-decoration: line-through;
    font-weight: bold;
}

.sidebar .credit-score-value.active_usable_expired {
    color: var(--danger-color, #ff0000) !important;
    text-decoration: line-through;
    font-weight: bold;
}

/* ====================================
 * 4. Sidebar Status Text Styling
 * ==================================== */

/* Sidebar status text variants */
.sidebar .status-text.active {
    color: var(--success-color, #32cd32);
}

.sidebar .status-text.inactive {
    color: var(--danger-color, #ff0000);
}

.sidebar .status-text.pending {
    color: var(--orange-text, #f59e0b);
}

.sidebar .status-text.expired {
    color: var(--danger-color, #ff0000);
}

.sidebar .status-text.exceeds {
    color: var(--danger-color, #ff0000);
}

.sidebar .status-text.rejected {
    color: var(--danger-color, #ff0000);
}

.sidebar .status-text.active_unusable {
    color: var(--danger-color, #ff0000);
}

.sidebar .status-text.active_unusable_expired {
    color: var(--danger-color, #ff0000);
}

.sidebar .status-text.active_usable_expired {
    color: var(--danger-color, #ff0000);
}

/* ====================================
 * 5. Note Styling
 * ==================================== */
.sidebar-note {
    color: var(--danger-color, #ff0000);
    font-size: 11px;
    margin-top: 2px;
    font-weight: 500;
}

.sidebar-note i {
    margin-right: 4px;
}

/* When pending with previous, use orange color */
.status-text.pending_with_previous,
.pending_with_previous .sidebar-note {
    color: var(--orange-text, #f59e0b);
}

/* Wallet card styles - with reduced padding */
.wallet-card {
  background: var(--wallet-gradient) !important;
  border-radius: var(--card-border-radius);
  padding: 7px !important;
  margin-top: 10px;
  position: relative;
  display: block !important;
  box-shadow: var(--icon-shadow);
  color: var(--text-color-1) !important;
}

.wallet-card-content {
  display: flex;
  flex-direction: column;
  gap: 3px; /* Reduced gap */
}

.wallet-card-top {
  display: flex;
  align-items: center;
  width: 100%;
}

.wallet-card-top i.fa-wallet {
  margin-right: 10px;
}

.wallet-card-top .text {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wallet-card-top .text .fa-angle-right {
  margin-right: 2px;
}

.wallet-amount {
  font-weight: bold;
  color: var(--text-color-1);
  font-size: 14px;
  padding-left: 28px;
}

.wallet-card:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

.menu ul li .wallet-card:hover {
  background: var(--wallet-gradient) !important;
  opacity: 0.9;
}

/* Sidebar navigation section */
.nav {
  flex: 1;
}

.menu {
  margin-bottom: 40px;
  margin-top: 10px;
}

.menu ul li {
  position: relative;
  list-style: none;
  margin-bottom: 5px;
}

.menu ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color-1);
  text-decoration: none;
  padding: 12px 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.menu ul li > a:hover {
  background-color: var(--greenish-theme);
  color: black;
}

.menu ul li .text {
  flex: 1;
}

.menu ul li .fa-chevron-down {
  font-size: 14px;
  transition: all 0.3s;
  transform: rotate(0deg);
}

.menu ul li.active .fa-chevron-down {
  transform: rotate(180deg);
}

.menu .sub-menu {
  display: none;
  margin-left: 20px;
  padding-left: 20px;
  padding-top: 5px;
  border-left: 1px solid var(--border-bottoms);
}

.menu .sub-menu li a {
  padding: 10px 8px;
  font-size: 12px;
}

.menu:not(:last-child) {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-bottoms);
}

.menu ul li:last-child {
  margin-bottom: 5px;
}

.menu:last-child {
  margin-top: auto;
  padding-bottom: 10px;
}

/* Logout button styles */
.logout-button {
  background: red;
  border-radius: 5px;
  border: none;
  padding: 5px;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  color: white !important;
  transition: background-color 0.3s;
  font-size: 13px;
  font-weight: bold;
}

.logout-button:hover {
  background-color: rgba(255, 0, 0, 0.6);
}

.logout-button i {
  margin-left: 5px;
  color: white !important;
}

/* ========== GLOBAL OVERLAY STYLES ========== */

body.sidebar-active {
  overflow: hidden;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-bg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}

body.sidebar-active::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ========== CONTENT AREA STYLES ========== */
.all-contents {
  transition: filter 0.3s;
}

body.sidebar-active .all-contents {
  filter: blur(2px);
}

/* ========== BOTTOM NAVBAR STYLES ========== */
.bottom-navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--navbar-color);
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 45px;
  box-shadow: var(--bottomnavbar-shadow);
  z-index: 999;
}

.bottom-nav-item {
  text-align: center;
  flex: 1;
  text-decoration: none;
  color: var(--text-color-1);
  font-weight: bold;
  margin-bottom: 4px;
}

.bottom-nav-item i {
  font-size: 18px;
  color: var(--text-color-1);
  margin-top: 8px;
}

.bottom-nav-item span {
  display: block;
  font-size: 12px;
  margin-top: 1px;
}

/* ========== CUSTOM SCROLLBAR STYLES ========== */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color-1);
}

::-webkit-scrollbar-thumb {
  background: var(--greenish-theme);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--greenish-theme);
}