/* ===== ОБЪЕДИНЕННЫЙ CSS ФАЙЛ GENOMICA ===== */

/* ===== БАЗОВЫЕ СТИЛИ ===== */

/* Сброс стилей для всех элементов */
* {
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
    box-sizing: border-box; /* Включаем границы и отступы в общий размер элемента */
}



/* ===== ИСПРАВЛЕНИЯ ДЛЯ ШАПКИ GENOMICA ===== */

/* 1. ОСНОВНОЙ КОНТЕЙНЕР ШАПКИ */
#topnav .topbar-main {
    background: #253138; /* Сохраняем существующий цвет фона */
    border-bottom: 1px solid #3a4a52; /* ДОБАВЛЯЕМ: подчеркивающая линия под шапкой */
}

/* 2. КОНТЕЙНЕР С ФЛЕКС-ВЕРСТКОЙ */
#topnav .topbar-main .container-fluid {
    display: flex; /* Включаем flexbox для горизонтального размещения элементов */
    align-items: center; /* Выравниваем все дочерние элементы по центру по вертикали */
    justify-content: space-between; /* Логотип слева, остальные элементы справа */
    height: 58px; /* Фиксированная высота шапки для стабильности */
    padding-left: 10px; /* Отступ слева от края браузера */
    padding-right: 10px; /* Отступ справа от края браузера */
}

/* 3. ИСПРАВЛЕНИЕ ЛОГОТИПА */
#topnav .topbar-main .logo {
    color: #ffffff !important; /* Белый цвет текста логотипа (сохраняем) */
    font-size: 20px; /* Размер шрифта 20 пикселей (сохраняем) */
    font-weight: 700; /* Жирность шрифта 700 (сохраняем) */
    letter-spacing: 1px; /* Расстояние между буквами 1 пиксель (сохраняем) */
    line-height: 58px; /* Высота строки равна высоте шапки для центрирования (сохраняем) */
    text-transform: uppercase; /* Заглавные буквы (сохраняем) */
    float: none; /* УБИРАЕМ: float нарушает работу flexbox */
    flex-shrink: 0; /* ДОБАВЛЯЕМ: запрещаем сжатие логотипа при узком экране */
}

/* 4. КОНТЕЙНЕР ПОИСКА И КНОПОК */
.menu-extras.topbar-custom {
    display: flex; /* Flexbox для горизонтального размещения поиска и кнопок */
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 15px; /* Расстояние 15px между формой поиска и блоком кнопок */
    margin-left: auto; /* КЛЮЧЕВОЕ: автоматический отступ прижимает к правому краю */
}

/* 5. ФОРМА ПОИСКА */
.app-search {
    position: relative; /* Относительное позиционирование для размещения кнопки поиска внутри */
    display: flex; /* Flexbox для правильного размещения поля и кнопки */
    align-items: center; /* Выравнивание по центру по вертикали */
}

.app-search input.form-control {
    width: 200px; /* Ширина поля поиска 200 пикселей */
    height: 36px; /* Высота 36px - соответствует высоте кнопок */
    padding: 0 35px 0 10px; /* Отступы: 0 сверху, 35px справа (место для кнопки), 0 снизу, 10px слева */
    background: rgba(255, 255, 255, 0.1); /* Полупрозрачный белый фон (10% прозрачности) */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная белая рамка (20% прозрачности) */
    border-radius: 4px; /* Скругление углов 4 пикселя */
    color: #fff; /* Белый цвет введенного текста */
    font-size: 14px; /* Размер шрифта 14 пикселей */
}

.app-search input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Цвет плейсхолдера - полупрозрачный белый (60% прозрачности) */
}

.app-search button {
    position: absolute; /* Абсолютное позиционирование относительно родительского элемента */
    right: 5px; /* Расположение в 5px от правого края поля ввода */
    top: 50%; /* Позиция по центру по вертикали */
    transform: translateY(-50%); /* Смещение на половину высоты элемента вверх для точного центрирования */
    background: none; /* Убираем фон кнопки */
    border: none; /* Убираем рамку кнопки */
    color: rgba(255, 255, 255, 0.7); /* Цвет иконки - полупрозрачный белый (70% прозрачности) */
    cursor: pointer; /* Изменение курсора на "руку" при наведении */
    padding: 5px; /* Внутренние отступы 5px для увеличения области клика */
}

/* 6. КОНТЕЙНЕР КНОПОК */
.custom-buttons-wrapper {
    display: flex; /* Flexbox для горизонтального размещения кнопок */
    align-items: center; /* Выравнивание кнопок по центру по вертикали */
    gap: 4px; /* Расстояние 4px между кнопками */
    margin-left: 0; /* УБИРАЕМ: внешний отступ слева, так как используем gap */
    padding-top: 0; /* УБИРАЕМ: верхний отступ, так как используем align-items: center */
}

