/*
 * Mano Reviews — front-end styles.
 *
 * Strategie: alles wordt genest onder .manorev zodat XStore-stijlen niet
 * geraakt worden. Kleuren/typografie ERVEN van het thema (currentColor,
 * inherit-font) zodat de widget zich automatisch aanpast aan jouw site.
 * Waar XStore CSS-variabelen heeft, gebruiken we die met een fallback.
 */
.manorev,
.manorev * { box-sizing: border-box; }

.manorev {
    --manorev-star: var(--st-accent-color, #f5b50a);
    --manorev-star-off: rgba(0,0,0,.18);
    --manorev-text: var(--st-base-color, currentColor);
    --manorev-muted: rgba(0,0,0,.55);
    --manorev-border: rgba(0,0,0,.10);
    --manorev-surface: var(--st-section-color, #fff);
    --manorev-radius: 8px;
    --manorev-gap: 16px;

    font-family: inherit;
    color: var(--manorev-text);
    line-height: 1.5;
}

.manorev-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.manorev-star { width: 16px; height: 16px; fill: var(--manorev-star-off); }
.manorev-star--on { fill: var(--manorev-star); }
.manorev-muted { color: var(--manorev-muted); font-size: .9em; }

/* Buttons — outline = subtle, ghost = link-like. Both inherit theme font. */
.manorev-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer;
    border-radius: var(--manorev-radius); text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.manorev-btn--outline {
    background: transparent; color: var(--manorev-text);
    border: 1px solid var(--manorev-border);
}
.manorev-btn--outline:hover { background: rgba(0,0,0,.04); }
.manorev-btn--ghost {
    background: transparent; border: 1px solid transparent; color: var(--manorev-text);
}
.manorev-btn--ghost:hover { background: rgba(0,0,0,.04); }
.manorev-btn--sm { padding: 6px 10px; font-size: .85em; }

/* Card */
.manorev-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px; height: 100%;
    background: var(--manorev-surface);
    border: 1px solid var(--manorev-border);
    border-radius: var(--manorev-radius);
}
.manorev-card__head { display: flex; gap: 12px; align-items: center; }
.manorev-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    background: rgba(0,0,0,.06);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px; color: var(--manorev-muted);
}
.manorev-card__meta { min-width: 0; }
.manorev-card__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manorev-card__date { color: var(--manorev-muted); font-size: .85em; }
.manorev-card__text {
    margin: 0; font-size: .95em;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
}
.manorev-card__text--muted { color: var(--manorev-muted); font-style: italic; }

/* Section header (carousel) */
.manorev-section__head {
    display: grid; grid-template-columns: 1fr; gap: var(--manorev-gap);
    align-items: end; margin-bottom: 24px;
}
@media (min-width: 768px) {
    .manorev-section__head { grid-template-columns: 1fr auto; }
}
.manorev-section__title { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.2; }
.manorev-section__sub { margin: 0; color: var(--manorev-muted); }

/* Summary block */
.manorev-summary { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.manorev-summary__score { display: inline-flex; gap: 10px; align-items: center; font-size: 1.5em; }
.manorev-summary__meta { color: var(--manorev-muted); font-size: .9em; }

/* Carousel */
.manorev-carousel { position: relative; }
.manorev-track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--manorev-gap);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 8px;
}
.manorev-track::-webkit-scrollbar { display: none; }
.manorev-slide { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .manorev-track { grid-auto-columns: calc(50% - var(--manorev-gap) / 2); } }
@media (min-width: 960px) { .manorev-track { grid-auto-columns: calc(33.333% - var(--manorev-gap) * 2 / 3); } }
.manorev-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.manorev-nav__btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--manorev-border); background: transparent;
    cursor: pointer; font-size: 18px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
}
.manorev-nav__btn:hover { background: rgba(0,0,0,.04); }

/* Compact */
.manorev-compact {
    border: 1px solid var(--manorev-border); border-radius: var(--manorev-radius);
    padding: 14px;
}
.manorev-compact__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.manorev-compact__score { display: inline-flex; gap: 8px; align-items: center; font-size: 1.05em; }
.manorev-compact__actions { display: inline-flex; gap: 8px; }
.manorev-compact__list {
    margin-top: 14px;
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px) { .manorev-compact__list { grid-template-columns: 1fr 1fr; } }

/* Strip (footer) */
.manorev-strip {
    display: inline-flex; gap: 8px; align-items: center;
    text-decoration: none; color: inherit;
    padding: 8px 12px; border-radius: var(--manorev-radius);
}
.manorev-strip:hover { background: rgba(0,0,0,.04); }

/* Grid (full /reviews page) */
.manorev-grid {
    display: grid; gap: var(--manorev-gap);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .manorev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .manorev-grid { grid-template-columns: repeat(var(--manorev-cols, 3), 1fr); } }

/* Admin-only error notice */
.manorev-error {
    padding: 12px 14px; border: 1px dashed #d63638; color: #d63638;
    border-radius: var(--manorev-radius); background: #fef7f7;
}