:root {
  --primary-color: #1b5e20; /* main text color */
  --primary-light: #388e3c; /* lighter shade for hover or accents */
  --accent-color: #81c784; /* border and highlight color */
  --background-color: #e8f5e9; /* background of sections */
  --hover-bg: #c8e6c9; /* hover background tint */
  --text-light: #f1f8e9; /* light text on dark background */
  --border-radius: 10px;
  --box-shadow-color: rgba(27, 94, 32, 0.3);
}

/* header and footer overrides */
:root {
  --primary-bg: var(--accent-color); /* Header/footer background */
  --primary-text: var(
    --primary-color
  ); /* Text inside header/footer and buttons */
  --primary-hover: var(--primary-light); /* Hover text and color accents */

  --success-text: var(--primary-light);
  --success-bg: var(--hover-bg);
  --error-text: var(--primary-light);
  --error-bg: var(--hover-bg);
}

.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;
}

/* 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);
}

/* 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 */
.news-items .btn:active,
.news-items .btn:hover,
.news-items .btn:focus,
.news-items .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;
}

/* ===== News Items Section (Scoped Styles) ===== */

.news-items {
  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;
}

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

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

.news-items .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);
}

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

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

.news-items .btn-success:hover {
  background-color: var(--accent-color) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.news-items .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);
}

.news-section-header {
  background-color: var(--primary-color);
  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;
}