/* ============================================================
   ЗООМАГАЗИН — кастомная тема для OpenCart 4.x
   Подключается ПОСЛЕ stylesheet.css
   Все цвета и размеры меняются в блоке :root ниже
   ============================================================ */

/* ---------- ПЕРЕМЕННЫЕ: СВЕТЛАЯ ТЕМА ---------- */
:root {
  /* Основной акцент (кнопки, цены, акции) */
  --color-primary: #E8853D;
  /* Основной акцент при наведении (чуть темнее) */
  --color-primary-hover: #D67428;
  /* Текст на основных кнопках */
  --color-on-primary: #FFFFFF;
  /* Второй акцент (наличие, новинки, успех) */
  --color-secondary: #6B9E5F;
  /* Второй акцент при наведении */
  --color-secondary-hover: #5A8B4F;
  /* Фон всей страницы */
  --color-bg: #FAF6F0;
  /* Фон карточек, блоков, шапки */
  --color-card: #FFFFFF;
  /* Мягкая подложка (блок цены на странице товара) */
  --color-soft: #FDF3E7;
  /* Основной текст */
  --color-text: #3E3226;
  /* Вторичный текст (подписи, хлебные крошки) */
  --color-text-muted: #8A7D6E;
  /* Рамки и разделители */
  --color-border: #E5DCCF;
  /* Фон футера */
  --color-footer: #3F5C38;
  /* Текст футера */
  --color-footer-text: #EAF3DE;
  /* Ссылки футера при наведении */
  --color-footer-link: #F0B27A;
  /* Зачёркнутая старая цена */
  --color-price-old: #B4A99A;

  /* Скругление основных кнопок (форма пилюли) */
  --radius-button: 24px;
  /* Скругление карточек товара */
  --radius-card: 16px;
  /* Скругление полей ввода */
  --radius-input: 12px;

  /* Тень карточек */
  --shadow-card: 0 2px 12px rgba(62, 50, 38, 0.08);
  /* Тень карточек при наведении */
  --shadow-card-hover: 0 6px 20px rgba(62, 50, 38, 0.14);

  /* Шрифты */
  --font-heading: 'Nunito', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
}

/* ---------- ПЕРЕМЕННЫЕ: ТЁМНАЯ ТЕМА (ручной переключатель) ---------- */
body.dark-theme {
  --color-primary: #F09A52;
  --color-primary-hover: #E8853D;
  --color-on-primary: #211A13;
  --color-secondary: #8FBC82;
  --color-secondary-hover: #7CAB6E;
  --color-bg: #211A13;
  --color-card: #2E251B;
  --color-soft: #382D20;
  --color-text: #F3EBDD;
  --color-text-muted: #A89880;
  --color-border: #3E3428;
  --color-footer: #1A2318;
  --color-footer-text: #C9DCC0;
  --color-footer-link: #F0B27A;
  --color-price-old: #7A6D5A;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ---------- ТЁМНАЯ ТЕМА АВТОМАТИЧЕСКИ (ночной режим устройства) ----------
   Работает, только если пользователь НЕ выбирал тему вручную
   (скрипт theme-toggle.js ставит класс light-theme / dark-theme) */
@media (prefers-color-scheme: dark) {
  body:not(.light-theme) {
    --color-primary: #F09A52;
    --color-primary-hover: #E8853D;
    --color-on-primary: #211A13;
    --color-secondary: #8FBC82;
    --color-secondary-hover: #7CAB6E;
    --color-bg: #211A13;
    --color-card: #2E251B;
    --color-soft: #382D20;
    --color-text: #F3EBDD;
    --color-text-muted: #A89880;
    --color-border: #3E3428;
    --color-footer: #1A2318;
    --color-footer-text: #C9DCC0;
    --color-footer-link: #F0B27A;
    --color-price-old: #7A6D5A;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================================
   БАЗА: фон, текст, шрифты
   ============================================================ */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-text);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

legend, fieldset legend {
  color: var(--color-text);
  border-color: var(--color-border);
}

hr { border-color: var(--color-border); opacity: 1; }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary,
#button-cart {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 26px;
  box-shadow: 0 2px 8px rgba(232, 133, 61, 0.3);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
#button-cart:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  transform: translateY(-2px);
}

.btn-secondary, .btn-light, .btn-outline-dark, .btn-default {
  background-color: var(--color-card);
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
}
.btn-secondary:hover, .btn-light:hover,
.btn-outline-dark:hover, .btn-default:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-success {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-success:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-danger { border-radius: var(--radius-button); }

/* ============================================================
   ПОЛЯ ВВОДА
   ============================================================ */
.form-control, .form-select, select, textarea {
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  background-color: var(--color-card);
  color: var(--color-text);
  padding: 9px 14px;
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 133, 61, 0.18);
  background-color: var(--color-card);
  color: var(--color-text);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-label, label { color: var(--color-text); }

/* ============================================================
   ШАПКА
   ============================================================ */
header {
  background-color: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(62, 50, 38, 0.06);
}

/* Поиск в шапке */
#search .form-control {
  border-radius: 20px 0 0 20px;
  border-right: none;
}
#search .btn {
  border-radius: 0 20px 20px 0;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
#search .btn:hover {
  background-color: var(--color-primary-hover);
  transform: none;
}

