/* ============================================================
   ОГЛАВЛЕНИЕ (по мере следования блоков в файле):
   1. Общие стили + тёмная тема (body, шапка, кнопки, отзывы, ЛК)
   2. Личный кабинет / роли / авторизация
   3. Вкладки услуг и цен (светлая и тёмная тема)
   4. Адаптив: компактная шапка для мобильных
   5. Плавные переходы между секциями (hero -> контакты)
   6. Блок цен (pricing)
   7. Цветовые фиксы вкладок и тарифов
   8. Обновления личного кабинета (светлая/тёмная тема)
   9. Акционный баннер
   10. FAQ (аккордеон на <details>/<summary>)
   ============================================================ */

/* Общие стили */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF; /* Чисто белый */
    color: #000000; /* Чисто черный */
    line-height: 1.6;
}

body.dark-theme {
    background-color: #000000; /* Абсолютно черный */
    color: #FFFFFF; /* Чисто белый */
}

body.dark-theme header {
    background-color: #0A0A0A; /* Почти черный для шапки */
    box-shadow: 0 2px 5px rgba(255,255,255,0.05);
}

body.dark-theme nav a {
    color: #FFFFFF;
}

body.dark-theme nav a:hover {
    color: #D4FF19; /* Идеальный баланс лайма */
}

body.dark-theme .logo span {
    color: #FFFFFF;
}

body.dark-theme .hero {
    background-color: #000000;
}

body.dark-theme .hero::before {
    background-color: rgba(0, 0, 0, 0.85);
}

body.dark-theme .hero-school-name,
body.dark-theme .hero-slogan {
    color: #FFFFFF;
}

body.dark-theme .cta-button {
    background-color: #D4FF19;
    color: #000000; /* Черный текст на лаймовом фоне */
}

body.dark-theme .cta-button:hover {
    background-color: #C2E617;
}

body.dark-theme .tab-btn {
    background-color: #000000;
    border-color: #333333; 
    color: #FFFFFF;
}

body.dark-theme .tab-btn.active {
    background-color: #D4FF19;
    color: #000000; 
    box-shadow: 0 4px 15px rgba(212, 255, 25, 0.2);
}

body.dark-theme .tab-btn:hover {
    background-color: #111111;
}

body.dark-theme .service-card,
body.dark-theme .about,
body.dark-theme .review,
body.dark-theme .booking-form,
body.dark-theme .lk-card,
body.dark-theme .modal-content,
body.dark-theme .admin-table th,
body.dark-theme .admin-table td {
    background-color: #0A0A0A;
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(255,255,255,0.02);
    border: 1px solid #222222;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme .category-title,
body.dark-theme .review h2,
body.dark-theme .about h2,
body.dark-theme .contact h2 {
    color: #FFFFFF;
}

body.dark-theme .service-card h3 {
    color: #D4FF19;
}

body.dark-theme .review-slide {
    background-color: transparent;
    color: #FFFFFF;
}

body.dark-theme .slider-container {
    background-color: transparent;
}

/* Полные версии .review / .slider-btn объявлены один раз ниже, в блоке "Отзывы (тёмная тема)" */

body.dark-theme .contact {
    background-color: #000000;
}

body.dark-theme .lk-section {
    background-color: #000000;
}

body.dark-theme .lk-section .container {
    color: #FFFFFF;
}

body.dark-theme .lk-card p,
body.dark-theme .lk-card span,
body.dark-theme .lk-card div {
    color: #CCCCCC;
}

body.dark-theme .lk-card h3,
body.dark-theme .lk-card h4 {
    color: #FFFFFF;
}

body.dark-theme #student-stats > div {
    background-color: #000000 !important;
    border: 1px solid #333333 !important;
}

body.dark-theme #student-stats > div > div:last-child {
    color: #CCCCCC !important;
}

body.dark-theme .student-lesson-content,
body.dark-theme .student-theory-content {
    background-color: transparent !important;
}

