/* ===== ГЛОБАЛЬНІ КОЛЬОРИ ТА ШРИФТИ TESTORY ===== */
:root {
    --bg-light: #f9fafc;
    --text-dark: #1e1e1e;
    --bg-dark: #1a1a1a;
    --text-light: #f0f0f0;
    --primary: #3f51b5; /* Головний синій Testory */
    --primary-darker: #2f3e9a; /* Темніший синій для ховеру/акценту */
    --accent: #ffca28; /* Жовтий акцент Testory */
    --accent-darker: #e6b820; /* Темніший жовтий для ховеру */
    --shadow: rgba(0, 0, 0, 0.15); /* Загальна тінь */
    --card-bg-light: #ffffff;
    --card-bg-dark: #2c2c2c;
    --border-light: #ddd;
    --border-dark: #444;

    /* ===== СПЕЦИФІЧНІ КОЛЬОРИ ДЛЯ ПРОХОДЖЕННЯ ТЕСТУ (адаптовані) ===== */
    --test-primary-main: var(--primary); /* Основний колір для кнопок, результату */
    --test-primary-dark-variant: var(--primary-darker); /* Темніший варіант для заголовків */
    --test-primary-light-bg: #e0ecff; /* Дуже світлий синій для вибраних опцій (світлий режим) */
    --test-text-color: var(--text-dark); /* Колір тексту в світлому режимі */
    --test-text-color-dark: var(--text-light); /* Колір тексту в темному режимі */
    --test-option-bg-light: #f7f9fc; /* Фон опцій (світлий режим) */
    --test-option-bg-dark: #3a3a3a; /* Фон опцій (темний режим) */
    --test-option-hover-light: #d1e4ff; /* Фон опцій при наведенні (світлий режим) */
    --test-option-hover-dark: #4a4a4a; /* Фон опцій при наведенні (темний режим) */
    --test-option-selected-border-light: var(--primary); /* Бордер вибраної опції (світлий) */
    --test-option-selected-border-dark: var(--accent); /* Бордер вибраної опції (темний) */
    --test-option-selected-text-light: #002a80; /* Колір тексту вибраної опції (світлий) */
    --test-option-selected-text-dark: var(--text-light); /* Колір тексту вибраної опції (темний) */

    /* Кольори для правильної/неправильної відповіді (для майбутньої реалізації) */
    --correct-answer: #4CAF50; /* Зелений */
    --wrong-answer: #F44336; /* Червоний */
}

/* ===== ЗАГАЛЬНІ СТИЛІ ===== */
* {
    box-sizing: border-box;
    /* Плавні переходи для всіх елементів */
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif; /* Використовуємо 'Inter' для єдиного стилю Testory */
    background: var(--bg-light);
    margin: 0;
    padding: 20px; /* Загальний відступ, який буде перевизначений у main */
    color: var(--text-dark);
    min-height: 100vh; /* Забезпечує, що футер буде внизу */
    display: flex;
    flex-direction: column;
}

/* --- Темний режим --- */
body.dark {
    background: var(--bg-dark);
    color: var(--text-light);
}

/* --- Основний контейнер контенту (якщо Testory має загальний main) --- */
main {
    flex-grow: 1; /* Дозволяє main займати весь доступний простір */
    padding-top: calc(60px + 30px); /* Відступ від навбару, якщо він фіксований */
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}


