/* /css/custom-theme.css - Ваши пользовательские ярко-красные стили */

/* --- Определение CSS-переменных для цветовой палитры --- */
:root {
    --main-red-color: #FF0000;       /* Ярко-красный */
    --dark-red-color: #CC0000;       /* Чуть темнее красный для ховера/актива */
    --light-grey-color: #CCCCCC;     /* Светло-серый для неактивных элементов */
    --dark-grey-color: #666666;      /* Темно-серый для текста неактивных элементов */
    --text-white-color: #FFFFFF;     /* Белый цвет текста */
    --text-dark-color: #333;         /* Темный цвет текста для основного контента */
    --shadow-color-red: rgba(255, 0, 0, .4); /* Красная тень */
    --shadow-color-grey: rgba(0, 0, 0, 0.1); /* Легкая серая тень для блоков */
    --background-cta-inscription: rgba(255, 0, 0, 0.85); /* Полупрозрачный красный для надписи */
    --text-shadow-color-1: #CC0000; /* Цвет для основной тени текста */
    --text-shadow-color-2: #990000; /* Цвет для глубины тени текста */
}

/* --- Подключение кастомного шрифта "Teletoon Cyrillic" --- */
/* Убедитесь, что файлы шрифта TeletoonCyrillic.woff2 и TeletoonCyrillic.woff
   находятся в папке /fonts/ на вашем сервере */
@font-face {
    font-family: 'Teletoon Cyrillic';
    src: url('/fonts/TeletoonCyrillic.woff2') format('woff2'),
         url('/fonts/TeletoonCyrillic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Для лучшей производительности загрузки шрифтов */
}

/* --- Общие стили для всего сайта --- */
/* Все ссылки по умолчанию красные */
a {
    color: var(--main-red-color) !important;
}
a:hover,
a:focus {
    color: var(--dark-red-color) !important;
}

/* --- Переопределение цветов для шапки и футера чата --- */
/* Контейнер логотипа */
.logo-container {
    background-color: var(--main-red-color) !important; /* Фон для контейнера логотипа */
    padding: 10px 0; /* Добавляем небольшой отступ */
    text-align: center; /* Центрируем логотип */
    position: relative; /* Для правильного отображения */
    overflow: hidden; /* Может быть полезно для предотвращения выхода содержимого */
    display: flex; /* Для центрирования содержимого */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    min-height: 70px; /* Минимальная высота, чтобы логотип был виден */
}
/* Стили для самого изображения логотипа внутри контейнера */
.logo-container img {
    max-width: 150px; 
    height: auto; 
    display: block; /* Чтобы изображение вело себя как блок и центрировалось */
    position: relative; /* Чтобы изображение было над фоном контейнера */
    z-index: 2; /* Убедимся, что логотип всегда выше */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* Легкое белое свечение для выделения */
}

/* УДАЛЕНО: Анимированный фоновый узор для логотипа (.logo-container::before) */
/* УДАЛЕНО: Анимация для прокрутки фонового узора (@keyframes scrollLogoPattern) */


/* Шапка чата */
#iheader {
    background-color: var(--main-red-color) !important;
    color: var(--text-white-color) !important;
}
#iheader h3, #iheader h3 span {
    color: var(--text-white-color) !important;
}
/* Иконки в шапке (background-image) - пытаемся сделать белыми с помощью фильтра */
#iheader .imenu,
#iheader .icon {
    /* Если иконки цветные, этот фильтр сделает их белыми на красном фоне.
       Если они уже черно-белые, это тоже сработает. */
    filter: brightness(0) invert(1) !important;
}

/* Футер чата */
.ifixed_footer {
    background-color: var(--main-red-color) !important;
    border-top-color: var(--dark-red-color) !important;
    border-bottom-color: var(--dark-red-color) !important;
    box-shadow: 0 0 10px var(--shadow-color-red) !important; /* Красная тень */
}
.ifixed_footer .ifooter_input {
    border-color: var(--dark-red-color) !important;
    color: var(--text-dark-color) !important; /* Цвет текста в поле ввода */
}
.ifixed_footer .ifooter_input::placeholder {
    color: #eee !important; /* Цвет плейсхолдера */
}
/* Иконки в футере */
.ifixed_footer .iclip,
.ifixed_footer .ibtn_send {
    filter: brightness(0) invert(1) !important; /* Попытка сделать иконки белыми */
}
/* Стили для сообщения "Сообщение отправляется..." */
.ifixed_footer::after {
    background-color: rgba(255, 0, 0, .7) !important; /* Красный фон */
    color: var(--text-white-color) !important;
}

