/**
 * Bootstrap Overrides - Глобальные переопределения
 * 
 * Этот файл содержит кастомизацию базовых настроек Bootstrap
 * для всего сайта overvoltage.ru
 * 
 * Версия: 1.0
 * Дата: 24.11.2025
 */

/* ================================================
   БАЗОВЫЙ РАЗМЕР ШРИФТА
   ================================================ */

/**
 * Устанавливаем базовый размер шрифта 14px вместо стандартных 16px
 * 
 * Используем процентный подход для правильного масштабирования:
 * 14px / 16px = 0.875 = 87.5%
 * 
 * Все rem единицы в Bootstrap автоматически пересчитаются:
 * - 1rem = 14px (вместо 16px)
 * - Все отступы, размеры, шрифты масштабируются пропорционально
 */
html {
    font-size: 87.5%; /* 14px вместо 16px */
}

/**
 * Переопределяем style.min.css, где прописано body { font-size: 16px; }
 * Используем !important для гарантированного применения
 */
body {
    font-size: 14px !important;
    /* Альтернативно можно использовать: font-size: 1rem; */
}

/**
 * Альтернативный подход (если нужно более точное управление):
 * Можно установить напрямую на body, но тогда rem не пересчитается
 */
/*
body {
    font-size: 14px;
    line-height: 1.6;
}
*/

/* ================================================
   КОРРЕКТИРОВКИ ДЛЯ КОНКРЕТНЫХ ЭЛЕМЕНТОВ
   ================================================ */

/* Заголовок карточки товара */
.product-card-title {
    font-size: 24px !important;
}

/* Заголовок группы опций */
.option-group-title {
    font-size: 16px !important;
}

/* ================================================
   ФОН И ОБВОДКИ КАРТОЧЕК
   ================================================ */

/* Белый фон для body */
body {
    background-color: #ffffff !important;
}

/* Обводка для карточек */
.card {
    border: 1px solid #eeeeee !important;
    box-shadow: none !important;
}

/* Основная карточка товара с обводкой */
.product-card {
    border: 1px solid #eeeeee !important;
}

/* Карточки описания, характеристик, отзывов */
.product-description-card,
.product-chars-card,
.product-reviews-card,
.product-recommendations-card {
    border: 1px solid #eeeeee !important;
}

/* ================================================
   СЕКЦИИ ВНУТРИ КАРТОЧКИ ТОВАРА
   ================================================ */

/* Секции описания и характеристик внутри product-card */
.product-description-section,
.product-chars-section {
    padding: 30px 20px 20px;
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.product-description-section:first-child,
.product-chars-section:first-child {
    border-top: none;
    margin-top: 0;
}

/* Убираем обводку у row внутри product-card */
.product-card .row {
    border: none !important;
    box-shadow: none !important;
}

/* Заголовки секций */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin: 0 0 20px 0;
}

/* Контент секций */
.section-content {
    color: #212529;
}

/* ================================================
   КРАСНАЯ ЛИНИЯ ДЛЯ ЗАГОЛОВКОВ
   ================================================ */

/* Красная вертикальная линия для заголовков "Ключевые особенности" и "Документация" */
.documents-title {
    position: relative;
    padding-left: 16px !important;
}

.documents-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: #dc3545; /* Красный цвет Bootstrap */
    border-radius: 2px;
}

/* ================================================
   АДАПТИВНОСТЬ
   ================================================ */

/**
 * На мобильных устройствах можно немного увеличить шрифт
 * для лучшей читаемости
 */
@media (max-width: 768px) {
    html {
        font-size: 87.5%; /* Оставляем 14px на мобильных */
    }
}

@media (max-width: 576px) {
    html {
        font-size: 87.5%; /* Или можно вернуть к 93.75% (15px) на очень маленьких экранах */
    }
}

/* ================================================
   ПРИМЕЧАНИЯ
   ================================================ */

/**
 * Преимущества этого подхода:
 * 
 * 1. Все компоненты Bootstrap масштабируются пропорционально
 * 2. Не нужно переопределять каждый элемент отдельно
 * 3. Сохраняется консистентность дизайна
 * 4. Легко откатить изменения (удалить/закомментировать одну строку)
 * 5. Респект к системным настройкам пользователя (используем %)
 * 
 * Если нужно вернуться к стандартному размеру:
 * - Удалите или закомментируйте правило `html { font-size: 87.5%; }`
 * - Или установите `html { font-size: 100%; }`
 */