/* ===== ОСНОВНИЙ КОНТЕЙНЕР ТЕСТУ ===== */
.test-container {
    max-width: 700px;
    margin: 30px auto; /* Центрування контейнера тесту */
    background: var(--card-bg-light);
    padding: 35px 45px; /* Збільшений padding для простору */
    border-radius: 20px; /* Більш округлі кути */
    box-shadow: 0 10px 30px var(--shadow); /* Більш виразна тінь */
    opacity: 0; /* Початковий стан для анімації появи */
    transform: translateY(20px);
    animation: fadeInItem 0.8s ease forwards; /* Анімація появи контейнера */
}
body.dark .test-container {
    background: var(--card-bg-dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Темніша тінь для темного режиму */
}

/* ===== ЗАГОЛОВОК І ЛІЧИЛЬНИК ===== */
.test-title {
    font-size: 2.4rem; /* Збільшений розмір */
    font-weight: 700;
    color: var(--test-primary-dark-variant); /* Використовуємо темніший primary */
    margin-bottom: 15px; /* Більший відступ */
    text-align: center;
    line-height: 1.2;
}
body.dark .test-title {
    color: var(--accent); /* Акцентний колір у темному режимі */
}

.question-counter {
    font-size: 1.15rem; /* Збільшений розмір */
    font-weight: 600;
    color: #777; /* Трохи м'якший колір */
    margin-bottom: 35px; /* Більший відступ */
    text-align: center;
    border-bottom: 1px solid var(--border-light); /* Лінія-розділювач */
    padding-bottom: 15px;
}
body.dark .question-counter {
    color: #bbb;
    border-color: var(--border-dark);
}

/* ===== ПИТАННЯ ===== */
.test-question {
    font-size: 1.5rem; /* Збільшений розмір */
    font-weight: 600;
    margin-bottom: 30px; /* Більший відступ */
    color: var(--test-text-color);
    line-height: 1.4;
}
body.dark .test-question {
    color: var(--test-text-color-dark);
}

/* ===== ВАРІАНТИ ВІДПОВІДІ ===== */
.test-option {
    display: block;
    background: var(--test-option-bg-light);
    border-radius: 14px; /* Більш округлі кути */
    padding: 18px 25px; /* Збільшений padding */
    margin-bottom: 18px; /* Збільшений відступ */
    cursor: pointer;
    border: 2px solid var(--border-light); /* Початковий бордер для чіткості */
    font-size: 1.15rem; /* Трохи більший розмір */
    color: var(--test-text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none; /* Заборона виділення тексту */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Легка тінь для глибини */
}
body.dark .test-option {
    background: var(--test-option-bg-dark);
    border-color: var(--border-dark);
    color: var(--test-text-color-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.test-option:hover {
    background-color: var(--test-option-hover-light);
    border-color: var(--test-primary-main);
    transform: translateY(-3px); /* Підйом при наведенні */
    box-shadow: 0 6px 15px rgba(0, 89, 255, 0.15); /* Яскравіша тінь при наведенні */
}
body.dark .test-option:hover {
    background-color: var(--test-option-hover-dark);
    border-color: var(--accent);
    box-shadow: 0 6px 15px rgba(255, 202, 40, 0.15);
}

.test-option.selected {
    background-color: var(--test-primary-light-bg);
    border-color: var(--test-primary-main); /* Основний колір Testory */
    font-weight: 700;
    color: var(--test-option-selected-text-light);
    transform: scale(1.01); /* Легке збільшення при виборі */
    box-shadow: 0 6px 20px rgba(0, 89, 255, 0.3); /* Виразна тінь */
}
body.dark .test-option.selected {
    background-color: var(--primary-darker); /* Темніший синій для обраної опції в темному режимі */
    border-color: var(--accent); /* Жовтий бордер */
    color: var(--test-option-selected-text-dark); /* Світлий текст */
    box-shadow: 0 6px 20px rgba(255, 202, 40, 0.3);
}

/* ===== КНОПКА "ДАЛІ" ===== */
.test-next-btn {
    background-color: var(--test-primary-main);
    color: white;
    border: none;
    padding: 16px 36px; /* Збільшений padding */
    border-radius: 12px;
    font-size: 1.15rem; /* Збільшений розмір */
    font-weight: 600;
    cursor: pointer;
    margin-top: 40px; /* Більший відступ */
    box-shadow: 0 6px 16px rgba(0, 89, 255, 0.4); /* Більш виразна тінь */
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
body.dark .test-next-btn {
    background-color: var(--accent); /* Акцентний колір у темному режимі */
    color: var(--text-dark); /* Темний текст у кнопці в темному режимі */
    box-shadow: 0 6px 16px rgba(255, 202, 40, 0.4);
}

.test-next-btn:hover:not(:disabled) { /* Ховер тільки якщо кнопка не вимкнена */
    background-color: var(--test-primary-dark-variant);
    transform: translateY(-4px); /* Більш помітний підйом */
    box-shadow: 0 8px 22px rgba(0, 89, 255, 0.5); /* Ще виразніша тінь */
}
body.dark .test-next-btn:hover:not(:disabled) {
    background-color: var(--accent-darker);
    color: var(--text-dark);
    box-shadow: 0 8px 22px rgba(255, 202, 40, 0.5);
}

.test-next-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.6; /* Зменшення прозорості */
}
body.dark .test-next-btn:disabled {
    background-color: #555555;
    color: #bbbbbb;
    box-shadow: none;
}

/* ===== ВИВІД РЕЗУЛЬТАТУ ===== */
#result-section { /* Додав ID для секції результату */
    margin-top: 60px; /* Збільшив відступ зверху */
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--test-primary-main);
    text-align: center;
    min-height: 80px;
    opacity: 0; /* Для анімації появи */
    transform: translateY(20px);
    animation: fadeInItem 0.8s ease forwards;
}
body.dark #result-section {
    color: var(--accent);
}

#result-text { /* Змінив ID на більш конкретний */
    font-size: 2.8rem; /* Збільшений розмір для самого тексту результату */
    font-weight: 800; /* Зробив жирнішим */
    letter-spacing: 0.05em; /* Додав інтервал між літерами */
    margin-bottom: 15px;
    line-height: 1.2;
    text-transform: uppercase; /* Великі літери для виділення */
}

