:root {
    --bg-color: radial-gradient(circle at top left, #fff4f8, #ffe9f0);
    --text-color: #333;
    --column-bg: white;
    --bg-color-card: white;
    --header-height: 60px;
}

body.dark-mode {
    --bg-color: #1a1a2e;
    --text-color: #eee;
    --column-bg: #2e2e44;
    --bg-color-card: #2e2e44; /* Фон карточек для темной темы */
}


/* Новый стиль для универсальной синей кнопки */
.btn-blue {
    display: inline-block;
    padding: 0px 15px;
    font-weight: bold;
    background-color: #007bff; /* Основной синий цвет */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none; /* Для ссылок, которые выглядят как кнопки */
    text-align: center;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-blue:hover {
    background-color: #0056b3; /* Более темный синий при наведении */
    transform: scale(1.05);
    color: white;
}
/* Новый стиль для body */
body {
    font-family: Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background 0.5s ease, color 0.5s ease;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

h2 {
    text-align: center;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

a {
    color: #0077cc;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #ff3399;
    text-decoration: underline;
}

.column {
    background: var(--column-bg);
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.5;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.button {
    display: inline-block;
    padding: 0px 8px;
    background: #28a745;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.3s ease;
}

.button:hover {
    background: #74db93;
    transform: scale(1.05);
}

.confirm {
    margin-top: 20px;
    text-align: center;
}

.heart-glow {
    display: inline-block;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 5px #ff5eb6, 0 0 10px #ff5eb6;
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 15px #ff80c0, 0 0 25px #ff80c0;
        transform: scale(1.1);
    }
}

.moon {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 60px;
    opacity: 0.9;
    animation: moonFloat 6s ease-in-out infinite;
    z-index: 3;
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

#fallingStars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

.theme-switcher-inside {
    margin-top: 20px;
    padding: 10px 20px;
    background: #0077cc;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, background 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.theme-switcher-inside:hover {
    background: #005fa3;
    transform: scale(1.05);
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid red;
    background-color: white;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 12px;
    color: red;
}

#enterBtn {
    background: linear-gradient(135deg, #ff80c0, #ff3399);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 28px 12px 22px;
    font-size: 16px;
	
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#enterBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff66aa, #e02885);
    transform: scale(1.05);
}

#enterBtn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.language-switcher {
    margin-top: 10px;
    text-align: center;
}

.language-switcher select {
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #cf1919;
    background-color: white;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 4px rgba(22, 21, 21, 0.1);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
	
}
.compatibility-form select {
    -webkit-appearance: menulist;
    appearance: menulist;
}
.language-switcher select:hover {
    border-color: #ff3399;
    box-shadow: 0 0 0 2px rgba(235, 30, 132, 0.2);
}

.language-switcher select:focus {
    outline: none;
    border-color: #ff3399;
    box-shadow: 0 0 0 3px rgba(255,51,153,0.3);
}

.comment-section textarea,
.comment-section input,
.comment-section button {
    color: var(--text-color);
    background-color: var(--column-bg);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.comment-message {
    color: var(--text-color);
    background-color: var(--column-bg);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.exit-button {
    margin-top: 20px;
    background: #dc3545;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    display: none;
}

.exit-button:hover {
    background: #c82333;
    transform: scale(1.05);
}

.text-indent {
    text-indent: 20px;
    line-height: 1.6;
}
.tool-selector-header {
    text-align: center;
    background: none;
    box-shadow: none;
    padding-top: 40px; /* Изначальный большой отступ для ПК */
    max-width: 900px;
    margin: 0 auto;
}

.tool-selector-header p {
    font-size: 18px;
    max-width: 700px;
    margin: 10px auto 0; /* Отступы для параграфа */
}

/* Стили для страницы приветствия знакомств (dating_intro.php) */
.dating-intro-container {
    margin: 40px auto; 
    max-width: 600px; 
    width: 90%; /* Увеличиваем гибкость ширины до 90% от родителя */
    padding: 20px; /* Добавляем внутренний отступ для лучшего вида на маленьких экранах */
    box-sizing: border-box; /* Учитываем padding в общей ширине */
    text-align: center;
    background-color: var(--bg-color-card); /* Используем переменную для фона карточки */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.dating-intro-container h2 {
    font-size: 2.2em; /* Немного уменьшаем базовый размер шрифта для мобильных */
    color: var(--text-color); 
    margin-bottom: 20px;
    line-height: 1.2; /* Убедимся, что текст не обрезается */
}

.dating-intro-container p {
    font-size: 1em; /* Базовый размер шрифта для параграфа */
    color: var(--text-color); /* Corrected variable name */
    line-height: 1.6; 
    margin-bottom: 30px;
}

.dating-intro-container img {
    max-width: 150px; /* Максимальная ширина иконки */
    width: 80%; /* Иконка будет занимать до 80% ширины контейнера, но не более 150px */
    height: auto; /* Сохраняем пропорции */
    margin-bottom: 40px;
}

.dating-intro-container .form-button {
    padding: 15px 30px; 
    font-size: 1.2em; 
    text-decoration: none;
    display: inline-block; /* Для корректного padding и margin */
    min-width: 200px; /* Минимальная ширина кнопки */
    max-width: 100%; /* Чтобы кнопка не выходила за пределы контейнера */
    box-sizing: border-box;
}


@media (max-width: 900px) {
    body {
        grid-template-columns: 1fr;
    }
    /* Внутри @media (max-width: 900px) { ... } */
/* Уменьшаем карточки на главной для мобильных */
		/* --- Стили для калькулятора (welcome.php) на мобильных --- */

/* Уменьшаем блок с результатом */
.result-display {
    padding: 12px;
}

.result-icons {
    gap: 5px; /* Уменьшаем отступ между иконками и процентом */
}

.result-icons img {
    width: 45px;  /* Уменьшаем иконки */
    height: 45px;
}

.result-percent {
    font-size: 25px; /* Уменьшаем шрифт процента */
}

.result-icons p {
    font-size: 11px; /* Уменьшаем текст под иконками (Вы: / Партнёр:) */
    line-height: 1.3;
}

/* Адаптируем селекторы даты в форме */
.date-selectors {
    display: flex;
    gap: 10px; /* Отступ между полями день/месяц/год */
}

.date-selectors select {
    flex-grow: 1; /* Поля занимают равное пространство */
    width: 33%;
}
    .feature-card {
        padding: 15px 15px; /* Уменьшаем внутренние отступы */
        margin-bottom: 6px;
    }

    .feature-card h3 {
        font-size: 15px; /* Уменьшаем заголовок */
        margin-top: 10px;
    }

    .feature-card p {
        font-size: 10px; /* Уменьшаем текст */
        line-height: 1.0;
    }
    
    .feature-card img {
        height: 30px; /* Уменьшаем иконку */
    }

    .features-grid {
        margin-top: 20px;
        gap: 15px;
    }
 .tool-selector-header {
        padding-top: 1px; /* Уменьшаем отступ сверху */
        margin-bottom: 5px; /* Уменьшаем отступ снизу */
    }

    .tool-selector-header h4 {
        font-size: 12px; /* Компактный заголовок */
        margin-bottom: 5px;
    }

    .tool-selector-header p {
        font-size: 10px; /* Компактный текст */
        line-height: 1.0;
        margin-top: 0;
    }
}

    .column {
        max-width: 100%;
        margin: 0 auto 20px;
    }


    .column {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px;
        box-sizing: border-box;
    }
.center-column h2 { font-size: 18px; }
    .column p, .confirm label { font-size: 14px; line-height: 1.5; }
    #enterBtn { font-size: 14px; padding: 10px 20px; }
    .theme-switcher-inside { font-size: 13px; padding: 8px 16px; margin: 20px auto 0; }
    .button { width: 90%; text-align: center; 
		text-align: center;
	white-space: normal;}
    .language-switcher { margin-top: 15px; }
    .language-switcher select { font-size: 13px; padding: 6px 12px; }
	margin-top: 10px;
	white-space: normal; /* Разрешаем перенос текста */
}

@media (max-width: 500px) {
    .left-column > div[style*="display: flex"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
		
    }

    .theme-switcher-inside,
    .language-switcher {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Стили для страницы приветствия знакомств (dating_intro.php) на очень маленьких экранах */
    .dating-intro-container h2 {
        font-size: 1.8em; /* Еще уменьшаем заголовок */
    }
    .dating-intro-container p {
        font-size: 0.9em; /* Еще уменьшаем параграф */
    }
    .dating-intro-container .form-button {
        font-size: 1em; /* Уменьшаем шрифт кнопки */
        padding: 10px 20px;
        min-width: 150px;
    }
}
/* Стили для страницы калькулятора совместимости */
.compatibility-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}
.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* Добавьте эту строку */
}
.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
}

.form-group input[type="date"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: var(--column-bg);
    color: var(--text-color);
}

.form-button {
    padding: 4px 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff80c0, #ff3399);
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    margin-top: 8px;
}

.form-button:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(255, 51, 153, 0.4);
}

/* Стили для блока с результатом */
.result-display {
    border: 2px solid #ffaddd;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    background: var(--bg-color);
}

.result-icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.result-icons img {
    width: 60px;
    height: 60px;
    
}

.result-percent {
    font-size: 42px;
    font-weight: bold;
    color: #ff3399;
    animation: glow 2s ease-in-out infinite; /* Используем ту же анимацию свечения */
}

.result-description {
    margin-top: 15px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
}
/* Стили для кнопки переключения между страницами */
.switch-logic-button {
    display: block;
    width: fit-content;
    margin: 0 auto 25px auto;
    padding: 8px 15px;
    background-color: #e9e9f3;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    transition: background-color 0.3s, transform 0.2s;
    text-align: center;
}

.switch-logic-button:hover {
    background-color: #dcdcf0;
    transform: scale(1.05);
    color: #000;
}

/* Для темной темы */
body.dark-mode .switch-logic-button {
    background-color: #404066;
    color: #eee;
}

body.dark-mode .switch-logic-button:hover {
    background-color: #505080;
    color: #fff;
}
/* Стили для общего хедера и футера */
.site-header {
    background-color: var(--column-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 0 20px;
    
    top: 0;
    z-index: 10;
    transition: transform 0.6s ease-in-out; /* переместили сюда */
}

/* Скрывающаяся шапка */
.site-header.hidden {
    transform: translateY(-100%);
}

.site-header.hidden {
    transform: translateY(-100%);
    transition: transform 0.6s ease-in-out;
}

.site-header {
    transition: transform 0.6s ease-in-out;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #ff3399;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между кнопками */
}

/* Стиль для наших новых кнопок в шапке */
.main-nav-button {
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    color: var(--text-color);
    transition: all 0.3s ease;
    font-size: 10px;
}

.main-nav-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #ff3399;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

body.dark-mode .main-nav-button {
    background-color: #3a3a5a;
    border-color: #555;
}

body.dark-mode .main-nav-button:hover {
    background-color: #4a4a7a;
}


.main-content {
    padding: 20px;
}

.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #888;
    border-top: 1px solid #eee;
}

body.dark-mode .site-footer {
    border-top-color: #333;
}

/* НОВЫЕ СТИЛИ ДЛЯ ГЛАВНОГО МЕНЮ */

/* Стили для ссылок и кнопки-меню */
.main-nav a, .main-nav .dropbtn {
    display: inline-block;
    padding: 6px 12px; /* Внутренние отступы */
    margin-left: 10px; /* Расстояние между кнопками */
    background-color: rgba(0, 0, 0, 0.05); /* Легкий фон */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Едва заметная рамка */
    border-radius: 20px; /* Скругление углов */
    text-decoration: none;
    font-weight: bold;
    color: var(--text-color);
    transition: all 0.3s ease;
    font-size: 12px;
}

/* Эффект при наведении */
.main-nav a:hover, .main-nav .dropbtn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #ff3399;
    transform: translateY(-2px); /* Легкий эффект "поднятия" */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Стили для кнопки выпадающего меню */
.main-nav .dropbtn {
    cursor: pointer;
    font-family: inherit; /* Наследуем шрифт */
}

/* Контейнер выпадающего списка */
.main-nav .dropdown {
    position: relative;
    display: inline-block;
}

/* Содержимое выпадающего списка */
.main-nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--column-bg);
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-top: 10px;
    
}

/* Показываем выпадающее меню, когда JavaScript добавляет класс .show */
.main-nav .dropdown-content.show {
    display: block;
}

/* Ссылки внутри выпадающего меню */
.main-nav .dropdown-content a {
    color: var(--text-color) !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    margin-left: 0;
    border-radius: 0;
    border: none;
    background: none;
    box-shadow: none;
    text-align: left;
}

/* Эффект наведения для ссылок в меню */
.main-nav .dropdown-content a:hover {
    background-color: #f1f1f1;
    transform: none; /* Убираем эффект "поднятия" */
    box-shadow: none;
}

/* Стили для темной темы */
body.dark-mode .main-nav a, 
body.dark-mode .main-nav .dropbtn {
    background-color: #3a3a5a;
    border-color: #555;
}

body.dark-mode .main-nav a:hover, 
body.dark-mode .main-nav .dropbtn:hover {
    background-color: #4a4a7a;
}

body.dark-mode .main-nav .dropdown-content {
    border-color: #444;
}

body.dark-mode .main-nav .dropdown-content a:hover {
    background-color: #404066;
}

.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #888;
    border-top: 1px solid #eee;
}

