/* ---- 1. ОБЩИЕ СТИЛИ ДЛЯ СТРАНИЦЫ ---- */

body {
    background-color: #fefefe; /* Наш мягкий фоновый цвет */
    color: #283e53;             /* Основной цвет текста для высокой читаемости */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- 2. ТИПОГРАФИКА И ССЫЛКИ ---- */

/* Заголовки делаем темными и четкими */
h1, h2, h3, h4, h5, h6, .uk-comment-title {
    color: #283e53;
}

/* Ссылки делаем яркими и заметными */
a {
    color: #039ee3; /* Основной акцентный цвет */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #283e53; /* При наведении — цвет основного текста */
}


/* ---- 3. СТИЛИЗАЦИЯ БЛОКА ОТЗЫВОВ ---- */

/* Саму карточку отзыва можно сделать чисто белой, чтобы она выделялась на фоне #fefefe */
.uk-card-default {
    background-color: #ffffff;
    border: 1px solid #e9e9e9; /* Тонкая рамка для завершенности */
}

/* Кнопка "Отправить" и другие главные кнопки */
.uk-button-primary {
    background-color: #039ee3;
    color: #fefefe;
}

.uk-button-primary:hover {
    background-color: #0286c2; /* Немного темнее при наведении */
}

/* Второстепенная текстовая кнопка "Комментировать" */
.uk-button-text {
    color: #039ee3;
}

/* ---- 4. РЕЙТИНГИ И ГОЛОСОВАНИЕ (АКЦЕНТЫ) ---- */

/* Звезды рейтинга и цифра общей оценки — самые важные элементы! */
.rating-stars,
.rating-stars span[uk-icon="star"] {
    color: #eb280a; /* Вторичный, "огненный" акцент */
}

/* Иконки голосования */
.uk-icon-button[uk-icon="plus-circle"] {
    color: #eb280a; /* Позитивное действие — основной акцентный цвет */
}
.uk-icon-button[uk-icon="minus-circle"]:hover {
    color: #eb280a;
}

.uk-icon-button[uk-icon="minus-circle"] {
    color: #999; /* Негативное действие сделать нейтральным серым */
}
.uk-icon-button[uk-icon="minus-circle"]:hover {
    color: #283e53; /* ...или темным при наведении */
}


.uk-notification {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: auto !important;
    max-width: 90% !important;
}

.uk-notification-message {
    text-align: center;
}

.htmx-indicator {
    display: none;
    opacity: 0;
}
.htmx-request .htmx-indicator {
    display: inline-block;
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Затемняющий слой для фона в шапке (hero section) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Черный цвет с прозрачностью 40% */
    z-index: 1; /* Убедитесь, что этот слой находится ниже текста (который будет иметь z-index: 2) */
}