/*
Custom Css
*/
#user-info-ico {
  cursor: pointer;
}

/*
Global color palette for fashion e-commerce
Use CSS variables so we can theme across the site by overriding Bootstrap utilities
*/
:root {
  /* brand colors */
  --color-primary: #111827; /* Charcoal (elegant, gender-neutral) */
  --color-secondary: #E11D48; /* Rose (fashion accent) */
  --color-accent: #0EA5E9; /* Sky blue (fresh accent) */

  /* semantic colors */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;
  --color-info: #06B6D4;

  /* neutrals */
  --color-text: #111827; /* main text */
  --color-muted: #6B7280; /* secondary text */
  --color-bg: #FFFFFF; /* page background */
  --color-surface: #cdcac4; /* cards, sections */
  --color-border: #E5E7EB; /* dividers */
  
  /* navbar specific colors */
  --navbar-bg: #FFFFFF; /* navbar background color */
  --navbar-text: #111827; /* navbar text color */
  --navbar-border: #E5E7EB; /* navbar border color */
}

/*
Base text and background
*/
body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Links */
a { color: var(--color-secondary); }
a:hover, a:focus { color: #be123c; text-decoration: none; }

/* Buttons - primary */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #0b1220;
  border-color: #0b1220;
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* Buttons - secondary */
.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-outline-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--color-secondary);
  color: #ffffff;
}

/* Semantic buttons */
.btn-success { background-color: var(--color-success); border-color: var(--color-success); }
.btn-warning { background-color: var(--color-warning); border-color: var(--color-warning); color: #111827; }
.btn-danger  { background-color: var(--color-danger);  border-color: var(--color-danger); }
.btn-info    { background-color: var(--color-info);    border-color: var(--color-info); }

/* Text and background utilities override */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.text-muted { color: var(--color-muted) !important; }
.bg-light { background-color: var(--color-surface) !important; }

/* Navbar */
.navbar, .navbar-light, .navbar-dark {
  background-color: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
}
.navbar-light .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link {
  color: var(--navbar-text);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.active {
  color: var(--color-secondary);
}
.navbar-brand { color: var(--color-primary); }
.navbar-brand:hover { color: var(--color-secondary); }

/* Header/hero sections */
.hero, .page-header, .header-banner {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Cards & product tiles */
.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
}
.card .card-title { color: var(--color-primary); }
.card .price, .card .text-muted { color: var(--color-muted); }
.card:hover { box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08); }

/* Badges */
.badge-primary { background-color: var(--color-primary); }
.badge-secondary { background-color: var(--color-secondary); }

/* Pagination */
.page-link { color: var(--color-primary); }
.page-link:hover { color: var(--color-secondary); }
.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Forms */
.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .2rem rgba(14, 165, 233, 0.25);
}

/* Footer */
footer {
  background-color: var(--color-primary);
  color: #ffffff;
}
footer a { color: #ffffff; opacity: 0.9; }
footer a:hover { opacity: 1; color: #ffffff; }

/* Slick carousel dots (if used) */
.slick-dots li button:before { color: var(--color-muted); }
.slick-dots li.slick-active button:before { color: var(--color-secondary); }

/* Alerts */
.alert-primary { background-color: rgba(17,24,39,0.08); border-color: var(--color-primary); color: var(--color-primary); }
.alert-secondary { background-color: rgba(225,29,72,0.08); border-color: var(--color-secondary); color: var(--color-secondary); }

/*
Dark mode theme using [data-theme="dark"] on <html> or <body>
*/
[data-theme="dark"] {
  --color-primary: #F3F4F6; /* swap to light text */
  --color-secondary: #F472B6; /* softer rose */
  --color-accent: #38BDF8;

  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-info: #22D3EE;

  --color-text: #E5E7EB;
  --color-muted: #9CA3AF;
  --color-bg: #0B1020; /* deep navy */
  --color-surface: #121932; /* elevated surfaces */
  --color-border: #1F2937;
  
  /* navbar specific colors for dark theme */
  --navbar-bg: #121932; /* dark navbar background */
  --navbar-text: #E5E7EB; /* light navbar text */
  --navbar-border: #1F2937; /* dark navbar border */
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-light,
[data-theme="dark"] .navbar-dark {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .card { background-color: #0f152a; border-color: var(--color-border); }
[data-theme="dark"] .page-link { color: var(--color-secondary); }
[data-theme="dark"] .modal-content { background-color: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .form-control { background-color: #0f152a; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .form-control::placeholder { color: var(--color-muted); }
[data-theme="dark"] .bg-light { background-color: #0f152a !important; }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  margin-left: 8px;
}
.theme-toggle:hover { background-color: rgba(0,0,0,0.05); }
[data-theme="dark"] .theme-toggle:hover { background-color: rgba(255,255,255,0.06); }