/*
Theme Name: GKX14 Clean Theme
Description: Дочерняя тема на базе Twenty Twenty-Five для оптимизации сайта
Template: twentytwentyfive
Version: 1.0.0
*/
/* Пример кастомных стилей для меню */

/* =========================================================
   1. ГЛОБАЛЬНЫЕ СТИЛИ (Компьютер)
   ========================================================= */

/* --- 1. ПЕРЕВОДЧИК: Уменьшаем флаги и текст --- */
.top-bar-langs.gtranslate_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.top-bar-langs a.glink {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.top-bar-langs a.glink img {
    width: 20px !important; /* Аккуратный размер флага */
    height: auto !important;
    margin-right: 5px !important;
}
.top-bar-langs a.glink span {
    font-size: 13px !important;
    color: #1a365d !important; /* Фирменный синий цвет */
    font-weight: 500 !important;
}

/* --- 2. ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ: Убираем красный фон и текст --- */
.bvi-shortcode a.bvi-open {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0 !important; /* Убивает текст "Версия сайта..." */
    color: transparent !important; /* Убивает цвет текста */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.bvi-shortcode a.bvi-open svg {
    width: 26px !important; /* Размер глаза */
    height: 26px !important;
    color: #1a365d !important; /* Синий цвет глаза */
    margin: 0 !important;
    display: block !important;
}

/* --- 3. ВЕРХНЯЯ ПАНЕЛЬ: Шрифты адреса и телефонов --- */
header.wp-block-template-part .wp-block-columns p,
header.wp-block-template-part .wp-block-columns p a {
    font-size: 15px !important;
    color: #1a365d !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
header.wp-block-template-part .wp-block-columns p {
    margin-bottom: 0 !important;
}

/* --- ЖЕСТКОЕ ПЕРЕОПРЕДЕЛЕНИЕ ФОНА BVI --- */
body .bvi-widget,
body .bvi-shortcode a,
body .bvi-widget a, 
body .bvi-shortcode,
body .bvi-shortcode a.bvi-open {
    background-color: transparent !important;
    background: transparent !important;
    color: transparent !important; /* Убиваем белый цвет текста */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* Красим только саму SVG-иконку (глаз) в синий */
body .bvi-shortcode a svg.bvi-svg-eye {
    color: #1a365d !important;
    fill: currentColor !important;
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    margin: 0 !important;
}

/* --- Иконки для телефонов и Email (через псевдоэлементы) --- */
.wp-block-columns p a[href^="tel:"],
.wp-block-columns p a[href^="mailto:"] {
    position: relative;
    padding-left: 20px; /* Место под иконку */
    display: inline-flex;
    align-items: center;
}

/* Иконка телефона */
.wp-block-columns p a[href^="tel:"]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%231a365d" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Иконка Email */
.wp-block-columns p a[href^="mailto:"]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%231a365d" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Запрещаем Логотипу растягиваться при переносе строк --- */
.wp-block-site-logo {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important; 
    width: auto !important;
}

/* Жестко фиксируем размер картинки логотипа */
.wp-block-site-logo img {
    max-width: 120px !important; 
    height: auto !important;
    display: block !important;
}

/* --- Оптимизация Главного контейнера шапки --- */
.wp-block-group.is-position-sticky {
    align-items: center !important;
}

/* --- СТИЛИЗАЦИЯ КНОПКИ ПОИСКА --- */
body .wp-block-search__button.wp-element-button {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-left: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .wp-block-search__button.wp-element-button svg {
    fill: #1a365d !important;
    color: #1a365d !important;
    width: 26px !important;
    height: 26px !important;
}

body .wp-block-search__button.wp-element-button:hover svg {
    opacity: 0.7 !important;
    transition: opacity 0.3s ease;
}

body .wp-block-search__inside-wrapper {
    border: none !important;
    padding: 0 !important;
}

/* --- СТИЛИЗАЦИЯ ПОЛЯ ПОИСКА ПРИ ФОКУСЕ --- */
body .wp-block-search__input:focus {
    outline: none !important; 
    border-color: #1a365d !important; 
    box-shadow: 0 0 0 1px #1a365d !important; 
}

/* --- 1. ВОЗВРАЩАЕМ ЦВЕТ ГЛАВНОЙ ПАНЕЛИ --- */
header.wp-block-template-part .wp-block-group.is-position-sticky {
    background-color: #f4f7fa !important;
    /*padding-top: 10px !important;
    padding-bottom: 10px !important;*/
    border-top: 1px solid #e8eef3 !important;
}

/* --- ФИКС ЛИПКОГО МЕНЮ --- */
header.wp-block-template-part {
    display: contents !important; 
}

.wp-block-group.is-position-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    transition: all 0.3s ease;
}

.wp-site-blocks {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* --- Убираем рамку фокуса при клике на логотип --- */
.wp-block-site-logo a:focus,
.wp-block-site-logo a:active,
.custom-logo-link:focus,
.custom-logo-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================================
   --- СТИЛИЗАЦИЯ ГЛАВНОГО МЕНЮ И ВЫПАДАЮЩИХ СПИСКОВ ---
   ========================================================= */

/* 1. Главные пункты меню (верхний уровень) */
.gkx-main-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: #1a365d !important; /* Темно-синий цвет текста */
    font-weight: 600 !important; /* Делаем шрифт жирнее */
    text-decoration: none !important; /* Убираем дефолтное подчеркивание */
    padding-bottom: 5px !important; /* Даем место для нижней линии */
    border-bottom: 2px solid transparent !important; /* Невидимая линия по умолчанию */
    transition: all 0.2s ease;
}

/* Эффект при наведении на главные пункты (синяя линия снизу) */
.gkx-main-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.gkx-main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    border-bottom: 2px solid #1a365d !important;
}

/* Красим стрелочку выпадающего списка в темно-синий */
.gkx-main-nav .wp-block-navigation-submenu__toggle svg {
    stroke: #1a365d !important;
    fill: #1a365d !important;
}

/* 2. Контейнер выпадающего списка (подменю) */
.gkx-main-nav .wp-block-navigation__submenu-container {
    background-color: #f4f7fa !important; /* Светло-голубой фон, как у шапки */
    border: none !important; /* Убираем стандартную рамку темы */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; /* Мягкая тень для объема */
    padding: 0 !important; /* Убираем внутренние отступы, чтобы фон при наведении был на всю ширину */
    min-width: 280px !important; /* Задаем ширину, чтобы текст не прыгал на новые строки */
}

/* 3. Пункты ВНУТРИ выпадающего списка */
.gkx-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: #1a365d !important;
    font-weight: 400 !important; /* Обычная толщина шрифта */
    font-size: 14px !important;
    padding: 10px 15px !important; /* Аккуратные отступы для каждого пункта */
    text-decoration: none !important; /* Жестко убиваем любые подчеркивания текста */
    display: block !important; /* Заставляем пункт занимать всю ширину контейнера */
    border-bottom: none !important; /* Отменяем нижнюю линию главного меню */
}

/* Эффект при наведении на пункты выпадающего списка (сплошная заливка) */
.gkx-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: #d1dce7 !important; /* Тот самый серо-голубой цвет выделения из оригинала */
    color: #1a365d !important;
    text-decoration: none !important; /* Защита от появления подчеркиваний при наведении */
}

/* --- Эффект сжатия шапки при скролле --- */
/* Плавность изменения для самой панели и логотипа */
header.wp-block-template-part .wp-block-group.is-position-sticky,
.wp-block-site-logo img {
    transition: all 0.3s ease !important;
}

/* Стили, которые применяются, когда мы прокрутили страницу вниз (появится класс is-shrunk) */
header.wp-block-template-part .wp-block-group.is-position-sticky.is-shrunk {
    padding-top: 2px !important; /* Уменьшаем отступы сверху */
    padding-bottom: 2px !important; /* Уменьшаем отступы снизу */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* Добавляем легкую тень для оторванности от контента */
}

/* Уменьшаем логотип при скролле */
header.wp-block-template-part .wp-block-group.is-position-sticky.is-shrunk .wp-block-site-logo img {
    max-width: 90px !important; /* Было 120px, стало 90px (можешь подогнать размер) */
}

/* =========================================================
   2. МЕДИА-ЗАПРОСЫ (Адаптивность)
   ========================================================= */

/* --- ПЛАНШЕТЫ (Ширина экрана до 1024px) --- */
@media screen and (max-width: 1024px) {
    /* Чуть уменьшаем логотип, если не хватает места для меню */
    .wp-block-site-logo img {
        max-width: 100px !important; 
    }
    /* Сжимаем флаги */
    .top-bar-langs.gtranslate_wrapper {
        gap: 8px !important;
    }
}

/* --- МОБИЛЬНЫЕ ТЕЛЕФОНЫ (Ширина экрана до 768px) --- */
@media screen and (max-width: 768px) {
    /* Верхний блок: отменяем вывод в строку, ставим всё по центру в столбик */
    .wp-block-columns.is-layout-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    /* Отступ между адресом и телефонами 
    .wp-block-column {
        margin-bottom: 10px !important;
    }*/

    /* Телефоны и почта: ставим каждый с новой строки, чтобы пальцем было легко нажать */
    .wp-block-column p a[href^="tel:"],
    .wp-block-column p a[href^="mailto:"] {
        display: block !important; 
       /* margin-bottom: 8px !important;*/
    }

    /* Ограничиваем поле поиска по ширине, чтобы оно не ломало верстку */
    body .wp-block-search__input {
        max-width: 130px !important; 
    }

    /* Слегка уменьшаем иконки BVI и Поиска для смартфона */
    body .bvi-shortcode a svg.bvi-svg-eye,
    body .wp-block-search__button.wp-element-button svg {
        width: 24px !important;
        height: 24px !important;
    }
    .hide-on-mobile {
    display: none;
  }
}

/* --- ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (Ширина экрана до 480px) --- */
@media screen and (max-width: 480px) {
    /* Уменьшаем шрифт флагов для самых узких экранов */
    .top-bar-langs a.glink span {
        font-size: 11px !important;
    }
    .top-bar-langs a.glink img {
        width: 16px !important;
    }
    .hide-on-mobile {
    display: none;
  }
}

/* =========================================================
   --- БЛОК УСЛУГ (Круглые иконки) ---
   ========================================================= */

/* Центрируем колонку */
.gkx-circle-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 15px !important;
}

