/* ============================================
   ИСПРАВЛЕНИЕ КОНФЛИКТОВ СТИЛЕЙ КНОПОК
   Добавьте эти стили ПОСЛЕ основных стилей
   ============================================ */

/* ============================================
   1. СБРОС ГРАДИЕНТОВ ДЛЯ НАВИГАЦИОННЫХ ССЫЛОК
   ============================================ */

/* Убираем градиент для всех ссылок с классом button в header */
.header a.button,
.header-bottom-bar-links .button,
.header-bottom-bar-links__link,
.header-top-bar .button,
.catalog-category-button {
    background-image: none !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   2. ГРАДИЕНТЫ ТОЛЬКО ДЛЯ НАСТОЯЩИХ КНОПОК
   ============================================ */

/* Применяем градиент только к элементам button и input */
button.button:not(.catalog-dropdown-button):not(.catalog-category-button),
input[type="submit"].button,
input[type="button"].button,
input[type="reset"].button,
.button-decorator button,
.cart .button:not(a),
.order .button:not(a),
form .button:not(a) {
    background: linear-gradient(135deg, #4c99c6, #1f679a) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
}

/* Hover для настоящих кнопок */
button.button:not(.catalog-dropdown-button):not(.catalog-category-button):hover,
input[type="submit"].button:hover,
input[type="button"].button:hover,
input[type="reset"].button:hover,
.button-decorator button:hover,
.cart .button:not(a):hover,
.order .button:not(a):hover,
form .button:not(a):hover {
    background: linear-gradient(135deg, #398ab7, #114477) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 68, 119, 0.25) !important;
}

/* Active состояние */
button.button:not(.catalog-dropdown-button):not(.catalog-category-button):active,
input[type="submit"].button:active,
input[type="button"].button:active,
input[type="reset"].button:active {
    background: linear-gradient(135deg, #1f679a, #114477) !important;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(17, 68, 119, 0.2) !important;
}

/* ============================================
   3. СТИЛИ ДЛЯ НАВИГАЦИОННЫХ КНОПОК В HEADER
   ============================================ */

/* Bottom bar - категории */
.header-bottom-bar-links__link {
    font-weight: 500;
    color: var(--header-bottom-bar-text-color);
    padding: 10px 14px;
    line-height: 16px;
    background-color: var(--header-bottom-bar-bg-color);
    transition: background-color 0.2s ease-in-out;
}

.header-bottom-bar-links__link:hover {
    background-color: var(--header-bottom-bar-btn-hover-color);
    color: var(--header-bottom-bar-text-color);
}

/* Альтернативные ссылки (с иконками) */
.header-bottom-bar-links_alt .header-bottom-bar-links__link {
    background-color: transparent;
    color: var(--header-bottom-bar-text-color);
}

.header-bottom-bar-links_alt .header-bottom-bar-links__link:hover {
    background-color: transparent;
    color: var(--link-color);
}

/* Прозрачные ссылки */
.header-bottom-bar-links_transparent .header-bottom-bar-links__link {
    padding: 0;
    background-color: transparent !important;
    color: #333333;
}

.header-bottom-bar-links_transparent .header-bottom-bar-links__link:hover {
    background-color: transparent !important;
    color: var(--link-color);
}

/* Цветные ссылки (Акции, Новинки) */
.header-bottom-bar-links__link_colored {
    background-color: transparent !important;
    color: var(--link-color) !important;
}

.header-bottom-bar-links__link_colored:hover {
    color: var(--link-color-hover) !important;
    background-color: transparent !important;
}

/* ============================================
   4. КНОПКА КАТАЛОГА
   ============================================ */

/* Специальный стиль для кнопки каталога */
.catalog-dropdown-button,
.header-middle-bar-shop-catalog-button .button {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
}

.catalog-dropdown-button:hover,
.header-middle-bar-shop-catalog-button .button:hover {
    background: var(--primary-color-hover) !important;
}

/* ============================================
   5. ПЕРЕОПРЕДЕЛЕНИЕ CSS-ПЕРЕМЕННЫХ
   ============================================ */

:root {
    /* Основные цвета из вашей палитры */
    --primary-color: #4c99c6;
    --primary-color-hover: #1f679a;
    --dark-color: #114477;
    --accent-color: #398ab7;
    --light-color: #dde8f0;
    
    /* Переменные для кнопок */
    --button-color: #4c99c6;
    --button-color-hover: #1f679a;
    --button-text-color: #ffffff;
    
    /* Переменные для header bottom bar */
    --header-bottom-bar-bg-color: #ffffff;
    --header-bottom-bar-text-color: #333333;
    --header-bottom-bar-btn-color: #f0f4f8;
    --header-bottom-bar-btn-hover-color: #e8f0f8;
}

/* ============================================
   6. ИСПРАВЛЕНИЕ HOVER ДЛЯ РАЗЛИЧНЫХ ЭЛЕМЕНТОВ
   ============================================ */

/* Убираем hover эффекты для ссылок в навигации */
.header a.button:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Hover для ссылок в top bar */
.header-top-bar .link:hover,
.header-top-bar .link-box:hover .link-box__link {
    color: var(--top-header-link-color-hover);
}

/* ============================================
   7. СПЕЦИФИЧНЫЕ ИСПРАВЛЕНИЯ
   ============================================ */

/* Кнопка "Ещё" (три точки) */
.catalog-category-button {
    background: transparent !important;
    color: #666666 !important;
    padding: 8px 12px !important;
    border: none !important;
}

.catalog-category-button:hover {
    background: rgba(76, 153, 198, 0.1) !important;
    color: #1f679a !important;
}

/* Исправление для button_rect */
.button.button_rect {
    border-radius: 0;
    background: transparent !important;
}

.button.button_rect.button_fill {
    background: transparent !important;
}

/* ============================================
   8. МОДИФИКАТОРЫ СТИЛЕЙ
   ============================================ */

/* Серые кнопки */
.button_style_gray {
    background: #f2f2f2 !important;
    color: #686868 !important;
}

.button_style_gray:hover {
    background: #eaeaea !important;
}

/* Инверсные кнопки */
.button_style_inverse {
    background: transparent !important;
    color: var(--button-color) !important;
    border-color: var(--button-color) !important;
}

.button_style_inverse:hover {
    background: transparent !important;
    color: var(--button-color-dark) !important;
}

/* Прозрачные кнопки */
.button_style_transparent {
    background: transparent !important;
    color: var(--button-color) !important;
}

.button_style_transparent:hover {
    background: transparent !important;
    color: var(--button-color-dark) !important;
}

/* ============================================
   9. ПРИОРИТЕТНОЕ ПРАВИЛО
   Добавьте в самый конец, если ничего не помогает
   ============================================ */

/* Финальный сброс для всех ссылок */
a.button,
a.button:hover,
a.button:active,
a.button:focus {
    background-image: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Финальное применение градиента только для button элементов */
button.button:not([class*="catalog"]):not([class*="header"]) {
    background: linear-gradient(135deg, #4c99c6, #1f679a) !important;
    color: #ffffff !important;
}

.footer {
     background: linear-gradient(135deg, #4c99c6 0%, #1f679a 50%, #114477 100%);
}

/* ============================================
   ГРАДИЕНТ ДЛЯ КНОПКИ КАТАЛОГА
   ============================================ */

/* Основной стиль кнопки каталога */
.catalog-dropdown-button,
.header-middle-bar-shop-catalog-button,
.header-middle-bar-shop-catalog-button .button {
    background: linear-gradient(135deg, #4c99c6 0%, #1f679a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(31, 103, 154, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover эффект */
.catalog-dropdown-button:hover,
.header-middle-bar-shop-catalog-button:hover,
.header-middle-bar-shop-catalog-button .button:hover {
    background: linear-gradient(135deg, #398ab7 0%, #114477 100%) !important;
    box-shadow: 0 4px 12px rgba(17, 68, 119, 0.4);
    transform: translateY(-1px);
}

/* Active/нажатое состояние */
.catalog-dropdown-button:active,
.catalog-dropdown-button.button_active,
.header-middle-bar-shop-catalog-button:active,
.header-middle-bar-shop-catalog-button .button:active,
.header-middle-bar-shop-catalog-button .button.button_active {
    background: linear-gradient(135deg, #1f679a 0%, #114477 100%) !important;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(17, 68, 119, 0.3);
}

/* Анимированный градиент (опционально) */
.catalog-dropdown-button_animated,
.header-middle-bar-shop-catalog-button_animated .button {
    background: linear-gradient(90deg, #398ab7, #4c99c6, #1f679a, #114477) !important;
    background-size: 300% 100%;
    animation: gradient-move 4s ease infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Дополнительный блеск при hover (опционально) */
.catalog-dropdown-button::before,
.header-middle-bar-shop-catalog-button .button::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;
    pointer-events: none;
}

.catalog-dropdown-button:hover::before,
.header-middle-bar-shop-catalog-button:hover .button::before {
    left: 100%;
}

/* Убедимся, что иконка бургера остается белой */
.catalog-dropdown-button .burger-icon__inner,
.catalog-dropdown-button .burger-icon__inner::before,
.catalog-dropdown-button .burger-icon__inner::after,
.header-middle-bar-shop-catalog-button .burger-icon__inner,
.header-middle-bar-shop-catalog-button .burger-icon__inner::before,
.header-middle-bar-shop-catalog-button .burger-icon__inner::after {
    background-color: #ffffff !important;
}

/* Текст кнопки */
.catalog-dropdown-button .icon-box__content,
.header-middle-bar-shop-catalog-button .icon-box__content {
    color: #ffffff !important;
    font-weight: 500;
}

/* Альтернативные варианты градиента */

/* Вариант 2: Вертикальный градиент */
.catalog-dropdown-button_vertical {
    background: linear-gradient(to bottom, #4c99c6 0%, #1f679a 100%) !important;
}

/* Вариант 3: Радиальный градиент */
.catalog-dropdown-button_radial {
    background: radial-gradient(ellipse at center, #4c99c6 0%, #1f679a 100%) !important;
}

/* Вариант 4: Многоцветный градиент */
.catalog-dropdown-button_multicolor {
    background: linear-gradient(135deg, 
        #398ab7 0%, 
        #4c99c6 33%, 
        #1f679a 66%, 
        #114477 100%
    ) !important;
}

/* Мобильная версия */
@media (max-width: 1023px) {
    .catalog-dropdown-button,
    .header-middle-bar-shop-catalog-button .button {
        background: linear-gradient(90deg, #4c99c6 0%, #1f679a 100%) !important;
    }
}

/* ============================================
   ГРАДИЕНТ ДЛЯ HEADER MIDDLE BAR
   ============================================ */

/* Основной градиент для middle bar */
.header-middle-bar,
.header__middle-bar {
    background: linear-gradient(135deg, #4c99c6 0%, #1f679a 50%, #114477 100%) !important;
    position: relative;
    color: #ffffff;
    /* Создаем белую рамку снизу через border */
    border-bottom: 4px solid #ffffff !important;
}

/* Альтернативный метод через padding и белый фон */
.header__middle-bar {
    background: #ffffff !important;
    padding-bottom: 4px !important;
}

.header__middle-bar .header-middle-bar {
    background: linear-gradient(135deg, #4c99c6 0%, #1f679a 50%, #114477 100%) !important;
    margin-bottom: 0 !important;
    position: relative;
    color: #ffffff;
}

/* Альтернативные варианты градиента */

/* Вариант 1: Светлый градиент (если нужно сохранить читаемость темных элементов) */
.header-middle-bar_light {
    background: linear-gradient(135deg, #ffffff 0%, #e8f4fa 50%, #dde8f0 100%) !important;
    color: #333333;
}

/* Вариант 2: Горизонтальный градиент */
.header-middle-bar_horizontal {
    background: linear-gradient(90deg, #4c99c6 0%, #1f679a 50%, #114477 100%) !important;
}

/* Вариант 3: Двухцветный градиент */
.header-middle-bar_simple {
    background: linear-gradient(135deg, #4c99c6 0%, #1f679a 100%) !important;
}

/* Вариант 4: С полупрозрачным overlay для смягчения */
.header-middle-bar_soft {
    background: linear-gradient(135deg, 
        rgba(76, 153, 198, 0.95) 0%, 
        rgba(31, 103, 154, 0.95) 50%, 
        rgba(17, 68, 119, 0.95) 100%
    ) !important;
}

/* ============================================
   АДАПТАЦИЯ ЭЛЕМЕНТОВ ВНУТРИ MIDDLE BAR
   ============================================ */

/* Белый цвет для всех текстовых элементов */
.header-middle-bar a,
.header-middle-bar .link,
.header-middle-bar .link-box__link,
.header-middle-bar .header-middle-bar-phone__phone,
.header-middle-bar .header-middle-bar-phone__hint,
.header-middle-bar .header-middle-bar-address__hint,
.header-middle-bar__container-logo-desc {
    color: #ffffff !important;
}

/* Полупрозрачный белый для второстепенных элементов */
.header-middle-bar .header-middle-bar-phone__hint,
.header-middle-bar .header-middle-bar-address__hint,
.header-middle-bar__container-logo-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Hover эффекты */
.header-middle-bar a:hover,
.header-middle-bar .link:hover,
.header-middle-bar .link-box:hover .link-box__link {
    color: #ffffff !important;
    opacity: 0.8;
}

/* Адаптация разделителя для описания логотипа */
.header-middle-bar__container-logo-desc {
    border-left-color: rgba(255, 255, 255, 0.3) !important;
}

/* Поле поиска - делаем полупрозрачным белым */
.header-middle-bar .input-search {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-middle-bar .input-search__input {
    background: transparent;
    color: #ffffff;
}

.header-middle-bar .input-search__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.header-middle-bar .input-search:hover,
.header-middle-bar .input-search:focus-within {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.header-middle-bar .input-search__button {
    color: #ffffff;
}

/* Иконки делаем белыми */
.header-middle-bar .svg-icon,
.header-middle-bar .link-box__icon {
    color: #ffffff !important;
    fill: #ffffff;
}

/* Счетчики корзины/сравнения/избранного */
.header-middle-bar .counter {
    background-color: #ff3131;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   КОМПАКТНАЯ ВЕРСИЯ
   ============================================ */

.header-middle-bar_compact {
    background: linear-gradient(90deg, #4c99c6 0%, #1f679a 100%) !important;
}

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================ */

@media (max-width: 1023px) {
    .header-middle-bar,
    .header__middle-bar {
        background: linear-gradient(90deg, #4c99c6 0%, #1f679a 100%) !important;
    }
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ
   ============================================ */

/* Добавление легкой тени для глубины */
.header-middle-bar {
    /* Убрана тень */
}

/* Анимированный градиент (опционально) */
.header-middle-bar_animated {
    background: linear-gradient(90deg, #398ab7, #4c99c6, #1f679a, #114477) !important;
    background-size: 400% 100%;
    animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Полупрозрачный слой для улучшения читаемости (опционально) */
.header-middle-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Убедимся, что контент выше overlay */
.header-middle-bar__container {
    position: relative;
    z-index: 1;
}

/* ============================================
   ЗВЕЗДНО-ПОЛОСАТЫЙ ПАТТЕРН ДЛЯ ФОНА
   ============================================ */

/* Вариант 1: Полосы через градиент */
.usa-stripes-background {
    background: repeating-linear-gradient(
        0deg,
        #ffffff 0px,
        #ffffff 10px,
        #d52b1e 10px,
        #d52b1e 20px
    );
    position: relative;
}

/* Вариант 2: Диагональные полосы */
.usa-stripes-diagonal {
    background: repeating-linear-gradient(
        45deg,
        #ffffff 0px,
        #ffffff 15px,
        #d52b1e 15px,
        #d52b1e 30px
    );
}

/* Вариант 3: Тонкие полосы с прозрачностью */
.usa-stripes-subtle {
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0px,
        rgba(255, 255, 255, 0.1) 20px,
        rgba(213, 43, 30, 0.1) 20px,
        rgba(213, 43, 30, 0.1) 40px
    );
}

/* Вариант 4: SVG паттерн со звездами и полосами */
.usa-pattern-stars-stripes {
    background-color: #002868;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 20px,
            rgba(255, 255, 255, 0.05) 20px,
            rgba(255, 255, 255, 0.05) 40px,
            rgba(213, 43, 30, 0.05) 40px,
            rgba(213, 43, 30, 0.05) 60px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,15 61,35 82,35 67,50 73,71 50,57 27,71 33,50 18,35 39,35' fill='white' opacity='0.1'/%3E%3C/svg%3E");
    background-size: auto, 100px 100px;
}

/* ============================================
   ПРИМЕНЕНИЕ К РАЗНЫМ БЛОКАМ
   ============================================ */

/* Для header */
.header-with-usa-pattern {
    position: relative;
}

.header-with-usa-pattern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0px,
        rgba(255, 255, 255, 0.03) 30px,
        rgba(213, 43, 30, 0.03) 30px,
        rgba(213, 43, 30, 0.03) 60px
    );
    pointer-events: none;
    z-index: 0;
}

/* Для middle bar с градиентом */
.header-middle-bar.usa-pattern-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 40px,
            rgba(255, 255, 255, 0.05) 40px,
            rgba(255, 255, 255, 0.05) 80px
        );
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Для bottom bar */
.header-bottom-bar.usa-stripes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 10px,
        rgba(255, 255, 255, 0.02) 10px,
        rgba(255, 255, 255, 0.02) 20px
    );
    pointer-events: none;
}

/* ============================================
   ЗВЕЗДНЫЙ ПАТТЕРН
   ============================================ */

/* Только звезды */
.usa-stars-pattern {
    background-color: #002868;
    background-image: 
        radial-gradient(circle at 20% 30%, white 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, white 1px, transparent 1px),
        radial-gradient(circle at 40% 60%, white 1px, transparent 1px),
        radial-gradient(circle at 60% 20%, white 1px, transparent 1px),
        radial-gradient(circle at 90% 10%, white 1px, transparent 1px),
        radial-gradient(circle at 10% 90%, white 1px, transparent 1px);
    background-size: 50px 50px;
}

/* ============================================
   КОМБИНИРОВАННЫЙ ПАТТЕРН ДЛЯ ВСЕЙ СТРАНИЦЫ
   ============================================ */

body.usa-theme {
    position: relative;
}

body.usa-theme::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.01) 0px,
            rgba(255, 255, 255, 0.01) 50px,
            rgba(213, 43, 30, 0.01) 50px,
            rgba(213, 43, 30, 0.01) 100px
        );
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   АНИМИРОВАННЫЙ ПАТТЕРН
   ============================================ */

.usa-pattern-animated {
    background: 
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 30px,
            rgba(213, 43, 30, 0.05) 30px,
            rgba(213, 43, 30, 0.05) 60px,
            rgba(0, 40, 104, 0.05) 60px,
            rgba(0, 40, 104, 0.05) 90px
        );
    background-size: 200% 100%;
    animation: usa-pattern-move 30s linear infinite;
}

@keyframes usa-pattern-move {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

/* ============================================
   СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ
   ============================================ */

/* Эффект флага на заднем плане */
.usa-flag-background {
    position: relative;
    overflow: hidden;
}

.usa-flag-background::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.02) 45%,
            rgba(213, 43, 30, 0.02) 55%,
            transparent 100%
        );
    transform: rotate(15deg);
    pointer-events: none;
}