/* ===========================================================
   custom.css 
   Оформление шапки, меню, кнопок и иконки-бургера под макет
   (с учётом ваших переменных)
   =========================================================== */

/* 1) Задаём базовые шрифтовые параметры через переменные */

body {
    /* Основной шрифт и размер текста */
    font-family: var(--font);
    font-size: var(--textFontSize);
    color: var(--textColor);
    background-color: var(--b-groundColor);
    margin: 0;
    padding: 0;
}

p {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mainWhite)
}

a {
    text-decoration: none;
}


/* ===== Пункты меню (DESKTOP) ===== */
/* 
   - font-size: используем --navFontSize 
   - цвет по умолчанию — белый, при hover/active — красный 
*/
.navbar-dark .nav-link {
    font-family: var(--font);
    font-size: var(--navFontSize);
    font-weight: 400;
    color: var(--mainWhite);
    transition: color 0.2s;
    text-align: center;
    padding-left: var(--inBlockGap);
    padding-right: var(--inBlockGap);
    padding-top: calc(var(--inBlockGap) / 2);
    padding-bottom: calc(var(--inBlockGap) / 2);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link.active {
    color: var(--mainRed);
}

/* ===== БЛОК КНОПОК «Вход»/«Регистрация» (DESKTOP) ===== */
/* 
   У блока задаём gap между кнопками через переменную --inBlockGap. 
   Блок сам спозиционирован справа (см. header.php).
*/
.buttons-header {
    display: flex;
    align-items: center;
    gap: var(--inBlockGap);
}

/* ===== Кнопка «Вход» ===== */
/* Прозрачный фон, красный текст, без обводки */
.btn-login {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    color: var(--mainRed);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) var(--menuGap);
    text-align: center;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.btn-login:hover,
.btn-login:focus {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
    text-decoration: none;
}

/* ===== Кнопка «Регистрация» ===== */
/* Красная заливка, белый текст, красная рамка */
.btn-register {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    color: var(--mainWhite);
    background-color: var(--mainRed);
    border: 1px solid var(--mainRed);
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) var(--menuGap);
    text-align: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-register:hover,
.btn-register:focus {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
    text-decoration: none;
}

/* ===== Иконка-бургер (bi-list) и крестик (bi-x) ===== */
/* 
   - обводка кнопки: красная 
   - иконка внутри: крупнее, цвет — red 
*/
.navbar-toggler {
    border: 1px solid var(--mainRed) !important;
    border-radius: 4px;
    padding: 0.25rem 0.4rem !important;
}

.navbar-toggler .bi {
    font-size: 2rem !important;
    width: auto !important;
    height: auto !important;
    color: var(--mainRed) !important;
    line-height: 1;
}

/* Убираем стандартную фокус-обводку Bootstrap */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ===== Стили для заголовков (h1, h2, h3) ===== */
h1 {
    font-family: var(--font);
    font-size: var(--h1FontSize);
    font-weight: var(--h1FontWeight);
    margin: 0 0 var(--inBlockGap) 0;
    color: var(--textColor);
}

h2 {
    font-family: var(--font);
    font-size: var(--h2FontSize);
    font-weight: var(--h2FontWeight);
    margin: 0 0 var(--inBlockGap) 0;
    color: var(--textColor);
}

h3 {
    font-family: var(--font);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
    margin: 0 0 var(--inBlockGap) 0;
    color: var(--textColor);
}

/* ===== Текст «узнать больше» или похожие элементы ===== */
.more-text {
    font-family: var(--font);
    font-size: var(--moreFontSize);
    font-weight: var(--moreFontWeight);
    color: var(--mainWhite);
    text-decoration: none;
    transition: color 0.2s;
}

.more-text:hover,
.more-text:focus {
    color: var(--mainRed);
}

/* ===== Стили пагинации ===== */
.pagination {
    gap: 8px;
}

/* Base styles for all page links */
.pagination .page-link {
    background-color: transparent !important;
    border: none !important;
    color: var(--mainWhite) !important;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Active state for current page */
.pagination .page-item.active .page-link {
    color: var(--mainRed) !important;
    border: 2px solid var(--mainRed) !important;
    border-radius: 50% !important;
}

/* Hover state for non-active pages */
.pagination .page-item:not(.active) .page-link:hover {
    color: var(--mainRed) !important;
}

/* Navigation arrows - always without border */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border: none !important;
}

/* ===== Мобильное меню (≤ 991px) ===== */
@media (max-width: 991px) {

    /* Раскрытое меню — фон прозрачный */
    .navbar-collapse.collapse.show {
        background-color: transparent !important;
    }

    /* Пункты меню — белый текст, белая нижняя граница */
    .navbar-nav .nav-link {
        color: var(--mainWhite) !important;
        border-bottom: 1px solid var(--mainWhite);
        padding: var(--inBlockGap) var(--inBlockGap);
        transition: color 0.2s;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.active {
        color: var(--mainRed) !important;
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

    /* Кнопки «Вход» и «Регистрация» внутри раскрытого меню */
    .navbar-collapse .buttons-header {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: var(--inBlockGap) var(--inBlockGap);
        margin-top: var(--inBlockGap);
        gap: var(--inBlockGap);
    }

    .navbar-collapse .buttons-header .btn-login,
    .navbar-collapse .buttons-header .btn-register {
        width: 100%;
        margin: 0;
    }

    /* Адаптивное уменьшение логотипа, чтобы не «толкал» бургер-иконку вниз */
    @media (max-width: 576px) {
        .navbar-brand img {
            max-width: 120px;
            height: auto;
        }
    }
}

/* ===========================================================
   Стили для футера (footer.php)
   =========================================================== */

/* Основная обёртка футера */
.site-footer {
    background-color: var(--b-groundColor);
    color: var(--textColor);
    font-family: var(--font);
}

/* 1) Логотип в футере (центр, адаптив) */
.footer-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
}

/* 2) Заголовки колонок футера (h3) – выравнивание по центру */
.footer-col-title {
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
    color: var(--mainWhite);
    margin-bottom: var(--inBlockGap);
    text-align: center;
    /* Центрируем заголовок внутри колонки */
}

/* 3) Стили списков в колонках */
/*    + выравниваем содержимое колонок по центру */
.site-footer .footer-links-row .col-md-4 {
    text-align: center;
}

.site-footer .footer-links-row ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    /* чтобы ul «сжимался» под ширину содержимого */
}

.site-footer .footer-links-row li {
    margin-bottom: calc(var(--inBlockGap) / 2);
}

.site-footer .footer-links-row li a {
    font-size: var(--textFontSize);
    color: var(--textColor);
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer .footer-links-row li a:hover,
.site-footer .footer-links-row li a:focus {
    color: var(--mainRed);
}

/* 4) Центрирование блока с тремя колонками на десктопе */
@media (min-width: 992px) {
    .footer-links-row {
        max-width: 900px;
        /* Ширина блока «три колонки» */
        margin: 0 auto;
        /* Отцентровываем блок внутри .container */
    }
}

/* 5) Стили заголовка «Подписывайтесь на нашу рассылку» */
.footer-heading {
    font-size: var(--h2FontSize);
    font-weight: var(--h2FontWeight);
    color: var(--mainWhite);
    text-align: center;
    margin-bottom: var(--inBlockGap);
}

/* 6) Стили формы подписки */
.newsletter-form {
    display: flex;
    gap: 0;
}

.newsletter-form .input-group {
    flex: 1 1 auto;
}

.newsletter-form .form-control {
    border-radius: var(--buttonBorderRadius) 0 0 var(--buttonBorderRadius);
    border: 1px solid var(--mainRed);
    border-right: none;
    font-family: var(--font);
    font-size: var(--textFontSize);
}

.newsletter-form .input-group-text {
    border: 1px solid var(--mainRed);
    border-right: none;
    background-color: var(--mainWhite);
    color: var(--mainRed);
    border-radius: var(--buttonBorderRadius) 0 0 var(--buttonBorderRadius);
}

.newsletter-form .btn-subscribe {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    color: var(--mainWhite);
    background-color: var(--mainRed);
    border: 1px solid var(--mainRed);
    border-radius: 0 var(--buttonBorderRadius) var(--buttonBorderRadius) 0;
    padding: var(--inBlockGap) var(--menuGap);
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.newsletter-form .btn-subscribe:hover,
.newsletter-form .btn-subscribe:focus {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
    text-decoration: none;
}

/* Адаптация формы подписки на мобильных (≤ 767px) */
@media (max-width: 767px) {
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form .input-group,
    .newsletter-form .btn-subscribe {
        width: 100%;
        border-radius: var(--buttonBorderRadius);
    }

    .newsletter-form .form-control,
    .newsletter-form .input-group-text {
        border-radius: var(--buttonBorderRadius) var(--buttonBorderRadius) 0 0;
        border-right: 1px solid var(--mainRed);
    }

    .newsletter-form .btn-subscribe {
        border-radius: 0 0 var(--buttonBorderRadius) var(--buttonBorderRadius);
        margin-top: var(--inBlockGap);
    }
}

/* 7) Нижняя строка (footer-bottom-row) */

/* Разделительная линия сверху */
.footer-bottom-row {
    border-top: 1px solid var(--textB-groundColor);
    margin-top: var(--inBlockGap);
}

/* 7.1) Языковой селект */
.language-select-wrapper {
    max-width: 200px;
    margin: 0 auto;
}

.language-select {
    font-family: var(--font);
    font-size: var(--textFontSize);
    color: var(--mainRed);
    /* выбранный язык – красный */
    background-color: var(--mainWhite);
    border: 1px solid var(--mainRed);
    border-radius: var(--buttonBorderRadius);
    padding: 0.25rem 0.5rem;
    appearance: none;
    /* убираем родную стрелку */
    width: 100%;
}

.language-select option {
    color: #000000;
    /* неактивные языки – чёрным */
    background-color: var(--mainWhite);
}

.language-select option:hover,
.language-select option:focus {
    color: var(--mainRed);
    /* при наведении – красный */
}

.language-select:focus {
    outline: none !important;
    /* убираем синюю обводку */
    box-shadow: none !important;
}

/* 7.2) Копирайт */
.site-footer .copyright {
    font-size: var(--textFontSize);
    color: var(--copyrightColor);
}

/* 7.3) Социальные иконки */
.footer-bottom-row a {
    color: var(--textColor);
    font-size: 1.5rem;
    transition: color 0.2s;
}

.footer-bottom-row a:hover,
.footer-bottom-row a:focus {
    color: var(--mainRed);
}

.footer-bottom-row a+a {
    margin-left: var(--inBlockGap);
}

/* 8) Мобильная адаптация футера (≤ 991px) */
@media (max-width: 991px) {

    /* Центрируем три колонки под собой */
    .footer-links-row {
        text-align: center;
    }

    .footer-links-row .col-md-4 {
        margin-bottom: var(--inBlockGap);
    }

    /* Нижняя строка – элементы друг под другом */
    .footer-bottom-row {
        text-align: center;
    }

    .footer-bottom-row .language-select-wrapper {
        margin-bottom: var(--inBlockGap);
    }

    .footer-bottom-row .copyright {
        margin-bottom: var(--inBlockGap);
    }

    .footer-bottom-row a {
        margin: 0 var(--inBlockGap) var(--inBlockGap) var(--inBlockGap);
    }
}

/* ===========================================================
   Конец стилей для футера
   =========================================================== */

/* ==========================================================================
   FULL STYLES FOR MAIN.PHP SECTIONS
   Добавьте этот блок в конец вашего assets/css/custom.css
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Глобальные стили для заголовков разделов и описаний
   -----------------------------------------------------------------------------
   Используются в каждом блоке (h2.section-title, h3.section-desc)
*/
.section-title {
    font-family: var(--font);
    font-size: var(--h2FontSize);
    font-weight: var(--h2FontWeight);
    color: var(--mainWhite);
    text-align: center;
    margin-bottom: var(--inBlockGap);
}

.section-desc {
    font-family: var(--font);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
    color: var(--textColor);
    text-align: center;
    margin-bottom: var(--cardGap);
    line-height: 1.5;
}

/* ================================================
   2) Секция «Ближайшие события» (Upcoming Events)
   ================================================
*/

.upcoming-events-section .upcoming-card {
    background-color: var(--b-groundColor);
    border: 1px solid var(--mainRed);
    border-radius: var(--cardBorderRadius);
    color: var(--textColor);
    transition: transform 0.2s, box-shadow 0.2s;
}

.upcoming-events-section .upcoming-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.upcoming-events-section .upcoming-card .card-title {
    font-family: var(--font);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
    color: var(--mainWhite);
}

.upcoming-events-section {
    background-color: transparent;
    padding: var(--blockSeparatorGap) 0;
}

/* Секция: заголовок и описание */
.upcoming-events-section .section-title {
    color: var(--mainWhite);
    margin-bottom: var(--inBlockGap);
}

.card-title {
    min-height: calc(var(--h3FontSize) * 2);
    line-height: var(--h3FontSize);
    color: var(--mainWhite);
}

.date-string {
    min-width: 40%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

/* Карточка: flex-контейнер по высоте */
.upcoming-card {
    display: flex;
    padding: 1rem;
    flex-direction: column;
    height: 100%;
    background-color: var(--b-groundColor);
    border: 1px solid var(--mainRed);
    border-radius: var(--cardBorderRadius);
    overflow: hidden;
    gap: var(--inBlockGap);
}


.upcoming-card-body {
    gap: var(--inBlockGap);
    padding: 0;
}

/* Кнопка «Узнать больше» */
.upcoming-events-section .upcoming-card .btn-outline-primary {
    margin-top: auto;
    background-color: var(--mainRed);
    color: var(--mainWhite);
    border: 1px solid var(--mainWhite);
    border-radius: var(--buttonBorderRadius);
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    text-align: center;
    padding: var(--inBlockGap) 0;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    width: 100%;
}

.upcoming-events-section .upcoming-card .btn-outline-primary:hover,
.upcoming-events-section .upcoming-card .btn-outline-primary:focus {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
    text-decoration: none;
}

/* Мобильная адаптация — одна колонка */
@media (max-width: 767px) {
    .upcoming-events-section .row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ======================================================
   3) Секция «ТОП видео наших конференций» (Conference Videos)
   ====================================================== */
/* Секция уже имеет класс bg-light (Bootstrap), 
   но мы настроим адаптивные отступы и цвета текста */
.conference-videos-section {
    background-color: transparent;
    padding: var(--blockSeparatorGap) 0;
}

.conference-videos-section .section-title,
.conference-videos-section .section-desc {
    color: var(--mainWhite);
}

/* Карточка конференц-видео */
.conference-video-card {
    background-color: transparent;
    border: var(--cardBorder);
    border-radius: var(--cardBorderRadius);
    padding: var(--inBlockGap);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cardGap);
    transition: transform 0.3s ease;
}

/* Контейнер для превью видео */
.conference-video-card .position-relative {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--cardBorderRadius);
    overflow: hidden;
    margin: var(--inBlockGap) 0;
}

/* Само изображение превью */
.conference-video-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Иконка play поверх превью */
.conference-video-card .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--mainWhite);
    font-size: 3rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.conference-video-card .play-overlay:hover {
    opacity: 1;
    color: var(--mainRed);
}

.conference-video-card:hover {
    transform: translateY(-5px);
}

/* Тексты в карточке */
.conference-video-card .text-muted,
.conference-video-card p {
    color: var(--textColor) !important;
    margin-bottom: var(--inBlockGap);
}

/* Кнопка "Смотреть" */
.conference-video-card .btn-outline-primary {
    background-color: var(--mainRed);
    color: var(--mainWhite);
    border: 1px solid var(--mainWhite);
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) 0;
    font-family: var(--font);
    font-size: var(--textFontSize);
    width: 100%;
    margin-top: auto;
    transition: all 0.3s ease;
}