/* Кнопка корзины в шапке */
#header-cart .btn,
#header-cart .dropdown-toggle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-button);
}
#header-cart .dropdown-menu {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-card-hover);
  color: var(--color-text);
}
#header-cart .dropdown-menu td { color: var(--color-text); }

/* Главное меню категорий */
#menu, .navbar {
  background-color: var(--color-card) !important;
  border: none;
  border-bottom: 1px solid var(--color-border);
}
#menu .nav-link, .navbar .nav-link, #menu .dropdown-item {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
}
#menu .nav-link:hover, .navbar .nav-link:hover {
  color: var(--color-secondary);
  box-shadow: inset 0 -2px 0 var(--color-secondary);
  background: transparent;
}
#menu .dropdown-menu {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-card);
}
#menu .dropdown-item:hover {
  background-color: var(--color-soft);
  color: var(--color-secondary);
}

/* Верхняя полоска (валюта, телефон, кабинет) */
#top {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
#top a, #top .dropdown-toggle, #top span { color: var(--color-text-muted); }
#top a:hover { color: var(--color-primary); }
#top .dropdown-menu {
  background-color: var(--color-card);
  border-color: var(--color-border);
}
#top .dropdown-item { color: var(--color-text); }
#top .dropdown-item:hover { background-color: var(--color-soft); }

/* Хлебные крошки */
.breadcrumb {
  background: transparent;
  font-size: 13px;
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

/* ============================================================
   КАРТОЧКИ ТОВАРА В КАТАЛОГЕ
   ============================================================ */
.product-thumb {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-thumb:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.product-thumb .image {
  background-color: #FFFFFF;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.product-thumb .image img { border-radius: 0; }
.product-thumb .description,
.product-thumb .content { color: var(--color-text-muted); }
.product-thumb h4 a, .product-thumb .name a {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}
.product-thumb h4 a:hover, .product-thumb .name a:hover {
  color: var(--color-primary);
}

/* Цены */
.price, .product-thumb .price {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
}
.price-new { color: var(--color-primary); font-weight: 800; }
.price-old {
  color: var(--color-price-old);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.85em;
}
.price-tax { color: var(--color-text-muted); font-size: 12px; font-weight: 400; }

/* Кнопки внутри карточки товара */
.product-thumb .button-group,
.product-thumb .btn-group { border-top: none; background: transparent; }
.product-thumb button {
  border-radius: var(--radius-button);
}

/* ============================================================
   СТРАНИЦА ТОВАРА
   ============================================================ */
#product {
  background-color: var(--color-soft);
  border-radius: 14px;
  padding: 18px;
}
.rating .fa-star { color: var(--color-primary); }

/* Миниатюры галереи */
.image-additional img, .thumbnails img {
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
}
.image-additional a:hover img { border-color: var(--color-primary); }

/* Наличие товара */
.stock-status, li.in-stock { color: var(--color-secondary); font-weight: 700; }

/* Табы: описание / характеристики / отзывы */
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
}
.nav-tabs .nav-link {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  border: none;
  border-radius: 12px 12px 0 0;
}
.nav-tabs .nav-link:hover { color: var(--color-primary); border: none; }
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-bottom-color: var(--color-card);
}
.tab-content {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 18px;
  color: var(--color-text);
}