body.dark-mode .site-footer {
    border-top-color: #333;
}
/* Стили для блоков-приглашений на главной странице */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 40px auto;
}

.feature-card {
    background-color: var(--column-bg);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.feature-card img {
    height: 60px;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 22px;
    margin: 15px 0 10px 0;
    color: #333;
}

.feature-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

body.dark-mode .feature-card h3 {
    color: #eee;
}

body.dark-mode .feature-card p {
    color: #ccc;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    .result-display {
    padding: 10px; /* Уменьшаем внутренние отступы всего блока */
}

.result-icons img {
    width: 15px;  /* Уменьшаем размер иконки знака (было 60px) */
    height: 15px;
}

.result-percent {
    font-size: 25px; /* Уменьшаем размер процента (было 42px) */
}

.result-description {
    font-size: 8px; /* Можно также немного уменьшить текст описания */
}
}

/* Стили для блока с баллами в шапке */
.user-credits {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между текстом и кнопкой */
}

.user-credits span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}

.user-credits .buy-button {
    padding: 8px 16px;
    background-color: #28a745; /* Зеленый цвет для кнопки "Купить" */
    color: white !important;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
}

.user-credits .buy-button:hover {
    background-color: #218838; /* Более темный зеленый при наведении */
    transform: scale(1.05);
    text-decoration: none !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
        height: auto;
        padding: 10px 0;
    }

    .logo {
        width: 100%; /* Логотип занимает всю ширину */
        text-align: center; /* Центрируем логотип */
        margin-bottom: 10px; /* Отступ снизу */
        font-size: 20px; /* Уменьшаем размер логотипа */
    }

    .main-nav {
        width: 100%; /* Навигация занимает всю ширину */
        justify-content: center; /* Центрируем кнопки навигации */
        margin-bottom: 10px; /* Отступ снизу */
        gap: 8px; /* Уменьшаем расстояние между кнопками */
    }

    .main-nav a, .main-nav .dropbtn {
        font-size: 10px;      /* Уменьшаем шрифт */
        padding: 6px 14px;  /* Уменьшаем внутренние отступы */
        margin-left: 0; /* Убираем левый отступ, используем gap */
    }
    
    .user-actions {
        flex-direction: column; /* Ставим блоки друг под другом */
        align-items: center;  /* Выравниваем их по центру */
        gap: 10px;              /* Отступ между блоком баланса и кнопками */
        width: 100%; /* Действия пользователя занимают всю ширину */
    }
    .user-credits {
        width: 100%;
        justify-content: center;
        margin-top: 0; /* Убираем верхний отступ, так как уже есть gap */
        font-size: 10px;
        padding: 6px 10px;
    }
    
    /* Тут же находятся правила для уменьшения кнопок, которые мы добавили ранее */
    .main-nav a,
    .user-actions .buy-button,
    .user-actions .register-button,
    .user-actions .profile-link,
    .user-actions .dropbtn {
        font-size: 10px;
        padding: 6px 10px;
    }
    .profile-actions-group, .guest-actions-group {
        flex-direction: column; /* Кнопки внутри этих групп тоже выстраиваем в столбец */
        width: 100%;
        gap: 8px;
    }
    .profile-actions-group .buy-button,
    .guest-actions-group .main-nav-button,
    .guest-actions-group .register-button,
    .profile-actions-group .dropdown {
        width: 80%; /* Делаем кнопки шире для лучшего нажатия */
        text-align: center;
        margin: 0 auto;
    }
    .user-balance {
        order: -1; /* Перемещаем баланс на самый верх в мобильной версии */
    }
}
/* Стили для сообщения об ошибке или уведомления */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/* Новые стили для макета главной страницы index.php */
/* ИСПРАВЛЕННЫЙ КОД */
.index-page-container {
    display: grid;
    /* Левая колонка теперь шире (1.5 доли), центральная - 2, правая - 1 */
    grid-template-columns: 1.5fr 2fr 1fr; 
    gap: 30px;
    /* Это свойство выравнивает колонки по верхнему краю. 'start' - более корректное значение для Grid. */
    align-items: start;
    margin-top: 20px;
}

