/* ============================================================
   Smart Reviews — Minimal Public Stylesheet
   ============================================================ */
:root {
    --sr-theme-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #f5a623));
    --sr-gold:    var(--sr-theme-accent);
    --sr-gold-dk: var(--sr-theme-accent);
    --sr-empty:   #d1d5db;
    --sr-text:    var(--wp--preset--color--foreground, var(--wp--preset--color--contrast, #1a1a1a));
    --sr-muted:   #888;
    --sr-border:  #e8e8e8;
    --sr-bg:      var(--wp--preset--color--background, #fff);
    --sr-bg2:     rgba(0,0,0,.025);
    --sr-btn-bg:  var(--sr-theme-accent);
    --sr-btn-text: #111;
    --sr-pill-active-bg: var(--sr-theme-accent);
    --sr-pill-active-text: #111;
    --sr-pill-active-border: var(--sr-theme-accent);
    --sr-radius:  8px;
    --sr-danger:  #e53e3e;
}

.sr-container {
    font-family: inherit;
    color: var(--sr-text);
    color-scheme: light dark;
    max-width: 720px;
}

.sr-container--woo-after-summary,
.sr-container--woo-after-product,
.sr-container--woo-content,
.sr-container--woo-footer,
.sr-container--woo-conditional-fallback {
    max-width: 100%;
    margin-top: 32px;
    margin-bottom: 32px;
}
.sr-woo-conditional-fallback {
    clear: both;
    width: 100%;
}


/* ── Summary ─────────────────────────────────────────────── */
.sr-summary {
    display: flex; gap: 28px; align-items: center;
    border: 1px solid var(--sr-border); border-radius: var(--sr-radius);
    padding: 20px 24px; margin-bottom: 24px; background: var(--sr-bg2);
}
.sr-summary__score { text-align: center; min-width: 72px; }
.sr-summary__number { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--sr-gold); }
.sr-summary__stars  { font-size: 1rem; margin: 4px 0 2px; letter-spacing: 1px; }
.sr-summary__count  { font-size: .75rem; color: var(--sr-muted); }
.sr-summary__bars   { flex: 1; }
.sr-dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sr-dist-label { font-size: .75rem; width: 18px; text-align: right; color: var(--sr-muted); }
.sr-dist-bar   { flex: 1; height: 6px; background: var(--sr-empty); border-radius: 3px; overflow: hidden; }
.sr-dist-fill  { height: 100%; background: var(--sr-gold); border-radius: 3px; }
.sr-dist-count { font-size: .75rem; width: 20px; color: var(--sr-muted); }

/* ── Stars (display) ─────────────────────────────────────── */
.sr-star--filled { color: var(--sr-gold); }
.sr-star--empty  { color: var(--sr-empty); }
.sr-star--half {
    background: linear-gradient(90deg, var(--sr-gold) 50%, var(--sr-empty) 50%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Form ────────────────────────────────────────────────── */
.sr-form-wrap {
    border: 1px solid var(--sr-border); border-radius: var(--sr-radius);
    padding: 22px 24px; margin-bottom: 28px; background: var(--sr-bg);
}
.sr-form-heading {
    margin: 0 0 18px; font-size: 1rem; font-weight: 700;
    letter-spacing: -.01em; color: var(--sr-text);
}

/* Name row + anon checkbox inline */
.sr-row-name-anon {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.sr-row-name-anon .sr-input { flex: 1; }

/* Anon checkbox */
.sr-anon-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: .82rem; color: var(--sr-muted);
    white-space: nowrap; user-select: none;
}
.sr-anon-toggle input { display: none; }
.sr-anon-box {
    width: 16px; height: 16px; border: 1.5px solid var(--sr-border);
    border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .15s, border-color .15s;
}
.sr-anon-toggle input:checked + .sr-anon-box {
    background: var(--sr-text); border-color: var(--sr-text);
}
.sr-anon-toggle input:checked + .sr-anon-box::after {
    content: '✓'; color: #fff; font-size: 10px; line-height: 1;
}

/* Section label */
.sr-form-section-label {
    font-size: .75rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sr-muted); margin-bottom: 10px;
}

/* ── Criteria Grid — 3 col, name top, stars bottom ────────── */
.sr-criteria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.sr-criteria-col {
    border: 1px solid var(--sr-border); border-radius: 6px;
    padding: 10px 12px; background: var(--sr-bg2);
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.sr-criteria-col-name {
    font-size: .78rem; font-weight: 600; color: var(--sr-text);
    line-height: 1.2;
}

/* ── Star Row (interactive) ──────────────────────────────── */
.sr-star-row {
    display: flex; gap: 2px;
}
.sr-star-row .sr-s {
    cursor: pointer; font-size: 1.3rem; color: var(--sr-empty);
    transition: color .1s, transform .08s;
    line-height: 1;
}
.sr-star-row .sr-s:hover { transform: scale(1.15); }
.sr-star-row .sr-s.active { color: var(--sr-gold); }

/* standalone overall picker (no criteria) */
.sr-star-row--lg .sr-s { font-size: 1.8rem; }

/* Input & textarea */
.sr-input, .sr-textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--sr-border); border-radius: 6px;
    font-size: .875rem; color: var(--sr-text); background: var(--sr-bg);
    transition: border-color .15s; box-sizing: border-box;
}
.sr-input:focus, .sr-textarea:focus {
    outline: none; border-color: var(--sr-gold);
}
.sr-input--sm { flex: 1; }
.sr-textarea   { resize: vertical; min-height: 88px; margin-bottom: 14px; }
.sr-required   { color: var(--sr-danger); }

/* ── Media row ───────────────────────────────────────────── */
.sr-media-row { margin-bottom: 16px; }
.sr-media-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sr-media-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 13px; border: 1px solid var(--sr-border); border-radius: 6px;
    background: var(--sr-bg); font-size: .8rem; cursor: pointer;
    color: var(--sr-text); transition: border-color .15s;
}
.sr-media-btn:hover { border-color: var(--sr-gold); }
.sr-media-hint { color: var(--sr-muted); font-size: .72rem; font-weight: 400; }
.sr-video-inline {
    display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
}
.sr-container .sr-inline-btn {
    padding: 7px 12px; border: 1px solid var(--sr-btn-bg); border-radius: 6px;
    background: var(--sr-btn-bg) !important; color: var(--sr-btn-text) !important; font-size: .8rem; cursor: pointer;
    white-space: nowrap; appearance: none; box-shadow: none;
}
.sr-container .sr-inline-btn--cancel { background: var(--sr-bg) !important; color: var(--sr-muted) !important; border-color: var(--sr-border) !important; }
.sr-media-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-media-preview {
    position: relative; width: 72px; height: 72px;
    border-radius: 6px; overflow: hidden; border: 1px solid var(--sr-border);
}
.sr-media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-media-remove {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%;
    width: 18px; height: 18px; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.sr-video-preview-item {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--sr-border); border-radius: 6px;
    padding: 5px 10px; font-size: .78rem; color: var(--sr-muted);
    max-width: 220px;
}
.sr-video-preview-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Form footer */
.sr-form-footer { display: flex; align-items: center; }
.sr-container .sr-submit-btn {
    padding: 10px 24px; background: var(--sr-btn-bg) !important; color: var(--sr-btn-text) !important;
    border: 1px solid var(--sr-btn-bg) !important; border-radius: 6px; font-size: .875rem; font-weight: 600;
    cursor: pointer; transition: opacity .15s; appearance: none; box-shadow: none;
}
.sr-container .sr-submit-btn:hover { opacity: .88; }
.sr-container .sr-submit-btn:disabled { opacity: .4; cursor: not-allowed; }
.sr-form-message { padding: 10px 14px; border-radius: 6px; margin-top: 12px; font-size: .82rem; }
.sr-form-message--success { background: #f0fdf4; color: #166534; }
.sr-form-message--error   { background: #fef2f2; color: #991b1b; }

/* ── Reviews List ────────────────────────────────────────── */
.sr-reviews-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.sr-reviews-heading { margin: 0; font-size: .95rem; font-weight: 700; color: var(--sr-text); }
.sr-sort-bar { display: flex; align-items: center; gap: 4px; }
.sr-container .sr-sort-btn {
    background: transparent !important; border: 1px solid var(--sr-border) !important;
    padding: 4px 11px; border-radius: 20px; cursor: pointer;
    font-size: .75rem; color: var(--sr-muted) !important; transition: all .12s;
    appearance: none; box-shadow: none;
}
.sr-container .sr-sort-btn.active,
.sr-container .sr-sort-btn:hover,
.sr-container .sr-sort-btn:focus-visible {
    background: var(--sr-pill-active-bg) !important;
    border-color: var(--sr-pill-active-border) !important;
    color: var(--sr-pill-active-text) !important;
}
.sr-reviews-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Review Item ─────────────────────────────────────────── */
.sr-review-item {
    border: 1px solid var(--sr-border); border-radius: var(--sr-radius);
    padding: 16px 18px; background: var(--sr-bg);
}
.sr-review-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 10px; gap: 10px;
}
.sr-reviewer-info   { display: flex; align-items: center; gap: 10px; }
.sr-avatar          { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.sr-avatar img      { width: 100%; height: 100%; object-fit: cover; }
.sr-avatar--anon    {
    background: var(--sr-bg2); border: 1px dashed var(--sr-border);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.sr-reviewer-meta   { display: flex; flex-direction: column; gap: 1px; }
.sr-reviewer-name   { font-weight: 700; font-size: .88rem; }
.sr-anon-badge      {
    font-size: .68rem; color: var(--sr-muted);
    background: var(--sr-bg2); padding: 1px 6px; border-radius: 8px; display: inline-block;
}
.sr-review-date     { font-size: .73rem; color: var(--sr-muted); }
.sr-review-stars    { font-size: 1rem; letter-spacing: 1px; flex-shrink: 0; }

/* Criteria display in review (bars) */
.sr-review-criteria {
    display: grid; gap: 6px; margin-bottom: 12px;
    padding: 10px 12px; background: var(--sr-bg2); border-radius: 6px;
}
.sr-criteria-score  { display: flex; align-items: center; gap: 8px; }
.sr-criteria-label  { font-size: .74rem; width: 100px; flex-shrink: 0; color: var(--sr-muted); }
.sr-criteria-bar    { flex: 1; height: 5px; background: var(--sr-border); border-radius: 3px; overflow: hidden; }
.sr-criteria-fill   { height: 100%; background: var(--sr-gold); border-radius: 3px; }
.sr-criteria-value  { font-size: .72rem; color: var(--sr-muted); width: 24px; text-align: right; }

.sr-review-body p   { margin: 0 0 12px; line-height: 1.6; font-size: .875rem; }

/* Media in review */
.sr-review-media    { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sr-media-thumb     {
    display: block; width: 68px; height: 68px; border-radius: 6px;
    overflow: hidden; border: 1px solid var(--sr-border); text-decoration: none;
}
.sr-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-video-thumb     {
    background: rgba(0,0,0,.82); display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: #fff;
    appearance: none; cursor: pointer; padding: 0; font: inherit;
}
.sr-video-thumb:hover,
.sr-lightbox-trigger:hover { border-color: var(--sr-theme-accent); }
.sr-video-play   { font-size: 1.2rem; }
.sr-video-label  { font-size: .58rem; margin-top: 1px; opacity: .8; }

/* Footer */
.sr-review-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid var(--sr-border); margin-top: 2px;
}
.sr-upvote-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--sr-border); padding: 4px 12px;
    border-radius: 20px; cursor: pointer; font-size: .78rem; color: var(--sr-muted);
    transition: all .12s;
}
.sr-upvote-btn:hover       { border-color: var(--sr-theme-accent); color: var(--sr-theme-accent); }
.sr-upvote-btn--voted      { border-color: var(--sr-theme-accent); color: var(--sr-theme-accent); }
.sr-upvote-count           { font-weight: 700; }
.sr-admin-actions          { display: flex; gap: 8px; }
.sr-admin-link             { font-size: .72rem; color: var(--sr-muted); cursor: pointer; background: none; border: none; text-decoration: underline; padding: 0; }
.sr-admin-link:hover       { color: var(--sr-danger); }

/* Empty state */
.sr-empty-state { text-align: center; padding: 40px 20px; color: var(--sr-muted); font-size: .875rem; }
.sr-empty-icon  { font-size: 2rem; margin-bottom: 8px; }

/* Load more */
.sr-load-more-wrap { text-align: center; margin-top: 20px; }
.sr-load-more {
    padding: 9px 22px; background: none; border: 1px solid var(--sr-border);
    border-radius: 6px; cursor: pointer; font-size: .82rem; color: var(--sr-muted);
    transition: all .12s;
}
.sr-load-more:hover { border-color: var(--sr-theme-accent); color: var(--sr-theme-accent); }

/* Badge shortcode */
.sr-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--sr-gold); color: #fff; padding: 2px 9px;
    border-radius: 20px; font-size: .78rem; font-weight: 700;
}

