/*
 * Тёмная тема (авто, по системной настройке устройства).
 * Активируется через @media (prefers-color-scheme: dark) — переключателя нет.
 * Грузится ПОСЛЕ style.css, поэтому переопределяет светлые значения.
 */

@media (prefers-color-scheme: dark) {
  :root {
    --dk-bg: #13160f;          /* фон страницы, тёплый зелёно-чёрный */
    --dk-surface: #1b1f16;     /* шапка, карточки */
    --dk-surface-2: #232819;   /* приподнятые блоки, hover */
    --dk-border: #343b2a;
    --dk-text: #e7e8e0;
    --dk-text-muted: #a4a898;
    --dk-accent: #8bc34a;      /* брендовый зелёный, осветлён под тёмный фон */
    --dk-accent-hover: #a6da63;
    --dk-shadow: rgba(0, 0, 0, 0.45);
  }

  /* ---- База ---- */
  body {
    background-color: var(--dk-bg);
    color: var(--dk-text);
  }

  a { color: var(--dk-text); }
  a:hover { color: var(--dk-accent); }

  h1, h2, h3, h4, h5, h6 { color: var(--dk-text); }

  /* Преловдер */
  .preloader-area-wrap,
  .open_tm_preloader { background-color: var(--dk-bg); }

  /* Любые захардкоженные белые фоны крупных секций */
  .main-header-area,
  .header-middle,
  .header-bottom,
  .header-sticky {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border);
  }

  /* ---- Шапка / навигация ---- */
  .header-contact a,
  .main-nav > ul > li > a,
  .header-right ul li a { color: var(--dk-text); }

  .main-nav > ul > li > a:hover { color: var(--dk-accent); }

  .header-sticky { box-shadow: 0 2px 12px var(--dk-shadow); }

  .delivery-type-label { color: var(--dk-text-muted); }
  .delivery-method { color: var(--dk-accent); }

  /* Мегаменю / выпадающие */
  .drop-menu,
  .megamenu,
  .main-nav ul.drop-menu {
    background-color: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border);
    box-shadow: 0 8px 24px var(--dk-shadow);
  }
  .megamenu .title > a { color: var(--dk-text); }
  .megamenu li a { color: var(--dk-text-muted); }
  .megamenu li a:hover,
  .drop-menu li a:hover { color: var(--dk-accent); }

  /* ---- Мобильное offcanvas-меню ---- */
  .mobile-menu_wrapper .offcanvas-body,
  .offcanvas-minicart_wrapper .offcanvas-body {
    background-color: var(--dk-surface) !important;
  }
  .offcanvas-navigation .mobile-menu li a { color: var(--dk-text); }
  .offcanvas-navigation .mobile-menu li a:hover { color: var(--dk-accent); }
  .offcanvas-navigation .sub-menu { border-color: var(--dk-border); }
  .button-close i { color: var(--dk-text); }
  .offcanvas-contact a { color: var(--dk-text); }

  /* ---- Мини-корзина ---- */
  .minicart-heading h4 { color: var(--dk-text); }
  .minicart-list li,
  .minicart-item_total {
    border-color: var(--dk-border);
    color: var(--dk-text);
  }
  .minicart-item_total .ammount { color: var(--dk-accent); }
  .delivery-note { color: var(--dk-text-muted) !important; }

  /* ---- Карточки товара ---- */
  .product-item {
    background-color: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: 10px;
  }
  .product-content .product-name { color: var(--dk-text); }
  .product-content .product-name:hover { color: var(--dk-accent); }
  .price-box .new-price,
  .new-price { color: var(--dk-accent); }
  .product-add-action ul li a i {
    background-color: var(--dk-surface-2);
    color: var(--dk-text);
    box-shadow: 0 5px 10px var(--dk-shadow);
  }
  .product-add-action ul li a i:hover {
    background-color: var(--dk-accent);
    color: #12140f;
  }

  /* ---- Каталог: сайдбар и поиск ---- */
  .catalog-item,
  .catalog-title { color: var(--dk-text); border-color: var(--dk-border); }
  .catalog-title:hover { color: var(--dk-accent); }
  .sub-catalogs li a { color: var(--dk-text-muted); }
  .sub-catalogs li a:hover,
  .filter-subcatalog.active { color: var(--dk-accent); }

  .catalog-search-input,
  .nice-select,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  textarea {
    background-color: var(--dk-surface-2);
    color: var(--dk-text);
    border-color: var(--dk-border);
  }
  .catalog-search-input::placeholder,
  input::placeholder,
  textarea::placeholder { color: var(--dk-text-muted); }
  .catalog-search-icon,
  .catalog-icon { color: var(--dk-text-muted); }
  .nice-select .list {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border);
  }
  .nice-select .option:hover,
  .nice-select .option.selected { background-color: var(--dk-surface); }

  /* ---- Заголовки секций ---- */
  .section-title,
  .section-title h2,
  .section-title h3 { color: var(--dk-text); }
  .section-desc { color: var(--dk-text-muted); }

  /* ---- Футер ---- */
  /* Футер сливается с фоном страницы (одинаково на десктопе и мобилке, без шва) */
  .footer-area,
  .footer-top,
  .footer-bottom {
    background-color: var(--dk-bg) !important;
    border-color: var(--dk-border);
  }
  .footer-widget-title,
  .footer-widget-title a,
  .footer-contact-info .number { color: var(--dk-text); }
  .footer-widget-desc,
  .copyright,
  .copyright a { color: var(--dk-text-muted); }
  .footer-widget-list-item > li a { color: var(--dk-text-muted); }
  .footer-widget-list-item > li a:hover { color: var(--dk-accent); }
  .social-link.with-border ul li a { border-color: var(--dk-border); color: var(--dk-text); }
  .social-link ul li a:hover { color: var(--dk-accent); }
  /* Иконка Max — растровый PNG (чёрный глиф), color на него не действует.
     Инвертируем в светлый под тон остальных иконок. Нет в наборе fa. */
  .social-link .messenger-icon.max img { filter: brightness(0) invert(0.9); }

  /* ---- Кнопки ---- */
  .btn-dark {
    background-color: var(--dk-accent);
    border-color: var(--dk-accent);
    color: #12140f;
  }
  .btn-dark:hover {
    background-color: var(--dk-accent-hover);
    border-color: var(--dk-accent-hover);
    color: #12140f;
  }

  /* ---- Модалка выбора доставки (кастомные карточки) ---- */
  .delivery-option {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border);
  }
  .delivery-option:hover,
  .delivery-option.selected {
    border-color: var(--dk-accent);
    background-color: var(--dk-surface);
  }
  .delivery-option-title { color: var(--dk-text); }
  .delivery-option-desc,
  .delivery-option-note { color: var(--dk-text-muted); }

  /* ---- Шапка страниц (хлебные крошки) ---- */
  /* Убираем светлое фоновое фото (инлайн data-bg-image из main.js), заливаем в фон
     страницы — без светлой полосы-шва; заголовок делаем читаемым светлым */
  .breadcrumb-area {
    background-image: none !important;
    background-color: var(--dk-bg) !important;
  }
  .page-banner-section { background-color: var(--dk-surface); }
  .breadcrumb-heading { color: var(--dk-text); }
  .breadcrumb-item ul li,
  .breadcrumb-item ul li a { color: var(--dk-text-muted); }
  hr { border-color: var(--dk-border); }

  /* ---- Свап логотипа: светлый вариант для тёмного фона ---- */
  .header-logo img,
  .footer-widget-logo img {
    content: url("../images/logo/logo_black.png");
  }
}

/*
 * Только мобильная версия + тёмная тема:
 * заливаем секцию-герой «Саженцы» чёрным (как остальные разделы),
 * текст делаем белым. Кнопку «Каталог» не трогаем.
 * (background-image ставится инлайном из main.js — нужен !important)
 */
@media (prefers-color-scheme: dark) and (max-width: 991px) {
  .slider-area .slide-inner {
    background-image: none !important;
    background-color: var(--dk-bg) !important;
  }

  .slide-content.text-black .title,
  .slide-content.text-black .short-desc {
    color: #ffffff;
  }
}

/*
 * Кружок с датой в тёмной теме — как в светлой на всех размерах:
 * белая заливка, тёмные цифры (иначе цифры унаследуют светлый цвет body).
 */
@media (prefers-color-scheme: dark) {
  .slide-count span.data-count {
    background-color: #ffffff;
    color: #525252;
  }
}