/*
 * Product reviews — section + write modal.
 *
 * Scoped entirely under .fs-rv / .fs-rv-modal so nothing here can reach the
 * rest of the storefront. Colours are custom properties with literal fallbacks,
 * so a merchant can retheme the section from custom.css without touching this
 * file, and the section still renders if the properties are never set.
 *
 * Star colours are deliberately NOT set here: the markup reuses the theme's own
 * .rating-stars, so the merchant's rating colour settings keep applying.
 */

/* Several blocks below set display:flex/grid, which outranks the UA rule for
   the [hidden] attribute — a "hidden" pending banner or load-error panel would
   render anyway. Every toggle in this component is the hidden attribute, so it
   is enforced once, here. */
.fs-rv [hidden],
.fs-rv-modal [hidden] {
  display: none !important;
}

.fs-rv {
  --fs-rv-line: rgba(0, 0, 0, .1);
  --fs-rv-muted: #767676;
  --fs-rv-surface: rgba(0, 0, 0, .025);
  --fs-rv-accent: #238CD2;
  --fs-rv-danger: #b02a24;
  --fs-rv-radius: 6px;

  margin: 0 0 10px;
}

/* ----------------------------------------------------------------- pending */

.fs-rv__pending {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px dashed #d9a441;
  background: rgba(217, 164, 65, .09);
  border-radius: var(--fs-rv-radius);
  font-size: 13px;
  line-height: 1.5;
}

.fs-rv__pending b {
  display: block;
  margin-bottom: 2px;
}

/* ----------------------------------------------------------------- summary */

.fs-rv__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--fs-rv-line);
}

.fs-rv__score {
  text-align: center;
  min-width: 110px;
}

.fs-rv__score-value {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fs-rv__score .rating {
  justify-content: center;
  margin: 6px 0 0;
}

.fs-rv__score-count {
  font-size: 12px;
  color: var(--fs-rv-muted);
  margin-top: 4px;
}

.fs-rv__bars {
  flex: 1 1 240px;
  display: grid;
  gap: 4px;
  min-width: 200px;
  /* Capped: on a full-width product layout the bars would otherwise run the
     whole container and the distribution becomes unreadable as a shape. */
  max-width: 360px;
}

.fs-rv__bar-row {
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  gap: 8px;
  align-items: center;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 12px;
  color: var(--fs-rv-muted);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.fs-rv__bar-row:hover .fs-rv__bar,
.fs-rv__bar-row.is-on .fs-rv__bar {
  background: rgba(0, 0, 0, .12);
}

.fs-rv__bar-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fs-rv__bar {
  height: 7px;
  border-radius: 100px;
  background: var(--fs-rv-surface);
  overflow: hidden;
}

.fs-rv__bar > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: currentColor;
  opacity: .55;
}

.fs-rv__bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fs-rv__cta {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: center;
}

.fs-rv__cta-hint {
  font-size: 11.5px;
  color: var(--fs-rv-muted);
  margin-top: 6px;
}

/* -------------------------------------------------------------- photostrip */

.fs-rv__photostrip {
  padding: 16px 0;
  border-bottom: 1px solid var(--fs-rv-line);
}

.fs-rv__photostrip-title {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------------- filters */

.fs-rv__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 16px 0;
}

.fs-rv__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px solid var(--fs-rv-line);
  background: none;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.fs-rv__chip-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}

/* The theme sets `.fa-star { color: gold }`. Left alone, the glyph reads as a
   second rating display sitting inside a filter control; `inherit` at two
   classes outranks it and folds the star into the chip's own colour. */
.fs-rv__chip .fa {
  font-size: 11px;
  color: inherit;
}

