/* ===============================================================
   style.css — Сучасний редизайн Elizabeth's Elegance
   Кольори: Бежевий (фон), Зелений (акценти), Glassmorphism
   =============================================================== */

/* --- Змінні кольорів та параметрів --- */
:root {
    --bg-color: #F8F4E6;       /* М'який бежевий фон */
    --primary-color: #2A5C43;  /* Елегантний глибокий зелений */
    --primary-hover: #1D4330;  /* Темно-зелений для hover */
    --accent-color: #D4AF37;   /* Золотистий акцент */
    --text-dark: #2B3A33;      /* Темний колір тексту */
    --text-light: #F8F4E6;     /* Світлий текст */
    
    --card-bg: rgba(255, 255, 255, 0.75); /* Напівпрозорий білий для ефекту скла */
    --card-shadow: 0 8px 32px rgba(42, 92, 67, 0.08); /* М'яка тінь */
    --card-border: 1px solid rgba(255, 255, 255, 0.5);
    
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Загальне --- */
* { box-sizing: border-box; }
body {
    font-family: 'Outfit', sans-serif;
    margin: 0;
    padding: 0 20px 60px;
    background: var(--bg-color);
    background-image: radial-gradient(circle at top right, rgba(42,92,67,0.05) 0%, transparent 40%),
                      radial-gradient(circle at bottom left, rgba(212,175,55,0.05) 0%, transparent 40%);
    background-attachment: fixed;
    color: var(--text-dark);
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

/* --- Заголовок магазину --- */
.store-title {
    width: 100%;
    text-align: center;
    font-family: 'Great Vibes', cursive;
    font-size: 56px;
    color: var(--primary-color);
    margin: 20px 0;
    padding: 10px 0;
    font-weight: 400;
    letter-spacing: 2px;
    position: relative;
}
.store-title::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    margin: 15px auto 0;
}

header h1 {
    font-size: 28px;
    color: var(--text-dark);
    text-align: center;
    margin: 30px 0 20px;
    font-weight: 600;
}

/* --- Навігація і пошук --- */
.nav-and-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
    padding: 20px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    flex-wrap: wrap;
    gap: 20px;
}
.nav-links { display: flex; align-items: center; gap: 20px; }
.back-arrow {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    transition: var(--transition);
}
.back-arrow::before { content: "←"; margin-right: 8px; font-size: 20px; }
.back-arrow:hover { transform: translateX(-5px); color: var(--primary-hover); }

.stats-button {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    background-color: transparent;
    color: var(--primary-color);
    transition: var(--transition);
}
.stats-button:hover { background-color: var(--primary-color); color: var(--text-light); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(42,92,67,0.2); }

.search-and-age { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.search-bar form, .age-recommendation-form form { display: flex; align-items: center; gap: 10px; }

input[type="text"], input[type="number"], select {
    padding: 12px 20px;
    border: 1px solid rgba(42,92,67,0.2);
    border-radius: 30px;
    background: rgba(255,255,255,0.9);
    color: var(--text-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    transition: var(--transition);
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(42,92,67,0.1);
}
.age-recommendation-form input[type="number"] { width: 140px; }
.search-bar input { width: 260px; }

button[type="submit"], .category-button button, .sidebar button {
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    background: var(--primary-color);
    color: var(--text-light);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(42,92,67,0.15);
}
button[type="submit"]:hover, .category-button button:hover, .sidebar button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42,92,67,0.25);
}

/* --- Кнопки категорій --- */
.category-buttons { 
    display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; justify-content: center;
}
.category-button button {
    background: var(--card-bg);
    color: var(--primary-color);
    border: 1px solid rgba(42,92,67,0.2);
    box-shadow: none;
    padding: 10px 20px;
}
.category-button button:hover, .category-button button.active { 
    background: var(--primary-color); 
    color: var(--text-light);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(42,92,67,0.2);
}

/* --- Слайдер продуктів --- */
.top-products {
    margin: 40px 0;
    position: relative;
    width: 100%;
}
.top-products h2 {
    color: var(--primary-color);
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
}
.product-slider {
    display: flex;
    overflow-x: auto;
    gap: 25px;
    padding: 20px 10px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.product-slider::-webkit-scrollbar { display: none; }

/* Arrow controls */
.arrow-controls {
    position: absolute;
    top: 55%;
    left: -20px; right: -20px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}
.arrow-controls button {
    background: white;
    color: var(--primary-color);
    border: none;
    border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: var(--transition);
}
.arrow-controls button:hover {
    transform: scale(1.1);
    background: var(--primary-color);
    color: white;
}

/* --- Картка продукту --- */
.product {
    flex: 0 0 calc((100% - 100px) / 5);
    scroll-snap-align: start;
    position: relative;
    padding: 15px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    min-width: 220px;
}
.product:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(42,92,67,0.15);
}
.product img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: contain;
    background: #ffffff;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    background: #eef2ef;
}
.product h3 {
    margin: 0 0 10px;
    font-size: 14px;
}
.product h3 a { 
    color: var(--text-dark); 
    background: rgba(42,92,67,0.05);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    transition: var(--transition);
}
.product h3 a:hover { background: var(--primary-color); color: white; }
.product p, .product .product-info p {
    color: var(--text-dark);
    margin: 6px 0;
    font-size: 15px;
    font-weight: 400;
}
.product p:nth-of-type(1) { font-weight: 600; font-size: 18px; } /* Назва категорії */
.product a { text-decoration: none; color: inherit; }