/* --- Переопределение цветов для элементов комментариев --- */
.icomment_name {
    color: var(--main-red-color) !important;
}
.iname { /* Это старый класс из new-style.css */
    color: var(--main-red-color) !important;
}
.ishow_next {
    color: var(--main-red-color) !important;
}

/* --- Переопределение цветов для модальных окон и опроса --- */

/* Модальное окно "Вероника" */
.modal__content {
    border: 2px solid var(--main-red-color) !important; /* Рамка модального окна Вероники */
}
.send-button {
    background-color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
    color: var(--text-white-color) !important;
}
.pulse-button {
    box-shadow: 0 0 0 0 var(--shadow-color-red) !important; /* Красная тень для пульсации */
}
.pulse-button:hover {
    background-color: var(--dark-red-color) !important;
}

/* Модальные окна опроса (quiz-modal) - заголовки и кнопки */
.quiz-modal .modal-header {
    background-color: var(--main-red-color) !important;
}
.quiz-modal .modal-header h4.modal-title,
.modal-title { /* Также захватываем просто .modal-title, если это общий класс для заголовков модалок */
    color: var(--text-white-color) !important;
}

/* Кнопки "ДАЛЕЕ", "Да", "Нет" в опросе */
.btn-yes,
.btn-no {
    background-color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
    color: var(--text-white-color) !important;
}
.btn-yes:hover,
.btn-yes:active,
.btn-no:hover,
.btn-no:active {
    background-color: var(--dark-red-color) !important;
    border-color: var(--dark-red-color) !important;
    color: var(--text-white-color) !important;
}

/* Ссылка "Перейти в Телеграмм чат" */
.reg-link {
    background-color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
    color: var(--text-white-color) !important;
}
.reg-link:hover {
    background-color: var(--dark-red-color) !important;
}

/* Прогресс-индикаторы в опросе */
.btns li.active {
    background-color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
    color: var(--text-white-color) !important;
}
.btns li:not(.active) {
    background-color: var(--light-grey-color) !important; /* Серый фон для неактивных */
    border-color: var(--light-grey-color) !important;
    color: var(--dark-grey-color) !important; /* Темно-серый текст для неактивных */
}

/* Старые кнопки ibutton/a.button-disabled из new-style.css, а также btn-join/btn-next из style.css */
.ibutton,
a.ibutton,
a.button-disabled,
.btn-join,
.btn-next {
    background: var(--main-red-color) !important; /* Переопределяем градиенты на сплошной красный */
    border-color: var(--dark-red-color) !important;
    color: var(--text-white-color) !important;
}
.ibutton:hover,
a.ibutton:hover,
a.button-disabled:hover,
.btn-join:hover,
.btn-next:hover {
    background: var(--dark-red-color) !important;
    border-color: var(--dark-red-color) !important;
}

/* Для .modal-body, который имел `border: 2px solid grey;` в new-modal.css */
.modal__body {
    border: 2px solid var(--main-red-color) !important;
}

/* Переопределение цвета ссылок с классов .handle, .geo из style.css */
.handle, .geo {
    color: var(--main-red-color) !important;
}

/* Цвет текста .discount в background_page_style.c8c4cef0522a.css */
.discount {
    color: var(--main-red-color) !important;
}

/* Переопределение стилей для body.styleX классов, если они случайно применяются */
body.style2 .quiz-modal .modal-header,
body.style3 .btns li.active,
body.style-facebook .btn-yes,
body.style-facebook .modal-title,
body.style-facebook .btns li.active {
    background-color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
    color: var(--text-white-color) !important;
}
body.style-facebook .btns li {
    color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
    background: transparent !important;
}
body.style-facebook .btn-no { /* Было color: #4267b2; border: 2px solid #4267b2; */
    color: var(--main-red-color) !important;
    border-color: var(--main-red-color) !important;
}
body.style-facebook .btn-no:hover,
body.style-facebook .btn-no:active {
    color: var(--text-white-color) !important;
    background-color: var(--dark-red-color) !important;
}

/* Цвет ссылки в unsubscribe из utils.js */
.unsubscribe a,
.unsubscribe a:hover {
    color: var(--main-red-color) !important;
}
.unsubscribe a:hover {
    color: var(--text-white-color) !important;
    background-color: var(--dark-red-color) !important;
}

