/* ==========================================================================
   Customer reviews — the homepage band, and the badge pinned to the page edge.

   Every colour here is a theme token from includes/theme.php, so a shop that
   changes its brand colour in Appearance repaints this with everything else.
   There are no literal hexes except the star, which is a rating and not a
   brand element: turning it purple with the buttons would stop it reading as
   a star rating at all.

   Loaded from includes/v2/head.php; the markup is includes/review_widget.php.
   ========================================================================== */

/* --------------------------------------------------------------- section -- */

.rv-section {
    padding: 60px 30px;
    max-width: 1600px;
    margin: 0 auto;
}

.rv-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.rv-section__note { margin: -14px 0 26px; }

/* The score and the cards are two different things and need to read that way.
   The gap belongs on the slider rather than only on the header above it,
   because the "how we collect reviews" line is optional — hang the spacing off
   the header alone and the layout tightens up the moment it is not set. */
.rv-slider { margin-top: 6px; }

/* --- the score block ----------------------------------------------------- */

.rv-score {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "num stars"
        "num count";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
}

.rv-score__num {
    grid-area: num;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--text-heading, #1a1a1a);
    letter-spacing: -0.02em;
}

.rv-score .rv-stars { grid-area: stars; }

.rv-score__count {
    grid-area: count;
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}

.rv-score__count strong { color: var(--primary); }

/* Stacked and centred in the panel, where there is no room for two columns. */
.rv-score--panel {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "stars" "count";
    justify-items: center;
    text-align: center;
    row-gap: 8px;
    padding: 4px 0 18px;
}

.rv-score--panel { grid-template-areas: "num" "stars" "count" "by"; }
.rv-score--panel .rv-score__num { font-size: 58px; }
.rv-score--panel .rv-stars { font-size: 24px; }
.rv-score--panel .rv-score__count { font-size: 14px; }

.rv-score__by {
    grid-area: by;
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-muted, #6b7280);
}

/* Only the panel says it, so it must not leave a gap in the header layout. */
.rv-score:not(.rv-score--panel) .rv-score__by { display: none; }

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

.rv-stars {
    display: inline-flex;
    gap: 3px;
    font-size: 17px;
    color: #f5a623;
    line-height: 1;
}

/* An unearned star is drawn, not omitted — five shapes with two dimmed says
   "3 out of 5" at a glance, where three shapes alone just says "three". */
.rv-stars__off { color: var(--border-light, #e5e7eb); }

/* --- arrows -------------------------------------------------------------- */

.rv-section__nav { display: flex; gap: 8px; }

.rv-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-light, #e5e7eb);
    background: var(--surface, #fff);
    color: var(--primary);
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}

.rv-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary, #fff);
}

.rv-arrow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- the "how we collect reviews" link ----------------------------------- */

.rv-collect {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rv-collect:hover { color: var(--primary-hover, var(--brand-hover)); }

/* ------------------------------------------------------------------ card -- */

.rv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    /* A floor, not a fixed height: the tallest card in the row still sets the
       row, and this stops a two-word review drawing a card so short that the
       one beside it looks broken. */
    min-height: 340px;
    padding: 24px 18px 18px;
    text-align: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 12px;
}

.rv-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rv-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading, #1a1a1a);
}

.rv-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
}

