/* Основные цвета */
:root {
    --primary-color: #6c5ce7; /* Пастельный фиолетовый */
    --secondary-color: #ff7979; /* Пастельный розовый */
    --background-color: #f0f4f8; /* Легкий фон */
    --text-color: #2d3436; /* Темный текст для хорошей читаемости */
    --border-color: #dfe6e9; /* Светло-серый для границ */
    --hover-color: #55efc4; /* Мятный */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Легкая тень */
    --font-family: 'Inter', sans-serif; /* Современный шрифт */
    --btn-radius: 8px; /* Радиус для кнопок и элементов */
    --transition-speed: 0.3s; /* Время для анимаций */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Эффект тени */
}

/* Общие стили */
body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    color: var(--text-color);
    line-height: 1.6;
}

/* Каталог товаров */
.good-item {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    background-color: white;
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.good-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.good-item__id {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.25em;
    margin-bottom: 12px;
}

.good-item__name {
    font-size: 1.4em;
    color: #333;
    margin-top: 12px;
    font-weight: 600;
}

.good-item__price {
    font-size: 1.3em;
    color: var(--secondary-color);
    font-weight: bold;
    margin-top: 20px;
}

.good-item__btn-add {
    margin-top: 18px;
    padding: 12px 28px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.good-item__btn-add:hover {
    background-color: var(--hover-color);
    transform: scale(1.05);
}

/* Маленькие товары с фильтрами */
.small-good-item {
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-top: 10px;
    border-radius: 8px;
    background-color: white;
    display: flex;
    align-items: center;
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.small-good-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px var(--shadow-color);
}

.small-good-item__img {
    max-width: 50%;
    margin-right: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--shadow-color);
}

.small-good-item__name {
    font-size: 1.2em;
    color: var(--primary-color);
    font-weight: 600;
}

.small-good-item__price {
    color: var(--secondary-color);
    font-weight: bold;
}

/* Корзина */
.cart-item__btn-dec-count,
.cart-item__btn-inc-count {
    background-color: #f7f7f7;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    padding: 8px 18px;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.cart-item__btn-dec-count:hover,
.cart-item__btn-inc-count:hover {
    background-color: #ecf0f1;
    transform: scale(1.05);
}

.cart-item__btn-remove {
    color: var(--secondary-color);
    font-weight: bold;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.cart-item__btn-remove:hover {
    color: #e74c3c;
}

/* Сравнение товаров */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.compare-table th {
    background-color: #f1f2f6;
    color: #555;
    padding: 16px 20px;
    text-align: center;
    font-weight: normal;
    border-bottom: 2px solid var(--border-color);
}

.compare-table th:first-child {
    text-align: left;
    font-weight: bold;
}

.compare-table__good {
    font-size: 1.1em;
    color: var(--primary-color);
}

.compare-table__photo {
    max-width: 150px;
    border-radius: 8px;
    object-fit: cover;
}

.compare-table__price {
    color: var(--secondary-color);
    font-weight: bold;
}

.compare-table__remove {
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.95em;
    font-weight: normal;
    margin-top: 12px;
    text-decoration: underline;
    transition: color var(--transition-speed);
}

.compare-table__remove:hover {
    color: #0984e3;
}

.compare-table tbody tr td:first-child {
    font-weight: bold;
}

/* Фильтрация товаров в сравнении */
.compare-table[data-compare="all"] tbody tr {
    display: table-row;
}

.compare-table[data-compare="equal"] tbody tr:not(.equal) {
    display: none;
}

.compare-table[data-compare="not-equal"] tbody tr.equal {
    display: none;
}

/* Цвета в кружках */
.good-item__colors .color {
    display: inline-block;
    width: 24px; /* Увеличил размер кружка для лучшего восприятия */
    height: 24px;
    border-radius: 50%; /* Делает элемент круглым */
    margin-right: 8px; /* Отступ между цветами */
    cursor: pointer;
    border: 1px solid #ddd; /* Легкая обводка для лучшего отображения */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавное увеличение и тень */
}

/* Эффект при наведении */
.good-item__colors .color:hover {
    transform: scale(1.3); /* Увеличивает кружок при наведении */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Легкая тень при наведении */
}

/* Эффект активного состояния для клика */
.good-item__colors .color:active {
    transform: scale(1.2); /* Немного уменьшаем размер при клике */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); /* Более заметная тень при клике */
}

/* Стиль для кружков, если цвет не определен или пустой */
.good-item__colors .color.empty {
    background-color: #f0f0f0; /* Светлый фон для пустых кружков */
    border: 1px dashed #ccc; /* Легкая пунктирная обводка */
}



.good-item__sizes .size {
    display: inline-block;
    width: 30px; /* Ширина квадратика */
    height: 30px; /* Высота квадратика */
    text-align: center; /* Выравнивание текста по центру */
    line-height: 30px; /* Вертикальное выравнивание текста */
    border: 1px solid #ccc; /* Легкая обводка для квадратиков */
    margin-right: 8px; /* Отступ между квадратиками */
    cursor: pointer;
    font-weight: bold; /* Сделаем текст жирным для выделения */
    background-color: #f8f8f8; /* Цвет фона квадратика */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.good-item__sizes .size:hover {
    transform: scale(1.1); /* Увеличение квадратика при наведении */
    background-color: #e9e9e9; /* Изменение фона при наведении */
}

.good-item__sizes .size:active {
    background-color: #dcdcdc; /* Изменение фона при нажатии */
}


/* Подсвечиваем выбранный размер */
.size.selected {
    background-color: #68809b; /* Синий цвет фона */
    color: white; /* Белый цвет текста */
    border-color: #27405a; /* Синий цвет границы */
}

/* Подсвечиваем выбранный цвет (круглый цвет) */
.color.selected {
    border: 2px solid #333; /* Толстая граница вокруг выбранного цвета */
    box-shadow: 0 0 30px rgba(212, 42, 156, 0.5); /* Легкое свечение */
}