:root {
    --brand-white: #ffffff;
    --brand-black-rgb: 0, 0, 0;
    --brand-primary: #1e40af;
    --brand-secondary: #2563eb;
    --brand-dark-1: #1a1a1a;
    --brand-dark-2: #2d2d2d;
    
    /* Еталонні кольори для модальних хедерів (з secondary-card-header) */
    --modal-header-bg: #2563eb;
    --modal-header-text: #ffffff;
    --modal-header-icon: #ffffff;
    --modal-header-border: #d1d5db;
}

[data-bs-theme="dark"] {
    /* Темна тема для модальних хедерів */
    --modal-header-bg: #1e40af;
    --modal-header-text: #f9fafb;
    --modal-header-icon: #f9fafb;
    --modal-header-border: #374151;
}

/* Глобальне виправлення кнопок закриття модальних вікон */
/* Цей файл повинен завантажуватися останнім для перевизначення Bootstrap стилів */

/* Виправлення відображення іконки закриття модалки (.btn-close) без декоративного кола */
.modal-header .btn-close {
    /* Показуємо стандартний SVG-хрестик Bootstrap */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1em !important;

    /* Жодних тіней/бордерів/бекдропів — прибираємо «біле коло» */
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;

    /* Стабільне позиціювання у заголовку модалки */
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;

    /* Дозволяємо керувати кольором через стандартні Bootstrap змінні */
    filter: var(--bs-btn-close-filter, none) !important;
    opacity: 1 !important;
}

/* Hover: лише легкий візуальний фідбек без фону-кола */
.modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* Не чіпаємо псевдоелементи — використовуємо стандартний SVG background */

/* Усунено залежність від внутрішнього .close-icon — іконка тепер стандартна */

/* Темна тема: колір іконки керується класом .btn-close-white або змінними Bootstrap */

/* Глобальні стилі для заголовків модальних вікон (еталон secondary-card-header) */
.modal-header {
    background: var(--modal-header-bg) !important;
    color: var(--modal-header-text) !important;
    border-bottom: 1px solid var(--modal-header-border) !important;
    border-radius: 0 !important;
    padding: 1rem 1.5rem !important;
    position: relative !important;
    overflow: visible !important;
    min-height: auto !important;
    font-weight: 600 !important;
}

/* Стилі для заголовка та іконок */
.modal-header .modal-title,
.modal-header h1, .modal-header h2, .modal-header h3, 
.modal-header h4, .modal-header h5, .modal-header h6 {
    color: var(--modal-header-text) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.modal-header i {
    color: var(--modal-header-icon) !important;
}

/* Кнопка закриття - для світлої теми темна, для темної теми світла */
.modal-header .btn-close {
    filter: none !important;
}

[data-bs-theme="dark"] .modal-header .btn-close {
    filter: invert(1) brightness(2) !important;
}

/* Додаткові модалки: так само без «білого кола», з іконкою Bootstrap */
#addEventModal .btn-close,
#buyFreezeModal .btn-close,
.twofa-modal .btn-close,
.support-modal .btn-close {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}