/* 1. Глобально прячем шторку и затемнение (ДЛЯ ДЕСКТОПА) */
#independent-shutter, #shutter-dimmer {
    display: none !important;
}

/* 2. Убиваем горизонтальный скролл на корневом уровне */
html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

/* 3. Силовое выравнивание хедера (лого и бургер в ряд) */
.custom-flex-fix {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}




/* 1. СТИЛИ ТОЛЬКО ДЛЯ ГЛАВНОЙ */
/* Добавляем селектор body.path-frontpage перед твоим ID */
/*body.path-frontpage #navbar-main {*/
/*    position: fixed;*/
/*    width: 100%;*/
/*    background-color: transparent;*/
/*    z-index: 1000;*/
/*}*/

/* 1. Шапка на главной изначально прозрачная */
body.path-frontpage #navbar-main {
position: fixed;
width: 100%;
background-color: transparent;
z-index: 1000;
transition: background-color 0.3s ease; /* плавное изменение цвета */
}


/* 2. Класс, который будет добавляться при скролле */
body.path-frontpage #navbar-main.scrolled {
background-color: #717070;
}

/* 2. СТИЛИ ДЛЯ ВСЕХ ОСТАЛЬНЫХ СТРАНИЦ */
/* Селектор :not(.path-frontpage) выберет все страницы, кроме главной */
body:not(.path-frontpage) #navbar-main {
   /* position: relative; */ /* Или static, смотря как верстка должна себя вести 
    /*background-color: #181818; */ /* Черный фон */
   position: fixed; /* фиксируем шапку */
margin-top: -13px; /* прилипает к верхней границе окна */
left: 0; /* обязательно */
width: 100%; /* растянуть на всю ширину */
z-index: 9999; /* чтобы перекрывала изображения и карты */
background-color: #717070; /* фон */
}

/*
body:not(.path-frontpage) .main-content {
padding-top: 70px; 
}
*/


.slick-track .views-field-field-izobrazhenie .field-content {
    display: block !important;
    position: relative !important;
    /* Устанавливаем твой градиент из макета (#181818 с прозрачностью) */
background: linear-gradient(315deg, 
        rgba(24, 24, 24, 0) 0%, 
        rgba(24, 24, 24, 0.53) 53.4%, 
        rgba(24, 24, 24, 1) 100%
    ) !important;
}

/* Саму картинку заставляем уйти под градиент */
.slick-track .views-field-field-izobrazhenie .field-content img {
    position: relative !important;
    z-index: -1 !important; /* Уводим вглубь */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* Если картинка все равно слишком яркая, притуши ее слегка */
    filter: brightness(0.9) !important;
}







/* Обращаемся к параграфам внутри слайда/блока */
.slick__slide p, 
.views-field-field-body p,
.views-field-title {
    /* 1. Вытаскиваем на передний план */
    position: relative !important;
    z-index: 10 !important; 

    /* 2. Чистый цвет */
    color: #ffffff !important;
    
    /* 3. Сбрасываем возможные фильтры от родителей */
    filter: none !important;
    opacity: 1 !important;
    
    /* 4. Убираем влияние режимов смешивания */
    mix-blend-mode: normal !important;

    /* 5. Читаемость (опционально, если фон всё еще пестрый) 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;*/
}






/* --- 1. ОБЩАЯ СТРУКТУРА (везде: и в модалке, и на десктопе) --- */
.view-id-kontakty.view-display-id-block_3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
}

.view-id-kontakty.view-display-id-block_3 .views-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Фикс размеров иконки везде */
.view-id-kontakty.view-display-id-block_3 .views-field-field-ikonka-telefona-svetlaya img,
.view-id-kontakty.view-display-id-block_3 .views-field-field-ikonka-telefona img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin-right: 10px !important;
}