.fs-rv__chip-count {
  font-weight: 600;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

.fs-rv__chip:hover {
  border-color: var(--fs-rv-accent);
  color: var(--fs-rv-accent);
}

/* Painted explicitly. This used to be `background: currentColor` with the same
   token as `color`, so the fill and the text were literally the same colour:
   only the children that were force-set to white survived, and the chip's own
   label ("All", or the rating digit) rendered invisible against it. */
.fs-rv__chip.is-on {
  background: var(--fs-rv-accent);
  border-color: var(--fs-rv-accent);
  color: #fff;
}

.fs-rv__chip.is-on .fs-rv__chip-count {
  opacity: .75;
}

.fs-rv__sort {
  margin-left: auto;
  margin-bottom: 0;
  font-weight: 400;
}

.fs-rv__sort select {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--fs-rv-radius);
  border: 1px solid var(--fs-rv-line);
  background: none;
  color: inherit;
}

/* ------------------------------------------------------------------- cards */

.fs-rv__list.is-busy {
  opacity: .7;
}

.fs-rv__cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fs-rv__card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--fs-rv-line);
}

.fs-rv__card.is-highlighted {
  background: rgba(35, 140, 210, .07);
  box-shadow: 0 0 0 8px rgba(35, 140, 210, .07);
  border-radius: var(--fs-rv-radius);
}

.fs-rv__avatar {
  width: 38px;
  height: 38px;
  border-radius: 100px;
  background: var(--fs-rv-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
}

.fs-rv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.fs-rv__author {
  font-weight: 600;
}

/* The star row moves to the top of the card. It used to render below the
   review body and below the photos, which is last place for the one thing a
   shopper scans for. */
.fs-rv__head .rating {
  margin: 0;
}

.fs-rv__date {
  margin-left: auto;
  font-size: 12px;
  color: var(--fs-rv-muted);
  font-variant-numeric: tabular-nums;
}

.fs-rv__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fs-rv__text.is-short,
.fs-rv__text.is-expanded {
  display: block;
  overflow: visible;
}

.fs-rv__more {
  background: none;
  border: 0;
  padding: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-rv-accent);
  cursor: pointer;
}

.fs-rv__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.fs-rv__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--fs-rv-radius);
  overflow: hidden;
  border: 1px solid var(--fs-rv-line);
  background: var(--fs-rv-surface);
}

.fs-rv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fs-rv__thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-rv-muted);
  cursor: pointer;
}

/* --------------------------------------------------------------- skeletons */

/* Placeholder rows mirror the card grid but carry their own class, so nothing
   counting .fs-rv__card ever sees them. */
.fs-rv__skel-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--fs-rv-line);
  pointer-events: none;
}

@media (max-width: 600px) {
  .fs-rv__skel-card {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }
}

.fs-rv__skel {
  display: block;
  height: 11px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: var(--fs-rv-surface);
  animation: fs-rv-pulse 1.4s ease-in-out infinite;
}

@keyframes fs-rv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-rv__skel { animation: none; }
}

/* ------------------------------------------------------------ empty states */

.fs-rv__empty {
  text-align: center;
  padding: 36px 16px;
  border-top: 1px solid var(--fs-rv-line);
}

.fs-rv__empty h5 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.fs-rv__empty p {
  font-size: 13px;
  color: var(--fs-rv-muted);
  max-width: 38ch;
  margin: 0 auto 16px;
}

.fs-rv__empty-glyph {
  opacity: .28;
  margin-bottom: 10px;
}

.fs-rv__empty-glyph .rating {
  justify-content: center;
}

.fs-rv__notice {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--fs-rv-radius);
  background: var(--fs-rv-surface);
  font-size: 13px;
}

/* --------------------------------------------------------- foot / failures */

.fs-rv__foot {
  text-align: center;
  padding: 18px 0 4px;
  border-top: 1px solid var(--fs-rv-line);
}

.fs-rv__showing {
  font-size: 11.5px;
  color: var(--fs-rv-muted);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.fs-rv__loaderror {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
  font-size: 13px;
}

/* The legacy pagination links are only for the old .load() path — the section
   pages with its own button. */
.fs-rv .fs-rv__legacy-pagination {
  display: none;
}

/* ------------------------------------------------------------------ button */

.fs-rv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--fs-rv-radius);
  border: 1px solid var(--fs-rv-accent);
  background: var(--fs-rv-accent);
  color: #fff;
  cursor: pointer;
}

