/* ---------------------------------------------------------------------------
 * Enphase keuzehulp - Stralend Groen huisstijl (v1.1.0)
 *
 * Kleuren volgen de thema-instellingen van Flatsome: primair groen #21B500,
 * accent/hover oranje #FF9900, zwarte tekst, knoppen met 5px afronding. Het
 * lettertype (Lato) en de kopkleur erven van het thema - hier bewust geen
 * font-family en geen kleur op de h2.
 * Alles is .en- geprefixt tegen botsingen met Flatsome.
 * ------------------------------------------------------------------------- */

.en-calc { background: #fff; border: 1px solid #e3e3e3; border-top: 4px solid #21b500; border-radius: 6px; padding: 30px; color: #000; font-size: 15px; line-height: 1.6; margin: 0 0 40px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.en-calc * { box-sizing: border-box; }
.en-calc h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; }
.en-calc p { margin: 0 0 10px; }
.en-calc a { color: #21b500; font-weight: 700; text-decoration: none; }
.en-calc a:hover { color: #ff9900; }
.en-lead { color: #444; font-size: 16px; max-width: 75ch; margin-bottom: 22px; }
.en-calc-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.en-fields { display: flex; flex-direction: column; gap: 14px; background: #f5f7f4; border: 1px solid #e6eae4; border-radius: 6px; padding: 20px; }
.en-field { display: flex; flex-direction: column; gap: 5px; }
.en-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #444; }
.en-row { display: flex; gap: 12px; }
.en-row .en-field { flex: 1; min-width: 0; }
.en-seg { display: flex; gap: 6px; }
.en-seg .en-opt { flex: 1; text-align: center; }

/* knoppen: Flatsome-stijl (hoofdletters, 5px), groen als actief */
.en-calc .en-opt,
.en-calc .en-tab { margin: 0; min-height: 0; height: auto; line-height: 1.3; box-shadow: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; border: 1px solid #cfd4cd; background: #fff; color: #333; }
.en-calc .en-opt { padding: 10px 12px; }
.en-calc .en-tab { padding: 10px 18px; }
.en-calc .en-opt:hover,
.en-calc .en-tab:hover { border-color: #21b500; color: #21b500; background: #fff; }
.en-calc .en-opt[aria-pressed="true"],
.en-calc .en-tab[aria-selected="true"],
.en-calc .en-opt[aria-pressed="true"]:hover,
.en-calc .en-tab[aria-selected="true"]:hover { background: #21b500; border-color: #21b500; color: #fff; }
.en-opt:focus-visible,
.en-input:focus-visible,
.en-tab:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; }

.en-calc .en-input { width: 100%; height: auto; min-height: 0; margin: 0; padding: 10px 12px; line-height: 1.4; border: 1px solid #cfd4cd; border-radius: 5px; background: #fff; color: #000; font-family: inherit; font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); }
.en-calc .en-input:focus { border-color: #21b500; box-shadow: 0 0 0 2px rgba(33, 181, 0, .15); }
.en-input::-webkit-outer-spin-button,
.en-input::-webkit-inner-spin-button { opacity: 1; }
/* Flatsome legt selects een vaste hoogte op waardoor de tekst afgeknipt raakt. */
.en-calc select.en-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23444' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
.en-hint { font-size: 13px; line-height: 1.5; color: #666; }
.en-meer { border-top: 1px solid #dfe4dd; padding-top: 12px; }
.en-meer summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #333; list-style: none; }
.en-meer summary::-webkit-details-marker { display: none; }
.en-meer summary::before { content: '+ '; color: #21b500; }
.en-meer[open] summary::before { content: '− '; }
.en-meer[open] summary { margin-bottom: 12px; }
.en-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #444; margin: 12px 0 0; cursor: pointer; font-weight: 400; }
.en-check input { margin: 4px 0 0; flex-shrink: 0; }

/* uitvoer */
.en-out { display: flex; flex-direction: column; gap: 12px; }
.en-out-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid #21b500; padding-bottom: 10px; }
.en-out-head b { font-size: 17px; }
.en-out-head span { font-size: 13px; color: #555; text-align: right; }
.en-res { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 6px; border: 1px solid #e3e3e3; border-left-width: 4px; background: #fff; }
.en-res + .en-res { margin-top: 8px; }
.en-res b { font-size: 18px; }
.en-res-id { display: flex; flex-direction: column; gap: 3px; }
.en-res-status { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.en-res-va { font-size: 12px; color: #666; font-variant-numeric: tabular-nums; }
.en-res p { margin: 0; font-size: 14px; line-height: 1.5; color: #333; }
.en-calc ul.en-punten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.en-calc .en-punten li { margin: 0; padding: 0 0 0 18px; position: relative; font-size: 14px; line-height: 1.5; color: #333; }
.en-punten li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #bbb; }
.en-calc .en-punten li.is-bad { color: #8f0002; }
.en-punten li.is-bad::before { background: #b20002; }
.en-calc .en-punten li.is-warn { color: #7a4a00; }
.en-punten li.is-warn::before { background: #ff9900; }
.en-punten li.is-info::before { background: #21b500; }
.en-res.is-good { border-left-color: #21b500; }
.en-res.is-good .en-res-status { color: #178200; }
.en-res.is-best { border-color: #21b500; background: #f3fbf0; box-shadow: 0 0 0 1px #21b500; }
.en-res.is-best .en-res-status { display: inline-block; align-self: flex-start; background: #21b500; color: #fff; padding: 2px 8px; border-radius: 3px; }
.en-res.is-warn { border-left-color: #ff9900; background: #fffaf0; }
.en-res.is-warn .en-res-status { color: #b36b00; }
.en-res.is-bad { border-left-color: #b20002; background: #fdf6f6; }
.en-res.is-bad .en-res-status { color: #b20002; }
.en-res.is-muted { border-left-color: #bbb; background: #fafafa; }
.en-res.is-muted .en-res-status { color: #777; }
.en-disclaimer { font-size: 13px; line-height: 1.55; color: #666; border-top: 1px solid #e3e3e3; padding-top: 12px; }
.en-warn { margin-top: 20px; padding: 14px 18px; border-radius: 6px; background: #fff6e5; border-left: 4px solid #ff9900; font-size: 14px; line-height: 1.55; color: #000; }
.en-warn p { margin: 0; }

/* tabs */
.en-tabs { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.en-paneel[hidden] { display: none; }

/* winkelregel */
.en-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-size: 13px; }
.en-buy-prijs { font-size: 15px; font-weight: 900; color: #000; font-variant-numeric: tabular-nums; }
.en-buy-totaal { color: #555; font-variant-numeric: tabular-nums; }
.en-buy-stock { font-size: 12px; font-weight: 700; color: #178200; background: #e8f7e3; padding: 3px 9px; border-radius: 3px; }
.en-buy-stock.is-op { color: #666; background: #eee; }
.en-calc .en-buy a { margin-left: auto; background: #21b500; color: #fff; padding: 7px 14px; border-radius: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.en-calc .en-buy a:hover { background: #ff9900; color: #fff; text-decoration: none; }

/* tabblad 2: specificatiekaart */
.en-spec { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid #ececec; }
.en-spec:last-of-type { border-bottom: 0; }
.en-spec-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #555; padding-top: 3px; }
.en-spec b { font-size: 16px; color: #000; }
.en-spec p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #555; }

/* mobiel */
@media (max-width: 849px) {
  .en-calc { padding: 20px 16px; }
  .en-calc h2 { font-size: 22px; }
  .en-calc-grid,
  .en-spec { grid-template-columns: 1fr; }
  .en-fields { padding: 16px; }
  .en-res { grid-template-columns: 1fr; gap: 8px; }
  .en-res-id { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .en-out-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .en-out-head span { text-align: left; }
  .en-calc .en-buy a { margin-left: 0; }
}

/* paneel uit ons assortiment (v1.2.0) */
.en-kies[hidden] { display: none; }
.en-kies { padding-bottom: 14px; border-bottom: 1px solid #dfe4dd; }
.en-calc .en-pan-titel { margin: 18px 0 10px; padding-top: 16px; border-top: 2px solid #21b500; font-size: 17px; line-height: 1.3; }
.en-pan { padding: 12px 14px; border: 1px solid #e3e3e3; border-left: 4px solid #21b500; border-radius: 6px; background: #fff; }
.en-pan + .en-pan { margin-top: 8px; }
.en-pan-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.en-pan-kop b { font-size: 15px; }
.en-pan p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #444; }
.en-pan.is-good .en-res-status { color: #178200; }
.en-pan.is-warn { border-left-color: #ff9900; background: #fffaf0; }
.en-pan.is-warn .en-res-status { color: #b36b00; }
.en-pan.is-bad { border-left-color: #b20002; background: #fdf6f6; }
.en-pan.is-bad .en-res-status { color: #b20002; }
.en-pan.is-muted { border-left-color: #bbb; background: #fafafa; }
.en-pan-niet { margin-top: 14px; }
.en-pan-niet .en-pan:first-of-type { margin-top: 0; }

/* wat heb je verder nodig? (v1.3.0) */
.en-nodig[hidden] { display: none; }
.en-nodig { margin-top: 26px; padding: 22px; border: 1px solid #ffd699; border-left: 4px solid #ff9900; border-radius: 6px; background: #fffaf0; }
.en-nodig-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.en-calc .en-nodig-kop h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.en-nodig-kop p { margin: 0; color: #444; max-width: 65ch; }
.en-nodig-kop .en-field { flex: 0 0 230px; }
.en-nd { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 12px 14px; background: #fff; border: 1px solid #ece4d3; border-radius: 6px; }
.en-nd + .en-nd { margin-top: 6px; }
.en-nd.is-optie { background: transparent; border-style: dashed; }
.en-nd-aantal { font-size: 16px; font-weight: 900; color: #178200; font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-nd.is-optie .en-nd-aantal { color: #777; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.en-nd-tekst b { font-size: 15px; }
.en-nd-tekst p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #444; }
.en-nd-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; font-size: 13px; }
.en-calc .en-nd-links a.is-alt { color: #444; font-weight: 400; text-decoration: underline; }
.en-calc .en-nd-links a.is-alt:hover { color: #ff9900; }
.en-nd-prijs { font-size: 15px; font-weight: 900; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.en-nd-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 12px; padding: 14px; background: #21b500; color: #fff; border-radius: 6px; }
.en-nd-totaal span { font-size: 13px; line-height: 1.4; }
.en-nd-totaal b { font-size: 20px; white-space: nowrap; }
.en-calc .en-nd-noot { margin: 10px 0 0; font-size: 13px; color: #555; }
@media (max-width: 849px) {
  .en-nodig { padding: 16px; }
  .en-nodig-kop { flex-direction: column; }
  .en-nodig-kop .en-field { flex: none; width: 100%; }
  .en-nd { grid-template-columns: 48px 1fr; }
  .en-nd-prijs { grid-column: 2; text-align: left; }
}

.en-nd-aantal { min-width: 0; }
.en-nd .en-nd-aantal { white-space: normal; }

/* toegankelijker presentatie (v1.6.0): kernzin, statuslabels, berekening ingeklapt */
.en-calc .en-kern { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: #000; font-weight: 700; }
.en-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.en-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid #dfe4dd; border-radius: 14px; background: #fff; font-size: 12px; line-height: 1.5; color: #444; white-space: nowrap; }
.en-chip b { font-size: 12px; color: #000; }
.en-chip i { width: 8px; height: 8px; border-radius: 50%; background: #bbb; flex-shrink: 0; }
.en-chip.is-good i { background: #21b500; }
.en-chip.is-warn i { background: #ff9900; }
.en-chip.is-warn { border-color: #ffd699; }
.en-chip.is-bad i { background: #b20002; }
.en-chip.is-bad { border-color: #e9b8b8; }
.en-calc .en-groep { margin: 0; font-size: 13px; color: #555; }
.en-calc .en-detail { border-top: 0; padding-top: 0; margin-top: 10px; }
.en-calc .en-detail summary { font-weight: 400; color: #555; text-decoration: underline; }
.en-calc .en-detail[open] summary { margin-bottom: 8px; }
.en-calc .en-uitleg { margin-top: 4px; }
.en-calc .en-uitleg p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #333; }
.en-calc h4.en-nd-sectie { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a4a00; }
.en-calc h4.en-nd-sectie:first-child { margin-top: 0; }
.en-nd-meer { margin-top: 4px; }
.en-nd-meer summary { cursor: pointer; font-size: 12px; color: #555; text-decoration: underline; list-style: none; }
.en-nd-meer summary::-webkit-details-marker { display: none; }
.en-nd-meer[open] summary { margin-bottom: 4px; }
.en-nd-knop { margin-top: 6px; }
.en-calc .en-nd-knop a { display: inline-block; background: #21b500; color: #fff; padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.en-calc .en-nd-knop a:hover { background: #ff9900; color: #fff; }
.en-nd .en-buy-stock { margin-left: 6px; }
@media (max-width: 849px) {
  .en-chip { white-space: normal; }
}

.en-calc .en-bron { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed #dfe4dd; font-size: 12px; line-height: 1.5; color: #666; }