/* --- Стили для заголовков и счетчика внизу страницы --- */
/* Заголовки Люди. Знакомства онлайн. Кликай на фото и знакомься! */
.main-page-footer-text h1,
.main-page-footer-text h2,
.main-page-footer-text h3 {
    text-align: center;
    color: var(--main-red-color) !important;
    font-family: 'Teletoon Cyrillic', Arial, sans-serif; /* Используем Teletoon Cyrillic для этих заголовков */
    margin: 10px 0;
}

.main-page-footer-text h1 {
    font-size: 4em !important;
}
.main-page-footer-text h2 {
    font-size: 2.5em !important;
}
.main-page-footer-text h3 {
    font-size: 1.5em !important;
}

/* Контейнер для LiveInternet счетчика */
.liveinternet-counter {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

/* --- Стили для нового SEO-блока на главной странице (user_main_page.php) --- */
.seo-text-block {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: var(--text-white-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color-grey);
    line-height: 1.6;
    color: var(--text-dark-color);
}

.seo-text-block h2 {
    color: var(--main-red-color);
    font-size: 1.8em;
    margin-bottom: 15px;
    text-align: center;
}

.seo-text-block p {
    margin-bottom: 15px;
    text-align: justify;
}

.seo-text-block ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.seo-text-block li {
    margin-bottom: 5px;
}

/* --- Стили для основного контента SEO-страниц (.seo-content-block) --- */
.seo-content-block {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: var(--text-white-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color-grey);
    line-height: 1.6;
    color: var(--text-dark-color);
}

.seo-content-block h1 {
    color: var(--text-dark-color);
    font-size: 2em;
    margin-bottom: 20px;
    text-align: center;
}

.seo-content-block h2,
.seo-content-block h3,
.seo-content-block h4,
.seo-content-block h5,
.seo-content-block h6 {
    color: var(--text-dark-color);
    margin-top: 15px;
    margin-bottom: 10px;
}

.seo-content-block p {
    margin-bottom: 15px;
    text-align: justify;
}

.seo-content-block ul,
.seo-content-block ol {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.seo-content-block li {
    margin-bottom: 5px;
}

.seo-content-block a {
    color: var(--main-red-color) !important;
    text-decoration: underline;
}

.seo-content-block a:hover {
    color: var(--dark-red-color) !important;
}

/* --- Стили для плавающей надписи "Начать знакомиться" на SEO-страницах --- */
.floating-cta-button {
    position: fixed;
    top: 100px;  /* Отступ сверху */
    left: 20px;  /* Отступ слева */
    z-index: 1000;

    display: inline-block; /* Теперь это надпись, а не блок-кнопка */
    padding: 10px 15px; /* Меньшие отступы, как у надписи */
    border-radius: 8px; /* Небольшое скругление */

    font-size: 1.8em; /* Крупный размер шрифта */
    font-weight: bold; /* Жирный */
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;

    /* Фон и рамка для выделения надписи */
    background-color: var(--background-cta-inscription); /* Полупрозрачный красный фон */
    border: 1px solid var(--dark-red-color); /* Тонкая красная рамка */
    
    color: var(--text-white-color) !important; /* Белый текст надписи */
    
    /* Шрифт наследуется от body или ближайшего родителя */
    
    /* ОСТАВЛЯЕМ декоративные эффекты текста для стилистики */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Немного раздвинем буквы для читаемости */
    text-shadow: 
        2px 2px 0px var(--text-shadow-color-1), /* Основная тень для объема */
        4px 4px 0px var(--text-shadow-color-2), /* Глубина */
        0 0 8px rgba(255,255,255,0.7); /* Легкое свечение */
        
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Общая тень для блока надписи */
    transition: all 0.3s ease; /* Плавный переход для всех свойств */
}

.floating-cta-button:hover {
    background-color: var(--dark-red-color); /* Темнее красный фон при наведении */
    transform: scale(1.05); /* Легкое увеличение */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Усилим тень при наведении */
    text-shadow: 
        1px 1px 0px var(--text-shadow-color-1),
        3px 3px 0px var(--text-shadow-color-2),
        0 0 10px rgba(255,255,255,1); /* Более яркое свечение при наведении */
}

/* Анимация пульсации для надписи */
@keyframes pulse-inscription {
    0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
    50% { transform: scale(1.02); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } /* Более мягкая пульсация */
    100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
}

.floating-cta-button {
    animation: pulse-inscription 2.5s infinite ease-in-out;
}
.floating-cta-button:hover {
    animation: none; /* Отключаем пульсацию при наведении */
}

.floating-cta-button .btn-text {
    color: var(--text-white-color) !important; /* Гарантируем белый цвет текста */
}