/* Стили для ссылок в навигации */
.nav-item .nav-link {
    border-radius: 10px; /* Радиус скругления углов */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавное изменение фона и цвета текста */
}

.nav-item .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Прозрачный цвет фона при наведении */
    color: #000; /* Цвет текста при наведении */
}

/* Стили для кнопок поиска */
.form-inline .btn.btn-outline-secondary {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавное изменение фона и текста */
}

.form-inline .btn.btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* Карточка с плавной анимацией */
.container-sm .card {
    transition: transform 0.3s ease; /* Плавная анимация трансформации */
    transform-origin: top center; /* Увеличиваем карточку от верхней части */
    background-color: white;  /* Белый фон для карточки */
    padding: 15px;  /* Добавляем отступы внутри карточки */
}

/* При наведении увеличиваем только саму карточку */
.container-sm .card:hover {
    transform: scale(1.01); /* Увеличиваем карточку */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Добавляем тень */
    background-color: white;  /* Белый фон для карточки */
}

/* Убираем трансформацию для всех внутренних элементов карточки */
.container-sm .card * {
    transform: none !important; /* Убираем трансформацию для всех вложенных элементов */
}

/* Стили для ссылок внутри карточки */
.card-link {
    color: black; /* Цвет ссылки */
    text-decoration: none; /* Удалить подчеркивание */
    transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

/* Маска для блокировки экрана */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный чёрный фон */
    z-index: 9999; /* Маска поверх других элементов */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Стиль для изображения внутри карточки */
.card-content img {
    display: block; /* Убирает возможные отступы inline-элемента */
    margin: 0 auto; /* Центрирует изображение */
    margin-bottom: 5px; /* Уменьшаем отступ между изображением и заголовком */
    padding: 0; /* Убирает внутренние отступы у изображения */
}




/* Стиль для загрузчика */
.loader {
    border: 16px solid #f3f3f3; /* Серый цвет */
    border-top: 16px solid #3498db; /* Синий цвет */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite; /* Анимация вращения */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Стили для кнопки "Добавить в корзину" */
.addToCartBtn {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавное изменение при нажатии */
}

/* Стили для кнопки при нажатии */
.addToCartBtn:active, .addToCartBtn.pressed {
    transform: scale(0.95); /* Уменьшение масштаба при нажатии */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Тень при нажатии */
}

/* Кнопка с эффектом при нажатии */
.addToCartBtn.pressed {
    transform: scale(0.95); /* Уменьшение масштаба при нажатии */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Тень для кнопки при нажатии */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавная анимация */
}