body {
  background-color: #f4f2f2;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
}
.navbar-brand img {
  margin-right: 8px;
}

.navbar .btn {
  font-weight: bold;
}

.navbar .navbar-text {
  font-size: 1rem;
}

.navbar {
  background-color: #bfeff2;
  padding: 16px 37px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}


.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(153, 153, 59);
  margin: 0; 
  line-height: 1.2;
}
/* .navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-text {
    color: rgb(255, 255, 255) !important;
} */
 /* 1. Custom navbar background */
.navbar-custom {
  background-color: #e0edf6; /* dark gray-blue, softer than pure black */
/* Alternatively, use a semi-transparent overlay:
   background-color: rgba(42, 47, 53, 0.95); */
}

/* 2. Text and links styling */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
  color: #f1f1f1;           /* light gray for better eye comfort */
  transition: color 0.2s;
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-brand:hover {
  color: #ffffff;           /* pure white on hover */
}

/* 3. Active/current link highlight */
.navbar-custom .navbar-nav .nav-item .nav-link.active {
  color: #1abc9c;           /* accent color when active */
}

/* 4. Toggler (hamburger) icon color */
.navbar-custom .navbar-toggler-icon {
  filter: invert(0.8);      /* lightens the default icon */
}

.navbar .btn-warning {
    background-color: #f78025; /* Keep Logout button */
}
.navbar .btn-success {
    background-color: #04a02e; /* Brighter green for Cart */
    color: white;
}

.navbar a, .navbar .btn-login, .navbar .btn-register, .navbar .btn-cart {
  margin: 0 5px;
  line-height: 1.2;
}

.navbar img, .navbar i, .navbar svg {
  height: 32px !important;
  width: auto !important;
}


/* Product Card */
.box-element.product {
  background: rgb(246, 248, 246);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(79, 77, 77, 0.1);
  padding: 15px;
  transition: transform 0.2s;
 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}


.row.gx-4 {
    margin-right: 0;
    margin-left: 0;
}

.box-element.product:hover {
  transform: scale(1.08); /* Increase size by 3% */
  z-index: 2; /* Optional: lifts it above nearby elements */
}



.thumbnail {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  background: #f9f9f9;
  padding: 5px;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

/* 
.thumbnail:hover {
  transform: scale(1.1);
} */


.product-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #282222;
  margin: 10px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.add-btn, .btn-outline-success {
  border-radius: 20px;
  padding: 4px 14px;
  font-weight: 500;
  font-size: 0.9rem;
}

.wholesale-price, .regular-price {
  font-size: 1rem;
  color: #cb2929;
  font-weight: 600;
}
.row {
  align-items: flex-start;
}
/* Ensure arrows maintain a reasonable size */
.chg-quantity img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Optionally add spacing around the icons */
.chg-quantity img + img {
  margin-top: 4px;
}

@media (max-width: 991.98px) {  /* Bootstrap lg breakpoint */
  .navbar-collapse .d-flex.align-items-center {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .navbar-collapse .btn,
  .navbar-collapse #profile,
  .navbar-collapse a.text-decoration-none {
    margin-bottom: 0.5rem;
  }
}


/* Sidebar Filter Box */
/* Sidebar overall */
.sidebar-filter {
  width: 100%;
  padding: 0 10px;
  max-width: none; /* remove the max-width */
}

/* Common box style */
.filter-box {
  background-color: rgba(75, 165, 123, 0.1);
  border-radius: 12px;
  border-left: 5px solid #7e8382;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: auto;
}

.filter-box, .filter-scroll {
  width: 100%;
  box-sizing: border-box; /* so padding doesn't overflow */
}
/* Individual styles */
.main-category-box {
  border-left-color: #ff7f50;
  background-color: rgba(255, 239, 221, 0.85);
}

.sub-category-box {
  border-left-color: #4dabf7;
  background-color: rgba(221, 243, 255, 0.85);
}

.brand-box {
  border-left-color: #6abf69;
  background-color: rgba(232, 255, 236, 0.85);
}

/* Scrollable inside filter list only */
.filter-scroll {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Scrollbar for webkit */
.filter-scroll::-webkit-scrollbar {
  width: 6px;
}
.filter-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.3);
  border-radius: 10px;
}

/* Title and items */
.filter-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #3a3b3c;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.filter-item a {
  display: block;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #262627;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.filter-item a:hover {
  background-color: #d66117;
  color: #fff;
}

.zoom-on-hover {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
}

.zoom-on-hover:hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

.image-wrapper {
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #eee;
}

.scale-on-hover {
  transition: transform 0.9s ease;
  will-change: transform;
}

.scale-on-hover:hover {
  transform: scale(1.3); /* Scale up smoothly */
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Take remaining vertical space */
}