/* Review Manager — public widget.
   All colors come from the theme design tokens (--ap-color-*), defined by
   every AliothPress theme for both its dark and light variants. No own
   palette, no hex fallbacks except the transparent-safe ones below — the
   widget inherits all 15 themes and light/dark mode automatically.
   Layout uses logical properties (inline-start/end), so RTL pages
   (Arabic, Hebrew) mirror correctly without extra rules. */

.ap-reviews {
    margin-block: var(--ap-space-8, 3rem);
    /* Centre the whole widget box on the page by default, at a comfortable
       reading width. This makes the box sit centred wherever it is placed
       (the [reviews] marker or automatic placement), instead of stretching
       full-width and hugging the left edge. It is independent of the
       Alignment setting, which only governs the text inside the box. */
    max-width: var(--ap-container-narrow, 768px);
    margin-inline: auto;
}

/* The submission form keeps the core Form Builder width (.ap-form is capped
   at 720px). Without this it would sit at the start edge of the widget box,
   out of line with the full-width review cards above it; centring it inside
   the box lines it up with the cards without changing its width. */
.ap-reviews__form {
    margin-inline: auto;
}

.ap-reviews__title {
    color: var(--ap-color-text);
    margin-block-end: var(--ap-space-4, 1rem);
}

/* Aggregate line: stars + numeric average + count. Numbers only — no
   plural forms, identical in every language. */
.ap-reviews__aggregate {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2, 0.5rem);
    margin-block-end: var(--ap-space-6, 1.5rem);
    font-size: 1.1em;
}
.ap-reviews__avg {
    color: var(--ap-color-text);
    font-weight: 700;
}
.ap-reviews__count {
    color: var(--ap-color-text-muted);
}

/* Static star rows */
.ap-reviews__stars {
    white-space: nowrap;
    letter-spacing: 2px;
    line-height: 1;
}
.ap-reviews__star {
    color: var(--ap-color-border-strong);
}
.ap-reviews__star--on {
    color: var(--ap-color-primary);
}

/* Review cards */
.ap-reviews__list {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-4, 1rem);
    margin-block-end: var(--ap-space-8, 2rem);
}
.ap-reviews__item {
    background: var(--ap-color-surface);
    border: 1px solid var(--ap-color-border);
    border-radius: var(--ap-radius, 8px);
    padding: var(--ap-space-4, 1rem) var(--ap-space-5, 1.25rem);
}
.ap-reviews__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ap-space-2, 0.5rem) var(--ap-space-3, 0.75rem);
    margin-block-end: var(--ap-space-2, 0.5rem);
}
.ap-reviews__author {
    color: var(--ap-color-text);
    font-weight: 600;
}
.ap-reviews__date {
    color: var(--ap-color-text-muted);
    font-size: 0.85em;
    margin-inline-start: auto;
}
.ap-reviews__text {
    color: var(--ap-color-text-secondary);
    margin: 0;
    white-space: pre-line; /* keep visitor line breaks, collapse the rest */
    overflow-wrap: anywhere;
}
.ap-reviews__empty {
    color: var(--ap-color-text-muted);
}

/* Owner reply — nested under the review, accent edge on the start side
   (logical property, so it mirrors on RTL pages automatically). */
.ap-reviews__reply {
    margin-block-start: var(--ap-space-3, 0.75rem);
    padding: var(--ap-space-3, 0.75rem) var(--ap-space-4, 1rem);
    background: var(--ap-color-surface-alt);
    border-inline-start: 3px solid var(--ap-color-primary);
    border-radius: var(--ap-radius-sm, 6px);
    text-align: start;
}
.ap-reviews__reply-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ap-space-2, 0.5rem) var(--ap-space-3, 0.75rem);
    margin-block-end: var(--ap-space-1, 0.25rem);
}
.ap-reviews__reply-head .ap-reviews__date {
    margin-inline-start: auto;
}
.ap-reviews__reply-label {
    color: var(--ap-color-text);
    font-weight: 600;
    font-size: 0.9em;
}

/* Interactive star picker inside the form. The buttons reuse the core
   .ap-form__star element; only the selected state is added here. */
.ap-reviews__picker .ap-form__star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.6em;
    line-height: 1;
    padding: 0 2px;
    color: var(--ap-color-border-strong);
    transition: color 0.15s ease, transform 0.15s ease;
}
.ap-reviews__picker .ap-form__star:hover {
    transform: scale(1.15);
}
.ap-reviews__picker .ap-form__star.is-on {
    color: var(--ap-color-primary);
}

/* Result message */
.ap-reviews__msg {
    border-radius: var(--ap-radius, 8px);
    border: 1px solid var(--ap-color-border);
    background: var(--ap-color-surface-alt);
    color: var(--ap-color-text);
    padding: var(--ap-space-3, 0.75rem) var(--ap-space-4, 1rem);
    margin-block-end: var(--ap-space-3, 0.75rem);
    width: 100%;
}
.ap-reviews__msg--error {
    border-color: var(--ap-color-error);
    color: var(--ap-color-error);
}

/* Honeypot: visually removed, still in the DOM for bots. */
.ap-reviews__hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Alignment (admin setting): affects the widget chrome — title, aggregate,
   form heading, star picker, submit button, empty message. The text of the
   review cards intentionally stays start-aligned: centered multi-line
   prose is hard to read. */
.ap-reviews--align-center { text-align: center; }
.ap-reviews--align-center .ap-reviews__aggregate { justify-content: center; }
.ap-reviews--align-right { text-align: right; }
.ap-reviews--align-right .ap-reviews__aggregate { justify-content: flex-end; }
.ap-reviews--align-center .ap-reviews__item,
.ap-reviews--align-right .ap-reviews__item { text-align: start; }