/* --- Контейнер (головна) --- */
.container { display: flex; gap: 30px; margin-top: 40px; }
.sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--card-border);
    border-radius: var(--radius-lg);
    padding: 25px;
    box-shadow: var(--card-shadow);
    height: fit-content;
    position: sticky;
    top: 20px;
}
.sidebar h3 { color: var(--primary-color); margin-top: 0; font-size: 22px; margin-bottom: 20px; }
.filter-section { margin-bottom: 25px; }
.filter-section label { display: block; color: var(--text-dark); font-weight: 600; margin-bottom: 10px; font-size: 15px; }
.filter-list {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 10px;
}
.filter-list::-webkit-scrollbar { width: 6px; }
.filter-list::-webkit-scrollbar-thumb { background: rgba(42,92,67,0.2); border-radius: 3px; }
.filter-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}
.filter-list label:hover { color: var(--primary-color); }
.filter-list input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px; height: 16px;
    cursor: pointer;
}
.sidebar button[type="button"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 10px;
}

/* Range slider */
.range-wrapper { position: relative; height: 30px; margin: 15px 0 10px; }
.range-wrapper input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    appearance: none;
    background: transparent;
    height: 6px;
    top: 12px;
}
.range-wrapper input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    appearance: none;
    width: 20px; height: 20px;
    background: var(--primary-color);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.range-track { position: absolute; height: 6px; background: rgba(42,92,67,0.2); top: 12px; border-radius: 3px; width: 100%; }
#range-track { background: var(--primary-color); z-index: 1; }

.range-values { display: flex; gap: 15px; margin-top: 10px; }
.range-values input[type="number"] {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
}