/* 1. Делаем синий круг из ССЫЛКИ, в которой лежит картинка */
.gkx-circle-icon a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #3567a0 !important; /* Синий фон теперь живет здесь */
    border-radius: 50% !important; /* Идеальный круг */
    width: 110px !important;
    height: 110px !important;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 2. Настраиваем саму картинку (иконку) ВНУТРИ синего круга */
.gkx-circle-icon a img {
    width: 54px !important; /* Регулируем размер самой иконки */
    height: 54px !important;
    object-fit: contain !important;
    background-color: transparent !important; /* Обязательно убираем фон у картинки! */
    padding: 0 !important; /* Убираем внутренний отступ */
    box-shadow: none !important; /* Убираем тень у картинки */
    border-radius: 0 !important;
    
    /* МАГИЯ: Перекрашиваем ТОЛЬКО саму иконку в белый цвет */
    filter: brightness(0) invert(1) !important; 
}

/* 3. Эффект при наведении (легкое поднятие круга) */
.gkx-circle-icon a:hover {
    transform: translateY(-5px) !important;
    box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.2) !important;
}

/* --- Стилизация текста под иконкой --- */
.gkx-icon-title {
    text-align: center !important;
    margin-top: 0 !important;
}

.gkx-icon-title a {
    color: #1a365d !important;
    text-decoration: none !important;
    font-weight: 700 !important; /* Жирный текст */
    font-size: 18px !important;  /* Крупный текст */
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}

.gkx-icon-title a:hover {
    color: #3567a0 !important;
}

/* =========================================================
   --- ГЛОБАЛЬНЫЙ ДИЗАЙН КНОПОК ---
   ========================================================= */

/* Задаем единый стиль для всех стандартных кнопок на сайте */
body .wp-block-button__link {
    background-color: #3567a0 !important; /* Фирменный синий цвет */
    color: #ffffff !important; /* Белый текст */
    border-radius: 50px !important; /* Закругленные края (форма таблетки) */
    padding: 12px 32px !important; /* Комфортные отступы вокруг текста */
    border: none !important; /* Убираем любые рамки */
    font-weight: 600 !important; /* Делаем текст чуть жирнее */
    font-size: 16px !important;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15) !important; /* Тень в стиле круглых иконок */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
    text-decoration: none !important; /* Убираем подчеркивание, если оно есть */
    display: inline-block !important;
}

/* Эффект при наведении (легкое поднятие и увеличение тени) */
body .wp-block-button__link:hover {
    background-color: #2a5280 !important; /* Слегка затемняем синий при наведении */
    transform: translateY(-3px) !important; /* Кнопка приподнимается */
    box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.2) !important; /* Тень становится шире */
    color: #ffffff !important;
}

/* =========================================================
   --- КАРТОЧКИ НОВОСТЕЙ (Блок Цикл Запроса) ---
   ========================================================= */

/* 1. Основа карточки (Фон, тень, высота) */
.gkx-news-card {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* Мягкая тень как на макете */
    height: 100% !important; /* Заставляем карточки в одном ряду быть одинаковой высоты */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Убираем стандартные отступы группы */
    transition: box-shadow 0.3s ease !important;
}

.gkx-news-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; /* Тень усиливается при наведении */
}

/* 2. Жестко фиксируем картинку, чтобы сетка не прыгала */
.gkx-news-card .wp-block-post-featured-image {
    margin: 0 !important;
    padding: 0 !important;
}

.gkx-news-card .wp-block-post-featured-image img {
    width: 100% !important;
    height: 220px !important; /* Одинаковая высота для всех картинок новостей */
    object-fit: cover !important; /* Кадрируем картинку без сплющивания */
    border-radius: 0 !important;
}

/* 3. Синяя плашка рубрики (Наплывает на картинку) */
.gkx-news-card .wp-block-post-terms {
    margin-top: -15px !important; /* Поднимаем блок вверх, чтобы он наехал на фото */
    margin-bottom: 15px !important;
    padding-left: 20px !important; /* Отступ от левого края карточки */
    position: relative !important;
    z-index: 2 !important;
}