#result-description { /* Додав ID для опису результату */
    font-size: 1.3rem; /* Збільшив розмір */
    color: var(--text-dark);
    margin-top: 20px; /* Збільшив margin-top */
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 600px; /* Обмежив ширину для кращої читабельності */
    margin-left: auto;
    margin-right: auto;
}
body.dark #result-description {
    color: var(--text-light);
}

.result-actions { /* Контейнер для кнопок результату */
    display: flex;
    flex-wrap: wrap; /* Для адаптивності кнопок */
    justify-content: center;
    gap: 20px; /* Відступ між кнопками */
    margin-top: 30px;
}

.share-btn, .back-to-tests-btn { /* Об'єднані стилі для кнопок результату */
    background-color: var(--test-primary-main);
    color: white;
    padding: 14px 30px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 89, 255, 0.3);
    display: inline-flex; /* Для вирівнювання іконки */
    align-items: center;
    gap: 8px; /* Відступ між текстом та іконкою */
    text-decoration: none; /* Для посилань */
}
body.dark .share-btn {
    background-color: var(--accent);
    color: var(--text-dark);
    box-shadow: 0 4px 12px rgba(255, 202, 40, 0.3);
}

.share-btn:hover {
    background-color: var(--test-primary-dark-variant);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 89, 255, 0.4);
}
body.dark .share-btn:hover {
    background-color: var(--accent-darker);
    color: var(--text-dark);
    box-shadow: 0 6px 16px rgba(255, 202, 40, 0.4);
}

.back-to-tests-btn {
    background-color: transparent;
    color: var(--test-primary-main);
    border: 2px solid var(--test-primary-main);
    box-shadow: none; /* Видалити тінь, щоб відрізнялася */
}
body.dark .back-to-tests-btn {
    color: var(--accent);
    border-color: var(--accent);
    background-color: transparent;
}

body.dark .back-to-tests-btn:hover {
    background-color: var(--accent); /* Жовтий фон при ховері */
    color: var(--bg-dark); /* Темний текст */
    box-shadow: 0 4px 12px rgba(255, 202, 40, 0.3); /* Додати тінь при ховері */
}

.back-to-tests-btn:hover {
    background-color: var(--test-primary-main);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 89, 255, 0.3);
}


/* ===== АНІМАЦІЇ ===== */
@keyframes fadeInItem {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== АДАПТИВНІСТЬ (МЕДІА-ЗАПИТИ) ===== */
@media (max-width: 768px) {
    body {
        padding: 15px;
    }
    main {
        padding-top: calc(60px + 20px);
        padding-left: 15px;
        padding-right: 15px;
    }
    .test-container {
        padding: 25px 25px;
        margin: 20px auto;
    }
    .test-title {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    .question-counter {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    .test-question {
        font-size: 1.3rem;
        margin-bottom: 25px;
    }
    .test-option {
        padding: 15px 20px;
        font-size: 1.05rem;
        margin-bottom: 15px;
    }
    .test-next-btn {
        padding: 14px 30px;
        font-size: 1.05rem;
        margin-top: 30px;
    }
    #result-text {
        font-size: 2.2rem; /* Адаптував розмір для мобільних */
        letter-spacing: 0.03em;
    }
    #result-description {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    main {
        padding-top: calc(60px + 15px);
        padding-left: 10px;
        padding-right: 10px;
    }
    .test-container {
        padding: 20px 15px;
        margin: 15px auto;
    }
    .test-title {
        font-size: 1.5rem;
    }
    .test-question {
        font-size: 1.1rem;
    }
    .test-option {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    .test-next-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }
    #result-text {
        font-size: 1.8rem; /* Адаптував розмір для дуже малих екранів */
        letter-spacing: 0.02em;
    }
    #result-description {
        font-size: 1.1rem;
    }
}