.conference-video-card .btn-outline-primary:hover {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
}

/* Кнопка YouTube в конце секции */
.btn-youtube {
    background-color: var(--mainRed);
    border: none;
    color: var(--mainWhite);
    padding: calc(var(--inBlockGap) / 2) var(--inBlockGap);
    font-family: var(--font);
    font-size: var(--textFontSize);
    border-radius: var(--buttonBorderRadius);
    transition: all 0.3s ease;
}

.btn-youtube:hover {
    background-color: #ff0000;
    transform: translateY(-2px);
}

.btn-youtube .bi-youtube {
    font-size: 1.2em;
    vertical-align: -0.2em;
}

/* ======================================================
   4) Секция «ТОП видео боёв» (Fight Videos)
   ====================================================== */
.fight-videos-section {
    background-color: transparent;
    padding: var(--blockSeparatorGap) 0;
}

.fight-videos-section .section-title,
.fight-videos-section .section-desc {
    color: var(--mainWhite);
}

/* Карточка видео боя */
.fight-video-card {
    background-color: transparent;
    border: var(--cardBorder);
    border-radius: var(--cardBorderRadius);
    padding: var(--inBlockGap);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cardGap);
    transition: transform 0.3s ease;
}

.fight-video-card:hover {
    transform: translateY(-5px);
}