/* Адаптивность: на мобильных устройствах колонки встанут друг под друга */
@media (max-width: 900px) {
    .index-page-container {
        grid-template-columns: 1fr;
        /* Добавьте этот код внутрь @media (max-width: 900px) { ... } */

.column.center-column {
    order: 1; /* Приветствие будет первым */
}

.column.left-column {
    order: 2; /* Знаки зодиака будут вторыми */
}

.column.right-column {
    order: 3; /* Отзывы будут последними */
}
    }
}
.page-layout-columns {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .page-layout-columns {
        grid-template-columns: 1fr;
    }
    
}
/* Стили для иконки показать/скрыть пароль */
.form-group {
    position: relative; /* Это нужно, чтобы позиционировать иконку внутри */
}

.password-toggle-icon {
    position: absolute;
    top: 40px; /* Отступ сверху, чтобы быть на уровне текста в поле */
    right: 15px; /* Отступ справа */
    cursor: pointer;
    color: #888;
    user-select: none; /* Чтобы текст иконки не выделялся при клике */
}

body.dark-mode .password-toggle-icon {
    color: #ccc;
}
/* Стиль для кнопки "Ваш Профиль" */
.profile-link {
    padding: 8px 16px;
    background-color: #6f42c1; /* Фиолетовый цвет */
    color: white !important;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.profile-link:hover {
    background-color: #5a3d90;
    transform: scale(1.05);
    text-decoration: none !important;
}
/* Стили для блока отзывов на главной странице */
.reviews-container h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

body.dark-mode .reviews-container h3 {
    border-bottom-color: #444;
}

.review-form .form-group {
    margin-bottom: 15px;
}

.review-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}

