/* =============================================
   P4N Vendor Reviews — Frontend Styles
   Light + dark palettes. Dark is applied when
   <html> carries .p4n-vr-dark (set by frontend.js
   from FluentCommunity's color mode).
   ============================================= */

.p4n-vr-wrap,
.p4n-vr-modal-overlay {
    --vr-bg:            #ffffff;
    --vr-bg-sunken:     #f0f2f5;
    --vr-bg-raised:     #f0f3f5;
    --vr-bg-hover:      #f0f3f5;
    --vr-bg-input:      #ffffff;
    --vr-text:          #19283a;
    --vr-text-muted:    #525866;
    --vr-text-off:      #959595;
    --vr-border:        #e3e8ee;
    --vr-border-bold:   #9CA3AF;
    --vr-accent:        #2271b1;
    --vr-accent-bg:     #e8f0fe;
    --vr-accent-border: #c5d8f6;
    --vr-btn-bg:        #2B2E33;
    --vr-btn-text:      #ffffff;
    --vr-star:          #f59e0b;
    --vr-star-empty:    #E1E4EA;
    --vr-success:       #16a34a;
    --vr-success-bg:    #f0fdf4;
    --vr-success-border:#bbf7d0;
    --vr-success-text:  #166534;
    --vr-danger:        #dc2626;
    --vr-danger-bg:     #fff5f5;
    --vr-danger-border: #fecaca;
    --vr-action-bg:     #f8f9fa;
    --vr-overlay:       rgba(0,0,0,0.45);
    --vr-radius:        8px;
    --vr-radius-sm:     5px;
    --vr-font:          -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

html.p4n-vr-dark .p4n-vr-wrap,
html.p4n-vr-dark .p4n-vr-modal-overlay {
    --vr-bg:            #1f2329;
    --vr-bg-sunken:     #171a1f;
    --vr-bg-raised:     #262b32;
    --vr-bg-hover:      #2b3139;
    --vr-bg-input:      #171a1f;
    --vr-text:          #e6e9ee;
    --vr-text-muted:    #aab2bd;
    --vr-text-off:      #7c8591;
    --vr-border:        #343a43;
    --vr-border-bold:   #4b535e;
    --vr-accent:        #6aa7ea;
    --vr-accent-bg:     #1d2c3f;
    --vr-accent-border: #2e4766;
    --vr-btn-bg:        #e6e9ee;
    --vr-btn-text:      #1f2329;
    --vr-star:          #f5b23d;
    --vr-star-empty:    #3a4149;
    --vr-success:       #34c26b;
    --vr-success-bg:    #16281d;
    --vr-success-border:#22503a;
    --vr-success-text:  #8fe3b0;
    --vr-danger:        #f26d6d;
    --vr-danger-bg:     #2d1a1a;
    --vr-danger-border: #5a2a2a;
    --vr-action-bg:     #262b32;
    --vr-overlay:       rgba(0,0,0,0.65);
}

/* ---- Base ---- */
.p4n-vr-wrap * { box-sizing: border-box; }

.p4n-vr-wrap {
    font-family: var(--vr-font);
    color: var(--vr-text);
    max-width: 860px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Login gate ---- */
.p4n-vr-login-gate {
    text-align: center;
    padding: 48px 24px;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius);
    background: var(--vr-bg);
    color: var(--vr-text-muted);
}
.p4n-vr-login-gate h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--vr-text);
    font-weight: 600;
}
.p4n-vr-login-gate p { margin: 0 0 20px; }
.p4n-vr-login-gate a.p4n-vr-btn { display: inline-flex; }

.p4n-vr-empty {
    text-align: center;
    color: var(--vr-text-muted);
    padding: 40px;
    font-size: 0.9rem;
}

/* ---- Vendor Single Page ---- */
.p4n-vr-vendor-single-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 0;
}
.p4n-vr-single-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.p4n-vr-single-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--vr-border);
    background: var(--vr-bg);
    padding: 4px;
    flex-shrink: 0;
}
.p4n-vr-single-title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vr-text);
}
.p4n-vr-single-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.p4n-vr-single-avg {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vr-star);
}
.p4n-vr-single-count {
    font-size: 0.85rem;
    color: var(--vr-text-muted);
}
.p4n-vr-single-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.p4n-vr-single-about {
    margin-bottom: 20px;
}

