@charset "UTF-8";
.custom-rates {
  display: flex;
  /* Align reaction items in a row */
  gap: 1rem;
  /* Space between each reaction+count group */
  align-items: center;
  /* Vertically center icons with counts */
  background: #ececec;
  /* Light grey background (optional) */
  border-radius: 2rem;
  /* Rounded pill shape for the whole bar */
  padding: 0.5rem 1rem;
  /* Some inner spacing */
  width: fit-content;
  /* Shrink‑wrap the container */
  margin-top: 1em;
  margin-bottom: 1em;
}
.custom-rates__rate {
  position: relative;
  /* Needed for absolute positioning if you prefer, but we use flex */
  display: flex;
  /* Put icon and count side by side */
  align-items: center;
  gap: 0.3rem;
  /* Tiny gap between icon and its counter */
}
.custom-rates__rate-can-rate {
  cursor: pointer;
}
.custom-rates__rate-image {
  object-fit: contain;
  /* Keep aspect ratio */
  transition: transform 0.2s ease;
  /* Smooth hover effect */
  display: block;
  /* Removes extra space below image */
}
.custom-rates__rate-image:hover {
  transform: scale(2);
  /* Slight zoom on hover – like Facebook */
}
.custom-rates__rate-not-rated .custom-rates__rate-image {
  opacity: 0.5;
}
.custom-rates__rate-rated .custom-rates__rate-image:hover {
  opacity: 1;
}
.custom-rates__counter {
  text-decoration: none !important;
  padding: 0.5em;
  font-size: 0.9rem;
  /* Slightly smaller than normal text */
}
.modal-custom-rates {
  /*font-size: 0.8rem; /* Slightly smaller than normal text */
}
.modal-custom-rates.title--modal {
  /*font-size: 0.8rem; /* Slightly smaller than normal text */
}
.modal-custom-rates .row--simple-columns {
  grid-template-columns: min-content 1fr 1fr;
}
.custom-rates__rate-image {
  max-width: 2em;
  /* Adjust to your PNG size */
  max-height: 2em;
}