/*
Theme Name: Online Store Tool Child
Theme URI: https://generatepress.com
Description: Child theme for GeneratePress.
Author: Your Name
Author URI: https://yourwebsite.com
Template: generatepress
Version: 1.0
*/

/* Подключение шрифта Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* ===== иконки в хедере ===== */
.topbar-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
  gap: 15px;
}

.topbar-icons a {
  color: #333;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topbar-icons a:hover {
  color: #0073aa; /* Изменить цвет при наведении */
}

/* Глобальные переменные темы */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Основные стили темы */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Стили тёмной темы */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
}

/* Примеры инверсии навигации и футера (общие) */
body.dark-mode .site-header,
body.dark-mode .site-footer {
  background-color: #1e1e1e;
}

/*Кнопка переключения темы. Сместить вверх: уменьшить значение top */

#theme-toggle {
  position: fixed;
  top: 23px;
  right: 10px;
  z-index: 9999;
  padding: 10px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

/*СКРЫТЬ КНОПКУ ПЕРЕКЛЮЧЕНИЯ ТЕМЫ*/
#theme-toggle {
  display: none !important;
}

/* Центрирование строки в футере */
.footer-bar,
.site-info {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: block;
}

/* Ссылки без подчёркивания (глобально) */
a {
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

a:hover {
  transform: scale(1.05);
  color: #0073aa;
}

/* Футер: общие стили */
.site-footer,
.footer-widgets-container,
.footer-bar,
.site-info {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}

/* Ссылки в футере */
.site-footer a,
.footer-bar a,
.footer-widgets-container a {
  color: #ccc !important;
}

.site-footer a:hover,
.footer-bar a:hover,
.footer-widgets-container a:hover {
  color: #fff !important;
}

/* Виджеты и текст в футере */
.site-footer .widget,
.site-footer .widget p,
.site-footer .widget li,
.site-footer .widget span,
.site-footer .widget-title,
.site-footer input,
.site-footer label {
  color: #f1f1f1 !important;
}

/* Поля и кнопки в футере */
.site-footer input[type="email"],
.site-footer input[type="text"] {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
}

.site-footer input[type="submit"],
.site-footer button {
  background-color: #0073aa !important;
  color: #fff !important;
  border: none !important;
}

.site-footer input[type="submit"]:hover,
.site-footer button:hover {
  background-color: #005177 !important;
}

/* Убираем ограничение ширины и отступы у футера */
.site-footer,
.site-footer .inside-footer-widgets,
.site-footer .footer-bar .inside-footer-bar,
.site-footer .footer-widgets,
.site-footer .site-info,
.site-footer .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Футер с эффектом плавного появления */
.site-footer {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.5s ease,
    color 0.5s ease;
}

body.show-footer .site-footer {
  opacity: 1;
  transform: translateY(0);
}

/* Виджеты футера (аккордеон) */
.footer-widget-title {
  cursor: pointer;
}
.footer-widget-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.footer-widget.open .footer-widget-content {
  max-height: 500px;
}

/* Специальные стили для тёмной темы (блоки, виджеты, поиск и меню) */
body.dark-mode .widget,
body.dark-mode .widget-area,
body.dark-mode .sidebar,
body.dark-mode .content-area,
body.dark-mode .inside-article,
body.dark-mode .entry-content,
body.dark-mode .entry-summary,
body.dark-mode .site-content,
body.dark-mode .search-form,
body.dark-mode .search-form input,
body.dark-mode .search-form button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Поисковая строка */
body.dark-mode .widget_search input[type="search"],
body.dark-mode .widget_search button[type="submit"],
body.dark-mode .search-form input[type="search"],
body.dark-mode .search-form button[type="submit"] {
  background-color: #222222 !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

/* Меню навигации в темной теме */
body.dark-mode .main-navigation,
body.dark-mode .main-navigation ul,
body.dark-mode .main-navigation li,
body.dark-mode .main-navigation .menu > .menu-item > a,
body.dark-mode .site-header,
body.dark-mode .header-wrap,
body.dark-mode .navigation-branding,
body.dark-mode .menu,
body.dark-mode .menu-item,
body.dark-mode .menu-item a {
  background-color: #121212 !important;
  color: #ffffff !important;
}

body.dark-mode .main-navigation .menu > .menu-item > a:hover,
body.dark-mode .main-navigation .menu > .menu-item.current-menu-item > a {
  background-color: #1e1e1e !important;
}

/* Общий фон страницы в темной теме */
body.dark-mode {
  background-color: #121212 !important;
}

/* Исправление контрастности текста в тёмной теме */
body.dark-mode .entry-title a,
body.dark-mode .entry-meta,
body.dark-mode .entry-meta a,
body.dark-mode .page-header h1,
body.dark-mode .widget-title,
body.dark-mode .widget a,
body.dark-mode .widget,
body.dark-mode .entry-content,
body.dark-mode .entry-summary {
  color: #ffffff !important; /* белый цвет текста для максимального контраста */
  opacity: 1 !important; /* убираем прозрачность */
}

/* Исправление контрастности логотипа в хедере в тёмной теме */
body.dark-mode .site-header .main-title a,
body.dark-mode .site-header .main-title {
  color: #ffffff !important; /* Белый цвет текста логотипа */
  opacity: 1 !important;
}

/* Увеличить верхний отступ в футере */
.site-footer .footer-widget h4,
.site-footer .footer-widget .widget-title {
  margin-top: 20px; /* можно увеличить до 30px, если нужно больше воздуха */
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5 {
  margin-top: 20px;
}

.top-bar a,
.top-bar a:visited {
  color: #ffffff !important; /* белый текст */
  font-weight: 500;
}

.top-bar a:hover {
  color: #ffcc00 !important; /* или другой акцент при наведении */
}

#scrollToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background-color: #b50000;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  display: flex; /* ⬅ используем flex */
  align-items: center; /* ⬅ вертикальное центрирование */
  justify-content: center; /* ⬅ горизонтальное центрирование */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#scrollToTop:hover {
  background-color: #a00000;
  transform: scale(1.1);
}

body.show-scroll-button #scrollToTop {
  opacity: 1;
  visibility: visible;
}

/* === ТЁМНАЯ ТЕМА: адаптация блоков главной страницы === */
body.dark-mode .home-categories,
body.dark-mode .home-popular-products,
body.dark-mode .home-new-products,
body.dark-mode .home-features,
body.dark-mode .home-about,
body.dark-mode .home-subscribe {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}

/* Белый цвет заголовков */
body.dark-mode .section-title {
  color: #ffffff !important;
}

/* Цвет текста в блоках */
body.dark-mode .home-subscribe .subscribe-description,
body.dark-mode .home-about p,
body.dark-mode .home-features .feature p {
  color: #cccccc !important;
}

/* Подпись и инпуты в тёмной теме */
body.dark-mode .subscribe-form input[type="email"] {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode .subscribe-form button {
  background-color: #d00;
  color: white;
}

body.dark-mode .subscribe-form button:hover {
  background-color: #a00;
}

/* Кнопки Telegram и WhatsApp */
body.dark-mode .messenger-icon {
  opacity: 0.9;
}

/* Темная тема: карточки блока "Почему выбирают нас" */
body.dark-mode .feature-item {
  background-color: #2a2a2a !important;
  color: #f1f1f1 !important;
  border-color: #444 !important;
  transition: background-color 0.3s ease;
}

body.dark-mode .feature-item strong {
  color: #ff4444 !important;
}

/* Карточки категорий в тёмной теме */
body.dark-mode .category-card {
  background-color: #2a2a2a !important;
  color: #f1f1f1;
  border: 1px solid #444;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .category-card:hover {
  background-color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Карточки товаров в тёмной теме */
body.dark-mode .product-card {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #444;
}

body.dark-mode .product-card h3,
body.dark-mode .product-card .product-price {
  color: #fff;
}

/* Карточки преимуществ */
body.dark-mode .feature {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #444;
}

/* Кнопка "В корзину" — без изменений, так как уже контрастная */

body.dark-mode .feature-item {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .feature-item *,
body.dark-mode .feature-item strong {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  #scrollToTop {
    bottom: 70px; /* поднять кнопку, чтобы не перекрывалась нижней панелью */
  }
}

/* Обертка для иконки корзины, чтобы позиционировать счетчик */
.cart-icon-wrapper {
  position: relative; /* Важно для позиционирования кругляшка */
  display: inline-flex; /* Чтобы обертка не занимала всю ширину */
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Убираем подчеркивание у ссылки */
  /* Возможно, нужно будет скорректировать padding для nav-item */
}

.cart-count-bubble {
  position: absolute;
  top: -5px; /* Регулируйте для вертикального положения */
  right: -5px; /* Регулируйте для горизонтального положения */
  background-color: red; /* Цвет кругляшка */
  color: white; /* Цвет текста */
  font-size: 10px; /* Размер шрифта */
  font-weight: bold;
  border-radius: 50%; /* Делаем его круглым */
  padding: 2px 5px; /* Отступы внутри кругляшка */
  min-width: 18px; /* Минимальная ширина, чтобы кругляшок был достаточно большим для одно/двухзначных чисел */
  height: 18px; /* Высота для создания идеального круга */
  display: flex; /* Для центрирования текста внутри кругляшка */
  align-items: center; /* Центрируем по вертикали */
  justify-content: center; /* Центрируем по горизонтали */
  text-align: center;
  line-height: 1; /* Убираем лишние отступы строки */
  pointer-events: none; /* Чтобы не мешал кликам по иконке */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* Легкая тень */
  transform: scale(0); /* Изначально скрыт */
  transform-origin: 100% 0; /* Точка трансформации (правый верхний угол) */
  transition: transform 0.2s ease-out; /* Анимация появления */
}

/* Правило для отображения кругляшка, когда в нем есть цифры */
.cart-count-bubble.has-items {
  transform: scale(1); /* Показываем кругляшок */
}

/* Стили для десктопной корзины, если её иконка находится в другом месте
   В style.css, например:
*/
/*
.main-navigation .cart-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .cart-count-bubble {
    position: absolute;
    top: -8px; // Возможно, другие значения для десктопа
    right: -8px; // Возможно, другие значения для десктопа
    background-color: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 5px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    transform: scale(0);
    transform-origin: 100% 0;
    transition: transform 0.2s ease-out;
}

.main-navigation .cart-count-bubble.has-items {
    transform: scale(1);
}
*/

/* Скрываем кнопку "Фильтр" и ее родительский контейнер
   на десктопных экранах (шириной более 768px).
   768px - это стандартный порог для мобильных/десктопных устройств. */
@media (min-width: 769px) {
  .mobile-shop-controls {
    display: none !important; /* Скрываем весь контейнер с кнопкой */
  }
}

/* Бургер-иконка в светлой теме: черная */
.menu-toggle svg {
  fill: #000 !important;
  stroke: #000 !important;
}

/* Бургер-иконка в темной теме: белая */
body.dark-mode .menu-toggle svg {
  fill: #fff !important;
  stroke: #fff !important;
}

body.dark-mode .products-section {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}