body.dark-theme .student-lesson-content [style*="background:"],
body.dark-theme .student-lesson-content [style*="background-color:"],
body.dark-theme .student-lesson-content [style*="background: #fff"],
body.dark-theme .student-lesson-content [style*="background: #fdf2e9"],
body.dark-theme .student-lesson-content [style*="background: #e8f8f5"],
body.dark-theme .student-lesson-content [style*="background: white"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme .student-lesson-content [style*="background: #fdf2e9"] p,
body.dark-theme .student-lesson-content [style*="background: #fff"] p,
body.dark-theme .student-lesson-content [style*="background: #e8f8f5"] p {
    color: #FFFFFF !important;
}

body.dark-theme .student-lesson-content .action-btn {
    background-color: #D4FF19 !important;
    color: #000000 !important;
}

body.dark-theme .student-lesson-content .action-btn:hover {
    background-color: #C2E617 !important;
}

body.dark-theme .student-lesson-content .form-input {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme .student-lesson-content .form-input::placeholder {
    color: #999999 !important;
}

body.dark-theme .student-lesson-content .action-btn[style] {
    background-color: #D4FF19 !important;
}

body.dark-theme .submit-btn,
body.dark-theme .action-btn {
    background-color: #D4FF19;
    color: #000000;
}

body.dark-theme .submit-btn:hover,
body.dark-theme .action-btn:hover {
    background-color: #C2E617;
}

body.dark-theme .student-lesson-content,
body.dark-theme .student-lesson-content div,
body.dark-theme .student-lesson-content p,
body.dark-theme .student-lesson-content span,
body.dark-theme .student-lesson-content a,
body.dark-theme .student-lesson-content input,
body.dark-theme .student-lesson-content textarea {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

body.dark-theme .student-lesson-content [style*="background:"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme .student-lesson-content a {
    color: #D4FF19 !important;
}

body.dark-theme .student-lesson-content .action-btn {
    background-color: #D4FF19 !important;
    color: #000000 !important;
}

body.dark-theme .student-lesson-content .action-btn:hover {
    background-color: #C2E617 !important;
}

body.dark-theme .student-lesson-content [style*="color: #2c3e50"],
body.dark-theme .student-lesson-content [style*="color: #7f8c8d"],
body.dark-theme .student-lesson-content [style*="color: #e67e22"],
body.dark-theme .student-lesson-content [style*="color: #27ae60"],
body.dark-theme .student-lesson-content [style*="color: #f39c12"] {
    color: #FFFFFF !important;
}

body.dark-theme .student-lesson-content [style*="background: #fff"],
body.dark-theme .student-lesson-content [style*="background: #fdf2e9"],
body.dark-theme .student-lesson-content [style*="background: #e8f8f5"],
body.dark-theme .student-lesson-content [style*="background: white"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme .student-lesson-content [style*="background: #e8f8f5"] p,
body.dark-theme .student-lesson-content [style*="background: #fdf2e9"] p,
body.dark-theme .student-lesson-content [style*="background: #fff"] p {
    color: #FFFFFF !important;
}

body.dark-theme .student-lesson-content [style*="color: #555"],
body.dark-theme .student-lesson-content [style*="color:#555"],
body.dark-theme .student-lesson-content [style*="color: #7f8c8d"],
body.dark-theme .student-lesson-content [style*="color:#7f8c8d"] {
    color: #CCCCCC !important;
}

body.dark-theme .lk-card [style*="color: #7f8c8d"],
body.dark-theme .lk-card [style*="color:#7f8c8d"],
body.dark-theme .lk-card [style*="color: #555"],
body.dark-theme .lk-card [style*="color:#555"] {
    color: #CCCCCC !important;
}

body.dark-theme [style*="color: #2c3e50"],
body.dark-theme [style*="color:#2c3e50"],
body.dark-theme [style*="color: #7f8c8d"],
body.dark-theme [style*="color:#7f8c8d"],
body.dark-theme [style*="color: #555"],
body.dark-theme [style*="color:#555"] {
    color: #FFFFFF !important;
}

body.dark-theme .student-lesson-content [style*="background:#eafaf1"],
body.dark-theme .student-lesson-content [style*="background: #eafaf1"] {
    background-color: #000000 !important;
    border-color: #D4FF19 !important;
    color: #FFFFFF !important;
}

body.dark-theme .student-lesson-content .form-input {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme .student-lesson-content .form-input::placeholder {
    color: #999999 !important;
}

body.dark-theme [style*="background: #fff"],
body.dark-theme [style*="background: #fdf2e9"],
body.dark-theme [style*="background: #e8f8f5"],
body.dark-theme [style*="background:#fff"],
body.dark-theme [style*="background:#fdf2e9"],
body.dark-theme [style*="background:#e8f8f5"],
body.dark-theme [style*="background: white"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme [style*="color: #555"],
body.dark-theme [style*="color:#555"],
body.dark-theme [style*="color: #666"],
body.dark-theme [style*="color:#666"],
body.dark-theme [style*="color: #777"],
body.dark-theme [style*="color:#777"],
body.dark-theme [style*="color: #888"],
body.dark-theme [style*="color:#888"],
body.dark-theme [style*="color: #999"],
body.dark-theme [style*="color:#999"],
body.dark-theme [style*="color: #7f8c8d"],
body.dark-theme [style*="color:#7f8c8d"] {
    color: #CCCCCC !important;
}

body.dark-theme .logout-btn {
    border-color: #D4FF19;
    color: #D4FF19;
}

body.dark-theme .logout-btn:hover {
    background: #D4FF19;
    color: #000000;
}

body.dark-theme .contact-info a,
body.dark-theme .contact-info .email-copy {
    color: #D4FF19 !important;
}

body.dark-theme .contact-info .copy-notification,
body.dark-theme .contact-info p {
    color: #FFFFFF !important;
}

body.dark-theme [style*="background: #fff"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme [style*="background: #fdf2e9"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme [style*="background: #e8f8f5"] {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme [style*="color: #2c3e50"] {
    color: #FFFFFF !important;
}

body.dark-theme [style*="color: #7f8c8d"] {
    color: #999999 !important;
}

body.dark-theme [style*="color: #e67e22"] {
    color: #D4FF19 !important;
}

body.dark-theme [style*="color: #27ae60"] {
    color: #D4FF19 !important;
}

body.dark-theme [style*="border: 1px solid #eee"] {
    border-color: #333333 !important;
}

body.dark-theme [style*="border-bottom: 1px solid #eee"] {
    border-color: #333333 !important;
}

body.dark-theme .about {
    background-color: #0A0A0A;
}

body.dark-theme .student-notification-area div {
    background-color: #000000;
    border-color: #D4FF19;
}

body.dark-theme .about p {
    color: #CCCCCC;
}

body.dark-theme .review {
    background-color: #000000;
    border-left-color: #D4FF19;
    box-shadow: 0 2px 12px rgba(255,255,255,0.05);
}

body.dark-theme .review blockquote {
    color: #FFFFFF;
}

body.dark-theme .review cite {
    color: #999999;
}

body.dark-theme .slider-btn {
    background-color: #0A0A0A;
    color: #FFFFFF;
    border-color: #333333;
}

body.dark-theme .slider-btn:hover {
    background-color: #D4FF19;
    color: #000000;
    border-color: #D4FF19;
}

body.dark-theme .booking-form {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid #222222;
}

body.dark-theme footer {
    background-color: #000000;
}

body.dark-theme .auth-nav-btn {
    background-color: #D4FF19;
    color: #000000;
}

body.dark-theme .auth-nav-btn:hover {
    background-color: #C2E617;
}

body.dark-theme .profile-badge {
    background-color: #D4FF19;
    color: #000000;
}

body.dark-theme .profile-badge:hover {
    background-color: #C2E617;
}

/* .theme-slider для тёмной темы объявлен один раз ниже, рядом с .theme-switch */

body.dark-theme #lk-container,
body.dark-theme .lk-section,
body.dark-theme .lk-card,
body.dark-theme #student-next-lesson,
body.dark-theme #student-notification-area,
body.dark-theme #student-lesson-content,
body.dark-theme #student-theory-content,
body.dark-theme .student-notification-area div,
body.dark-theme .lk-card span,
body.dark-theme .lk-card p,
body.dark-theme .lk-card h3,
body.dark-theme .lk-card h4,
body.dark-theme .lk-card div {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
}

body.dark-theme #lk-container .lk-card {
    box-shadow: 0 4px 20px rgba(255,255,255,0.02) !important;
    border: 1px solid #222222;
}

body.dark-theme #lk-container [style*="background:#eee"],
body.dark-theme #lk-container [style*="background: #eee"],
body.dark-theme #lk-container [style*="background: #f8f9fa"],
body.dark-theme #lk-container [style*="background:#f8f9fa"],
body.dark-theme #lk-container [style*="background: #f7f8fb"],
body.dark-theme #lk-container [style*="background:#f7f8fb"],
body.dark-theme #lk-container [style*="background:#ffffff"],
body.dark-theme #lk-container [style*="background: #ffffff"],
body.dark-theme #lk-container [style*="background: white"],
body.dark-theme #lk-container [style*="background: linear-gradient"],
body.dark-theme #lk-container [style*="background: linear-gradient(135deg,#eef5fc,#ffffff)"],
body.dark-theme #lk-container [style*="background: linear-gradient(135deg,#eef5fc,#ffffff);"] {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body.dark-theme #lk-container [style*="color: #2c3e50"],
body.dark-theme #lk-container [style*="color:#2c3e50"],
body.dark-theme #lk-container [style*="color: #7f8c8d"],
body.dark-theme #lk-container [style*="color:#7f8c8d"],
body.dark-theme #lk-container [style*="color: #8e44ad"],
body.dark-theme #lk-container [style*="color:#8e44ad"],
body.dark-theme #lk-container [style*="color: #c0392b"],
body.dark-theme #lk-container [style*="color:#c0392b"],
body.dark-theme #lk-container [style*="color: #27ae60"],
body.dark-theme #lk-container [style*="color:#27ae60"],
body.dark-theme #lk-container [style*="color: #f39c12"],
body.dark-theme #lk-container [style*="color:#f39c12"] {
    color: #FFFFFF !important;
}

body.dark-theme #lk-container .action-btn {
    background-color: #D4FF19 !important;
    color: #000000 !important;
}

body.dark-theme #lk-container .action-btn:hover {
    background-color: #C2E617 !important;
}

body.dark-theme #lk-container .logout-btn {
    border-color: #D4FF19 !important;
    color: #D4FF19 !important;
}

body.dark-theme #lk-container .logout-btn:hover {
    background-color: #D4FF19 !important;
    color: #000000 !important;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    color: #000000;
}

h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
}

/* Шапка сайта */
header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Логотип */
.logo {
    font-weight: 700;
    font-size: 1.8em;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo-icon {
    height: 55px;
    width: auto;
}

.logo span {
    color: #000000;
}

/* Навигация */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

nav ul li {
    margin-left: 25px;
}

nav a {
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #9CC211; /* Темный лайм для светлого фона */
}

nav .nav-theory-link {
    color: #000000;
    font-weight: 700;
}

body.dark-theme nav .nav-theory-link {
    color: #FFFFFF !important;
}

/* --- Главный блок (Hero) --- */
.hero {
    background-image: url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-color: #000000; 
    color: #fff;
    text-align: center;
    padding: 120px 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
}

/* Затемняющий слой */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); 
    z-index: -1;
}

.hero-school-name {
    font-size: 4em;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.hero-slogan {
    font-size: 1.6em;
    color: #FFFFFF;
    opacity: 0.95;
    margin-bottom: 45px;
    font-weight: 400;
    letter-spacing: 1px;
}

.cta-button {
    background-color: #D4FF19;
    color: #000000;
    padding: 18px 38px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 1.1em;
}

.cta-button:hover {
    background-color: #C2E617;
    transform: translateY(-3px);
}

/* --- СТИЛИ ДЛЯ ВКЛАДОК --- */
.tabs-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tab-btn {
    background-color: #FFFFFF;
    border: 2px solid #000000;
    color: #000000;
    padding: 12px 30px;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

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

.tab-btn.active {
    background-color: #D4FF19;
    color: #000000;
    border-color: #000000;
}

.tab-content {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ЗАГОЛОВКИ И КАРТОЧКИ --- */
.category-title {
    width: 100%;
    text-align: left;
    font-size: 1.8em;
    margin-top: 40px;
    margin-bottom: 25px;
    color: #000000;
    border-left: 5px solid #D4FF19;
    padding-left: 15px;
    font-weight: 700;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.service-card {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #EEEEEE;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.service-card h3 {
    margin-top: 0;
    color: #000000;
}

.service-card.highlight {
    border-top: 5px solid #D4FF19;
}

.card-icon {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
    line-height: 1;
}

/* Остальные секции */
main section { padding: 60px 0; }
.about { background-color: #FFFFFF; }
.about p { max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.1em; color: #000000; }

.review { background: #FFFFFF; padding: 25px; border-left: 5px solid #D4FF19; margin: 0; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); width: 100%; box-sizing: border-box; }
.review blockquote { margin: 0; font-style: italic; color: #000000; }
.review cite { display: block; margin-top: 10px; font-weight: 700; text-align: right; color: #666666; }

.contact { background-color: #000000; color: #FFFFFF; text-align: center; }
.contact h2 { color: #FFFFFF; }
.contact p { font-size: 1.1em; color: #CCCCCC; }
.contact-info a { color: #D4FF19; text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }

/* Форма */
.booking-form { max-width: 600px; margin: 30px auto; background: rgba(255,255,255,0.05); padding: 30px; border-radius: 10px; border: 1px solid #333333; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 12px; border: 1px solid #CCCCCC; border-radius: 5px; font-family: 'Montserrat', sans-serif; box-sizing: border-box; background: #FFFFFF; color: #000000; }
.form-textarea { min-height: 80px; resize: vertical; }
.submit-btn { background-color: #D4FF19; color: #000000; padding: 15px 30px; border: none; border-radius: 5px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; width: 100%; font-size: 1.1em; transition: background-color 0.3s ease; }
.submit-btn:hover { background-color: #C2E617; }
.submit-btn:disabled { background-color: #666666; cursor: not-allowed; }
#form-message { margin-top: 15px; text-align: center; font-weight: bold; }

.email-copy-container { position: relative; display: inline-block; }
.email-copy { cursor: pointer; color: #D4FF19; text-decoration: none; transition: all 0.3s ease; padding: 5px 10px; border-radius: 3px; }
.email-copy:hover { background-color: rgba(212, 255, 25, 0.1); }
.copy-notification { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #D4FF19; color: #000000; padding: 8px 12px; border-radius: 5px; font-size: 0.9em; white-space: nowrap; margin-bottom: 10px; opacity: 0; transition: opacity 0.3s ease; z-index: 1000; pointer-events: none; }
.copy-notification.show { opacity: 1; }
.copy-notification::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #D4FF19; }

footer { background-color: #000000; color: #FFFFFF; text-align: center; padding: 20px 0; }

/* Слайдер */
.slider-container { max-width: 800px; margin: 0 auto; position: relative; overflow: hidden; padding: 20px 0; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.review-slide { min-width: 100%; box-sizing: border-box; padding: 0 50px; display: flex; align-items: center; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: #FFFFFF; color: #000000; border: 2px solid #000000; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2em; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; user-select: none; }
.slider-btn:hover { background-color: #D4FF19; color: #000000; border-color: #000000; }
.prev-btn { left: 0; }
.next-btn { right: 0; }

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px; 
}

/* Убедимся, что контейнер шапки работает правильно */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Настройки для планшетов и телефонов */
@media (max-width: 980px) {
    /* Показываем кнопку-бутерброд */
    .mobile-menu-btn { display: block !important; }
    
    /* Делаем меню аккуратным боковым окошком */
    nav {
        display: none; 
        position: absolute;
        top: 65px;
        right: 20px;
        width: 220px; 
        background-color: #FFFFFF;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        border-radius: 12px; 
        padding: 10px 0;
        z-index: 100;
        border-top: none; 
    }

    /* Цвета окошка для тёмной темы */
    body.dark-theme nav {
        background-color: #0A0A0A;
        box-shadow: 0 10px 25px rgba(255,255,255,0.05);
        border: 1px solid #222222;
    }

    /* Включаем видимость при нажатии */
    nav.active { display: block !important; }

    /* Выстраиваем ссылки внутри окошка */
    nav ul { 
        flex-direction: column !important;
        margin: 0; 
        padding: 0;
        align-items: flex-start; 
    }

    nav ul li { 
        margin: 0; 
        width: 100%;
    }

    nav ul li a {
        display: block;
        padding: 12px 20px; 
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Легкая подсветка пунктов меню при наведении */
    nav ul li a:hover {
        background-color: rgba(212, 255, 25, 0.2);
    }
    body.dark-theme nav ul li a:hover {
        background-color: rgba(212, 255, 25, 0.15);
    }
}

    .hero-school-name { font-size: 2.5em; }
    .hero-slogan { font-size: 1.1em; }
    .form-row { grid-template-columns: 1fr; }
    .booking-form { padding: 20px; margin: 20px auto; }
    .category-title { text-align: center; border-left: none; border-bottom: 3px solid #D4FF19; padding-bottom: 10px; padding-left: 0; margin-top: 30px; }
    .slider-btn { width: 35px; height: 35px; font-size: 1em; }
    .slider-container { padding: 0 35px; }

/* ========================================================
   СИСТЕМА КАБИНЕТА, РОЛЕЙ И АВТОРИЗАЦИИ
   ======================================================== */

/* Кнопка в меню */
.auth-nav-btn {
    background-color: #000000;
    color: #D4FF19;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.profile-badge {
    background-color: #000000;
    color: #D4FF19;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.8em;
    transition: 0.3s;
}

.profile-badge:hover {
    background-color: #333333;
}

.auth-nav-btn:hover {
    background-color: #333333;
    transform: scale(1.05);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin-top: 0;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5E7EB;
    transition: 0.4s;
    border-radius: 999px;
}

body.dark-theme .theme-slider {
    background-color: #333333;
}

.theme-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.theme-slider:after {
    content: "☀";
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #FFCC00;
    transition: 0.4s;
}

body.dark-theme .theme-slider:after {
    content: "🌙";
    color: #FFFFFF;
}

body.dark-theme .theme-slider:before {
    background-color: #FFFFFF;
}

.theme-switch input:checked + .theme-slider {
    background-color: #000000;
}

body.dark-theme .theme-switch input:checked + .theme-slider {
    background-color: #D4FF19;
}

.theme-switch input:checked + .theme-slider:before {
    transform: translateX(20px);
}

.theme-switch input:checked + .theme-slider:after {
    left: calc(100% - 12px);
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background: #FFFFFF;
    margin: 10% auto;
    padding: 40px 30px 30px;
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Кнопка закрытия модального окна */
.close-modal {
    position: absolute;
    right: 15px; 
    top: 5px; 
    font-size: 32px; 
    cursor: pointer;
    color: #999999;
    z-index: 10;
    line-height: 1; 
}

/* Личные кабинеты */
.lk-section {
    padding: 60px 0;
    background-color: #FFFFFF;
    min-height: 70vh;
}

/* Стили для таблицы Админа */
.admin-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 15px; 
    font-size: 0.9em; 
}
.admin-table th, .admin-table td { 
    padding: 12px 15px; 
    border-bottom: 1px solid #EEEEEE; 
    text-align: left; 
}
.admin-table th { 
    background-color: #F0F0F0; 
    color: #000000; 
    font-weight: 700; 
}
.admin-table tr:hover { 
    background-color: #F9F9F9; 
}

/* Кнопки внутри кабинетов */
.logout-btn { 
    cursor: pointer; 
    padding: 8px 15px; 
    border: 1px solid #000000; 
    color: #000000; 
    background: none; 
    border-radius: 5px; 
    font-weight: bold; 
    transition: 0.3s; 
}
.logout-btn:hover { 
    background: #000000; 
    color: #D4FF19; 
}

.action-btn { 
    background-color: #000000; 
    color: #D4FF19; 
    border: none; 
    padding: 6px 12px; 
    border-radius: 5px; 
    cursor: pointer; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
    font-size: 0.8em; 
    transition: 0.3s; 
}
.action-btn:hover { 
    background-color: #333333; 
    transform: scale(1.05); 
}

/* ========================================================
   ОКОШКИ ДЛЯ ВКЛАДОК (СВЕТЛАЯ И ТЁМНАЯ ТЕМА)
   ======================================================== */

#auth-tabs-header {
    display: flex;
    gap: 12px; 
    background: transparent !important;
    border-bottom: none !important;
    margin-bottom: 25px;
}

/* --- СВЕТЛАЯ ТЕМА --- */
#auth-tabs-header .tab-btn {
    border-radius: 8px !important; 
    background-color: #F0F0F0 !important; 
    color: #666666 !important; 
    border: none !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

#auth-tabs-header .tab-btn:hover {
    background-color: #E0E0E0 !important; 
    color: #000000 !important;
}

#auth-tabs-header .tab-btn.active {
    background-color: #D4FF19 !important; 
    color: #000000 !important;
    box-shadow: 0 4px 10px rgba(212, 255, 25, 0.4) !important; 
}

/* --- ТЁМНАЯ ТЕМА --- */
body.dark-theme #auth-tabs-header .tab-btn {
    background-color: #0A0A0A !important; 
    color: #999999 !important;
}

body.dark-theme #auth-tabs-header .tab-btn:hover {
    background-color: #111111 !important; 
    color: #FFFFFF !important;
}

body.dark-theme #auth-tabs-header .tab-btn.active {
    background-color: #D4FF19 !important; 
    color: #000000 !important;
    box-shadow: 0 4px 10px rgba(212, 255, 25, 0.2) !important; 
}

/* Меняем цвет боковой линии у заголовков категорий в тёмной теме */
body.dark-theme .category-title {
    border-left-color: #D4FF19 !important; 
    border-bottom-color: #D4FF19 !important;
}

/* Кнопка мобильного меню (скрыта на ПК) */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 32px;
    color: #000000;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transform: translateY(-3px);
}

body.dark-theme .mobile-menu-btn {
    color: #FFFFFF;
}

/* Исправление узких отзывов на мобильных экранах */
@media (max-width: 768px) {

    .slider-container {
        padding: 20px 0 !important;
    }
    
    .review-slide {
        padding: 0 40px !important; 
    }
    
    .review {
        padding: 15px !important; 
    }
}

/* ========================================================
   КОМПАКТНАЯ ШАПКА ДЛЯ МОБИЛЬНЫХ ТЕЛЕФОНОВ
   ======================================================== */
@media (max-width: 768px) {
    .logo-icon {
        height: 42px !important; 
    }
    
    .logo {
        font-size: 1.4em !important; 
        gap: 8px !important; 
    }

    header .container {
        gap: 15px !important; 
    }

    .header-controls {
        gap: 10px !important; 
    }

    .auth-nav-btn {
        padding: 6px 14px !important;
        font-size: 0.9em !important;
    }
}

/* ========================================================
   ИДЕАЛЬНЫЙ БЕСШОВНЫЙ ПЕРЕХОД (С ЗАПАСОМ БЕЛОГО ВНИЗУ)
   ======================================================== */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; 
    
    /* Достигаем 100% белого на отметке 92%, чтобы полностью скрыть шов */
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.02) 20%, 
        rgba(255, 255, 255, 0.08) 35%, 
        rgba(255, 255, 255, 0.20) 50%, 
        rgba(255, 255, 255, 0.40) 65%, 
        rgba(255, 255, 255, 0.70) 78%, 
        rgba(255, 255, 255, 0.95) 88%, 
        #FFFFFF 92%, /* Полный белый начинается чуть раньше края */
        #FFFFFF 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* То же самое для тёмной темы, растворяем в чёрный */
body.dark-theme .hero::after {
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0.02) 20%, 
        rgba(0, 0, 0, 0.08) 35%, 
        rgba(0, 0, 0, 0.20) 50%, 
        rgba(0, 0, 0, 0.40) 65%, 
        rgba(0, 0, 0, 0.70) 78%, 
        rgba(0, 0, 0, 0.95) 88%, 
        #000000 92%, 
        #000000 100%
    );
}

/* ========================================================
   ИДЕАЛЬНЫЙ БЕСШОВНЫЙ ПЕРЕХОД К КОНТАКТАМ (220px)
   ======================================================== */
.contact {
    position: relative; 
    padding-top: 220px !important; /* Слегка увеличили высоту для мягкости */
}

.contact::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 220px; 
    
    /* Ультра-плавный градиент: долго держим края почти без изменений */
    background: linear-gradient(
        to bottom, 
        #FFFFFF 0%, 
        #FCFCFC 12%, 
        #F5F5F5 24%, 
        #E8E8E8 36%, 
        #D1D1D1 48%, 
        #A6A6A6 62%, 
        #666666 74%, 
        #262626 86%, 
        #050505 95%, 
        #000000 100%
    );
    pointer-events: none; 
}

/* В тёмной теме этот переход не нужен */
body.dark-theme .contact::before {
    display: none;
}

/* =1. СБРОС СИНИХ И ОРАНЖЕВЫХ РАМОК = */
.last-lesson-card, 
div[class*="lesson"], 
.dashboard-card:first-child {
    border-color: #E5E7EB !important;
    border-top: 4px solid #D4FF19 !important;
}

/* Рамка для блока "Твои занятия" (убираем оранжевую, делаем нейтральную/лаймовую) */
.schedule-card, 
div[class*="schedule"],
.dashboard-card:last-of-type {
    border-top: 4px solid #D4FF19 !important;
}

/* Шкала прогресса */
.progress-bar-fill, 
div[class*="progress"] {
    background-color: #D4FF19 !important;
}


/* = 2. ТЁМНАЯ ТЕМА (ПРИНУДИТЕЛЬНО) = */
body.dark-theme .profile-card,
body.dark-theme .dashboard-card,
body.dark-theme div[class*="card"],
body.dark-theme .stat-box {
    background-color: #121212 !important;
    border-color: #262626 !important;
    color: #FFFFFF !important;
}

/* Текст внутри карточек в тёмной теме */
body.dark-theme h3, 
body.dark-theme p, 
body.dark-theme span,
body.dark-theme div {
    color: #FFFFFF;
}

/* Исключение для цифр статистики в тёмной теме — делаем их лаймовыми */
body.dark-theme .stat-number,
body.dark-theme span[class*="stat"] {
    color: #D4FF19 !important;
}

/* ========================================================
   ЖЕСТКОЕ ИСПРАВЛЕНИЕ ХОВЕРА ДЛЯ ВКЛАДОК (ТЁМНАЯ ТЕМА)
   ======================================================== */

/* 1. Поведение при наведении на неактивную вкладку */
body.dark-theme #booking-tabs .tab-btn:hover {
    background-color: #2A2A2A !important; /* Делаем фон чуть светлее черного */
    color: #FFFFFF !important; /* Текст железобетонно белый */
    border-color: #555555 !important;
}

/* 2. Поведение активной вкладки (защищаем её от перекрашивания) */
body.dark-theme #booking-tabs .tab-btn.active,
body.dark-theme #booking-tabs .tab-btn.active:hover {
    /* Судя по вашему скриншоту, вы всё-таки оставили лаймовый цвет */
    background-color: #D4FF19 !important; 
    color: #000000 !important; /* Текст на лаймовом всегда черный */
    border-color: #D4FF19 !important;
}

/* ========================================================
   БЛОК ЦЕН (PRICING)
   ======================================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; /* Увеличен отступ, чтобы плашка "Хит" не наезжала на другие элементы */
    align-items: center; 
    margin-top: 30px;
}

.pricing-card {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

.pricing-card h3 {
    margin-top: 0;
    font-size: 1.4em;
    color: #000000;
}

.price {
    font-size: 2.5em;
    font-weight: 700;
    color: #000000;
    margin: 15px 0 5px;
}

.price span {
    font-size: 0.4em;
    color: #7f8c8d;
    font-weight: 400;
}

/* Блок "за урок/за месяц" (Базовый стиль для 1 и 3 тарифа) */
.price-per-lesson {
    background: #F1F2F6;
    color: #000000;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
    border: 1px solid #E5E7EB; /* Аккуратная граница */
    box-shadow: none; /* Убиваем любые старые тени */
}

/* Оранжевый акцент для группы (Стиль как у бейджа ХИТ) */
.price-per-lesson.accent {
    background: #FF8C00;
    color: #000000;
    border: none;
}

.pricing-desc {
    font-size: 0.9em;
    color: #666666;
    margin-bottom: 20px;
    min-height: 40px;
}

/* Итоговая сумма */
.pricing-total {
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

.pricing-features li {
    margin-bottom: 12px;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-features li.disabled {
    opacity: 0.5;
    text-decoration: line-through;
}

/* --- ВЫДЕЛЕНИЕ ХИТА ПРОДАЖ --- */
.hit-card {
    border: 3px solid #FF8C00;
    transform: scale(1.05); 
    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.15);
    z-index: 2;
}

.hit-card:hover {
    transform: scale(1.05) translateY(-5px);
}

.hit-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF8C00;
    color: #000000;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8em;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- ТЁМНАЯ ТЕМА ДЛЯ ЦЕН (Принудительное перекрашивание) --- */
body.dark-theme .pricing-card {
    background: #0A0A0A !important;
    border-color: #333333 !important;
}

body.dark-theme .pricing-card h3,
body.dark-theme .price {
    color: #FFFFFF !important;
}

body.dark-theme .pricing-desc {
    color: #CCCCCC !important;
}

body.dark-theme .pricing-total {
    color: #FFFFFF !important;
}

body.dark-theme .price-per-lesson {
    background: #222222 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}

body.dark-theme .price-per-lesson.accent {
    background: #FF8C00 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .hit-card {
    background: #111111 !important;
    border-color: #FF8C00 !important;
}

/* ========================================================
   ЛАЙМОВЫЙ ЦВЕТ ТОЛЬКО ДЛЯ ВКЛАДОК НАВИГАЦИИ
   ======================================================== */

/* Для светлой темы */
#booking-tabs .tab-btn.active,
#pricing-tabs .tab-btn.active {
    background-color: #D4FF19 !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

/* Для тёмной темы */
body.dark-theme #booking-tabs .tab-btn.active,
body.dark-theme #booking-tabs .tab-btn.active:hover,
body.dark-theme #pricing-tabs .tab-btn.active,
body.dark-theme #pricing-tabs .tab-btn.active:hover {
    background-color: #D4FF19 !important; 
    color: #000000 !important; 
    border-color: #D4FF19 !important;
    box-shadow: 0 4px 15px rgba(212, 255, 25, 0.2) !important; /* Лёгкое лаймовое свечение */
}

@media (max-width: 900px) {
    .pricing-grid {
        align-items: stretch;
        gap: 50px; 
    }
    .hit-card {
        transform: none;
    }
    .hit-card:hover {
        transform: translateY(-5px);
    }
}

/* ========================================================
   ЖЁСТКОЕ УДАЛЕНИЕ ЗЕЛЁНОЙ ДУГИ В ТАРИФАХ
   ======================================================== */

/* Явно перебиваем свойство border-top для светлой темы */
.pricing-grid div.price-per-lesson {
    border-top: 1px solid #E5E7EB !important; 
    border: 1px solid #E5E7EB !important; 
}

/* Для оранжевой плашки рамки вообще отключаем */
.pricing-grid div.price-per-lesson.accent {
    border-top: none !important;
    border: none !important;
}

/* Явно перебиваем свойство border-top для тёмной темы */
body.dark-theme .pricing-grid div.price-per-lesson {
    border-top: 1px solid #333333 !important;
    border: 1px solid #333333 !important;
}

body.dark-theme .pricing-grid div.price-per-lesson.accent {
    border-top: none !important;
    border: none !important;
}

/* ========================================================
   ОБНОВЛЕНИЕ ЛИЧНОГО КАБИНЕТА (СВЕТЛАЯ И ТЁМНАЯ ТЕМЫ)
   ======================================================== */

/* --- 1. СВЕТЛАЯ ТЕМА (Убиваем старую "радугу") --- */

/* Аватар */
#student-avatar {
    background-color: #000000 !important;
    color: #D4FF19 !important;
}

/* Имя ученика и цветные заголовки (синий -> черный) */
#student-name,
#lk-container .lk-card div[style*="color:#3498db"] {
    color: #000000 !important;
}

/* Кнопка "Профиль" */
#edit-profile-btn {
    background-color: #000000 !important;
    color: #D4FF19 !important;
    border: none !important;
}
#edit-profile-btn:hover {
    background-color: #333333 !important;
}

/* Верхние цветные рамки карточек (Последний урок, Твои занятия) */
#lk-container .lk-card[style*="border-top"] {
    border-top: 5px solid #D4FF19 !important;
}

/* Фон карточки "Последний урок" (убираем голубой градиент) */
#lk-container .lk-card[style*="background:linear-gradient"] {
    background: #FAFAFA !important;
}

/* Статистика: убираем цветные цифры, делаем строгими черными */
#student-stats > div > div:first-child {
    color: #000000 !important;
}

/* Шкала прогресса (зеленый -> лаймовый) */
#student-progress-fill {
    background-color: #D4FF19 !important;
}


/* --- 2. ТЁМНАЯ ТЕМА (Добавляем глубину, контраст и читаемость) --- */

/* Делаем сами карточки чуть светлее фона, чтобы они выделялись */
body.dark-theme #lk-container .lk-card {
    background-color: #121212 !important; 
    border: 1px solid #262626 !important;
}

/* Текст имени и заголовков */
body.dark-theme #student-name,
body.dark-theme #lk-container .lk-card div[style*="color:#3498db"] {
    color: #FFFFFF !important;
}

/* Плашки со статистикой */
body.dark-theme #student-stats > div {
    background-color: #1A1A1A !important;
    border: 1px solid #333333 !important;
}

/* Акцентные лаймовые цифры в статистике для тёмной темы */
body.dark-theme #student-stats > div > div:first-child {
    color: #D4FF19 !important;
}

/* Фон (трек) для шкалы прогресса */
body.dark-theme .lk-card > div[style*="background:#eee"] {
    background-color: #333333 !important;
}

/* Сама заполненная шкала прогресса */
body.dark-theme #student-progress-fill {
    background-color: #D4FF19 !important;
}

/* Мелкий текст под статистикой */
body.dark-theme #student-stats > div > div:last-child {
    color: #999999 !important;
}

