/* ===========================================================================
   SEO Reviews 2.2 - only what ocmod-ui 1.1 has no block for: the score with
   its bars, the rating input, buyer comments, the pages. The same rules as
   ex-reviews.css of Ex-Reviews 2.2, so both modules look alike; photos,
   videos, the viewer and the carousel are not part of this module.
   Every selector starts with .ocmod-seo-reviews; colours, corners and sizes
   are --ocm-* variables of the library, so the theme file and the module's
   own colours reach this file too. No shadows, gradients, translucency or
   motion that moves a block up or down.
   =========================================================================== */

.ocmod-seo-reviews { margin: 0 0 calc(var(--ocm-gap) * 2); }
.ocmod-seo-reviews [hidden] { display: none; }
.ocmod-seo-reviews[aria-busy="true"] { cursor: progress; }

/* ---------- score: average, stars, count and the 5-1 bars ---------------- */
.ocmod-seo-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ocm-gap) calc(var(--ocm-gap) * 2);
  margin: 0 0 calc(var(--ocm-gap) * 1.5);
  padding: var(--ocm-pad);
  border: 1px solid var(--ocm-line);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
}
.ocmod-seo-reviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ocm-gap) calc(var(--ocm-gap) * 2); min-width: 0; }
.ocmod-seo-reviews__dist { display: grid; flex: 1 1 200px; gap: 4px; min-width: 0; max-width: 340px; }
.ocmod-seo-reviews__dist-row {
  display: grid;
  grid-template-columns: 1ch 14px minmax(60px, 1fr) 3.5em;
  align-items: center;
  gap: 6px;
  color: var(--ocm-muted);
  font-size: var(--ocm-fs-sm);
  line-height: 1.2;
}
.ocmod-seo-reviews__dist-row .ocm-icon { color: var(--ocm-star); fill: currentColor; stroke: none; }
.ocmod-seo-reviews__dist-row .ocm-goal__bar { height: 8px; margin: 0; }
.ocmod-seo-reviews__dist-count { text-align: right; }

/* ---------- list ---------------------------------------------------------- */
.ocmod-seo-reviews__sorts { margin: 0 0 var(--ocm-gap); }
.ocmod-seo-reviews__pm { margin: 0; color: var(--ocm-text); overflow-wrap: anywhere; }
.ocmod-seo-reviews__pm b { color: var(--ocm-ink); }
.ocmod-seo-reviews__pm--plus b { color: var(--ocm-good); }
.ocmod-seo-reviews__pm--minus b { color: var(--ocm-bad); }
/* name, stars, "verified" and date share one line while they fit; a narrow
   tab wraps the line instead of squeezing the name to nothing */
.ocmod-seo-reviews__card .ocm-review__top { flex-wrap: wrap; row-gap: 4px; }
.ocmod-seo-reviews__card .ocm-review__top > .ocm-review__name { flex: 0 1 auto; max-width: 100%; }
.ocmod-seo-reviews__card .ocm-review__top > .ocm-review__meta { white-space: nowrap; }
.ocmod-seo-reviews__down .ocm-icon { transform: scaleY(-1); }
.ocmod-seo-reviews__card .ocm-review__vote[disabled] { cursor: default; }
.ocmod-seo-reviews__answers {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--ocm-r);
  background: var(--ocm-subtle);
  font-size: var(--ocm-fs-sm);
}
.ocmod-seo-reviews__answer + .ocmod-seo-reviews__answer { padding-top: 8px; border-top: 1px solid var(--ocm-line); }
.ocmod-seo-reviews__answer-head { display: flex; align-items: baseline; gap: 8px; }
.ocmod-seo-reviews__answer p { margin: 2px 0 0; color: var(--ocm-text); overflow-wrap: anywhere; }
.ocmod-seo-reviews__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--ocm-gap); margin: 0 0 var(--ocm-gap); }
.ocmod-seo-reviews__pages .pagination { margin: 0; }
.ocmod-seo-reviews__results { color: var(--ocm-muted); font-size: var(--ocm-fs-sm); }
.ocmod-seo-reviews__empty p { margin: 0; }

/* ---------- write form ---------------------------------------------------- */
.ocmod-seo-reviews__write { margin-top: calc(var(--ocm-gap) * 1.5); }
.ocmod-seo-reviews__form > .ocm-block__title { margin: 0 0 4px; }
.ocmod-seo-reviews__lead { margin: 0 0 var(--ocm-gap); color: var(--ocm-muted); }
.ocmod-seo-reviews__form > :last-child { margin-bottom: 0; }
.ocmod-seo-reviews__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--ocm-gap); }
.ocmod-seo-reviews__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ocmod-seo-reviews__rate { display: inline-flex; flex-direction: row-reverse; gap: 2px; vertical-align: middle; }
.ocmod-seo-reviews__rate label { margin: 0; padding: 2px; border-radius: var(--ocm-r-sm); color: var(--ocm-line-strong); line-height: 0; cursor: pointer; }
.ocmod-seo-reviews__rate .ocm-icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.ocmod-seo-reviews__rate label:hover,
.ocmod-seo-reviews__rate label:hover ~ label,
.ocmod-seo-reviews__rate input:checked ~ label { color: var(--ocm-star); }
.ocmod-seo-reviews__rate input:focus-visible + label { outline: 2px solid var(--ocm-accent-dark); outline-offset: 1px; }
.ocmod-seo-reviews__rate-name { margin-left: 8px; color: var(--ocm-ink); font-weight: 600; vertical-align: middle; }
.ocmod-seo-reviews__captcha { margin: 0 0 var(--ocm-gap); }