/* Контейнер для превью */
.fight-video-card .position-relative {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--cardBorderRadius);
    overflow: hidden;
    margin: var(--inBlockGap) 0;
}

/* Само изображение превью */
.fight-video-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Иконка play поверх превью */
.fight-video-card .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--mainWhite);
    font-size: 3rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.fight-video-card .play-overlay:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    color: var(--mainRed);
}

/* Тексты в карточке */
.fight-video-card .card-title {
    font-family: var(--font);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
    color: var(--mainWhite);
    min-height: calc(var(--h3FontSize) * 2);
    line-height: var(--h3FontSize);
}

.fight-video-card .text-muted,
.fight-video-card p {
    color: var(--textColor) !important;
    margin-bottom: var(--inBlockGap);
}

/* Кнопка "Смотреть" */
.fight-video-card .btn-outline-primary {
    background-color: var(--mainRed);
    color: var(--mainWhite);
    border: 1px solid var(--mainWhite);
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) 0;
    font-family: var(--font);
    font-size: var(--textFontSize);
    width: 100%;
    margin-top: auto;
    transition: all 0.3s ease;
}

.fight-video-card .btn-outline-primary:hover {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
}

/* Адаптивность */
@media (max-width: 1199px) {
    .fight-videos-section .row>[class*="col-"] {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

@media (max-width: 767px) {
    .fight-videos-section .row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ======================================================
   5) Секция «ТОП нашего рейтинга» (Top Fighters)
   ====================================================== */



.top-fighters-section .section-desc {
    color: var(--textColor);
}

/* ТОП нашего рейтинга (Top Fighters) */
.top-fighters-section .fighter-card {
    background-color: transparent;
    border: var(--cardBorder);
    border-radius: var(--cardBorderRadius);
    padding: var(--inBlockGap);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cardGap);
    transition: transform 0.3s ease;
}

.top-fighters-section .fighter-card:hover {
    transform: translateY(-5px);
}

/* Контейнер для изображения */
.top-fighters-section .fighter-card .img-fluid {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cardBorderRadius);
}

