/* Product reviews and homepage testimonials (views/includes/product_reviews.php,
   views/includes/home_testimonials.php, views/includes/reviews_admin_page.php).
   Theme tokens only (theme.css :root); no inline styles anywhere. */

/* Status colours: the same greens and ambers as the order badges (account.css .ord-badge). */
:root {
    --rv-good-bg: #DCFCE7;
    --rv-good-border: #BBF7D0;
    --rv-good-text: #166534;
    --rv-wait-bg: #FEF3C7;
    --rv-wait-text: #92400E;
    --rv-bad-border: #FECACA;
}

/* ---------- Stars ---------- */
.rv-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-star);
    font-size: 0.95rem;
    line-height: 1;
    vertical-align: middle;
}

.rv-stars .far {
    color: var(--color-text-muted-dark);
}

.rv-stars-lg {
    font-size: 1.15rem;
}

/* ---------- Under the product title ---------- */
.rv-summary-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.25rem 0 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.rv-summary-line:hover .rv-summary-count,
.rv-summary-line:focus-visible .rv-summary-count {
    color: var(--cts-link);
    text-decoration: underline;
}

.rv-summary-avg {
    font-weight: 700;
    color: var(--color-dark);
}

/* ---------- Reviews card ---------- */
.rv-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    scroll-margin-top: 140px;
}

.rv-heading {
    font-family: var(--font-family-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 1.25rem;
}

.rv-flash {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.rv-flash.is-success {
    background-color: var(--rv-good-bg);
    border: 1px solid var(--rv-good-border);
    color: var(--rv-good-text);
}

.rv-flash.is-error {
    background-color: var(--color-accent-soft-bg);
    border: 1px solid var(--rv-bad-border);
    color: var(--cts-link-hover);
}

.rv-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    align-items: center;
    padding-bottom: 1.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.rv-overview-score {
    text-align: center;
    min-width: 120px;
}

.rv-overview-avg {
    font-family: var(--font-family-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-dark);
    margin-bottom: 0.35rem;
}

.rv-overview-count {
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.rv-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 240px;
    max-width: 420px;
}

.rv-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.rv-bar-row + .rv-bar-row {
    margin-top: 0.3rem;
}

.rv-bar-label {
    width: 2.25rem;
    white-space: nowrap;
}

.rv-bar-label .fa-star {
    color: var(--color-star);
}

.rv-bar {
    flex: 1;
    height: 8px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--color-border);
    appearance: none;
    -webkit-appearance: none;
}

.rv-bar::-webkit-progress-bar {
    background-color: var(--color-border);
    border-radius: 999px;
}

.rv-bar::-webkit-progress-value {
    background-color: var(--color-star);
    border-radius: 999px;
}

.rv-bar::-moz-progress-bar {
    background-color: var(--color-star);
    border-radius: 999px;
}

.rv-bar-n {
    width: 2rem;
    text-align: right;
}

.rv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rv-item {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* "Write a review" below has its own top line. */
.rv-item:last-child {
    border-bottom: 0;
}

.rv-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.rv-item-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-dark);
}

.rv-item-body {
    margin: 0 0 0.5rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.rv-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.rv-item-name {
    font-weight: 600;
    color: var(--color-text);
}

.rv-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: var(--rv-good-bg);
    color: var(--rv-good-text);
    font-size: 0.78rem;
    font-weight: 600;
}

.rv-more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--cts-link);
}

.rv-more:hover {
    color: var(--cts-link-hover);
}

.rv-empty {
    color: var(--color-text-muted);
    margin: 0;
}

/* ---------- Write a review ---------- */
.rv-write {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    max-width: 640px;
    scroll-margin-top: 140px;
}

.rv-write-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.rv-write-note {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.rv-note-icon {
    color: var(--rv-good-text);
}

.rv-login-btn {
    width: auto;
}

.rv-state {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
}

.rv-state .fas {
    margin-top: 0.2rem;
}

.rv-state-pending {
    background-color: var(--rv-wait-bg);
    color: var(--rv-wait-text);
}

.rv-state-approved {
    background-color: var(--rv-good-bg);
    color: var(--rv-good-text);
}

.rv-state-rejected {
    background-color: var(--color-accent-soft-bg);
    color: var(--cts-link-hover);
}

.rv-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--color-dark);
    font-size: 0.95rem;
}

.rv-required,
.rv-optional {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Honeypot: off-screen for people, still in the form for bots. */
.rv-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rv-form {
    position: relative;
}

.rv-rate {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
}

/* Five radio buttons, 5 to 1 in the markup and shown 1 to 5 (row-reverse), so a
   chosen or hovered star lights up itself and every star before it. */
.rv-rate-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15rem;
}

.rv-rate-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rv-rate-star {
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.15rem;
    border-radius: 6px;
    color: var(--color-border);
    transition: color 0.12s ease;
}

.rv-rate-input:checked ~ .rv-rate-star,
.rv-rate-star:hover,
.rv-rate-star:hover ~ .rv-rate-star {
    color: var(--color-star);
}

.rv-rate-input:focus-visible + .rv-rate-star {
    box-shadow: var(--cts-focus-ring);
}

.rv-submit {
    width: auto;
    min-width: 180px;
}

@media (max-width: 575.98px) {
    .rv-card {
        padding: 1.15rem 1rem;
    }

    .rv-overview {
        gap: 1rem;
    }

    .rv-overview-score {
        min-width: 0;
    }

    .rv-bars {
        flex-basis: 100%;
        max-width: none;
    }

    .rv-submit,
    .rv-login-btn {
        width: 100%;
    }
}

/* ---------- Homepage testimonials ---------- */
.ts-section .ts-heading {
    margin-bottom: 0.25rem;
}

.ts-sub {
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.ts-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
}

.ts-quote-icon {
    color: var(--color-primary);
    font-size: 1.25rem;
    opacity: 0.85;
}

.ts-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-dark);
}

.ts-body {
    margin: 0;
    color: var(--color-text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ts-foot {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.ts-name {
    font-weight: 700;
    color: var(--color-navy);
}

.ts-product {
    display: block;
    margin-top: 0.15rem;
    color: var(--cts-link);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-product:hover {
    color: var(--cts-link-hover);
    text-decoration: underline;
}

/* ---------- Manage -> Reviews ---------- */
.rva-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}

.rva-item + .rva-item {
    margin-top: 0.75rem;
}

.rva-body {
    white-space: pre-line;
    overflow-wrap: anywhere;
    margin: 0.4rem 0 0.6rem;
}

.rva-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.rva-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.rva-actions form {
    margin: 0;
}