/* Стили для секции рейтинга */

.rating-container {
  margin-top: 150px !important;
}

.rating-list-custom li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.rating-progress {
  flex: 1;
  margin-left: 10px;
  background-color: #f1f1f1;
  height: 5px;
}

.rating-progress-bar {
  background-color: #ffc107; /* Желтый цвет для полосы прогресса */
}

.rating-stars-main {
  display: flex; /* Горизонтальное расположение звёзд */
  gap: 8px; /* Расстояние между звёздами */
  cursor: pointer; /* Указатель при наведении */
  justify-content: center; /* Центрируем звезды по горизонтали */
  align-items: center; /* Центрируем звезды по вертикали */
  margin-top: 10px; /* Увеличиваем отступ сверху */
}

.rating-stars-main i {
  color: #ffc107; /* Желтый цвет для звезд */
  margin-right: 2px; /* Расстояние между звездами */
}

.rating-stars-main i:last-child {
  margin-right: 0; /* Убираем отступ у последней звезды */
}

/* Стили для звезд */
.rating-stars {
  display: flex;
  gap: 8px; /* Расстояние между звёздами */
  cursor: pointer;
  margin-bottom: 10px;
}

.rating-stars i {
  color: #ffc107; /* Желтый цвет для звезд */
  margin-right: 2px;
}

.rating-stars i:last-child {
  margin-right: 0;
}

/* Размер шрифта звёзд */
.rating-star {
  font-size: 4rem; /* Увеличиваем размер звёзд */
  color: #ddd; /* Серый цвет по умолчанию */
  transition: color 0.3s ease;
}

.rating-star.active {
  color: #ffc107; /* Желтый для выбранных */
}

.rating-star:hover {
  color: #ffa500; /* Оранжевый цвет при наведении */
}

/* Уменьшение размера звёзд для мобильных устройств */
@media (max-width: 768px) {
  /* Для экранов до 768px */
  .rating-star {
    font-size: 2.2rem; /* Уменьшенный размер шрифта */
  }
}

/* Рейтинг и текст */
.rating-score {
  color: #2c3e50; /* Темно-синий цвет, чтобы выделить */
  font-size: 3.5rem; /* Увеличение размера шрифта */
}

.rating-count {
  font-size: 1rem; /* Размер шрифта */
  color: #6c757d; /* Серо-синий цвет (Bootstrap text-muted) */
  margin-top: 0.5rem; /* Отступ сверху для отделения от заголовка */
  margin-bottom: 0px !important;
}