/* Контейнер для кнопки */
.top-fighters-section .fighter-card .button-wrapper {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/* Кнопка "Подробнее" */
.top-fighters-section .fighter-card .btn-outline-primary {
    background-color: var(--mainRed);
    color: var(--mainWhite);
    border: 1px solid var(--mainWhite);
    border-radius: var(--buttonBorderRadius);
    padding: 6px calc(var(--menuGap) * 1.5);
    font-family: var(--font);
    font-size: calc(var(--textFontSize) * 0.9);
    display: inline-block;
    width: auto;
    min-width: 120px;
    transition: all 0.3s ease;
}

.top-fighters-section .fighter-card .btn-outline-primary:hover {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
}

.top-fighters-section .stats-block {
    gap: var(--inBlockGap);
}

.top-fighters-section .stat-item {
    font-family: var(--font);
}

.top-fighters-section .stat-item .stat-value {
    color: var(--mainWhite);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
}

.top-fighters-section .stat-item small {
    font-size: var(--textFontSize);
    color: var(--copyrightColor);
}

.top-fighters-section .stars {
    font-size: 1rem;
    color: var(--mainRed);
}

.top-fighters-section .efficiency span {
    font-size: var(--textFontSize);
}

/* Описание бойца с «>>» */
.top-fighters-section .fighter-card p {
    font-size: var(--textFontSize);
    color: var(--textColor);
    margin-bottom: var(--inBlockGap);
}

.top-fighters-section .fighter-card p a {
    color: var(--mainRed);
    text-decoration: none;
}

.top-fighters-section .fighter-card p a:hover {
    text-decoration: underline;
}

/* Кнопка «Все бойцы» */
.top-fighters-section .btn-primary {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    background-color: var(--mainRed);
    border-color: var(--mainRed);
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) var(--menuGap);
    transition: background-color 0.2s, color 0.2s;
}

