/* Made by Szarkan https://wiki.catcraftmc.ru */

:root {
    --white: #dbdbdb;
    --black: #1b1821;
    --shade: #353535;
    --neon-red: #ff0000;
    --neon-red-glow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
}

body, html {
    background-color: #1b1921 !important;
}

/* ЯРКИЕ КРАСНЫЕ НЕОНОВЫЕ КНОПКИ */
.btn-danger,
.btn-primary,
.btn-icon.btn-danger,
.product-card .btn,
.server-card .btn,
.modal-content .btn:not(.close):not(.btn-plus):not(.btn-minus):not(.cart-remove):not([class*="remove"]):not([class*="delete"]) {
    background-color: #ff0000 !important;
    background-image: linear-gradient(45deg, #ff0000, #ff3333) !important;
    border: 2px solid #ff3333 !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 15px rgba(255, 0, 0, 0.4),
        0 0 15px rgba(255, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Неоновое свечение при наведении */
.btn-danger:hover,
.btn-primary:hover,
.btn-icon.btn-danger:hover,
.product-card .btn:hover,
.server-card .btn:hover,
.modal-content .btn:hover:not(.close):not(.btn-plus):not(.btn-minus):not(.cart-remove):not([class*="remove"]):not([class*="delete"]) {
    background-color: #ff3333 !important;
    background-image: linear-gradient(45deg, #ff3333, #ff5555) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 6px 25px rgba(255, 0, 0, 0.6),
        0 0 25px rgba(255, 0, 0, 0.5) !important;
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #ff5555 !important;
}

/* Эффект при нажатии */
.btn-danger:active,
.btn-primary:active,
.btn-icon.btn-danger:active,
.product-card .btn:active,
.server-card .btn:active,
.modal-content .btn:active:not(.close):not(.btn-plus):not(.btn-minus):not(.cart-remove):not([class*="remove"]):not([class*="delete"]) {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(255, 0, 0, 0.4) !important;
    background-color: #ff0000 !important;
    background-image: linear-gradient(45deg, #cc0000, #ff0000) !important;
    transition: all 0.05s ease !important;
}

/* Эффект пульсации для привлечения внимания */
@keyframes pulse {
    0% {
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 4px 15px rgba(255, 0, 0, 0.4),
            0 0 15px rgba(255, 0, 0, 0.3) !important;
    }
    50% {
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 4px 20px rgba(255, 0, 0, 0.6),
            0 0 20px rgba(255, 0, 0, 0.5) !important;
    }
    100% {
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 4px 15px rgba(255, 0, 0, 0.4),
            0 0 15px rgba(255, 0, 0, 0.3) !important;
    }
}

/* Пульсация только для кнопки "К товарам" на главной */
#welcome-section .btn-icon.btn-danger {
    animation: pulse 2s infinite !important;
}

/* Убираем анимацию при наведении, чтобы не конфликтовала */
#welcome-section .btn-icon.btn-danger:hover {
    animation: none !important;
}

/* ОСТАЛЬНЫЕ СТИЛИ (оставляем как были) */
.product-card, .server-card {
    background: var(--black) !important;
    border: 2px solid var(--shade) !important;
}

.select-server-card {
    background: var(--black) !important;
    border: 2px solid var(--shade) !important;
}

.form-control, .modal-content, .bg-soft {
    background-color: var(--black) !important;
}

input, .text-black .text-muted {
    border: 2px solid var(--shade) !important;
}

.text-black a:not(.btn), .text-black h1, .text-black h2, .text-black h3, .text-black h4, .text-black h6, .text-black .h1, .text-black .h2, .text-black .h3, .text-black .h4, .text-black .h5, .text-black .h6, .text-black .display-1, .text-black .display-2, .text-black .display-3, .text-black .display-4, .title, .category, .item-price, .item-title, .modal-title, .label, label, .input-group .form-control, .text-soft, .text-soft:hover, .text-black, .text-black:hover, h4, p, .text-black h5 {
    color: var(--white) !important;
}

h5.font-weight-bolder.mb-1.text-black[class="font-weight-bolder mb-1 text-black"] {
    color: var(--black) !important;
}

p.small.mb-0.text-uppercase.text-black[class="small mb-0 text-uppercase text-black"] {
    color: var(--black) !important;
}

.cart-cost {
    color: white !important;
}

.mr-1, .mx-1 {
    margin-right: 0.25rem !important;
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* ФИКС ДЛЯ МАЛЕНЬКОЙ КНОПКИ МУСОРКИ */
/* Сначала убираем ВСЕ стили у кнопки мусорки, потом применяем свои */
.cart-item-actions .cart-remove,
.cart-item-actions a[class*="remove"],
.cart-item-actions button[class*="remove"],
.cart-item-actions a[class*="delete"],
.cart-item-actions button[class*="delete"],
#cart .modal-content .cart-remove,
#cart .modal-content a[class*="remove"],
#cart .modal-content button[class*="remove"],
#cart .modal-content a[class*="delete"],
#cart .modal-content button[class*="delete"] {
    all: unset !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    padding: 2px !important;
    margin: 0 !important;
    margin-right: 8px !important;
    background: rgba(255, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 51, 51, 0.3) !important;
    border-radius: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

/* Иконка внутри кнопки удаления */
.cart-item-actions .cart-remove svg,
.cart-item-actions a[class*="remove"] svg,
.cart-item-actions button[class*="remove"] svg,
.cart-item-actions a[class*="delete"] svg,
.cart-item-actions button[class*="delete"] svg,
#cart .modal-content .cart-remove svg,
#cart .modal-content a[class*="remove"] svg,
#cart .modal-content button[class*="remove"] svg,
#cart .modal-content a[class*="delete"] svg,
#cart .modal-content button[class*="delete"] svg {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    fill: white !important;
    stroke: white !important;
    pointer-events: none !important;
}

/* Наведение на кнопку удаления */
.cart-item-actions .cart-remove:hover,
.cart-item-actions a[class*="remove"]:hover,
.cart-item-actions button[class*="remove"]:hover,
.cart-item-actions a[class*="delete"]:hover,
.cart-item-actions button[class*="delete"]:hover,
#cart .modal-content .cart-remove:hover,
#cart .modal-content a[class*="remove"]:hover,
#cart .modal-content button[class*="remove"]:hover,
#cart .modal-content a[class*="delete"]:hover,
#cart .modal-content button[class*="delete"]:hover {
    background: rgba(255, 0, 0, 0.3) !important;
    border-color: rgba(255, 51, 51, 0.5) !important;
    transform: scale(1.05) !important;
}

/* КНОПКА [-] - НЕ ТРОГАЕМ */
.btn-minus {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 8px !important;
    background: rgba(27, 24, 33, 0.5) !important;
    border: 1px solid var(--shade) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--white) !important;
    font-weight: bold !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

/* Кнопка + */
.btn-plus {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 8px !important;
    background: rgba(27, 24, 33, 0.5) !important;
    border: 1px solid var(--shade) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--white) !important;
    font-weight: bold !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

/* Контейнер управления количеством */
.cart-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 8px !important;
    border: 1px solid var(--shade) !important;
    border-radius: 8px !important;
    background: rgba(27, 24, 33, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Поле ввода количества */
.cart-item-actions input[type="number"],
.cart-item-actions input[type="text"] {
    width: 45px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 5px !important;
    margin: 0 !important;
    text-align: center !important;
    background: var(--black) !important;
    border: 1px solid var(--shade) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* Оптимизация для производительности */
.btn-danger,
.btn-primary,
.btn-icon.btn-danger {
    will-change: transform, box-shadow;
}

/* Отключаем сложные эффекты на мобильных при скролле */
@media (max-width: 768px) {
    .btn-danger,
    .btn-primary,
    .btn-icon.btn-danger {
        animation: none !important;
        transition: transform 0.1s ease, background-color 0.1s ease !important;
        padding: 10px 16px !important;
        min-height: 42px !important;
    }
    
    /* Мусорка на мобильных */
    .cart-item-actions .cart-remove,
    .cart-item-actions a[class*="remove"],
    .cart-item-actions button[class*="remove"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
    
    .cart-item-actions .cart-remove svg,
    .cart-item-actions a[class*="remove"] svg,
    .cart-item-actions button[class*="remove"] svg {
        width: 9px !important;
        height: 9px !important;
    }
}

/* Упрощаем анимации для старых устройств */
@media (prefers-reduced-motion: reduce) {
    .btn-danger,
    .btn-primary,
    .btn-icon.btn-danger {
        animation: none !important;
        transition: none !important;
    }
}

/* Стили для иконок внутри кнопок */
.btn-danger i,
.btn-primary i,
.btn-icon.btn-danger i {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5) !important;
}