/* 🌐 Сужаем блок с отзывами */
.custom-review-container {
    max-width: 950px;     /* можно попробовать 700 или 750 для уже */
    margin: 0 auto;       /* центрирует */
    padding: 20px;
}

/* 🌌 Общий стиль заголовков */
h1.review-title,
h3.review-title {
    color: #00ccff;                  /* цвет текста */
    text-align: center;             /* Центровка */
    margin: 2rem 0 1rem 0;          /* Отступы сверху и снизу */
    font-weight: 700;               /* Жирный текст */

    /* Мягкое неоновое свечение синего цвета */
text-shadow:
    0 0 3px #007bff,                    /* 🔷 Основное синее свечение — самое яркое и чёткое */
    0 0 10px rgba(0, 123, 255, 0.5),     /* 🔷 Полупрозрачная аура — добавляет мягкость вокруг */
    0 0 6px rgba(0, 123, 255, 0.3);     /* 🔷 Ещё более мягкое внешнее свечение — создаёт глубину */
}


/* 📝 Форма отзыва */
textarea.form-control {
    background-color: #000;
    color: #FFFFFF;
    border: 1px solid #007bff;
    border-radius: 8px;
    padding: 10px;
}

label.form-label {
    color: #00ccff;           /* менять здесь */
    font-weight: 600;
    margin-bottom: 6px;
}

/* ✨ Кнопка */
.btn-primary {
    background-color: #000;
    border: 1px solid #007bff;
    color: #00ccff;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    box-shadow:
        inset 0 0 6px #007bff,
        0 0 10px #007bff;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #001828;
    color: #ffffff;
    box-shadow:
        inset 0 0 10px #007bff,
        0 0 20px #007bff,
        0 0 30px #007bff;
}

/* ⭐️ Стили для звёзд */
.star {
    font-size: 26px;
    cursor: pointer;
    color: #444; /* немного ярче на тёмном фоне */
    transition: color 0.3s, text-shadow 0.3s;
}

/* Подсветка при наведении */
.star:hover {
    color: gold;
    text-shadow: 0 0 8px gold;
}

/* Заполненные звёзды */
.star.filled {
    color: gold;
    text-shadow: 0 0 10px gold;
}


/* Меню редактирования отзыва */
.btn-sm.btn-light {
    border: none;
    background: none;
    font-size: 18px;
    color: #ccc;
}

.dropdown-menu {
    background-color: #111;
    border: 1px solid #333;
    color: #fff;
}

.dropdown-item {
    color: #ccc;
}

.dropdown-item:hover {
    background-color: #222;
    color: #00ccff;
}

/* 🎯 Только карточки отзывов */
.review-card {
    background-color: #000;                             /* Чёрный фон карточки */
    color: #ccc;                                        /* Светло-серый цвет текста */
    border: 1px solid #222;                             /* Тонкая тёмная граница */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);        /* 💡 Очень мягкое неоново-голубое свечение */
}

.text-muted {
    color: #666 !important;
}


/* 🌌 Обёртка блока с отзывами */
.review-list-wrapper {
    background-color: rgba(0, 0, 0, 0.4);  /* Полупрозрачный тёмный фон */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 204, 255, 0.1);
    margin-top: 30px;
}

/* 🔹 Надпись "отзывов пока нет" */
.no-reviews-text {
    color: #00ccff;
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
    text-shadow: 0 0 4px rgba(0, 204, 255, 0.5);
}


/* === 🔴 Кнопка "Отмена" — общая с "Выйти" === */
.neon-btn-red {
    background: #1c1f30;
    color: #ff0033;
    border: 1px solid #ff0033;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 15px;
    text-decoration: none;
    box-shadow: inset 0 0 4px #ff0033, 0 0 8px rgba(255, 0, 51, 0.3);
    transition: 0.3s ease;
}

.neon-btn-red:hover {
    box-shadow: 0 0 10px #ff0033, 0 0 20px #ff0033;
    background-color: #ff0033;
    color: #000;
}


/* === 🔵 Неоновая синяя кнопка "ОТМЕНА" === */
.neon-btn-blue {
    background: #1c1f30;
    color: #00ccff;
    border: 1px solid #00ccff;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 15px;
    text-decoration: none;
    box-shadow: inset 0 0 4px #00ccff, 0 0 8px rgba(0, 204, 255, 0.3);
    transition: 0.3s ease;
}