.top-fighters-section .btn-primary:hover,
.top-fighters-section .btn-primary:focus {
    background-color: var(--mainWhite);
    color: var(--mainRed);
    border-color: var(--mainRed);
}

/* ======================================================
   6) Секция «Наши новости» (News)
   ====================================================== */
.news-section {
    background-color: var(--b-groundColor);
    color: var(--mainWhite);
}

.news-section .section-title {
    color: var(--mainWhite);
}

.news-section .section-desc {
    color: var(--textColor);
}

.news-section .news-card {
    background-color: var(--b-groundColor);
    border: 1px solid var(--mainRed);
    border-radius: var(--cardBorderRadius);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.news-section .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.news-section .news-card img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--mainRed);
}

.news-section .news-card .card-body {
    padding: var(--inBlockGap);
}

.news-section .news-description {
    font-family: var(--font);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
    color: var(--textColor);
    margin-bottom: var(--inBlockGap);
}

.news-section .news-card .text-muted {
    font-size: var(--textFontSize);
    color: var(--copyrightColor);
}

.news-section .news-read-more {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    color: var(--mainRed);
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.news-section .news-read-more:hover,
.news-section .news-read-more:focus {
    text-decoration: underline;
}

/* Кнопка «Больше новостей» */
.news-section .btn-primary {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    background-color: var(--mainRed);
    border-color: var(--mainRed);
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) var(--menuGap);
    transition: background-color 0.2s, color 0.2s;
}