/* ---- Toolbar (global My Reviews) ---- */
.p4n-vr-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.p4n-vr-my-reviews-global {
    background: var(--vr-bg-sunken);
    color: var(--vr-text-muted);
    border: 1px solid var(--vr-border);
    font-size: 0.84rem;
}
.p4n-vr-my-reviews-global:hover { background: var(--vr-bg-raised); opacity: 1; }
.p4n-vr-my-reviews-active {
    background: var(--vr-accent-bg) !important;
    color: var(--vr-accent) !important;
    border-color: var(--vr-accent-border) !important;
}

/* ---- My Review per-vendor button ---- */
.p4n-vr-my-review-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--vr-accent);
    padding: 2px 6px;
    font-family: var(--vr-font);
    font-weight: 600;
    transition: background 0.15s;
    border-radius: 4px;
    width: auto !important;
}
.p4n-vr-my-review-btn:hover { background: var(--vr-bg-hover); }
.p4n-vr-my-review-active {
    background: var(--vr-accent-bg) !important;
    color: var(--vr-accent) !important;
    border-radius: 4px;
}

/* ---- Per-vendor My Review button ---- */
.p4n-vr-my-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--vr-border);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--vr-text-muted);
    cursor: pointer;
    font-family: var(--vr-font);
    transition: all 0.15s;
    width: auto !important;
}
.p4n-vr-my-review-btn:hover { background: var(--vr-bg-hover); border-color: var(--vr-border-bold); }
.p4n-vr-my-review-active {
    background: var(--vr-accent-bg) !important;
    color: var(--vr-accent) !important;
    border-color: var(--vr-accent-border) !important;
}

/* ---- Vendor Row ---- */
.p4n-vr-vendor-row {
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius);
    margin-bottom: 4px;
    background: var(--vr-bg);
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.p4n-vr-vendor-row:hover { border-color: var(--vr-border-bold); }
.p4n-vr-vendor-row.is-open {
    border-color: var(--vr-border-bold);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.p4n-vr-vendor-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    flex-wrap: nowrap;
}
.p4n-vr-vendor-summary:hover { background: var(--vr-bg-hover); }

/* ---- Vendor Logos ---- */
.p4n-vr-vendor-logo-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.p4n-vr-vendor-logo-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--vr-border);
    background: var(--vr-bg);
    padding: 2px;
}
.p4n-vr-vendor-logo-expanded {
    margin-bottom: 12px;
}
.p4n-vr-vendor-logo-lg {
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--vr-border);
    background: var(--vr-bg);
    padding: 4px;
}

.p4n-vr-vendor-name {
    font-size: 0.95rem;
    font-weight: 600;
    flex: 1 1 0;
    min-width: 0;
    color: var(--vr-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p4n-vr-vendor-stars-display {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 130px;
    justify-content: flex-start;
}
.p4n-vr-avg-num {
    font-size: 0.82rem;
    color: var(--vr-text-muted);
    font-weight: 500;
    min-width: 24px;
}
.p4n-vr-review-count {
    font-size: 0.82rem;
    color: var(--vr-text-muted);
    flex-shrink: 0;
    width: 80px;
    text-align: right;
}
.p4n-vr-chevron {
    color: var(--vr-text-off);
    font-size: 0.65rem;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}
.p4n-vr-vendor-row.is-open .p4n-vr-chevron { transform: rotate(180deg); }

/* ---- Stars ---- */
.p4n-vr-stars { display: inline-flex; gap: 1px; line-height: 1; }
.p4n-vr-star { font-size: 0.88rem; }
.p4n-vr-star.full  { color: var(--vr-star); }
.p4n-vr-star.half  { color: var(--vr-star); opacity: 0.55; }
.p4n-vr-star.empty { color: var(--vr-star-empty); }

/* ---- Expanded Panel ---- */
.p4n-vr-vendor-expanded {
    border-top: 1px solid var(--vr-border);
    padding: 0 18px 22px;
    background: var(--vr-bg);
}
.p4n-vr-vendor-meta {
    padding-top: 16px;
    margin-bottom: 18px;
}
.p4n-vr-vendor-desc {
    font-size: 0.88rem;
    color: var(--vr-text-muted);
    line-height: 1.65;
    margin: 0 0 14px;
}
.p4n-vr-vendor-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Rating Summary ---- */
.p4n-vr-rating-summary {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 18px;
    background: var(--vr-bg-sunken);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
    margin-bottom: 20px;
}
.p4n-vr-big-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 72px;
}
.p4n-vr-big-num {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--vr-star);
    line-height: 1;
    letter-spacing: -0.03em;
}
.p4n-vr-big-stars .p4n-vr-star { font-size: 1rem; }
.p4n-vr-big-count {
    font-size: 0.75rem;
    color: var(--vr-text-off);
    margin-top: 2px;
}
.p4n-vr-breakdown { flex: 1; min-width: 180px; }
.p4n-vr-breakdown-row { margin-bottom: 3px; }

