/**
 * AI Review Summary – Frontend Styles
 * Uses CSS custom properties for easy theme overrides.
 */

:root {
    --wtofe-rs-border:       #e5e7eb;
    --wtofe-rs-bg:           #f9fafb;
    --wtofe-rs-radius:       8px;
    --wtofe-rs-title-color:  #111827;
    --wtofe-rs-body-color:   #374151;
    --wtofe-rs-footer-color: #9ca3af;
    --wtofe-rs-icon-color:   #6366f1;
    --wtofe-rs-pros-color:   #065f46;
    --wtofe-rs-cons-color:   #991b1b;
}

/* ── Wrapper ───────────────────────────────────────────────────────────────── */
.wtofe-rs-summary-wrap {
    background: var(--wtofe-rs-bg);
    border: 1px solid var(--wtofe-rs-border);
    border-radius: var(--wtofe-rs-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.65;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.wtofe-rs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.wtofe-rs-icon {
    color: var(--wtofe-rs-icon-color);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wtofe-rs-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wtofe-rs-title-color);
    flex: 1;
}

/* ── Sentiment pill ────────────────────────────────────────────────────────── */
.wtofe-rs-sentiment-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.wtofe-rs-pill--positive { background: #d1fae5; color: #065f46; }
.wtofe-rs-pill--negative { background: #fee2e2; color: #991b1b; }
.wtofe-rs-pill--mixed    { background: #fef3c7; color: #92400e; }
.wtofe-rs-pill--neutral  { background: #e5e7eb; color: #374151; }

/* ── Body text ─────────────────────────────────────────────────────────────── */
.wtofe-rs-body {
    margin: 0 0 16px;
    color: var(--wtofe-rs-body-color);
}

/* ── Pro / Con lists ───────────────────────────────────────────────────────── */
.wtofe-rs-lists {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.wtofe-rs-list-col {
    flex: 1 1 160px;
    min-width: 140px;
}

.wtofe-rs-list-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wtofe-rs-list-label--pros { color: var(--wtofe-rs-pros-color); }
.wtofe-rs-list-label--cons { color: var(--wtofe-rs-cons-color); }

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

.wtofe-rs-list li {
    padding: 3px 0;
    font-size: 13px;
}

.wtofe-rs-list li::before {
    margin-right: 6px;
    font-size: 11px;
}

.wtofe-rs-pros li { color: var(--wtofe-rs-pros-color); }
.wtofe-rs-pros li::before { content: "✓"; color: #10b981; }

.wtofe-rs-cons li { color: var(--wtofe-rs-cons-color); }
.wtofe-rs-cons li::before { content: "!"; color: #ef4444; font-weight: bold; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.wtofe-rs-footer {
    margin: 0;
    font-size: 11px;
    color: var(--wtofe-rs-footer-color);
    border-top: 1px solid var(--wtofe-rs-border);
    padding-top: 10px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .wtofe-rs-summary-wrap {
        padding: 14px 16px;
    }

    .wtofe-rs-lists {
        flex-direction: column;
        gap: 12px;
    }
}