/* ОБЩИЕ СТИЛИ */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; color: #333; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

:root { --main: #ffcc00; --dark: #222; --bg: #f4f4f4; }

/* TOP BAR */
.top-bar { background: var(--dark); color: #fff; padding: 10px 0; font-size: 14px;padding-top: calc(10px + env(safe-area-inset-top));}
.top-contacts { display: flex; align-items: center; gap: 20px; }
.top-phone { color: var(--main); text-decoration: none; font-size: 16px; }
.work-time { color: #bbb; }

/* HEADER */
header { 
    background: #fff; 
    padding: 0; /* Убираем падинги здесь, чтобы полоска была во всю ширину */
    position: sticky; 
    top: 0; 
    z-index: 100; 
    display: flex;
    flex-direction: column; /* Элементы: Контент, затем Полоска */
}

/* Этот блок теперь будет отвечать за центровку логотипа и меню */
.header-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 0; /* Вертикальные отступы для красоты */
    width: 100%;    /* Занимает всю ширину внутри .container */
}
.logo { 
    font-size: 26px; 
    font-weight: 800; 
    text-decoration: none; /* Убираем подчеркивание ссылки */
    color: #333;           /* Возвращаем черный цвет */
    display: inline-block;
    transition: 0.3s;      /* Для плавного эффекта при наведении */
}
.logo span { color: var(--main); }
.logo:hover {
    opacity: 0.8;          /* Легкое визуальное подтверждение при наведении */
}
.nav-links { list-style: none; display: flex; align-items: center; }
.nav-links li { margin-left: 25px; }
.nav-links a { text-decoration: none; color: #333; font-weight: 700; transition: 0.3s; }
.nav-links a:hover { color: var(--main); }
/* Класс для активной ссылки при скролле */
.nav-links a.nav-active {
    color: var(--main) !important;
}
.btn-nav { background: var(--main); color: #fff !important; padding: 8px 15px; border-radius: 4px; transition: 0.3s; }
.btn-nav:hover { filter: brightness(1.1); }


/* ИНДИКАТОР ПРОГРЕССА */
.progress-container {
    width: 100%;
    height: 4px;
    background: #eee;
    position: relative; /* Больше не sticky, так как header уже sticky */
    margin: 0;
    padding: 0;
}
.progress-bar {
    height: 4px;
    background: var(--main);
    width: 0%;
}

/* HERO */
.hero { 
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('snos_doma.jpg'); 
    background-size: cover; 
    background-position: center 60%;
    background-attachment: fixed; /* ВОТ ЭТО ДЕЛАЕТ КАРТИНКУ НЕПОДВИЖНОЙ */
    padding: 100px 0; 
    color: #fff; 
    text-align: center; 
}
.hero h1 { font-size: 44px; margin-bottom: 20px; text-transform: uppercase; max-width: 800px; margin-inline: auto; }
.hero p {
    font-size: 18px;
    margin-bottom: 20px; /* ИЗМЕНЯЙТЕ ЭТО: чем больше число, тем ниже уедут кнопки */
    max-width: 600px;
    margin-inline: auto;
}
/* КНОПКИ + ЖИВНОСТЬ */
.btn { text-decoration: none; padding: 12px 25px; border-radius: 4px; font-weight: bold; display: inline-block; cursor: pointer; border: none; transition: all 0.2s ease; }
/* Эффект при наведении */
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
/* Эффект нажатия (Анимация нажимания) */
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary { background: var(--main); color: #fff; }
.btn-outline { border: 2px solid #fff; color: #fff; margin-left: 10px; }
.full-width { width: 100%; margin-top: 10px; }

.privacy a:hover {
    text-decoration: none !important;
    opacity: 0.8;
}

/* УСЛУГИ + ЖИВНОСТЬ КАРТИНКАМ */
.section { padding: 80px 0; /* Первое число — это отступы СВЕРХУ и СНИЗУ всей секции */ }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title span {
    display: block;      /* Чтобы надпись была на отдельной строке */
    margin-bottom: 0px; /* ИЗМЕНЯЙТЕ ЭТО: расстояние до слова "Наши услуги" */
    color: var(--dark);  /* Можно добавить цвет, чтобы выглядело лучше */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}
.service-item { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; }
.service-item.reverse { flex-direction: row-reverse; }
.service-info { flex: 1; }
.service-info h3 { font-size: 28px; margin-bottom: 15px; border-left: 5px solid var(--main); padding-left: 15px; }
.check-list { list-style: none; margin-top: 15px; }
.check-list i { color: var(--main); margin-right: 10px; }
.service-img-container { flex: 1; height: 350px; border-radius: 8px; overflow: hidden; background: #eee; transition: 0.4s ease; }
/* Оживление картинки при наведении на блок услуги */
.service-item:hover .service-img-container { transform: scale(1.02); }
.service-img { width: 100%; height: 100%; object-fit: cover; }

/* ТАБЛИЦА */
.prices-section { background: var(--bg); padding: 70px 0; }
.price-table { width: 100%; border-collapse: collapse; background: #fff; }
.price-table th { background: var(--dark); color: #fff; padding: 15px; text-align: left; }
.price-table td { padding: 15px; border-bottom: 1px solid #ddd;}
.price-table tr:hover td { background: #fff8e1; }

/* КАЛЬКУЛЯТОР */
.calc-card { display: flex; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.calc-inputs { flex: 1; padding: 40px; }
.calc-result { flex: 1; background: var(--dark); color: #fff; padding: 40px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
input, select { width: 100%; padding: 12px; margin: 10px 0 20px; border: 1px solid #ddd; }

/* FAQ + ЖИВНОСТЬ ТАБЛИЧКАМ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.faq-item { background: #fff; border: 1px solid #eee; padding: 25px; border-radius: 8px; transition: all 0.3s ease; }
/* Оживление плашек FAQ */
.faq-item:hover { transform: translateY(-5px); border-color: var(--main); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* КОНТАКТЫ */
.contact-card { display: flex; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-radius: 12px; overflow: hidden; }
.form-side { flex: 1.5; background: #fff; padding: 40px; }
.info-side { flex: 1; background: var(--dark); color: #fff; padding: 40px; }
.privacy { font-size: 12px; color: #777; display: block; margin-bottom: 15px; }
.social-links { margin-top: 20px; display: flex; gap: 10px; }
.soc-icon { text-decoration: none; color: #fff; padding: 10px; border-radius: 4px; font-size: 14px; transition: 0.3s; }
.soc-icon:hover { opacity: 0.8; }
.tg { background: #0088cc; }
.vb { background: #7360f2; }

.separation-section { background: var(--bg); padding: 0px 0; }
footer { background: var(--dark); color: #777; padding: 10px 0; text-align: center; }

.menu-toggle { display: none; font-size: 24px; cursor: pointer; color: var(--dark); }

.input-group { position: relative; margin-bottom: 20px; }
.error-msg { 
    color: #ff4d4d; 
    font-size: 12px; 
    display: none; /* Скрыто по умолчанию */
    margin-top: -15px;
    margin-bottom: 10px;
}
input.invalid { border: 1px solid #ff4d4d !important; }

textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0 20px;
    border: 1px solid #ddd;
    border-radius: 4px; /* Чтобы углы были как у инпутов */
    font-family: inherit; /* Чтобы шрифт не менялся на стандартный системный */
    font-size: 14px;
    resize: none; /* Разрешаем менять высоту, но не ширину */
    min-height: 100px;
    outline: none;
    transition: 0.3s;
}
input, 
select, 
textarea {
    transition: all 0.3s ease; /* Это та самая анимация появления цвета */
    outline: none;
}

input:focus, 
textarea:focus, 
select:focus {
    border-color: var(--main) !important; /* Твой желтый цвет */
    outline: none !important;             /* Убирает синий контур в Safari/Chrome */
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.4); /* Мягкое желтое свечение */
}
textarea:focus {
    border-color: var(--main);
}

textarea.invalid {
    border-color: #ff4d4d !important;
    background-color: #fff8f8;
}

/* СТИЛИ МОДАЛЬНОГО ОКНА */
/* ФОН: Только затемнение */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Глубокое темное затеменение */
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ПЛАШКА: Прямоугольная и с анимацией */
.modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 10px; /* Строгий прямоугольник */
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    
    /* Начальное положение для анимации (выше экрана) */
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Эффект отскока */
}

.modal-content p {
    color: #666;
    line-height: 1.5;
    /* ИЗМЕНИ ЭТО ЗНАЧЕНИЕ: */
    margin-bottom: 20px; 
    /* Можно также добавить margin-top, если текст слишком прижат к заголовку: */
    margin-top: 10px;
}

/* Состояние при открытии */
.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.success-icon {
    font-size: 50px;
    color: var(--main); /* Используем твой желтый цвет */
    margin-bottom: 20px;
}

.modal-content h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Универсальное правило для адаптивных карточек на Flex */
.features-grid > div, 
.calc-card > div, 
.about-park-item {
    flex: 1 1 300px; /* Растягиваться до 300px минимум */
    max-width: 100%; /* Но не шире экрана */
}




/* АДАПТИВНОСТЬ (ТВОЯ БЕЗ ИЗМЕНЕНИЙ) */
@media (max-width: 768px) {
	
    .header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100%;
        box-sizing: border-box;
		padding-bottom: 15px;
		padding: 15px 0 !important;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
        padding: 0 15px; /* Оставляем только боковой отступ для удобства нажатия */
        font-size: 24px;
        line-height: 1; /* Чтобы высота иконки была минимальной */
    }
    .section, .prices-section, .hero, .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .service-item, .service-item.reverse, .calc-card, .contact-card, .faq-grid { 
        flex-direction: column !important; 
        gap: 25px;
    }
   .nav-links { 
        display: flex !important; /* Меняем display:none на flex для работы анимации */
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background: #ffffff;
        padding: 0; 
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        z-index: 99; 
        border-bottom: 1px solid #eee;

        /* Начальное состояние анимации */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
	

    /* Состояние при открытии */
    .nav-links.active { 
        opacity: 1; 
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

   .nav-links li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid #f0f0f0; 
        
        /* Начальное состояние пунктов списка */
        opacity: 0;
        transform: translateX(-15px);
        transition: all 0.3s ease;
    }
	
	/* Появление пунктов при активном меню */
    .nav-links.active li {
        opacity: 1;
        transform: translateX(0);
    }
	/* Очередность появления (Каскад) */
    .nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.15s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.2s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.25s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.3s; }
	
    .nav-links li:last-child {
        border-bottom: none;
        padding: 20px 15px; /* Немного места для главной кнопки */
    }
	.nav-links a {
        display: block;
        padding: 18px 25px;
        color: #333;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: left;
        transition: 0.2s;
        text-decoration: none;
    }

    /* Эффект при нажатии на строку */
   .nav-links a:active {
        background-color: #fcfcfc;
        color: var(--main);
        padding-left: 35px; /* Эффектный сдвиг при нажатии */
    }

    /* Стилизуем только последнюю кнопку (Оставить заявку) */
    .nav-links .btn-nav {
        background: var(--main) !important;
        color: #fff !important;
        text-align: center;
        border-radius: 6px;
        padding: 14px !important;
        margin: 0;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
    }
    .hero h1 { font-size: 28px; }
    .service-img-container { width: 100%; height: 250px; margin-top: 15px; }
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
        border: 1px solid #eee;
    }

    .price-table {
        display: table !important;
        width: 100% !important;
        white-space: normal !important;
    }
    
    .calc-inputs, .calc-result, .form-side, .info-side { padding: 30px 15px !important; }
	.calc-card > div {
        border-right: none !important;
        border-bottom: 1px solid #eee;
    }
	.step-box {
        padding: 15px !important; /* Еще меньше отступов для совсем маленьких экранов */
        min-width: 100% !important; /* На мобилках блоки будут один под другим на всю ширину */
    }
    .calc-card {
        gap: 15px !important;
    }
	
    .btn-outline { margin-left: 0; margin-top: 10px; }
.hero-btns { 
        display: flex;
        flex-direction: column-reverse; /* Меняет порядок: нижняя кнопка станет верхней */
        gap: 15px; /* Расстояние между кнопками */
        width: 100%;
    }

    /* Делаем кнопки вытянутыми на всю ширину */
    .hero-btns .btn, 
    .hero-btns .btn-outline {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 0; /* Делаем их чуть массивнее для удобства нажатия */
        margin: 0; /* Убираем лишние отступы */
    }
	
	
}