.p4n-vr-star-filter-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: var(--vr-radius-sm);
    width: 100%;
    color: var(--vr-text);
    transition: background 0.15s;
    font-family: var(--vr-font);
    box-sizing: border-box;
}
.p4n-vr-star-filter-btn:hover { background: var(--vr-bg-hover); }
.p4n-vr-star-filter-btn.active { background: var(--vr-bg-raised); }

.p4n-vr-bar-label {
    font-size: 0.78rem;
    color: var(--vr-text-muted);
    min-width: 28px;
    text-align: right;
}
.p4n-vr-bar-track {
    flex: 1;
    height: 7px;
    background: var(--vr-star-empty);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
    position: relative;
}
.p4n-vr-bar-fill {
    height: 100%;
    background: var(--vr-star);
    border-radius: 0;
    transition: width 0.35s ease;
    display: block;
    max-width: 100%;
}
.p4n-vr-bar-count {
    font-size: 0.75rem;
    color: var(--vr-text-off);
    min-width: 18px;
    text-align: right;
}
.p4n-vr-show-all {
    font-size: 0.78rem;
    color: var(--vr-accent) !important;
    width: auto !important;
    padding: 2px 6px;
}

/* ---- Action Bar (Write Review + Show My Reviews) ---- */
.p4n-vr-action-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--vr-border);
    align-items: center;
}

/* ---- Review Cards ---- */
.p4n-vr-reviews-list { margin-bottom: 10px; }

.p4n-vr-review-card {
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
    padding: 13px 15px;
    margin-bottom: 7px;
    background: var(--vr-bg);
    transition: border-color 0.15s;
}
.p4n-vr-review-card:hover { border-color: var(--vr-border-bold); }

.p4n-vr-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}
.p4n-vr-reviewer-name {
    font-weight: 600;
    font-size: 0.88rem;
    flex: 1;
    color: var(--vr-text);
}
.p4n-vr-review-meta {
    font-size: 0.75rem;
    color: var(--vr-text-off);
    display: flex;
    gap: 6px;
    align-items: center;
}
.p4n-vr-review-comment {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--vr-text-muted);
    margin-bottom: 8px;
}
.p4n-vr-review-actions { display: flex; gap: 6px; }

.p4n-vr-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--vr-accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--vr-font);
    transition: background 0.15s;
    text-decoration: none;
}
.p4n-vr-action-btn:hover { background: var(--vr-bg-hover); }
.p4n-vr-action-btn.danger { color: var(--vr-danger); }
.p4n-vr-action-btn.danger:hover { background: var(--vr-bg-sunken); }

/* ---- Buttons ---- */
.p4n-vr-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: var(--vr-radius-sm);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
    text-decoration: none;
    font-family: var(--vr-font);
    line-height: 1.4;
}
.p4n-vr-btn:hover { opacity: 0.85; }
.p4n-vr-btn,
.p4n-vr-btn:hover,
.p4n-vr-btn:visited,
.p4n-vr-btn:focus,
.p4n-vr-btn:active { text-decoration: none !important; box-shadow: none !important; }