/* --- Список товарів --- */
.main-content { flex: 1; }
.filtered-products h2 {
    color: var(--primary-color);
    font-size: 28px;
    margin-bottom: 25px;
    font-weight: 600;
}
.product-list { display: flex; flex-wrap: wrap; gap: 25px; }
.product-list .product { flex: 0 0 calc(33.333% - 17px); min-width: 220px; scroll-snap-align: unset; }
.items-info { color: #666; font-size: 15px; margin: 20px 0; text-align: center; }

/* --- Сортування --- */
.sorting-bar {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: var(--card-border);
    border-radius: var(--radius-md);
    padding: 15px 25px;
    margin-bottom: 30px;
    box-shadow: var(--card-shadow);
}
.sorting-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.sort-options, .items-per-page { display: flex; align-items: center; gap: 10px; }
.sort-options label, .items-per-page label { color: var(--text-dark); font-weight: 600; }

/* --- Пагінація --- */
.pagination { margin: 40px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: 10px 16px;
    color: var(--primary-color);
    background: white;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.pagination a:hover { background: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(42,92,67,0.2); }
.pagination span.active { background: var(--primary-color); color: white; }
.pagination span.ellipsis { background: transparent; box-shadow: none; cursor: default; }

/* --- Сторінка товару --- */
.product-container {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.product-image-large { flex: 1; min-width: 300px; max-width: 500px; }
.product-image-large img { 
    width: 100%; height: auto; 
    border-radius: var(--radius-lg); 
    box-shadow: var(--card-shadow); 
}
.product-details {
    flex: 1.5;
    min-width: 320px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
}
.product-details h2 {
    font-family: 'Great Vibes', cursive;
    font-size: 48px;
    color: var(--primary-color);
    margin: 0 0 30px;
    line-height: 1.2;
}
.product-details p { 
    font-size: 18px; 
    color: var(--text-dark); 
    margin: 15px 0; 
    display: flex; 
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(42,92,67,0.1);
}
.product-details p:last-child { border-bottom: none; }
.product-details p strong { color: var(--primary-color); font-weight: 600; min-width: 120px; }

/* --- Відгуки --- */
.reviews-section {
    margin-top: 60px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.reviews-header { margin-bottom: 30px; text-align: center; }
.reviews-header h3 { 
    color: var(--primary-color); 
    font-size: 36px; 
    margin: 0; 
    font-family: 'Great Vibes', cursive; 
}
.review-item {
    margin-bottom: 20px;
    padding: 25px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    transition: var(--transition);
}
.review-item:hover { transform: translateX(5px); }
.review-item h4 { font-size: 18px; color: var(--primary-color); margin: 0 0 10px; }
.review-item .stars { color: var(--accent-color); font-size: 18px; margin: 10px 0; }
.review-item .recommendation { font-style: italic; color: var(--primary-hover); margin: 5px 0; font-weight: 600; }
.review-item p { margin: 8px 0; font-size: 15px; }

/* --- Фільтр відгуків --- */
.reviews-filter-bar {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 25px; align-items: center; margin-bottom: 20px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-group { display: flex; align-items: center; gap: 15px; }
.filter-group label { color: var(--primary-color); font-weight: 600; }

.star-checkboxes { display: flex; gap: 10px; flex-wrap: wrap; }
.star-checkbox {
    border: 1px solid rgba(42,92,67,0.2);
    border-radius: 20px;
    background: white;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}
.star-checkbox span {
    display: block;
    padding: 8px 15px;
    color: var(--accent-color);
}
.star-checkbox input[type="checkbox"] { display: none; }
.star-checkbox input[type="checkbox"]:checked + span { background: var(--primary-color); color: white; }

.reset-button {
    margin-left: auto;
    padding: 10px 24px;
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    background: white;
    color: var(--primary-color);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
}
.reset-button:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(42,92,67,0.2);
}

/* noUiSlider customizations */
#age-slider { height: 8px; border: none; background: rgba(42,92,67,0.1); border-radius: 4px; margin: 0 15px; flex: 1; min-width: 200px; }
#age-slider .noUi-connect { background: var(--primary-color); }
#age-slider .noUi-handle { 
    width: 24px; height: 24px; 
    border-radius: 50%; 
    background: white; 
    border: 3px solid var(--primary-color); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    top: -8px; right: -12px;
}
#age-slider .noUi-handle::before, #age-slider .noUi-handle::after { display: none; }
.age-group-content { display: flex; align-items: center; width: 100%; }

/* --- Статистика --- */
.chart-section { 
    background: var(--card-bg); 
    border-radius: var(--radius-lg); 
    padding: 30px; 
    margin-bottom: 40px; 
    box-shadow: var(--card-shadow); 
}
.chart-section h2 { 
    color: var(--primary-color); 
    font-size: 24px; 
    margin-bottom: 25px; 
    text-align: center; 
}
.chart-controls-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; margin-bottom: 30px; }
.pdf-charts { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.pdf-chart { 
    flex: 0 1 calc(50% - 15px); 
    background: white; 
    padding: 20px; 
    border-radius: var(--radius-md); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    text-align: center; 
    transition: var(--transition); 
    cursor: pointer; 
}
.pdf-chart:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(42,92,67,0.15); }
.pdf-chart img { width: 100%; height: auto; border-radius: 8px; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(43,58,51,0.8); backdrop-filter: blur(5px); }
.modal-content { background: var(--bg-color); margin: 5% auto; padding: 40px; width: 90%; max-width: 1000px; border-radius: var(--radius-lg); position: relative; }
.close { position: absolute; top: 20px; right: 30px; color: var(--primary-color); font-size: 40px; cursor: pointer; transition: 0.3s; }
.close:hover { transform: rotate(90deg); }

/* --- Адаптивність --- */
@media (min-width: 1250px) {
    .top5-arrows { display: none !important; } /* Ховаємо стрілочки Топ-5 тільки на великих екранах */
}
@media (max-width: 1024px) {
    .product-list .product { flex: 0 0 calc(50% - 13px); }
    .product-slider .product { flex: 0 0 calc((100% - 50px) / 3); }
}
@media (max-width: 768px) {
    .container { flex-direction: column; }
    .sidebar { width: 100%; position: static; }
    .product-list .product { flex: 0 0 100%; }
    .product-slider .product { flex: 0 0 calc((100% - 25px) / 2); }
    .arrow-controls button { width: 40px; height: 40px; }
    .filter-row { flex-direction: column; align-items: stretch; }
    .filter-group { flex-direction: column; align-items: flex-start; }
    .age-group-content { flex-direction: column; align-items: stretch; gap: 20px; }
}
@media (max-width: 480px) {
    .nav-and-search { flex-direction: column; padding: 15px; }
    .nav-links { flex-direction: column; width: 100%; }
    .back-arrow, .stats-button { width: 100%; text-align: center; justify-content: center; }
    .search-and-age { flex-direction: column; width: 100%; }
    .search-bar input { width: 100%; }
    .product-slider .product { flex: 0 0 100%; }
}