/* ========== ГОЛОВНИЙ БЛОК СТОРІНКИ КУРСІВ ========== */
.courses-hero {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--white) 100%);
    padding: 140px 5% 30px; /* ЗМЕНШЕНО знизу з 80px до 30px */
    text-align: center;
    min-height: 50vh; /* ЗМЕНШЕНО з 60vh до 50vh */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* СТАТИСТИКА В ГОЛОВНОМУ БЛОЦІ */
/* Цей блок показує цифри: кількість випускників, відсоток результату тощо */
.hero-stats {
    display: flex; /* Розташування елементів в ряд */
    justify-content: center; /* Центрування по горизонталі */
    gap: 3rem; /* Відстань між елементами статистики */
    margin-top: 2rem; /* Відступ зверху */
    flex-wrap: wrap; /* Перенос на новий рядок на маленьких екранах */
}

.stat-item {
    text-align: center; /* Центрування тексту */
}

.stat-number {
    display: block; /* Кожен елемент з нового рядка */
    font-size: 2.5rem; /* ЗМІНИТИ РОЗМІР ЦИФР: збільшіть або зменшіть значення */
    font-weight: bold; /* Жирний шрифт */
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ЦИФР: замініть на інший колір */
    margin-bottom: 0.5rem; /* Відступ знизу */
}

.stat-label {
    font-size: 0.9rem; /* ЗМІНИТИ РОЗМІР ПІДПИСІВ: збільшіть або зменшіть */
    color: var(--text-light); /* ЗМІНИТИ КОЛІР ПІДПИСІВ */
}

/* ========== КОНТЕЙНЕР КУРСІВ ========== */
/* Основний контейнер що містить всі елементи сторінки курсів */
.courses-container {
    max-width: 1400px; /* ЗМІНИТИ МАКСИМАЛЬНУ ШИРИНУ: збільшіть для ширшого макету */
    margin: 0 auto; /* Центрування контейнера */
    padding: 20px 5%; /* Відступи: зверху/знизу 60px, з боків 5% */
}

/* ========== ФІЛЬТРИ КУРСІВ ========== */
/* Кнопки для фільтрації курсів за категоріями */
.courses-filters {
    display: flex; /* Розташування кнопок в ряд */
    justify-content: center; /* Центрування кнопок */
    gap: 1rem; /* Відстань між кнопками */
    margin: 3rem 0; /* Відступи зверху та знизу */
    flex-wrap: wrap; /* Перенос кнопок на новий рядок */
}

.filter-btn {
    background: var(--white); /* ЗМІНИТИ ФОНОВИЙ КОЛІР КНОПОК */
    color: var(--text-dark); /* ЗМІНИТИ КОЛІР ТЕКСТУ КНОПОК */
    border: 2px solid var(--secondary-color); /* ЗМІНИТИ КОЛІР РАМКИ */
    padding: 0.8rem 1.5rem; /* Внутрішні відступи кнопки */
    border-radius: 25px; /* ЗМІНИТИ ЗАКРУГЛЕНІСТЬ: збільшіть для більш круглих кнопок */
    cursor: pointer; /* Курсор-рука при наведенні */
    font-weight: 500; /* Товщина шрифту */
    transition: all 0.3s; /* Плавні переходи при зміні стану */
    font-size: 0.9rem; /* ЗМІНИТИ РОЗМІР ШРИФТУ КНОПОК */
}

/* АКТИВНА КНОПКА ФІЛЬТРА */
.filter-btn.active {
    background: var(--primary-color); /* ЗМІНИТИ КОЛІР АКТИВНОЇ КНОПКИ */
    color: var(--white); /* Колір тексту активної кнопки */
    border-color: var(--primary-color); /* Колір рамки активної кнопки */
}

/* ЕФЕКТ ПРИ НАВЕДЕННІ НА КНОПКУ */
.filter-btn:hover {
    background: var(--primary-color); /* ЗМІНИТИ КОЛІР ПРИ ХОВЕРІ */
    color: var(--white);
    border-color: var(--primary-color);
    transform: translateY(-2px); /* Підйом кнопки на 2px */
}

/* ========== СІТКА КУРСІВ ========== */
/* Розташування карток курсів */
.courses-grid {
    display: grid; /* Сіткова розкладка */
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); 
    /* ЗМІНИТИ МІНІМАЛЬНУ ШИРИНУ КАРТОК: замініть 380px на іншу ширину */
    gap: 1.5rem; /* ЗМІНИТИ ВІДСТАНЬ МІЖ КАРТКАМИ: збільшіть або зменшіть */
    margin: 3rem 0; /* Відступи зверху та знизу сітки */
}

/* ========== КАРТКА КУРСУ ========== */
/* Основні стилі для кожної картки курсу */
.course-card {
    background: var(--white); /* ЗМІНИТИ ФОНОВИЙ КОЛІР КАРТОК */
    border-radius: 25px; /* ЗМІНИТИ ЗАКРУГЛЕНІСТЬ КАРТОК: збільшіть для більш круглих */
    overflow: hidden; /* Приховує вміст що виходить за межі */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* ЗМІНИТИ ТІНЬ: змініть значення для іншої тіні */
    transition: all 0.3s ease; /* Плавні переходи */
    border: 3px solid transparent; /* Прозора рамка (з'являється при ховері) */
    position: relative; /* Для позиціонування бейджів */
}

/* ЕФЕКТ ПРИ НАВЕДЕННІ НА КАРТКУ */
.course-card:hover {
    transform: translateY(-8px) scale(1.02); /* Підйом та легке збільшення */
    box-shadow: 0 25px 50px rgba(0,0,0,0.15); /* Більша тінь при ховері */
    border-color: var(--primary-color); /* ЗМІНИТИ КОЛІР РАМКИ ПРИ ХОВЕРІ */
}

/* ОСОБЛИВА КАРТКА (FEATURED) */
/* Для виділення топових курсів */
.course-card.featured {
    border: 3px solid var(--accent-color); /* ЗМІНИТИ КОЛІР РАМКИ ТОПОВОГО КУРСУ */
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%); /* Легкий градієнт */
}

/* ПРОСУНУТА КАРТКА */
.course-card.advanced {
    border: 3px solid #8b5cf6; /* ЗМІНИТИ КОЛІР РАМКИ ПРОСУНУТОГО КУРСУ */
}

/* ========== БЕЙДЖ КУРСУ ========== */
/* Мітка в правому верхньому куті картки */
.course-badge {
    position: absolute; /* Абсолютне позиціонування */
    top: 1rem; /* Відстань від верху */
    right: 1rem; /* Відстань від правого краю */
    background: var(--accent-color); /* ЗМІНИТИ КОЛІР БЕЙДЖА */
    color: var(--white); /* Колір тексту бейджа */
    padding: 0.4rem 0.8rem; /* Внутрішні відступи */
    border-radius: 15px; /* ЗМІНИТИ ЗАКРУГЛЕНІСТЬ БЕЙДЖА */
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР ШРИФТУ БЕЙДЖА */
    font-weight: bold; /* Жирний шрифт */
    z-index: 10; /* Шар поверх інших елементів */
}

/* ========== ЗОБРАЖЕННЯ КУРСУ ========== */
/* Верхня частина картки з іконкою */
.course-image {
    height: 120px; /* ЗМІНИТИ ВИСОТУ ЗОБРАЖЕННЯ */
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    /* ЗМІНИТИ ГРАДІЄНТ ФОНУ: замініть кольори на інші */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Для позиціонування рівня */
    color: var(--white); /* Колір іконки */
}

/* ІКОНКА КУРСУ */
.course-icon {
    font-size: 2.5rem; /* ЗМІНИТИ РОЗМІР ІКОНКИ: збільшіть або зменшіть */
    margin-bottom: 0.3rem;
}

/* РІВЕНЬ СКЛАДНОСТІ КУРСУ */
.course-level {
    position: absolute; /* Абсолютне позиціонування */
    bottom: 1rem; /* Відстань від низу */
    left: 1rem; /* Відстань від лівого краю */
    background: rgba(255,255,255,0.2); /* Напівпрозорий білий фон */
    color: var(--white); /* Колір тексту */
    padding: 0.3rem 0.8rem; /* Внутрішні відступи */
    border-radius: 15px; /* Закругленість */
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР ШРИФТУ РІВНЯ */
    font-weight: bold;
}

/* ========== КОНТЕНТ КАРТКИ ========== */
/* Нижня частина картки з текстом та кнопками */
.course-content {
    padding: 1.2rem; /* ЗМІНИТИ ВНУТРІШНІ ВІДСТУПИ: збільшіть для більшого простору */
}

