/* Устанавливаем box-sizing: border-box для всех элементов в блоке поиска, чтобы padding и border не влияли на общую ширину */
#block-search, #block-search * {
    box-sizing: border-box;
}

/* Устанавливаем позиционирование для контейнера блока */
.tl-block {
    position: relative;
}

/* Стиль для блока поиска с фоном и закругленными углами */
#block-search-main {
    background: rgba(0, 45, 75, 0.70); /* Прозрачный синий фон */
    width: 100%; /* Ширина блока на 80% от родителя */
    max-width: 1100px; /* Максимальная ширина блока */
    box-sizing: border-box; /* Включаем padding и border в расчет общей ширины */
    position: absolute !important; /* Абсолютное позиционирование */
    bottom: 0; /* Блок прикрепляется к нижней части родительского контейнера */
    z-index: 1; /* Устанавливаем порядок наложения */
    border-radius: 15px 15px 0 0; /* Закругление только верхних углов (влево-вверх, вправо-вверх) */
    left: 50%; /* Смещение от левого края */
    transform: translateX(-50%); /* Центрирование по горизонтали */
}

/* Стиль для основного блока поиска с фоном */
#block-search {
    background: #002D4B; /* Синий фон */
    width: 100%; /* Ширина блока на 100% */
    z-index: 1; /* Порядок наложения */
    position: relative; /* Относительное позиционирование */
}

/* Контейнер для блоков внутри, с отступами и выравниванием по центру */
.tl-container {
    padding: 0 30px; /* Отступы слева и справа по 25px */
    margin: 0 auto; /* Автоматическое выравнивание по центру */
}

/* Отключаем отображение блока обратной связи */
.fd-feedback {
    display: none;
}

/* Медиазапрос для экранов шириной 1209px и меньше */
@media screen and (max-width: 1209px) {
    /* При ширине экрана 1209px и меньше, кнопка перемещается вверх */
    body > section.site-hero.overlay > a {
        bottom: 170px;
    }
}

/* Медиазапрос для экранов шириной 891px и меньше */
@media screen and (max-width: 891px) {
    /* При ширине экрана 891px и меньше, кнопка перемещается еще выше */
    body > section.site-hero.overlay > a {
        bottom: 230px;
    }
}

/* Медиазапрос для экранов шириной 432px и меньше */
@media screen and (max-width: 432px) {
    /* При ширине экрана 432px и меньше, кнопка еще выше */
    body > section.site-hero.overlay > a {
        bottom: 140px;
    }

    /* Убираем закругление углов и меняем фон на стандартный */
    #block-search-main {
        position: relative !important;
        bottom: auto;
        background: #002D4B; /* Стандартный фон */
        border-radius: 0; /* Убираем закругление углов */
         width: 100%; /* Ширина блока на 80% от родителя */
    }
}

/* Применение шрифта Engravers Gothic для всех элементов внутри блока поиска */
body .tl-block #block-search-main #tl-search-form,
body .tl-block #block-search-main #tl-search-form * {
    font-family: 'Engravers Gothic', sans-serif !important;
}