/* Общие параметры шрифта */
.view-id-kontakty.view-display-id-block_3 .views-field-field-nomer-telefona a,
.view-id-kontakty.view-display-id-block_3 .view-footer {
    text-decoration: none !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* --- 2. ЦВЕТА ДЛЯ МОБИЛОК И МОДАЛОК (до 1199px) --- */
@media (max-width: 1199px) {
    .view-id-kontakty.view-display-id-block_3 .views-field-field-nomer-telefona a,
    .view-id-kontakty.view-display-id-block_3 .view-footer {
        color: #000000 !important; /* Черный текст */
    }
    
    /* Иконка остается темной (оригинал) или убираем инверсию */
    .view-id-kontakty.view-display-id-block_3 img {
        filter: none !important;
    }
}
@media (max-width: 1199px) {
    /* Целимся эксклюзивно в иконку внутри твоего блока контактов */
    .view-id-kontakty.view-display-id-block_3 .views-field-field-ikonka-telefona-svetlaya img,
    .view-id-kontakty.view-display-id-block_3 .views-field-field-ikonka-telefona img {
        /* Инвертируем: если была черная — станет белой */
        filter: invert(100%) brightness(200%) !important;
        
        /* Гарантируем, что размеры не поплывут */
        width: 22px !important;
        height: 22px !important;
    }
}


/* --- 3. ЦВЕТА ДЛЯ ДЕСКТОПА (от 1200px) --- */
@media (min-width: 1200px) {
    .view-id-kontakty.view-display-id-block_3 .views-field-field-nomer-telefona a,
    .view-id-kontakty.view-display-id-block_3 .view-footer {
        color: #ffffff !important; /* Белый текст */
    }
}

.navbar-toggler-icon {
    filter: invert(1) brightness(100%) !important;
}
body.path-frontpage .messages__content.alert {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Центрируем по горизонтали */
    top: 10rem !important; 
    z-index: 1000 !important; /* Чтобы было поверх всего */
    width: 100% !important;
    max-width: 1140px !important; /* Чтобы сообщение не растянулось на весь экран, а было в границах контейнера */
}

@media (max-width: 1199px) {
    /* 1. Контейнеру — отступ сверху и липнуть влево */
    .view-id-kontakty.view-display-id-block_3 {
        align-items: flex-start !important;
        margin-top: 30px !important;
        padding-left: 15px !important; /* Чтобы не в самый край экрана */
    }

    /* 2. Содержимому (строка с номером) — липнуть влево */
    .view-id-kontakty.view-display-id-block_3 .view-content,
    .view-id-kontakty.view-display-id-block_3 .views-row {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* 3. Кнопке "Заказать звонок" — отступ и черный бордер */
    .view-id-kontakty.view-display-id-block_3 .view-footer {
        display: inline-block !important;
        margin-top: 30px !important; /* Отступ дива от номера */
        padding: 10px 20px !important;
        border: 1.5px solid #000000 !important; /* Тонкий черный бордер */
        text-align: center !important;
    }
}




@media (min-width: 1200px) {
    /* 1. Главный контейнер хедера: выстраиваем Лого и всё остальное в одну линию */
    #navbar-main .container.custom-flex-fix {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* Лого слева, меню+тел справа */
        align-items: center !important; /* Центрируем по вертикали */
        padding: 0 15px !important; /* Одинаковые отступы по бокам */
    }

    /* 2. Оболочка, где лежит Меню и Блок контактов */
    #navbar-main .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 1 !important; /* Занимает всё свободное место */
        flex-direction: row !important;
        justify-content: space-between !important; /* Меню по центру/слева, Тел - в край */
        align-items: center !important;
        margin-left: 50px !important; /* Отступ от логотипа */
    }

    /* 3. Само меню (Услуги, О компании, Контакты) */
    #block-standartkuzov-main-menu {
        margin-bottom: 0 !important;
    }

    #block-standartkuzov-main-menu ul.nav.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important; /* Расстояние между пунктами меню */
    }

    #block-standartkuzov-main-menu ul.nav.navbar-nav li a {
        padding: 0 !important;
        color: #ffffff !important;

        font-weight: 500;
        transition: color 0.3s;
    }

    /* 4. Блок контактов (уже отточенный нами) */
    #block-standartkuzov-views-block-kontakty-block-3 {
        margin-left: auto !important; /* Пхаем телефон в самый правый угол */
    }

    /* Фикс для Views внутри хедера, чтобы не ломали высоту */
    .block-views-blockkontakty-block-3 .views-element-container,
    .block-views-blockkontakty-block-3 .view-kontakty {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important; /* Наше выравнивание по OX */
    }
}

/* Фикс для логотипа, чтобы не прыгал */
.navbar-brand img {
    height: auto;
    max-height: 50px; /* Подбери под свой дизайн */
}



@media (max-width: 1199px) {


    [data-component-id="bootstrap:menu_main"] .nav-link {
            color: #000000 !important;
        }

    /* Включаем отображение только на мобилках */
    #independent-shutter {
        display: block !important; /* Показываем сам блок */
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 300px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 100000 !important;
        padding: 20px !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
        
        transform: translateX(100%); 
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
    }

    #independent-shutter.active {
        transform: translateX(0);
        visibility: visible;
    }
    
    #shutter-dimmer.active { 
        display: block !important; 
    }
    
    /* Остальные твои стили для оформления (header, close-btn и т.д.) без изменений... */
    .shutter-header { 
        display: flex; justify-content: space-between; align-items: center; 
        border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px;
    }
    #shutter-close-btn { background: none; border: none; font-size: 35px; color: #000; cursor: pointer; }
}