/* ==========================================================================
    1. Глобальні змінні та базові стилі
    ========================================================================== */
:root {
    --bg-light: #F9F6F1;
    --bg-dark: #26422b;
    --text-dark: #290f05;
    --text-light: #FFFFFF;
    --text-secondary: #6B7280;
    --cta-primary: #ff6c39;
    --cta-primary-hover: #D05E3C;
    --border-color: #E5E7EB;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* Секціям задано відступ зверху, щоб якірні посилання не перекривались шапкою */
section[id] {
    scroll-margin-top: 100px;
}


/* ==========================================================================
    2. Типографіка
    ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
}

main h1 { font-size: 3.75rem; line-height: 1.15; font-weight: 800; }
main h2 { font-size: 3.5rem; line-height: 1.2; font-weight: 700; }
main h3 { font-size: 1.75rem; line-height: 1.4; font-weight: 600; }
p, li { font-size: 1rem; line-height: 1.6; }

@media (max-width: 768px) {
    main h1 { font-size: 3rem; }
    main h2 { font-size: 2.5rem; }
    main h3 { font-size: 1.5rem; }
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

strong {
    font-weight: 700;
    color: var(--text-dark);
}

.text-on-dark strong {
    color: var(--text-light);
}

.text-cta {
    color: var(--cta-primary);
    font-weight: 700;
}


/* ==========================================================================
    3. Компоненти: Кнопки, Картки, Форми
    ========================================================================== */

/* --- Кнопки --- */
.cta-button {
    background-color: var(--cta-primary);
    color: var(--text-light);
    font-weight: 700;
    border-radius: 12px;
    padding: 1rem 2.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px -2px rgba(229, 114, 80, 0.3);
    display: inline-block;
}
.cta-button:hover {
    background-color: var(--cta-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -2px rgba(229, 114, 80, 0.4);
}

/* --- Картки --- */
.card {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .card { padding: 2rem; }
}

.dark-card {
    background-color: var(--bg-dark);
    color: var(--text-light);
    border-radius: 1.25rem;
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .dark-card { padding: 2rem; }
}

/* --- Елементи форм --- */
.form-input.error,
.form-select.error {
    border-color: #ef4444;
    border-width: 1px;
}
.form-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(229, 114, 80, 0.3);
    border-color: var(--cta-primary);
}

/* ==========================================================================
4. УНІФІКОВАНИЙ АКОРДЕОН (Стиль Калькулятора)
========================================================================== */
    .accordion-header {
    transition: background-color 0.3s ease;
}

.accordion-header.open {
    /* Цей фон буде застосовано, коли секція відкрита */
    background-color: var(--section-bg-color, #f9fafb); 
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #f9fafb;
    border-radius: 0 0 1rem 1rem;
}

.accordion-content select {
    background-color: #FFFFFF;
}

.chevron-icon {
    transition: transform 0.3s ease;
}

.accordion-header.open .chevron-icon {
    transform: rotate(180deg);
}


/* ==========================================================================
    5. Стилі Хедера та Навігації
    ========================================================================== */
#sticky-header {
    transition: transform 0.3s ease-in-out;
}
#sticky-header.header-visible {
    transform: translateY(0);
}
#progress-bar {
    background-color: var(--cta-primary);
    transition: width 0.1s linear;
}
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

/* ==========================================================================
    6. Стилі секцій
    ========================================================================== */

/* --- Hero Section --- */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.hero-price {
    font-weight: 700;
    font-size: 1.25rem;
}
.hero-price .old {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-weight: 500;
}
.hero-price .new {
    color: var(--text-dark);
}
.hero-social-proof {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}
.hero-photo-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    min-height: 450px;
}
.hero-photo {
    width: 100%;
    max-width: 450px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
}
.hero-overlay-card {
    position: absolute;
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 0.5rem 0.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: max-content;
    max-width: 300px;
}
.hero-card-1 { top: 3%; left: 5%; transform: translate(-15%, -30%); }
.hero-card-2 { top: 25%; right: 5%; transform: translate(25%, -50%); background-color: var(--cta-primary); }
.hero-card-3 { bottom: -3%; left: 25%; transform: translateX(-30%); }

