/**
 * Reviews & Q&A — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained with neutral defaults. Themes restyle by setting the --krv-*
 * custom properties below, never by overriding selectors.
 *
 *   --krv-ink            primary text
 *   --krv-body           review body text
 *   --krv-muted          secondary text, dates, counts
 *   --krv-muted-strong   tertiary copy: histogram labels, avatar, Helpful
 *   --krv-answer         Q&A answer copy
 *   --krv-disabled       ink of a control that cannot be used
 *   --krv-placeholder    a figure with no value yet (the zero-review score)
 *   --krv-star-muted     stars standing in for a rating that does not exist
 *   --krv-accent         active page, voted state
 *   --krv-accent-tint    voted-state background
 *   --krv-star           star fill
 *   --krv-star-size      star glyph size (the SVG width/height attributes are
 *                        only the pre-CSS intrinsic size; this always wins)
 *   --krv-star-gap       space between two stars
 *   --krv-count-display  `display` of the review count in .kicked-stars-line;
 *                        set to `none` in contexts that show stars alone
 *   --krv-success        verified-purchase badge
 *   --krv-surface        card background
 *   --krv-sunken         avatar / track background
 *   --krv-border         hairlines
 *   --krv-border-strong  control borders
 *   --krv-radius         card radius
 *   --krv-radius-sm      control radius
 *   --krv-bars-max       width cap on the rating histogram
 *   --krv-font-display   headings, score, review titles
 *   --krv-font-mono      dates
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without matching load order or specificity.
 *
 * The star line's own rules (and .kicked-sr-only) live in stars.css, which is
 * registered on every page; this file loads on product pages only, so it
 * never loads without stars.css. Keep the shared property defaults in
 * lockstep between the two blocks.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-reviews {
  /* .kicked-qa is listed because the Q&A accordion is placed by the theme, on
     its own hook, and therefore is not nested inside .kicked-reviews. */
  .kicked-reviews,
  .kicked-stars-line,
  .kicked-qa {
    --krv-ink: #18181b;
    --krv-body: #3f3f46;
    --krv-muted: #a1a1aa;
    --krv-muted-strong: #52525b;
    --krv-answer: #52525b;
    --krv-disabled: #d4d4d8;
    --krv-placeholder: #a1a1aa;
    --krv-star-muted: #d4d4d8;
    --krv-accent: #b91c1c;
    --krv-accent-tint: #fef2f2;
    --krv-star: #eab308;
    --krv-star-size: 1rem;
    --krv-star-gap: 0.125rem;
    --krv-count-display: inline;
    --krv-success: #15803d;
    --krv-surface: #fff;
    --krv-sunken: #f4f4f5;
    --krv-border: #e4e4e7;
    --krv-border-strong: #d4d4d8;
    --krv-radius: 1rem;
    --krv-radius-sm: 0.6875rem;
    --krv-bars-max: 26rem;
    --krv-font-display: inherit;
    --krv-font-mono: ui-monospace, monospace;
  }

  /* --- Screen-reader-only text, stars, star line ---------------------------
     In stars.css — the star line renders on pages this file never reaches. */

  /* --- Headings ----------------------------------------------------------- */

  .kicked-reviews__disclosure {
    margin: -0.625rem 0 1.125rem;
    font-size: 0.8125rem;
    color: var(--krv-muted);
  }

  .kicked-reviews__heading {
    margin: 0 0 1.125rem;
    font-family: var(--krv-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--krv-ink);
  }

  /* --- Summary ------------------------------------------------------------ */

  .kicked-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding: 1.375rem;
    margin-bottom: 1.375rem;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border);
    border-radius: var(--krv-radius);
  }

  .kicked-reviews__score {
    flex: none;
    min-width: 7.5rem;
    text-align: center;
  }

  .kicked-reviews__average {
    font-family: var(--krv-font-display);
    font-size: 2.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--krv-ink);
  }

  .kicked-reviews__score .kicked-stars {
    margin: 0.5rem 0 0.375rem;
  }

  /* Zero reviews keeps the whole card — score, stars and the five empty bars —
     and only drains the colour out of it. Replacing the card with a smaller
     panel makes the block change shape the moment the first review lands. */
  .kicked-reviews__summary--empty .kicked-reviews__average {
    color: var(--krv-placeholder);
  }

  .kicked-reviews__summary--empty .kicked-stars {
    color: var(--krv-star-muted);
  }

  .kicked-reviews__summary--empty .kicked-stars__star--empty {
    opacity: 1;
  }

  .kicked-reviews__count {
    font-size: 0.78125rem;
    color: var(--krv-muted);
  }

  /* Capped, not free-growing. A histogram stretched across a 1200px column
     turns a 72%-vs-19% difference into two bars that both read as "long" —
     the comparison is easiest to make when the bars are short enough to see
     at once. Themes can retune it; they cannot need a selector to do so. */
  .kicked-reviews__distribution {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4375rem;
    justify-content: center;
    min-width: 13.75rem;
    max-width: var(--krv-bars-max);
  }

  .kicked-reviews__bar {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0;
    font: inherit;
    font-size: 0.78125rem;
    /* After `font: inherit` — the shorthand resets line-height, so this has to
       come later to win. 5 rows at 1.6 stretched the histogram 15px. */
    line-height: normal;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
  }

  .kicked-reviews__bar:disabled {
    cursor: default;
    opacity: 0.55;
  }

  /* In the zero state every bar is disabled, so fading them would fade the
     whole histogram — the design draws it at full strength, just empty. */
  .kicked-reviews__summary--empty .kicked-reviews__bar:disabled {
    opacity: 1;
  }

  .kicked-reviews__bar-label {
    width: 1.875rem;
    color: var(--krv-muted-strong);
    text-align: left;
  }

  .kicked-reviews__bar-track {
    flex: 1;
    height: 0.5rem;
    overflow: hidden;
    background: var(--krv-sunken);
    border-radius: 0.3125rem;
  }

  .kicked-reviews__bar-fill {
    display: block;
    height: 100%;
    background: var(--krv-star);
    border-radius: 0.3125rem;
  }

  .kicked-reviews__bar-count {
    width: 1.875rem;
    color: var(--krv-muted);
    text-align: right;
  }

  /* margin-left:auto rather than justify-content on the parent — the parent
     also has to lay out the score and the capped histogram, and pinning just
     this one child keeps the other two where they are. */
  .kicked-reviews__cta {
    display: flex;
    flex: none;
    align-items: center;
    margin-left: auto;
  }

  .kicked-reviews__write {
    display: inline-block;
    padding: 0.6875rem 1.125rem;
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--krv-ink);
    text-decoration: none;
    cursor: pointer;
    background: var(--krv-surface);
    border: 0.09375rem solid var(--krv-ink);
    border-radius: var(--krv-radius-sm);
  }

  .kicked-reviews__note {
    margin: 0;
    font-size: 0.84375rem;
    color: var(--krv-muted);
  }

  /* --- Controls ----------------------------------------------------------- */

  .kicked-reviews__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .kicked-reviews__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
  }

  .kicked-chip {
    padding: 0.4375rem 0.8125rem;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--krv-ink);
    cursor: pointer;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border-strong);
    border-radius: 0.5625rem;
  }

  .kicked-chip--on {
    color: var(--krv-surface);
    background: var(--krv-ink);
    border-color: var(--krv-ink);
  }

  .kicked-reviews__sort select {
    padding: 0.5625rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--krv-ink);
    cursor: pointer;
    background: var(--krv-surface);
    border: 0.09375rem solid var(--krv-border-strong);
    /* Not --krv-radius-sm: that is the write button's radius, and the design
       draws the select one pixel tighter. */
    border-radius: 0.625rem;
  }

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

  .kicked-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kicked-review {
    padding: 1.125rem 1.25rem;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border);
    border-radius: 0.875rem;
  }

  .kicked-review__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .kicked-review__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--krv-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--krv-muted-strong);
    background: var(--krv-sunken);
    border-radius: 50%;
  }

  .kicked-review__who {
    min-width: 0;
  }

  .kicked-review__identity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .kicked-review__author {
    font-size: 0.875rem;
    color: var(--krv-ink);
  }

  .kicked-review__verified {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--krv-success);
  }

  /* A card's stars are smaller and tighter than the summary's: the summary is
     the headline figure, the card's row is a footnote to a name. */
  .kicked-review__who .kicked-stars {
    --krv-star-size: 0.875rem; /* 14px */
    --krv-star-gap: 0.0625rem; /* 1px */

    margin-top: 0.1875rem;
  }

  .kicked-review__date {
    margin-left: auto;
    font-family: var(--krv-font-mono);
    font-size: 0.75rem;
    color: var(--krv-muted);
  }

  .kicked-review__title {
    margin: 0 0 0.25rem;
    font-family: var(--krv-font-display);
    font-size: 0.90625rem;
    line-height: normal;
    font-weight: 600;
    color: var(--krv-ink);
  }

  .kicked-review__body {
    margin: 0 0 0.75rem;
    font-size: 0.90625rem;
    line-height: 1.6;
    color: var(--krv-body);
    /* Authored line breaks survive without any markup pipeline: the text is
       auto-escaped, the newlines are honoured by CSS. */
    white-space: pre-line;
  }

  .kicked-review__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .kicked-review__helpful {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
    padding: 0.4375rem 0.75rem;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--krv-muted-strong);
    cursor: pointer;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border-strong);
    border-radius: 0.5625rem;
  }

  .kicked-review__helpful--on {
    color: var(--krv-accent);
    background: var(--krv-accent-tint);
    border-color: var(--krv-accent);
  }

  .kicked-review__helpful:disabled {
    cursor: default;
    opacity: 0.6;
  }

  .kicked-review__report {
    padding: 0;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--krv-muted);
    cursor: pointer;
    background: none;
    border: 0;
  }

  /* --- Pagination --------------------------------------------------------- */

  .kicked-reviews__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.375rem;
  }

  .kicked-reviews__range {
    font-size: 0.8125rem;
    color: var(--krv-muted);
  }

  .kicked-reviews__pages {
    display: flex;
    gap: 0.375rem;
    align-items: center;
  }

  .kicked-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--krv-ink);
    cursor: pointer;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border-strong);
    /* Not --krv-radius-sm: that is the write button's radius, and a page
       control is drawn a pixel tighter. */
    border-radius: 0.625rem;
  }

  .kicked-page--on {
    font-weight: 700;
    color: var(--krv-surface);
    background: var(--krv-accent);
    border-color: var(--krv-accent);
  }

  .kicked-page--gap {
    color: var(--krv-muted);
    background: none;
    border: 0;
  }

  /* Only the glyph goes pale. `opacity` would fade the border and the white
     fill with it, and an arrow that is still a button has to keep looking
     like one. */
  .kicked-page:disabled {
    color: var(--krv-disabled);
    cursor: default;
  }

  .kicked-reviews__empty {
    padding: 2.125rem 1.25rem;
    font-size: 0.875rem;
    color: var(--krv-muted);
    text-align: center;
    background: var(--krv-surface);
    border: 1px dashed var(--krv-border-strong);
    border-radius: 0.875rem;
  }

  /* --- Write form --------------------------------------------------------- */

  .kicked-review-form {
    display: grid;
    gap: 0.875rem;
    padding: 1.375rem;
    margin-bottom: 1.375rem;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border);
    border-radius: var(--krv-radius);
  }

  .kicked-review-form[hidden] {
    display: none;
  }

  /* Off-screen rather than display:none: some bots skip fields they can tell
     are not rendered, and the trap only works if it looks fillable. */
  .kicked-review-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kicked-review-form__rating {
    padding: 0;
    margin: 0;
    border: 0;
  }

  .kicked-review-form__rating legend {
    padding: 0;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--krv-ink);
  }

  /* row-reverse + the 5→1 source order is what lets `:checked ~ label` reach
     the stars visually to its left, with no script involved. */
  .kicked-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .kicked-rating-input__radio {
    position: absolute;
    opacity: 0;
  }

  .kicked-rating-input__label {
    padding: 0 0.125rem;
    color: var(--krv-border-strong);
    cursor: pointer;
  }

  .kicked-rating-input__label svg {
    fill: currentcolor;
  }

  .kicked-rating-input__label:hover,
  .kicked-rating-input__label:hover ~ .kicked-rating-input__label,
  .kicked-rating-input__radio:checked ~ .kicked-rating-input__label {
    color: var(--krv-star);
  }

  .kicked-rating-input__radio:focus-visible + .kicked-rating-input__label {
    outline: 0.125rem solid var(--krv-accent);
    outline-offset: 0.125rem;
  }

  .kicked-review-form__field {
    display: grid;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--krv-ink);
  }

  .kicked-review-form__field em {
    font-style: normal;
    font-weight: 400;
    color: var(--krv-muted);
  }

  .kicked-review-form__field input,
  .kicked-review-form__field textarea {
    padding: 0.5625rem 0.75rem;
    font: inherit;
    font-weight: 400;
    color: var(--krv-ink);
    background: var(--krv-surface);
    border: 1px solid var(--krv-border-strong);
    border-radius: var(--krv-radius-sm);
  }

  .kicked-review-form__hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--krv-muted);
  }

  .kicked-review-form__actions {
    display: flex;
    gap: 0.625rem;
    align-items: center;
  }

  .kicked-review-form__submit {
    padding: 0.6875rem 1.25rem;
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 700;
    /* Through the contract like every other on-accent ink (.kicked-page--on,
       the chips): a theme that remaps --krv-accent to something light keeps
       readable submit text by setting --krv-surface with it. */
    color: var(--krv-surface);
    cursor: pointer;
    background: var(--krv-accent);
    border: 0;
    border-radius: var(--krv-radius-sm);
  }

  .kicked-review-form__cancel {
    padding: 0.6875rem 0.875rem;
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--krv-muted);
    cursor: pointer;
    background: none;
    border: 0;
  }

  .kicked-review-form__messages:empty {
    display: none;
  }

  .kicked-review-form__messages {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--krv-radius-sm);
  }

  .kicked-review-form__messages--error {
    color: var(--krv-accent);
    background: var(--krv-accent-tint);
  }

  .kicked-review-form__messages--ok {
    color: var(--krv-success);
    background: var(--krv-sunken);
  }

  /* --- Q&A ----------------------------------------------------------------
     Placed by the theme through its own hook, so these rules cannot assume a
     .kicked-reviews ancestor — the custom properties are declared on
     .kicked-qa itself at the top of this file. */

  .kicked-qa {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .kicked-qa__item {
    overflow: hidden;
    background: var(--krv-surface);
    border: 1px solid var(--krv-border);
    border-radius: 0.875rem;
  }

  .kicked-qa__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }

  .kicked-qa__trigger {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.125rem;
    font: inherit;
    font-family: var(--krv-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--krv-ink);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
  }

  .kicked-qa__chevron {
    flex: none;
    color: var(--krv-muted);
    transition: transform 0.2s ease;
  }

  .kicked-qa__trigger[aria-expanded="true"] .kicked-qa__chevron {
    transform: rotate(180deg);
  }

  /* An answer is secondary copy, not the long-form body ink a review is set
     in — the same grey a theme uses for its own accordion answers. */
  .kicked-qa__answer {
    padding: 0 1.125rem 1rem;
    font-size: 0.90625rem;
    line-height: 1.65;
    color: var(--krv-answer);
    /* Same treatment as review bodies: auto-escaped text, CSS-rendered breaks. */
    white-space: pre-line;
  }

  /* aria-busy was toggled by the script and styled by nothing, so paging the
     reviews looked like the click had missed: the old list simply sat there
     until the new one replaced it. Dimming and blocking the stale list is the
     smallest honest way to say "working" — no spinner to position, and the
     content stays readable while it waits. */
  [data-ps-kicked-list][aria-busy="true"] {
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }

  /* --- Shared ------------------------------------------------------------- */

  /* The refresh failed and the list says so in place of the rows. Same dashed
     panel as the empty state, in the ink the form's error message uses. */
  .kicked-reviews__empty--error {
    color: var(--krv-accent);
  }

  /* The same ring the rating radios already draw (see above), on everything
     else here a keyboard reaches — chips, histogram bars, pagination, votes,
     reports, the write toggle and the Q&A triggers. Without these they fall
     back to the UA outline while every other kicked module draws its own,
     and the page speaks two focus languages. */
  .kicked-chip:focus-visible,
  .kicked-page:focus-visible,
  .kicked-reviews__bar:focus-visible,
  .kicked-reviews__write:focus-visible,
  .kicked-review__helpful:focus-visible,
  .kicked-review__report:focus-visible,
  .kicked-reviews__sort select:focus-visible,
  .kicked-review-form__submit:focus-visible,
  .kicked-review-form__cancel:focus-visible,
  .kicked-qa__trigger:focus-visible {
    outline: 0.125rem solid var(--krv-accent);
    outline-offset: 0.125rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-qa__chevron,
    [data-ps-kicked-list][aria-busy="true"] {
      transition: none;
    }
  }
}