/**
 * Morpheus ActiveCampaign Monitor – Frontend Shortcode Styling
 *
 * Minimale styling, ontworpen om goed samen te werken met elk thema.
 * Alle classes beginnen met .macm-counter- om conflicten te voorkomen.
 *
 * @package MorpheusAcm
 */

/* ===== Basis counter (inline element) ===== */
.macm-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.macm-counter-getal {
    font-variant-numeric: tabular-nums;
}

/* ===== Stijl: standaard ===== */
.macm-counter-standaard .macm-counter-getal {
    font-weight: 700;
}

.macm-counter-standaard .macm-counter-label {
    font-weight: 400;
}

/* ===== Stijl: badge ===== */
.macm-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.8em;
    border-radius: 2em;
    background: #f0f7f0;
    color: #1a7a1a;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.4;
}

.macm-counter-badge.macm-counter-vol {
    background: #fef0f0;
    color: #c0392b;
}

.macm-counter-badge .macm-counter-getal {
    font-size: 1.1em;
    font-weight: 800;
}

/* ===== Stijl: minimaal ===== */
.macm-counter-minimaal {
    display: inline;
}

.macm-counter-minimaal .macm-counter-label,
.macm-counter-minimaal .macm-counter-getal,
.macm-counter-minimaal .macm-counter-tekst {
    /* Erft alles van het omringende element */
    font: inherit;
    color: inherit;
}

.macm-counter-minimaal .macm-counter-getal {
    font-weight: 700;
}

/* ===== Vol-status ===== */
.macm-counter-vol .macm-counter-tekst {
    font-weight: 600;
}