/* MOVEZE TCO Pro — licht, hoog contrast. !important waar nodig om donker thema te overrulen (les uit FASE 3.1 contrastfouten). */

.mtcp { max-width: 1200px; margin: 0 auto; padding: 32px 20px;
	background: #ffffff !important; color: #143A4A !important; border-radius: 20px; }
.mtcp * { color: #143A4A; }
.mtcp__header h2 { font-size: 26px; margin: 0 0 8px; color: #143A4A !important; }
.mtcp__header p { color: #143A4A !important; font-size: 15px; max-width: 640px; }

.mtcp__grid { display: grid; grid-template-columns: 380px 1fr; gap: 40px; margin-top: 28px; }
@media (max-width: 900px) { .mtcp__grid { grid-template-columns: 1fr; } }

/* INVOER */
.mtcp__inputs h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
	color: #6F9DB8 !important; margin: 24px 0 10px; }
.mtcp__inputs h3:first-child { margin-top: 0; }
.mtcp__inputs label { display: block; font-size: 13px; color: #143A4A !important; margin-bottom: 12px; }
.mtcp__inputs input[type="number"], .mtcp__inputs select {
	display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
	border: 1px solid #DCEAF1; border-radius: 8px; font-size: 14px;
	background: #ffffff !important; color: #143A4A !important; }
.mtcp__inputs input[type="range"] { width: 80%; vertical-align: middle; }
.mtcp__inputs output { font-size: 13px; font-weight: 600; margin-left: 8px; }

/* BALKEN — de transition zorgt voor het live "opschuiven" */
.mtcp__results h3 { font-size: 18px; margin: 0 0 16px; }
.mtcp__bar-row { display: grid; grid-template-columns: 170px 1fr 110px; gap: 12px;
	align-items: center; margin-bottom: 14px; }
.mtcp__bar-label { font-size: 14px; font-weight: 500; }
.mtcp__bar-track { background: #F7F9F8; border-radius: 8px; height: 30px; overflow: hidden; }
.mtcp__bar { height: 100%; border-radius: 8px; width: 0;
	transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.mtcp__bar--diesel { background: #6F9DB8; }
.mtcp__bar--hvo100 { background: #8FB8A8; }
.mtcp__bar--lng { background: #A8ACC0; }
.mtcp__bar--h2ice { background: #6F9DB8; }
.mtcp__bar--fcev { background: #3F8F83; }
.mtcp__bar--bev { background: #F2C94C; }
.mtcp__bar-value { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mtcp__bar-row--best .mtcp__bar-label::after { content: " ✓ voordeligst"; color: #F2C94C; font-size: 12px; font-weight: 600; }

/* PER KM */
.mtcp__perkm { margin: 28px 0; padding: 16px 20px; background: #F7F9F8; border-radius: 12px; }
.mtcp__perkm h4 { margin: 0 0 8px; font-size: 14px; }
.mtcp__pk { display: inline-block; margin-right: 20px; font-size: 13px; color: #143A4A !important; }

/* UITSPLITSING */
.mtcp__breakdown h4 { font-size: 15px; margin: 0 0 8px; }
.mtcp__breakdown table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mtcp__breakdown td { padding: 7px 0; border-bottom: 1px solid #DCEAF1; }
.mtcp__breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.mtcp__row-total td { font-weight: 700; border-top: 2px solid #143A4A; }
.mtcp__row-diff td { color: #F2C94C !important; font-weight: 600; }

.mtcp__note { font-size: 12px; color: #6F9DB8 !important; margin-top: 20px; }
.mtcp__cta { display: inline-block; margin-top: 8px; padding: 12px 22px;
	background: #143A4A; color: #ffffff !important; border-radius: 10px;
	font-weight: 600; text-decoration: none; font-size: 14px; }