.news-section .btn-primary:hover,
.news-section .btn-primary:focus {
    background-color: var(--mainWhite);
    color: var(--mainRed);
    border-color: var(--mainRed);
}

/* -----------------------------------------------------------------------------
   Адаптивная настройка отступов и размеров для всех секций
   -----------------------------------------------------------------------------
   Тонкая подгонка: уменьшаем padding и font-size на планшетах и телефонах
*/
@media (max-width: 991px) {

    /* Ближайшие события */
    .upcoming-events-section {
        padding-top: var(--blockSeparatorGap);
        padding-bottom: var(--blockSeparatorGap);
    }

    .upcoming-events-section .upcoming-card img {
        height: auto;
        object-fit: cover;
    }

    /* Видео конференций */
    .conference-videos-section {
        padding-top: var(--blockSeparatorGap);
        padding-bottom: var(--blockSeparatorGap);
    }

    .conference-videos-section .play-overlay {
        font-size: 2.5rem;
    }

    /* Видео боёв */
    .fight-videos-section {
        padding-top: var(--blockSeparatorGap);
        padding-bottom: var(--blockSeparatorGap);
    }

    .fight-videos-section .play-overlay {
        font-size: 2.5rem;
    }

    /* Шапки и описания */
    .section-title {
        font-size: calc(var(--h2FontSize) * 0.8);
    }

    .section-desc {
        font-size: calc(var(--h3FontSize) * 0.9);
    }
}

@media (max-width: 575px) {

    /* Уменьшаем ещё сильнее на телефонах */
    .section-title {
        font-size: calc(var(--h2FontSize) * 0.7);
    }

    .section-desc {
        font-size: calc(var(--h3FontSize) * 0.8);
    }

    .conference-videos-section .play-overlay,
    .fight-videos-section .play-overlay {
        font-size: 2rem;
    }

    .top-fighters-section .stat-value {
        font-size: var(--h3FontSize);
    }
}

/* ===========================================================
   Hero Logo: фиксированный размер, как в футере
   =========================================================== */
.hero-logo-wrap {
    max-width: 200px;
    /* точно как .footer-logo */
    width: auto;
    /* не растягиваться на 100% */
    height: auto;
    margin: 1rem auto;
    /* центрирование + отступы сверху/снизу */
    display: block;
}

/* Саму картинку тоже ограничиваем */
.hero-logo {
    max-width: 200px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Адаптивно уменьшаем на узких экранах */
@media (max-width: 575px) {

    .hero-logo-wrap,
    .hero-logo {
        max-width: 150px;
    }
}

/* ===========================================================
   Hero Section — чистый, самодостаточный блок
   =========================================================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* на всю высоту экрана */
    background: url('../images/hero-bg.png') center/cover no-repeat;
    overflow: hidden;
}

/* Тёмный полупрозрачный оверлей поверх фона, под шапкой и контентом */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* Навбар из header.php поверх фона */
.hero-section header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent !important;
    z-index: 2;
}

/* Контент (H1, лого, кнопка) поверх всего */
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1rem;
    text-align: center;
    color: var(--mainWhite);
}

/* Заголовок H1 */
.hero-title {
    font-family: var(--font);
    font-size: var(--h1FontSize);
    font-weight: var(--h1FontWeight);
    margin: 0 0 var(--inBlockGap) 0;
}

/* Логотип под заголовком */
.hero-logo-wrap {
    max-width: 200px;
    /* тот же размер, что и в футере */
    width: auto;
    margin: 0 var(--inBlockGap);
    display: block;
}

.hero-logo-wrap img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Кнопка «Регистрация» */
.btn-hero-register {
    font-family: var(--font);
    font-size: var(--textFontSize);
    font-weight: var(--paginationFontWeight);
    background-color: var(--mainRed);
    color: var(--mainWhite);
    border: 1px solid var(--mainRed);
    border-radius: var(--buttonBorderRadius);
    padding: var(--inBlockGap) var(--menuGap);
    text-transform: uppercase;
    margin-top: var(--inBlockGap);
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}