.rating-section-bg {
  background-color: #f8f9fa; /* Светло-серый фон */
  padding: 20px; /* Внутренние отступы */
  border-radius: 8px; /* Сглаженные углы */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Кнопки */
.rating-btn {
  background-color: #359acf; /* Синий фон для кнопки "Написать отзыв" */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 10px;
}

.rating-btn:hover {
  background-color: #0056b3;
  border-color: #004085;
  color: #fff;
}

.question-btn {
  background-color: #28a745; /* Зеленый фон для кнопки "Задать вопрос" */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 10px;
  margin-left: 5px; /* Отступ между кнопками */
}

.question-btn:hover {
  background-color: #218838; /* Темно-зеленый цвет при наведении */
  color: #fff;
}

/* Стили для вкладок в review-tabs */
.nav.review-tabs {
  background-color: #f8f9fa; /* Светло-серый фон для области вкладок */
  border-bottom: 2px solid #ddd; /* Линия снизу */
  padding: 8px; /* Увеличенный внутренний отступ для большего размера вкладок */
  border-radius: 5px; /* Сглаженные углы */
}

/* Стили для ссылок вкладок */
.nav.review-tabs .nav-link {
  color: #6c757d; /* Серый цвет текста для неактивных вкладок */
  font-weight: 600; /* Полужирный текст */
  font-size: 1.1rem; /* Увеличенный размер шрифта */
  padding: 12px 20px; /* Увеличенные отступы для расширения вкладок */
  transition: color 0.3s, background-color 0.3s; /* Плавный переход */
  border-radius: 5px; /* Сглаженные углы */
}

/* Стили для активной вкладки */
.nav.review-tabs .nav-link.active {
  color: #007bff; /* Синий цвет текста для активной вкладки */
  border-bottom: 3px solid #007bff; /* Синяя линия под активной вкладкой */
  background-color: #ffffff; /* Белый фон активной вкладки */
  font-size: 1.2rem; /* Еще больший размер шрифта для активной вкладки */
}

/* Hover эффект для вкладок */
.nav.review-tabs .nav-link:hover {
  color: #0056b3; /* Темно-синий цвет текста при наведении */
  background-color: #e9ecef; /* Светло-серый фон при наведении */
}

/* Отключаем эффект для вкладок */
ul.nav.review-tabs li + li::before {
  content: ""; /* Убираем контент */
  margin: 0; /* Убираем отступ */
}

/* Дополнительные стили для карточек отзывов */
.review-card {
  border: 1px solid #e0e0e0;
}

.review-card-body {
  padding: 15px;
}

.review-author {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.review-text {
  margin-top: 15px;
  margin-bottom: 15px;
}

.review-date {
  font-size: 0.9em;
  color: #6c757d;
}

/* Стили для блока с ответом от ЕвроМобайл */
.rating-response {
  background-color: #f1f8e9; /* Светло-зеленый фон для выделения */
  border-left: 4px solid #fd7e14; /* Зеленая полоса для акцента */
  padding: 15px;
  border-radius: 5px; /* Сглаженные углы */
  margin-top: 15px; /* Отступ сверху для отделения */
}

.rating-response h6 {
  color: #2c3e50; /* Темно-синий цвет для имени компании */
  font-weight: bold;
  margin-bottom: 5px;
}

.rating-response-text {
  color: #4d4d4d; /* Темно-серый цвет текста */
  font-size: 0.95rem;
  margin-top: 15px;
}

.rating-response .text-muted {
  font-size: 0.85rem; /* Уменьшенный размер шрифта для даты */
  color: #6c757d; /* Серо-синий цвет */
  margin-bottom: 10px;
}

/* Основной стиль для полей */
.rating-field {
  margin-bottom: 30px;
  gap: 10px; /* Расстояние между текстом и звездами */
}

.rating-label {
  display: block;
  font-weight: bold;
  margin: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #333;
}

.rating-input {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  font-size: 1rem;
}

.rating-input:focus {
  border-color: #007bff;
  outline: none;
}

/* Стили для чекбоксов */
.styled-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #007bff; /* Синий обвод */
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.rating-checkbox-label {
  font-weight: normal;
  font-size: 1rem;
}

/* Стили кнопок */
.rating-btn-cancel {
  background-color: #6c757d;
  color: #fff;
  padding: 8px 15px;
  font-size: 0.9rem;
  border-radius: 5px;
  border: none;
}

.rating-btn-cancel:hover {
  background-color: #5a6268;
  color: #fff;
}

.rating-btn-submit {
  background-color: #007bff; /* Синий фон */
  color: #fff; /* Белый текст */
  padding: 10px 20px; /* Пространство внутри кнопки */
  font-size: 1rem; /* Размер шрифта */
  border-radius: 5px; /* Сглаженные углы */
  border: none; /* Убираем границу */
  transition: background-color 0.3s ease, color 0.3s ease; /* Плавные переходы */
}

.rating-btn-submit:hover {
  background-color: #0056b3; /* Более тёмный синий при наведении */
  color: #fff; /* Сохраняем белый текст */
}

.review-card.review {
  border-left: 4px solid #007bff; /* Зеленая граница для отзывов */
}
.review-card.question {
  border-left: 4px solid #28a745; /* Синяя граница для вопросов */
}

/* Основной контейнер */
.moderation-rules {
  background-color: #e8f7fb !important; /* Светло-голубой фон */
  border: 1px solid #bee3f4 !important; /* Голубая рамка */
  border-radius: 4px !important; /* Скругленные углы */
  padding: 20px !important; /* Отступы внутри */
  font-family: Arial, sans-serif !important; /* Гарнитура */
  color: #333 !important; /* Цвет текста */
}

/* Заголовок */
.moderation-title {
  font-size: 1.25rem !important; /* Размер заголовка */
  font-weight: bold !important; /* Жирный шрифт */
  color: #0056b3 !important; /* Темно-синий цвет */
  margin-bottom: 10px !important; /* Отступ снизу */
}

/* Описание (перед списком) */
.moderation-description {
  font-size: 1rem !important; /* Обычный размер текста */
  margin-bottom: 15px !important; /* Отступ снизу */
}

/* Список */
.moderation-list {
  padding-left: 20px !important; /* Отступ слева для списка */
  list-style-type: disc !important; /* Маркеры списка */
  margin-bottom: 15px !important; /* Отступ снизу */
}

.moderation-list li {
  margin-bottom: 10px !important; /* Отступ между элементами списка */
}

/* Подвал (последний абзац) */
.moderation-footer {
  font-size: 0.9rem !important; /* Меньший размер текста */
  color: #555 !important; /* Серый цвет */
  margin-top: 15px !important; /* Отступ сверху */
}

/* Общее модальное окно */
.how-to-review-modal-content {
  background-color: #ffffff; /* Белый фон */
  border-radius: 10px; /* Скругленные углы */
  padding: 20px 30px; /* Увеличенные отступы */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Глубокая тень */
  max-width: 100%;
}

/* Заголовок модального окна */
.how-to-review-modal-title {
  font-size: 1.8rem; /* Увеличенный размер шрифта */
  font-weight: bold;
  color: #0056b3; /* Синий цвет */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Расстояние между иконкой и текстом */
  margin-bottom: 15px;
  text-align: center;
}

/* Описание модального окна */
.how-to-review-modal-description {
  font-size: 1rem; /* Нормальный размер текста */
  color: #6c757d; /* Серо-синий цвет */
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.6; /* Увеличенный межстрочный интервал */
}
/* Секция для компаний */
.how-to-review-companies {
  padding: 20px;
  border-right: 1px solid #e5e5e5; /* Разделительная линия */
}

.how-to-review-companies-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #0056b3; /* Синий цвет */
  text-align: center;
  margin-bottom: 15px;
}

/* Секция для частных лиц */
.how-to-review-individuals {
  padding: 20px;
}

.how-to-review-individuals-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #28a745; /* Зеленый цвет */
  text-align: center;
  margin-bottom: 15px;
}

