/* catalog/view/stylesheet/custom.css */
/* ==========================================================================
   DARK GRAPHITE & RED ACCENT — OpenCart 4.1.0.4
   ВИПРАВЛЕНО ПІД РЕАЛЬНУ РОЗМІТКУ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ЗМІННІ BOOTSTRAP 5 + ГЛОБАЛЬНІ
   -------------------------------------------------------------------------- */
:root {
  --main-bg: #121212;
  --card-bg: #1a1a1a;
  --text-color: #f1f1f1;
  --text-muted: #aaaaaa;
  --accent-color: #e50914;
  --accent-hover: #b80710;
  --border-color: #2e2e2e;

  /* Bootstrap 5 override — прибирає синій СКРІЗЬ */
  --bs-primary: #e50914;
  --bs-primary-rgb: 229, 9, 20;
  --bs-link-color: #ffffff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #e50914;
  --bs-link-hover-color-rgb: 229, 9, 20;
  --bs-body-bg: #121212;
  --bs-body-color: #f1f1f1;
  --bs-border-color: #2e2e2e;
  --bs-secondary-bg: #1a1a1a;
  --bs-tertiary-bg: #242424;
}

/* --------------------------------------------------------------------------
   2. БАЗА
   -------------------------------------------------------------------------- */
html, body {
  background-color: var(--main-bg) !important;
  color: var(--text-color) !important;
}

#container, main, #content {
  background-color: var(--main-bg) !important;
  color: var(--text-color) !important;
}

/* Всі посилання */
a, a:visited { color: #ffffff; text-decoration: none; }
a:hover, a:focus { color: var(--accent-color) !important; }

/* --------------------------------------------------------------------------
   3. ПРИБИРАЄМО СИНІЙ `bg-primary` — ГОЛОВНЕ МЕНЮ
   -------------------------------------------------------------------------- */
/* Це критично: Bootstrap 5 використовує --bs-primary-rgb для bg-primary */
#menu.bg-primary,
#menu.navbar.bg-primary,
nav#menu,
#menu {
  background-color: #1a1a1a !important;
  background-image: none !important;
  --bs-bg-opacity: 1;
  --bs-primary-rgb: 26, 26, 26;
  border-bottom: 1px solid var(--border-color) !important;
}

/* --------------------------------------------------------------------------
   4. ПУНКТИ МЕНЮ — ВАЖЛИВО: є і nav-link, і dropdown-item!
   -------------------------------------------------------------------------- */
#menu .nav-link,
#menu .nav-item > a,
#menu .nav-item > .dropdown-item,
#menu .navbar-nav > .nav-item > a {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1rem !important;
  background-color: transparent !important;
  transition: all 0.2s ease;
}

#menu .nav-link:hover,
#menu .nav-link:focus,
#menu .nav-link.active,
#menu .nav-item > a:hover,
#menu .nav-item > .dropdown-item:hover,
#menu .show > .nav-link {
  color: var(--accent-color) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown-підменю */
#menu .dropdown-menu {
  background-color: #1f1f1f !important;
  border: 1px solid #333 !important;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

/* ВАЖЛИВО: .dropdown-inner існує! І .dropdown-item всередині */
#menu .dropdown-menu .dropdown-item,
#menu .dropdown-inner .dropdown-item,
#menu .dropdown-menu a {
  color: #cccccc !important;
  padding: 0.5rem 1.2rem;
  background-color: transparent !important;
}

#menu .dropdown-menu .dropdown-item:hover,
#menu .dropdown-inner .dropdown-item:hover {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* Кнопка-гамбургер */
.navbar-toggler {
  background-color: #2b2b2b !important;
  border: 1px solid #3d3d3d !important;
  color: #fff !important;
}
.navbar-toggler-icon, .navbar-toggler i {
  color: #fff !important;
  filter: invert(1);
}
#category {
  color: #ffffff !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. ШАПКА (#top, header, #cart)
   -------------------------------------------------------------------------- */
#top, header, #header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: #fff !important;
}

#top a, #top .dropdown-toggle, #top span[role="button"] {
  color: #ffffff !important;
}
#top a:hover { color: var(--accent-color) !important; }

/* Кошик */
#cart .btn-dark,
#cart .btn {
  background-color: #2b2b2b !important;
  border-color: #383838 !important;
  color: #fff !important;
}
#cart .btn-dark:hover,
#cart .btn:hover,
#cart .btn[aria-expanded="true"] {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* --------------------------------------------------------------------------
   6. SIDEBAR — КАТЕГОРІЇ (list-group)
   -------------------------------------------------------------------------- */
