/* Zwangerschapscalculator in de stijl van het Ceris-thema: Merriweather, Roboto, accent #00a6b2. */
.twco-zc { font-family: Roboto, Arial, sans-serif; color: #2b2b2b; background: #f8e1e3; padding: 28px; margin: 28px 0; }
.twco-zc [hidden] { display: none !important; }
.twco-zc__keuze { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.twco-zc__keuze legend { font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 17px; color: #1c1c1c; margin-bottom: 10px; padding: 0; }
.twco-zc__keuze label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; min-height: 32px; }
.twco-zc__keuze input { accent-color: #00a6b2; width: 18px; height: 18px; margin: 0; }
.twco-zc__velden { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.twco-zc__veld { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.twco-zc__veld label { font-size: 14px; font-weight: 500; color: #3d3d3d; }
.twco-zc__veld input, .twco-zc__veld select { height: 48px; box-sizing: border-box; border: 1px solid #c9b9bb; background: #fff; padding: 0 12px; font: 16px Roboto, Arial, sans-serif; color: #2b2b2b; border-radius: 0; width: 100%; }
.twco-zc__veld input:focus, .twco-zc__veld select:focus { outline: 2px solid #00a6b2; outline-offset: 1px; }
.twco-zc__knop { height: 48px; padding: 0 24px; border: 0; background: #00a6b2; color: #fff; font: 500 16px Roboto, Arial, sans-serif; cursor: pointer; border-radius: 0; }
.twco-zc__knop:hover, .twco-zc__knop:focus-visible { background: #008a94; }
.twco-zc__fout { margin: 14px 0 0; color: #a3122a; font-weight: 500; }
.twco-zc__resultaat { margin-top: 26px; background: #fff; padding: 26px; }
.twco-zc__uitkomst { display: flex; flex-direction: column; gap: 6px; }
.twco-zc__label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: #007f88; }
.twco-zc__datum { font-family: Merriweather, Georgia, serif; font-size: 30px; line-height: 1.25; font-weight: 900; color: #1c1c1c; }
.twco-zc__stand { font-size: 17px; color: #3d3d3d; }
.twco-zc__balk { height: 10px; background: #f1e4e5; margin: 20px 0; overflow: hidden; }
.twco-zc__balk-vulling { display: block; height: 100%; width: 0; background: #00a6b2; transition: width .6s ease; }
.twco-zc__feiten { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.twco-zc__feiten li { margin: 0; padding: 14px; background: #eff9f9; display: flex; flex-direction: column; gap: 4px; }
.twco-zc__feiten li::before { display: none; }
.twco-zc__feiten span { font-size: 13px; color: #555; }
.twco-zc__feiten strong { font-size: 16px; color: #1c1c1c; }
.twco-zc__kop { font-family: Merriweather, Georgia, serif; font-size: 20px; margin: 26px 0 12px; color: #1c1c1c; }
.twco-zc__tijdlijn { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #d3e9eb; }
.twco-zc__moment { position: relative; margin: 0; padding: 0 0 18px 16px; display: flex; flex-direction: column; gap: 3px; }
.twco-zc__moment::before { content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #00a6b2; }
.twco-zc__moment.is-voorbij { opacity: .6; }
.twco-zc__moment.is-voorbij::before { background: #00a6b2; }
.twco-zc__moment.is-nu::before { background: #00a6b2; box-shadow: 0 0 0 4px rgba(0, 166, 178, .25); }
.twco-zc__moment-datum { font-size: 13px; font-weight: 500; color: #007f88; }
.twco-zc__moment-titel { font-family: Merriweather, Georgia, serif; font-size: 16px; color: #1c1c1c; }
.twco-zc__moment-titel a { color: #1c1c1c; text-decoration: underline; text-decoration-color: #00a6b2; text-underline-offset: 3px; }
.twco-zc__moment-titel a:hover { color: #007f88; }
.twco-zc__moment-tekst { font-size: 15px; line-height: 1.5; color: #4a4a4a; }
.twco-zc__let-op { margin: 8px 0 0; font-size: 14px; color: #555; }
.twco-zc--compact { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0; }
@media (max-width: 600px) {
	.twco-zc { padding: 20px 16px; }
	.twco-zc__resultaat { padding: 20px 16px; }
	.twco-zc__datum { font-size: 24px; }
	.twco-zc__knop { width: 100%; }
}