/* ============================================================
   ТАБЛИЦЫ, СПИСКИ, ПАНЕЛИ (корзина, кабинет, оформление)
   ============================================================ */
.table {
  color: var(--color-text);
  border-color: var(--color-border);
  background-color: var(--color-card);
}
.table > :not(caption) > * > * {
  background-color: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}
.table thead td, .table thead th {
  background-color: var(--color-soft);
  font-family: var(--font-heading);
  font-weight: 700;
}

.card, .list-group-item, .modal-content, .dropdown-menu {
  background-color: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text);
}
.card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-header {
  background-color: var(--color-soft);
  border-bottom-color: var(--color-border);
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}
.list-group-item a { color: var(--color-text); text-decoration: none; }
.list-group-item:hover, .list-group-item a:hover { color: var(--color-primary); }

.alert { border-radius: var(--radius-input); }
.alert-success {
  background-color: rgba(107, 158, 95, 0.15);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.alert-danger { border-radius: var(--radius-input); }

.badge { border-radius: 10px; font-weight: 700; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--color-primary) !important; }

/* Пагинация */
.pagination .page-link {
  color: var(--color-text);
  background-color: var(--color-card);
  border-color: var(--color-border);
  border-radius: 10px;
  margin: 0 3px;
}
.pagination .page-link:hover { color: var(--color-primary); background-color: var(--color-soft); }
.pagination .active > .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Модальные окна */
.modal-content { border-radius: var(--radius-card); }
.modal-header { border-bottom-color: var(--color-border); }
.modal-footer { border-top-color: var(--color-border); }

/* ============================================================
   ФУТЕР
   ============================================================ */
footer {
  background-color: var(--color-footer) !important;
  color: var(--color-footer-text);
  border-top: none;
  margin-top: 30px;
}
footer h5, footer h4 {
  color: var(--color-footer-text);
  font-family: var(--font-heading);
  font-weight: 800;
}
footer a { color: var(--color-footer-text); text-decoration: none; }
footer a:hover { color: var(--color-footer-link); }
footer hr { border-color: rgba(255, 255, 255, 0.15); }

/* ============================================================
   КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ (создаётся скриптом theme-toggle.js)
   ============================================================ */
#theme-toggle-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-card);
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card-hover);
  transition: transform 0.2s ease;
}
#theme-toggle-btn:hover { transform: scale(1.1); }

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 767px) {
  .btn, .product-thumb button {
    min-height: 44px; /* удобно для пальца */
  }
  .product-thumb { border-radius: 14px; }
  #product { padding: 14px; }
  body { font-size: 14px; }
  img { max-width: 100%; height: auto; }
  #theme-toggle-btn { right: 12px; bottom: 12px; }
}

/* Плавность только там, где дёшево для производительности:
   анимируются transform / opacity / цвета, не размеры */

/* ============================================================
   ПРАВКИ ПОСЛЕ ПРОСМОТРА САЙТА
   ============================================================ */