/* ЗАГОЛОВОК КУРСУ */
.course-content h3 {
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ЗАГОЛОВКА */
    font-size: 1.3rem; /* ЗМІНИТИ РОЗМІР ЗАГОЛОВКА */
    margin-bottom: 0.3rem; /* Відступ знизу */
    font-weight: bold;
	line-height: 1.3;
}

/* ПІДЗАГОЛОВОК КУРСУ */
.course-subtitle {
    color: var(--accent-color); /* ЗМІНИТИ КОЛІР ПІДЗАГОЛОВКА */
    font-weight: 500;
    margin-bottom: 0.8rem; /* Відступ знизу */
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР ПІДЗАГОЛОВКА */
	line-height: 1.2; /* ЗМЕНШЕНА міжрядкова відстань */
}

/* ОПИС КУРСУ */
.course-description {
    color: var(--text-light); /* ЗМІНИТИ КОЛІР ОПИСУ */
    line-height: 1.6; /* Міжрядковий інтервал */
    margin: 1rem 0; /* Відступи зверху та знизу */
}

.course-description p {
    font-size: 0.85rem; /* НОВИЙ параметр */
    line-height: 1.4; /* НОВИЙ параметр */
    margin: 0.8rem 0; /* НОВИЙ параметр */
}

/* ========== ОСОБЛИВОСТІ КУРСУ ========== */
.course-features {
    background: var(--secondary-color); /* ЗМІНИТИ ФОНОВИЙ КОЛІР БЛОКУ */
    border-radius: 15px; /* Закругленість */
    padding: 1rem; /* Внутрішні відступи */
    margin: 1rem 0; /* Відступи зверху та знизу */
}

.course-features h4 {
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ЗАГОЛОВКА ОСОБЛИВОСТЕЙ */
    margin-bottom: 1rem;
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР ЗАГОЛОВКА */
}

.course-features ul {
    list-style: none; /* Прибираємо стандартні маркери */
    padding: 0;
}

.course-features li {
    padding: 0.3rem 0; /* ЗАЛИШИТИ */
    border-bottom: 1px solid #e0e0e0; /* ЗАЛИШИТИ */
    position: relative; /* ЗАЛИШИТИ */
    padding-left: 1.5rem; /* ЗАЛИШИТИ */
    font-size: 0.8rem; /* ДОДАТИ */
    line-height: 1.3; /* ДОДАТИ */
}

/* ГАЛОЧКИ ПЕРЕД ПУНКТАМИ */
.course-features li:before {
    content: "✅"; /* ЗМІНИТИ ІКОНКУ: замініть на іншу */
    position: absolute;
    left: 0;
    font-size: 1rem;
}

/* ========== ІНФОРМАЦІЯ ПРО КУРС ========== */
/* Блок з тривалістю, кількістю уроків тощо */
.course-info {
    display: flex; /* Розташування в ряд */
    gap: 0.5rem; /* Відстань між елементами */
    margin: 1rem 0; /* Відступи зверху та знизу */
    flex-wrap: wrap; /* Перенос на новий рядок */
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Відстань між іконкою та текстом */
    background: var(--white); /* Фоновий колір */
    padding: 0.3rem 0.8rem; /* Внутрішні відступи */
    border-radius: 15px; /* Закругленість */
    border: 1px solid #e0e0e0; /* Тонка рамка */
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР ШРИФТУ */
	min-height: 24px; /* ДОДАНО фіксовану мінімальну висоту */
}

.info-icon {
    font-size: 1rem; /* ЗМІНИТИ РОЗМІР ІКОНОК */
}

/* ========== ЦІНА КУРСУ ========== */
/* Блок з відображенням ціни */
.course-price {
    display: flex;
    align-items: center;
    gap: 1rem; /* Відстань між елементами */
    margin: 1rem 0; /* Відступи зверху та знизу */
    flex-wrap: wrap;
}

/* СТАРА ЦІНА (ЗАКРЕСЛЕНА) */
.price-old {
    color: #999; /* ЗМІНИТИ КОЛІР СТАРОЇ ЦІНИ */
    text-decoration: line-through; /* Закреслення */
    font-size: 1rem; /* ЗМІНИТИ РОЗМІР СТАРОЇ ЦІНИ */
}

/* ПОТОЧНА ЦІНА */
.price-current {
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ПОТОЧНОЇ ЦІНИ */
    font-size: 1.5rem; /* ЗМІНИТИ РОЗМІР ПОТОЧНОЇ ЦІНИ */
    font-weight: bold;
}

/* ЗНИЖКА */
.price-discount {
    background: #dc2626; /* ЗМІНИТИ КОЛІР ФОНУ ЗНИЖКИ */
    color: var(--white);
    padding: 0.3rem 0.6rem;
    border-radius: 10px;
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР ШРИФТУ ЗНИЖКИ */
    font-weight: bold;
}

/* ========== ПОПЕРЕДЖЕННЯ ========== */
/* Для курсів що потребують консультації лікаря */
.course-warning {
    background: #fef2f2; /* ЗМІНИТИ ФОНОВИЙ КОЛІР ПОПЕРЕДЖЕННЯ */
    color: #dc2626; /* ЗМІНИТИ КОЛІР ТЕКСТУ ПОПЕРЕДЖЕННЯ */
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.warning-icon {
    font-size: 1.2rem;
}

/* ========== ЕТАПИ КУРСУ ========== */
/* Для відображення поетапного навчання */
.course-stages {
    margin: 1.5rem 0;
}

.course-stages h4 {
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ЗАГОЛОВКА ЕТАПІВ */
    margin-bottom: 1rem;
}

.stage-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--secondary-color); /* ЗМІНИТИ ФОНОВИЙ КОЛІР ЕТАПУ */
    border-radius: 10px;
}

/* НОМЕР ЕТАПУ */
.stage-number {
    background: var(--primary-color); /* ЗМІНИТИ КОЛІР НОМЕРА ЕТАПУ */
    color: var(--white);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0; /* Запобігає стисканню */
}

.stage-content h5 {
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ЗАГОЛОВКА ЕТАПУ */
    margin-bottom: 0.3rem;
}

.stage-content p {
    color: var(--text-light); /* ЗМІНИТИ КОЛІР ОПИСУ ЕТАПУ */
    font-size: 0.9rem;
}

/* ========== КНОПКИ КУРСІВ ========== */
/* Стилі для кнопок в картках курсів */
.course-btn {
    background: var(--primary-color); /* ЗМІНИТИ КОЛІР КНОПКИ */
    color: var(--white); /* ЗМІНИТИ КОЛІР ТЕКСТУ КНОПКИ */
    border: none;
    padding: 0.8rem 1.5rem; /* ЗМІНИТИ РОЗМІР КНОПКИ: збільшіть відступи */
    border-radius: 25px; /* ЗМІНИТИ ЗАКРУГЛЕНІСТЬ КНОПКИ */
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem; /* ЗМІНИТИ РОЗМІР ШРИФТУ КНОПКИ */
    transition: all 0.3s;
    width: 100%; /* Кнопка на всю ширину картки */
    margin-top: 1rem; /* Відступ зверху */
}

a.course-btn {
    display: inline-block;
    text-decoration: none;
    color: var(--white);
    text-align: center;
}

a.course-btn:hover {
    text-decoration: none;
    color: var(--white);
}

/* ОСНОВНА КНОПКА */
.course-btn.primary {
    background: var(--primary-color); /* ЗМІНИТИ КОЛІР ОСНОВНОЇ КНОПКИ */
}

/* ЕФЕКТ ПРИ НАВЕДЕННІ НА КНОПКУ */
.course-btn:hover {
    background: #1e3f1a; /* ЗМІНИТИ КОЛІР ПРИ ХОВЕРІ */
    transform: translateY(-2px); /* Підйом кнопки */
    box-shadow: 0 5px 15px rgba(45, 90, 39, 0.3); /* Тінь при ховері */
}

/* ========== ПЕРЕВАГИ НАВЧАННЯ ========== */
/* Секція з перевагами школи */
.learning-benefits {
    background: var(--secondary-color); /* ЗМІНИТИ ФОНОВИЙ КОЛІР СЕКЦІЇ */
    border-radius: 20px; /* Закругленість секції */
    padding: 2rem; /* ЗМІНИТИ ВНУТРІШНІ ВІДСТУПИ СЕКЦІЇ */
    margin: 2rem 0; /* Відступи зверху та знизу */
}

.learning-benefits h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 1.5rem; /* ЗМЕНШЕНО з 3rem */
    font-size: 1.6rem; /* ЗМЕНШЕНО розмір заголовка */
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 КОЛОНОК в один ряд */
    gap: 1rem; /* Відстань між елементами */
    margin-top: 1rem;
}