.p4n-vr-btn-primary {
    background: var(--vr-btn-bg);
    color: var(--vr-btn-text);
    border-color: var(--vr-btn-bg);
}
.p4n-vr-btn-outline {
    background: transparent;
    border-color: var(--vr-border-bold);
    color: var(--vr-text-muted);
}
.p4n-vr-btn-outline:hover { border-color: var(--vr-text-muted); background: var(--vr-bg-hover); opacity: 1; }

.p4n-vr-toggle-form {
    background: var(--vr-bg-sunken);
    color: var(--vr-text);
    border-color: var(--vr-border);
}
.p4n-vr-toggle-form:hover { background: var(--vr-bg-raised); opacity: 1; }

.p4n-vr-load-more-wrap { text-align: center; margin: 10px 0 4px; }
.p4n-vr-load-more {
    background: var(--vr-bg-sunken);
    color: var(--vr-text-muted);
    border-color: var(--vr-border);
}
.p4n-vr-load-more:hover { background: var(--vr-bg-raised); opacity: 1; }

/* ---- Review Form ---- */
.p4n-vr-add-review-wrap {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--vr-border);
}
.p4n-vr-review-form {
    margin-top: 14px;
    padding: 18px;
    background: var(--vr-bg-sunken);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
}
.p4n-vr-review-form h4 {
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vr-text);
}
.p4n-vr-field { margin-bottom: 13px; }
.p4n-vr-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vr-text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.p4n-vr-field input[type="text"],
.p4n-vr-field textarea {
    width: 100%;
    padding: 8px 11px;
    background: var(--vr-bg-input);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
    color: var(--vr-text);
    font-size: 0.875rem;
    font-family: var(--vr-font);
    transition: border-color 0.15s;
    resize: vertical;
    outline: none;
}
.p4n-vr-field input:focus,
.p4n-vr-field textarea:focus { border-color: var(--vr-border-bold); }

.p4n-vr-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.p4n-vr-cancel-form {
    background: transparent;
    color: var(--vr-text-muted);
    border-color: var(--vr-border);
}

.p4n-vr-form-msg {
    margin-top: 10px;
    padding: 8px 11px;
    border-radius: var(--vr-radius-sm);
    font-size: 0.84rem;
    border: 1px solid;
}
.p4n-vr-form-msg.success { color: var(--vr-success); border-color: var(--vr-success); background: var(--vr-bg-sunken); }
.p4n-vr-form-msg.error   { color: var(--vr-danger);  border-color: var(--vr-danger);  background: var(--vr-bg-sunken); }

/* ---- Star Picker ---- */
.p4n-vr-star-picker { display: flex; gap: 2px; margin-bottom: 4px; }
.p4n-vr-star-pick {
    background: none;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 0; /* hide the original ★ character */
    cursor: pointer;
    padding: 0 2px;
    transition: transform 0.12s;
    line-height: 1;
    display: inline-block;
    position: relative;
}
.p4n-vr-star-pick:focus,
.p4n-vr-star-pick:focus-visible,
.p4n-vr-star-pick:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Unselected: outline star ☆ in grey */
.p4n-vr-star-pick::before {
    content: '\2606';
    font-size: 2.6rem;
    color: var(--vr-border-bold);
    display: block;
    line-height: 1;
}
/* Selected / hovered: solid star ★ in gold */
.p4n-vr-star-pick.selected::before,
.p4n-vr-star-pick.hovered::before {
    content: '\2605';
    color: var(--vr-star);
}
.p4n-vr-star-pick:hover { transform: scale(1.15); }
.p4n-vr-star-pick.selected { transform: scale(1.05); }

/* ---- Spinner ---- */
.p4n-vr-loading {
    text-align: center;
    padding: 18px;
    color: var(--vr-text-off);
    font-size: 0.84rem;
}
.p4n-vr-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--vr-border);
    border-top-color: var(--vr-text-muted);
    border-radius: 50%;
    animation: p4n-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}
@keyframes p4n-spin { to { transform: rotate(360deg); } }