/* WooCommerce */
.sr-wc-rating { display: inline-flex; align-items: center; gap: 3px; }



/* Lightbox */
body.sr-lightbox-open { overflow: hidden; }
.sr-lightbox {
    position: fixed; inset: 0; z-index: 999999;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.sr-lightbox.is-open { display: flex; }
.sr-lightbox__backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.82);
}
.sr-lightbox__dialog {
    position: relative; z-index: 1;
    width: min(960px, 94vw); max-height: 90vh;
    display: flex; align-items: center; justify-content: center;
}
.sr-lightbox__content {
    width: 100%; display: flex; align-items: center; justify-content: center;
}
.sr-lightbox__image {
    display: block; max-width: 100%; max-height: 88vh;
    border-radius: 10px; background: #fff;
}
.sr-lightbox__iframe,
.sr-lightbox__video {
    width: min(960px, 94vw); height: min(540px, 52.875vw);
    max-height: 82vh; border: 0; border-radius: 10px; background: #000;
}
.sr-lightbox__video { object-fit: contain; }
.sr-lightbox__close {
    position: absolute; top: -16px; right: -16px;
    width: 36px; height: 36px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.7);
    color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sr-lightbox__close:hover { background: var(--sr-theme-accent); }

@media (prefers-color-scheme: dark) {
    :root {
        --sr-text: var(--wp--preset--color--foreground, var(--wp--preset--color--contrast, #f5f5f5));
        --sr-bg: var(--wp--preset--color--background, #111);
        --sr-bg2: rgba(255,255,255,.06);
        --sr-border: rgba(255,255,255,.18);
        --sr-muted: rgba(245,245,245,.72);
        --sr-empty: rgba(245,245,245,.32);
    }
}

/* Responsive */
@media (max-width: 520px) {
    .sr-summary          { flex-direction: column; gap: 16px; }
    .sr-criteria-grid    { grid-template-columns: repeat(2, 1fr); }
    .sr-reviews-header   { flex-direction: column; align-items: flex-start; }
    .sr-row-name-anon    { flex-wrap: wrap; }
}

@media (max-width: 520px) {
    .sr-lightbox { padding: 12px; }
    .sr-lightbox__close { top: 8px; right: 8px; }
    .sr-lightbox__iframe, .sr-lightbox__video { height: 56vw; }
}