.gkx-news-card .wp-block-post-terms a {
    background-color: #3567a0 !important; /* Твой фирменный синий */
    color: #ffffff !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* 4. Внутренние отступы для текста карточки */
.gkx-news-card .wp-block-post-date,
.gkx-news-card .wp-block-post-title,
.gkx-news-card .wp-block-post-excerpt {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 5. Настройка даты (Добавляем слово "Дата: ") */
.gkx-news-card .wp-block-post-date {
    font-size: 13px !important;
    color: #666666 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}
.gkx-news-card .wp-block-post-date::before {
    content: "Дата: "; /* Автоматически подставляем слово перед датой */
}

/* 6. Заголовок новости */
.gkx-news-card .wp-block-post-title {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}
.gkx-news-card .wp-block-post-title a {
    color: #1a365d !important; /* Темно-синий текст */
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}
.gkx-news-card .wp-block-post-title a:hover {
    color: #3567a0 !important;
}

/* 7. Текст отрывка и кнопка "Подробнее" */
.gkx-news-card .wp-block-post-excerpt {
    font-size: 14px !important;
    color: #444444 !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important; /* Прижимает всё, что ниже, к низу карточки */
}
.gkx-news-card .wp-block-post-excerpt__more-link {
    display: inline-block !important;
    margin-top: 15px !important;
    color: #3567a0 !important;
    text-decoration: none !important;
}

/* =========================================================
   --- ПАГИНАЦИЯ (Навигация по страницам) ---
   ========================================================= */

/* Контейнер пагинации: выравниваем по центру и добавляем отступы */
.wp-block-query-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important; /* Расстояние между кнопками */
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important; /* Чтобы на мобильных аккуратно переносилось на новую строку */
}

/* Убираем дефолтные подчеркивания у всех ссылок внутри пагинации */
.wp-block-query-pagination a {
    text-decoration: none !important;
}

/* Общий стиль для цифр и кнопок "Предыдущая/Следующая" */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important; /* Минимальная ширина, чтобы цифры были в квадратиках */
    height: 36px !important;
    padding: 0 12px !important; /* Отступы по бокам для длинных текстов (Предыдущая страница) */
    background-color: #ffffff !important;
    color: #1a365d !important; /* Темно-синий текст */
    border-radius: 6px !important; /* Легкое, современное скругление углов */
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important; /* Легкая базовая тень */
    transition: all 0.2s ease !important;
}

/* Активная (текущая) страница */
.wp-block-query-pagination .page-numbers.current {
    background-color: #3567a0 !important; /* Твой фирменный синий */
    color: #ffffff !important; /* Белый текст */
    box-shadow: 0 4px 10px rgba(53, 103, 160, 0.3) !important; /* Цветная тень в тон кнопки */
}

/* Эффект при наведении на неактивные цифры и кнопки */
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    background-color: #f4f7fa !important; /* Светло-голубой фон (как у шапки) */
    color: #3567a0 !important; /* Делаем текст чуть светлее */
    transform: translateY(-2px) !important; /* Кнопка слегка "подпрыгивает" */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Многоточие (...) */
.wp-block-query-pagination .page-numbers.dots {
    background-color: transparent !important;
    box-shadow: none !important; /* Убираем тень */
    color: #1a365d !important;
    min-width: 20px !important;
    padding: 0 !important;
}

/* --- Замена стандартного треугольника в меню на аккуратную галочку --- */

/* 1. Полностью прячем стандартный треугольник WordPress */
.gkx-main-nav .wp-block-navigation-submenu__toggle svg {
    display: none !important;
}

/* 2. Рисуем свою легкую галочку (chevron) через background */
.gkx-main-nav .wp-block-navigation-submenu__toggle {
    position: relative !important;
    width: 14px !important; /* Размер новой иконки */
    height: 14px !important;
    margin-left: 5px !important; /* Отступ от текста "Для граждан" */
    padding: 0 !important;
    background-color: transparent !important;
    /* Та самая тонкая SVG-галочка цвета #1a365d */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231a365d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.3s ease !important; /* Плавность для переворота */
}

/* 3. Анимация: переворачиваем галочку вверх, когда меню открыто */
.gkx-main-nav .wp-block-navigation-submenu.is-menu-open > .wp-block-navigation-submenu__toggle,
.gkx-main-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    transform: rotate(180deg) !important;
}

/* =========================================================
   --- КАРТОЧКА ДИРЕКТОРА ---
   ========================================================= */

.gkx-director-card {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* Единый стиль теней с новостями */
    padding: 0 0 25px 0 !important; /* Убираем отступы сверху, оставляем снизу */
    border-radius: 4px !important;
    overflow: hidden !important; /* Чтобы фото не вылезало за края */
    text-align: center !important;
}

/* Картинка прилипает к верхнему краю и краям колонки */
.gkx-director-card .wp-block-image {
    margin: 0 0 20px 0 !important;
}

.gkx-director-card img {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    display: block !important;
}

/* ФИО директора */
.gkx-director-card h4 {
    color: #1a365d !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    margin: 0 15px 10px 15px !important;
}

/* Должность */
.gkx-director-card p {
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 15px 20px 15px !important;
}

/* Центрируем кнопку в карточке */
.gkx-director-card .wp-block-buttons {
    justify-content: center !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   --- АВТОМАТИЧЕСКАЯ БЕГУЩАЯ СТРОКА (ТОЧНЫЕ РАЗМЕРЫ) ---
   ========================================================= */

/* 1. Внешний контейнер (Скрывает всё, что уезжает за поля) */
.gkx-marquee-wrapper {
    overflow: hidden !important; /* Обрезаем всё лишнее */
    width: 100% !important;
    padding: 30px 0 !important; /* Отступы сверху/снизу, чтобы тень не резалась */
    background-color: transparent !important;
}

/* 2. Лента, которая двигается */
.gkx-marquee-track {
    display: flex !important;
    flex-wrap: nowrap !important; /* Запрещаем перенос строк */
    width: max-content !important; /* Ширина ленты равна сумме всех картинок */
    align-items: center !important; /* Центрируем по вертикали, если вдруг баннеры разной высоты */
    
    /* Запускаем анимацию! 25s - это время полного круга. Чем больше цифра, тем медленнее едет. */
    animation: marqueeScroll 25s linear infinite !important; 
}

/* Останавливаем ленту при наведении */
.gkx-marquee-wrapper:hover .gkx-marquee-track {
    animation-play-state: paused !important;
}

/* Правила движения анимации */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* 3. Стилизация карточек-баннеров */
.gkx-marquee-track .wp-block-image {
    flex: 0 0 auto !important; /* Запрещаем сжиматься или растягиваться */
    margin: 0 15px !important; /* Отступы между карточками (влево/вправо) */
    
    /* Жестко задаем твои размеры для всей карточки */
    width: 360px !important; 
    height: 120px !important; 
    
    /* Стили самой карточки */
    background-color: #ffffff !important;
    border-radius: 8px !important; /* Легкое закругление */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* Тень */
    transition: all 0.3s ease !important; /* Плавность для ховера */
    overflow: hidden !important; /* Защита, чтобы картинка не вылезала за скругление */
}

/* 4. Настройка самой картинки ВНУТРИ карточки (чтобы не было белых рамок) */
.gkx-marquee-track .wp-block-image img {
    /* Растягиваем картинку на 100% ширины и высоты её карточки (360х120) */
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important; /* Убираем любые внутренние отступы (рамки) */
    
    /* Убираем contain и ставим cover, чтобы картинка занимала ВСЮ площадь */
    object-fit: cover !important; 
    object-position: center !important; /* Центрируем, если пропорции не совсем совпадут */
    
    border-radius: 0 !important; /* Радиус уже задан у родительской карточки */
    box-shadow: none !important; /* Убираем лишние тени */
    border: none !important;
    background-color: transparent !important;
    opacity: 1 !important; /* В этот раз не будем их бледнить */
    filter: none !important; /* Убираем серость */
}

/* Эффект при наведении (карточка поднимается) */
.gkx-marquee-track .wp-block-image:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* =========================================================
   --- КНОПКА "НАВЕРХ" ---
   ========================================================= */

#gkx-back-to-top {
    position: fixed !important;
    bottom: 30px !important; /* Отступ снизу */
    right: 30px !important;  /* Отступ справа */
    width: 44px !important;
    height: 44px !important;
    background-color: #ffffff !important;
    border: 2px solid #3567a0 !important; /* Твоя синяя рамка */
    color: #3567a0 !important; /* Синяя стрелочка */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border-radius: 4px !important; /* Очень легкое скругление углов, чтобы не было слишком "остро" */
    z-index: 9999 !important; /* Чтобы всегда была поверх других элементов */
    
    /* Скрываем по умолчанию */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important; /* Слегка опущена вниз */
    transition: all 0.3s ease !important;
}

/* Класс show добавляется скриптом при скролле */
#gkx-back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important; /* Кнопка плавно выезжает */
}

/* Размер самой галочки внутри */
#gkx-back-to-top svg {
    width: 22px !important;
    height: 22px !important;
    transition: transform 0.3s ease !important;
}