/* ---- Login prompt (inside vendor) ---- */
.p4n-vr-login-prompt {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--vr-border);
    color: var(--vr-text-muted);
    font-size: 0.875rem;
}
.p4n-vr-login-prompt a { color: var(--vr-accent); text-decoration: underline; }

/* ---- Modal ---- */
.p4n-vr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.p4n-vr-modal-box {
    background: var(--vr-bg);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius);
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.p4n-vr-modal-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--vr-text-off);
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.p4n-vr-modal-close:hover { background: var(--vr-bg-hover); color: var(--vr-text); }
.p4n-vr-modal-body { padding: 24px; }

/* Modal — review header */
.p4n-vr-modal-review-header {
    margin-bottom: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--vr-border);
}
.p4n-vr-modal-review-header h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vr-text);
}
.p4n-vr-modal-order {
    display: inline-block;
    font-size: 0.76rem;
    color: var(--vr-text-muted);
    background: var(--vr-bg-sunken);
    border: 1px solid var(--vr-border);
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 5px;
}
.p4n-vr-modal-review-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--vr-text-muted);
    margin-bottom: 14px;
}

/* ---- Thread ---- */
.p4n-vr-thread-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vr-text-off);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.p4n-vr-reply {
    padding: 9px 13px;
    border-left: 2px solid var(--vr-border);
    margin-bottom: 7px;
    border-radius: 0 var(--vr-radius-sm) var(--vr-radius-sm) 0;
    background: var(--vr-bg-sunken);
}
.p4n-vr-reply.is-vendor-rep {
    border-left-color: var(--vr-accent);
    background: var(--vr-bg-raised);
}
.p4n-vr-reply.is-admin {
    border-left-color: var(--vr-border-bold);
    background: var(--vr-bg-raised);
}
.p4n-vr-reply-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vr-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.p4n-vr-reply.is-admin .p4n-vr-reply-label { color: var(--vr-text-muted); }
.p4n-vr-reply-author { font-size: 0.82rem; font-weight: 600; color: var(--vr-text); }
.p4n-vr-reply-text   { font-size: 0.86rem; line-height: 1.6; margin: 3px 0; color: var(--vr-text-muted); }
.p4n-vr-reply-date   { font-size: 0.73rem; color: var(--vr-text-off); }

/* Thread actions */
.p4n-vr-thread-actions {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--vr-border);
}
.p4n-vr-reply-form textarea {
    width: 100%;
    padding: 8px 11px;
    background: var(--vr-bg-input);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
    color: var(--vr-text);
    font-size: 0.875rem;
    font-family: var(--vr-font);
    resize: vertical;
    margin-bottom: 8px;
    outline: none;
    transition: border-color 0.15s;
}
.p4n-vr-reply-form textarea:focus { border-color: var(--vr-border-bold); }

.p4n-vr-lock-notice {
    font-size: 0.82rem;
    color: var(--vr-text-off);
    padding: 8px 12px;
    background: var(--vr-bg-sunken);
    border-radius: var(--vr-radius-sm);
    border: 1px solid var(--vr-border);
    margin-top: 8px;
}
.p4n-vr-lock-btn.locked { color: var(--vr-danger); border-color: var(--vr-danger); }

/* ---- Edit form (inline) ---- */
.p4n-vr-edit-form {
    margin-top: 10px;
    padding: 13px;
    background: var(--vr-bg-sunken);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
}
.p4n-vr-edit-form textarea {
    width: 100%;
    padding: 7px 10px;
    background: var(--vr-bg-input);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);
    color: var(--vr-text);
    font-family: var(--vr-font);
    font-size: 0.875rem;
    resize: vertical;
    margin-bottom: 8px;
    outline: none;
}
.p4n-vr-edit-form textarea:focus { border-color: var(--vr-border-bold); }

/* ---- Reply Badge ---- */
.p4n-vr-reply-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--vr-accent);
    background: var(--vr-accent-bg);
    border: 1px solid var(--vr-accent-border);
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: auto;
    flex-shrink: 0;
    font-weight: 500;
    cursor: pointer;
}