.btn-hero-register:hover,
.btn-hero-register:focus {
    background: transparent;
    color: var(--mainRed);
}

/* Адаптация логотипа на узких экранах */
@media (max-width: 575px) {
    .hero-logo-wrap {
        max-width: 150px;
    }
}

/* Адаптация размера заголовка и отступов */
@media (max-width: 991px) {
    .hero-title {
        font-size: calc(var(--h1FontSize) * 0.75);
    }

    .btn-hero-register {
        padding: calc(var(--inBlockGap)*0.75) var(--menuGap);
    }
}

/* Header with background */
.header-section {
    position: relative;
    background: url('../images/header-bg.png') center/cover no-repeat;
    padding: 30px 0;
}

.header-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.header-section nav {
    position: relative;
    z-index: 2;
}


/* ===========================================================
   Стили для карточки бойца (fighter-card.php)
   =========================================================== */

/* Fighter Card */
.fighter-card {
    display: flex;
    gap: var(--inBlockGap);
    background-color: transparent;
    border: var(--cardBorder);
    border-radius: var(--cardBorderRadius);
    padding: calc(var(--inBlockGap) / 5);
    height: 100%;
}

/* Photo Section */
.fighter-photo-section {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--inBlockGap) / 5);
}

.fighter-photo-section img {
    width: 100%;
    height: auto;
    border-radius: var(--cardBorderRadius);
}

.fighter-photo-section .btn-outline-primary {
    background-color: var(--mainRed);
    color: var(--mainWhite);
    border: 1px solid var(--mainWhite);
    border-radius: var(--buttonBorderRadius);
    padding: 4px var(--menuGap);
    font-size: calc(var(--textFontSize) * 0.9);
    text-align: center;
}

.fighter-photo-section .btn-outline-primary:hover {
    background-color: transparent;
    color: var(--mainRed);
    border-color: var(--mainRed);
}

/* Info Section */
.fighter-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--inBlockGap) / 5);
}

.fighter-name {
    color: var(--mainWhite);
    margin: 0;
    font-size: var(--h3FontSize);
}

.fighter-status {
    color: var(--textColor);
    margin: 0;
    font-size: var(--textFontSize);
}

/* Fighter Stats Layout */
.fighter-stats {
    display: flex;
    flex-direction: column;
    gap: calc(var(--inBlockGap) / 2);
}

.fighter-stats .rating-row,
.fighter-stats .fights-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.fighter-stats .rating-label,
.fighter-stats .fights-label {
    color: var(--textColor);
    font-size: calc(var(--textFontSize) * 0.9);
}

.fighter-stats .rating-value {
    color: var(--mainWhite);
    font-size: calc(var(--textFontSize) * 1.1);
}

.fighter-stats .stars {
    text-align: left;
    color: var(--mainRed);
}

.fighter-stats .fighter-record {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    font-size: calc(var(--textFontSize) * 0.9);
}

.fighter-stats .fighter-record span {
    white-space: nowrap;
}

/* Stats Grid */
.fighter-stats {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--inBlockGap) / 5);
}

.stat-item {
    text-align: center;
}

.stat-value {
    color: var(--mainWhite);
    font-size: var(--h3FontSize);
    font-weight: var(--h3FontWeight);
}

.stars {
    color: var(--mainRed);
    font-size: calc(var(--textFontSize) * 0.8);
}

.stat-item small {
    color: var(--textColor);
    font-size: calc(var(--textFontSize) * 0.9);
}

/* Record */
.fighter-record {
    display: flex;
    gap: calc(var(--inBlockGap) / 3);
    font-size: var(--textFontSize);
}

.fighter-record .win {
    color: var(--bs-success);
}

.fighter-record .draw {
    color: var(--bs-warning);
}

.fighter-record .loss {
    color: var(--bs-danger);
}

/* Description */
.fighter-desc {
    color: var(--textColor);
    margin: 0;
    font-size: var(--textFontSize);
}

.fighter-desc a {
    color: var(--mainRed);
    text-decoration: none;
}

/* Ratings Page Styles */
.page-header {
    background-color: transparent;
}

.page-logo-wrap {
    max-width: 200px;
    margin: 0 auto;
}

.page-logo {
    width: 100%;
    height: auto;
}

