/* Делаем режим "Источник" в CKEditor читаемым и красивым */
textarea.cke_source {
    color: #1a1a1a !important;          /* Темный текст */
    background-color: #f8f9fa !important; /* Светло-серый фон */
    font-family: 'Consolas', 'Courier New', monospace !important; /* Шрифт как в редакторах кода */
    font-size: 14px !important;
    padding: 15px !important;
}
.service-icon-custom {
    filter: invert(15%) sepia(95%) saturate(3940%) hue-rotate(222deg) brightness(95%) contrast(100%);
}

/* Белый цвет при наведении */
.group:hover .service-icon-custom {
    filter: brightness(0) invert(1) !important;
}

@media (max-width: 768px) {
    /* Принудительно красим фон иконки при нажатии на карточку */
    .card:active .bg-\[\#dbeafe\] {
        background-color: var(--p) !important; /* --p это переменная primary в DaisyUI */
        border-color: var(--p) !important;
    }
    /* Принудительно инвертируем иконку */
    .card:active .service-icon-custom {
        filter: brightness(0) invert(1) !important;
    }
}

/* Основной контейнер выпадающего списка */
.select2-container--default .select2-results__option {
    background-color: var(--body-bg, #ffffff); /* Использование переменной темы админки */
    color: var(--body-fg, #333333);
    padding: 8px 12px;
}

/* Элемент при наведении (highlighted) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6 !important; /* Ваш синий акцент */
    color: #ffffff !important;
}

/* Фон поля, где отображаются выбранные теги */
.select2-container--default .select2-selection--multiple {
    background-color: var(--body-bg, #ffffff) !important;
    border: 1px solid var(--border-color, #ccc) !important;
}

/* Текст выбранных тегов внутри поля */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3b82f6 !important;
    border: none;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Цвет крестика удаления тега */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
}

/* Исправление выпадающего списка для любой темы */
.select2-dropdown {
    background-color: var(--body-bg, #ffffff) !important;
    border: 1px solid var(--border-color, #ccc) !important;
}

/* Находим контейнер формы, содержащий поле тегов */
.field-tags {
    display: flex !important;
    align-items: center !important; /* Выравнивание по вертикали */
    gap: 15px !important;           /* Расстояние между полем и кнопкой */
}

/* Настраиваем саму кнопку, чтобы она выглядела аккуратно */
.field-tags a {
    white-space: nowrap;    /* Чтобы текст кнопки не переносился */
    text-decoration: none;
    font-size: 13px;
    color: #3b82f6 !important; /* Цвет вашего акцента */
}

.field-tags a:hover {
    text-decoration: underline;
}

/* Немного подправим ширину select2, чтобы он не улетал вправо */
.field-tags .select2-container {
    flex-grow: 1;           /* Поле ввода занимает всё свободное место */
    max-width: 400px;       /* Ограничьте ширину, если нужно */
}