/* ---- Admin-only reviewer email ---- */
.p4n-vr-reviewer-email {
    font-size: 0.75rem;
    color: var(--vr-text-off);
    font-weight: 400;
    margin-left: 2px;
}
.p4n-vr-reviewer-email::before { content: '\00AB'; margin-right: 2px; }
.p4n-vr-reviewer-email::after  { content: '\00BB'; margin-left: 2px; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .p4n-vr-vendor-summary { padding: 11px 13px; gap: 8px; }
    .p4n-vr-vendor-expanded { padding: 0 13px 18px; }
    .p4n-vr-rating-summary  { flex-direction: column; gap: 14px; }
    .p4n-vr-modal-body      { padding: 16px; }
    .p4n-vr-review-form     { padding: 14px; }
}

/* ============================================================
   v1.6 — Login / Register modal, success card, highlights
   ============================================================ */
.p4n-vr-auth-box { max-width: 480px; padding: 26px 28px 22px; }
.p4n-vr-auth-head h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: var(--vr-text); }
.p4n-vr-auth-head p { margin: 0 0 16px; font-size: 0.88rem; color: var(--vr-text-muted); line-height: 1.5; }
.p4n-vr-auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vr-border); margin-bottom: 18px; }
.p4n-vr-auth-tab {
    background: none !important; border: none !important; border-bottom: 2px solid transparent !important;
    padding: 8px 14px !important; font-size: 0.9rem !important; font-weight: 600 !important;
    color: var(--vr-text-muted) !important; cursor: pointer; border-radius: 0 !important; box-shadow: none !important;
}
.p4n-vr-auth-tab.active { color: var(--vr-text) !important; border-bottom-color: var(--vr-star) !important; }
.p4n-vr-auth-panel { min-height: 120px; }
.p4n-vr-auth-panel form { margin: 0; }
.p4n-vr-auth-foot { margin: 16px 0 0; font-size: 0.78rem; color: var(--vr-text-muted); text-align: center; line-height: 1.5; }
.p4n-vr-form-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--vr-text-muted); line-height: 1.5; }
.p4n-vr-draft-notice { margin-bottom: 12px; }

.p4n-vr-success-card {
    display: flex; align-items: flex-start; gap: 14px; position: relative;
    background: var(--vr-success-bg) !important; border: 1px solid var(--vr-success-border); border-radius: 10px;
    padding: 18px 44px 18px 18px; margin: 0 0 20px;
}
.p4n-vr-success-check {
    width: 36px; height: 36px; border-radius: 50%; background: var(--vr-success) !important; color: #fff !important;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
}
.p4n-vr-success-body h3 { margin: 4px 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--vr-text); }
.p4n-vr-success-body p { margin: 0 0 6px; font-size: 0.88rem; color: var(--vr-text-muted) !important; line-height: 1.5; }
.p4n-vr-success-welcome { font-weight: 600; color: var(--vr-success-text) !important; }
.p4n-vr-success-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.p4n-vr-success-close {
    position: absolute; top: 8px; right: 8px; background: none !important; border: none !important;
    font-size: 1.3rem; line-height: 1; color: var(--vr-text-muted) !important; cursor: pointer; padding: 4px 8px !important; box-shadow: none !important;
}
.p4n-vr-review-card.p4n-vr-highlight { border-color: var(--vr-star) !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }

@media (max-width: 560px) {
    .p4n-vr-auth-box { padding: 20px 16px; }
    .p4n-vr-success-card { padding: 16px 40px 16px 14px; }
}


/* ============================================================
   Theme enforcement
   FluentCommunity and Elementor apply their own colors to
   generic elements. These rules pin ours, in either mode.
   ============================================================ */
.p4n-vr-wrap,
.p4n-vr-wrap *:not(.p4n-vr-star):not(.p4n-vr-spinner),
.p4n-vr-modal-box,
.p4n-vr-modal-box *:not(.p4n-vr-star) { color: var(--vr-text) !important; }

.p4n-vr-vendor-row,
.p4n-vr-vendor-expanded,
.p4n-vr-modal-box,
.p4n-vr-review-card,
.p4n-vr-edit-form,
.p4n-vr-login-gate { background-color: var(--vr-bg) !important; }