@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 4fr 5fr; gap: 4rem; }
    .hero-photo-container { margin-top: 0; min-height: auto; }
}
@media (max-width: 1023px) {
    .battery-wrapper-link { display: none; }
}
@media (max-width: 768px) {
    .hero-overlay-card { max-width: calc(100% - 0.5rem); }
    .hero-card-1 { top: -5%; left: -0.5rem; transform: translateY(20%); }
    .hero-card-2 { top: 40%; right: -0.5rem; transform: translateY(-10%); }
    .hero-card-3 { bottom: 5%; left: 30%; transform: translate(-50%, 30%); }
}

/* --- Інші секції --- */
.scroll-down-icon {
    cursor: pointer;
    margin-top: 2.5rem;
    transition: transform 0.3s ease;
}
.scroll-down-icon:hover {
    transform: translateY(5px);
}

.pricing-card-popular {
    transform: scale(1.05);
    z-index: 10;
}
@media (max-width: 1024px) {
    .pricing-card-popular { transform: scale(1); }
}

.old-price {
    text-decoration: line-through;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.new-price {
    font-size: 1.75rem;
    color: var(--text-dark);
    font-weight: 800;
    line-height: 1;
}

/* --- Секція Додатків (Ecosystem) та Модальне вікно --- */
.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    box-shadow: 0 4px 15px -5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}
.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    border-color: var(--cta-primary);
}
.app-card img {
    width: 80px;
    height: 80px;
    border-radius: 1.25rem;
    margin-bottom: 1rem;
    object-fit: cover;
}
.app-card h3 {
    font-size: 1rem;
    font-weight: 700;
}

#app-modal {
    transition: opacity 0.3s ease-in-out;
}
#app-modal.visible {
    opacity: 1;
    pointer-events: auto;
}
#app-modal.visible #modal-content {
    transform: scale(1);
}
#modal-content {
    width: 100%;
    max-width: 56rem;
    transition: transform 0.3s ease-in-out;
}
#modal-icon {
    object-fit: cover;
}
.modal-video-container {
    position: relative;
    background-color: #000;
}
.modal-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-sound-button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.2s ease;
}
.video-sound-button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

@media (min-width: 1024px) {
    #modal-content .grid { grid-template-columns: 1fr 1fr; }
    .modal-video-container { aspect-ratio: 9 / 16; }
}
@media (max-width: 1023px) {
    #modal-content {
        width: 100%;
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        display: flex;
        flex-direction: column;
        border-radius: 0.75rem;
        background-color: white;
        overflow: hidden;
    }
    #modal-content .grid {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
    }
    .modal-video-container {
        width: 100%;
        height: 60vh;
        flex-shrink: 0;
    }
    .modal-video-container video {
        object-fit: contain;
    }
    #modal-content .grid > div:last-child {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        overflow: hidden;
    }
    #modal-title { font-size: 1.5rem; line-height: 1.2; }
    #modal-description {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
        flex-grow: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #modal-icon { width: 40px; height: 40px; margin-right: 0.75rem; }
    #modal-content .grid > div:last-child .flex-wrap {
        margin-top: auto;
        padding-top: 0.5rem;
        flex-shrink: 0;
    }
}


/* ==========================================================================
    7. Стилі Калькулятора
    ========================================================================== */

/* --- Палітра кольорів для секцій калькулятора --- */
:root {
    --c-nutrition-bg: #eaf6ec; --c-nutrition: #28a745;
    --c-activity-bg: #e6f2ff;  --c-activity: #007bff;
    --c-lifestyle-bg: #fff8e1; --c-lifestyle: #ffc107;
    --c-wellbeing-bg: #fff0e6; --c-wellbeing: #fd7e14;
    --c-goal-bg: #f3e8ff;      --c-goal: #8f48ea;
}

/* --- Акордеон калькулятора --- */
#calculator .accordion-header {
    transition: background-color 0.3s ease;
}
#calculator .accordion-header.open {
    background-color: var(--section-bg-color, #f9fafb);
}
#calculator .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #f9fafb;
    border-radius: 0 0 1rem 1rem;
}
#calculator .accordion-content select {
    background-color: #FFFFFF;
}
#calculator .chevron-icon {
    transition: transform 0.3s ease;
}
#calculator .accordion-header.open .chevron-icon {
    transform: rotate(180deg);
}

