/* shop-reviews.css — PDP Reviews & Q&A (webshop P6.3c). Progressive-enhancement styles
   for the reviews list, rating histogram, star-picker form, votes, and Q&A thread.
   Uses the shop tokens (--sh-*) + component palette (--c-*). */

.sh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Head: summary + write button */
.sh-reviews__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sh-space-4, 1rem); flex-wrap: wrap; margin-bottom: var(--sh-space-4, 1rem); }
.sh-reviews__avg { display: flex; align-items: center; gap: .6rem; }
.sh-reviews__avg > strong { font-size: 1.8rem; line-height: 1; }
.sh-reviews__count { color: var(--c-muted); font-size: .9rem; }
.sh-reviews__none { color: var(--c-muted); margin: 0; }
.sh-stars { color: var(--sh-star, #f5a623); display: inline-flex; gap: 1px; }

/* Rating histogram */
.sh-reviews__histogram { margin-top: .7rem; display: grid; gap: .25rem; max-width: 320px; }
.sh-hist__row { display: grid; grid-template-columns: 2.6rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .8rem; color: var(--c-muted); }
.sh-hist__star { white-space: nowrap; color: var(--sh-star, #f5a623); }
.sh-hist__bar { background: var(--c-bg-soft); border-radius: var(--sh-radius-pill, 999px); height: 8px; overflow: hidden; }
.sh-hist__fill { display: block; height: 100%; background: var(--sh-star, #f5a623); border-radius: inherit; }
.sh-hist__count { text-align: right; }

/* Write-a-review / ask-a-question forms */
.sh-review-form, .sh-qa-form { border: 1px solid var(--c-border); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .7rem; background: var(--c-bg, #fff); }
.sh-review-form__row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sh-review-form__label { font-weight: 600; font-size: .9rem; }
.sh-field { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--c-muted); }
.sh-field input, .sh-field textarea { padding: .55rem .7rem; border: 1px solid var(--c-border); border-radius: 8px; font: inherit; color: var(--c-text); background: #fff; }
.sh-field textarea { resize: vertical; }
.sh-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.sh-review-form__actions, .sh-qa-form__actions { display: flex; gap: .6rem; margin-top: .2rem; }
.sh-review-form__msg { margin: .2rem 0 0; font-size: .85rem; }
.sh-review-form__msg.is-ok { color: var(--sh-success, #16794c); }
.sh-review-form__msg.is-err { color: var(--sh-danger, #b91c1c); }

/* Star picker (CSS-only radio group; source order 5→1, row-reverse renders 1→5) */
.sh-rating-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 3px; }
.sh-rating-picker__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sh-rating-picker__star { color: var(--c-border); font-size: 1.55rem; cursor: pointer; line-height: 1; transition: color var(--sh-dur-fast, .12s) ease; }
.sh-rating-picker__star:hover,
.sh-rating-picker__star:hover ~ .sh-rating-picker__star,
.sh-rating-picker__input:checked ~ .sh-rating-picker__star { color: var(--sh-star, #f5a623); }
.sh-rating-picker__input:focus-visible + .sh-rating-picker__star { outline: 2px solid var(--sh-focus, #2563eb); outline-offset: 2px; border-radius: 3px; }

/* Toolbar (sort) */
.sh-reviews__toolbar { display: flex; justify-content: flex-end; margin-bottom: .8rem; }
.sh-reviews__sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--c-muted); }
.sh-reviews__sort select { padding: .35rem .5rem; border: 1px solid var(--c-border); border-radius: 8px; font: inherit; background: #fff; }

/* Review cards */
.sh-reviews__list { display: grid; gap: 1rem; }
.sh-review { border-bottom: 1px solid var(--c-border); padding-bottom: 1rem; }
.sh-review__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.sh-review__author { font-weight: 600; }
.sh-review__verified { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--sh-success, #16794c); background: var(--sh-success-bg, #e7f6ee); padding: .1rem .5rem; border-radius: var(--sh-radius-pill, 999px); }
.sh-review__date { margin-left: auto; color: var(--c-muted); font-size: .8rem; }
.sh-review__title { font-weight: 600; margin-bottom: .2rem; }
.sh-review__body { margin: .2rem 0 .5rem; line-height: 1.55; }
.sh-review__foot { display: flex; gap: .6rem; }
.sh-review__vote { display: inline-flex; align-items: center; gap: .3rem; background: transparent; border: 1px solid var(--c-border); border-radius: var(--sh-radius-pill, 999px); padding: .25rem .7rem; font-size: .8rem; color: var(--c-muted); cursor: pointer; }
.sh-review__vote:hover { background: var(--c-bg-soft); color: var(--c-text); }
.sh-review__vote[disabled] { opacity: .5; cursor: default; }

/* Q&A */
.sh-qa__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sh-qa__title { margin: 0; font-size: 1.05rem; }
.sh-qa__list { display: grid; gap: 1rem; }
.sh-qa__item { border-bottom: 1px solid var(--c-border); padding-bottom: 1rem; }
.sh-qa__q { display: flex; gap: .5rem; font-weight: 600; }
.sh-qa__q p, .sh-qa__answer p { margin: 0; }
.sh-qa__answers { margin: .6rem 0 0 1.5rem; display: grid; gap: .5rem; }
.sh-qa__answer { background: var(--c-bg-soft); border-radius: 8px; padding: .6rem .8rem; }
.sh-qa__staff { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--c-blue, #1e40af); font-weight: 600; margin-bottom: .2rem; }

@media (max-width: 620px) {
    .sh-field-row { grid-template-columns: 1fr; }
    .sh-reviews__head { flex-direction: column; }
}