/* ==========================================================================
   1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И НАСТРОЙКИ (Переопределение Bootstrap 5)
   ========================================================================== */
:root {
    /* Основной травянисто-зеленый цвет для всех кнопок, активных элементов и иконок */
    --bs-primary: #86c253; 
	--bg-primary: #86c253;
    --bs-primary-rgb: 25, 135, 84; 
    
    /* Цвет кнопок при наведении (более темный зеленый) */
    --bs-primary-hover: #146c43;  
    
    /* Второстепенные цвета */
    --secondary-color: #6c757d;     
    --dark-bg: #212529;             
    --light-bg: #f8f9fa;            
    
    /* Цвет свечения вокруг активных полей ввода и ползунка калькулятора */
    --bs-focus-ring-color: rgba(25, 135, 84, 0.25); 

    /* Фирменный цвет Telegram */
    --telegram-color: #24A1DE;
    --telegram-hover: #1d82b5;

    /* Размеры и отступы */
    --navbar-height: 58px;          
    --section-padding: 5rem 0;      
}

/* Общие правила для страницы */
html {
    scroll-padding-top: var(--navbar-height);
    scroll-behavior: smooth; /* Плавный скролл к секциям меню */
}

body {
    /* Фоновое панорамное изображение балясин по низу экрана */
 	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../images/balyasina-contour.png');
    background-attachment: fixed; 
    background-position: center bottom -32px; 
    background-repeat: repeat-x; /* Дублирование по горизонтали */
    background-size: clamp(1000px, 100%, 1500px) auto; /* Регулировка ширины: от 1000px до 1500px */
}

/* Базовые классы для секций сайта */
.site-section {
    padding: var(--section-padding);
}

.bg-light-section {
    background-color: rgba(255, 255, 255, 1) !important; /* Полупрозрачная белая плашка для читаемости текста */
}

.site-section h2 {
    font-size: 2.25rem;
    letter-spacing: -0.03em;
    color: #1a1d20;
}


/* ==========================================================================
   2. ШАПКА САЙТА (Navbar) И ОБЩИЕ СТИЛИ КНОПОК
   ========================================================================== */
/* Ссылки в меню при наведении */
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--bs-primary) !important;
}

/* Плавная анимация для абсолютно всех кнопок */
.btn {
    transition: all 0.2s ease-in-out !important; 
}

/* Принудительное глобальное перекрашивание основного класса кнопок Bootstrap в зеленый */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}
.bg-primary {
    background-color: rgb(134 194 83) !important;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
    color: #ffffff !important;
}

/* Фирменная кнопка Telegram (Оставляем строго голубой) */
.bg-telegram, 
.btn-info {
    background-color: var(--telegram-color) !important;
    border-color: var(--telegram-color) !important;
    color: #ffffff !important;
}

.bg-telegram:hover, 
.btn-info:hover {
    background-color: var(--telegram-hover) !important;
    border-color: var(--telegram-hover) !important;
    color: #ffffff !important;
}


/* ==========================================================================
   3. ГЛАВНЫЙ СЛАЙДЕР (Hero Slider)
   ========================================================================== */
   
#mainHeroSlider .carousel-item {
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#mainHeroSlider h2 {
    font-size: 3.5rem !important; /* Стандартный размер H1 в Bootstrap 5 (36px) */
    font-weight: 700 !important;
    line-height: 1.2;
}

.carousel-caption {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Тень для белого текста на картинках слайдера */
}

/* Перекрашиваем активные точки-индикаторы в зеленый */
.carousel-indicators .active {
    background-color: var(--bs-primary) !important;
}


/* ==========================================================================
   4. СЕКЦИЯ ПОРТФОЛИО И ГАЛЕРЕИ (Cards & Carousels)
   ========================================================================== */
#gallery .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#gallery .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Внутренние стрелочки пролистывания в карточках объектов */
.card .carousel-control-prev,
.card .carousel-control-next {
    width: 15%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .carousel-control-prev,
.card:hover .carousel-control-next {
    opacity: 0.9;
}

.card .carousel-control-prev-icon,
.card .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 10px;
}


/* ==========================================================================
   5. ОНЛАЙН-КАЛЬКУЛЯТОР СТОИМОСТИ И ФОРМЫ
   ========================================================================== */