/* --- Прогрес-бар калькулятора (нова батарейка) --- */
.calculator-battery-container {
position: relative;
display: flex;
flex-wrap: wrap; /* Дозволяє переносити елементи на мобільних */
gap: 8px;
padding: 8px;
border: 3px solid #d1d5db; /* Сіра рамка, як у незаповненої батареї */
border-radius: 16px;
justify-content: center; /* Центрування елементів */
background-color: #f9fafb;
}

/* "Плюсик" на кінці батареї */
.calculator-battery-container::after {
content: '';
position: absolute;
width: 10px;
height: 40px;
background-color: #d1d5db;
border-radius: 0 6px 6px 0;
top: 50%;
right: -13px;
transform: translateY(-50%);
}

.calculator-battery-cell {
flex-grow: 1; 
min-width: 100px;
height: 50px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
color: var(--text-dark);
transition: background 0.5s ease-out;
position: relative;
overflow: hidden; 
cursor: pointer; /* Додаємо курсор, щоб показати клікабельність */

/* Динамічний градієнт для заповнення (ЗМІНЕНО НАПРЯМОК) */
background: linear-gradient(
to right, /* <-- ОСЬ ЦЯ ЗМІНА (було 'to top') */
var(--cell-color, #e5e7eb),
var(--cell-color, #e5e7eb) var(--fill-percentage, 0%),
#e5e7eb var(--fill-percentage, 0%),
#e5e7eb
);
}

.calculator-battery-cell span {
position: relative; /* Щоб текст був поверх градієнту */
z-index: 1;
}

/* Стилі для іконок всередині батарейки */
.calculator-battery-cell img {
width: 32px;
height: 32px;
position: relative;
z-index: 1;
/* Фільтри роблять іконку менш нав'язливою та краще читабельною на кольоровому фоні */
filter: grayscale(20%) contrast(0.9) brightness(0.95);
pointer-events: none; /* Щоб клік спрацьовував на самій комірці, а не на іконці */
}

/* Додайте цей блок для кращої адаптивності на малих екранах */
@media (max-width: 480px) {
.calculator-battery-container {
gap: 4px; /* Зменшуємо відступ між комірками */
padding: 4px;
}
.calculator-battery-container::after {
height: 30px; /* Зменшуємо "носик" батареї */
right: -9px;
width: 8px;
}
.calculator-battery-cell {
min-width: 60px; /* Зменшуємо мінімальну ширину комірки */
height: 40px;    /* Зменшуємо висоту комірки */
}
.calculator-battery-cell img {
width: 24px;   /* Робимо іконки значно меншими */
height: 24px;
}
}



/* --- Блоки результатів калькулятора --- */
#results-container .metric-card {
    background-color: #F9FAFB;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 1rem;
}
#results-container .risk-card {
    background-color: #FEF2F2;
    border: 1px solid #FEE2E2;
    padding: 1.25rem;
    border-radius: 1rem;
}
.recommendation-card {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 0.75rem;
    border-width: 1px;
}

.results-header {
    text-align: center;
    margin-bottom: 2rem; /* 32px */
    padding: 1.5rem;
    background-color: #f3f4f6; /* Світло-сірий фон */
    border-radius: 1rem; /* 16px */
    border: 1px solid var(--border-color);
}
.results-header-icon {
    width: 56px; /* 56px */
    height: 56px;
    margin: 0 auto 1rem; /* Відступ знизу */
    opacity: 0.8;
}

#risk-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}
.risk-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* 16px */
    background-color: #fff5f5; /* Дуже світлий червоний */
    padding: 1rem; /* 16px */
    border-radius: 0.75rem; /* 12px */
    border-left: 4px solid #ef4444; /* Червона лінія зліва */
}
.risk-icon-wrapper {
    flex-shrink: 0;
}
.risk-title {
    font-weight: 700;
    color: #b91c1c; /* Темно-червоний */
    margin-bottom: 0.25rem;
}
.risk-description {
    font-size: 0.875rem; /* 14px */
    line-height: 1.6;
    color: #991b1b; /* Трохи світліший червоний */
}
.risk-severity {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    border-radius: 9999px;
    text-transform: capitalize;
}


.severity-критичний {
    background-color: #ef4444; /* ЧЕРВОНИЙ */
    color: white;
}
.severity-високий {
    background-color: #f97316; /* ОРАНЖЕВИЙ */
    color: white;
}
.severity-середній {
    background-color: #eab308; /* ЖОВТИЙ */
    color: white;
}

