/**
 * Product reviews (ADR-0013): the histogram, the cards and the write form.
 *
 * The star row itself is in `product-card.css`, which every surface drawing a card already loads and
 * which the product page loads too — the row is drawn on the archive, in the grid block and in the
 * editor preview, none of which has any use for a histogram or a write form.
 */

.product-info__reviews {
    margin: 0 0 12px;
}

/* ── The section ── */

.fts-reviews {
    padding: 60px 0;
    background: var(--wp--preset--color--hvit, #fff);
    border-top: var(--wp--custom--linje, 1px solid rgba(0, 0, 0, 0.08));
}

/*
 * The heading, the average, the histogram and the write-form disclosure. `relative` is what the
 * `<summary>` button below is positioned against, and the right-hand padding is the room that button
 * takes — without it a long histogram row would run underneath it.
 */
.fts-reviews__intro {
    position: relative;
    padding-right: 200px;
    margin-bottom: 40px;
}

/*
 * Figtree 600 at 24px, which is what the prototype draws for this heading and for "Andre kjøpte
 * også" directly above it — the two are one design element in two places. This rule used to set a
 * size alone, so the family fell through to the theme's `h2` (Amatic SC) and the size to 28px;
 * neither was a decision, and both were only ever visible on an install with a Judge.me token.
 * Corrected here rather than left, because the band above it now draws the same heading correctly
 * and two spellings of one thing on one page is worse than either.
 */
.fts-reviews__heading {
    margin: 0 0 16px;
    font-family: var(--wp--preset--font-family--brod, Figtree, system-ui, -apple-system, sans-serif);
    font-size: 24px;
    font-weight: 600;
}

.fts-reviews__notice {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--wp--custom--radius--kant, 3px);
    background: var(--wp--preset--color--lys-blaa, #eaf8fb);
    color: var(--wp--preset--color--tekst, #1a1a1a);
}

.fts-reviews__notice--sent {
    /* Same argument as --error below, and gul is the prototype's own affirmative accent: the base
       notice's tint is the only surface the palette has, so the cue has to be the border. */
    border: 1px solid var(--wp--preset--color--gul, #e09900);
}

.fts-reviews__notice--error {
    /* The border carries it as well as the tint, so the distinction survives a forced-colours mode. */
    border: 1px solid var(--wp--preset--color--roed, #c42821);
}

/* The score, with the star row stacked over "Basert på N anmeldelser" beside it. */
.fts-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.fts-reviews__average {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.fts-reviews__average-number {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.fts-reviews__count {
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

/* ── The histogram ── */

.fts-reviews__histogram {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.fts-reviews__bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

.fts-reviews__bar-label {
    min-width: 80px;
    white-space: nowrap;
}

.fts-reviews__bar {
    display: block;
    flex: 1;
    max-width: 200px;
    height: 8px;
    border-radius: var(--wp--custom--radius--kant, 3px);
    /* The prototype's own value for this track. No token: `--wp--custom--linje` is a border
       shorthand, and the fill is this element's child so opacity would dim it too. */
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.fts-reviews__bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--wp--custom--radius--kant, 3px);
    background: var(--wp--preset--color--gul, #e09900);
}

.fts-reviews__bar-count {
    /* So the rows do not shuffle sideways as the shares change width. */
    font-variant-numeric: tabular-nums;
}

/* ── The cards ── */

.fts-reviews__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/*
 * The tint on the section's white ground is what makes a card read as a card — the design draws no
 * border on it, so the fill is the only thing separating one from the page.
 */
.fts-review {
    padding: 24px;
    border-radius: var(--wp--custom--radius--kant, 3px);
    background: var(--wp--preset--color--lys-blaa, #eaf8fb);
}

.fts-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.fts-review__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.fts-review__author {
    font-size: 15px;
    font-weight: 600;
}

.fts-review__date {
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

/* White, because the card it sits on is the tint this pill used to be — a pill in the card's own
   colour is no pill at all. */
.fts-review__badge {
    padding: 2px 8px;
    border-radius: var(--wp--custom--radius--pille, 30px);
    background: var(--wp--preset--color--hvit, #fff);
    font-size: var(--wp--preset--font-size--kicker-s, 0.75rem);
    font-weight: 400;
}

.fts-review .fts-star-row {
    margin-bottom: 12px;
}

.fts-review__body {
    margin: 0;
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    line-height: 1.6;
}

.fts-reviews__empty {
    margin: 0 0 24px;
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

.fts-reviews__more {
    margin: 0 0 32px;
    text-align: center;
}

/*
 * The design's two button colours: `gul` is the primary CTA — writing a review, and sending it — and
 * `tekst` is the neutral one that loads more. Both are the 3px card radius rather than a pill; a pill
 * is this design's chip shape, not its CTA shape.
 */
.fts-reviews__more-btn,
.fts-reviews__form-toggle,
.fts-review-form__button {
    display: inline-block;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--wp--custom--radius--kant, 3px);
    background: var(--wp--preset--color--tekst, #1a1a1a);
    color: var(--wp--preset--color--hvit, #fff);
    font: inherit;
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background var(--wp--custom--overgang--rask, 0.15s);
}

.fts-reviews__more-btn:hover {
    background: var(--wp--preset--color--tekst-hover, #333333);
}

.fts-reviews__form-toggle,
.fts-review-form__button {
    background: var(--wp--preset--color--gul, #e09900);
}

.fts-reviews__more-btn[disabled],
.fts-review-form__button[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* ── The form ── */

/*
 * The disclosure is in flow at full width so the form panel is not squeezed into a header cell, and
 * only its `<summary>` is lifted into the top right of the intro — which is the prototype's button.
 * `list-style` and the WebKit pseudo-element both, or the marker survives in one engine or the other.
 */
.fts-reviews__form-wrap {
    margin-top: 20px;
}

.fts-reviews__form-toggle {
    position: absolute;
    top: 0;
    right: 0;
    list-style: none;
}

.fts-reviews__form-toggle::-webkit-details-marker {
    display: none;
}

.fts-review-form {
    max-width: 520px;
}

.fts-review-form__field {
    display: grid;
    gap: 4px;
    margin: 0 0 16px;
}

.fts-review-form__field input,
.fts-review-form__field textarea {
    padding: 10px 12px;
    border: var(--wp--custom--linje, 1px solid rgba(0, 0, 0, 0.08));
    border-radius: var(--wp--custom--radius--kant, 3px);
    font: inherit;
    /* 16px or iOS zooms the whole page on focus. */
    font-size: max(16px, 1em);
}

.fts-review-form__hint,
.fts-review-form__moderation {
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

.fts-review-form__error {
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--roed, #c42821);
}

.fts-review-form__rating {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.fts-review-form__rating legend {
    margin-bottom: 8px;
    font-weight: 600;
}

/*
 * The rating widget: five radios drawn as stars, no JavaScript.
 *
 * The radios are in DOM order 5 → 1 so `:has( input:checked ) ~` reaches the *lower* ratings, which
 * is what fills four stars for a four-star choice. `row-reverse` is what puts them on screen 1 → 5.
 * The input keeps its box — it is moved behind the glyph rather than given `display: none`, which
 * would take it out of the tab order and out of the accessibility tree.
 */
.fts-review-form__stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.fts-review-form__star {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

.fts-review-form__star input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.fts-review-form__star-glyph svg {
    display: block;
    width: 28px;
    height: 28px;
    opacity: 0.25;
    transition: opacity var(--wp--custom--overgang--rask, 0.15s);
}

/* The chosen star and every lower one. Hover previews the same shape. */
.fts-review-form__star:has( input:checked ) .fts-review-form__star-glyph svg,
.fts-review-form__star:has( input:checked ) ~ .fts-review-form__star .fts-review-form__star-glyph svg,
.fts-review-form__stars:hover .fts-review-form__star:hover .fts-review-form__star-glyph svg,
.fts-review-form__stars:hover .fts-review-form__star:hover ~ .fts-review-form__star .fts-review-form__star-glyph svg {
    opacity: 1;
}

.fts-review-form__star:has( input:focus-visible ) {
    outline: 2px solid var(--wp--preset--color--tekst, #1a1a1a);
    outline-offset: 2px;
}

/* The rating in words, for a screen reader — the glyphs carry it for everyone else. */
.fts-review-form__star-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset( 50% );
    white-space: nowrap;
}

/*
 * The honeypot.
 *
 * Moved out of sight rather than hidden with `display: none` or the `hidden` attribute, because a
 * form-filling bot skips those and the point is that it fills this one in. It is also
 * `aria-hidden` and `tabindex="-1"` in the markup, so no screen reader and no keyboard ever reaches
 * it — visually-hidden alone would leave it in the tab order and in the accessibility tree, where it
 * would be an unexplained "Nettadresse" field.
 */
.fts-review-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* One column of cards below the prototype's own 1200px, where two would be two narrow columns. */
@media (max-width: 1200px) {
    .fts-reviews__list {
        grid-template-columns: 1fr;
    }
}

/*
 * The button comes back into flow under the histogram, the prototype's own breakpoint for stacking
 * this header. The intro's right-hand reservation goes with it, or the summary sits in a gutter that
 * nothing occupies.
 */
@media (max-width: 768px) {
    .fts-reviews__intro {
        padding-right: 0;
    }

    .fts-reviews__form-toggle {
        position: static;
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .fts-reviews__bar-label {
        min-width: 70px;
    }
}

/* ── The review carousel (ADR-0013's mini surface) ── */

/*
 * The band between the product's own panels and "Andre kjøpte også". A tint that runs edge to edge,
 * which is why `single-product.php` stopped wrapping the whole page in one `.ft-container` and let
 * each section carry its own.
 */
.reviews-mini {
    padding: 36px 0 40px;
    background: var(--wp--preset--color--lys-blaa, #eaf8fb);
    border-top: var(--wp--custom--linje, 1px solid rgba(0, 0, 0, 0.08));
    border-bottom: var(--wp--custom--linje, 1px solid rgba(0, 0, 0, 0.08));
}

.reviews-mini__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

/* The carousel's own header size and spacing, against the star row's shared defaults. */
.reviews-mini__summary .fts-star-row {
    gap: 10px;
    font-size: 15px;
}

.reviews-mini__summary .fts-star-row__count {
    font-size: 16px;
}

/*
 * An auto margin rather than `justify-content: space-between` on the header, because the summary
 * row beside it is conditional: `fts_star_row()` answers '' for a product with no rating metafield
 * and no counted total, and `space-between` would then park the arrows at the *left* of an
 * otherwise empty row. Pushed from its own side, the nav is at the right end either way.
 */
.reviews-mini__nav {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
}

.reviews-mini__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid var(--wp--preset--color--tekst, #1a1a1a);
    border-radius: 50%;
    background: var(--wp--preset--color--hvit, #fff);
    color: var(--wp--preset--color--tekst, #1a1a1a);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.reviews-mini__arrow:hover {
    background: var(--wp--preset--color--tekst, #1a1a1a);
    color: var(--wp--preset--color--hvit, #fff);
}

.reviews-mini__arrow svg {
    width: 12px;
    height: 12px;
}

/*
 * `scroll-behavior` lives here and not in the arrows' JavaScript: `Element.scrollBy( x, y )` honours
 * the computed value, so one declaration covers the buttons and leaves the reduced-motion override
 * below as the only place the preference is read.
 */
.reviews-mini__track {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    /*
     * A swipe past the end of the track must not become a browser back-navigation, which is what it
     * is on iOS and on a trackpad without this — the same rule the product grid's phone track has.
     */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.reviews-mini__track::-webkit-scrollbar {
    display: none;
}

.reviews-mini__card {
    display: flex;
    flex: 0 0 340px;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    border-radius: var(--wp--custom--radius--kant, 3px);
    background: var(--wp--preset--color--hvit, #fff);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
}

/*
 * The prototype draws 13px stars on this card against 16px elsewhere. Not transcribed: the plugin
 * has one star row (`fts_star_row()`) drawn at one size on every surface, and a second size would be
 * a per-surface override of a shared component to save three pixels.
 */
.reviews-mini__text {
    margin: 0;
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--wp--preset--color--tekst, #1a1a1a);
}

/* `auto` on the top margin, so the attribution sits on the floor of a card whose quote is short. */
.reviews-mini__author {
    margin: auto 0 0;
    padding-top: 4px;
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

/*
 * The prototype's yellow pill, with the text darkened to 65% `gul` (#926300 today): plain `gul` on
 * its own 10% tint measures 2.2:1 against WCAG AA's 4.5:1 for text at this size and weight, and the
 * two words are the only place a shopper is told the purchase was verified. `color-mix()` rather
 * than literals so both follow the token instead of freezing today's value of it.
 *
 * `.fts-review__badge` in the full section is a white pill on a tinted card — a different ground, so
 * a different rule.
 */
.reviews-mini__verified {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--wp--custom--radius--pille, 30px);
    background: color-mix(in srgb, var(--wp--preset--color--gul, #e09900) 10%, transparent);
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    font-weight: 600;
    color: color-mix(in srgb, var(--wp--preset--color--gul, #e09900) 65%, black);
}

@media (max-width: 640px) {
    /*
     * A share of the viewport rather than 340px, so the next card is always visibly cut and the
     * track reads as a track. The prototype's own number for this width.
     */
    .reviews-mini__card {
        flex-basis: 75%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-mini__track {
        scroll-behavior: auto;
    }

    .reviews-mini__arrow {
        transition: none;
    }
}