/* Контурное фоновое изображение-силуэт по центру калькулятора */
#calculator-section  {
    position: relative;
 	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../images/balyasina-contour.png');
    background-position: center bottom -70px; 
    background-repeat: repeat-x; /* Дублирование по горизонтали */
    background-size: clamp(1000px, 100%, 1500px) auto; /* Регулировка ширины: от 1000px до 1500px */
    z-index: 1;
}

#calculator-section form,
#calculator-section .border-start-md {
    position: relative;
    z-index: 2; /* Поля калькулятора строго поверх силуэта */
}

/* Стилизация ползунка длины (Range input) под зеленый бренд */
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary) !important; }
.form-range::-moz-range-thumb { background-color: var(--bs-primary) !important; }
.form-range:active::-webkit-slider-thumb { background-color: var(--bs-primary-hover) !important; }
.form-range:active::-moz-range-thumb { background-color: var(--bs-primary-hover) !important; }

.form-range:focus {
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Поля формы и выпадающий список (Select) при фокусе и наведении */
.form-select:focus,
.form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color) !important;
}

/* Полное перекрашивание подсветки выпадающего меню в зеленый цвет */
.form-select option:hover,
.form-select option:focus,
.form-select option:active,
.form-select option:checked {
    background: var(--bs-primary) linear-gradient(0deg, var(--bs-primary) 0%, var(--bs-primary) 100%) !important;
    color: #ffffff !important;
}

/* Разделительная линия в калькуляторе на компьютерах */
@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid #dee2e6 !important;
    }
}

/* Кнопки плюс/минус калькулятора при наведении */
#calculator-section .btn-outline-secondary:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

/* Кастомная кнопка под калькулятором (если используется класс .btn-custom) */
#calculator-section .btn-custom {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

#calculator-section .btn-custom:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
    color: #ffffff !important;
}


/* ==========================================================================
   6. ГЕОГРАФИЯ РАБОТ (Интерактивные точки на карте)
   ========================================================================== */
.custom-map-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.map-dot-wrapper {
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}

.map-dot {
    width: 12px;
    height: 12px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 12;
}

.map-pulse {
    width: 20px;
    height: 20px;
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    animation: mapPulseAnim 2s infinite ease-out;
    opacity: 0;
}

@keyframes mapPulseAnim {
    0% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

.map-tooltip {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.map-dot-wrapper:hover .map-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.map-tooltip::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
}

.map-gallery-trigger,
#map-section .text-info {
    color: var(--bs-primary) !important;
}
.map-gallery-trigger:hover {
    color: var(--bs-primary-hover) !important;
}


/* ==========================================================================
   7. ПОДВАЛ САЙТА (Footer) & АДАПТИВНОСТЬ
   ========================================================================== */
footer.bg-dark, 
footer.bg-dark p, 
footer.bg-dark span, 
footer.bg-dark li {
    color: #a0a6ac !important;
}

footer.bg-dark h5 {
    color: #ffffff !important;
}

footer.bg-dark a {
    color: #a0a6ac !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer.bg-dark a:hover,
.hover-white:hover {
    color: #ffffff !important;
}

/* Адаптивные медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    #calculator-section .card {
        background-image: none !important; /* Убираем фоновый силуэт балясины на телефонах */
    }
}

/* ==========================================================================
   8. СТИЛИ ДЛЯ СЕКЦИИ FAQ (АККОРДЕОН)
   ========================================================================== */
.accordion-button:not(.collapsed) {
    color: var(--bs-primary) !important;
    background-color: rgba(25, 135, 84, 0.05) !important; /* Легкий зеленый фон у открытого вопроса */
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color) !important;
}

/* Перекрашиваем стандартную стрелочку Bootstrap в зеленый */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 16 16' fill='%23198754'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ==========================================================================
   9. СЛАЙДЕР СРАВНЕНИЯ ДО / ПОСЛЕ
   ========================================================================== */
#beforeAfterSlider {
    max-width: 1140px; /* Растягиваем до максимальной стандартной ширины Bootstrap-контейнера */
    margin: 0 auto;
}

/* Адаптивность для планшетов и мобильных устройств */
@media (max-width: 992px) {
    #beforeAfterSlider {
        height: 420px !important; /* Высота для планшетов */
    }
}

@media (max-width: 768px) {
    #beforeAfterSlider {
        height: 300px !important; /* Уменьшаем высоту на телефонах, чтобы фото не вытягивались */
    }
}