.review-form input[type="text"] {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}

.review-list {
    margin-top: 30px;
}

.review-item {
    background-color: rgba(0,0,0,0.02);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 3px solid #ffaddd;
}

body.dark-mode .review-item {
    background-color: rgba(255,255,255,0.05);
    border-left-color: #ff80c0;
}

.review-item p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.review-item .author {
    font-weight: bold;
    color: #333;
}

body.dark-mode .review-item .author {
    color: #eee;
}
/* Стили для блока с действиями пользователя в шапке */
.user-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между элементами */
    margin-left: auto; /* Прижимает блок к правому краю */
}

/* Улучшенные стили для баланса пользователя */
.user-balance {
    display: flex;
    align-items: center;
    gap: 8px; /* Расстояние между текстом и числом */
    background-color: var(--column-bg); /* Changed to use var(--column-bg) */
    padding: 4px 10px 4px 12px;
    border-radius: 30px; /* Делаем плашку овальной */
    font-size: 14px; /* Увеличиваем шрифт */
    padding: 4px 10px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

/* Стили для самого числа (в теге <strong>) */
.user-balance strong {
    background-color: #28a745; /* Зеленый акцент */
    color: white;
    font-weight: bold;
    border-radius: 50%; /* Делаем кружок */
    min-width: 24px;   /* Минимальная ширина для кружка */
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.buy-button, .register-button {
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 10px;
    border: 1px solid;
}

.buy-button {
    background-color: #28a745;
    border-color: #28a745;
    color: white !important;
}
.buy-button:hover {
    background-color: #218838;
    border-color: #1e7e34;
    transform: translateY(-2px);
}

.register-button {
    background-color: #007bff;
    border-color: #007bff;
    color: white !important;
}
.register-button:hover {
    background-color: #0069d9;
    border-color: #0062cc;
    transform: translateY(-2px);
}
/* --- Стили для горизонтального выбора платежных систем --- */

.payment-methods-container {
    display: flex;          /* Включаем Flexbox */
    flex-wrap: wrap;        /* Позволяем переноситься на новую строку, если не поместятся */
    justify-content: center;/* Центрируем кнопки */
    gap: 20px;              /* Расстояние между кнопками */
    margin-top: 20px;
}

/* Общий стиль для кнопок оплаты */
.payment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;           /* Фиксированная ширина */
    height: 70px;           /* Фиксированная высота */
    border: 2px solid #ddd;
    border-radius: 12px;
    background-color: var(--column-bg);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.payment-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    border-color: #007bff;
}

.payment-button img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Чтобы логотип красиво вписывался */
}

