/* public/assets/css/reviews.css
   Styles for the reviews section partial.
   Brand color: burgundy #7a0f0f, gold stars: #ffc107 (Bootstrap warning).
*/

/* -----------------------------------------------------------
   Star INPUT widget (radio + label pattern)
   ----------------------------------------------------------- */
/*
   Source order is 5→1 (highest first). flex-direction: row-reverse
   visually flips them to 1→5 (left to right). The CSS sibling
   selector (~) then highlights all labels AFTER the hovered/checked
   one in DOM order, which corresponds to VISUALLY EARLIER stars
   (i.e. lower ratings = stars to the left of the hovered one).

   Effect: hovering the 4th star highlights stars 1-4. Standard
   pure-CSS star rating pattern, no JS required.
*/
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  border: 0;
  padding: 0;
  margin: 0;
  gap: 0.15rem;
  font-size: 1.75rem;
  line-height: 1;
}

.star-input input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.star-input label {
  cursor: pointer;
  color: #ddd;
  padding: 0 0.1rem;
  margin: 0;
  transition: color 0.15s ease;
}

.star-input label:hover,
.star-input label:hover ~ label,
.star-input input[type="radio"]:checked + label,
.star-input input[type="radio"]:checked ~ label {
  color: #ffc107;
}

.star-input input[type="radio"]:focus-visible + label {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
  border-radius: 2px;
}

/* -----------------------------------------------------------
   Section layout
   ----------------------------------------------------------- */
.reviews-section {
  scroll-margin-top: 90px; /* offset for sticky header when anchored */
}

.reviews-summary__score .display-5 {
  color: #1a1a1a;
  letter-spacing: -0.02em;
}

.reviews-summary__stars i {
  margin-right: 1px;
}

/* -----------------------------------------------------------
   Review cards (public list + admin pending queue)
   ----------------------------------------------------------- */
.review-card {
  background: #fff;
}

.review-card__body {
  color: #495057;
  line-height: 1.6;
  white-space: pre-wrap;
}

.review-card--pending {
  background: #fffbe6;
}

.review-card--pending:nth-child(even) {
  background: #fff7d6;
}

/* -----------------------------------------------------------
   Write/edit form card
   ----------------------------------------------------------- */
.reviews-write .card-body {
  background: #fafafa;
}

.reviews-write textarea {
  resize: vertical;
  min-height: 100px;
}

/* -----------------------------------------------------------
   Mobile tweaks
   ----------------------------------------------------------- */
@media (max-width: 575.98px) {
  .star-input {
    font-size: 2rem;
  }
  .reviews-summary__score .display-5 {
    font-size: 2.5rem;
  }
}