/**
 * Advanced Reviews — titles, verified badges, and helpful voting.
 *
 * Inherits all colour tokens from theme.json so it adapts to any palette
 * the site owner applies via the Site Editor.
 *
 * @package Meridian
 */

/* ─── Review form: title field ──────────────────────────────────────────── */

.comment-form-meridian-title {
        margin-bottom: 1.25rem;
}

.comment-form-meridian-title label {
        display: block;
        margin-bottom: 0.375rem;
        font-size: var(--wp--preset--font-size--small, 0.875rem);
        font-weight: 500;
        letter-spacing: 0.02em;
}

.comment-form-meridian-title label .optional {
        font-weight: 400;
        color: var(--wp--preset--color--foreground, #555);
        opacity: 0.6;
}

.comment-form-meridian-title input[type="text"] {
        width: 100%;
        padding: 0.6875rem 0.875rem;
        border: 1px solid var(--wp--preset--color--border, #d0d0d0);
        border-radius: 0;
        background: transparent;
        font-family: inherit;
        font-size: 1rem;
        color: inherit;
        transition: border-color 0.15s ease;
}

.comment-form-meridian-title input[type="text"]:focus {
        outline: none;
        border-color: var(--wp--preset--color--primary, #1a1a1a);
}

/* ─── Review title (displayed above the author / date line) ─────────────── */

.meridian-review__title {
        margin: 0 0 0.35rem;
        font-family: var(--wp--preset--font-family--serif, Georgia, serif);
        font-size: clamp(1rem, 1.1rem + 0.1vw, 1.2rem);
        font-weight: 600;
        line-height: 1.3;
        color: var(--wp--preset--color--foreground, #1a1a1a);
}

/* ─── Footer row: wraps verified badge + voting ─────────────────────────── */

.meridian-review__footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1.25rem;
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid var(--wp--preset--color--border, #e8e8e8);
}

/* ─── Verified Buyer badge ───────────────────────────────────────────────── */

.meridian-review__verified {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.6rem;
        border-radius: 2rem;
        background: color-mix(in srgb, #2d7d46 12%, transparent);
        color: #1e6035;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
}

.meridian-review__verified-icon {
        width: 0.9rem;
        height: 0.9rem;
        flex-shrink: 0;
        color: #2d7d46;
}

/* ─── Voting widget ──────────────────────────────────────────────────────── */

.meridian-review__voting {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin-left: auto; /* push to right when badge is present */
}

.meridian-review__helpful-count {
        font-size: 0.8125rem;
        color: var(--wp--preset--color--foreground, #555);
        opacity: 0.7;
}

.meridian-review__prompt {
        font-size: 0.8125rem;
        color: var(--wp--preset--color--foreground, #555);
        opacity: 0.75;
}

.meridian-review__vote-btns {
        display: flex;
        gap: 0.4rem;
}

.meridian-review__vote-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.8rem;
        border: 1px solid var(--wp--preset--color--border, #ccc);
        border-radius: 0;
        background: transparent;
        font-family: inherit;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--wp--preset--color--foreground, #1a1a1a);
        cursor: pointer;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.meridian-review__vote-btn:hover {
        background: var(--wp--preset--color--foreground, #1a1a1a);
        color: var(--wp--preset--color--background, #fff);
        border-color: var(--wp--preset--color--foreground, #1a1a1a);
}

.meridian-review__vote-btn:focus-visible {
        outline: 2px solid var(--wp--preset--color--primary, #1a1a1a);
        outline-offset: 2px;
}

/* Count inside the button — only visible when > 0 */
.meridian-review__vote-count:empty {
        display: none;
}

/* State: after user votes — swap to static "thanks" message */

.meridian-review__voting[data-voted] .meridian-review__prompt,
.meridian-review__voting[data-voted] .meridian-review__vote-btns {
        display: none;
}

.meridian-review__voted-msg {
        font-size: 0.8125rem;
        color: var(--wp--preset--color--foreground, #555);
        opacity: 0.7;
        font-style: italic;
}

/* ─── Spinner (shown during AJAX request) ────────────────────────────────── */

.meridian-review__vote-btn--loading {
        pointer-events: none;
        opacity: 0.55;
}

/* ─── Responsive tweaks ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
        .meridian-review__footer {
                flex-direction: column;
                align-items: flex-start;
        }

        .meridian-review__voting {
                margin-left: 0;
        }
}

/* ─── Pinned featured review (single product template) ──────────────────── */

.meridian-featured-review {
        position: relative;
        padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--40);
        background-color: var(--wp--preset--color--neutral-50, #f7f6f4);
        border-left: 3px solid var(--wp--preset--color--ink, #1a1a1a);
        max-width: 42rem;
}

.meridian-featured-review__label {
        display: block;
        margin-bottom: var(--wp--preset--spacing--12);
        font-size: var(--wp--preset--font-size--xs, 0.75rem);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wp--preset--color--neutral-400, #999);
}

.meridian-featured-review__stars {
        display: flex;
        gap: 0.15rem;
        margin-bottom: var(--wp--preset--spacing--12);
        font-size: 1.1rem;
        line-height: 1;
}

.meridian-featured-review__star {
        color: var(--wp--preset--color--neutral-200, #ddd);
}

.meridian-featured-review__star.is-filled {
        color: var(--wp--preset--color--ink, #1a1a1a);
}

.meridian-featured-review__title {
        margin: 0 0 var(--wp--preset--spacing--12);
        font-family: var(--wp--preset--font-family--heading, Georgia, serif);
        font-size: var(--wp--preset--font-size--lg, 1.25rem);
        font-weight: 400;
        line-height: 1.3;
        color: var(--wp--preset--color--ink, #1a1a1a);
}

.meridian-featured-review__body {
        margin: 0 0 var(--wp--preset--spacing--16);
        font-family: var(--wp--preset--font-family--heading, Georgia, serif);
        font-style: italic;
        font-size: var(--wp--preset--font-size--md, 1.05rem);
        line-height: 1.6;
        color: var(--wp--preset--color--neutral-800, #333);
}

.meridian-featured-review__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--wp--preset--spacing--12);
        font-size: var(--wp--preset--font-size--sm, 0.875rem);
        color: var(--wp--preset--color--neutral-600, #666);
}

.meridian-featured-review__author {
        font-weight: 500;
}

.meridian-featured-review__verified {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0.55rem;
        border-radius: 2rem;
        background: color-mix(in srgb, #2d7d46 12%, transparent);
        color: #1e6035;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
}

.meridian-featured-review__verified svg {
        width: 0.85rem;
        height: 0.85rem;
        flex-shrink: 0;
        color: #2d7d46;
}

@media (max-width: 600px) {
        .meridian-featured-review {
                padding: var(--wp--preset--spacing--24);
                max-width: 100%;
        }
}