.neon-btn-blue:hover {
    background-color: #00ccff;
    color: #000;
    box-shadow: 0 0 10px #00ccff, 0 0 20px #00ccff;
}




/* === 🟢 Унифицированная зелёная неоновая кнопка === */
.neon-btn-green {
    background: #1c1f30;
    color: #44d444;
    border: 1px solid #44d444;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 15px;
    text-decoration: none;
    box-shadow: inset 0 0 4px #44d444, 0 0 8px rgba(68, 212, 68, 0.3);
    transition: 0.3s ease;
}

.neon-btn-green:hover {
    box-shadow: 0 0 10px #44d444, 0 0 20px #44d444;
    background-color: #44d444;
    color: #000;
}


/* ❌ Кнопка "Отмена" — красная */
.btn-cancel {
    background-color: #ff0033;
    color: #fff;
    border: 1px solid #ff0033;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 20px;
    box-shadow:
        inset 0 0 6px #ff0033,
        0 0 12px #ff0033;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background-color: #ff0033;
    color: #fff;
    box-shadow:
        inset 0 0 12px #ff0033,
        0 0 20px #ff0033,
        0 0 30px #ff0033;
}



/* 🔷 Главный заголовок */
.review-title {
    color: #00ccff;
    text-align: center;
    margin: 2rem 0 1.5rem 0;
    font-weight: 700;
    font-size: 2rem;
    text-shadow:
        0 0 3px #007bff,
        0 0 10px rgba(0, 123, 255, 0.5),
        0 0 6px rgba(0, 123, 255, 0.3);
}

/* 💬 Текст подтверждения удаления "Вы уверены, что хотите удалить этот отзыв?" */
.confirm-text {
    color: #00ccff;  /* Неоново-голубой */
    font-size: 18px;
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 204, 255, 0.4);
    margin-top: 10px;
    margin-bottom: 20px;
}


/* 🔷 Неоновая табличка в стиле светлого тумана */
.neon-info-box {
    background: rgba(255, 255, 255, 0.12);    /* Светлый полупрозрачный фон */
    border: 1px solid rgba(0, 204, 255, 0.5); /* Полупрозрачная голубая рамка */
    border-radius: 12px;                      /* 🟦 Скруглённые углы — визуально смягчают блок, придавая футуристичный стиль */
    padding: 1rem 1.5rem;                     /* 📏 Внутренние отступы: 1rem сверху/снизу и 1.5rem слева/справа для воздуха */
    margin-bottom: 2rem;                      /* ⬇️ Отступ снизу — чтобы блок "дышал" и не прилипал к следующим элементам */
    color: #00ffcc;                           /* 💬 Цвет текста — яркий неоново-бирюзовый, хорошо читается на тёмном фоне */


    /* Эффект "запотевшего стекла" */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(15px);   /* Поддержка в Safari */

    box-shadow:
        inset 0 0 6px rgba(0, 204, 255, 0.2),   /* Внутреннее лёгкое свечение */
        0 0 8px rgba(0, 204, 255, 0.15);        /* Внешнее мягкое неоновое свечение */
}

/* 💎 Универсальный голубой цвет для всего содержимого внутри таблички */
.neon-info-box,
.neon-info-box * {
    color: #00ccff; /* Основной неоново-голубой */
}

/* 🔷 Яркий синий цвет только для ссылок */
.neon-info-box a {
    color: #1E90FF; /* Акцент для ссылок */
    text-decoration: underline;
}

/* ✅ Зелёный пункт (редактировать/удалить) "Редактировать" */
.dropdown-item.edit-action {
    color: #44d444;
    font-weight: 500;
}

.dropdown-item.edit-action:hover {
    background-color: rgba(68, 212, 68, 0.1);
    color: #44d444;
    text-shadow: 0 0 6px #44d444;
}

/* 🔴 Красный пункт (редактировать/удалить) "Удалить" */
.dropdown-item.delete-action {
    color: #ff0033;
    font-weight: 500;
}

.dropdown-item.delete-action:hover {
    background-color: rgba(255, 0, 51, 0.08);
    color: #ff0033;
    text-shadow: 0 0 6px #ff0033;
}


.username {
    color: #00ccff;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 204, 255, 0.4);
}


/* -------подтягивание оценок к имени/ доделка к адаптивности к мобильным-------- */
.review-user-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ✅ Мобильный режим — разбиваем на строки */
@media (max-width: 480px) {
  .review-user-rating {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}