.p4n-vr-review-form,
.p4n-vr-rating-summary,
.p4n-vr-reply,
.p4n-vr-modal-order,
.p4n-vr-lock-notice,
.p4n-vr-vendor-summary:hover,
.p4n-vr-bg-hover { background-color: var(--vr-bg-sunken) !important; }

.p4n-vr-single-header, .p4n-vr-single-nav, .p4n-vr-single-about,
.p4n-vr-action-bar, .p4n-vr-toolbar { background: transparent !important; }

.p4n-vr-vendor-desc,
.p4n-vr-review-comment,
.p4n-vr-reply-text,
.p4n-vr-modal-review-text,
.p4n-vr-text-muted,
.p4n-vr-single-count,
.p4n-vr-review-count,
.p4n-vr-form-note,
.p4n-vr-auth-head p,
.p4n-vr-auth-foot,
.p4n-vr-success-body p { color: var(--vr-text-muted) !important; }

.p4n-vr-review-meta,
.p4n-vr-reply-date,
.p4n-vr-big-count,
.p4n-vr-bar-count,
.p4n-vr-bar-label,
.p4n-vr-chevron,
.p4n-vr-thread-label,
.p4n-vr-text-off,
.p4n-vr-reviewer-email { color: var(--vr-text-off) !important; }

.p4n-vr-single-title, .p4n-vr-vendor-name, .p4n-vr-auth-head h3, .p4n-vr-success-body h3,
.p4n-vr-review-form h4 { color: var(--vr-text) !important; }

.p4n-vr-star.full,
.p4n-vr-big-num,
.p4n-vr-single-avg,
.p4n-vr-avg-num { color: var(--vr-star) !important; }
.p4n-vr-star.empty { color: var(--vr-star-empty) !important; }
.p4n-vr-bar-track { background-color: var(--vr-star-empty) !important; overflow: hidden !important; position: relative !important; }
.p4n-vr-bar-fill  { background-color: var(--vr-star) !important; border-radius: 0 !important; display: block !important; max-width: 100% !important; }

.p4n-vr-reviewer-name { font-weight: 700 !important; color: var(--vr-text) !important; font-size: 0.95rem !important; }
.p4n-vr-review-comment { color: var(--vr-text) !important; font-size: 0.9rem !important; margin: 6px 0 10px !important; }
.p4n-vr-review-actions { border-top: 1px solid var(--vr-border) !important; padding-top: 8px !important; margin-top: 4px !important; }

.p4n-vr-action-btn {
    color: var(--vr-accent) !important; font-size: 0.8rem !important; font-weight: 500 !important;
    padding: 3px 10px !important; border: 1px solid var(--vr-border) !important; border-radius: 4px !important;
    background: var(--vr-action-bg) !important; text-decoration: none !important;
}
.p4n-vr-action-btn:hover { background: var(--vr-accent-bg) !important; border-color: var(--vr-accent) !important; }
.p4n-vr-action-btn.danger { color: var(--vr-danger) !important; border-color: var(--vr-danger-border) !important; background: var(--vr-danger-bg) !important; }
.p4n-vr-action-btn.danger:hover { border-color: var(--vr-danger) !important; }

.p4n-vr-reply-label, .p4n-vr-text-link { color: var(--vr-accent) !important; }
.p4n-vr-reply.is-admin .p4n-vr-reply-label { color: var(--vr-text-muted) !important; }

.p4n-vr-vendor-border, .p4n-vr-vendor-row, .p4n-vr-review-card,
.p4n-vr-reply-form textarea, .p4n-vr-edit-form textarea,
.p4n-vr-field input[type='text'], .p4n-vr-field textarea { border-color: var(--vr-border) !important; }

.p4n-vr-field input[type='text'], .p4n-vr-field textarea,
.p4n-vr-reply-form textarea, .p4n-vr-edit-form textarea {
    background-color: var(--vr-bg-input) !important; color: var(--vr-text) !important;
}
.p4n-vr-field input::placeholder, .p4n-vr-field textarea::placeholder,
.p4n-vr-reply-form textarea::placeholder { color: var(--vr-text-off) !important; opacity: 1; }