/* Эффект при наведении курсора */
#gkx-back-to-top:hover {
    background-color: #3567a0 !important; /* Заливаем синим */
    color: #ffffff !important; /* Стрелка становится белой */
    box-shadow: 0 4px 12px rgba(53, 103, 160, 0.3) !important;
}

/* При наведении стрелочка слегка "подпрыгивает" */
#gkx-back-to-top:hover svg {
    transform: translateY(-2px) !important;
}

/* Для мобильных экранов делаем кнопку чуть меньше и сдвигаем к краю */
@media screen and (max-width: 768px) {
    #gkx-back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/* =========================================================
   --- ПОДВАЛ (ФУТЕР) ---
   ========================================================= */

/* 1. Верхняя светлая часть (Контакты) */
.gkx-footer-top {
    background-color: #f4f7fa !important; /* Цвет фона выпадающего меню */
    padding: 15px 10px !important; /* Просторные отступы сверху и снизу */
}

/* Настройка текста внутри светлой части */
.gkx-footer-top .wp-block-columns p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    color: #1a365d !important; /* Темно-синий текст */
}

/* Делаем ссылки (email) красивыми при наведении */
.gkx-footer-top .wp-block-columns a {
    color: #1a365d !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.gkx-footer-top .wp-block-columns a:hover {
    color: #3567a0 !important; /* Выделяем фирменным цветом кнопок */
}

/* Центрируем логотип, если он не встал по центру */
.gkx-footer-top .wp-block-column:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Нижняя темная полоса (Копирайт) */
.gkx-footer-bottom {
    background-color: #3567a0 !important; /* Цвет главных кнопок */
    padding: 15px 20px !important; /* Узкая аккуратная полоска */
}

.gkx-footer-bottom p {
    color: #ffffff !important; /* Белый текст */
    margin: 0 !important; /* Убираем лишние отступы абзаца */
    font-size: 16px !important;
    text-align: center !important;
}

/* =========================================================
   --- КНОПКА СКАЧИВАНИЯ В БЛОКЕ "ФАЙЛ" ---
   ========================================================= */

a.wp-block-file__button {
    background-color: #3567a0 !important; /* Наш фирменный синий цвет */
    color: #ffffff !important; /* Белый текст */
    padding: 10px 24px !important; /* Комфортные отступы */
    border-radius: 50px !important; /* Скругление в форме "таблетки" */
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(53, 103, 160, 0.3) !important; /* Аккуратная синяя тень */
    transition: all 0.3s ease !important; /* Плавность для анимации */
    display: inline-block !important;
    border: none !important; /* Убираем стандартные рамки, если есть */
}

/* Эффект при наведении курсора */
a.wp-block-file__button:hover {
    background-color: #1a365d !important; /* Меняем цвет на темно-синий из палитры */
    color: #ffffff !important;
    transform: translateY(-2px) !important; /* Кнопка слегка приподнимается */
    box-shadow: 0 6px 15px rgba(26, 54, 93, 0.4) !important; /* Тень становится чуть больше */
}

/* =========================================================
   --- БЛОК "ФАЙЛ" (Стильная карточка документа) ---
   ========================================================= */