/* Секции для компаний и частных лиц */
.how-to-review-section {
  padding: 20px; /* Отступы внутри секции */
}

/* Заголовки секций */
.how-to-review-section-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

/* Стили для текста в секциях */
.how-to-review-section p {
  font-size: 1rem;
  color: #333; /* Темный текст */
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Общий стиль списка */
.how-to-review-list {
  padding-left: 25px; /* Отступы для списка */
  margin-bottom: 20px; /* Отступ снизу */
  list-style-type: disc; /* Маркеры */
}

.how-to-review-list > li {
  margin-bottom: 12px; /* Расстояние между пунктами */
  font-weight: bold;
  color: #0056b3; /* Синий текст */
}

.how-to-review-list ul {
  list-style-type: circle; /* Подсписок с круглыми маркерами */
  margin-top: 8px;
}

.how-to-review-list ul li {
  font-weight: normal; /* Нормальный вес текста для подсписков */
  color: #333; /* Темный текст */
  margin-bottom: 5px; /* Меньший отступ для подсписков */
}

/* Линии разделения */
.how-to-review-divider {
  border-top: 2px solid #e5e5e5; /* Светло-серый цвет разделителя */
  margin: 25px 0;
}

/* Кнопка закрытия внизу модального окна */
.how-to-review-close-btn {
  display: inline-block;
  margin: 20px auto 0; /* Отступы: сверху, автоцентрирование, снизу */
  background-color: #6c757d; /* Цвет кнопки */
  color: #fff; /* Цвет текста */
  border: none;
  font-size: 1rem; /* Размер шрифта */
  padding: 10px 20px; /* Внутренние отступы */
  border-radius: 5px; /* Скругленные углы */
  cursor: pointer; /* Указатель при наведении */
  text-align: center; /* Центрирование текста */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход */
}

/* Ховер-эффект для кнопки */
.how-to-review-close-btn:hover {
  background-color: #5a6268; /* Темнее при наведении */
  transform: translateY(-2px); /* Легкий подъем */
}

/* Стили для кнопок */
.how-to-review-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background-color: #007bff; /* Синий фон */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.how-to-review-btn:hover {
  background-color: #0056b3; /* Темно-синий фон при наведении */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Легкая тень */
}

/* Стили для заголовков внутри модального окна */
.how-to-review-heading {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  color: #007bff; /* Яркий синий */
}

/* Отступы и выравнивание текста в списках */
.how-to-review-extra-tips {
  padding: 20px;
  background-color: #f8f9fa; /* Светло-серый фон */
  border-radius: 8px; /* Скругленные углы */
  border: 1px solid #e5e5e5; /* Легкая граница */
}

.how-to-review-extra-tips h6 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #17a2b8; /* Бирюзовый */
  margin-bottom: 10px;
  text-align: center;
}

/* Дополнительные списки */
.how-to-review-extra-tips ul {
  list-style-type: disc;
  padding-left: 25px;
}

.how-to-review-extra-tips li {
  margin-bottom: 10px;
  color: #333;
}

/* Финальный блок от себя */
.how-to-review-from-yourself {
  padding: 15px;
  background-color: #f8f9fa; /* Светло-желтый фон */
  border: 1px solid #ffeeba; /* Желтая граница */
  border-radius: 8px;
  margin-top: 20px;
}

.how-to-review-from-yourself h6 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffc107; /* Желтый цвет */
  margin-bottom: 10px;
  text-align: center;
}

.how-to-review-from-yourself p {
  font-size: 0.95rem;
  color: #6c757d;
  text-align: center;
}

.how-to-review-from-yourself ul {
  padding-left: 20px;
  list-style-type: disc;
}

.how-to-review-modal-content strong {
  font-weight: bold !important; /* Обеспечиваем жирный текст только внутри модального окна */
}

/* Кнопку Написать отзыв перекрывала скрытая инфа в Теххарактеристиках */
#writeReviewBtn {
  position: relative; /* Обязательно, чтобы z-index применялся */
  z-index: 2; /* Установите высокий z-index */
}
/* При открытии модального окна (Bootstrap добавляет класс .modal-open к <body>) */
.modal-open #writeReviewBtn {
  z-index: 1; /* Снижаем z-index, чтобы кнопка не перекрывала модальное окно */
}
#openModalButtonQuestion {
  position: relative; /* Обязательно, чтобы z-index применялся */
  z-index: 2; /* Установите высокий z-index */
}
/* При открытии модального окна (Bootstrap добавляет класс .modal-open к <body>) */
.modal-open #openModalButtonQuestion {
  z-index: 1; /* Снижаем z-index, чтобы кнопка не перекрывала модальное окно */
}