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

/* ============================================
   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. СИНЯЯ КНОПКА КАТАЛОГА - НОВЫЕ СТИЛИ
   ============================================ */

/* ЧЕРНЫЙ ЦВЕТ ДЛЯ ТЕКСТА "КАТАЛОГ" */
.header-bottom-bar__container-shop-catalog .icon-box__content,
.catalog-dropdown-button .icon-box__content,
.header-middle-bar-shop-catalog-button .icon-box__content,
.header-bottom-bar-shop-catalog-button .icon-box__content {
    color: #000000 !important; /* Черный цвет */
}

/* ЧЕРНЫЙ ЦВЕТ ДЛЯ ИКОНКИ БУРГЕРА */
.header-bottom-bar__container-shop-catalog .burger-icon__inner,
.header-bottom-bar__container-shop-catalog .burger-icon__inner::before,
.header-bottom-bar__container-shop-catalog .burger-icon__inner::after,
.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,
.header-bottom-bar-shop-catalog-button .burger-icon__inner,
.header-bottom-bar-shop-catalog-button .burger-icon__inner::before,
.header-bottom-bar-shop-catalog-button .burger-icon__inner::after {
    background-color: #000000 !important; /* Черный цвет для всех трёх полосок */
}

/* HOVER ЭФФЕКТЫ ДЛЯ ЧЕРНОЙ КНОПКИ */
.catalog-dropdown-button:hover .icon-box__content,
.header-middle-bar-shop-catalog-button:hover .icon-box__content,
.header-bottom-bar-shop-catalog-button:hover .icon-box__content {
    color: #333333 !important; /* Темно-серый оттенок при наведении */
}

.catalog-dropdown-button:hover .burger-icon__inner,
.catalog-dropdown-button:hover .burger-icon__inner::before,
.catalog-dropdown-button:hover .burger-icon__inner::after,
.header-middle-bar-shop-catalog-button:hover .burger-icon__inner,
.header-middle-bar-shop-catalog-button:hover .burger-icon__inner::before,
.header-middle-bar-shop-catalog-button:hover .burger-icon__inner::after,
.header-bottom-bar-shop-catalog-button:hover .burger-icon__inner,
.header-bottom-bar-shop-catalog-button:hover .burger-icon__inner::before,
.header-bottom-bar-shop-catalog-button:hover .burger-icon__inner::after {
    background-color: #333333 !important; /* Темно-серый оттенок при наведении */
}

/* АКТИВНОЕ СОСТОЯНИЕ */
.catalog-dropdown-button:active .icon-box__content,
.catalog-dropdown-button.active .icon-box__content,
.header-middle-bar-shop-catalog-button:active .icon-box__content,
.header-bottom-bar-shop-catalog-button:active .icon-box__content {
    color: #666666 !important; /* Серый при клике */
}

.catalog-dropdown-button:active .burger-icon__inner,
.catalog-dropdown-button:active .burger-icon__inner::before,
.catalog-dropdown-button:active .burger-icon__inner::after,
.catalog-dropdown-button.active .burger-icon__inner,
.catalog-dropdown-button.active .burger-icon__inner::before,
.catalog-dropdown-button.active .burger-icon__inner::after,
.header-middle-bar-shop-catalog-button:active .burger-icon__inner,
.header-middle-bar-shop-catalog-button:active .burger-icon__inner::before,
.header-middle-bar-shop-catalog-button:active .burger-icon__inner::after,
.header-bottom-bar-shop-catalog-button:active .burger-icon__inner,
.header-bottom-bar-shop-catalog-button:active .burger-icon__inner::before,
.header-bottom-bar-shop-catalog-button:active .burger-icon__inner::after {
    background-color: #666666 !important;
}