.rv-card__verified i { color: var(--green-success, #16a34a); }

/* Capped and scrollable: the cards sit in a row, and one long review would
   otherwise set the height of every short one beside it. */
.rv-card__body {
    flex: 1 1 auto;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rv-card__body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-main, #333);
}

.rv-card__date {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

/* --- the thumbs ---------------------------------------------------------- */

.rv-card__votes { display: flex; gap: 10px; }

.rv-vote {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 58px;
    justify-content: center;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--border-light, #e5e7eb);
    background: var(--surface, #fff);
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.rv-vote:hover { border-color: var(--primary); color: var(--primary); }

/* The vote this browser already cast, so it comes back pressed on the next
   visit instead of quietly inviting the same vote again. */
.rv-vote.is-on {
    border-color: var(--primary);
    background: var(--primary-tint, var(--primary-a12));
    color: var(--primary);
}

.rv-vote[disabled] { opacity: .55; cursor: default; }

.rv-vote__n { font-variant-numeric: tabular-nums; }

/* --- the shop's answer --------------------------------------------------- */

.rv-card__reply { width: 100%; }

.rv-card__reply summary {
    list-style: none;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rv-card__reply summary::-webkit-details-marker { display: none; }

.rv-card__reply summary i { transition: transform .15s; }
.rv-card__reply[open] summary i { transform: rotate(180deg); }

.rv-card__reply-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light, #e5e7eb);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
    text-align: left;
}

/* Splide gives every slide the height of the tallest; this makes the card fill
   it, so a row of cards has one bottom edge rather than five. */
.rv-slider .splide__list { align-items: stretch; }
.rv-slider .splide__slide { height: auto; }

.rv-slider .splide__pagination { margin-top: 22px; }

/* ----------------------------------------------------------------- badge -- */

/* The wrapper is only an anchor for the badge, and it must NOT carry a
   transform: a transformed element becomes the containing block for any
   `position: fixed` descendant, so the panel's `top: 0` would resolve to the
   middle of the screen — where the badge sits — instead of the top of the
   window. That is exactly what it did. The centring transform is on the button
   instead, which the panel is not inside.

   z-index just under the login panel's 10081, so the review panel clears the
   page but a sign-in opened from inside it still comes out on top. */
.rv-badge-wrap {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
}

.rv-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 74px;
    /* Centres the badge on the wrapper's midpoint — see the note above for why
       this is here and not on the wrapper. */
    transform: translateY(-50%);
    padding: 22px 10px 18px;
    border: 1px solid var(--border-light, #e5e7eb);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 26px rgba(0, 0, 0, .13);
    cursor: pointer;
    color: var(--text-main, #333);
}

/* The words run up the side, so the badge is as tall as its label is long.
   Two lines rather than one: "Kundenbewertungen ansehen" set vertically on a
   single line is taller than a laptop screen. */
.rv-badge__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 190px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow: hidden;
}

.rv-badge__mark {
    color: #f5a623;
    font-size: 34px;
    line-height: 1;
}

.rv-badge__num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-heading, #1a1a1a);
}

.rv-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ----------------------------------------------------------------- panel -- */

/* Anchored to the top-right of the window and the full height of it, exactly
   like the sign-in panel — the badge sits at the middle of the screen, but a
   panel hanging off the badge would start halfway down with the score below the
   fold. It slides by animating `right`, the same property and the same easing
   the login panel uses, so the two read as one piece of chrome rather than two
   different drawers. */
.rv-panel {
    position: fixed;
    top: 0;
    right: -520px;
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh;
    padding: 18px 22px 28px;
    background: var(--surface, #fff);
    box-shadow: -5px 0 30px rgba(0, 0, 0, .14);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Off-screen rather than display:none so it can slide, and so the browser
       has already laid it out when the pointer arrives. `hidden` is dropped by
       the script one reflow before the class lands — see assets/js/reviews.js. */
    transition: right .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rv-panel[hidden] { display: none; }
.rv-badge-wrap.is-open .rv-panel { right: 0; }

.rv-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.rv-panel__close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 20px;
    cursor: pointer;
}

.rv-panel__close:hover { background: var(--bg-soft, #f7f7f7); }

.rv-panel__list {
    display: flex;
    flex-direction: column;
}

/* In the panel a review is a full-width entry in a list, not a card in a row:
   left-aligned, separated by a rule rather than a border, and with the name and
   the verified mark on one line the way a comment thread reads. The carousel
   card is centred because it is a tile among tiles; this one is not. */
.rv-panel__list .rv-card {
    align-items: stretch;
    text-align: left;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    padding: 20px 2px;
    gap: 12px;
}

.rv-panel__list .rv-card:last-child { border-bottom: 0; }

.rv-panel__list .rv-card__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rv-panel__list .rv-card__name { font-size: 17px; }

/* A stacked list has one scrollbar for the whole column, so a review has no
   reason to scroll inside its own box. */
.rv-panel__list .rv-card__body { max-height: none; overflow: visible; }
.rv-panel__list .rv-card__body p { font-size: 14.5px; }

.rv-panel__list .rv-card__votes { justify-content: flex-start; }

/* ----------------------------------------------------------- narrow --- */

@media (max-width: 768px) {
    .rv-section { padding: 40px 16px; }
    .rv-section__head { justify-content: center; text-align: center; }
    .rv-score { justify-items: center; }

    /* The badge would cover a third of a phone screen sideways. It keeps its
       score and loses its words, which is the part that needed the height. */
    .rv-badge__label { display: none; }
    .rv-badge { padding: 10px 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .rv-panel { transition: none; }
}

/* Deliberately NOT locking the page behind it, which is the one thing this
   panel does differently from the login and cart drawers: those open on a
   click, this one opens on hover, and freezing the page because a pointer
   drifted past the right edge would be a trap. Its own scrolling is contained
   (`overscroll-behavior` above), so a wheel inside it never runs on into the
   page underneath. */