/* Gelijkvergelijk Energieprijzen — huisstijl (oranje) */
.gvep {
    --gv-primary: #E8722A;
    --gv-hot: #F0540C;
    --gv-primary-dark: #C85E15;
    --gv-ink: #23272E;
    --gv-muted: #6B7280;
    --gv-bg: #F5F4F2;
    --gv-tint: #FFF3EA;
    --gv-panel: #FFFFFF;
    --gv-line: #ECE9E6;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--gv-ink);
}
.gvep__inner {
    width: 100%;
}
.gvep *, .gvep *::before, .gvep *::after { box-sizing: border-box; }

/* ---------------------------------------------------- bovenbalk */
.gvep__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.gvep__switches { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.gvep__switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gv-ink); cursor: pointer; user-select: none; }
.gvep__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.gvep__slider {
    position: relative; width: 42px; height: 24px; background: #D8D5D1;
    border-radius: 999px; transition: background .18s; flex: none;
}
.gvep__slider::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.gvep__switch input:checked + .gvep__slider { background: var(--gv-primary); }
.gvep__switch input:checked + .gvep__slider::after { transform: translateX(18px); }
.gvep__switch input:focus-visible + .gvep__slider { outline: 2px solid var(--gv-primary-dark); outline-offset: 2px; }

/* ---------------------------------------------------- segmented */
.gvep__seg { display: inline-flex; background: var(--gv-bg); border-radius: 999px; padding: 4px; gap: 2px; }
/* !important zodat een thema met globale knopstijlen dit niet overschrijft */
.gvep .gvep__seg button {
    border: 0 !important; background: transparent !important; color: var(--gv-muted) !important;
    font: inherit !important; font-weight: 600 !important; font-size: 14px !important; padding: 7px 14px !important;
    border-radius: 999px !important; cursor: pointer; line-height: 1 !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: normal !important; transition: background .15s, color .15s;
    margin: 0 !important; width: auto !important; min-height: 0 !important;
}
.gvep .gvep__seg button:hover { color: var(--gv-ink) !important; }
.gvep .gvep__seg button.is-active { background: var(--gv-primary) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(232,114,42,.35) !important; }

/* ---------------------------------------------------- kaartjes */
.gvep__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.gvep__card { border: 1px solid var(--gv-line); border-radius: 16px; padding: 16px 18px; background: var(--gv-panel); }
.gvep__card--now { background: var(--gv-tint); border-color: #F6D9C4; }
.gvep__card--range { background: var(--gv-tint); border-color: #F6D9C4; }
.gvep__card-label { font-size: 13px; font-weight: 600; color: var(--gv-muted); margin-bottom: 6px; }
.gvep__card-value { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--gv-primary-dark); line-height: 1.1; }
.gvep__card--avg .gvep__card-value { color: var(--gv-ink); }
.gvep__card-sub { font-size: 12px; color: var(--gv-muted); margin-top: 4px; }

/* ---------------------------------------------------- paneel */
.gvep__panel {
    background: var(--gv-panel); border: 1px solid var(--gv-line);
    border-radius: 20px; padding: 18px; box-shadow: 0 10px 30px rgba(35,39,46,.06);
    margin-bottom: 16px;
}
.gvep__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--gv-line); }
.gvep__nav { display: inline-flex; align-items: center; gap: 10px; }
.gvep__date { font-weight: 700; font-size: 15px; min-width: 150px; text-align: center; }
.gvep .gvep__arrow {
    width: 36px !important; height: 36px !important; border: 1px solid var(--gv-line) !important; background: #fff !important;
    border-radius: 10px !important; cursor: pointer; font-size: 16px !important; color: var(--gv-ink) !important;
    box-shadow: none !important; padding: 0 !important; min-height: 0 !important; transition: border-color .15s, background .15s;
}
.gvep .gvep__arrow:hover { border-color: var(--gv-primary) !important; background: var(--gv-tint) !important; }

.gvep__chart { position: relative; height: 360px; margin: 16px 0 8px; }
.gvep__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gv-muted); font-weight: 600; padding: 20px; background: var(--gv-panel); }
.gvep__empty[hidden] { display: none !important; }

.gvep__legend { display: inline-flex; align-items: center; gap: 8px; color: var(--gv-muted); font-size: 13px; font-weight: 600; }
.gvep__dot { width: 12px; height: 12px; border-radius: 3px; background: var(--gv-primary); display: inline-block; }
.gvep__dash { width: 18px; height: 0; border-top: 3px dashed var(--gv-ink); display: inline-block; margin-left: 8px; }

/* ---------------------------------------------------- prijsopbouw */
.gvep__buildup-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.gvep__buildup-head span { font-size: 12px; color: var(--gv-muted); }
.gvep__table { width: 100%; border-collapse: collapse; }
.gvep__table td { padding: 12px 4px; border-bottom: 1px solid var(--gv-line); font-size: 15px; }
.gvep__table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.gvep__table-total td { border-bottom: 0; font-weight: 800; font-size: 17px; }
.gvep__table-total td:last-child { color: var(--gv-primary-dark); }
.gvep__disclaimer { margin: 14px 4px 0; font-size: 12px; color: var(--gv-muted); line-height: 1.5; }

@media (max-width: 640px) {
    .gvep__cards { grid-template-columns: 1fr; }
    .gvep__chart { height: 300px; }
    .gvep__seg button { padding: 7px 10px; font-size: 13px; }
    .gvep__card-value { font-size: 26px; }
}