/**
 * Woo breadcrumbs customization
 */

/* Add text "Back to" in mobile for Bricks Builder Breadcrumbs */
@media only screen and (max-width: 767px) {
  .brxe-woocommerce-breadcrumbs nav::before {
    content: "Назад в: ";
    display: inline;
    padding-right: var(--xs);

  }

  .brxe-woocommerce-breadcrumbs nav .navigation a:first-child {
    display: none;
  }
}


@media only screen and (max-width: 767px) {
  /* Remove the first separator after the hidden first link */
  .brxe-woocommerce-breadcrumbs nav .navigation a:first-child + .separator {
    display: none;
  }

  /* Remove the last separator */
  .brxe-woocommerce-breadcrumbs nav .navigation .separator:last-of-type {
    display: none;
  }
}


#single-price .price del {
  font-size: var(--text-l);
}




/**
 * AVG Custom star rating
 */

#ml_avg_rating .brxe-rating {
  display: flex;
  gap: 4px;
  align-items: center;
}

#ml_avg_rating .star-icon {
  font-size: 30px;
  line-height: 0;
}

#ml_avg_rating .icon.full-color .star-icon {
  fill: var(--primary-ultra-dark);
  stroke: var(--primary-ultra-dark);
}

#ml_avg_rating .icon.empty-color .star-icon {
  fill: none;
  stroke: var(--bricks-border-color);
}

#ml_avg_rating .icon.half-color .star-icon {
  stroke: var(--primary-ultra-dark);
}

/* rating - archive */


.arc_avg_rating .brxe-rating {
  display: flex;
  gap: 4px;
  align-items: center;
}

.arc_avg_rating .star-icon {
  font-size: 18px;
  line-height: 0;
}

.arc_avg_rating .icon.full-color .star-icon {
  fill: var(--primary-ultra-dark);
  stroke: var(--primary-ultra-dark);
}

.arc_avg_rating .icon.empty-color .star-icon {
  fill: none;
  stroke: var(--bricks-border-color);
}

.arc_avg_rating .icon.half-color .star-icon {
  stroke: var(--primary-ultra-dark);
}



/**
 * Custom icons for additional rating  options
 */


 /* Все звезды — в одном цвете (например, желтый), независимо от класса. */
#rating_option_1 .icon {
  color: var(--primary); /* Цвет для закрашенных звезд */
}

/* Принудительно делаем даже пустые иконки "закрашенными" */
.brxe-rating .icon.empty-color svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Вставляем кастомную иконку для звезды в зависимости от рейтинга */
.brxe-rating[data-rating="Poor"] .icon:nth-child(1)::before,
.brxe-rating[data-rating="Fair"] .icon:nth-child(2)::before,
.brxe-rating[data-rating="Good"] .icon:nth-child(3)::before,
.brxe-rating[data-rating="Very Good"] .icon:nth-child(4)::before,
.brxe-rating[data-rating="Excellent"] .icon:nth-child(5)::before {
  content: "";
  display: inline-block;
  width: var(--2xl);
  height: var(--2xl);
  background-image: url("/wp-content/uploads/2025/04/checkbox-circle-checked.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(5%) sepia(34%) saturate(3194%) hue-rotate(187deg) brightness(82%) contrast(98%);
}



/* Скрываем стандартные иконки для кастомной звезды (по конкретному рейтингу) */
.brxe-rating[data-rating="Poor"] .icon:nth-child(1) svg,
.brxe-rating[data-rating="Fair"] .icon:nth-child(2) svg,
.brxe-rating[data-rating="Good"] .icon:nth-child(3) svg,
.brxe-rating[data-rating="Very Good"] .icon:nth-child(4) svg,
.brxe-rating[data-rating="Excellent"] .icon:nth-child(5) svg {
  display: none;
}


/* Подпись для первой звезды (Poor) */
#rating_option_1 .icon:nth-child(1)::after {
  content: "Poor";
  position: absolute;
  bottom: -25px; /* Расстояние под звездой */
  left: 0; /* Под первой иконкой */
  width: 100%;
  text-align: center; /* Центрируем текст */
  font-size: 20px; /* Размер шрифта */
  color: #333; /* Цвет текста */
}

/* Подпись для пятой звезды (Excellent) */
#rating_option_1 .icon:nth-child(5)::after {
  content: "Excellent";
  position: absolute;
  bottom: -25px; /* Расстояние под звездой */
  right: 0; /* Под пятой иконкой */
  width: 100%;
  text-align: center; /* Центрируем текст */
  font-size: 20px; /* Размер шрифта */
  color: #333; /* Цвет текста */
}

/* Чтобы иконки оставались в правильном положении, задаём position: relative */
#rating_option_1 .icon {
  position: relative;
}


/* Option #2 (add ) */

/* Вставляем кастомную иконку для звезды в зависимости от рейтинга */
.brxe-rating[data-rating="Small"] .icon:nth-child(1)::before,
.brxe-rating[data-rating="Slightly Small"] .icon:nth-child(2)::before,
.brxe-rating[data-rating="Right"] .icon:nth-child(3)::before,
.brxe-rating[data-rating="Slightly Large"] .icon:nth-child(4)::before,
.brxe-rating[data-rating="Large"] .icon:nth-child(5)::before {
  content: "";
  display: inline-block;
  width: var(--2xl);
  height: var(--2xl);
  background-image: url("/wp-content/uploads/2025/04/checkbox-square-checked.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(5%) sepia(34%) saturate(3194%) hue-rotate(187deg) brightness(82%) contrast(98%);
}

/* Скрываем стандартные иконки для кастомной звезды (по конкретному рейтингу) */
.brxe-rating[data-rating="Small"] .icon:nth-child(1) svg,
.brxe-rating[data-rating="Slightly Small"] .icon:nth-child(2) svg,
.brxe-rating[data-rating="Right"] .icon:nth-child(3) svg,
.brxe-rating[data-rating="Slightly Large"] .icon:nth-child(4) svg,
.brxe-rating[data-rating="Large"] .icon:nth-child(5) svg {
  display: none;
}

/* Подпись для первой звезды (Small) */
#rating_option_2 .icon:nth-child(1)::after {
  content: "Small";
  position: absolute;
  bottom: -25px; /* Расстояние под звездой */
  left: 0; /* Под первой иконкой */
  width: 100%;
  text-align: center; /* Центрируем текст */
  font-size: 20px; /* Размер шрифта */
  color: #333; /* Цвет текста */
}

/* Подпись для пятой звезды (Right) */
#rating_option_2 .icon:nth-child(3)::after {
  content: "Right";
  position: absolute;
  bottom: -25px; /* Расстояние под звездой */
  right: 0; /* Под пятой иконкой */
  width: 100%;
  text-align: center; /* Центрируем текст */
  font-size: 20px; /* Размер шрифта */
  color: #333; /* Цвет текста */
}


/* Подпись для пятой звезды (ELarge) */
#rating_option_2 .icon:nth-child(5)::after {
  content: "Large";
  position: absolute;
  bottom: -25px; /* Расстояние под звездой */
  right: 0; /* Под пятой иконкой */
  width: 100%;
  text-align: center; /* Центрируем текст */
  font-size: 20px; /* Размер шрифта */
  color: #333; /* Цвет текста */
}

/* Чтобы иконки оставались в правильном положении, задаём position: relative */
#rating_option_2 .icon {
  position: relative;
}


@media only screen and (max-width: 767px) {
  #rating_option_1 .icon:nth-child(5)::after {
  bottom: -25px; /* Расстояние под звездой */
  right: -10px; /* Под пятой иконкой */
  width: 60px;
  }
}