/* Главный контейнер карточки */
.wp-block-file {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Раздвигаем текст и кнопку по краям */
    background: linear-gradient(135deg, #ffffff 0%, #f4f7fa 100%) !important; /* Легкий полупрозрачный градиент для глубины */
    padding: 20px 25px !important; /* Просторные отступы */
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* Мягкая тень */
    border-left: 5px solid #3567a0 !important; /* Акцентная левая грань */
    margin-bottom: 30px !important;
    max-width: 900px !important; /* Ограничиваем ширину, чтобы на больших экранах карточка не была слишком длинной */
    flex-wrap: wrap !important; /* Позволяем перенос на мобильных */
    gap: 15px !important;
}

/* Настройка названия документа (ссылка слева) */
.wp-block-file a:not(.wp-block-file__button) {
    color: #1a365d !important; /* Темно-синий текст */
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important; /* Убираем стандартное подчеркивание */
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 60% !important; /* Текст занимает основную часть ширины */
    transition: color 0.2s ease !important;
}

/* Эффект при наведении на название файла */
.wp-block-file a:not(.wp-block-file__button):hover {
    color: #3567a0 !important;
}

/* Векторная иконка документа перед названием */
.wp-block-file a:not(.wp-block-file__button)::before {
    content: "";
    display: inline-block;
    flex-shrink: 0 !important; /* Запрещаем иконке сжиматься */
    width: 24px !important;
    height: 24px !important;
    margin-right: 15px !important;
    /* Рисуем иконку файла цветом #3567a0 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233567a0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Выравниваем кнопку скачивания */
.wp-block-file .wp-block-file__button {
    flex: 0 0 auto !important; /* Запрещаем кнопке растягиваться */
    margin: 0 !important; /* Убиваем стандартные отступы Gutenberg */
}

/* Мобильная адаптация: если экран узкий, кнопка прыгает под текст */
@media screen and (max-width: 600px) {
    .wp-block-file {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .wp-block-file .wp-block-file__button {
        width: 100% !important; /* На телефоне кнопка растянется на всю ширину карточки */
        text-align: center !important;
    }
}

/* =========================================================
   --- БОКОВОЕ МЕНЮ (Сайдбар) ---
   ========================================================= */

/* 1. Внешняя карточка меню */
.gkx-sidebar-menu {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* Наша фирменная легкая тень */
    padding: 10px 0 !important; /* Отступы сверху и снизу, по бокам 0 */
    overflow: hidden !important;
}

/* 2. Настраиваем сам блок навигации внутри */
.gkx-sidebar-menu .wp-block-navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* Растягиваем ссылки на всю ширину */
}

.gkx-sidebar-menu .wp-block-navigation-item {
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid #f4f7fa !important; /* Очень тонкая линия между пунктами */
}

.gkx-sidebar-menu .wp-block-navigation-item:last-child {
    border-bottom: none !important; /* Убираем линию у последнего пункта */
}

/* 3. Дизайн самих ссылок (пунктов меню) */
.gkx-sidebar-menu .wp-block-navigation-item a {
    display: block !important;
    padding: 15px 25px !important; /* Удобные крупные кнопки для клика */
    color: #1a365d !important; /* Темно-синий текст */
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-left: 4px solid transparent !important; /* Скрытая полоска для анимации */
    transition: all 0.2s ease !important;
}

/* 4. Эффект при наведении курсора */
.gkx-sidebar-menu .wp-block-navigation-item a:hover {
    background-color: #f4f7fa !important; /* Тот самый светло-голубой фон */
    color: #3567a0 !important;
    border-left: 4px solid #3567a0 !important; /* Появляется синяя полоска слева */
    padding-left: 28px !important; /* Текст слегка сдвигается вправо при наведении */
}

/* 5. Выделение текущей (активной) страницы */
/* WordPress автоматически добавляет класс current-menu-item к странице, на которой мы находимся */
.gkx-sidebar-menu .current-menu-item > a {
    background-color: #f4f7fa !important;
    color: #3567a0 !important;
    font-weight: 700 !important; /* Делаем текущий пункт жирным */
    border-left: 4px solid #3567a0 !important;
}

/* =========================================================
   --- ТАБЛИЦЫ ДАННЫХ (Для графиков и тарифов) ---
   ========================================================= */

/* 1. Основа таблицы: убираем стандартные рамки и делаем растяжку */
figure.gkx-data-table {
    margin-bottom: 30px !important;
    overflow-x: auto !important; /* На мобилках таблица не сломает дизайн, а будет скроллиться вбок */
}

figure.gkx-data-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important; /* Убиваем внешнюю рамку темы */
}

figure.gkx-data-table th,
figure.gkx-data-table td {
    border: none !important; /* Убиваем сетку ячеек */
}

/* 2. Оформление шапки (Светлый фон и темная полоса) */
figure.gkx-data-table thead th {
    background-color: #e6f1f8 !important; 
    color: #1a365d !important; 
    font-weight: 700 !important;
    padding: 15px 10px !important; /* Чуть уменьшил отступы для компактности */
    text-align: center !important; /* Выравниваем по центру */
    border-bottom: 2px solid #1a365d !important; 
    font-size: 15px !important; /* Делаем шрифт шапки чуть меньше стандартного */
}

/* 3. Оформление строк с данными */
figure.gkx-data-table tbody td {
    padding: 15px 10px !important;
    color: #333333 !important;
    vertical-align: middle !important; /* Выравниваем текст строго по центру ячейки по высоте */
    text-align: center !important; /* Выравниваем текст по центру по горизонтали */
    border-bottom: 1px solid #f0f4f8 !important; 
    line-height: 1.4 !important; /* Делаем межстрочный интервал чуть плотнее */
    font-size: 15px !important; /* Уменьшаем основной шрифт таблицы */
}

/* Слегка подкрашиваем строку при наведении, чтобы не терять взгляд на широких таблицах */
figure.gkx-data-table tbody tr:hover td {
    background-color: #fafbfc !important;
}

/* =========================================================
   --- ПЕРЕКЛЮЧАТЕЛИ КОНТЕНТА (ВКЛАДКИ) ---
   ========================================================= */

/* 1. Стилизация кнопок-вкладок */
.gkx-tabs-buttons {
    justify-content: center !important; /* Центрируем кнопки */
    margin-bottom: 30px !important; /* Отступ до текста */
    gap: 0 !important; /* Убираем зазор между кнопками, они должны слипаться */
}

.gkx-tabs-buttons .wp-block-button {
    margin: 0 !important; /* Убиваем стандартные отступы WordPress */
}

.gkx-tabs-buttons .wp-block-button__link {
    border-radius: 0 !important; /* Делаем кнопки строгими прямоугольниками */
    background-color: #f4f7fa !important; /* Светло-серый цвет неактивной вкладки */
    color: #555555 !important; /* Темно-серый текст */
    padding: 15px 40px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: none !important; /* Убираем тени от обычных кнопок сайта */
}

/* Эффект при наведении на неактивную кнопку */
.gkx-tabs-buttons .wp-block-button__link:hover {
    background-color: #e6f1f8 !important;
    color: #1a365d !important;
    transform: none !important; /* Запрещаем подпрыгивать */
}

/* Стиль АКТИВНОЙ вкладки (Синяя из твоего макета) */
.gkx-tabs-buttons .wp-block-button__link.active-tab {
    background-color: #3567a0 !important;
    color: #ffffff !important;
    cursor: default !important; /* Показываем, что она уже нажата */
}

/* 2. Логика переключения контента */
/* Прячем все панели по умолчанию */
.gkx-tabs-content-wrapper > .wp-block-group {
    display: none !important; 
    animation: fadeInTab 0.4s ease; /* Добавляем плавное появление */
}

/* Показываем только ту, у которой есть класс active-panel */
.gkx-tabs-content-wrapper > .wp-block-group.active-panel {
    display: block !important;
}

/* Анимация: контент плавно выезжает снизу и проявляется */
@keyframes fadeInTab {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* =========================================================
   --- СПИСОК ССЫЛОК СО СКРЕПКОЙ ---
   ========================================================= */

/* 1. Убираем стандартные точки и отступы списка */
ul.gkx-link-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 25px !important;
}

/* 2. Настраиваем элементы списка как flex-контейнеры */
ul.gkx-link-list li {
    display: flex !important;
    align-items: center !important; /* Магия здесь: это выравнивает скрепку и текст строго по центру друг друга */
    margin-bottom: 15px !important; 
    line-height: 1.5 !important;
    padding-left: 0 !important; /* Убираем старый padding */
    gap: 12px !important; /* Задаем красивый отступ от скрепки до текста */
}

/* 3. Рисуем векторную скрепку */
ul.gkx-link-list li::before {
    content: "" !important;
    display: block !important;
    flex-shrink: 0 !important; /* Запрещаем скрепке сплющиваться, если текст очень длинный */
    width: 20px !important; /* Сделал её на 2px больше, чтобы смотрелась пропорциональнее */
    height: 20px !important;
    
    /* Убираем старое жесткое позиционирование */
    position: static !important;
    top: auto !important;
    left: auto !important;
    
    /* Сама иконка */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>') !important;
    
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 4. Красиво оформляем сами ссылки */
ul.gkx-link-list li a {
    color: #1a365d !important; /* Наш фирменный темно-синий */
    text-decoration: none !important; /* Убираем стандартное подчеркивание */
    font-size: 16px !important;
    transition: color 0.2s ease !important;
}

/* Эффект при наведении курсора на ссылку */
ul.gkx-link-list li a:hover {
    color: #3567a0 !important; /* Выделяем более ярким синим (как кнопки) */
    text-decoration: underline !important; /* Возвращаем подчеркивание для понятности */
}

/* =========================================================
   --- ПОДВАЛ СТАТЬИ (Навигация и похожие записи) ---
   ========================================================= */

/* --- 1. НАВИГАЦИЯ (Предыдущая / Следующая статья) --- */
.gkx-post-nav {
    border-top: 2px solid #f4f7fa !important;
    border-bottom: 2px solid #f4f7fa !important;
    padding: 20px 0 !important;
    margin-bottom: 50px !important;
}

.gkx-post-nav a {
    text-decoration: none !important;
    color: #1a365d !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

/* Эффект при наведении на ссылки "назад/вперед" */
.gkx-post-nav a:hover {
    background-color: #f4f7fa !important;
    color: #3567a0 !important;
    transform: translateY(-2px) !important;
}


/* --- 2. БЛОК "БОЛЬШЕ ЗАПИСЕЙ" --- */

/* Стилизуем заголовок */
.gkx-more-posts h2 {
    color: #1a365d !important;
    border-bottom: 3px solid #3567a0 !important; /* Синяя акцентная линия под заголовком */
    padding-bottom: 15px !important;
    margin-bottom: 30px !important;
    display: inline-block !important;
}

/* Убираем стандартные отступы у списка */
.gkx-more-posts ul.wp-block-post-template {
    list-style: none !important;
    padding: 0 !important;
}

/* Настраиваем каждую строку с записью */
.gkx-more-posts li.wp-block-post .wp-block-group {
    border-bottom: 1px solid #eef2f6 !important; /* Заменяем цветную линию темы на очень нежную серую */
    padding: 20px 15px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* Убираем линию у самой последней записи */
.gkx-more-posts li.wp-block-post:last-child .wp-block-group {
    border-bottom: none !important;
}

/* Магия при наведении курсора на строку с записью */
.gkx-more-posts li.wp-block-post .wp-block-group:hover {
    background-color: #f4f7fa !important; /* Строка подсвечивается светло-голубым */
    border-bottom-color: transparent !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

/* Настраиваем заголовок статьи в списке */
.gkx-more-posts .wp-block-post-title {
    margin: 0 !important;
    font-size: 16px !important;
}

.gkx-more-posts .wp-block-post-title a {
    text-decoration: none !important;
    color: #1a365d !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.gkx-more-posts li.wp-block-post .wp-block-group:hover .wp-block-post-title a {
    color: #3567a0 !important; /* При наведении на строку, текст становится акцентным синим */
}

/* Оформляем дату в виде аккуратного бейджа (плашки) */
.gkx-more-posts .wp-block-post-date {
    margin: 0 !important;
}

.gkx-more-posts .wp-block-post-date a {
    text-decoration: none !important;
    color: #7a8b9e !important; /* Серый цвет для даты */
    font-size: 13px !important;
    background-color: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 20px !important; /* Овальная форма */
    border: 1px solid #eef2f6 !important;
    transition: all 0.2s ease !important;
}

.gkx-more-posts li.wp-block-post .wp-block-group:hover .wp-block-post-date a {
    border-color: #3567a0 !important;
    color: #3567a0 !important;
}

/* --- АДАПТАЦИЯ НАВИГАЦИИ (Принудительный столбик) --- */
@media screen and (max-width: 600px) {
    /* Находим сам тег nav и ломаем его флекс-линию */
    .gkx-post-nav nav.wp-block-group {
        display: flex !important;
        flex-direction: column !important; /* Ставим в столбик */
        align-items: stretch !important;    /* Растягиваем на всю ширину */
        gap: 15px !important;
    }

    .gkx-post-nav .wp-block-post-navigation-link {
        width: 100% !important; /* Убеждаемся, что ячейки занимают всё место */
    }

    .gkx-post-nav a {
        display: block !important;
        background-color: #f4f7fa !important;
        padding: 15px !important;
        border-radius: 6px !important;
        text-align: left !important;
    }
}

/* --- СТРЕЛКИ ВНУТРИ БЛОКОВ НА МОБИЛЬНОМ --- */
@media screen and (max-width: 600px) {
    /* Добавляем стрелку "назад" в первый блок */
    .gkx-post-nav .post-navigation-link-previous a::before {
        content: "←";
        margin-right: 10px;
        font-weight: bold;
    }

    /* Добавляем стрелку "вперед" во второй блок */
    .gkx-post-nav .post-navigation-link-next a::after {
        content: "→";
        margin-left: 10px;
        font-weight: bold;
    }

    /* Прячем те стрелки, которые WordPress добавляет стандартно (чтобы не было дублей) */
    .wp-block-post-navigation-link__arrow-previous,
    .wp-block-post-navigation-link__arrow-next {
        display: none !important;
    }
}

/* --- СЕТКА НОВОСТЕЙ (Карточки) --- */

/* =========================================================
   --- ТИПОГРАФИКА КАРТОЧЕК НОВОСТЕЙ ---
   ========================================================= */

/* Заголовок записи внутри карточки */
.gkx-additional-posts .wp-block-post-title {
    font-size: 20px !important;      /* Делаем заголовок заметным */
    font-weight: 700 !important;     /* Жирный начертание для акцента */
    line-height: 1.3 !important;     /* Улучшаем читаемость заголовка */
    margin: 0 0 12px 0 !important;   /* Отступ под заголовком */
    color: #1a365d !important;       /* Наш фирменный темно-синий */
}

/* Дата публикации */
.gkx-additional-posts .wp-block-post-date {
    font-size: 13px !important;      /* Шрифт меньше основного текста */
    color: #7a8b9e !important;       /* Приглушенный серый цвет */
    margin-bottom: 12px !important;
    font-weight: 400 !important;
}

/* Краткое описание (отрывок) */
.gkx-additional-posts .wp-block-post-excerpt {
    font-size: 15px !important;      /* Комфортный размер для чтения */
    line-height: 1.6 !important;     /* Увеличенный интервал для легкости */
    color: #4a5568 !important;       /* Мягкий темный цвет */
    margin: 0 !important;
}

.wp-block-post:hover {
    transform: translateY(-5px) !important;
}

/* Пагинация (вместо кнопки "Загрузить ещё") */
.wp-block-query-pagination {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.wp-block-query-pagination-numbers a, 
.wp-block-query-pagination-next, 
.wp-block-query-pagination-previous {
    padding: 10px 15px !important;
    border: 1px solid #3567a0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: #3567a0 !important;
}

.wp-block-query-pagination-numbers a:hover {
    background: #3567a0 !important;
    color: #fff !important;
}

/* =========================================================
   --- СТИЛЬНЫЕ КАРТОЧКИ СОТРУДНИКОВ (ОДНА ВЫСОТА) ---
   ========================================================= */

/* 1. Общий контейнер карточки */
.gkx-employee-card {
    background-color: #ffffff !important;
    border: 1px solid #eef2f6 !important; /* Легкая рамка, как на макете, но мягче */
    border-radius: 8px !important; /* Наше фирменное скругление */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important; /* Едва заметная тень */
    display: flex !important;
    flex-direction: column !important; /* Выстраиваем элементы строго вертикально */
    height: 100% !important; /* Заставляем все карточки в ряду тянуться до максимальной высоты */
    text-align: center !important;
    overflow: hidden !important; /* Чтобы картинка не вылезала за округленные края */
    transition: all 0.3s ease !important;
}

/* Эффект при наведении курсора */
.gkx-employee-card:hover {
    transform: translateY(-4px) !important; /* Карточка плавно приподнимается */
    box-shadow: 0 8px 25px rgba(26, 54, 93, 0.1) !important; /* Тень становится глубже */
    border-color: #3567a0 !important; /* Рамка окрашивается в наш фирменный синий */
}

/* 2. Авто-выравнивание фотографии */
.gkx-employee-card .wp-block-image {
    margin: 0 !important; /* Картинка прижимается к верхнему краю без отступов */
}

.gkx-employee-card .wp-block-image img {
    width: 100% !important;
    height: 320px !important; /* Фиксированная высота для ВСЕХ фото. Лица теперь на одном уровне */
    object-fit: cover !important; /* Магия: фото масштабируется и обрезается под размер, не сплющиваясь */
    object-position: top center !important; /* Центрируем кроп по верхней части (по лицу) */
    border-radius: 0 !important;
}

/* 3. Оформление текста (ФИО) */
.gkx-employee-card h4,
.gkx-employee-card .wp-block-heading {
    color: #1a365d !important; /* Темно-синий текст */
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 20px 15px 10px 15px !important; /* Отступы от краев карточки */
}

/* 4. Оформление должности */
.gkx-employee-card p:not(.gkx-reception-days) {
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 15px 20px 15px !important;
    
    /* Самый важный элемент выравнивания: */
    flex-grow: 1 !important; /* Блок должности забирает всё пустое место и выталкивает блок приема вниз */
}

/* 5. График приема (Нижний блок) */
.gkx-employee-card .gkx-reception-days {
    font-size: 13px !important;
    color: #7a8b9e !important; /* Приглушенный серо-синий цвет */
    line-height: 1.4 !important;
    margin: auto 15px 20px 15px !important; /* margin-top: auto намертво прибивает блок к низу */
    padding-top: 15px !important;
    border-top: 1px dashed #e2e8f0 !important; /* Аккуратный пунктирный разделитель над графиком */
    flex-grow: 0 !important; /* Этому блоку растягиваться запрещено */
}

/* =========================================================
   --- СТИЛИ ДЛЯ ВС ПЛЫВАЮЩЕГО ОКНА ГАЛЕРЕИ (LIGHTBOX) ---
   ========================================================= */

/* Темный фон-обертка */
.gkx-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 47, 0.9); /* Фирменный глубокий темно-синий с высокой прозрачностью */
    z-index: 999999; /* Поверх всего на свете */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Активация окна скриптом */
.gkx-lightbox-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Контейнер для картинки */
.gkx-lightbox-content {
    max-width: 85%;
    max-height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gkx-lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: zoomInImg 0.25s ease; /* Эффект мягкого появления картинки */
}

@keyframes zoomInImg {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Кнопка закрытия (крестик) */
.gkx-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}
.gkx-lightbox-close:hover {
    color: #3567a0; /* Наш синий ховер */
}

/* Стрелки Вперед / Назад */
.gkx-lightbox-arrow {
    position: absolute;
    color: #ffffff;
    font-size: 36px;
    cursor: pointer;
    padding: 20px;
    user-select: none;
    transition: all 0.2s;
    background-color: rgba(255,255,255,0.05);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gkx-lightbox-arrow:hover {
    background-color: #3567a0;
    color: #ffffff;
}

.gkx-lightbox-prev { left: 30px; }
.gkx-lightbox-next { right: 30px; }

/* Адаптация стрелок под мобильные экраны */
@media screen and (max-width: 768px) {
    .gkx-lightbox-arrow {
        bottom: 20px; /* На смартфонах переносим стрелки вниз, чтобы не перекрывали картинку */
        font-size: 28px;
        width: 50px;
        height: 50px;
    }
    .gkx-lightbox-prev { left: calc(50% - 60px); }
    .gkx-lightbox-next { right: calc(50% - 60px); }
    .gkx-lightbox-close { top: 10px; right: 20px; font-size: 34px; }
}

/* Отключаем указатель-пальчик для некликабельных пунктов меню */
.gkx-main-nav .wp-block-navigation-submenu > a[href="#"] {
    cursor: default !important;
}

/* =========================================================
   --- СТИЛИЗАЦИЯ КОНТАКТНОЙ ФОРМЫ (Contact Form 7) ---
   ========================================================= */

/* 1. Общий контейнер формы (оформление в виде карточки) */
.wpcf7 {
    background-color: #ffffff !important;
    border: 1px solid #eef2f6 !important; /* Легкая рамка, как у карточек сотрудников */
    border-radius: 12px !important;       /* Наше фирменное скругление карточек */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important; /* Мягкая базовая тень */
    padding: 35px !important;
    max-width: 750px !important;          /* Ограничиваем ширину для удобства чтения */
    margin: 30px auto !important;         /* Центрируем форму на странице */
    box-sizing: border-box !important;
}

/* Убираем лишние отступы у абзацев внутри формы */
.wpcf7-form p {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

/* 2. Стилизация текстовых меток (Labels) */
.wpcf7-form label {
    display: block !important;
    color: #1a365d !important;            /* Наш фирменный темно-синий цвет */
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* 3. Стилизация полей ввода (Inputs) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 8px !important;           /* Отступ от текста метки до поля ввода */
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1dce7 !important; /* Нежный серо-голубой контур */
    border-radius: 6px !important;        /* Стандартное скругление для полей */
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

/* Оформление плейсхолдеров (подсказок внутри полей) */
.wpcf7-form input::placeholder {
    color: #a0aec0 !important;
    opacity: 1 !important;
}

/* Состояние фокуса (активное поле) */
.wpcf7-form input:focus {
    outline: none !important;
    border-color: #3567a0 !important;     /* Наш акцентный синий цвет */
    box-shadow: 0 0 0 3px rgba(53, 103, 160, 0.15) !important; /* Мягкое свечение вокруг поля */
}

/* 4. Выравнивание капчи (Картинка + Поле ввода в одну строку) */
.wpcf7-form .wpcf7-captchac {
    border-radius: 4px !important;
    vertical-align: middle !important;
    margin-right: 15px !important;
    border: 1px solid #eef2f6 !important;
}

/* Делаем так, чтобы поле ввода капчи шло в ряд с картинкой, а не прыгало вниз */
.wpcf7-form .wpcf7-form-control-wrap[data-name^="captcha-"] {
    display: inline-block !important;
    vertical-align: middle !important;
    max-width: 180px !important;          /* Ограничиваем ширину поля ввода капчи */
}

.wpcf7-form input.wpcf7-captchar {
    margin-top: 0 !important;             /* Убираем верхний маргин для выравнивания */
}

/* 5. Оформление ошибок валидации (Красные поля и подсказки) */
/* Подсветка некорректно заполненного поля */
.wpcf7-form input.wpcf7-not-valid {
    border-color: #e53e3e !important;
    background-color: #fff5f5 !important;
}

/* Текст ошибки под конкретным полем */
.wpcf7-not-valid-tip {
    display: block !important;
    color: #e53e3e !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

/* 6. Общее всплывающее уведомление внизу формы (успех / ошибка) */
.wpcf7-response-output {
    margin: 25px 0 0 0 !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* Если в форме есть ошибки при отправке */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unsubstitutable .wpcf7-response-output {
    background-color: #fff5f5 !important;
    border: 1px solid #fed7d7 !important;
    color: #c53030 !important;
}

/* Если форма успешно отправлена */
.wpcf7-form.sent .wpcf7-response-output {
    background-color: #f0fff4 !important;
    border: 1px solid #c6f6d5 !important;
    color: #22543d !important;
}

/* Стилизация спиннера загрузки */
.wpcf7-spinner {
    background-color: #3567a0 !important;
    margin-left: 15px !important;
    vertical-align: middle !important;
}

/* Скрываем верхний блок технического дублирования ошибок, оставляем только нижний красивый */
.screen-reader-response {
    display: none !important;
}

/* =========================================================
   --- ЦЕНТРИРОВАНИЕ И СТИЛИЗАЦИЯ КНОПКИ ФОРМЫ (ИСПРАВЛЕНО) ---
   ========================================================= */

/* 1. Находим абзац, в котором лежит кнопка, и центрируем его */
.wpcf7-form p:has(.wpcf7-submit) {
    text-align: center !important;
    margin-bottom: 15px !important;
    position: relative !important; /* Нужно для фиксации спиннера */
}

/* 2. Стилизуем тег input под дизайн кнопок .wp-block-button__link */
body .wpcf7-form input.wpcf7-submit {
    background-color: #3567a0 !important; /* Наш фирменный синий */
    color: #ffffff !important;             /* Белый текст */
    border-radius: 50px !important;        /* Форма таблетки */
    padding: 12px 32px !important;         /* Внутренние отступы */
    border: none !important;               /* Полностью убираем рамки инпута */
    font-weight: 600 !important;           /* Жирность шрифта */
    font-size: 16px !important;
    font-family: inherit !important;       /* Принудительно наследуем чистый шрифт сайта */
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15) !important; /* Фирменная тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
    display: inline-block !important;
    cursor: pointer !important;
    
    /* Сброс заводских настроек браузеров и мобильных ОС */
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: normal !important;
}

/* 3. Эффект при наведении (полная копия ховера остальных кнопок) */
body .wpcf7-form input.wpcf7-submit:hover {
    background-color: #2a5280 !important;  /* Затемнение синего */
    transform: translateY(-3px) !important;/* Кнопка слегка приподнимается */
    box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.2) !important; /* Тень становится шире */
    color: #ffffff !important;
}

/* 4. Корректируем положение крутилки загрузки (спиннера) */
/* Делаем его абсолютным, чтобы при появлении он не сдвигал кнопку с центра */
.wpcf7-form .wpcf7-spinner {
    position: absolute !important;
    margin-left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Выравниваем строго по центру высоты кнопки */
}

/* =========================================================
   --- СТИЛИЗАЦИЯ СТРАНИЦЫ РУБРИК И АРХИВОВ ---
   ========================================================= */

/* 1. Красивый заголовок самой рубрики (например: "Рубрика: Объявления") */
.wp-block-archive-title {
    color: #1a365d !important;       /* Наш фирменный темно-синий */
    font-weight: 700 !important;
    font-size: 28px !important;
    margin-top: 20px !important;
    margin-bottom: 35px !important;
    border-bottom: 2px solid #f4f7fa !important; /* Легкая разделительная линия */
    padding-bottom: 15px !important;
}

/* 2. Каждая запись в списке превращается в аккуратную карточку */
.gkx-archive-posts .wp-block-post {
    background-color: #ffffff !important;
    border: 1px solid #eef2f6 !important; /* Тонкий контур, как у сотрудников */
    border-radius: 12px !important;       /* Наше фирменное скругление */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important; /* Мягкая тень */
    padding: 30px !important;
    margin-bottom: 35px !important;       /* Отступ между карточками объявлений */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Эффект легкого объема при наведении на новость */
.gkx-archive-posts .wp-block-post:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(26, 54, 93, 0.08) !important;
    border-color: #3567a0 !important;     /* Подсветка краев фирменным синим */
}

/* 3. Ограничиваем гигантские изображения в ленте */
.gkx-archive-posts .wp-block-post-featured-image,
.gkx-archive-posts .wp-block-image {
    margin: 0 0 20px 0 !important;
    max-width: 100% !important;
}

.gkx-archive-posts .wp-block-post-featured-image img,
.gkx-archive-posts .wp-block-image img {
    max-height: 450px !important;         /* Картинка больше не будет растягиваться на весь экран */
    width: 100% !important;
    object-fit: cover !important;         /* Аккуратное заполнение области без деформации */
    border-radius: 6px !important;
}

/* 4. Типографика внутри карточки рубрики */
/* Заголовок записи */
.gkx-archive-posts .wp-block-post-title {
    margin: 0 0 12px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.gkx-archive-posts .wp-block-post-title a {
    color: #1a365d !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.gkx-archive-posts .wp-block-post-title a:hover {
    color: #3567a0 !important;            /* Синий акцент при наведении на название */
}

/* Текст отрывка / описания */
.gkx-archive-posts .wp-block-post-excerpt,
.gkx-archive-posts .wp-block-post-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #4a5568 !important;            /* Облегченный темный текст */
    margin-bottom: 20px !important;
}

/* Дата публикации внизу */
.gkx-archive-posts .wp-block-post-date {
    font-size: 13px !important;
    color: #7a8b9e !important;            /* Серый аккуратный цвет */
    margin: 15px 0 0 0 !important;
    display: block !important;
    font-weight: 500 !important;
}

/* 5. Аккуратный дизайн для аудиоплееров внутри объявлений */
.gkx-archive-posts .wp-block-audio,
.gkx-archive-posts audio {
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
}

/* =========================================================
   --- ВСПЛЫВАЮЩЕЕ ПРЕДУПРЕЖДАЮЩЕЕ ОКНО (POPUP) ---
   ========================================================= */

/* Темный фон-перекрытие */
.gkx-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(30, 40, 50, 0.8) !important; /* Плотный темный фон */
    z-index: 9999999 !important; /* Всегда поверх шапки и меню */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Класс, который скрипт добавляет для показа окна */
.gkx-modal-overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Белая карточка по центру */
.gkx-modal-box {
    background-color: #ffffff !important;
    border-radius: 6px !important; /* Аккуратные углы */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important; 
    max-width: 700px !important;
    width: 100% !important;
    position: relative !important;
    padding: 50px 40px 40px 40px !important; /* Просторные отступы */
    box-sizing: border-box !important;
    text-align: center !important;
    
    /* Эффект выныривания карточки */
    transform: scale(0.95) !important;
    transition: transform 0.4s ease !important;
}

.gkx-modal-overlay.is-visible .gkx-modal-box {
    transform: scale(1) !important;
}

/* Точная копия крестика из макета (синий круг с белым X) */
.gkx-modal-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background-color: #3567a0 !important; /* Наш синий цвет */
    color: #ffffff !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    padding: 0 0 2px 0 !important; /* Центровка крестика */
}

.gkx-modal-close:hover {
    background-color: #1a365d !important; /* Темно-синий при наведении */
}

/* Основной текст сообщения */
.gkx-modal-body p {
    color: #333333 !important;                           
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    font-family: inherit !important;
}

/* Ссылка "обращения.бел" (как на макете) */
.gkx-modal-body a.gkx-modal-link {
    display: inline-block !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #3567a0 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.gkx-modal-body a.gkx-modal-link:hover {
    color: #1a365d !important;
    text-decoration: none !important;
}

/* Адаптация под телефоны */
@media screen and (max-width: 600px) {
    .gkx-modal-box {
        padding: 40px 20px 30px 20px !important;
    }
    .gkx-modal-body p {
        font-size: 18px !important;
    }
    .gkx-modal-body a.gkx-modal-link {
        font-size: 24px !important;
    }
}

/* =========================================================
   --- ПЛАВАЮЩИЙ БАННЕР СПРАВА ВНИЗУ (ЕНОТ) ---
   ========================================================= */

/* 1. Главный контейнер баннера */
.gkx-floating-promo-wrapper {
    position: fixed !important;
    bottom: 90px !important; /* Поднимаем над кнопкой "Наверх" (она на уровне 30px) */
    right: 30px !important;  /* Отступ справа, как у кнопки "Наверх" */
    z-index: 999998 !important; /* Чуть ниже главного модального окна */
    width: 300px !important; /* Оптимальный размер для картинки */
    max-width: 85vw !important; /* Защита для очень узких экранов */
    
    /* Скрыто по умолчанию и сдвинуто за правый край для красивого выезда */
    transform: translateX(120%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Плавная пружинистая анимация */
}

/* Скрипт добавляет этот класс для показа */
.gkx-floating-promo-wrapper.is-visible {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Кнопка закрытия (Крестик) */
.gkx-promo-close {
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    background-color: #ffffff !important;
    color: #7a8b9e !important;
    border: 1px solid #eef2f6 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    padding: 0 0 2px 0 !important; /* Центрирование самого крестика внутри круга */
}

/* Эффект наведения на крестик */
.gkx-promo-close:hover {
    background-color: #e53e3e !important; /* Аккуратный красный цвет при наведении */
    color: #ffffff !important;
    border-color: #e53e3e !important;
    transform: scale(1.1) !important;
}

/* 3. Оформление самой картинки-ссылки */
.gkx-promo-link {
    display: block !important;
    border-radius: 8px !important; /* Скругление картинки */
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; /* Глубокая тень */
    transition: transform 0.3s ease !important;
}

/* Легкое увеличение при наведении на баннер */
.gkx-promo-link:hover {
    transform: scale(1.03) !important;
}

.gkx-promo-link img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

/* 4. Адаптация под мобильные телефоны */
@media screen and (max-width: 600px) {
    .gkx-floating-promo-wrapper {
        bottom: 80px !important;
        right: 20px !important;
        width: 250px !important; /* Делаем баннер чуть меньше на смартфонах */
    }
}

/* =========================================================
   --- ПАНЕЛЬ УВЕДОМЛЕНИЯ О COOKIE ---
   ========================================================= */

/* Главный контейнер панели */
.gkx-cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important; /* Тень падает вверх */
    z-index: 999997 !important; /* Поверх сайта, но под модальными окнами */
    border-top: 1px solid #eef2f6 !important;
    
    /* Спрятано внизу за пределами экрана по умолчанию */
    transform: translateY(100%) !important; 
    transition: transform 0.4s ease-in-out !important;
}

/* Класс, добавляемый скриптом для появления панели */
.gkx-cookie-banner.is-visible {
    transform: translateY(0) !important; 
}

/* Внутренний ограничитель ширины и выравнивание */
.gkx-cookie-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 15px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Текст по центру */
    gap: 20px !important; /* Отступ между текстом и кнопкой */
}

/* Текст уведомления */
.gkx-cookie-banner p {
    margin: 0 !important;
    color: #4a5568 !important; /* Комфортный для чтения серый цвет */
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Настройка кнопки "ОК" внутри панели */
.gkx-cookie-banner button#gkx-cookie-accept {
    padding: 8px 30px !important; /* Делаем кнопку чуть компактнее, чем обычные */
    font-size: 14px !important;
    flex-shrink: 0 !important; /* Запрещаем кнопке сжиматься, если текст длинный */
    margin: 0 !important;
}

/* Адаптация под смартфоны */
@media screen and (max-width: 768px) {
    .gkx-cookie-container {
        flex-direction: column !important; /* На телефоне кнопка прыгнет под текст */
        text-align: center !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }
    .gkx-cookie-banner button#gkx-cookie-accept {
        width: 100% !important; /* Кнопка растянется на всю ширину экрана */
    }
}

/* =========================================================
   --- ФИКС ЛИПКОГО МЕНЮ ДЛЯ АДМИН-ПАНЕЛИ WORDPRESS ---
   ========================================================= */

/* Для ПК-версии (высота #wpadminbar = 32px) */
body.admin-bar .wp-block-group.is-position-sticky {
    top: 32px !important;
}

/* На мобильных и планшетах (до 782px) #wpadminbar становится толще (46px) */
@media screen and (max-width: 782px) {
    body.admin-bar .wp-block-group.is-position-sticky {
        top: 46px !important;
    }
}