/* --- Глобальні стилі --- */
:root {
    --bg-page: #f0f2f5;
    --bg-card: #ffffff;
    --dark-bg: #111827;
    --text-dark: #333;
    --text-light: #555;
    --red-accent: #ff4d4d;
    --blue-accent: #007bff;
    --gray-text: #9CA3AF;
    --form-highlight-bg: #e0f0ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-dark);
}
.page-wrapper {
    max-width: 480px;
    margin: 0 auto;
    background-color: var(--bg-card);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
section { padding: 30px 20px; }
h1, h2 { text-align: center; font-weight: 900; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 26px; margin-bottom: 10px; }
.subtitle { text-align: center; color: var(--text-light); margin: 10px 0 20px 0; }
.bg-dark { background-color: var(--dark-bg); }
.bg-dark h2 { color: #fff; }
.bg-dark .subtitle { color: var(--gray-text); }

/* --- Блок 1: Головна пропозиція --- */
.image-wrapper { position: relative; margin-bottom: 20px; }
.main-image { width: 100%; border-radius: 12px; display: block; }
.discount-badge {
    position: absolute; top: 15px; right: 15px; background-color: var(--red-accent);
    color: #fff; font-weight: 700; font-size: 18px; padding: 10px 15px;
    border-radius: 50px; transform: rotate(15deg); box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.selector-options { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.selector-options input[type="radio"] { display: none; }
.selector-options label { cursor: pointer; }
.selector-options label span {
    display: block; padding: 12px 18px; border: 2px solid #e5e7eb;
    border-radius: 10px; font-weight: 700; color: #555;
    background-color: #fff; transition: all 0.2s ease-in-out;
}
.selector-options input[type="radio"]:checked + span {
    background-color: var(--blue-accent); color: #fff;
    border-color: var(--blue-accent); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.price-block { display: flex; justify-content: space-around; align-items: center; margin-bottom: 25px; }
.price-item { font-size: 18px; font-weight: 700; text-align: center; }
.old-price { color: #999; text-decoration: line-through; }
.new-price { font-size: 26px; color: var(--red-accent); }
.cta-button {
    display: block; width: 100%; padding: 20px;
    background: linear-gradient(180deg, #ff6b6b, #ff4d4d);
    color: #fff; text-decoration: none; text-align: center;
    font-size: 20px; font-weight: 700; border-radius: 12px;
    border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(255, 77, 77, 0.4);
    transition: transform 0.2s ease;
}
.cta-button:active { transform



: scale(0.98); }

/* --- Блок 2: Квіз --- */
.quiz-section { background-color: #f8f9fa; }
.quiz-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; text-align: center; }
.quiz-card h4 { margin-bottom: 15px; font-size: 18px; }
.quiz-answers { display: flex; flex-direction: column; gap: 10px; }
.quiz-answer {
    padding: 15px; background: #fff; border: 2px solid var(--blue-accent);
    color: var(--blue-accent); font-weight: 700; border-radius: 8px;
    cursor: pointer; transition: all 0.3s ease;
}
.quiz-answer.active {
    background-color: var(--blue-accent); color: #fff;
    transform: scale(1.03);
}

/* --- Блок 3: Переваги --- */
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.benefit-card {
    background-color: #1F2937; padding: 25px 15px;
    border-radius: 16px; text-align: center;
}
.benefit-icon-wrapper {
    margin: 0 auto 15px auto; width: 60px; height: 60px;
    border-radius: 50%; background-color: rgba(59, 130, 246, 0.1); 
    display: flex; align-items: center; justify-content: center;
}
.benefit-icon-wrapper img { width: 28px; height: 28px; }
.benefit-card h3 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.benefit-card p { color: #D1D5DB; font-size: 14px; line-height: 1.5; }





/* --- Блок 4: Головна форма (з двома типами підсвічування) --- */
.order-section {
    /* Стилі для підсвічування всієї секції */
    background-color: #fff;
    border-radius: 12px;
    border: 3px solid transparent; 
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.order-section.highlighted {
    border-color: var(--blue-accent);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.main-order-form label { 
    display: block; 
    font-weight: 700; 
    margin-bottom: 8px; 
}

.main-order-form input, 
.main-order-form select {
    width: 100%; 
    padding: 15px; 
    font-size: 16px;
    border: 1px solid #ccc; 
    border-radius: 8px; 
    margin-bottom: 20px;
    /* Додаємо перехід для підсвічування самого елемента */
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

/* Стиль для підсвічування самого селекта */
.main-order-form select.highlighted {
    border-color: var(--blue-accent);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.small-text { 
    text-align: center; 
    font-size: 14px; 
    color: var(--text-light); 
    margin-top: 15px; 
}


/* --- Блок 5: Асортимент (ЗІ ЗНИЖКОЮ ТА РОЗМІРОМ) --- */
.assortment-section { 
    background-color: #f8f9fa; 
    padding: 40px 20px;
}

.product-card {
    background: var(--dark-bg);
    border-radius: 20px;
	color: #e0e0e0;
    margin: 0 auto 40px auto; 
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.25);
}

.product-card img { 
    width: 100%; 
    display: block;
    margin: 0;
}

.card-content {
    padding: 25px;
}

.product-card h3 {
    font-size: 24px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 20px; /* Збільшили відступ після заголовку */
    text-align: center; /* Центруємо заголовок */
}

.features-list li {
    margin-bottom: 8.5px;
    padding-left: 5px;
    position: relative;
    line-height: 1.5;
    font-size: 15px;
}

/* ============================================== */
/* Стили для блока "ПЕРЕВАГИ" (как на примере Labubu) */
/* ============================================== */
.features-block {
    padding: 40px 0; /* Відступи зверху/знизу блоку */
    background-color: #f4f4f4; /* Фоновий колір, як на скріншоті */
    text-align: center;
}

.features-block .title {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.feature-item-wrap {
    display: grid;
    /* Налаштування сітки: дві колонки на великих екранах, по одній на мобільних. */
    /* minmax(200px, 1fr) дозволяє карткам бути достатньо компактними. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; /* Відстань між картками */
    max-width: 900px; /* Обмеження загальної ширини сітки для компактності */
    margin: 0 auto; /* Центрування сітки */
    padding: 0 15px; /* Забезпечення відступів по краях на мобільних */
}

.feature-item {
    background-color: #fff; /* Білий фон для кожної картки */
    border-radius: 10px; /* Трохи закруглені кути */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* М'яка тінь */
    overflow: hidden; /* Щоб зображення не виходило за межі заокруглень */
    padding-bottom: 20px; /* Відступ внизу картки для тексту */
    display: flex; /* Використовуємо flexbox, щоб вміст картки був гнучким */
    flex-direction: column; /* Елементи в стовпчик: зображення, потім текст */
    align-items: center; /* Центруємо вміст по горизонталі */
    text-align: center; /* Центруємо текст всередині картки */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px); /* Невеликий підйом при наведенні */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Виражена тінь */
}

.features-block .feature-item .feature-image {
    height: 200px; /* Зменшено висоту з 250px до 200px. Можете налаштувати. */
    overflow: hidden; /* Приховати будь-які частини зображення, які виходять за межі */
    display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom: 20px;
}

/* Саме зображення всередині контейнера */
.features-block .feature-item .feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px; /* Додано округлення кутів. Можете налаштувати значення (наприклад, 5px, 10px, 15px) */
}

.feature-text {
    padding: 0 15px; /* Внутрішні відступи для тексту */
}

.feature-text .feature-title {
    font-size: 19px;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.feature-text .feature-description p {
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 0;
}

/* Медіа-запити для адаптивності */
@media (max-width: 768px) {
    .feature-item-wrap {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 2 колонки на планшетах */
        gap: 15px;
    }
    .features-block .title {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .feature-item-wrap {
        grid-template-columns: 1fr; /* 1 колонка на дуже маленьких екранах */
        gap: 15px;
        padding: 0 10px;
    }
    .feature-image img {
        height: 180px; /* Менша фіксована висота для мобільних */
        object-fit: cover; /* Щоб зображення заповнювало, якщо його пропорції не ідеальні */
    }
    .feature-text .feature-title {
        font-size: 18px;
    }
    .feature-text .feature-description p {
        font-size: 14px;
    }
}

/* НОВИЙ БЛОК ДЛЯ ЦІНИ ЗІ ЗНИЖКОЮ */
.discount-price-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.old-product-price {
    font-size: 20px;
    color: var(--gray-text);
    text-decoration: line-through;
    font-weight: 700;
}
.new-product-price {
    font-size: 32px;
    color: var(--blue-accent);
    font-weight: 900;
}

/* СТИЛІ ДЛЯ ФОРМИ В КАРТЦІ */
.assortment-form input {
    background-color: #1F2937;
    border: 1px solid #374151;
    color: #FFFFFF;
    width: 100%; 
    padding: 15px; 
    font-size: 16px;
    border-radius: 8px; 
    margin-bottom: 10px;
}
.assortment-form input::placeholder {
    color: var(--gray-text);
}


/* --- СТИЛІ ДЛЯ БЛОКУ ВІДГУКІВ --- */
.reviews-section {
    background-color: #f8f9fa;
}

.reviews-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.review-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Робимо аватар круглим */
    object-fit: cover; /* Щоб фото гарно вписалось в круг */
    flex-shrink: 0;
}

.review-content {
    flex-grow: 1;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.review-header h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.review-stars {
    font-size: 16px;
    color: #FFC107; /* Золотий колір для зірок */
}

.review-content p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}




.big-button.secondary-button {
    /* Основні стилі, взяті з вашого cta-button, але зменшені */
    display: inline-block; /* Важливо! Тепер кнопка не займає всю ширину */
    width: auto; /* Ширина адаптується під контент */
    max-width: 90%; /* Щоб не виходила за межі екрану на дуже маленьких пристроях */
    padding: 15px 35px; /* Зменшений вертикальний відступ, але збережено горизонтальний для ширини */
    
    /* Градієнт на сірі відтінки, як ми вже узгодили */
    background: linear-gradient(180deg, #c0c0c0, #808080); /* Від світло-сірого до темно-сірого */
    
    color: #fff; 
    text-decoration: none; 
    text-align: center;
    font-size: 17px; /* Трохи менший розмір шрифту */
    font-weight: 700; 
    border-radius: 12px; /* Закруглення кутів, як у вашого cta-button */
    border: none; 
    cursor: pointer; 
    
    /* Тінь, що відповідає сірому градієнту */
    box-shadow: 0 5px 15px rgba(128, 128, 128, 0.4); 
    
    /* Плавні переходи для всіх важливих властивостей */
    transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease; 
}

/* Ефект при наведенні курсору */
.big-button.secondary-button:hover {
    /* Змінюємо градієнт на трохи темніший або обертаємо для ефекту */
    background: linear-gradient(180deg, #808080, #606060); /* Трохи темніший сірий градієнт */
    
    transform: translateY(-3px); /* Трохи сильніший підйом при наведенні */
    
    /* Тінь стає помітнішою */
    box-shadow: 0 8px 20px rgba(96, 96, 96, 0.5); 
}

/* Ефект при активному натисканні */
.big-button.secondary-button:active {
    transform: translateY(0); /* Повертаємо на місце */
    box-shadow: 0 2px 5px rgba(128, 128, 128, 0.3); /* Тінь зменшується */
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 480px) {
    .big-button.secondary-button {
        padding: 12px 25px; /* Ще трохи зменшуємо відступи на дуже маленьких екранах */
        font-size: 16px; /* Зменшуємо шрифт */
    }
}








/* --- Футер --- */
.footer { text-align: center; padding: 20px; background: #333; color: #aaa; font-size: 14px; }