/* Внутренние блоки (например, списки прошлых уроков) */
body.dark-theme #student-lesson-content > div {
    background-color: #1A1A1A !important;
    border: 1px solid #333333 !important;
}

/* Теги времени/даты внутри прошлых уроков */
body.dark-theme #student-lesson-content span[style*="background: #ecf0f1"] {
    background-color: #333333 !important;
    color: #CCCCCC !important;
}

/* ========================================================
   ФИНАЛЬНАЯ ЗАЧИСТКА КАБИНЕТА В ТЁМНОЙ ТЕМЕ
   ======================================================== */

/* 1. Убираем чёрные полосы-фоны у текста внутри карточек */
body.dark-theme #lk-container .lk-card h3,
body.dark-theme #lk-container .lk-card h4,
body.dark-theme #lk-container .lk-card p,
body.dark-theme #lk-container .lk-card span,
body.dark-theme #lk-container .lk-card div[style*="text-transform:uppercase"] {
    background-color: transparent !important; /* Делаем фон текста прозрачным */
}

body.dark-theme #lk-container .lk-card.span-2 div {
    background-color: transparent !important;
}

/* 2. Возвращаем лаймовый цвет ПЕРВОЙ цифре в статистике */
body.dark-theme #student-stats > div > div:first-child,
body.dark-theme #lk-container .lk-card div[style*="font-size:1.6em"] {
    color: #D4FF19 !important;
}