.recommendation-icon {
    flex-shrink: 0;
    margin-right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}

/* --- Тултіпи (Підказки) --- */
.dynamic-tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.875rem;
line-height: 1.5;
max-width: 280px;
width: max-content;
z-index: 1000; /* Найвищий z-index */
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none; /* Не заважає курсору */
}
.dynamic-tooltip.visible {
opacity: 1;
transform: translateY(0);
}


.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.tooltip-icon {
    margin-left: 8px;
    cursor: pointer;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* ================================================================ */
/* СТИЛІ ДЛЯ ГОРИЗОНТАЛЬНОГО СЛАЙДЕРА ВІДГУКІВ   */
/* ================================================================ */

/* 1. Обгортка для створення ефекту градієнта по краях */
.scroll-wrapper {
position: relative;
}

/* Псевдо-елемент, що створює градієнтну тінь справа */
.scroll-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px; /* Ширина градієнта */
background: linear-gradient(to right, transparent, var(--bg-light));
pointer-events: none; /* Дозволяє клікати крізь градієнт */
}

/* 2. Контейнер, що буде прокручуватись */
.horizontal-scroll-container {
display: flex;
overflow-x: auto; /* Вмикає горизонтальний скрол */
gap: 1.5rem; /* 24px - відстань між картками */
padding: 1rem 0; /* Вертикальні відступи */

/* Магія для "прилипання" карток при скролі */
scroll-snap-type: x mandatory;

/* Покращує плавність скролу на мобільних */
-webkit-overflow-scrolling: touch;

/* Приховуємо стандартну смугу прокрутки */
scrollbar-width: none; /* Firefox */
}
.horizontal-scroll-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

/* 3. Стилі для окремого елемента (відгуку) */
.scroll-item {
flex: 0 0 90%; /* Не розтягувати, не стискати, базова ширина 90% */
scroll-snap-align: start; /* Прилипання до початку елемента */
}

/* Адаптація для екранів від 768px (планшети та десктоп) */
@media (min-width: 768px) {
.scroll-item {
flex-basis: 48%; /* Показуємо приблизно дві картки одночасно */
}
}

/* ==========================================================================
Стилі секції "Додатки" (Ecosystem) та Модального вікна
========================================================================== */
.app-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; background-color: #FFFFFF; border: 1px solid var(--border-color); border-radius: 1.25rem; box-shadow: 0 4px 15px -5px rgba(0,0,0,0.05); transition: all 0.3s ease; cursor: pointer; }
.app-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); border-color: var(--cta-primary); }
.app-card img { width: 80px; height: 80px; border-radius: 1.25rem; margin-bottom: 1rem; object-fit: cover; }
.app-card h3 { font-size: 1rem; font-weight: 700; }
#app-modal { transition: opacity 0.3s ease-in-out; }
#app-modal.visible { opacity: 1; pointer-events: auto; }
#app-modal.visible #modal-content { transform: scale(1); }
#modal-content { width: 100%; max-width: 56rem; transition: transform 0.3s ease-in-out; }
.modal-video-container { position: relative; background-color: #000; }
.modal-video-container video { width: 100%; height: 100%; object-fit: cover; }
.video-sound-button { position: absolute; bottom: 1rem; right: 1rem; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.4); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); transition: background-color 0.2s ease; }
.video-sound-button:hover { background-color: rgba(0, 0, 0, 0.6); }
@media (min-width: 1024px) {
#modal-content .grid { grid-template-columns: 1fr 1fr; }
.modal-video-container { aspect-ratio: 9 / 16; }
}
@media (max-width: 1023px) {
#modal-content { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; border-radius: 0.75rem; overflow: hidden; }
#modal-content .grid { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.modal-video-container { width: 100%; height: 60vh; flex-shrink: 0; }
.modal-video-container video { object-fit: contain; }
#modal-content .grid > div:last-child { flex-grow: 1; display: flex; flex-direction: column; padding: 1.5rem 1rem !important; overflow: hidden; }
#modal-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
#modal-description { font-size: 0.875rem !important; line-height: 1.5 !important; margin-bottom: 0.75rem !important; flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#modal-icon { width: 40px !important; height: 40px !important; margin-right: 0.75rem !important; }
}