/**
 * assets/css/community-widgets.css
 * Sprint 56: Sverigekarta (varianter), transparens-widget, Wall of Love-CTA,
 * "dela din story"-samtycke. Byggd på samma tokens som variables.css.
 */

/* --- Sverigekarta: två-tre widgets i grid på Vår påverkan --- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
    align-items: start;
}

/* --- Transparens-widget (kompakt variant av breakdown-blocket) --- */
.transparency-widget {
    padding: var(--space-3);
}
.transparency-widget h3 {
    margin-bottom: var(--space-2);
}
.transparency-widget-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: .85rem;
    color: var(--color-accent-soft);
    text-decoration: none;
}
.transparency-widget-link:hover {
    text-decoration: underline;
}

/* --- Wall of Love: "Dela din story"-CTA under kort-carousel --- */
.wall-of-love-cta {
    text-align: center;
    margin-top: var(--space-3);
}

/* --- Dela din story: samtyckesruta --- */
.story-consent-check {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .82rem;
    color: var(--color-text-muted);
    margin: var(--space-1) 0 var(--space-2);
    cursor: pointer;
}
.story-consent-check input[type="checkbox"] {
    margin-top: .2rem;
    flex-shrink: 0;
}

/* --- Activity toast: fyra typer, samma skal men lätt distinkt accent --- */
.social-proof-toast-icon {
    display: inline-block;
    margin-right: .4rem;
}

/* --- Nattsprint P1: Impact Calculator --- */
.impact-calculator {
    padding: var(--space-3);
    text-align: center;
}
.impact-calculator-note {
    font-size: .8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.impact-calculator-slider {
    width: 100%;
    accent-color: var(--color-accent);
    margin-bottom: .6rem;
}
.impact-calculator-readout {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: .4rem;
}
.impact-calculator-result {
    color: var(--color-text-muted);
    min-height: 2.4em;
    margin-bottom: var(--space-2);
}
.impact-calculator-cta {
    display: inline-block;
}

/* --- Nattsprint P1: Complete-the-gap standalone widget (campaign-gap-widget.php) --- */
.campaign-gap-widget {
    padding: var(--space-3);
    text-align: center;
}
.campaign-gap-numbers {
    display: flex;
    justify-content: space-around;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.campaign-gap-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
}
.campaign-gap-value--raised { color: var(--color-accent-soft); }
.campaign-gap-value--remaining { color: #B8720A; }
.campaign-gap-value--done { color: #2E8B57; }
.campaign-gap-label {
    display: block;
    font-size: .75rem;
    color: var(--color-text-muted);
}
.campaign-gap-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--color-surface-border);
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.campaign-gap-bar-fill {
    height: 100%;
    background: var(--gradient-accent);
}
.campaign-gap-cta {
    display: inline-block;
}

/* --- Nattbygge: publik statistik-modul (components/platform-stats.php) --- */
.platform-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
}
.platform-stats-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: var(--space-3) var(--space-2);
    text-align: center;
    border-radius: var(--radius-lg, 16px);
    background: var(--color-surface, rgba(255,255,255,.03));
    border: 1px solid var(--color-surface-border);
    transition: transform .15s ease, border-color .15s ease;
}
.platform-stats-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-soft);
}
.platform-stats-value {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.platform-stats-label {
    font-size: .78rem;
    color: var(--color-text-muted);
}
.platform-stats-note {
    text-align: center;
    font-size: .75rem;
    color: var(--color-text-faint, var(--color-text-muted));
    margin-top: var(--space-2);
}