/* DLE Rating (unit-rating) with Remix Icon look and fade hover */
:root {
  /* Empty outline star (ri-star-line style) */
  --rating-star-empty: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.77L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.45 13.97L5.82 21z' fill='none' stroke='%2399A3AD' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/></svg>");
  /* Filled star (ri-star-fill style) */
  --rating-star-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.77L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.45 13.97L5.82 21z' fill='%23fea99a' stroke='%23fea99a' stroke-width='2'/></svg>");
  /* Hover fill star color */
  --rating-star-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.77L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.45 13.97L5.82 21z' fill='%23fea99a' stroke='%23fea99a' stroke-width='2'/></svg>");
}

/* Container shows empty stars repeated across width */
.unit-rating {
  width: 80px; height: 16px;
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  background-image: var(--rating-star-empty);
  -webkit-background-size: 16px 16px; background-size: 16px 16px;
  background-repeat: repeat-x;
}

/* Mantener estrellas vacías visibles fuera del overlay en hover */

/* List items and anchors used by DLE */
.unit-rating li {
  text-indent: -90000px;
  padding: 0; margin: 0;
  float: left;
}

/* Overlay control via pseudo-element: starts from left=0 */
.unit-rating li a {
  display: block;
  width: 16px; height: 16px;
  text-decoration: none;
  border: 0 none !important;
  text-indent: -9000px;
  z-index: 17;
  position: absolute;
  padding: 0;
  /* keep per-star left from class rules */
}

/* Máscara para ocultar empties bajo el área hover */
.unit-rating li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; /* offset per rX-unit abajo */
  height: 16px;
  width: 0;
  background-color: var(--rating-bg-mask, #fff);
  pointer-events: none;
  transition: width 160ms ease-in-out;
}

/* Filled overlay pseudo-element */
.unit-rating li a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0; /* offset per rX-unit abajo */
  height: 16px;
  width: 0;
  background-image: var(--rating-star-hover);
  -webkit-background-size: 16px 16px; background-size: 16px 16px;
  background-repeat: repeat-x;
  opacity: 0;
  transition: opacity 160ms ease-in-out, width 160ms ease-in-out;
  pointer-events: none; /* no captura el hover, deja pasar al anchor debajo */
}

/* Fade in the overlay */
.unit-rating li a:hover::after { opacity: 1; }

/* Anchor positions (click area por estrella) */
.unit-rating a.r1-unit { left: 0; }
.unit-rating a.r2-unit { left: 16px; }
.unit-rating a.r3-unit { left: 32px; }
.unit-rating a.r4-unit { left: 48px; }
.unit-rating a.r5-unit { left: 64px; }

/* Offsets para que el fill y la máscara arranquen desde 0 */
.unit-rating a.r1-unit::before, .unit-rating a.r1-unit::after { left: 0; }
.unit-rating a.r2-unit::before, .unit-rating a.r2-unit::after { left: -16px; }
.unit-rating a.r3-unit::before, .unit-rating a.r3-unit::after { left: -32px; }
.unit-rating a.r4-unit::before, .unit-rating a.r4-unit::after { left: -48px; }
.unit-rating a.r5-unit::before, .unit-rating a.r5-unit::after { left: -64px; }

/* Anchos en hover para 1..5 estrellas (máscara y fill) */
.unit-rating a.r1-unit:hover::before, .unit-rating a.r1-unit:hover::after { width: 16px; }
.unit-rating a.r2-unit:hover::before, .unit-rating a.r2-unit:hover::after { width: 32px; }
.unit-rating a.r3-unit:hover::before, .unit-rating a.r3-unit:hover::after { width: 48px; }
.unit-rating a.r4-unit:hover::before, .unit-rating a.r4-unit:hover::after { width: 64px; }
.unit-rating a.r5-unit:hover::before, .unit-rating a.r5-unit:hover::after { width: 80px; }

/* Current rating bar (DLE sets its width inline) */
.unit-rating li.current-rating {
  background-image: var(--rating-star-fill);
  -webkit-background-size: 16px 16px; background-size: 16px 16px;
  background-repeat: repeat-x;
  position: absolute;
  height: 17px;
  display: block;
  text-indent: -9000px;
  z-index: 1;
  padding: 0;
}

.clouds_xsmall, .tags_more, .sort_by_editdate { display: none !important; }

.sort { list-style: none; padding: 0; margin: 0; }
.sort > li, .sort { display: inline; }
.sort > li { margin: 0 0 0 3%; }
.sort > li a { color: #353535; }
.sort > li.asc a, .sort > li.desc a { color: #f5885f; }
.sort > li.asc a:after, .sort > li.desc a:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: 20px;
  background-size: 20px;
}
/* Caret arriba (ASC) usando SVG con fill #f5885f */
.sort > li.asc a:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5885f'><path d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'></path></svg>");
  transform: none;
}
/* Caret abajo (DESC) usando el mismo SVG invertido y fill #f5885f */
.sort > li.desc a:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5885f'><path d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'></path></svg>");
  transform: rotate(180deg);
}