/* Reviews (Phase 2, step 7): on the stall page, and the review form on the account page.
   Stars are filled or outlined (shape, not only colour), always with the number in words. */

.stars { display: inline-flex; align-items: center; gap: .1rem; vertical-align: -.2em; }
.star { width: 1.15em; height: 1.15em; flex: none; fill: none; color: var(--text); }
.star--on { fill: var(--accent-yellow); }

/* The stall page. */
.reviews__summary { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--fs-lg); font-weight: 800; }
.reviews__summary .star { width: 1.3em; height: 1.3em; }
.reviews__summary[hidden] { display: none; }
.reviews__note { margin: 0 0 var(--space-3); }
.reviews { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.page__body .reviews { padding: 0; } /* beats ".page__body ul" */
.review { padding: var(--space-3); background: var(--surface-sunk); border-radius: var(--radius); }
.review__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); margin: 0; }
.review__name { font-weight: 800; overflow-wrap: anywhere; }
.review__date { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }
.review__words { margin: var(--space-2) 0 0; overflow-wrap: anywhere; white-space: pre-line; }

/* A review photo (step 7c): the whole photo, never cut off, with a big tap area to open it. */
.review__photo-link { display: block; margin-top: var(--space-2); border-radius: var(--radius-sm); }
.review__photo, .review-part__photo {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: var(--surface);
  border: 2px solid var(--outline);
  border-radius: var(--radius-sm);
}
.review-part__photo { margin: var(--space-2) 0; }
.review-part__photo[hidden] { display: none; }
.review-form__photo .btn[hidden] { display: none; }
.review-form__photo .btn + .btn { margin-top: var(--space-2); }
.review-form__photo-button:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Review of the Week (step 9b): the reviewer's Yes or No, on the account page. */
.review-pick { margin: var(--space-3) 0; padding: var(--space-3); background: var(--info-bg); border: 2px solid var(--outline); border-radius: var(--radius-sm); }
.review-pick p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.review-pick__title { font-weight: 800; }
#reviews-more { margin-top: var(--space-3); }
#reviews-more[hidden] { display: none; }

/* The account page: under a completed order. */
.review-part { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 2px dashed var(--card-border); }
.review-part:empty { display: none; }
.review-part__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.review-part__words { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.review-part__sure p { margin: 0 0 var(--space-2); font-weight: 600; }
.review-part .field__hint { display: block; margin-top: var(--space-1); }
.review-form .fieldset { margin-bottom: var(--space-3); }
.review-form__star .star { margin-right: .25rem; }

/* The seller's reply (step 7b1), under a review: set in, with who it's from. */
.review__reply { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border-left: 4px solid var(--card-border); border-radius: var(--radius-sm); }
.review__reply-from { margin: 0; font-size: var(--fs-sm); font-weight: 800; }
.review__reply .review__words { margin-top: var(--space-1); }

/* "Your reviews" (the seller's page). */
.review__order { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.review__tools:not(:empty) { margin-top: var(--space-3); }
.reviews__care { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--info-bg); border-radius: var(--radius-sm); font-weight: 400; }
.reviews__empty { margin: 0; color: var(--text-muted); }
.reviews__empty[hidden] { display: none; }
.reviews__back { margin: var(--space-5) 0 0; text-align: center; }
.reviews__back a { display: inline-block; padding-block: .75rem; } /* a bigger tap area */

/* "Report this review" (step 7b2): small and quiet under each review, with a big enough tap area. */
.review-report__open { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin: var(--space-1) 0 -.5rem; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: underline; cursor: pointer; }
.review-report__open svg { width: 1.1em; height: 1.1em; flex: none; }
.review-report__open[hidden], .review-report__form[hidden] { display: none; }
.review-report__form { margin-top: var(--space-3); padding: var(--space-3); background: var(--surface); border-radius: var(--radius-sm); }
.review-report__form .report__title { margin: 0 0 var(--space-1); font-size: var(--fs-base); }
.review-report__form .report__title:focus { outline: none; }
.review-report__form .check { margin-bottom: var(--space-1); }
.review-report__form .btn + .btn { margin-top: var(--space-2); }
.review-report .form-status { margin-top: var(--space-2); }

/* A review our team has hidden (step 7b2), on the seller's and the reviewer's own pages. */
.review--hidden { opacity: .85; border: 2px dashed var(--card-border); }
.review__hidden { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); background: var(--info-bg); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 700; }

/* A reviewer's taster level (Phase 3, step 9), only if they switched it on. Simple mode hides it. */
.review__who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.review__taster { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .55rem .05rem .2rem; color: var(--ink-900); background: var(--accent-yellow); border: 2px solid var(--ink-900); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 800; }
.review__taster img { width: 20px; height: 20px; }
/* A reviewer's character (Phase 3, step 11), only if they switched it on. Simple mode hides it. */
.review__diner { width: 36px; height: 48px; flex: none; object-fit: contain; padding: 2px; background: var(--sky-50); border: 2px solid var(--outline); border-radius: var(--radius-sm); }