.fs-rv__btn:hover,
.fs-rv__btn:focus {
  color: #fff;
  filter: brightness(.94);
}

.fs-rv__btn--ghost {
  background: none;
  color: var(--fs-rv-accent);
}

.fs-rv__btn--ghost:hover,
.fs-rv__btn--ghost:focus {
  color: var(--fs-rv-accent);
}

.fs-rv__btn--block {
  display: flex;
  width: 100%;
  margin-top: 8px;
}

.fs-rv__btn.is-loading {
  opacity: .65;
  pointer-events: none;
}

/* ================================================================== modal */

.fs-rv-modal-source {
  display: none;
}

.popup-wrapper.popup-review .popup-container {
  width: 460px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 8px;
}

/* The theme's own close button is absolutely positioned over the container's
   top-right corner and swallows clicks meant for the modal's header close.
   This popup carries its own labelled close in the header, so the theme's is
   hidden rather than fought with. journal.js still closes via the backdrop,
   which is what [data-rv-close] triggers. */
.popup-wrapper.popup-review > .popup-container > .popup-close {
  display: none;
}

.fs-rv-modal {
  --fs-rv-line: rgba(0, 0, 0, .1);
  --fs-rv-muted: #767676;
  --fs-rv-accent: #238CD2;
  --fs-rv-danger: #b02a24;
  --fs-rv-radius: 6px;

  text-align: left;
  font-size: 14px;
}

.fs-rv-modal__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--fs-rv-line);
}

.fs-rv-modal__img {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--fs-rv-radius);
  overflow: hidden;
  border: 1px solid var(--fs-rv-line);
}

.fs-rv-modal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fs-rv-modal__title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
}

.fs-rv-modal__product {
  font-size: 12px;
  color: var(--fs-rv-muted);
}

.fs-rv-modal__x {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--fs-rv-muted);
  cursor: pointer;
  padding: 0 2px;
}

.fs-rv-modal__body {
  padding: 16px 18px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

.fs-rv-modal__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  border-top: 1px solid var(--fs-rv-line);
  background: rgba(0, 0, 0, .02);
}

.fs-rv-modal__hint {
  flex: 1;
  font-size: 11.5px;
  color: var(--fs-rv-muted);
}

.fs-rv-modal__hint.is-error {
  color: var(--fs-rv-danger);
  font-weight: 600;
}

/* Panes. Exactly one is visible at a time, driven by data-rv-state. */
.fs-rv-modal [data-rv-pane] { display: none; }
.fs-rv-modal[data-rv-state="form"] [data-rv-pane="form"] { display: block; }
.fs-rv-modal[data-rv-state="gate"] [data-rv-pane="gate"] { display: block; }
.fs-rv-modal[data-rv-state="done"] [data-rv-pane="done"] { display: block; }

/* ------------------------------------------------------------------ fields */

.fs-rv-field {
  margin-bottom: 16px;
}

.fs-rv-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.fs-rv-req {
  color: var(--fs-rv-danger);
}

.fs-rv-optional {
  font-weight: 400;
  color: var(--fs-rv-muted);
}

.fs-rv-input {
  width: 100%;
  border: 1px solid var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

textarea.fs-rv-input {
  min-height: 92px;
  resize: vertical;
}

.fs-rv-field.has-error .fs-rv-input {
  border-color: var(--fs-rv-danger);
  background: rgba(176, 42, 36, .04);
}

.fs-rv-error {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fs-rv-danger);
  margin-top: 5px;
}

.fs-rv-error--form {
  margin-top: 0;
  padding: 10px 12px;
  border-radius: var(--fs-rv-radius);
  background: rgba(176, 42, 36, .07);
}