/* Фон кнопки каталога - белый с обводкой */
.catalog-dropdown-button,
.header-middle-bar-shop-catalog-button,
.header-middle-bar-shop-catalog-button .button,
.header-bottom-bar-shop-catalog-button {
    background: #ffffff !important; /* Белый фон */
    border: 1px solid #e0e0e0 !important; /* Светлая обводка */
    color: #000000 !important; /* Черный цвет текста */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    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,
.header-bottom-bar-shop-catalog-button:hover {
    background: #f8f9fa !important; /* Слегка серый фон при наведении */
    border-color: #333333 !important; /* Темно-серая обводка при наведении */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    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-bottom-bar-shop-catalog-button:active {
    background: #f0f4f8 !important;
    border-color: #666666 !important;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

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

:root {
    /* Основные цвета из вашей палитры */
    --primary-color: #4c99c6;
    --primary-color-hover: #1f679a;
    --dark-color: #114477;
    --accent-color: #398ab7;
    --light-color: #dde8f0;
    
    /* Синий цвет для кнопки каталога */
    --catalog-blue: #0066CC;
    --catalog-blue-hover: #0052A3;
    --catalog-blue-active: #003D7A;
    
    /* Черный цвет для кнопки каталога */
    --catalog-black: #000000;
    --catalog-black-hover: #333333;
    --catalog-black-active: #666666;
    
    /* Переменные для кнопок */
    --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%);
}

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

/* Основной градиент для middle bar */
.header-middle-bar,
.header-middle-bar__inner,
.header-middle-bar-wrapper {
    background: linear-gradient(90deg, #4c99c6 0%, #1f679a 100%) !important;
    color: #ffffff;
}

/* Белый цвет для элементов в header-middle-bar */
.header-middle-bar a,
.header-middle-bar .link,
.header-middle-bar .header-middle-bar__item,
.header-middle-bar .button:not(.catalog-dropdown-button) {
    color: #ffffff !important;
}

/* Белый цвет для подсказки телефона */
.header-middle-bar-phone__hint,
.header-middle-bar .header-middle-bar-phone__hint {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Белый цвет для email контейнера */
.header-middle-bar-contacts__email-container,
.header-middle-bar .header-middle-bar-contacts__email-container,
.header-middle-bar-contacts__email-container a,
.header-middle-bar .header-middle-bar-contacts__email-container a {
    color: #ffffff !important;
}

/* Белый цвет для подсказки адреса */
.header-middle-bar-address__hint,
.header-middle-bar .header-middle-bar-address__hint {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Белый цвет для ссылок магазина */
.header-middle-bar-shop-links,
.header-middle-bar .header-middle-bar-shop-links,
.header-middle-bar-shop-links a,
.header-middle-bar .header-middle-bar-shop-links a,
.header-middle-bar-shop-links__link,
.header-middle-bar .header-middle-bar-shop-links__link {
    color: #ffffff !important;
}

/* Hover эффект для ссылок магазина */
.header-middle-bar-shop-links a:hover,
.header-middle-bar .header-middle-bar-shop-links a:hover,
.header-middle-bar-shop-links__link:hover,
.header-middle-bar .header-middle-bar-shop-links__link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: underline;
}

/* Белый цвет для link-box__link */
.header-middle-bar .link-box__link,
.header-middle-bar-contacts .link-box__link,
.header-middle-bar-phone .link-box__link,
.header-middle-bar-address .link-box__link,
.link-box__link {
    color: #ffffff !important;
}

/* Hover эффект для link-box__link */
.header-middle-bar .link-box__link:hover,
.link-box__link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   ЧЕРНЫЙ ЦВЕТ ДЛЯ EMAIL В TOP BAR
   ============================================ */

/* Черный цвет для email элементов в top bar */
.header-top-bar-contacts__item.header-top-bar-contacts__item_email,
.header-top-bar-contacts__item_email,
.header-top-bar .header-top-bar-contacts__item_email,
.header-top-bar-contacts__item_email a,
.header-top-bar .header-top-bar-contacts__item_email a {
    color: #000000 !important;
}

/* Hover эффект для email ссылок */
.header-top-bar-contacts__item_email a:hover,
.header-top-bar .header-top-bar-contacts__item_email a:hover {
    color: #333333 !important;
    text-decoration: underline;
}

.header-middle-bar a:hover,
.header-middle-bar .link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Белые иконки в middle bar */
.header-middle-bar svg,
.header-middle-bar .icon,
.header-middle-bar [class*="icon"] {
    fill: #ffffff;
    color: #ffffff;
}

/* Поисковая строка в middle bar */
.header-middle-bar .search-form__input,
.header-middle-bar input[type="search"],
.header-middle-bar input[type="text"] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333333;
}

.header-middle-bar .search-form__input:focus,
.header-middle-bar input[type="search"]:focus {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-middle-bar .search-form__button {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-middle-bar .search-form__button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Счетчики и лейблы в middle bar */
.header-middle-bar .counter,
.header-middle-bar .label,
.header-middle-bar .badge {
    background: #ff5722;
    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_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;
}