/* ========================================================
   СТИЛИ АКЦИОННОГО БАННЕРА
   ======================================================== */
.promo-banner-section h3 {
    color: #000000 !important;
}

body.dark-theme .promo-banner-section h3 {
    color: #FFFFFF !important;
}

/* ========================================================
   ИСПРАВЛЕНИЕ ЦВЕТА ТЕКСТА В АКЦИОННОМ БАННЕРЕ
   ======================================================== */
.promo-banner-section .promo-text {
    color: #2D4A00 !important; /* Насыщенный тёмно-оливковый/зелёный для светлой темы */
}

body.dark-theme .promo-banner-section .promo-text {
    color: #D4FF19 !important; /* Яркий лаймовый для тёмной темы */
}

/* ========================================================
   НАТИВНЫЙ АККОРДЕОН FAQ (<details> / <summary>)
   ======================================================== */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #0A0A0A;
    border: 1px solid #222222;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: border-color 0.3s ease;
}

/* Подсветка рамки при наведении и при открытии */
.faq-item:hover,
.faq-item[open] {
    border-color: #D4FF19;
}

#faq .faq-accordion {
    background-color: transparent !important;
    color: #FFFFFF !important;
    cursor: pointer;
    padding: 20px 24px !important;
    width: 100% !important;
    border: none !important;
    text-align: left !important;
    outline: none !important;
    font-size: 1.15em !important;
    font-weight: 700 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px;
    font-family: 'Montserrat', sans-serif !important;
    list-style: none; /* Убираем дефолтный маркер списка в браузерах */
}

/* Убираем стандартную галочку в Chrome/Safari */
#faq .faq-accordion::-webkit-details-marker {
    display: none;
}

/* Иконка +/-: отдельный span, текст которого меняет JS
   (событие "toggle" у <details>) — надёжнее, чем content
   через ::after на <summary>, который в части браузеров
   отрисовывается нестабильно */
#faq .faq-icon {
    flex-shrink: 0;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1;
    color: #D4FF19;
}

#faq .faq-panel {
    padding: 0 24px 24px 24px !important;
    color: #CCCCCC !important;
    font-size: 1.05em !important;
}

#faq .faq-panel p {
    margin: 0 !important;
    color: #CCCCCC !important;
}