.benefit-item {
    background: var(--white); /* ЗМІНИТИ ФОНОВИЙ КОЛІР ЕЛЕМЕНТІВ */
    border-radius: 12px; /* Закругленість елементів */
    padding: 1rem; /* Внутрішні відступи */
    text-align: center; /* Центрування тексту */
    box-shadow: 0 3px 10px rgba(0,0,0,0.08); /* Тінь елементів */
    transition: transform 0.3s; /* Плавний перехід */
}

.benefit-item:hover {
    transform: translateY(-3px); /* Підйом при ховері */
}

.benefit-icon {
    font-size: 1.8rem; /* ЗМІНИТИ РОЗМІР ІКОНОК ПЕРЕВАГ */
    margin-bottom: 0.5rem;
    display: block;
}

.benefit-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 0.9rem; /* ЗМЕНШЕНО для вміщення в один ряд */
    line-height: 1.2;
}

.benefit-item p {
    color: var(--text-light); /* ЗМІНИТИ КОЛІР ТЕКСТУ ПЕРЕВАГ */
    line-height: 1.3;
    font-size: 0.75rem; /* ЗМІНИТИ РОЗМІР ТЕКСТУ */
	margin: 0;
}

/* ========== ВІДГУКИ УЧНІВ ========== */
/* Секція з відгуками */
.testimonials-section {
    margin: 2rem 0; /* Відступи зверху та знизу секції */
}

.testimonials-section h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 1.5rem; /* ЗМЕНШЕНО з 3rem */
    font-size: 1.6rem; /* ЗМЕНШЕНО розмір заголовка */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem; /* ЗМІНИТИ ВІДСТАНЬ МІЖ ВІДГУКАМИ */
}

.testimonial-card {
    background: var(--white); /* ЗМІНИТИ ФОНОВИЙ КОЛІР ВІДГУКІВ */
    border-radius: 15px; /* Закругленість карток відгуків */
    padding: 1.2rem; /* Внутрішні відступи */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Тінь карток */
    display: flex;
    gap: 0.8rem; /* Відстань між аватаром та текстом */
    transition: transform 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-3px); /* Підйом картки при ховері */
}

/* АВАТАР УЧНЯ */
.testimonial-avatar {
    font-size: 2rem; /* ЗМЕНШЕНО з 3rem */
    width: 45px; /* ЗМЕНШЕНО з 60px */
    height: 45px; /* ЗМЕНШЕНО з 60px */
    border-radius: 50%;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-content h4 {
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ІМЕНІ УЧНЯ */
    margin-bottom: 0.3rem;
    font-size: 1rem; /* ЗМІНИТИ РОЗМІР ІМЕНІ */
}

.testimonial-course {
    color: var(--accent-color); /* ЗМІНИТИ КОЛІР НАЗВИ КУРСУ */
    font-size: 0.8rem; /* ЗМІНИТИ РОЗМІР НАЗВИ КУРСУ */
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.testimonial-content p {
    color: var(--text-dark); /* ЗМІНИТИ КОЛІР ТЕКСТУ ВІДГУКУ */
    line-height: 1.4;
    margin-bottom: 0.6rem;
    font-style: italic; /* Курсивний текст */
	font-size: 0.85rem;
}

.testimonial-rating {
    font-size: 1rem; /* ЗМІНИТИ РОЗМІР ЗІРОЧОК */
	 margin: 0;
}

/* ========== FAQ СЕКЦІЯ ========== */
/* Секція з часто задаваними питаннями */
.faq-section {
    margin: 2rem 0; /* Відступи зверху та знизу */
}

.faq-container {
    max-width: 800px; /* ЗМІНИТИ МАКСИМАЛЬНУ ШИРИНУ FAQ */
    margin: 0 auto; /* Центрування контейнера */
}

.faq-section h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 1.5rem; /* ЗМЕНШЕНО з 3rem */
    font-size: 1.6rem; /* ЗМЕНШЕНО розмір заголовка */
}

.faq-item {
    background: var(--white);
    border-radius: 15px;
    margin: 0.5rem 0; /* ЗМЕНШЕНО з 1rem до 0.5rem */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* ПИТАННЯ */
.faq-question {
    background: var(--secondary-color); /* ЗМІНИТИ ФОНОВИЙ КОЛІР ПИТАННЯ */
    padding: 1rem; /* Внутрішні відступи питання */
    cursor: pointer; /* Курсор-рука */
    display: flex;
    justify-content: space-between; /* Розташування тексту та стрілки */
    align-items: center;
    font-weight: 500;
    color: var(--primary-color); /* ЗМІНИТИ КОЛІР ТЕКСТУ ПИТАННЯ */
    transition: background 0.3s; /* Плавна зміна фону */
}

.faq-question:hover {
    background: #e8efe5; /* ЗМІНИТИ КОЛІР ПРИ ХОВЕРІ НА ПИТАННЯ */
}

/* СТРІЛКА FAQ */
.faq-arrow {
    font-size: 1.2rem; /* ЗМІНИТИ РОЗМІР СТРІЛКИ */
    transition: transform 0.3s; /* Плавний поворот стрілки */
}

/* ВІДПОВІДЬ */
.faq-answer {
    display: none; /* Початково приховано */
    padding: 1.5rem; /* Внутрішні відступи відповіді */
    background: var(--white); /* ЗМІНИТИ ФОНОВИЙ КОЛІР ВІДПОВІДІ */
    color: var(--text-dark); /* ЗМІНИТИ КОЛІР ТЕКСТУ ВІДПОВІДІ */
    line-height: 1.6; /* Міжрядковий інтервал */
    border-top: 1px solid #e0e0e0; /* Тонка лінія зверху */
}

/* ========================================
   СТИЛІ ДЛЯ СТОРІНКИ postava.html
   ДОДАТИ В КІНЕЦЬ ФАЙЛУ styles-courses.css
   ======================================== */

/* Головний блок курсу */
.course-detail-hero {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--white) 100%);
    padding: 120px 5% 30px; /* ЗМЕНШИЛИ з 140px 5% 80px */
    text-align: center;
    min-height: 40vh; /* ЗМЕНШИЛИ з 70vh */
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-main-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    display: block;
}

.course-subtitle {
    font-size: 1rem;
    color: var(--accent-color);
    font-weight: 500;
    margin: 0.5rem 0;
}

.course-hero-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.hero-price-old {
    font-size: 1.5rem;
    color: #999;
    text-decoration: line-through;
}

.hero-price-current {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.hero-price-discount {
    background: #dc2626;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: bold;
}

.join-btn-main {
    background: linear-gradient(45deg, var(--accent-color), #f4a261);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin: 1rem 0;
}

.join-btn-main:hover {
    transform: translateY(-5px) scale(1.05);
}

.course-hero-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.hero-stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 15px;
}

.hero-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.3rem;
}

.hero-stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Основний контент */
.course-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 5%;
}

.course-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    margin: 1.5rem 0;
}

.course-section {
    background: var(--white);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.5rem; /* ЗМЕНШИЛИ з 2.5rem */
    margin: 1rem 0; /* ЗМЕНШИЛИ з 2rem 0 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
    border-left: 5px solid var(--primary-color);
}

.section-title {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Для кого курс */
.course-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.audience-item {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    transition: transform 0.3s;
}

.audience-item:hover {
    transform: translateY(-3px);
}

.audience-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.audience-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.audience-item p {
    color: var(--text-light);
    line-height: 1.4;
    font-size: 0.85rem;
}

/* Результати курсу */
.course-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.result-category {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 1.5rem;
}

.result-category-title {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-list {
    list-style: none;
    padding: 0;
}

.result-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-dark);
	font-size: 0.9rem; 
    line-height: 1.3;
}

