/*
 * Product-page reviews tab styling. Deliberately self-contained under an
 * .eo-reviews namespace rather than depending on any elorigen-theme class name --
 * ARCHITECTURE.md 2.1 keeps the theme's tab nav/panel chrome untouched, only the
 * comments_template()-loaded content inside it is this plugin's responsibility, so
 * this file makes no assumption about what CSS the surrounding sp-tabs__panel
 * provides.
 */

.eo-reviews {
    max-width: 720px;
}

.eo-reviews__heading {
    margin: 0 0 1em;
    font-size: 1.25em;
}

.eo-reviews__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #e2ddd4;
    font-size: 0.9em;
}

.eo-reviews__control {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.eo-reviews__control--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
}

.eo-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-bottom: 1em;
}

.eo-review {
    padding: 1em 0;
    border-bottom: 1px solid #ece7de;
}

.eo-review__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.4em;
}

.eo-review__rating {
    color: #c9a227;
    letter-spacing: 0.05em;
}

.eo-review__badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.75em;
    background: #f1ede4;
    color: #55503f;
}

.eo-review__badge--verified {
    background: #e4efe6;
    color: #2f6b3e;
}

.eo-review__badge--marche {
    background: #efe4e4;
    color: #7a3232;
}

.eo-review__title {
    margin: 0.2em 0;
    font-size: 1.05em;
}

.eo-review__author-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    font-size: 0.85em;
    color: #7a7568;
    margin-bottom: 0.5em;
}

.eo-review__body {
    line-height: 1.7;
    white-space: pre-line;
}

.eo-review__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    list-style: none;
    margin: 0.75em 0 0;
    padding: 0;
}

.eo-review__photos img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
}

.eo-review__reply {
    margin-top: 0.75em;
    padding: 0.75em 1em;
    background: #faf8f3;
    border-left: 3px solid #c9a227;
}

.eo-review__reply-label {
    display: block;
    font-size: 0.85em;
    margin-bottom: 0.25em;
}

.eo-review__footer {
    margin-top: 0.75em;
}

.eo-review__helpful-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.9em;
    border: 1px solid #d8d2c4;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85em;
}

.eo-review__helpful-button--voted {
    background: #f1ede4;
    border-color: #c9a227;
}

.eo-reviews__pagination {
    text-align: center;
    margin: 1em 0 2em;
}

.eo-reviews__button {
    padding: 0.6em 1.4em;
    border-radius: 4px;
    border: none;
    background: #2f2a20;
    color: #fff;
    cursor: pointer;
    font-size: 0.95em;
}

.eo-reviews__button--secondary {
    background: transparent;
    color: #2f2a20;
    border: 1px solid #2f2a20;
}

.eo-reviews__button:disabled {
    opacity: 0.6;
    cursor: default;
}

.eo-reviews__notice {
    padding: 1em 1.25em;
    background: #faf8f3;
    border: 1px solid #ece7de;
    border-radius: 4px;
}

.eo-reviews__notice-sub {
    margin-top: 0.75em;
    font-size: 0.85em;
    color: #7a7568;
}

.eo-reviews__form {
    margin-top: 1em;
}

.eo-reviews__form--compact {
    margin-top: 1em;
}

.eo-reviews__form-heading {
    margin-top: 0;
}

.eo-reviews__contact-hint {
    font-size: 0.85em;
    color: #7a7568;
    padding: 0.5em 0.75em;
    border-radius: 4px;
}

.eo-reviews__contact-hint--emphasized {
    background: #fbf1e6;
    color: #7a4c1f;
}

.eo-reviews__field {
    margin: 0 0 1em;
}

.eo-reviews__field label,
.eo-reviews__field-label {
    display: block;
    margin-bottom: 0.35em;
    font-size: 0.9em;
}

.eo-reviews__field input[type="text"],
.eo-reviews__field input[type="email"],
.eo-reviews__field select,
.eo-reviews__field textarea {
    width: 100%;
    max-width: 480px;
    padding: 0.5em 0.6em;
    border: 1px solid #d8d2c4;
    border-radius: 4px;
    font-size: 0.95em;
    box-sizing: border-box;
}

.eo-reviews__required {
    color: #a33;
}

/*
 * Flat input+label siblings in REVERSE DOM order (5,4,3,2,1), visually reversed
 * back to 1-5 by row-reverse -- the standard CSS star-rating trick. This is load
 * -bearing, not decorative: with each <input> nested inside its OWN <label> (the
 * previous structure), there is no CSS way to say "fill every star up to the
 * selected one," so a click always registered but produced literally no visible
 * change -- indistinguishable from "can't select a star" (2026-07-17 bug report).
 * `~` matches DOM-later siblings, which are the visually-earlier (lower-numbered)
 * stars after the reversal, so input:checked ~ label ~ label correctly fills 1
 * through N.
 */
.eo-reviews__star-picker {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15em;
    font-size: 1.4em;
}

.eo-reviews__star-picker label {
    display: inline;
    margin: 0;
    cursor: pointer;
    color: #d8d2c4;
    transition: color 0.1s;
}

.eo-reviews__star-picker input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.eo-reviews__star-picker input:checked ~ label,
.eo-reviews__star-picker input:checked ~ label ~ label,
.eo-reviews__star-picker label:hover,
.eo-reviews__star-picker label:hover ~ label {
    color: #c9a227;
}

/* 数字ボタン式5段階評価 (rating_5)。星ピッカーと同じ「隠しradio+label」構成だが、
   塗り上げではなく選択した1つだけを強調するので DOM順そのまま・`+` 隣接セレクタで足りる。 */