/* Специфичные стили для CLICK */
.payment-button.click:hover {
    border-color: #00c3ff;
}

/* Специфичные стили для Payme (на будущее) */
.payment-button.payme:hover {
    border-color: #33CCCC;
}

/* Стили для темной темы */
body.dark-mode .payment-button {
    border-color: #555;
}
/* --- Стили для страницы покупки баллов (buy_credits.php) --- */

.purchase-layout {
    display: flex;              /* Включаем Flexbox */
    align-items: stretch;       /* Растягиваем блоки по высоте */
    gap: 30px;                  /* Расстояние между блоками */
}

.purchase-option-card {
    flex: 1;                    /* Каждый блок занимает равное пространство */
    background: var(--column-bg);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.purchase-option-card h3 {
    margin-top: 0;
}

.packages-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    height: 100%; /* Заставляем контейнер пакетов расти */
    justify-content: space-around; /* Распределяем пространство */
}

.package-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    background: var(--bg-color);
}

body.dark-mode .package-card {
    border-color: #444;
}

.package-card .price {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin: 10px 0;
}

.buy-button-package {
    display: inline-block;
    padding: 10px 25px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.buy-button-package:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}


/* Адаптивность для мобильных */
@media (max-width: 800px) {
    .purchase-layout {
        flex-direction: column; /* Ставим блоки друг под другом */
    }
}
/* --- Новые стили для блока кастомного ввода баллов --- */