.result-list li:before {
    content: "🎯";
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Програма курсу */
.week-block {
    background: var(--secondary-color);
    border-radius: 15px;
    margin: 1.5rem 0;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.week-header {
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.week-header:hover {
    background: #1e3f1a;
}

.week-number {
    background: rgba(255,255,255,0.2);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.week-header h3 {
    font-size: 1.4rem;
    margin: 0;
}

.week-content {
    padding: 0.8rem;
    background: white;
}

.week-content h4 {
    color: var(--accent-color);
    margin: 1rem 0 0.6rem 0; /* ЗМЕНШИЛИ з 1.5rem 0 1rem 0 */
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.1rem */
}

.week-content ul {
    margin: 0.6rem 0; /* ЗМЕНШИЛИ з 1rem 0 */
    padding-left: 1.2rem; /* ЗМЕНШИЛИ з 1.5rem */
}

.week-content li {
    margin: 0.3rem 0; /* ЗМЕНШИЛИ з 0.5rem 0 */
    color: var(--text-dark);
    font-size: 0.9rem; /* ДОДАЛИ */
    line-height: 1.3; /* ДОДАЛИ */
}

.lessons-list {
    margin-top: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    display: flex; /* ДОДАЛИ */
    flex-direction: column; /* ДОДАЛИ */
    gap: 0.2rem; /* ДОДАЛИ замість margin в lesson-item */
}

.lesson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    margin: 0.2rem 0; /* ЗМЕНШИЛИ з 0.5rem 0 */
    background: var(--secondary-color);
    border-radius: 8px; /* ЗМЕНШИЛИ з 10px */
    transition: transform 0.3s;
    min-height: auto; /* ДОДАЛИ */
}

.lesson-item:hover {
    transform: translateX(5px);
}

.lesson-number {
    background: var(--primary-color);
    color: white;
    padding: 0.2rem 0.6rem; /* ЗМЕНШИЛИ з 0.3rem 0.8rem */
    border-radius: 12px; /* ЗМЕНШИЛИ з 15px */
    font-size: 0.8rem; /* ЗМЕНШИЛИ з 0.9rem */
    font-weight: bold;
    min-width: 35px; /* ДОДАЛИ фіксовану ширину */
    text-align: center; /* ДОДАЛИ */
}

.lesson-title {
    flex: 1;
    margin: 0 0.8rem; /* ЗМЕНШИЛИ з 0 1rem */
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.9rem; /* ДОДАЛИ */
    line-height: 1.3; /* ДОДАЛИ для компактності */
}

.lesson-duration {
    color: var(--accent-color);
    font-size: 0.8rem; /* ЗМЕНШИЛИ з 0.9rem */
    font-weight: 500;
    min-width: 45px; /* ДОДАЛИ фіксовану ширину */
    text-align: right; /* ДОДАЛИ */
}

/* Методики курсу */
.methodologies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.methodology-item {
    background: var(--secondary-color);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s;
}

.methodology-item:hover {
    transform: translateY(-5px);
}

.methodology-item h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.methodology-item p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Права колонка (sidebar) */
.course-info-card {
    background: var(--white);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    margin-bottom: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
    border: 2px solid var(--secondary-color);
}

.course-info-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.3rem */
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    padding: 0.6rem 0; /* ЗМЕНШИЛИ з 1rem 0 */
    border-bottom: 1px solid #f0f0f0;
}

.detail-icon {
    font-size: 1.2rem; /* ЗМЕНШИЛИ з 1.5rem */
    color: var(--accent-color);
}

.detail-item strong {
    color: var(--text-dark);
    margin-right: 0.3rem; /* ЗМЕНШИЛИ з 0.5rem */
    font-size: 0.9rem; /* ДОДАЛИ */
}

.detail-item span {
    color: var(--text-light);
    font-size: 0.9rem; /* ДОДАЛИ */
}

/* Що включено в курс */
.course-includes-card {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #f8fafc 100%);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
    margin-bottom: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
    border: 2px solid var(--primary-color);
}

.course-includes-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.3rem */
}

.includes-list {
    list-style: none;
    padding: 0;
}

.includes-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    padding: 0.5rem 0; /* ЗМЕНШИЛИ з 0.8rem 0 */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: var(--text-dark);
    font-size: 0.85rem; /* ДОДАЛИ */
    line-height: 1.3; /* ДОДАЛИ */
}

.include-icon {
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.3rem */
    color: var(--accent-color);
    flex-shrink: 0; /* ДОДАЛИ */
}

/* Бонуси курсу */
.course-bonuses-card {
    background: linear-gradient(135deg, #fef7ff 0%, #fdf2f8 100%);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
    margin-bottom: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
    border: 2px solid var(--accent-color);
}

.course-bonuses-card h3 {
    color: var(--accent-color);
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.3rem */
}

.bonus-item {
    background: white;
    border-radius: 10px; /* ЗМЕНШИЛИ з 15px */
    padding: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    margin: 0.8rem 0; /* ЗМЕНШИЛИ з 1rem 0 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
}

.bonus-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.3rem; /* ЗМЕНШИЛИ з 0.5rem */
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.1rem */
    line-height: 1.3; /* ДОДАЛИ */
}

.bonus-value {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.8rem; /* ЗМЕНШИЛИ з 0.9rem */
    margin: 0 0 0.3rem 0; /* ЗМЕНШИЛИ з 0 0 0.5rem 0 */
}

.bonus-item p {
    color: var(--text-light);
    line-height: 1.4; /* ЗМЕНШИЛИ з 1.6 */
    font-size: 0.85rem; /* ЗМЕНШИЛИ з 0.95rem */
    margin: 0; /* ДОДАЛИ */
}

.bonus-total {
    background: var(--accent-color);
    color: white;
    padding: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    border-radius: 10px; /* ЗМЕНШИЛИ з 15px */
    text-align: center;
    margin-top: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.1rem */
}

/* Кнопка долучитись в sidebar */
.sidebar-join-section {
    background: linear-gradient(135deg, var(--primary-color), #1e3f1a);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
    text-align: center;
    margin-bottom: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
}

.join-btn-sidebar {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem; /* ЗМЕНШИЛИ з 1rem 2rem */
    border-radius: 25px; /* ЗМЕНШИЛИ з 30px */
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.1rem */
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem; /* ЗМЕНШИЛИ з 0.5rem */
}

.join-btn-sidebar:hover {
    background: #b8860b;
    transform: translateY(-3px);
}

.btn-price {
    font-size: 1.2rem;
    font-weight: bold;
}

.join-guarantee {
    color: white;
    font-size: 0.8rem;
    margin-top: 0.8rem;
    opacity: 0.9;
}

/* Відгуки в sidebar */
.course-testimonials-sidebar {
    background: var(--white);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
}

.course-testimonials-sidebar h3 {
    color: var(--primary-color);
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.3rem */
}

.sidebar-testimonial {
    background: var(--secondary-color);
    border-radius: 10px; /* ЗМЕНШИЛИ з 15px */
    padding: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    margin: 0.8rem 0; /* ЗМЕНШИЛИ з 1rem 0 */
}

.testimonial-text {
    color: var(--text-dark);
    font-style: italic;
    line-height: 1.4; /* ЗМЕНШИЛИ з 1.6 */
    margin-bottom: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    font-size: 0.85rem; /* ЗМЕНШИЛИ з 0.95rem */
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-name {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.author-age {
    color: var(--text-light);
    font-size: 0.8rem;
}

/* FAQ для курсу */
.course-faq-section {
    background: var(--secondary-color);
    border-radius: 20px; /* ЗМЕНШИЛИ з 25px */
    padding: 2rem; /* ЗМЕНШИЛИ з 3rem */
    margin: 2rem 0; /* ЗМЕНШИЛИ з 4rem 0 */
}

.course-faq-container {
    max-width: 700px; /* ЗМЕНШИЛИ з 800px */
    margin: 0 auto;
}

.course-faq-item {
    background: var(--white);
    border-radius: 10px; /* ЗМЕНШИЛИ з 15px */
    margin: 0.6rem 0; /* ЗМЕНШИЛИ з 1rem 0 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
    overflow: hidden;
}

.course-faq-question {
    background: linear-gradient(135deg, var(--white) 0%, #f8fafc 100%);
    padding: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: var(--primary-color);
    transition: all 0.3s;
    font-size: 0.95rem; /* ДОДАЛИ */
}

.course-faq-question:hover {
    background: var(--secondary-color);
}

.course-faq-answer {
    display: none;
    padding: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    background: var(--white);
    color: var(--text-dark);
    line-height: 1.5; /* ЗМЕНШИЛИ з 1.6 */
    border-top: 1px solid #e0e0e0;
    font-size: 0.9rem; /* ДОДАЛИ */
}

/* Гарантії */
.course-guarantee-section {
    margin: 2rem 0;
}

.guarantee-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
}

.guarantee-card h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    font-size: 1.8rem; /* ЗМЕНШИЛИ з 2.2rem */
}

.guarantee-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* ЗМЕНШИЛИ з 250px */
    gap: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    margin-top: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
}

.guarantee-item {
    background: white;
    border-radius: 12px; /* ЗМЕНШИЛИ з 15px */
    padding: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    text-align: left;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
    display: flex;
    align-items: flex-start;
    gap: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
}

.guarantee-icon {
    font-size: 2rem; /* ЗМЕНШИЛИ з 2.5rem */
    color: var(--accent-color);
    flex-shrink: 0;
}

.guarantee-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.4rem; /* ЗМЕНШИЛИ з 0.5rem */
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.1rem */
}