.eo-reviews__scale {
    display: inline-flex;
    gap: 0.4em;
}

.eo-reviews__scale input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.eo-reviews__scale label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6em;
    height: 2.6em;
    margin: 0;
    border: 1px solid #d8d2c4;
    border-radius: 4px;
    background: #fff;
    color: #55503f;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.eo-reviews__scale label:hover {
    border-color: #2f2a20;
}

.eo-reviews__scale input:checked + label {
    background: #2f2a20;
    border-color: #2f2a20;
    color: #fff;
}

.eo-reviews__scale input:focus-visible + label {
    outline: 2px solid #c9a227;
    outline-offset: 1px;
}

.eo-reviews__details {
    margin: 1em 0;
    padding: 0.75em 1em;
    border: 1px solid #ece7de;
    border-radius: 4px;
}

.eo-reviews__details summary {
    cursor: pointer;
    font-size: 0.9em;
}

.eo-reviews__questions {
    margin-top: 1em;
}

.eo-reviews__field--consent {
    font-size: 0.85em;
}

.eo-reviews__form-message {
    padding: 0.5em 0.75em;
    border-radius: 4px;
    background: #e4efe6;
    color: #2f6b3e;
    font-size: 0.9em;
}

.eo-reviews__form-message--error {
    background: #f5e4e4;
    color: #8a2f2f;
}

#eo-review-draft-disclosure {
    background: #f1ede4;
    color: #55503f;
    margin-bottom: 1em;
}

.eo-reviews__draft-actions {
    display: flex;
    gap: 0.75em;
}

.eo-reviews__empty {
    color: #7a7568;
}

/* eo-redesignレイヤー有効時にレビュー一覧+投稿フォームを移設する可視セクション
   (assets/js/review-app.js relocateForRedesign())。main.eo-product-redesign の
   内側に挿入されるので、リデザイン側のデザイントークン (--eo-*) をそのまま使い、
   他の eo-* セクション（border-top区切り・72px余白・クレイ色アイブロウ+30px見出し）
   と同じ文法に揃える (2026-07-17 direct user feedback: 周りのデザインとあってない)。 */
.eo-reviews-relocated {
    padding: 72px 0;
    border-top: 1px solid var(--eo-line, #ddd6c8);
}

.eo-reviews-relocated__inner {
    max-width: 760px;
}

.eo-reviews-relocated__eyebrow {
    display: block;
    margin: 0 0 16px;
    color: var(--eo-clay, #a94f32);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.eo-reviews-relocated__heading {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.32;
    font-weight: 700;
    color: var(--eo-ink, #1e211d);
}

.eo-reviews-relocated__summary {
    margin: 0 0 28px;
    font-size: 1.05em;
    color: var(--eo-muted, #6a7068);
}

.eo-reviews-relocated__stars {
    color: var(--eo-gold, #d4a949);
    letter-spacing: 0.1em;
    margin-right: 0.4em;
}

/* 移設先ではタブ用の見出し（N件の口コミ）は冗長なので隠す（件数はsummaryが担う） */
.eo-reviews-relocated .eo-reviews__heading {
    display: none;
}

/* レビューカードをリデザインのカード文法（surface面+線+角丸+淡い影）に */
.eo-reviews-relocated .eo-review {
    padding: 20px 24px;
    border: 1px solid var(--eo-line, #ddd6c8);
    border-radius: 14px;
    background: var(--eo-surface, #fffdf8);
    box-shadow: var(--eo-shadow, 0 8px 24px rgba(28, 30, 25, 0.06));
}

.eo-reviews-relocated .eo-review__rating {
    color: var(--eo-gold, #d4a949);
}

.eo-reviews-relocated .eo-reviews__button {
    background: var(--eo-forest, #174b3f);
    border-radius: 999px;
    padding: 0.7em 1.6em;
}

.eo-reviews-relocated .eo-reviews__button--secondary {
    background: transparent;
    color: var(--eo-forest, #174b3f);
    border: 1px solid var(--eo-forest, #174b3f);
}

.eo-reviews-relocated .eo-reviews__notice {
    background: var(--eo-surface, #fffdf8);
    border: 1px solid var(--eo-line, #ddd6c8);
    border-radius: 14px;
}

@media (max-width: 640px) {
    .eo-reviews-relocated {
        padding: 48px 0;
    }

    .eo-reviews-relocated__heading {
        font-size: 26px;
        line-height: 1.36;
    }
}

/* 商品タイトル直上のトラストアンカー (review-app.js injectRatingAnchor())。
   リデザイン内に注入されるので --eo-* トークンで配色。 */
.eo-rating-anchor {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-bottom: 10px;
    font-size: 0.92em;
    color: var(--eo-muted, #6a7068);
    text-decoration: none;
    cursor: pointer;
}

.eo-rating-anchor:hover {
    text-decoration: underline;
}

.eo-rating-anchor__stars {
    color: var(--eo-gold, #d4a949);
    letter-spacing: 0.12em;
}

/* マイページ「レビューを書く」センター (Account\ReviewCenter) */
.eo-review-center__lead {
    margin: 0 0 1.25em;
}

.eo-review-center__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eo-review-center__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.9em 0;
    border-bottom: 1px solid #ece7de;
}

.eo-review-center__name {
    line-height: 1.5;
}

.eo-review-center__write {
    flex-shrink: 0;
    text-decoration: none;
    color: #fff;
}

.eo-reviews__post-entry {
    margin-top: 0.5em;
}