/* ============================================
   КАСТОМНЫЙ CSS ДЛЯ ПРОЕКТА "ТЕХНОМИР"
   Борисов Иван Сергеевич, РПО 23/1, 2026
   ============================================ */

/* === CSS-ПЕРЕМЕННЫЕ ДЛЯ ТЁМЫ === */
/* здесь задаём цвета для светлой и тёмной темы */
/* потом эти переменные используем в коде через var(--имя-переменной) */
:root {
    /* акцентный цвет — синий */
    --color-primary: #2563eb;
    /* фон страницы — белый для светлой темы */
    --bg-body: #f8f9fa;
    /* фон карточек */
    --bg-card: #ffffff;
    /* цвет текста */
    --text-color: #212529;
    /* цвет мутного/второстепенного текста */
    --text-muted: #6c757d;
    /* тень карточек */
    --shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* тень карточки при наведении */
    --shadow-card-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* цвет бордера карточки */
    --border-card: #dee2e6;
}

/* тёмная тема — меняем цвета при data-theme="dark" на body */
[data-theme="dark"] {
    --bg-body: #1a1d23;
    --bg-card: #2b2f38;
    --text-color: #e4e6ea;
    --text-muted: #adb5bd;
    --shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --border-card: #444950;
}

/* === ОСНОВНЫЕ СТИЛИ === */

/* базовый размер шрифта — 14px на мобильных */
html {
    font-size: 14px;
}

/* на экранах от 768px и шире — увеличиваем до 16px */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* чтобы footer всегда был внизу даже на пустых страницах */
html {
    position: relative;
    min-height: 100%;
}

/* body с отступом снизу чтобы footer не налезал на контент */
body {
    margin-bottom: 80px;
    /* подставляем цвет фона из переменной темы */
    background-color: var(--bg-body);
    /* подставляем цвет текста */
    color: var(--text-color);
    /* плавный переход при смене темы — 0.3 секунды */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === СТИЛИ НАВБАРА === */

/* при тёмной теме навбар чуть темнее */
[data-theme="dark"] .navbar {
    background-color: #1e2128 !important;
}

/* === ГЛАВНЫЙ БАННЕР (HERO) === */

/* секция-баннер на главной странице */
.hero-section {
    /* градиентный фон — от акцентного цвета к фиолетовому */
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    /* скруглённые углы */
    border-radius: 0.75rem !important;
}

/* === КАРТОЧКИ ПРЕИМУЩЕСТВ === */

/* общие стили для карточек с преимуществами */
.advantage-card {
    /* меняем фон карточки на нашу переменную */
    background-color: var(--bg-card);
    /* меняем цвет текста */
    color: var(--text-color);
    /* плавный переход при смене темы */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* эффект при наведении мыши — карточка немного поднимается и тень увеличивается */
.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* === КАРТОЧКИ ТОВАРОВ В КАТАЛОГЕ === */

/* общие стили для карточки товара */
.product-card {
    /* фон из переменной темы */
    background-color: var(--bg-card);
    /* цвет текста */
    color: var(--text-color);
    /* бордер */
    border: 1px solid var(--border-card);
    /* плавный переход для hover-эффекта */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

/* при наведении — карточка поднимается и тень становится больше */
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

/* заглушка-картинка в карточке товара (серый фон с эмодзи) */
.placeholder-img {
    /* высота заглушки */
    height: 180px;
    /* фон — светлый серый */
    background-color: #e9ecef;
    /* нижняя граница */
    border-bottom: 1px solid #dee2e6;
}

/* в тёмной теме заглушка чуть темнее */
[data-theme="dark"] .placeholder-img {
    background-color: #343a40;
    border-bottom-color: #495057;
}

/* === ФОРМА КОНТАКТОВ === */

/* стилизация полей ввода в тёмной теме */
[data-theme="dark"] .form-control {
    background-color: #343a40;
    border-color: #495057;
    color: #e4e6ea;
}

/* активное поле ввода — акцентная рамка */
[data-theme="dark"] .form-control:focus {
    background-color: #3a3f49;
    border-color: var(--color-primary);
    color: #e4e6ea;
}

/* стилизация таблицы в тёмной теме */
[data-theme="dark"] .table {
    color: #e4e6ea;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

/* === FOOTER === */

/* footer привязан к низу страницы */
.footer {
    /* скрепляем footer с низом */
    position: absolute;
    bottom: 0;
    width: 100%;
    /* высота строки = высота отступа body */
    line-height: 60px;
}

/* === КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ === */

/* кнопка темы — небольшая, с иконкой */
#themeToggle {
    /* размер шрифта */
    font-size: 1.1rem;
    /* убираем обводку при фокусе */
    outline: none;
}

/* === УВЕДОМЛЕНИЕ ОБ УСПЕХЕ === */
/* стилизуем alert-success для тёмной темы */
[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: rgba(25, 135, 84, 0.4);
    color: #75b798;
}