:root {
  --primary-color: #37474f; /* main text color */
  --primary-light: #546e7a; /* lighter shade for hover or accents */
  --accent-color: #ffb74d; /* border and highlight color */
  --background-color: #fff3e0; /* background of sections */
  --hover-bg: rgba(255, 183, 77, 0.25); /* hover background tint */
  --text-light: #ffffff; /* light text on dark background */
  --border-radius: 12px;
  --box-shadow-color: rgba(55, 71, 79, 0.25);
}

.category-list {
  color: var(--primary-color); /* deep brown text */
  font-weight: 500;
  border: 3px solid var(--accent-color);
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

/* Category list items */
.list-group-item {
  background-color: transparent; /* Let background show through */
  border: none;
  border-bottom: 1.5px solid var(--accent-color); /* add custom separator */
  color: var(--primary-color);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* Remove the bottom border for the last item in the list */
.list-group-item:last-child {
  border-bottom: none;
}

.list-group-item:hover {
  background-color: var(--hover-bg); /* soft yellow hover */
  color: var(--primary-light);
}

/* Checkbox customization */
.category-checkbox {
  accent-color: var(--primary-light); /* dark brown checkmark */
  transform: scale(1.1);
  color: var(--primary-color);
}

/* Make category labels align better */
.list-group-item .d-flex.align-items-center {
  gap: 5px;
}

/* Dropdown button (Sort by) */
.dropdown-toggle {
  background-color: var(--background-color);
  color: var(--primary-color);
  border: 2px solid var(--accent-color);
  transition: all 0.3s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
  background-color: var(--primary-light);
  color: var(--text-light);
  border-color: var(--primary-light);
}

/* Dropdown menu items */
.dropdown-menu {
  background-color: var(--text-light);
  border-color: var(--accent-color);
}

.dropdown-item {
  color: var(--primary-color);
}

.dropdown-item:hover {
  background-color: var(--background-color); /* lighter yellow */
  color: var(--primary-light);
}

/* Fix for dark active state on Sort By button */
.btn:active,
.btn:hover,
.btn:focus,
.btn:focus-visible {
  color: var(--accent-color) !important; /* text color when pressed */
  background-color: var(
    --primary-light
  ) !important; /* optional: your darker brown tone */
  border-color: var(--primary-light) !important;
  box-shadow: none; /* removes Bootstrap's bright focus ring */
}

.category-checkbox input[type="checkbox"] {
  accent-color: var(--primary-color);
  transition: all 0.2s ease-in-out;
}

.category-checkbox input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--hover-bg);
}

/* subtle hover effect for user feedback */
.category-checkbox:hover input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}

/* keep label text color balanced with background */
.category-checkbox {
  color: var(--primary-color); /* dark warm tone for text */
}

/* Search input and button */
.input-group .form-control {
  border-color: var(--accent-color);
  color: var(--primary-color);
  background-color: #ffffff;
}

.input-group .form-control::placeholder {
  color: var(--primary-light);
}

#productsearchBtn {
  background-color: var(--primary-color);
  color: var(--text-light);
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
}

#productsearchBtn:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}

/* Adjust small text (softer tone) */
.small,
.fw-bold {
  color: var(--primary-color) !important;
}

.category-list:hover {
  box-shadow: 0 6px 12px var(--box-shadow-color);
  /* transition: box-shadow 0.3s ease; */
}

/* ===== Store Products Section (Scoped Styles) ===== */

.store-products {
  background-color: var(--background-color); /* same as sidebar tone */
  border: 3px solid var(--accent-color); /* matches left column border */
  border-radius: var(--border-radius);
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

/* Optional hover lift for the whole section */
.store-products:hover {
  box-shadow: 0 6px 12px var(--box-shadow-color);
  /* transition: box-shadow 0.3s ease; */
}

.store-products .item-count {
  background-color: var(--accent-color) !important;
  color: var(--primary-color) !important;
  font-weight: 600;
  border: 1px solid var(--primary-color);
}

.store-products .list-group-item {
  transition:
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  background-color: transparent; /* base */
  border-bottom: 1.5px solid var(--accent-color);
}

.store-products .list-group-item h5 {
  color: var(--primary-color);
  font-weight: 600;
}

.store-products .list-group-item p {
  color: var(--primary-light);
}

.store-products .btn-warning:hover {
  background-color: var(--accent-color) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.store-products .list-group-item:hover {
  background-color: var(--hover-bg); /* same soft yellow as categories */
  color: var(--primary-color); /* deep brown text rgb(62, 39, 35)*/
  transform: translateY(-2px); /* subtle lift effect */
  box-shadow: 0 2px 6px var(--box-shadow-color);
}

.store-section-header {
  background-color: rgb(55, 71, 79, 0.85);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  color: var(--accent-color);
  font-weight: bold;
  padding: 10px 15px;
  /* transition: none; */
  text-decoration: none;
}