.fs-rv-counter {
  font-size: 11px;
  color: var(--fs-rv-muted);
  text-align: right;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.fs-rv-note {
  font-size: 11px;
  color: var(--fs-rv-muted);
  margin-top: 2px;
}

/* ------------------------------------------------------------------- stars */

/* Rebuilt as buttons. The previous control was radio inputs with
   text-indent: 9999px inside a direction: rtl wrapper, which had no accessible
   name and inverted a second time inside an already-RTL document. */
.fs-rv-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fs-rv-star {
  background: none;
  border: 0;
  padding: 2px;
  font-size: 26px;
  line-height: 1;
  color: rgba(0, 0, 0, .18);
  cursor: pointer;
}

/* The theme sets `.fa-star { color: gold }`, so the icon has its own colour
   declaration and never inherits the button's. Two classes outrank that one,
   and `inherit` then routes every state below through the button. */
.fs-rv-star .fa {
  color: inherit;
}

.fs-rv-star.is-on,
.fs-rv-star.is-hover {
  color: #f0b429;
}

.fs-rv-star:focus-visible {
  outline: 2px solid var(--fs-rv-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.fs-rv-stars__label {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-rv-accent);
}

.fs-rv-field.has-error .fs-rv-star {
  color: rgba(176, 42, 36, .45);
}

/* ------------------------------------------------------------------ photos */

.fs-rv-dropzone {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px dashed var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
  background: none;
  color: var(--fs-rv-muted);
  font-size: 12.5px;
  cursor: pointer;
}

.fs-rv-dropzone:hover {
  border-color: var(--fs-rv-accent);
}

.fs-rv-dropzone b {
  color: var(--fs-rv-accent);
}

.fs-rv-uppy .uppy-Dashboard-inner {
  border-radius: var(--fs-rv-radius);
}

/* ----------------------------------------------------------------- captcha */

.fs-rv-field--captcha .form-group {
  margin-bottom: 0;
}

.fs-rv-captcha img {
  max-width: 100%;
  border-radius: var(--fs-rv-radius);
}

/* -------------------------------------------------------------- gate/done */

.fs-rv-modal__gate,
.fs-rv-modal__done {
  padding: 22px 18px 20px;
  text-align: center;
}

.fs-rv-modal__gate p {
  font-size: 13.5px;
  margin: 0 0 14px;
}

.fs-rv-modal__tick {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--fs-rv-accent);
  background: rgba(35, 140, 210, .12);
}

.fs-rv-modal__done h5 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.fs-rv-modal__done p {
  font-size: 13px;
  color: var(--fs-rv-muted);
  max-width: 34ch;
  margin: 0 auto 16px;
}

/* The photo upload is a second request the shopper used to never see. */
.fs-rv-upload {
  max-width: 280px;
  margin: 0 auto 16px;
  text-align: left;
}

.fs-rv-upload__label {
  font-size: 11.5px;
  color: var(--fs-rv-muted);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.fs-rv-upload__bar {
  height: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}

.fs-rv-upload__bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--fs-rv-accent);
  transition: width .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .fs-rv-upload__bar > i { transition: none; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 600px) {
  .fs-rv__summary {
    gap: 16px;
  }

  .fs-rv__score {
    flex: 1 1 100%;
    text-align: left;
  }

  .fs-rv__score .rating,
  .fs-rv__empty-glyph .rating {
    justify-content: flex-start;
  }

  .fs-rv__cta {
    flex: 1 1 100%;
    text-align: left;
  }

  .fs-rv__sort {
    margin-left: 0;
    width: 100%;
  }

  .fs-rv__sort select {
    width: 100%;
  }

  .fs-rv__card {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }

  .fs-rv__date {
    margin-left: 0;
    flex: 1 1 100%;
  }

  .fs-rv-modal__body {
    max-height: calc(100vh - 220px);
  }
}

/* RTL: the layout mirrors from the document direction alone. Nothing here
   flips a second time, which is what the old star control did. */
[dir="rtl"] .fs-rv__date,
[dir="rtl"] .fs-rv__sort,
[dir="rtl"] .fs-rv__cta {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .fs-rv-modal,
[dir="rtl"] .fs-rv-dropzone {
  text-align: right;
}

[dir="rtl"] .fs-rv-modal__x {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .fs-rv-stars__label {
  margin-left: 0;
  margin-right: 8px;
}