/* Скрыть breadcrumb (Портал) */
.master-breadcrumb {
    display: none !important;
}

/* Гарантированный стиль для футер-кнопок */
.btn-footer {
    display: inline-block;
    padding: 0.5em 1.5em;
    font-size: 1rem;
    font-weight: 600;
    color: #fff !important;
    background: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
    border: none;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-footer:hover, .btn-footer:focus {
    background: linear-gradient(90deg, #00c6ff 0%, #007bff 100%);
    color: #fff !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.btn-footer:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Z-INDEX FIX для навигации */
header.header {
    position: relative;
    z-index: 1050;
}

.main-navbar-wrapper {
    position: relative;
    z-index: 1040;
}

.dropdown {
    position: relative;
}

/* Анимация для кнопок футера */
.footer .nav-link {
    position: relative;
    display: inline-block;
    color: #eee;
    transition: color 0.3s, box-shadow 0.3s;
    z-index: 1;
    overflow: hidden;
}
.footer .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #00ff99, #00c3ff);
    transform: scaleX(0);
    transition: transform 0.3s;
    z-index: 2;
}
.footer .nav-link:hover {
    color: #00ff99;
    box-shadow: 0 2px 10px rgba(0,255,153,0.2);
}
.footer .nav-link:hover::after {
    transform: scaleX(1);
}
.footer .nav-link {
    font-weight: 500;
    font-size: 1.1em;
}
.hi-tech-btn {
    position: relative;
    display: inline-block;
    color: #00ffe7;
    text-shadow: 0 0 8px #00ffe7, 0 0 16px #00ffe7;
    transition: color 0.3s;
    overflow: hidden;
}
.hi-tech-btn span {
    position: relative;
    z-index: 2;
}
.hi-tech-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00ffe7 0%, #0057ff 100%);
    box-shadow: 0 0 8px #00ffe7, 0 0 16px #0057ff;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.hi-tech-btn:hover::after, .hi-tech-btn:focus::after {
    transform: scaleX(1);
}
.hi-tech-btn:hover, .hi-tech-btn:focus {
    color: #0057ff;
    text-shadow: 0 0 8px #0057ff, 0 0 16px #00ffe7;
}

/* === Анимации модальных окон === */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
}

@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 0.5; }
}

.modal.fade .modal-dialog {
    transform: translateY(-50px) scale(0.95);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    animation: modalFadeIn 0.4s ease-out;
}

.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.modal-backdrop.show {
    opacity: 0.5;
    animation: backdropFadeIn 0.3s ease-out;
}

.modal-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #336699 0%, #4a90c2 100%);
    color: #fff;
    border-bottom: none;
    padding: 1.2rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 600;
}

.modal-header .close {
    color: #fff;
    text-shadow: none;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

.modal-header .close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid #eee;
    padding: 1rem 1.5rem;
}

/* Эффект свечения при наведении на кнопки модалки */
.modal-footer .btn {
    transition: all 0.3s ease;
}

.modal-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   CARD STYLES
   ======================================== */

/* Тени для карточек */
.card.mb-3,
.card {
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

/* Металлический паттерн overlay */
.card.mb-3::before,
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.03) 2px,
            rgba(255,255,255,0.03) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.02) 2px,
            rgba(0,0,0,0.02) 4px
        );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

/* Металлический блеск */
.card.mb-3::after,
.card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.3) 50%,
        transparent 60%
    );
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

/* Hover эффект */
.card.mb-3:hover,
.card:hover {
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.5);
    transform: translateY(-8px) scale(1.02);
    background: linear-gradient(145deg, #ffffff 0%, #eef2f7 100%);
}

/* Показываем паттерн при наведении */
.card.mb-3:hover::before,
.card:hover::before {
    opacity: 1;
}

/* Анимация блеска при наведении */
.card.mb-3:hover::after,
.card:hover::after {
    transform: translateX(100%) rotate(45deg);
}

/* Контент карточки поверх эффектов */
.card .card-body,
.card .card-header,
.card .card-footer {
    position: relative;
    z-index: 3;
}

/* ========================================
   DROPDOWN MENU ICONS
   ======================================== */