/* ===== ПОЛНЫЕ СТИЛИ КНОПОК ===== */

/* 7. ОСНОВНОЙ СТИЛЬ ДЛЯ ВСЕХ КНОПОК */
.button {
    display: inline-block; /* Строчно-блочный элемент - можно задать высоту и ширину */
    vertical-align: middle; /* Выравнивание по середине базовой линии */
    height: 36px; /* Высота кнопки 36 пикселей */
    line-height: 30px; /* Высота строки 30px для вертикального центрирования текста */
    padding: 0 16px; /* Внутренние отступы: 0 сверху/снизу, 16px слева/справа */
    margin: 0; /* УБИРАЕМ: внешние отступы, используем gap в родительском контейнере */
    font-size: 14px; /* Размер шрифта 14 пикселей */
    color: #ddd; /* Цвет текста - светло-серый (#ddd) */
    text-align: center; /* Выравнивание текста по центру кнопки */
    text-decoration: none; /* Убираем подчеркивание для ссылок */
    text-shadow: 0 1px rgba(0, 0, 0, 0.8); /* Тень текста для объемности */
    background: #464a4f; /* Основной темно-серый цвет фона */
    background-clip: padding-box; /* Обрезка фона по границе внутренних отступов */
    border: 1px solid #111; /* Темная рамка */
    border-bottom-color: black; /* Черная нижняя рамка для объемного эффекта */
    border-radius: 4px; /* Скругление углов 4 пикселя */
    cursor: pointer; /* Курсор "рука" при наведении */
    box-sizing: border-box; /* Включение padding и border в общую ширину элемента */
    /* Градиент для объемного эффекта */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.25));
    /* Тень для объемного эффекта */
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Стили при наведении и фокусе */
.button:hover, .button:focus {
    color: #ddd; /* Цвет текста остается прежним */
    background-color: #53585f; /* Фон становится светлее при наведении */
    outline: none; /* Убираем стандартную обводку фокуса */
}

/* Стили при нажатии и активном состоянии */
.button:active, .button.active {
    color: #ccc; /* Цвет текста становится светлее */
    background: #323538; /* Темный фон для эффекта нажатия */
    border-color: black #111 #111; /* Изменение цветов рамки */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 50%, rgba(255, 255, 255, 0.07));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

/* ===== ЦВЕТНЫЕ ВАРИАНТЫ КНОПОК ===== */

/* Синие кнопки */
.button-blue {
    background-color: #2265a1; /* Основной синий цвет */
}
.button-blue:hover {
    background-color: #2672b6; /* Светлее при наведении */
}
.button-blue:active {
    background-color: #1b507f; /* Темнее при нажатии */
}

/* Красные кнопки */
.button-red {
    background-color: #8d2d2b; /* Основной красный цвет */
}
.button-red:hover {
    background-color: #a13331; /* Светлее при наведении */
}
.button-red:active {
    background-color: #6e2321; /* Темнее при нажатии */
}

/* Фиолетовые кнопки */
.button-purple {
    background-color: #71428e; /* Основной фиолетовый цвет */
}
.button-purple:hover {
    background-color: #7f4a9f; /* Светлее при наведении */
}
.button-purple:active {
    background-color: #5b3572; /* Темнее при нажатии */
}

/* Зеленые кнопки */
.button-green {
    background-color: #3f7636; /* Основной зеленый цвет */
}
.button-green:hover {
    background-color: #48873e; /* Светлее при наведении */
}
.button-green:active {
    background-color: #305a29; /* Темнее при нажатии */
}

/* 8. ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ССЫЛОК-КНОПОК */
a.button {
    line-height: 36px; /* Высота строки равна высоте кнопки для правильного центрирования текста */
    text-decoration: none; /* Убираем подчеркивание ссылок */
}

/* 9. ОЧИСТКА ОБТЕКАНИЯ (на всякий случай) */
.clearfix::after {
    content: ""; /* Пустое содержимое псевдоэлемента */
    display: table; /* Табличное отображение для очистки */
    clear: both; /* Очистка всех float-элементов */
}

/* ===== ДЕМОНСТРАЦИОННЫЕ СТИЛИ ===== */

/* Стили для демонстрационного контента */
.demo-content {
    padding: 40px 20px; /* Внутренние отступы: 40px сверху/снизу, 20px слева/справа */
    text-align: center; /* Выравнивание текста по центру */
}

/* Заголовок в демонстрационном блоке */
.demo-content h1 {
    color: #20C997; /* Зеленый цвет заголовка (основной цвет бренда) */
    margin-bottom: 20px; /* Отступ снизу 20px */
}

/* Параграфы в демонстрационном блоке */
.demo-content p {
    color: #ccc; /* Светло-серый цвет текста */
    font-size: 16px; /* Размер шрифта 16 пикселей */
}