/* Синяя полоса меню категорий → белая в стиле темы */
#menu, nav#menu, #menu .navbar {
  background: var(--color-card) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px;
}
#menu a, #menu .nav-link, #menu .navbar-nav > li > a {
  color: var(--color-text) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  text-shadow: none !important;
}
#menu a:hover, #menu .nav-link:hover {
  color: var(--color-secondary) !important;
  background: transparent !important;
}

/* Чёрная кнопка корзины в шапке → оранжевая */
#header-cart .btn, #header-cart button,
#cart .btn, #cart button, #cart .btn-inverse, #cart .btn-dark {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border-radius: var(--radius-button) !important;
  text-shadow: none !important;
}
#cart .btn:hover, #header-cart .btn:hover {
  background: var(--color-primary-hover) !important;
}

/* Синяя подсветка выбранной категории в левой колонке → зелёная */
.list-group-item.active,
.list-group-item.active:hover,
.list-group a.active {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
}
.list-group-item.active a { color: #FFFFFF !important; }

/* Скругляем сам блок категорий */
.list-group {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* ============================================================
   ГАРМОНИЗАЦИЯ ШАПКИ И ШИРИНА САЙТА
   ============================================================ */

/* 1. Верхняя полоса (язык, телефон, кабинет) — в один тон с шапкой */
#top {
  background-color: var(--color-card) !important;
  background-image: none !important;
  border-bottom: none;
}
#top a, #top span, #top .dropdown-toggle, #top li {
  color: var(--color-text-muted) !important;
}
#top a:hover { color: var(--color-primary) !important; }

/* Шапка и верхняя полоса теперь единый блок с одной нижней границей */
header {
  background-color: var(--color-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Резиновая ширина: сайт сам подстраивается под любой экран.
   Поля по бокам задаются переменной ниже */
:root {
  --page-side-padding: 2.5%; /* отступ слева и справа от края экрана */
}

@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: none !important;
    width: auto !important;
    margin-left: var(--page-side-padding) !important;
    margin-right: var(--page-side-padding) !important;
  }
}
/* ============================================================
   ШАПКА КАК НА МАКЕТЕ: выравнивание + заметный поиск
   ============================================================ */

/* Всё содержимое шапки — по центру по вертикали */
header .row {
  align-items: center;
}
header {
  padding-top: 10px;
  padding-bottom: 10px;
}
#logo { margin: 0; }

/* Поиск-«пилюля»: поле и кнопка — единое скруглённое целое */
#search {
  flex-wrap: nowrap;
}
#search .form-control {
  border-radius: 24px 0 0 24px !important;
  border: 2px solid var(--color-border);
  border-right: none;
  background-color: var(--color-bg);
  height: 46px;
  padding-left: 20px;
  font-size: 15px;
  box-shadow: none;
}
#search .form-control:focus {
  border-color: var(--color-primary);
  background-color: var(--color-card);
}
#search .btn, #search button {
  border-radius: 0 24px 24px 0 !important;
  background: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  height: 46px;
  min-width: 56px;
  transform: none !important;
  box-shadow: none;
}
#search .btn:hover { background: var(--color-primary-hover) !important; }

/* Кнопка корзины — той же высоты, что и поиск, для симметрии */
#cart { margin-bottom: 0 !important; }
#cart .btn, #header-cart .btn {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Убираем лишнюю линию-«ступеньку» между шапкой и меню */
header { border-bottom: none; }
#menu, nav#menu {
  margin-top: 4px;
}/* ===== Шапка в одну линию (под новый header.twig) ===== */
.header-line { gap: 24px; padding: 6px 0; }
.header-logo img { max-height: 56px; width: auto; }
.header-search { min-width: 0; }
.header-cart { flex-shrink: 0; min-width: 220px; }

/* Мобильные: логотип+корзина в строку, поиск под ними во всю ширину */
@media (max-width: 767px) {
  .header-line { gap: 12px; }
  .header-logo { order: 1; }
  .header-cart { order: 2; margin-left: auto; min-width: auto; }
  .header-search { order: 3; flex-basis: 100%; }
}