.guarantee-item p {
    color: var(--text-light);
    line-height: 1.5; /* ЗМЕНШИЛИ з 1.6 */
    font-size: 0.85rem; /* ЗМЕНШИЛИ з 0.95rem */
}

/* Схожі курси */
.related-courses-section {
    margin: 2rem 0;
}

.related-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.related-course-card {
    background: var(--white);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ЗМЕНШИЛИ тінь */
    transition: transform 0.3s;
    border: 2px solid transparent;
}

.related-course-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.related-course-icon {
    font-size: 2.5rem; /* ЗМЕНШИЛИ з 3rem */
    margin-bottom: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    color: var(--accent-color);
}

.related-course-card h4 {
    color: var(--primary-color);
    margin-bottom: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.2rem */
}

.related-course-card p {
    color: var(--text-light);
    margin-bottom: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    line-height: 1.5; /* ЗМЕНШИЛИ з 1.6 */
    font-size: 0.9rem; /* ДОДАЛИ */
}

.related-course-price {
    color: var(--accent-color);
    font-size: 1.2rem; /* ЗМЕНШИЛИ з 1.3rem */
    font-weight: bold;
    margin: 0.8rem 0; /* ЗМЕНШИЛИ з 1rem 0 */
}

.related-course-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.7rem 1.2rem; /* ЗМЕНШИЛИ з 0.8rem 1.5rem */
    border-radius: 20px; /* ЗМЕНШИЛИ з 25px */
    cursor: pointer;
    font-size: 0.9rem; /* ЗМЕНШИЛИ з 0.95rem */
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

.related-course-btn:hover {
    background: #1e3f1a;
    transform: translateY(-2px);
}

/* Фінальний заклик до дії */
.final-cta-section {
    margin: 2rem 0;
}

.final-cta-card {
    background: linear-gradient(135deg, var(--accent-color), #f4a261);
    color: white;
    border-radius: 25px; /* ЗМЕНШИЛИ з 30px */
    padding: 2.5rem 1.5rem; /* ЗМЕНШИЛИ з 4rem 2rem */
    text-align: center;
}

.final-cta-card h2 {
    font-size: 2rem; /* ЗМЕНШИЛИ з 2.5rem */
    margin-bottom: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
}

.final-cta-card p {
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.2rem */
    margin-bottom: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    opacity: 0.95;
}

.cta-benefits {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    flex-wrap: wrap;
    margin: 1.5rem 0; /* ЗМЕНШИЛИ з 2rem 0 */
}

.cta-benefit {
    background: rgba(255,255,255,0.2);
    padding: 0.6rem 1.2rem; /* ЗМЕНШИЛИ з 0.8rem 1.5rem */
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    font-weight: 500;
    font-size: 0.9rem; /* ЗМЕНШИЛИ з 0.95rem */
}

.final-price {
    margin: 1.5rem 0;
}

.final-price-old {
    font-size: 1.8rem;
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 1rem;
}

.final-price-current {
    font-size: 3rem; /* ЗМЕНШИЛИ з 3.5rem */
    font-weight: bold;
    margin: 0 0.8rem; /* ЗМЕНШИЛИ з 0 1rem */
}

.final-discount {
    display: block;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    opacity: 0.9;
}

.final-join-btn {
    background: white;
    color: var(--accent-color);
    border: none;
    padding: 1.2rem 2.5rem; /* ЗМЕНШИЛИ з 1.5rem 3rem */
    border-radius: 40px; /* ЗМЕНШИЛИ з 50px */
    font-size: 1.2rem; /* ЗМЕНШИЛИ з 1.4rem */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin: 1.5rem 0; /* ЗМЕНШИЛИ з 2rem 0 */
}

.final-join-btn:hover {
    transform: translateY(-5px) scale(1.05);
}

.final-guarantee {
    font-size: 1rem;
    opacity: 0.9;
}

/* СТОРІНКА ОПЛАТИ */
.payment-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 5% 20px 5%; /* ДОДАЛИ ВІДСТУП ЗВЕРХУ 120px */
}

.payment-header {
	padding-top: 100px; /* ВІДСТУП ЗВЕРХУ ВІД ФІКСОВАНОГО ХЕДЕРА */
    text-align: center;
    text-align: center;
    margin-bottom: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
}

.payment-main-icon {
    font-size: 2.5rem; /* ЗМЕНШИЛИ з 3rem */
    margin-bottom: 0.5rem; /* ЗМЕНШИЛИ з 1rem */
}

.payment-header h1 {
    font-size: 1.8rem; /* ЗМЕНШИЛИ з 2.5rem */
    margin-bottom: 0.5rem; /* ЗМЕНШИЛИ з 1rem */
    color: var(--primary-color);
}

.payment-subtitle {
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.2rem */
    color: var(--text-light);
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
}

/* ТАРИФНІ ПЛАНИ */
.pricing-section {
    margin: 3rem 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.pricing-card {
    background: white;
    border: 3px solid #e2e8f0;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    cursor: default;
    transition: all 0.3s;
    position: relative;
}

.pricing-card.selected {
    border-color: var(--primary-color);
    background: var(--secondary-color);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.pricing-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

.pricing-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--accent-color);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.pricing-duration {
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.pricing-currency {
    color: #666;
    font-size: 1rem;
}

.pricing-monthly {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pricing-savings {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #15803d;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 1rem;
    display: inline-block;
}

.pricing-features {
    text-align: left;
    margin: 1.5rem 0;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
}

.pricing-features li {
    padding: 0.3rem 0;
    color: #666;
    font-size: 0.9rem;
}

.pricing-features li:before {
    content: "✅";
    margin-right: 0.5rem;
}

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem; /* ЗМЕНШИЛИ з 3rem */
    margin-top: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
}

/* Форма оплати */
.payment-form {
    background: var(--white);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.payment-form h2 {
    font-size: 1.3rem; /* ЗМЕНШИЛИ з 1.5rem */
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    color: var(--primary-color);
}

.order-summary {
    background: var(--white);
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    padding: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: fit-content;
}

.order-summary h2 {
    font-size: 1.3rem; /* ЗМЕНШИЛИ з 1.5rem */
    margin-bottom: 1rem; /* ЗМЕНШИЛИ з 1.5rem */
    color: var(--primary-color);
}

.form-group {
    margin-bottom: 0.8rem;
}

.form-section {
    margin-bottom: 1.2rem; /* ЗМЕНШИЛИ з 2rem */
}

.form-section h3 {
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.3rem */
    margin-bottom: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    color: var(--text-dark);
}

.form-label {
    display: block;
    font-size: 0.9rem; /* ЗМЕНШИЛИ з 1rem */
    color: var(--text-dark);
    margin-bottom: 0.3rem; /* ЗМЕНШИЛИ з 0.5rem */
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 0.7rem; /* ЗМЕНШИЛИ з 1rem */
    border: 2px solid #e0e0e0;
    border-radius: 8px; /* ЗМЕНШИЛИ з 10px */
    font-size: 0.9rem; /* ЗМЕНШИЛИ з 1rem */
    transition: border-color 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-hint {
    font-size: 0.8rem; /* ЗМЕНШИЛИ з 0.9rem */
    color: var(--text-light);
    margin-top: 0.2rem; /* ЗМЕНШИЛИ з 0.3rem */
}

.form-payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

footer .payment-methods {
    display: block;
    text-align: right;
}

/* МЕТОДИ ОПЛАТИ - ГОРИЗОНТАЛЬНЕ РОЗТАШУВАННЯ */
.payment-form .payment-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 0.8rem 0;
}

.payment-method {
    background: var(--white);
    border: 2px solid #e0e0e0;
    border-radius: 10px; /* ЗМЕНШИЛИ з 15px */
    padding: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem; /* ЗМЕНШИЛИ з 0.5rem */
}

.payment-method:hover {
    border-color: var(--accent-color);
    background: var(--secondary-color);
}

.payment-method.selected {
    border-color: var(--accent-color);
    background: var(--secondary-color);
}

.payment-method-icon {
    font-size: 1.5rem; /* ЗМЕНШИЛИ з 2rem */
}

.payment-method-name {
    font-size: 0.85rem; /* ЗМЕНШИЛИ з 0.9rem */
    font-weight: 500;
    color: var(--text-dark);
}

.payment-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem; /* ЗМЕНШИЛИ з 1rem 2rem */
    border-radius: 25px; /* ЗМЕНШИЛИ з 30px */
    font-size: 1rem; /* ЗМЕНШИЛИ з 1.1rem */
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
    margin: 1rem 0; /* ЗМЕНШИЛИ з 1.5rem 0 */
}

.payment-btn:hover {
    background: #1e3f1a;
    transform: translateY(-2px);
}

.payment-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.security-badges {
    display: flex;
    justify-content: center;
    gap: 0.8rem; /* ЗМЕНШИЛИ з 1rem */
    margin: 1rem 0; /* ЗМЕНШИЛИ з 1.5rem 0 */
    flex-wrap: wrap;
}

.security-badge {
    background: #f8fafc;
    padding: 0.4rem 0.8rem; /* ЗМЕНШИЛИ з 0.5rem 1rem */
    border-radius: 15px; /* ЗМЕНШИЛИ з 20px */
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.auto-renewal-notice {
    background: linear-gradient(135deg, #fef7ff 0%, #fdf2f8 100%);
    border: 2px solid var(--accent-color);
    border-radius: 15px;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
}

.auto-renewal-notice h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
}

/* СТОРІНКА ЗГОДИ */
.consent-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 140px 5% 60px;
}

.consent-content {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.consent-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--secondary-color);
}

.consent-section {
    margin: 1rem 0;
    padding: 1.5rem;
    background: var(--secondary-color);
    border-radius: 15px;
    border-left: 4px solid var(--primary-color);
}

.consent-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.consent-section p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.consent-section ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.consent-section li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.consent-checkbox {
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem; /* ЗМЕНШИЛИ з 0.9rem */
    line-height: 1.4;
    color: var(--text-dark);
    cursor: pointer;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--secondary-color);
    border-radius: 10px;
}