.p4n-vr-btn-primary, .p4n-vr-btn-primary:hover, .p4n-vr-btn-primary:focus, .p4n-vr-btn-primary:active, .p4n-vr-btn-primary *,
.p4n-vr-toggle-form, .p4n-vr-load-more, .p4n-vr-cancel-form {
    background-color: var(--vr-bg-sunken) !important; color: var(--vr-text) !important; border-color: var(--vr-border) !important;
}
.p4n-vr-btn-outline { background-color: transparent !important; color: var(--vr-text-muted) !important; border-color: var(--vr-border-bold) !important; }
.p4n-vr-btn-outline:hover { color: var(--vr-text) !important; background-color: var(--vr-bg-hover) !important; }
.p4n-vr-btn, .p4n-vr-btn:hover, .p4n-vr-btn:focus, .p4n-vr-btn:visited, .p4n-vr-btn:active { text-decoration: none !important; box-shadow: none !important; }
.p4n-vr-btn-primary:focus, .p4n-vr-btn-primary:active, .p4n-vr-btn:focus, .p4n-vr-btn:active { outline: none !important; box-shadow: none !important; }

.p4n-vr-form-msg.success { color: var(--vr-success) !important; border-color: var(--vr-success) !important; background-color: var(--vr-bg-sunken) !important; }
.p4n-vr-form-msg.error   { color: var(--vr-danger) !important; border-color: var(--vr-danger) !important; background-color: var(--vr-bg-sunken) !important; }
.p4n-vr-modal-overlay { background: var(--vr-overlay) !important; }

.p4n-vr-star-pick { font-size: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; background: none !important; padding: 0 2px !important; display: inline-block !important; }
.p4n-vr-star-pick::before { font-size: 2.6rem !important; color: var(--vr-border-bold) !important; display: block !important; line-height: 1 !important; }
.p4n-vr-star-pick.selected::before, .p4n-vr-star-pick.hovered::before { color: var(--vr-star) !important; }
.p4n-vr-star-pick:focus, .p4n-vr-star-pick:focus-visible, .p4n-vr-star-pick:active { border: none !important; outline: none !important; box-shadow: none !important; }
.p4n-vr-star-picker { display: flex !important; gap: 2px !important; border: none !important; outline: none !important; }

.p4n-vr-my-reviews-global { background-color: var(--vr-bg) !important; color: var(--vr-text) !important; border: 1px solid var(--vr-border-bold) !important; font-weight: 600 !important; }
.p4n-vr-my-reviews-global:hover { background-color: var(--vr-bg-hover) !important; }
.p4n-vr-my-reviews-active { background-color: var(--vr-accent-bg) !important; color: var(--vr-accent) !important; border-color: var(--vr-accent-border) !important; }
.p4n-vr-my-review-btn { color: var(--vr-accent) !important; background: none !important; border: none !important; }
.p4n-vr-my-review-active { background-color: var(--vr-accent-bg) !important; color: var(--vr-accent) !important; }
.p4n-vr-reply-badge { color: var(--vr-accent) !important; background: var(--vr-accent-bg) !important; border-color: var(--vr-accent-border) !important; }

.p4n-vr-success-card .p4n-vr-success-check { color: #ffffff !important; background: var(--vr-success) !important; }
.p4n-vr-success-card .p4n-vr-success-welcome { color: var(--vr-success-text) !important; }
.p4n-vr-auth-box { background-color: var(--vr-bg) !important; }
.p4n-vr-auth-tab { color: var(--vr-text-muted) !important; }
.p4n-vr-auth-tab.active { color: var(--vr-text) !important; }

/* Forms from other plugins inside the auth modal (FluentForm, FluentAuth) */
.p4n-vr-auth-panel input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
.p4n-vr-auth-panel textarea, .p4n-vr-auth-panel select {
    background-color: var(--vr-bg-input) !important; color: var(--vr-text) !important; border-color: var(--vr-border) !important;
}
.p4n-vr-auth-panel label, .p4n-vr-auth-panel .ff-el-input--label label { color: var(--vr-text) !important; }