/* ==========================================================================
   SRG Display List & Schema Review System — Consolidated v5.0 Final (July 2026)
   - Exclusively manages comparison lists ([display_item_list]) and single reviews ([srg_single_review]).
   - Clean White Card standard: 0.5px solid #ECE7F8 borders & 10px rounded corners [5].
   - All action buttons are unified with brand Violet-600 outlines (#7C3AED) [3, 5].
   ========================================================================== */

/* ============================================================
   1. CORE CONTAINER LAYOUTS
   ============================================================ */
.srg-il-wrap *, .srg-il-wrap *::before, .srg-il-wrap *::after,
.srgr-box *, .srgr-box *::before, .srgr-box *::after {
    box-sizing: border-box;
}

.srg-il-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter', sans-serif;
}
.srg-il-wrap > h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--srg-neutral-900, #0F172A);
    margin: 0 0 8px 0;
}

/* ============================================================
   2. SHESELLS: UNIFIED SCHEMA CARDS (Comparison & Single Reviews)
   - Locked locally to Software Blue (#2563EB) for inner indicators [3].
   - Unified card structures with #ECE7F8 borders and 10px radius [5].
   ============================================================ */
.srg-software-base-card.srg-il-card {
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.srg-software-base-card.srg-il-card:hover {
    transform: translateY(-4px);
}
html.srg-dark .srg-software-base-card.srg-il-card {
    background: #0F172A;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
html.srg-dark .srg-software-base-card.srg-il-card:hover {
    background: #0b0f19;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.srgr-box {
    --srg-context-accent:     #2563EB !important;
    --srg-context-accent-rgb: 37, 99, 235 !important;
    width: 100%;
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(9, 14, 26, 0.05), 0 1px 2px rgba(9, 14, 26, 0.03) !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
    cursor: default;
}

.srgr-box:hover {
    transform: translateY(-4px) !important;
    background: #FBFAFD !important;
    box-shadow: 0 4px 12px rgba(9, 14, 26, 0.06) !important;
}

html.srg-dark .srgr-box {
    background: #0F172A !important;
    border-color: rgba(124, 58, 237, 0.12) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}
html.srg-dark .srgr-box:hover {
    background: #0b0f19 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   3. INTERNAL COMPONENTS & LOGOS (Universal Flat 60px)
   ============================================================ */
.srgr-logo-wrap {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srgr-logo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

html.srg-dark .srgr-logo-wrap {
    background: transparent !important;
    border: none !important;
}

.srgr-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0;
    margin-bottom: 20px;
}

.srgr-title-wrap { flex: 1; min-width: 0; }

.srgr-title-wrap h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--srg-neutral-900, #0F172A) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25;
    letter-spacing: -0.3px;
}
html.srg-dark .srgr-title-wrap h3 {
    color: var(--srg-neutral-50, #F8FAFC) !important;
}

.srgr-meta { display: flex; align-items: center; gap: 8px; }
.srgr-stars { display: flex; gap: 3px; line-height: 1; }
.srgr-star { font-size: 1.15rem; }

.srgr-star.full, .srgr-star.half { color: #F59E0B !important; }
.srgr-star.empty { color: var(--srg-neutral-300, #CBD5E1); }

.srgr-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--srg-neutral-600, #475569) !important;
}
html.srg-dark .srgr-score {
    color: var(--srg-neutral-400, #94A3B8) !important;
}

/* ============================================================
   4. CARD BODIES, PULL-QUOTES & PROS/CONS
   ============================================================ */
.srg-software-base-body-full {
    padding: 0 20px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.srg-il-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}
html.srg-dark .srg-il-desc {
    color: #cbd5e1;
}

.srgr-summary {
    background: color-mix(in srgb, var(--srg-context-accent) 4%, transparent) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--srg-neutral-600, #475569) !important;
    margin: 0 0 24px 0;
    font-style: normal;
}

.srg-il-review {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    font-style: italic;
}
.srg-il-review svg {
    color: #7C3AED;
    stroke: #7C3AED;
}

html.srg-dark .srgr-summary {
    background: color-mix(in srgb, var(--srg-context-accent) 4%, #04020a) !important;
    color: var(--srg-neutral-300, #cbd5e1) !important;
}
html.srg-dark .srg-il-review {
    background: transparent;
    color: #cbd5e1;
}

.srgr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.srgr-col { border-radius: 10px; padding: 18px 20px; }

.srgr-col.srgr-pros {
    background: color-mix(in srgb, var(--srg-success, #10B981) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--srg-success, #10B981) 12%, transparent) !important;
}
.srgr-col.srgr-cons {
    background: color-mix(in srgb, #EF4444 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, #EF4444 12%, transparent) !important;
}

.srgr-col h4 {
    margin: 0 0 14px 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.srgr-pros h4 { color: #166534 !important; }
.srgr-cons h4 { color: #991B1B !important; }

.srgr-head-icon { width: 22px !important; height: 22px !important; flex-shrink: 0; }

.srgr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.srgr-col li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.95rem; line-height: 1.5; }
.srgr-pros li { color: #166534 !important; }
.srgr-cons li { color: #991B1B !important; }

.srgr-li-icon { flex-shrink: 0; margin-top: 2px; width: 14px !important; height: 14px !important; }

html.srg-dark .srgr-col.srgr-pros {
    background: color-mix(in srgb, #10B981 5%, #020617) !important;
    border-color: color-mix(in srgb, #10B981 15%, transparent) !important;
}
html.srg-dark .srgr-pros h4, html.srg-dark .srgr-pros li { color: #4ade80 !important; }

html.srg-dark .srgr-col.srgr-cons {
    background: color-mix(in srgb, #EF4444 5%, #020617) !important;
    border-color: color-mix(in srgb, #EF4444 15%, transparent) !important;
}
html.srg-dark .srgr-cons h4, html.srg-dark .srgr-cons li { color: #f87171 !important; }

/* ── Verdict Box ── */
.srgr-verdict {
    background: color-mix(in srgb, var(--srg-context-accent) 4%, transparent) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--srg-neutral-600, #475569) !important;
    margin-top: 0 !important;
}
html.srg-dark .srgr-verdict {
    background: color-mix(in srgb, var(--srg-context-accent) 4%, #04020a) !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   5. FOOTER ARCHITECTURE & DYNAMIC SHIFT BUTTONS
   ============================================================ */
.srgr-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 28px 24px 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: none !important;
    margin-top: 4px;
    padding-top: 25px;
}

.srgr-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: 100% !important;
    padding: 11px 20px !important;
    min-height: 44px;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all var(--srg-transition-fast, 150ms) !important;
    
    color: var(--srg-brand-600, #7C3AED) !important;
    border: 1.5px solid rgba(124, 58, 237, 0.15) !important;
    background: var(--srg-bg-primary, #ffffff) !important;
    box-shadow: none !important;
}

.srgr-box:hover .srgr-btn {
    background: var(--srg-brand-600, #7C3AED) !important;
    border-color: var(--srg-brand-600, #7C3AED) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2) !important;
    transform: translateY(-2px) !important;
}

.srgr-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

html.srg-dark .srgr-btn {
    background: var(--srg-neutral-900, #0F172A) !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
    color: var(--srg-neutral-200, #e2e8f0) !important;
}
html.srg-dark .srgr-box:hover .srgr-btn {
    background: var(--srg-brand-600, #7C3AED) !important;
    border-color: var(--srg-brand-600, #7C3AED) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.srgr-price-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.srgr-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--srg-context-accent-text, #2563EB) !important;
    white-space: nowrap;
    line-height: 1;
    transition: none !important;
    cursor: default;
}
.srgr-toggle-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.srgr-toggle-btn.free, .srgr-toggle-btn.srgr-badge-free {
    background: transparent !important;
    color: var(--srg-context-accent-text, #2563EB) !important;
}
.srgr-toggle-btn.free svg, .srgr-toggle-btn.srgr-badge-free svg {
    stroke: #2563EB !important;
}

.srgr-toggle-btn.paid, .srgr-toggle-btn.srgr-badge-paid {
    background: transparent !important;
    color: var(--srg-context-accent-text, #2563EB) !important;
}
.srgr-toggle-btn.paid svg, .srgr-toggle-btn.srgr-badge-paid svg {
    stroke: #7C3AED !important;
}

.srgr-toggle-btn.pro, .srgr-toggle-btn.srgr-badge-pro {
    background: transparent !important;
    color: var(--srg-context-accent-text, #2563EB) !important;
}
.srgr-toggle-btn.pro svg, .srgr-toggle-btn.srgr-badge-pro svg {
    stroke: #4338CA !important;
}

html.srg-dark .srgr-toggle-btn.free, html.srg-dark .srgr-toggle-btn.srgr-badge-free {
    background: transparent !important;
    color: var(--srg-context-accent) !important;
}
html.srg-dark .srgr-toggle-btn.free svg, html.srg-dark .srgr-toggle-btn.srgr-badge-free svg {
    stroke: var(--srg-context-accent) !important;
}
html.srg-dark .srgr-toggle-btn.paid, html.srg-dark .srgr-toggle-btn.srgr-badge-paid {
    background: transparent !important;
    color: var(--srg-context-accent) !important;
}
html.srg-dark .srgr-toggle-btn.paid svg, html.srg-dark .srgr-toggle-btn.srgr-badge-paid svg {
    stroke: var(--srg-context-accent) !important;
}
html.srg-dark .srgr-toggle-btn.pro, html.srg-dark .srgr-toggle-btn.srgr-badge-pro {
    background: transparent !important;
    color: var(--srg-context-accent) !important;
}
html.srg-dark .srgr-toggle-btn.pro svg, html.srg-dark .srgr-toggle-btn.srgr-badge-pro svg {
    stroke: var(--srg-context-accent) !important;
}

.srgr-toggle-btn:hover, .srgr-toggle-btn.is-active {
    filter: none !important;
    transform: none !important;
}

/* ============================================================
   6. RESPONSIVE ADAPTATIONS
   ============================================================ */
@media (max-width: 640px) {
    .srgr-header { padding: 20px 20px 16px; flex-wrap: wrap; }
    .srgr-logo-wrap { flex: 0 0 60px; width: 60px; height: 60px; }
    .srgr-title-wrap h3 { font-size: 18px !important; }
    .srgr-box:hover { transform: none !important; }
    .srgr-cta { flex-direction: column !important; align-items: stretch !important; gap: 15px !important; }
    .srgr-btn { width: 100% !important; justify-content: center !important; }
    .srgr-price-toggles { justify-content: center !important; width: 100% !important; }
    .srgr-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Stack unified footers vertically on mobile */
    .srg-tool-card.srg-software-recommendation .srg-software-base-footer,
    .srg-il-card .srg-software-base-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px 16px 16px 16px !important;
    }
    /* Align pricing badges to the left/top */
    .srg-tool-card.srg-software-recommendation .srg-price-badges-wrap,
    .srg-il-card .srg-price-badges-wrap {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    /* Force action buttons to span full width */
    .srg-tool-card.srg-software-recommendation .srg-software-base-action,
    .srg-tool-card.srg-software-recommendation .srg-software-base-btn,
    .srg-il-card .srg-software-base-action,
    .srg-il-card .srg-software-base-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
 SYSTEM PREFERENCE DARK MODE MIRROR (prefers-color-scheme: dark)
 ============================================================ */
@media (prefers-color-scheme: dark) {
    html:not(.srg-light) .srg-software-base-card.srg-il-card {
        background: #0F172A;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
    html:not(.srg-light) .srg-software-base-card.srg-il-card:hover {
        background: #0b0f19;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    html:not(.srg-light) .srgr-box {
        background: #0F172A !important;
        border-color: rgba(124, 58, 237, 0.12) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    }
    html:not(.srg-light) .srgr-box:hover {
        background: #0b0f19 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }
    html:not(.srg-light) .srgr-logo-wrap {
        background: transparent !important;
        border: none !important;
    }
    html:not(.srg-light) .srgr-title-wrap h3 {
        color: var(--srg-neutral-50, #F8FAFC) !important;
    }
    html:not(.srg-light) .srgr-score {
        color: var(--srg-neutral-400, #94A3B8) !important;
    }
    html:not(.srg-light) .srg-il-desc {
        color: #cbd5e1;
    }
    html:not(.srg-light) .srgr-summary {
        background: color-mix(in srgb, var(--srg-context-accent) 4%, #04020a) !important;
        color: var(--srg-neutral-300, #cbd5e1) !important;
    }
    html:not(.srg-light) .srg-il-review {
        background: transparent;
        color: #cbd5e1;
    }
    html:not(.srg-light) .srgr-col.srgr-pros {
        background: color-mix(in srgb, #10B981 5%, #020617) !important;
        border-color: color-mix(in srgb, #10B981 15%, transparent) !important;
    }
    html:not(.srg-light) .srgr-pros h4, html:not(.srg-light) .srgr-pros li { color: #4ade80 !important; }
    html:not(.srg-light) .srgr-col.srgr-cons {
        background: color-mix(in srgb, #EF4444 5%, #020617) !important;
        border-color: color-mix(in srgb, #EF4444 15%, transparent) !important;
    }
    html:not(.srg-light) .srgr-cons h4, html:not(.srg-light) .srgr-cons li { color: #f87171 !important; }
    html:not(.srg-light) .srgr-verdict {
        background: color-mix(in srgb, var(--srg-context-accent) 4%, #04020a) !important;
        color: #cbd5e1 !important;
    }
    html:not(.srg-light) .srgr-btn {
        background: var(--srg-neutral-900, #0F172A) !important;
        border-color: rgba(124, 58, 237, 0.18) !important;
        color: var(--srg-neutral-200, #e2e8f0) !important;
    }
    html:not(.srg-light) .srgr-box:hover .srgr-btn {
        background: var(--srg-brand-600, #7C3AED) !important;
        border-color: var(--srg-brand-600, #7C3AED) !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
    }
    html:not(.srg-light) .srgr-toggle-btn.free, html:not(.srg-light) .srgr-toggle-btn.srgr-badge-free {
        background: transparent !important;
        color: var(--srg-context-accent) !important;
    }
    html:not(.srg-light) .srgr-toggle-btn.free svg, html:not(.srg-light) .srgr-toggle-btn.srgr-badge-free svg {
        stroke: var(--srg-context-accent) !important;
    }
    html:not(.srg-light) .srgr-toggle-btn.paid, html:not(.srg-light) .srgr-toggle-btn.srgr-badge-paid {
        background: transparent !important;
        color: var(--srg-context-accent) !important;
    }
    html:not(.srg-light) .srgr-toggle-btn.paid svg, html:not(.srg-light) .srgr-toggle-btn.srgr-badge-paid svg {
        stroke: var(--srg-context-accent) !important;
    }
    html:not(.srg-light) .srgr-toggle-btn.pro, html:not(.srg-light) .srgr-toggle-btn.srgr-badge-pro {
        background: transparent !important;
        color: var(--srg-context-accent) !important;
    }
    html:not(.srg-light) .srgr-toggle-btn.pro svg, html:not(.srg-light) .srgr-toggle-btn.srgr-badge-pro svg {
        stroke: var(--srg-context-accent) !important;
    }
}