.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 0.2rem;
    cursor: pointer;
}

.checkbox-label {
    font-size: 1rem;
    line-height: 1.6;
    cursor: pointer;
}

.consent-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.accept-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 150px;
}

.accept-btn:hover {
    background: #1e3f1a;
    transform: translateY(-2px);
}

.accept-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.decline-btn {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid #ccc;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 150px;
}

.decline-btn:hover {
    border-color: #dc2626;
    color: #dc2626;
}

.warning-text {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-left: 4px solid #dc2626;
    padding: 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    color: #dc2626;
    font-weight: 500;
}

/* КАРТКА РЕЗЮМЕ КУРСУ - відрізняється від клубу */
.course-summary-card {
    background: var(--white);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 4px solid var(--primary-color); /* УНІКАЛЬНО для курсів */
}

.course-summary-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.course-summary-icon {
    font-size: 2rem;
    color: var(--primary-color);
}

.course-summary-title {
    font-size: 1.1rem; /* ЗМЕНШИЛИ з 1.2rem */
    color: var(--primary-color);
    margin-bottom: 0.2rem; /* ЗМЕНШИЛИ з 0.3rem */
}

.course-summary-subtitle {
    font-size: 0.85rem; /* ЗМЕНШИЛИ з 0.9rem */
    color: var(--text-light);
}

.course-summary-features h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.course-summary-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.course-summary-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
}

