/* Задний фон для элементов с классом bg-light */
body .bg-light {
    background-color: #121212 !important;
}

/* Цвет для всех элементов path */
path {
    fill: #121212 !important;
}

/* Цвет текста с классом text-black внутри text-center */
.text-center .text-black {
    color: #f0f8ff !important;
}

/* Цвет ссылок в навигационной панели */
.navbar-light .navbar-nav .nav-link {
    color: #f4efdb !important;
}

/* Цвет ссылок при наведении в навигационной панели */
.navbar-light:hover .navbar-nav:hover .nav-link:hover {
    color: #dbd6c4 !important;
}

/* Цвет для различных заголовков и элементов с классом text-black */
.text-black h1, .text-black .h1, .text-black .cart-cost {
    color: #ffff !important;
}

/* Задний фон для элементов с классом bg-light-dark */
body .bg-light-dark {
    background-color: #181818 !important;
}

/* Цвет текста с классом text-muted внутри text-center */
.text-center .text-muted {
    color: #f8f8f8 !important;
}

/* Убедимся, что цвет текста с классом text-black не изменяется при наведении */
.text-black {
    color: #ffff !important;
}

/* Перекрываем цвет при наведении для классов text-black, text-center и navbar */
.text-black:hover,
.text-center .text-black:hover,
.navbar-light .navbar-nav .nav-link:hover,
.text-center .text-muted:hover {
    color: #ffff !important;
}

/* Задний фон для карточек и модальных окон */
.card.border-0.shadow-lg.rounded-xl.mb-5, .modal-content {
    background-color: #181818 !important;
}

/* Скругляем углы только у modal-content */
.modal-content {
    border-radius: 16px !important;
    overflow: hidden; /* Убедимся, что скругление углов применяется корректно */
}

/* Плавная, менее выраженная тряска */
@keyframes shake {
    0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
    10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); }
    20% { transform: translate(-1.5px, 0px) rotate(0.5deg); }
    30% { transform: translate(1.5px, 1px) rotate(0deg); }
    40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
    50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); }
    60% { transform: translate(-1.5px, 0.5px) rotate(0deg); }
    70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
    80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
    90% { transform: translate(0.5px, 1px) rotate(0deg); }
    100% { transform: translate(0.5px, -1px) rotate(-0.5deg); }
}

/* Стили для кнопки внутри product-card */
.product-card .btn {
    padding: 0.5rem 1rem !important; /* Уменьшаем внутренние отступы */
    font-size: 0.875rem !important;  /* Уменьшаем размер шрифта */
    border-radius: 16px !important;  /* Увеличиваем радиус скругления углов */
    margin-bottom: 0.7rem !important; /* Увеличиваем нижний отступ */
    transition: all 0.3s ease;       /* Плавный переход для всех изменений */
}

/* Свечение, увеличение и легкая плавная тряска при наведении курсора */
.product-card .btn:hover {
    box-shadow: 0 0 20px rgba(250, 82, 82, 0.6); /* Свечение */
    transform: scale(1.05);                      /* Легкое увеличение размера */
    animation: shake 1s;                         /* Плавная тряска */
    animation-iteration-count: infinite;         /* Бесконечная тряска */
}


/* Ширина кнопок в зависимости от действия */
button[data-request="onAdd"],
button[data-request="onRemove"],
button[data-request="onRenderProduct"] {
    width: 80% !important;
}

/* Цвет иконок внутри кнопки с атрибутом data-request="onRenderProduct" */
button[data-request="onRenderProduct"] svg path,
button[data-request="onRenderProduct"] svg circle {
    fill: #ffffff !important;
}

/* Ширина определенной кнопки с классами btn-danger и animate-up-2 */
button.btn.mb-2.mr-2.btn-danger.animate-up-2 {
    width: 50% !important;
}

/* Цвет различных заголовков и иконок */
h5.card-title.mb-3.font-weight-bolder, 
i.fas.fa-ruble-sign.ml-2, 
h6.font-weight-bolder, 
i.fas.fa-ruble-sign.mx-1 {
    color: #ffff !important;
}

.modal-body {
    background-color: #181818 !important;
}

/* Цвет текста "Выберите предпочитаемый способ оплаты", "Электронные деньги", "Россия", "Любые страны", "Казахстан", "Мобильный" */
.modal-body h1,
.modal-body h4,
.modal-body p.mb-5 {
    color: aliceblue !important; /* Белый текст */
}

/* Отключение изменения цвета при наведении */
.modal-body h1:hover,
.modal-body h4:hover,
.modal-body p.mb-5:hover {
    color: aliceblue !important;
}

/* Цвет текста, такого как "СБП", "Минимум 10 ₽", "МИР, ₽", "Visa, ₽" */
.modal-body h5,
.modal-body p.small,
h4.mb-0.font-weight-700 {
    color: #121111 !important; /* Чёрный текст */
}

/* Отключение изменения цвета при наведении */
.modal-body h5:hover,
.modal-body p.small:hover {
    color: #121111 !important;
}




/* Контейнер для кнопок с отступами */
.card-body.p-0 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Стиль для панели с кнопками */
.categories {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: unset !important;
}

/* Стиль для кнопок */
.card-body.p-0 .categories.filter-button-group .category.filter-button {
    margin-right: 25px; /* Увеличиваем расстояние между кнопками */
    border-radius: 12px; /* Закругляем углы кнопок */
    transition: all 0.3s ease; /* Плавный переход для анимации */
    padding: 2px 10px; /* Уменьшаем высоту кнопок */
    font-size: 1rem; /* Увеличиваем размер шрифта */
}

/* Удаляем отступ у последней кнопки */
.card-body.p-0 .categories.filter-button-group .category.filter-button:last-child {
    margin-right: 0;
}

/* Стиль для первой и последней кнопок */
.card-body.p-0 .categories.filter-button-group .category.filter-button:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.card-body.p-0 .categories.filter-button-group .category.filter-button:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Стиль для активированной кнопки */
.card-body.p-0 .categories.filter-button-group .category.filter-button.active {
    box-shadow: 0 0 8px rgba(250, 82, 82, 0.4); /* Уменьшаем размер обводки и свечения */
    padding: 4px 10px; /* Увеличиваем внутренний отступ по вертикали для активированных кнопок */
}

/* Анимация при смене кнопок */
@keyframes buttonChange {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

/* Применение анимации при наведении и активировании */
.card-body.p-0 .categories.filter-button-group .category.filter-button:hover,
.card-body.p-0 .categories.filter-button-group .category.filter-button.active {
    animation: buttonChange 0.3s ease-in-out;
    animation-fill-mode: forwards; /* Сохраняем конечное состояние анимации */
}