/* Стилизация пунктов меню с иконками */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-menu .dropdown-item .menu-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* Цвета иконок - МОНОХРОМНЫЙ МЕТАЛЛИЧЕСКИЙ СТИЛЬ */
.menu-icon.icon-laravel,
.menu-icon.icon-wordpress,
.menu-icon.icon-ruby,
.menu-icon.icon-business,
.menu-icon.icon-hosting,
.menu-icon.icon-email,
.menu-icon.icon-dev,
.menu-icon.icon-domain,
.menu-icon.icon-transfer,
.menu-icon.icon-announcements,
.menu-icon.icon-kb,
.menu-icon.icon-network,
.menu-icon.icon-contact,
.menu-icon.icon-login,
.menu-icon.icon-register,
.menu-icon.icon-password,
.menu-icon.icon-browse,
.menu-icon.icon-about {
    color: #5a6a7a;
    transition: all 0.3s ease;
}

/* ========================================
   DROPDOWN MENU HOVER EFFECTS - METALLIC STYLE
   ======================================== */

/* Базовые стили для пунктов меню - МЕТАЛЛИЧЕСКИЙ */
.dropdown-menu .dropdown-item,
.dropdown-menu a.dropdown-item {
    position: relative;
    padding: 12px 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    margin: 3px 8px;
    overflow: hidden;
    background: linear-gradient(145deg, #fafafa 0%, #ffffff 50%, #f5f5f5 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.04);
    color: #4a5568;
    font-weight: 500;
}

/* Металлический фон при наведении */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a.dropdown-item:hover {
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 25%, #d8d8d8 50%, #ffffff 75%, #e8e8e8 100%);
    background-size: 200% 200%;
    color: #2c3e50 !important;
    transform: translateX(8px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* Иконка при наведении - монохромная */
.dropdown-menu .dropdown-item:hover .menu-icon,
.dropdown-menu a.dropdown-item:hover i {
    color: #4a5568 !important;
    transform: scale(1.15);
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Металлическая полоса слева */
.dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #c0c0c0 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.dropdown-menu .dropdown-item:hover::before {
    transform: scaleY(1);
}

/* Блеск при наведении */
.dropdown-menu .dropdown-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.dropdown-menu .dropdown-item:hover::after {
    left: 100%;
}

/* Стилизация самого dropdown-menu - МЕТАЛЛИЧЕСКИЙ СТИЛЬ */
.dropdown-menu {
    border: none;
    border-radius: 0;
    padding: 8px 0;
    z-index: 9999 !important;
    animation: dropdownFadeIn 0.3s ease;
    background: linear-gradient(145deg, #f8f8f8 0%, #ffffff 25%, #f0f0f0 50%, #ffffff 75%, #f8f8f8 100%);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Разделитель в меню - металлический */
.dropdown-menu .dropdown-divider {
    margin: 8px 15px;
    border-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    height: 1px;
    border: none;
}

/* =====================================================
   АНИМАЦИИ ДЛЯ СЕКЦИЙ "Чем мы можем вам помочь" и "Ваш аккаунт"
   ===================================================== */

/* Базовые стили для карточек-иконок - МЕТАЛЛИЧЕСКИЙ СТИЛЬ */
.action-icon-btns a {
    display: block;
    text-align: center;
    padding: 25px 15px;
    border-radius: 0;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 25%, #d4d4d4 50%, #ffffff 75%, #e8e8e8 100%);
    background-size: 200% 200%;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Эффект металлического паттерна */
.action-icon-btns a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 0;
}

/* Эффект shine при наведении */
.action-icon-btns a::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

/* Hover эффекты - мягкие */
.action-icon-btns a:hover {
    transform: translateY(-6px) scale(1.01);
    background: linear-gradient(145deg, #f0f0f0 0%, #ffffff 25%, #f5f5f5 50%, #ffffff 75%, #f0f0f0 100%);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.action-icon-btns a:hover::before {
    opacity: 1;
}

.action-icon-btns a:hover::after {
    left: 120%;
}

/* Анимация иконок */
.action-icon-btns .ico-container {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-icon-btns .ico-container i {
    transition: all 0.4s ease;
}

.action-icon-btns a:hover .ico-container {
    transform: scale(1.08) rotate(-3deg);
}

.action-icon-btns a:hover .ico-container i {
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* Пульсация при наведении - мягкая */
@keyframes iconPulse {
    0%, 100% { transform: scale(1.08) rotate(-3deg); }
    50% { transform: scale(1.12) rotate(-3deg); }
}

.action-icon-btns a:hover .ico-container {
    animation: iconPulse 1.5s ease-in-out infinite;
}

/* Цветовые акценты с мягким металлическим эффектом */
.action-icon-btns a.card-accent-teal:hover {
    background: linear-gradient(145deg, #e0f2f1 0%, #f5fafa 25%, #e0f7fa 50%, #f5fafa 75%, #e0f2f1 100%);
    box-shadow: 0 15px 45px rgba(0, 150, 136, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.action-icon-btns a.card-accent-pomegranate:hover {
    background: linear-gradient(145deg, #fce4ec 0%, #fdf5f7 25%, #ffebee 50%, #fdf5f7 75%, #fce4ec 100%);
    box-shadow: 0 15px 45px rgba(192, 57, 43, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.action-icon-btns a.card-accent-sun-flower:hover {
    background: linear-gradient(145deg, #fffde7 0%, #fffffa 25%, #fff9c4 50%, #fffffa 75%, #fffde7 100%);
    box-shadow: 0 15px 45px rgba(241, 196, 15, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.action-icon-btns a.card-accent-asbestos:hover {
    background: linear-gradient(145deg, #eceff1 0%, #f8f9fa 25%, #e8eaec 50%, #f8f9fa 75%, #eceff1 100%);
    box-shadow: 0 15px 45px rgba(127, 140, 141, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.action-icon-btns a.card-accent-green:hover {
    background: linear-gradient(145deg, #e8f5e9 0%, #f5faf6 25%, #e0f2e1 50%, #f5faf6 75%, #e8f5e9 100%);
    box-shadow: 0 15px 45px rgba(39, 174, 96, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.action-icon-btns a.card-accent-midnight-blue:hover {
    background: linear-gradient(145deg, #e3f2fd 0%, #f5fafd 25%, #e1f0fc 50%, #f5fafd 75%, #e3f2fd 100%);
    box-shadow: 0 15px 45px rgba(44, 62, 80, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Анимации появления - выезд с разных сторон */
@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Изначально карточки скрыты */
.action-icon-btns .col-6 a {
    opacity: 0;
}

/* Анимация запускается только при добавлении класса .animate */
.action-icon-btns .col-6:nth-child(1).animate a,
.action-icon-btns .col-6:nth-child(2).animate a {
    animation: slideFromLeft 0.6s ease forwards;
}

.action-icon-btns .col-6:nth-child(3).animate a,
.action-icon-btns .col-6:nth-child(4).animate a {
    animation: slideFromRight 0.6s ease forwards;
}

.action-icon-btns .col-6:nth-child(5).animate a {
    animation: slideFromBottom 0.6s ease forwards;
}

/* Задержки для staggered эффекта */
.action-icon-btns .col-6:nth-child(1).animate a { animation-delay: 0s; }
.action-icon-btns .col-6:nth-child(2).animate a { animation-delay: 0.15s; }
.action-icon-btns .col-6:nth-child(3).animate a { animation-delay: 0s; }
.action-icon-btns .col-6:nth-child(4).animate a { animation-delay: 0.15s; }
.action-icon-btns .col-6:nth-child(5).animate a { animation-delay: 0.2s; }

/* =====================================================
   КНОПКА ПЕРЕКЛЮЧАТЕЛЯ ЯЗЫКОВ В HEADER - МЕТАЛЛИЧЕСКИЙ
   ===================================================== */

.navbar-nav.toolbar .lang-btn {
    padding: 10px 14px;
    border-radius: 0;
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 20%, #f0f0f0 40%, #ffffff 60%, #e8e8e8 80%, #f5f5f5 100%);
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar-nav.toolbar .lang-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.navbar-nav.toolbar .lang-btn:hover::before {
    left: 100%;
}

.navbar-nav.toolbar .lang-btn:hover {
    background: linear-gradient(145deg, #d8d8d8 0%, #ffffff 25%, #c8c8c8 50%, #ffffff 75%, #d8d8d8 100%);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.navbar-nav.toolbar .lang-btn .iti-flag {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    transition: all 0.3s ease;
}

.navbar-nav.toolbar .lang-btn:hover .iti-flag {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* =====================================================
   АНИМАЦИЯ КОРЗИНЫ - МЕТАЛЛИЧЕСКИЙ
   ===================================================== */

.navbar-nav.toolbar .cart-btn {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 10px 14px;
    border-radius: 0;
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 20%, #f0f0f0 40%, #ffffff 60%, #e8e8e8 80%, #f5f5f5 100%);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar-nav.toolbar .cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.navbar-nav.toolbar .cart-btn:hover::before {
    left: 100%;
}

.navbar-nav.toolbar .cart-btn:hover {
    background: linear-gradient(145deg, #d8d8d8 0%, #ffffff 25%, #c8c8c8 50%, #ffffff 75%, #d8d8d8 100%);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.navbar-nav.toolbar .cart-btn i {
    transition: all 0.3s ease;
    color: #4a5568;
}

.navbar-nav.toolbar .cart-btn:hover i {
    animation: cartWiggle 0.5s ease;
    color: #2c3e50;
}

@keyframes cartWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
}

/* Анимация badge корзины */
.navbar-nav.toolbar .cart-btn #cartItemCount {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.navbar-nav.toolbar .cart-btn:hover #cartItemCount {
    transform: scale(1.2);
    background: linear-gradient(145deg, #4a5568, #2d3748);
}

/* Пульсация badge при наличии товаров - металлическая */
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 85, 104, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(74, 85, 104, 0); }
}

.navbar-nav.toolbar .cart-btn #cartItemCount:not(:empty) {
    animation: badgePulse 2s infinite;
    background: linear-gradient(145deg, #4a5568, #2d3748);
}

/* =====================================================
   ПОЛЕ ПОИСКА - МЕТАЛЛИЧЕСКИЙ СТИЛЬ
   ===================================================== */

.input-group.search {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8),
        inset 0 -2px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
    transition: all 0.4s ease;
}

.input-group.search:focus-within {
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

.input-group.search .input-group-prepend {
    background: transparent;
}

.input-group.search .input-group-text {
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 50%, #e0e0e0 100%);
    border: none;
    border-radius: 0;
    color: #5a6a7a;
    padding: 10px 15px;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.input-group.search:focus-within .input-group-text {
    color: #2c3e50;
    background: linear-gradient(145deg, #d8d8d8 0%, #ffffff 50%, #d0d0d0 100%);
}

.input-group.search .form-control {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 12px 18px;
    color: #3d4852;
    font-weight: 500;
    box-shadow: none !important;
}

.input-group.search .form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.input-group.search .form-control:focus {
    background: transparent;
    color: #2c3e50;
}

.input-group.search .form-control:focus::placeholder {
    color: #6b7280;
}

/* =====================================================
   АНИМАЦИИ ГЛАВНОГО МЕНЮ
   ===================================================== */

/* Базовые стили для элементов меню - МЕТАЛЛИЧЕСКИЙ */
/* Keyframes для анимации меню */
@keyframes menuShine {
    0% { left: -100%; }
    100% { left: 150%; }
}

@keyframes underlineGlow {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(74, 144, 184, 0.4);
        opacity: 1;
    }
    50% { 
        box-shadow: 0 0 15px rgba(74, 144, 184, 0.7);
        opacity: 1;
    }
}

.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav.ml-auto > li > a {
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 12px 22px;
    margin: 0 4px;
    border-radius: 0;
    border: none;
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 20%, #f0f0f0 40%, #ffffff 60%, #e8e8e8 80%, #f5f5f5 100%);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #3d4852 !important;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Псевдоэлементы отключены - вызывали смещение */
.main-navbar-wrapper #nav > li > a::before,
.main-navbar-wrapper .navbar-nav.ml-auto > li > a::before,
.main-navbar-wrapper #nav > li > a::after,
.main-navbar-wrapper .navbar-nav.ml-auto > li > a::after {
    display: none !important;
    content: none !important;
}

/* Hover эффект для пунктов меню - стабильный */
.main-navbar-wrapper #nav > li > a:hover,
.main-navbar-wrapper .navbar-nav.ml-auto > li > a:hover {
    background: linear-gradient(145deg, #d8e8f0 0%, #ffffff 25%, #d0e0ea 50%, #ffffff 75%, #d8e8f0 100%);
    color: #2c5f7c !important;
}

/* Убираем filter чтобы не мигали соседние элементы */
.main-navbar-wrapper #nav > li:hover,
.main-navbar-wrapper .navbar-nav.ml-auto > li:hover {
    /* filter убран для стабильности */
}

/* Анимация стрелки dropdown - металлический */
.main-navbar-wrapper .dropdown-toggle::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #5a6a7a;
    transition: transform 0.3s ease, border-color 0.3s ease;
    vertical-align: middle;
}

.main-navbar-wrapper .dropdown-toggle:hover::before {
    border-top-color: #2c3e50;
}

.main-navbar-wrapper .dropdown.show .dropdown-toggle::before {
    transform: rotate(180deg);
}

/* Анимация dropdown меню в navbar - металлический */
.main-navbar-wrapper .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    margin-top: 0 !important;
    border: none;
    border-radius: 0;
    padding: 10px;
    z-index: 9999 !important;
    background: linear-gradient(145deg, #f8f8f8 0%, #ffffff 25%, #f0f0f0 50%, #ffffff 75%, #f8f8f8 100%);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.main-navbar-wrapper .dropdown.show .dropdown-menu {
    animation: dropdownFadeIn 0.3s ease forwards;
}

/* Мобильное меню - hamburger анимация */
.navbar-nav.toolbar .btn[data-toggle="collapse"] {
    position: relative;
    transition: all 0.3s ease;
}

.navbar-nav.toolbar .btn[data-toggle="collapse"]:hover {
    transform: scale(1.1);
    color: #667eea;
}

.navbar-nav.toolbar .btn[data-toggle="collapse"] .fa-bars {
    transition: all 0.3s ease;
}

.navbar-nav.toolbar .btn[data-toggle="collapse"]:hover .fa-bars {
    animation: hamburgerWiggle 0.5s ease;
}

@keyframes hamburgerWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

/* Активный пункт меню */
.main-navbar-wrapper #nav > li.active > a,
.main-navbar-wrapper .navbar-nav.ml-auto > li.active > a {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    color: #667eea !important;
}

.main-navbar-wrapper #nav > li.active > a::after,
.main-navbar-wrapper .navbar-nav.ml-auto > li.active > a::after {
    width: 70%;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

/* ========== METALLIC PRODUCT CARDS ========== */
.card-columns.home .card {
    border: none;
    border-radius: 0;
    background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 25%, #d4d4d4 50%, #ffffff 75%, #e8e8e8 100%);
    background-size: 200% 200%;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-columns.home .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.6s ease;
    z-index: 1;
}

.card-columns.home .card:hover::before {
    transform: translateX(100%) rotate(45deg);
}

.card-columns.home .card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    background-position: 100% 100%;
}

.card-columns.home .card .card-body {
    position: relative;
    z-index: 2;
}

.card-columns.home .card .card-title {
    font-weight: 700;
    color: #2c3e50;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.card-columns.home .card p {
    color: #5a6a7a;
    font-size: 0.95rem;
    line-height: 1.6;
}

.card-columns.home .card .btn-outline-primary {
    border: none;
    background: linear-gradient(145deg, #4a5568 0%, #2d3748 50%, #4a5568 100%);
    background-size: 200% 200%;
    color: white;
    font-weight: 600;
    border-radius: 0;
    padding: 12px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.card-columns.home .card .btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    background-position: 100% 100%;
    background: linear-gradient(145deg, #5a6778 0%, #3d4858 50%, #5a6778 100%);
}

.card-columns.home .card .btn-outline-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.card-columns.home .card .btn-outline-primary:hover::before {
    left: 100%;
}

/* Разные металлические оттенки для каждой карточки */
.card-columns.home .card:nth-child(1) {
    background: linear-gradient(145deg, #f0f0f0 0%, #ffffff 25%, #e0e0e0 50%, #ffffff 75%, #f0f0f0 100%);
}

.card-columns.home .card:nth-child(2) {
    background: linear-gradient(145deg, #e8f4fc 0%, #ffffff 25%, #d0e8f5 50%, #ffffff 75%, #e8f4fc 100%);
}

.card-columns.home .card:nth-child(3) {
    background: linear-gradient(145deg, #f0e8fc 0%, #ffffff 25%, #e0d0f5 50%, #ffffff 75%, #f0e8fc 100%);
}

.card-columns.home .card:nth-child(4) {
    background: linear-gradient(145deg, #e8fcf4 0%, #ffffff 25%, #d0f5e8 50%, #ffffff 75%, #e8fcf4 100%);
}

.card-columns.home .card:nth-child(5) {
    background: linear-gradient(145deg, #fcf4e8 0%, #ffffff 25%, #f5e8d0 50%, #ffffff 75%, #fcf4e8 100%);
}

/* Иконка-декор в углу */
.card-columns.home .card::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 50%;
    z-index: 0;
    transition: all 0.4s ease;
}

.card-columns.home .card:hover::after {
    transform: scale(1.5);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
}

/* Заголовок секции */
h2.text-center.m-4 {
    font-weight: 700;
    color: #2c3e50;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Product Icons */
.product-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 50%, #e8e8e8 100%);
    border-radius: 50%;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.product-icon-container::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(145deg, #667eea, #764ba2);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-columns.home .card:hover .product-icon-container {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08);
}

.card-columns.home .card:hover .product-icon-container::before {
    opacity: 0.3;
}

.product-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.4s ease;
}

.card-columns.home .card:hover .product-icon {
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
    transform: scale(1.05);
}

/* Адаптивность */
@media (max-width: 768px) {
    .card-columns.home .card {
        margin-bottom: 1.5rem;
    }
    
    .card-columns.home .card:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    .product-icon-container {
        width: 60px;
        height: 60px;
    }
    
    .product-icon {
        width: 35px;
        height: 35px;
    }
}

/* ========================================
   MOBILE NAVIGATION FIX
   ======================================== */

/* Основные стили для мобильного меню */
@media (max-width: 1199.98px) {
    /* СКРЫВАЕМ кнопку "Еще" на мобильных */
    .collapsable-dropdown,
    .main-navbar-wrapper .collapsable-dropdown,
    li.collapsable-dropdown {
        display: none !important;
    }
    
    /* Фикс для wrapper навигации */
    .main-navbar-wrapper {
        position: relative;
        z-index: 1040;
    }
    
    /* Фикс для collapse контейнера */
    .main-navbar-wrapper .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        z-index: 1050;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* Фикс navbar-nav */
    .main-navbar-wrapper .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        padding: 10px 0;
    }
    
    /* Фикс для пунктов меню */
    .main-navbar-wrapper .navbar-nav > li {
        display: block !important;
        width: 100%;
        position: relative;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .main-navbar-wrapper .navbar-nav > li:last-child {
        border-bottom: none;
    }
    
    /* Фикс для ссылок в меню */
    .main-navbar-wrapper .navbar-nav > li > a {
        display: block;
        padding: 12px 20px !important;
        color: #333 !important;
        font-size: 15px;
        text-decoration: none;
    }
    
    .main-navbar-wrapper .navbar-nav > li > a:hover {
        background-color: #f8f9fa;
    }
    
    /* Фикс для dropdown меню на мобильных */
    .main-navbar-wrapper .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #f8f9fa;
    }
    
    .main-navbar-wrapper .navbar-nav .dropdown-menu .dropdown-item {
        padding: 10px 20px 10px 35px !important;
        color: #555;
        font-size: 14px;
        background: transparent !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    .main-navbar-wrapper .navbar-nav .dropdown-menu .dropdown-item:hover {
        background: #e9ecef !important;
        transform: none !important;
    }
    
    /* Убираем металлические эффекты на мобильных для dropdown */
    .main-navbar-wrapper .navbar-nav .dropdown-menu .dropdown-item::before,
    .main-navbar-wrapper .navbar-nav .dropdown-menu .dropdown-item::after {
        display: none;
    }
    
    /* Фикс для dropdown toggle */
    .main-navbar-wrapper .navbar-nav .dropdown-toggle::after {
        float: right;
        margin-top: 8px;
    }
    
    /* Показать dropdown при клике */
    .main-navbar-wrapper .navbar-nav .dropdown.show > .dropdown-menu {
        display: block;
    }
    
    /* Разделители в мобильном меню */
    .main-navbar-wrapper .navbar-nav .dropdown-divider {
        margin: 5px 20px;
        border-color: #ddd;
    }
    
    /* Форма поиска в мобильном меню */
    .main-navbar-wrapper .navbar-collapse .search {
        margin: 10px 15px;
    }
    
    /* Header fix для корректного z-index */
    header.header {
        position: sticky;
        top: 0;
        z-index: 1030;
        background: #fff;
    }
    
    /* Верхний navbar с логотипом */
    header.header .navbar.navbar-light {
        position: relative;
        z-index: 1035;
    }
}

/* Дополнительные фиксы для совсем маленьких экранов */
@media (max-width: 576px) {
    /* Меню для очень маленьких экранов */
    .main-navbar-wrapper .navbar-collapse {
        max-height: 70vh;
        padding: 5px 0;
    }
    
    .main-navbar-wrapper .navbar-nav > li > a {
        padding: 10px 15px !important;
        font-size: 14px;
    }
    
    .main-navbar-wrapper .navbar-nav .dropdown-menu .dropdown-item {
        padding: 8px 15px 8px 30px !important;
        font-size: 13px;
    }
    
    /* Toolbar в header */
    header.header .toolbar {
        flex-wrap: nowrap;
    }
    
    header.header .toolbar .nav-item {
        margin-left: 0.5rem !important;
    }
    
    /* Логотип */
    header.header .navbar-brand {
        max-width: 120px;
    }
    
    header.header .navbar-brand .logo-img {
        max-width: 100%;
        height: auto;
    }
}