.course-summary-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* ========== КАРТКА БОНУСІВ КУРСУ ========== */
/* Унікальні стилі для бонусів курсу */
.bonuses-card {
    background: linear-gradient(135deg, #fef7ff 0%, #fdf2f8 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    border-left: 4px solid var(--accent-color);
}

.bonuses-card h3 {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.bonus-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
}

.bonus-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.bonus-value {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0;
}

.bonus-total {
    background: var(--accent-color);
    color: var(--white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 1rem;
}

/* ========== КАРТКА ЦІН КУРСУ ========== */
/* Специфічні стилі для цін курсу */
.price-card {
    background: var(--white);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.price-old {
    color: #999;
    text-decoration: line-through;
}

.discount-row {
    color: #22c55e;
    font-weight: 500;
}

.price-discount {
    color: #22c55e;
    font-weight: bold;
}

.total-row {
    border-top: 2px solid var(--primary-color);
    padding-top: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary-color);
}

.price-current {
    color: var(--primary-color);
    font-weight: bold;
}

.price-notice {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 1rem;
    font-style: italic;
}

/* ========== ДОДАТКОВА ІНФОРМАЦІЯ ========== */
/* Блок з контактною інформацією курсу */
.additional-info {
    background: var(--white);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 3rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.additional-info h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.additional-info p {
    color: var(--text-light);
    margin-bottom: 2rem;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

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

.contact-label {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-value {
    color: var(--text-light);
}

/* ========== ДЕТАЛІ КАРТКИ ДЛЯ КУРСІВ ========== */
/* Специфічні стилі для полів картки в курсах */
.card-details {
    display: none; /* За замовчуванням сховано */
    background: #fff;
    border-left: 4px solid var(--primary-color);
}

/* ========== НАВІГАЦІЙНІ КРИХТИ (ЗЕЛЕНІ ЯК У КЛУБІ) ========== */
.breadcrumbs a {
    color: var(--primary-color);
    text-decoration: underline;
}

.breadcrumbs a:hover {
    color: #1e3f1a;
}

/* ========== ПОСИЛАННЯ ЗГОДИ (ЗЕЛЕНІ ЯК У КЛУБІ) ========== */
.consent-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.consent-link:hover {
    color: #1e3f1a;
}

/* ========== КНОПКИ ПІДТРИМКИ ЯК У КЛУБІ ========== */
.support-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.support-btn:hover {
    background: #1e3f1a;
}

/* ========== КОМПАКТНІ СТИЛІ ДЛЯ EYES.HTML ==========
   ЗАМІНИТИ ІСНУЮЧІ СТИЛІ В ФАЙЛІ styles-courses.css */

/* ЗМЕНШУЄМО ГОЛОВНИЙ БЛОК - відступи зверху та знизу */
.eyes-hero-optimized {
    padding: 120px 5% 30px; /* ЗБІЛЬШИЛИ верхній відступ щоб не підлазив під хедер */
    min-height: 40vh; /* ЗМЕНШИЛИ висоту */
}

/* ЗМЕНШУЄМО ЗАГОЛОВОК */
.eyes-title-lowered {
    font-size: 2rem; /* ЗМЕНШИЛИ розмір заголовка */
    margin-bottom: 0.5rem; /* ЗМЕНШИЛИ відступ знизу */
}

/* ЗМЕНШУЄМО ПІДЗАГОЛОВОК */
.eyes-subtitle-compact {
    font-size: 1rem; /* ЗМЕНШИЛИ розмір тексту */
    margin-bottom: 1rem; /* ЗМЕНШИЛИ відступ */
}

/* ЗМЕНШУЄМО БЛОК З ЦІНОЮ */
.eyes-price-compact {
    margin: 1rem 0; /* ЗМЕНШИЛИ відступи */
}

/* ЗМЕНШУЄМО ГОЛОВНУ КНОПКУ */
.eyes-btn-compact {
    padding: 0.8rem 1.5rem; /* ЗМЕНШИЛИ внутрішні відступи */
    font-size: 1rem; /* ЗМЕНШИЛИ розмір тексту */
    margin: 1rem 0; /* ЗМЕНШИЛИ зовнішні відступи */
}

/* ЗМЕНШУЄМО СТАТИСТИКУ */
.eyes-stats-compact {
    margin-top: 1rem; /* ЗМЕНШИЛИ відступ зверху */
}

/* ЗМЕНШУЄМО КОНТЕЙНЕР */
.eyes-container-compact {
    padding: 30px 5%;
    max-width: 1300px; /* ДОДАТИ: така ж ширина як у клуба */
    margin: 0 auto; /* ДОДАТИ: центрування */
}

/* ЗМЕНШУЄМО СЕКЦІЇ */
.eyes-section-compact {
    margin: 1rem 0; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ відступи між секціями */
}

/* ЗМЕНШУЄМО ЗАГОЛОВКИ СЕКЦІЙ */
.eyes-title-compact {
    font-size: 1.6rem; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ розмір заголовків */
    margin-bottom: 1rem; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ відступ знизу */
}

/* ЗМЕНШУЄМО АУДИТОРІЮ */
.eyes-audience-compact {
    gap: 1rem; /* ЗМЕНШИЛИ відстань між блоками */
}

.eyes-audience-item-compact {
    padding: 1rem; /* ЗМЕНШИЛИ внутрішні відступи */
}

/* ЗМЕНШУЄМО РЕЗУЛЬТАТИ */
.eyes-results-compact {
    gap: 1rem; /* ЗМЕНШИЛИ відстань між категоріями */
}

.eyes-result-category-compact {
    margin-bottom: 1rem; /* ЗМЕНШИЛИ відступ знизу */
}

/* ЗМЕНШУЄМО ТИЖНІ */
.eyes-week-compact {
    margin-bottom: 1rem; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ відступи між тижнями */
}

.eyes-week-content-compact {
    padding: 0.8rem; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ внутрішні відступи */
}

/* ЗМЕНШУЄМО БОКОВУ ПАНЕЛЬ */
.eyes-sidebar-btn-compact {
    padding: 0.8rem 1.5rem; /* ЗМЕНШИЛИ кнопку в сайдбарі */
    font-size: 1rem; /* ЗМЕНШИЛИ текст */
}

/* ЗМЕНШУЄМО ВІДГУКИ */
.eyes-testimonials-compact {
    margin-bottom: 1rem; /* ЗМЕНШИЛИ відступи */
}

.eyes-testimonial-compact {
    padding: 1rem; /* ЗМЕНШИЛИ внутрішні відступи */
    margin: 0.5rem 0; /* ЗМЕНШИЛИ відступи між відгуками */
}

/* ЗМЕНШУЄМО FAQ */
.eyes-faq-compact {
    margin: 1.5rem 0; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ відступи */
}

.eyes-faq-item-compact {
    margin: 0.5rem 0; /* ЗМЕНШИЛИ відступи між питаннями */
}

/* ЗМЕНШУЄМО ФІНАЛЬНИЙ БЛОК */
.eyes-cta-compact {
    margin: 1rem 0; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ відступи */
}

.eyes-cta-card-compact {
    padding: 1.5rem; /* ЩЕ БІЛЬШЕ ЗМЕНШИЛИ внутрішні відступи */
}

.eyes-final-btn-compact {
    padding: 0.8rem 1.5rem; /* ЗМЕНШИЛИ фінальну кнопку */
    font-size: 1rem; /* ЗМЕНШИЛИ текст */
}

/* ========== СТИЛІ ДЛЯ ПРИКЛАДІВ РЕЗУЛЬТАТІВ ========== */
.eyes-results-examples {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 20px;
    padding: 1.5rem; /* ЗМЕНШИЛИ внутрішні відступи */
    margin: 1.5rem 0; /* ЗМЕНШИЛИ зовнішні відступи */
    border-left: 5px solid #3b82f6;
}

/* СІТКА ПРИКЛАДІВ */
.eyes-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0; /* ЗМЕНШИЛИ відступи */
}

/* ЕЛЕМЕНТ ПРИКЛАДУ */
.eyes-example-item {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.eyes-example-item:hover {
    transform: translateY(-3px);
}

/* ІКОНКА ПРИКЛАДУ */
.eyes-example-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* ========== СЕКЦІЯ ФОТО "ДО-ПІСЛЯ" - ВИПРАВЛЕНА ВЕРСІЯ ========== */
.before-after-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.before-after-section h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.before-after-section p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* КОНТЕЙНЕР З ГОРТАННЯМ - ВИПРАВЛЕНИЙ */
.photo-carousel-container {
    position: relative;
    margin: 2rem 0;
                /*overflow: hidden;  ДОДАНО для кращого відображення */
}

.photo-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 1rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.photo-carousel::-webkit-scrollbar {
    display: none; /* Ховає смужку прокрутки в Chrome, Safari */
}

.photo-item {
    flex: 0 0 250px; /* Фіксована ширина картки 250px */
    background: white;
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s; /* Плавна анімація при наведенні */
}

.photo-item:hover {
    transform: translateY(-3px); /* Підйом картки при наведенні */
}

.photo-placeholder {
    width: 100%;
    height: 220px; /* ФІКСОВАНА ВИСОТА */
    background: linear-gradient(45deg, #f8fafc, #e2e8f0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border: 2px dashed #cbd5e1; /* РАМКА ПОВЕРНУТА */
}

.photo-placeholder.square span {
    font-size: 2rem;
    color: #64748b;
}

/* ПІДПИСИ ДО ФОТО */
.photo-label {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.photo-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

/* КНОПКИ ГОРТАННЯ */
.carousel-btn {
    position: absolute; /* Абсолютне позиціонування */
    top: 50%; /* По центру по висоті */
    transform: translateY(-50%);
    background: var(--primary-color); /* Зелений колір */
    color: white;
    border: none;
    width: 40px; /* Ширина кнопки */
    height: 40px; /* Висота кнопки */
    border-radius: 50%; /* Робить кнопку круглою */
    font-size: 1.5rem; /* Розмір стрілки */
    cursor: pointer; /* Курсор-рука */
    z-index: 10; /* Поверх інших елементів */
    transition: all 0.3s; /* Плавна анімація */
}

.carousel-btn:hover {
    background: #1e3f1a; /* Темніший зелений при наведенні */
    transform: translateY(-50%) scale(1.1); /* Збільшення при наведенні */
}

.carousel-btn-left {
    left: -20px; /* Позиція лівої кнопки */
}

.carousel-btn-right {
    right: -20px; /* Позиція правої кнопки */
}

/* ========== ВАРІАНТИ РОЗМІРІВ ========== */

/* КОМПАКТНА ВЕРСІЯ (для сторінок з багато контенту) */
.before-after-section.compact {
    padding: 1rem;
    margin: 1rem 0;
}

.before-after-section.compact h2 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

.before-after-section.compact .before-after-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.before-after-section.compact .photo-placeholder {
    height: 120px;
}

/* ВЕЛИКА ВЕРСІЯ (для головних сторінок) */
.before-after-section.large {
    padding: 2.5rem;
    margin: 2.5rem 0;
}

.before-after-section.large h2 {
    font-size: 2rem;
    margin-bottom: 1.2rem;
}

.before-after-section.large .before-after-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.before-after-section.large .photo-placeholder {
    height: 200px;
}

/* СТИЛІ ДЛЯ ПОСИЛАНЬ-КНОПОК БЕЗ IMPORTANT */
a.join-btn-main {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(45deg, var(--accent-color), #f4a261);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin: 1rem 0;
    gap: 0.3rem;
}

a.join-btn-sidebar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
    gap: 0.3rem;
}

a.final-join-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: white;
    color: var(--accent-color);
    border: none;
    padding: 1.2rem 2.5rem;
    border-radius: 40px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin: 1.5rem 0;
    gap: 0.3rem;
}

/* ЕФЕКТИ ПРИ НАВЕДЕННІ */
a.join-btn-main:hover,
a.join-btn-sidebar:hover,
a.final-join-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

/* СПЕЦІАЛЬНО ДЛЯ ЦІНИ В КНОПЦІ */
a.join-btn-sidebar .btn-price {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

/* ========== СТИЛІ ТІЛЬКИ ДЛЯ DASHBOARD (БЕЗ КОНФЛІКТІВ) ========== */
/* ДОДАТИ В КІНЕЦЬ ФАЙЛУ styles-courses.css */

/* ОСНОВНИЙ КОНТЕЙНЕР - тільки для сторінки dashboard */
body[data-page="dashboard"] .dashboard-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 120px 5% 40px;
}

/* КОМПАКТНИЙ ВІТАЛЬНИЙ БЛОК - тільки dashboard */
body[data-page="dashboard"] .compact-welcome-section {
    background: linear-gradient(135deg, var(--primary-color), #16a34a);
    color: white;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-page="dashboard"] .course-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body[data-page="dashboard"] .course-icon {
    font-size: 2rem;
}

body[data-page="dashboard"] .course-title h1 {
    margin: 0;
    font-size: 1.5rem;
}

body[data-page="dashboard"] .course-progress-compact {
    text-align: right;
}

body[data-page="dashboard"] .progress-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

body[data-page="dashboard"] .progress-bar-compact {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    height: 8px;
    width: 300px;
}

body[data-page="dashboard"] .progress-fill-compact {
    background: white;
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* ГОЛОВНИЙ ВІДЕО ПЛЕЄР - тільки dashboard */
body[data-page="dashboard"] .main-video-section {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

body[data-page="dashboard"] .video-player-container {
    margin-bottom: 1rem;
    width: 280px;
    height: 500px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

body[data-page="dashboard"] #mainLessonVideo {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

body[data-page="dashboard"] .current-lesson-info h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

body[data-page="dashboard"] .lesson-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

body[data-page="dashboard"] .nav-btn {
    background: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s;
}

body[data-page="dashboard"] .nav-btn:hover {
    background: #e8efe5;
}

body[data-page="dashboard"] .nav-btn.primary {
    background: var(--primary-color);
    color: white;
}

body[data-page="dashboard"] .nav-btn.primary:hover {
    background: #1e3f1a;
}

body[data-page="dashboard"] .lesson-progress-info {
    text-align: center;
}

body[data-page="dashboard"] .lesson-progress-bar {
    background: #e0e0e0;
    border-radius: 8px;
    height: 6px;
    margin: 0.5rem 0;
}

body[data-page="dashboard"] .lesson-progress-fill {
    background: var(--primary-color);
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ОСНОВНА СІТКА */
body[data-page="dashboard"] .dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* БЛОКИ ТИЖНІВ З ЗГОРТАННЯМ - тільки dashboard */
body[data-page="dashboard"] .week-block {
    background: white;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

body[data-page="dashboard"] .week-block.collapsed .lessons-list {
    display: none;
}

body[data-page="dashboard"] .week-block.expanded .lessons-list {
    display: block;
}

body[data-page="dashboard"] .week-header {
    background: var(--secondary-color);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background 0.3s;
}

body[data-page="dashboard"] .week-header:hover {
    background: #e8efe5;
}

body[data-page="dashboard"] .week-header h2 {
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

body[data-page="dashboard"] .week-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

body[data-page="dashboard"] .week-progress-bar {
    flex: 1;
    background: #e0e0e0;
    border-radius: 6px;
    height: 6px;
}

body[data-page="dashboard"] .week-progress-fill {
    background: var(--primary-color);
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* СПИСОК УРОКІВ - тільки dashboard */
body[data-page="dashboard"] .lessons-list {
    padding: 0;
}

body[data-page="dashboard"] .lesson-item {
    display: grid;
    grid-template-columns: 40px 1fr 60px;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    cursor: pointer;
}

body[data-page="dashboard"] .lesson-item:hover {
    background: #f8f9fa;
}

body[data-page="dashboard"] .lesson-item.completed {
    background: #f0f9f0;
}

body[data-page="dashboard"] .lesson-item.current {
    background: #fff8e1;
    border-left: 4px solid var(--accent-color);
}

body[data-page="dashboard"] .lesson-item.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

body[data-page="dashboard"] .lesson-item.locked:hover {
    background: white;
}

body[data-page="dashboard"] .lesson-status {
    font-size: 1rem;
    text-align: center;
}

body[data-page="dashboard"] .lesson-info {
    padding: 0 1rem;
}

body[data-page="dashboard"] .lesson-number {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9rem;
}

body[data-page="dashboard"] .lesson-title {
    color: var(--text-dark);
    margin: 0.2rem 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

body[data-page="dashboard"] .lesson-duration {
    color: var(--text-light);
    font-size: 0.75rem;
}

body[data-page="dashboard"] .lesson-progress {
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.8rem;
}

/* ПРАВА КОЛОНКА - тільки dashboard */
body[data-page="dashboard"] .dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* БЛОКИ МАТЕРІАЛІВ ТА ПІДТРИМКИ */
body[data-page="dashboard"] .materials-card,
body[data-page="dashboard"] .support-card {
    background: white;
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-width: 300px;
}

body[data-page="dashboard"] .materials-card h3,
body[data-page="dashboard"] .support-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1rem;
}

body[data-page="dashboard"] .support-card {
    text-align: center;
}

body[data-page="dashboard"] .support-card p {
    color: var(--text-light);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ДОДАТКОВІ МАТЕРІАЛИ */
body[data-page="dashboard"] .materials-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

body[data-page="dashboard"] .material-item {
    display: grid;
    grid-template-columns: 25px 1fr 35px;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
    background: var(--secondary-color);
    border-radius: 8px;
}

body[data-page="dashboard"] .material-icon {
    font-size: 1rem;
    text-align: center;
}

body[data-page="dashboard"] .material-name {
    font-size: 0.85rem;
    color: var(--text-dark);
}

body[data-page="dashboard"] .material-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="dashboard"] .material-btn:hover {
    background: #1e3f1a;
}

/* КНОПКИ ПІДТРИМКИ */
body[data-page="dashboard"] .support-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

body[data-page="dashboard"] .support-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

body[data-page="dashboard"] .support-btn:hover {
    background: #1e3f1a;
    transform: translateY(-1px);
}

body[data-page="dashboard"] .support-btn.telegram {
    background: #0088cc;
}

body[data-page="dashboard"] .support-btn.telegram:hover {
    background: #006699;
}

body[data-page="dashboard"] .support-btn.email {
    background: #34495e;
}

body[data-page="dashboard"] .support-btn.email:hover {
    background: #2c3e50;
}

/* ПОВІДОМЛЕННЯ */
body[data-page="dashboard"] .notification {
    position: fixed;
    top: 100px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10001;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ДОДАТИ в styles-courses.css: */
a.support-btn {
    display: block;
    text-decoration: none;
    text-align: center;
}

a.support-btn:hover {
    text-decoration: none;
}


/* ========== МОДАЛЬНЕ ВІКНО ДЛЯ ЗБІЛЬШЕННЯ ФОТО ========== */

/* Темний фон на весь екран */
.photo-modal-overlay {
    display: none;                /* спочатку вікно приховане */
    position: fixed;              /* фіксується поверх усієї сторінки */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85); /* ← ЗАТЕМНЕННЯ ФОНУ: 0.85 = 85% чорного. Для світлішого фону поставте 0.7 */
    z-index: 2000;                /* поверх усіх інших елементів сторінки */
    justify-content: center;      /* фото по центру по горизонталі */
    align-items: center;          /* фото по центру по вертикалі */
    cursor: pointer;              /* курсор-рука: клік по фону закриває вікно */
}

/* Коли скрипт додає клас active — вікно з'являється */
.photo-modal-overlay.active {
    display: flex;
}

/* Саме збільшене фото */
.photo-modal-img {
    max-width: 90%;               /* ← МАКСИМАЛЬНА ШИРИНА ФОТО: 90% ширини екрану */
    max-height: 90%;              /* ← МАКСИМАЛЬНА ВИСОТА ФОТО: 90% висоти екрану */
    border-radius: 10px;          /* ← ЗАОКРУГЛЕННЯ КУТІВ ФОТО: більше число = кругліші кути */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* тінь навколо фото */
}

/* ========== БЛОК "ФОТО ПРОГРЕСУ" (дашборди курсів) ========== */
body[data-page="dashboard"] .progress-photos-section {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

body[data-page="dashboard"] .progress-photos-section.progress-photos-due {
    border: 3px solid var(--accent-color);
}

body[data-page="dashboard"] .progress-photos-title {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

body[data-page="dashboard"] .progress-photos-instructions {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.progress-photos-instructions p {
    display: block;       /* показувати кожен <p> окремим блоком, а не в рядок */
    margin: 0 0 12px 0;   /* відступ знизу між абзацами, можна змінити 12px на своє значення */
}

body[data-page="dashboard"] .photo-period-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

body[data-page="dashboard"] .photo-period-locked {
    opacity: 0.5;
}

body[data-page="dashboard"] .photo-period-active {
    border-color: var(--accent-color);
    background: #fffbf0;
}

body[data-page="dashboard"] .photo-period-done {
    border-color: #22c55e;
    background: #f0fdf4;
}

body[data-page="dashboard"] .photo-period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body[data-page="dashboard"] .photo-period-name {
    font-weight: bold;
    color: var(--text-dark);
}

body[data-page="dashboard"] .photo-period-badge {
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 600;
}

body[data-page="dashboard"] .photo-period-badge-active {
    color: var(--accent-color);
}

body[data-page="dashboard"] .photo-period-countdown {
    font-size: 0.85rem;
    color: var(--text-light);
}

body[data-page="dashboard"] .photo-upload-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

body[data-page="dashboard"] .photo-thumb-wrap {
    position: relative;
    width: 100px;
    height: 100px;
}

body[data-page="dashboard"] .photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

body[data-page="dashboard"] .photo-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1;
}

body[data-page="dashboard"] .photo-upload-slot {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--accent-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
    color: var(--accent-color);
    cursor: pointer;
    padding: 0.3rem;
}

body[data-page="dashboard"] .photo-upload-slot:hover {
    background: #fff8e1;
}

body[data-page="dashboard"] .photo-skip-btn {
    margin-top: 0.8rem;
    background: none;
    border: 1px solid #ccc;
    color: var(--text-light);
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
}

body[data-page="dashboard"] .photo-finish-btn {
    margin-top: 0.8rem;
    margin-right: 0.5rem;
    background: var(--primary-color);
    border: none;
    color: white;
    padding: 0.6rem 1.4rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 3px 10px rgba(45,90,39,0.3);
}

body[data-page="dashboard"] .photo-finish-btn:hover {
    background: #1e3f1a;
    transform: translateY(-2px);
}

body[data-page="dashboard"] .photo-finish-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ========== МОДАЛЬНЕ ВІКНО ДЛЯ ФОТО ПРОГРЕСУ ========== */
.progress-photo-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.progress-photo-modal-overlay.active {
    display: flex;
}

.progress-photo-modal-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

body[data-page="dashboard"] .photo-thumb {
    cursor: zoom-in;
}