.quantity-picker {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 5px;
    max-width: 200px;
    margin: 0 auto;
}

body.dark-mode .quantity-picker {
    border-color: #555;
}

.quantity-picker input[type="number"] {
    width: 80px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    border: none;
    background: transparent;
    color: var(--text-color);
    -moz-appearance: textfield; /* Убираем стрелки в Firefox */
}

.quantity-picker input[type="number"]::-webkit-outer-spin-button,
.quantity-picker input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Убираем стрелки в Chrome, Safari */
    margin: 0;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background-color: #f0f0f5;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

body.dark-mode .quantity-btn {
    background-color: #3a3a5a;
    color: #eee;
}

.quantity-btn:hover {
    background-color: #e0e0e5;
}

body.dark-mode .quantity-btn:hover {
    background-color: #4a4a7a;
}

.total-price-styled {
    background-color: transparent; /* Убираем фон */
    border: none;                  /* Убираем рамку */
    padding: 0;                    /* Убираем отступы */
    margin-top: 0;                 /* Убираем отступ */
    text-align: left;              /* Выравниваем текст по левому краю */
}

body.dark-mode .total-price-styled {
    background-color: #2c3e50;
    border-color: #34495e;
}

.total-price-styled span {
    display: block;
    font-size: 16px;
    color: #555;
}

body.dark-mode .total-price-styled span {
    color: #ccc;
}

.total-price-styled strong {
    display: block;
    font-size: 28px;
    color: #007bff;
    margin-top: 5px;
}
/* --- Стили для группы "Цена + Кнопка" --- */
.payment-action-group {
    margin-top: auto; /* Эта магия прижимает блок к низу карточки */
    padding-top: 20px;
    border-top: 1px solid #eee;
}

body.dark-mode .payment-action-group {
    border-top-color: #444;
}

.payment-action-group .form-button {
    width: 100%;
    margin-top: 15px;
}
/* Стили для тестовой кнопки оплаты */
.payment-button.test {
    background-color: #f0ad4e; /* Оранжевый цвет для привлечения внимания */
    border-color: #eea236;
}
.payment-button.test span {
    font-weight: bold;
    color: white;
}
.payment-button.test:hover {
    background-color: #ec971f;
    border-color: #d58512;
}
/* --- НОВЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ --- */

/* Новый контейнер-сетка для страницы */
.index-page-container-new {
    display: grid;
    /* Hero-блок, колонка со знаками, колонка с отзывами */
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
        "hero zodiac"
        "hero reviews";
    gap: 30px;
    align-items: start;
    margin-top: 40px;
}

/* Стили для Hero-блока (центральная часть) */
.hero-section {
    grid-area: hero;
    text-align: center;
    padding: 40px;
    background: var(--column-bg);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.hero-title {
    font-size: 42px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.hero-title span {
    color: #0077cc;
}

.hero-subtitle {
    font-size: 20px;
    color: #555;
    margin-bottom: 30px;
}
body.dark-mode .hero-subtitle { color: #ccc; }

.hero-button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 18px;
    font-weight: bold;
    color: white !important;
    background: linear-gradient(135deg, #ff80c0, #ff3399);
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 51, 153, 0.4);
}
.hero-button:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 51, 153, 0.5);
    text-decoration: none;
}