.list-group-item {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: #ffffff !important;
}

.list-group-item.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.list-group-item:hover {
  background-color: #242424 !important;
  color: var(--accent-color) !important;
}

/* --------------------------------------------------------------------------
   7. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  background-color: transparent !important;
}
.breadcrumb-item a { color: #ffffff !important; }
.breadcrumb-item a:hover { color: var(--accent-color) !important; }
.breadcrumb-item.active { color: var(--text-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }

/* --------------------------------------------------------------------------
   8. КАРТКИ ТОВАРІВ — НАЗВИ ТОВАРІВ (ГОЛОВНЕ!)
   -------------------------------------------------------------------------- */
.product-thumb {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  border-color: #444 !important;
}

/* НАЗВИ ТОВАРІВ — h4 > a всередині .description */
.product-thumb .description h4,
.product-thumb .description h4 a,
.product-thumb h4,
.product-thumb h4 a,
.product-thumb .caption h4 a,
.product-thumb .product-name a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none !important;
}

.product-thumb .description h4 a:hover,
.product-thumb h4 a:hover,
.product-thumb .caption h4 a:hover {
  color: var(--accent-color) !important;
}

/* Опис */
.product-thumb .description p {
  color: var(--text-muted) !important;
}

/* Ціна */
.product-thumb .price,
.product-thumb .price-new {
  color: var(--accent-color) !important;
  font-size: 1.15rem;
  font-weight: 700;
}
.product-thumb .price-old {
  color: var(--text-muted) !important;
  text-decoration: line-through;
}

/* Кнопки під карткою (іконки) */
.product-thumb .button,
.product-thumb .button-group {
  background-color: transparent !important;
  border-top: 1px solid var(--border-color) !important;
  padding-top: 10px;
  margin-top: 10px;
}

.product-thumb .button button,
.product-thumb .button-group button,
.product-thumb .button .btn,
.product-thumb .button-group .btn {
  background-color: #2b2b2b !important;
  border: 1px solid #383838 !important;
  color: #ffffff !important;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.product-thumb .button button:hover,
.product-thumb .button-group button:hover,
.product-thumb .button .btn:hover,
.product-thumb .button-group .btn:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   9. КНОПКИ — ПРИБИРАЄМО СИНІЙ btn-primary, btn-light.active
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn-light,
.btn-secondary,
.btn-dark,
.btn-outline-secondary {
  background-color: #2b2b2b !important;
  border-color: #383838 !important;
  color: #fff !important;
}
.btn-light:hover,
.btn-secondary:hover,
.btn-dark:hover,
.btn-outline-secondary:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

/* ВАЖЛИВО: активна кнопка "сітка" була синьою */
.btn-light.active,
.btn-light:active,
.btn-check:checked + .btn-light {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   10. ФОРМИ
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text,
.form-check-input {
  background-color: #242424 !important;
  border: 1px solid var(--border-color) !important;
  color: #fff !important;
}
.input-group-text {
  background-color: #2b2b2b !important;
}
.form-control::placeholder { color: #888 !important; }
.form-check-input:checked {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* --------------------------------------------------------------------------
   11. ПАГІНАЦІЯ
   -------------------------------------------------------------------------- */
.pagination {
  --bs-pagination-bg: #242424;
  --bs-pagination-color: #fff;
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-hover-bg: var(--accent-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-border-color: var(--accent-color);
  --bs-pagination-active-bg: var(--accent-color);
  --bs-pagination-active-border-color: var(--accent-color);
}
.pagination .page-link {
  background-color: #242424 !important;
  border-color: var(--border-color) !important;
  color: #fff !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* --------------------------------------------------------------------------
   12. ФУТЕР
   -------------------------------------------------------------------------- */
footer {
  background-color: #0d0d0d !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}
footer a { color: #cccccc !important; }
footer a:hover { color: var(--accent-color) !important; }
footer h5 { color: #ffffff !important; }
footer hr { border-color: var(--border-color) !important; }

/* ЯДЕРНЕ ПРИБИРАННЯ СИНЬОГО */
[class*="bg-primary"],
[class*="text-bg-primary"],
.btn-primary,
.badge.bg-primary,
.alert-primary,
.list-group-item.active,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
  background-color: #e50914 !important;
  border-color: #e50914 !important;
  color: #ffffff !important;
}

a, a:visited,
.text-primary,
.link-primary,
.dropdown-item,
.nav-link,
.list-group-item-action {
  color: #ffffff !important;
}
a:hover, .dropdown-item:hover, .nav-link:hover {
  color: #e50914 !important;
}