/* MJV Energieprijzen — frontend v1.1 (modern). */
.mjv-ep {
	--ep-accent:#0e8a5f; --ep-bar:#1aa564; --ep-bar-now:#0b6b44; --ep-bar-soft:#cfeadd;
	--ep-ink:#15181d; --ep-soft:#5c6570; --ep-faint:#8b939c; --ep-line:#eceef0; --ep-seg:#f2f4f5;
	margin: 1.5rem 0; color: var(--ep-ink); font-variant-numeric: tabular-nums;
}
.mjv-ep h2 { margin: 2.25rem 0 1rem; font-size: 1.3rem; }

/* Bovenbalk: tabs · datumnav · periodes */
.mjv-ep-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; margin-bottom:1rem; }
.mjv-ep-seg { display:inline-flex; gap:2px; background:var(--ep-seg); border-radius:999px; padding:3px; }
.mjv-ep-seg button { border:none; background:none; cursor:pointer; font:inherit; font-size:.9rem; font-weight:600; padding:.5rem .95rem; border-radius:999px; color:var(--ep-soft); line-height:1; transition:background .15s,color .15s,box-shadow .15s; }
.mjv-ep-seg button:hover { color:var(--ep-ink); }
.mjv-ep-seg button.is-active { background:#fff; color:var(--ep-ink); box-shadow:0 1px 3px rgba(20,24,29,.12); }
.mjv-ep-tabs button.is-active { color:var(--ep-accent); }

.mjv-ep-datenav { display:inline-flex; align-items:center; gap:.5rem; }
.mjv-ep-nav { width:34px; height:34px; border-radius:50%; border:1px solid var(--ep-line); background:#fff; cursor:pointer; font-size:1.2rem; line-height:1; color:var(--ep-soft); display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s,color .15s; }
.mjv-ep-nav:hover { border-color:var(--ep-accent); color:var(--ep-accent); }
.mjv-ep-datelabel { font-weight:700; font-size:1rem; min-width:9.5rem; text-align:center; }

/* Grafiekkaart */
.mjv-ep-chartwrap { position:relative; border:1px solid var(--ep-line); border-radius:18px; padding:1.25rem 1.25rem 1rem; box-shadow:0 1px 2px rgba(20,24,29,.04); }
.mjv-ep-canvas { display:block; width:100%; }
.mjv-ep-skeleton { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ep-faint); font-size:.95rem; }
.mjv-ep-error { color:#b23b3b; font-size:.92rem; text-align:center; padding:2rem 0; }
.mjv-ep-link { background:none; border:none; color:var(--ep-accent); cursor:pointer; text-decoration:underline; font:inherit; }
.mjv-ep-chartfoot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--ep-line); }
.mjv-ep-meta { font-size:.85rem; color:var(--ep-soft); }
.mjv-ep-tooltip { position:absolute; pointer-events:none; background:var(--ep-ink); color:#fff; font-size:.8rem; line-height:1.4; padding:.45rem .6rem; border-radius:8px; white-space:nowrap; z-index:5; box-shadow:0 6px 18px rgba(0,0,0,.18); transform:translateY(-2px); }

/* Kaarten */
.mjv-ep-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.mjv-ep-cards--4 { grid-template-columns:repeat(4,1fr); }
.mjv-ep-card { border:1px solid var(--ep-line); border-radius:16px; padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.3rem; background:#fff; box-shadow:0 1px 2px rgba(20,24,29,.04); }
.mjv-ep-card__label { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ep-faint); font-weight:700; }
.mjv-ep-card__val { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; color:var(--ep-ink); }
.mjv-ep-card__unit { font-size:.8rem; color:var(--ep-faint); }
.mjv-ep-card__delta { font-size:.85rem; font-weight:600; }
.mjv-ep-card__delta .is-up, .mjv-ep-tooltip .is-up { color:#c0392b; }
.mjv-ep-card__delta .is-down { color:var(--ep-accent); }
.mjv-ep-note { font-size:.82rem; color:var(--ep-faint); margin:.7rem 0 0; }

/* FAQ */
.mjv-ep-faq details { border-bottom:1px solid var(--ep-line); }
.mjv-ep-faq summary { cursor:pointer; font-weight:600; padding:.95rem 0; list-style:none; }
.mjv-ep-faq summary::-webkit-details-marker { display:none; }
.mjv-ep-faq summary + div { padding:0 0 .95rem; color:var(--ep-soft); }

/* Groene header-knop */
.mjv-ep-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; border-radius:999px; text-decoration:none; font-weight:700; font-size:.9rem; line-height:1; background:#0e8a5f; color:#fff !important; border:1px solid #0e8a5f; white-space:nowrap; transition:background .15s,transform .15s; }
.mjv-ep-btn:hover { background:#0a6b49; transform:translateY(-1px); }
.mjv-ep-btn__ico { font-size:.95em; }
.mjv-ep-btn__arrow { font-size:.75em; opacity:.9; }
.mjv-ep-menuitem { display:flex; align-items:center; list-style:none; }
.mjv-ep-menuitem a { text-decoration:none; }

@media (max-width:720px){
	.mjv-ep-bar { justify-content:center; }
	.mjv-ep-datenav { order:3; width:100%; justify-content:center; }
	.mjv-ep-cards, .mjv-ep-cards--4 { grid-template-columns:1fr 1fr; }
}