.disclaimer-text {
    margin-top: 40px;
    font-size: 14px;
    color: #777;
    text-align: justify;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
body.dark-mode .disclaimer-text { color: #aaa; border-top-color: #444; }

/* Общие стили для колонок */
.index-page-container-new .column {
    background: var(--column-bg);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.column-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
body.dark-mode .column-title { border-bottom-color: #444; }

/* Стили для сетки знаков зодиака */
.zodiac-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.zodiac-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    transition: background-color 0.2s;
    text-decoration: none;
    color: var(--text-color);
}
.zodiac-card:hover {
    background-color: #f0f0f5;
    text-decoration: none;
}
body.dark-mode .zodiac-card:hover { background-color: #3a3a5a; }

.zodiac-card img {
    width: 32px;
    height: 32px;
    margin-right: 15px;
}
.zodiac-card-info {
    display: flex;
    flex-direction: column;
}
.zodiac-card-info span { font-weight: bold; }
.zodiac-card-info small { font-size: 12px; color: #777; }
body.dark-mode .zodiac-card-info small { color: #aaa; }


/* Улучшенные стили для отзывов */
.review-item {
    border-left-width: 4px;
    border-left-style: solid;
    border-color: #ffcce7;
    background-color: transparent;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 0 8px 8px 0;
}
.review-item.user-message { border-color: #b3d7ff; }
.review-text { margin: 5px 0 10px 0 !important; }
.review-meta { margin: 0; font-size: 13px; color: #555; }
.review-item .author { text-align: right; font-style: italic; }

.admin-response {
    margin-top: 15px;
    padding: 15px;
    background-color: rgba(0,0,0,0.03);
    border-radius: 8px;
    border-top: 2px solid #e9e9e9;
}
body.dark-mode .admin-response { background-color: rgba(255,255,255,0.05); border-top-color: #444; }


/* Адаптивность */
@media (max-width: 900px) {
    .index-page-container-new {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "hero"
            "zodiac"
            "reviews";
    }
    
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 18px; }
    .zodiac-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
}

/* --- Стили для панели управления (тема и язык) --- */

/* Внешняя обертка для контейнера */
.controls-container-wrapper {
    background-color: rgba(0,0,0,0.02); /* Легкий фон для выделения */
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
body.dark-mode .controls-container-wrapper {
    background-color: rgba(255,255,255,0.03);
    border-bottom-color: #333;
}

/* Сам контейнер с кнопками */
.controls-container {
    max-width: 1200px;  /* Та же ширина, что и у основного контента */
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* Выравниваем элементы по правому краю */
    align-items: center;
    gap: 15px;
    padding: 0 20px;
}

/* Общий стиль для кнопок на панели */
.control-button, .control-select {
    padding: 6px 12px;
    background-color: var(--column-bg);
    border: 1px solid #ddd;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500; /* Средняя жирность */
    color: var(--text-color);
    transition: all 0.3s ease;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit; /* Наследуем шрифт от body */
}

/* Стили для темной темы */
body.dark-mode .control-button,
body.dark-mode .control-select {
     background-color: #3a3a5a;
     border-color: #555;
}

/* Эффект при наведении */
.control-button:hover,
.control-select:hover {
    border-color: #ff3399; /* Розовая рамка при наведении */
    color: #ff3399;        /* Розовый текст при наведении */
}

/* Специфичные стили для селекта языка */
.control-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Кастомная стрелочка для выпадающего списка */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px; /* Добавляем место справа для стрелки */
}

/* Специфичные стили для кнопки темы */
.control-button {
    display: flex;
    align-items: center;
    gap: 8px; /* Расстояние между иконкой и текстом */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .controls-container {
        justify-content: center; /* Центрируем кнопки на мобильных */
    }
}
/* Добавьте ЭТИ правила ВНУТРЬ блока @media (max-width: 900px) */
.switch-logic-button {
    padding: 8px 10px;  /* Уменьшаем внутренние отступы (было 10px 20px) */
    font-size: 10px;    /* Уменьшаем размер шрифта */
    margin-bottom: 10px;/* Можно также немного уменьшить нижний отступ */
}
.column {
    padding: 15px; /* Уменьшаем внутренние отступы в колонках */
    font-size: 15px; /* Устанавливаем базовый размер шрифта для мобильных */
}

.column h2 {
    font-size: 20px; /* Уменьшаем заголовки */
    margin-top: 0;
}

.column p, .column li, .column label {
    font-size: 12px; /* Уменьшаем основной текст */
    line-height: 1.2;
}

.index-page-container {
    gap: 20px; /* Уменьшаем расстояние между блоками */
    padding: 15px; /* Добавляем немного отступа по краям экрана */
    margin-top: 10px;
}
/* style.css */

/* Новый стиль для блока подтверждения */
.confirm {
    margin-top: 15px; /* Немного увеличим отступ сверху */
    background: rgba(0,0,0,0.02); /* Легкий фон, чтобы выделить блок */
    padding: 15px; /* Внутренние отступы для "воздуха" */
    border-radius: 10px; /* Скругление углов, как у других колонок */
    border: 1px solid #eee; /* Тонкая рамка для четкости */
    text-align: center;
    transition: background 0.5s ease, border-color 0.5s ease;
}

/* Стиль для блока подтверждения в темной теме */
body.dark-mode .confirm {
    background: rgba(255,255,255,0.04); /* Слегка заметный фон для темной темы */
    border-color: #3a3a5a; /* Цвет рамки, подходящий под темную тему */
}

/* Сделаем текст соглашения более аккуратным */
.confirm label {
    display: block;
    margin-bottom: 20px; /* Добавляем отступ снизу вместо <br> */
    text-align: justify; /* Выравнивание текста по ширине смотрится лучше */
    line-height: 1.6;
}
.check-button {
    margin-top: 10px;
    padding: 8px 16px;
    font-weight: bold;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.check-button:hover {
    background-color: #0056b3;
}
.profile-actions-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Сохраняем отступ между кнопкой и меню */
}
/* Контейнер для кнопок гостя */
.guest-actions-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Стили для группы ввода номера телефона */
.phone-input-group {
    display: flex;
    flex-direction: column; /* Это свойство ставит элементы друг под другом */
    gap: 10px;             /* Расстояние между полем выбора кода и полем ввода номера */
}

/* Применяем общие стили к полям внутри группы */
.phone-input-group select,
.phone-input-group input {
    width: 100%; /* Растягиваем каждое поле на всю ширину */
    box-sizing: border-box; 
}
/* ======================================== */
/* Новые красивые стили для полей ввода      */
/* ======================================== */

/* Общий стиль для всех текстовых полей и списков в формах */
.compatibility-form input[type="tel"],
.compatibility-form input[type="password"],
.compatibility-form select {
    padding: 6px; /* Уменьшили отступы (было 12px) */
    border: 1px solid #ddd; 
    border-radius: 6px;
    font-size: 14px; /* Уменьшили шрифт (было 16px) */
    background-color: var(--column-bg); 
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}

/* Стиль при фокусе (когда пользователь кликает на поле) */
.compatibility-form input[type="tel"]:focus,
.compatibility-form input[type="password"]:focus,
.compatibility-form select:focus {
    outline: none; /* Убираем стандартную синюю обводку браузера */
    border-color: #ff3399; /* Рамка становится розовой в цвет темы */
    /* Добавляем легкое свечение, чтобы выделить активное поле */
    box-shadow: 0 0 0 3px rgba(255, 51, 153, 0.2);
}

/* Стили для темной темы */
body.dark-mode .compatibility-form input[type="tel"],
body.dark-mode .compatibility-form input[type="password"],
body.dark-mode .compatibility-form select {
    border-color: #444; /* Более темная рамка для темной темы */
}
/* Медиа-запрос для мобильных устройств (экраны шириной до 768px) */
@media (max-width: 768px) {
    /*
     * Уменьшаем все основные кнопки, которые используются на сайте.
     * Вы можете добавлять сюда другие классы кнопок через запятую.
    */
    .form-button,
    .switch-logic-button,
    .main-nav-button,
    .register-button,
    .buy-button,
    #enterBtn {
        font-size: 12px;      /* Уменьшаем размер текста на кнопке */
        padding: 8px 12px;   /* Уменьшаем внутренние отступы (поля) */
        min-height: auto; /* Сбрасываем минимальную высоту, если она была задана */
		 min-width: auto;
    }
}
/* --- Исправление для отступов между полями даты --- */

.compatibility-form .date-selectors {
    display: flex;
    gap: 10px; /* <- Это свойство добавит отступ между рамками */
}
/* Additional styles for the header dropdown on mobile */
@media (max-width: 768px) {
    .main-nav .dropdown-content {
        position: static; /* Change to static for mobile to flow naturally */
        width: 100%; /* Take full width */
        box-shadow: none; /* Remove shadow */
        border: none; /* Remove border */
        background-color: transparent; /* Transparent background */
    }

    .main-nav .dropdown-content a {
        padding: 8px 16px; /* Adjust padding */
        text-align: center; /* Center text */
    }
}


/* Fix for dropdown menus in the compatibility form on mobile */
.compatibility-form select {
    -webkit-appearance: menulist;
    appearance: menulist;
}