.section-subtitle.text-red {
    color: var(--mainRed);
}

/* Pagination styles */
.pagination {
    gap: 8px;
}

/* Base styles for all page links */
.pagination .page-link {
    background-color: transparent !important;
    border: none !important;
    color: var(--mainWhite) !important;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Active state for current page */
.pagination .page-item.active .page-link {
    color: var(--mainRed) !important;
    border: 2px solid var(--mainRed) !important;
    border-radius: 50% !important;
}

/* Hover state for non-active pages */
.pagination .page-item:not(.active) .page-link:hover {
    color: var(--mainRed) !important;
}

/* Navigation arrows - always without border */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border: none !important;
}

/* Loading state styles */
.full-rating .row {
    transition: opacity 0.3s ease;
}

/* Fighter Card Name Fix */
.fighter-card .fighter-name {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Fighter Stats Layout Fix */
.fighter-stats .fights-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.fighter-stats .fighter-record {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    font-size: calc(var(--textFontSize) * 0.9);
}

.fighter-stats .fighter-record span {
    white-space: nowrap;
}

/* Search Styles */
.search-wrapper {
    position: relative;
}

.search-wrapper .form-control {
    background-color: var(--b-groundColor);
    border: 1px solid var(--textColor);
    color: var(--mainWhite);
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: var(--buttonBorderRadius);
}

.search-wrapper .form-control:focus {
    border-color: var(--mainRed);
    box-shadow: none;
}

.search-wrapper .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--textColor);
}

.search-wrapper .form-control::placeholder {
    color: var(--textColor);
}

/* Header Banner Styles */
.header-section {
    background-color: var(--b-groundColor);
    padding: 20px 0;
    /* Reduced from 30px */
}

/* Page Title Section */
.page-title {
    background-color: var(--b-groundColor);
    padding: 20px 0;
}

.page-title h2 {
    color: var(--mainWhite);
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

.hero-logo-container {
    background-color: var(--b-groundColor);
    padding-bottom: 20px;
}

.hero-logo-wrap {
    display: inline-block;
}

.hero-logo {
    height: 90px;
    width: auto;
}

.top-fighters {
    padding-top: 20px;
}

@media (min-width: 768px) {
    .header-section {
        padding: 40px 0;
    }
}

@media (min-width: 1200px) {
    .header-section {
        padding: 50px 0;
    }
}

.header-section {
    background-color: var(--b-groundColor);
    min-height: 60px;
    padding: 15px 0;
}

.page-title {
    background-color: var(--b-groundColor);
    padding: 15px 0;
}

.page-title h2 {
    color: var(--mainWhite);
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

.hero-logo-container {
    background-color: var(--b-groundColor);
    padding-bottom: 15px;
}

.hero-logo-wrap {
    display: inline-block;
}

.hero-logo {
    height: 90px;
    width: auto;
}

.top-fighters {
    padding-top: 15px;
}

/* Tablet and iPad Pro */
@media (min-width: 768px) {
    .header-section {
        min-height: 100px;
        padding: 30px 0;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .header-section {
        min-height: 120px;
        padding: 40px 0;
    }
}

/* ===========================================================
   Стили для заголовка рейтингов (ratings.php)
   =========================================================== */

.ratings-header {
    background-color: var(--b-groundColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ratings-header h2 {
    color: var(--mainWhite);
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

.hero-logo-wrap {
    display: inline-block;
}

.hero-logo {
    height: 90px;
    width: auto;
}

@media (min-width: 768px) {
    .ratings-header {
        padding: 40px 0;
    }
}

@media (min-width: 1200px) {
    .ratings-header {
        padding: 50px 0;
    }
}

.news-card {
    padding: 8px;
    border: 1px solid var(--bs-danger);
    border-radius: 0.5rem;
    gap: 15px;
}

.news-card .news-title {
    font-size: 1.1rem;
    line-height: 1.4;
}

.news-card img,
.news-card video {
    border-radius: 0.375rem;
}

.news-card-footer {
    margin-top: auto;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    z-index: 5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.play-overlay:hover {
    color: red;
}

/* Сброс стилей кнопки "Смотреть", чтобы не было конфликтов */
.card-body .play-overlay {
    position: static;
    transform: none;
    font-size: 1rem;
    z-index: auto;
}

.no-focus-outline:focus,
.no-focus-outline:focus-visible,
.no-focus-outline:active {
    outline: none !important;
    box-shadow: none !important;
}