/* 3-Kolommen Wizard */
	.wizard-box { padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 20px; }
	.module-group {
		border-right: 1px solid rgba(var(--bs-green-m-rgb),0.4); 
		height: 100%;
		padding: 1rem;
	}
	.module-group:last-child { 
		border-right: none; 
		padding-right: 0; 
		background: rgba(var(--bs-green-m-rgb),0.2);
		border-radius: 0 20px 20px 0; 
	}
	.module-group h3 { font-size: 14pt; color: var(--bs-green); margin: 0 0 0 1rem;}
	.module-group .d-flex {min-height: 55px;}
	
	/* Checkbox Styling (Pills) */
	.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
	.checkbox-group label { 
		display: inline-flex; 
		align-items: center; 
		gap: 8px; 
		min-width: 35%;
		background: rgba(var(--bs-green-m-rgb),0.1);
		padding: 6px 12px; 
		border-radius: 20px; 
		border: 1px solid var(--bs-gray-400); 
		cursor: pointer; 
		font-size: 14px; 
		line-height: 16px;
		font-weight: 450;
		transition: all 0.2s ease; 
	}
	.checkbox-group label:hover { border-color: var(--bs-green); }
	.checkbox-group input[type="checkbox"] { 
		cursor: pointer; 
		width: 14px; 
		height: 14px; 
		accent-color: var(--bs-green); 
	}

.checkbox-group label.disabled-option {
    opacity: 0.6;
    filter: grayscale(100%);
    cursor: not-allowed;
}

/* Zorgt dat je niet per ongeluk wél het handje krijgt als je precies op de tekst klikt */
.checkbox-group label.disabled-option * {
    pointer-events: none; 
}
	.module-group:last-child .checkbox-group label { 
		background: rgba(var(--bs-white-rgb),0.6);
	}

	.module-group:last-child .disabled-option { 
		opacity: 0.4;
	}

	/* Actie Balk (Toggle & Reset) */
	.action-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-radius: 8px; margin-bottom: 20px; }
	/* .btn-reset { padding: 8px 16px; background-color: #e0e0e0; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } */
	/* .btn-reset:hover { background-color: #ccc; } */

	.contact-bar{
		/* border-radius: 8px;
		border-top: 4px solid var(--bs-green); */
		margin: 2rem 0;
		padding: 1rem 0;
	}

	.meet-bar {
		background-color: rgba(var(--bs-dark-rgb),0.1);
	}
	.meet-bar.input-group .btn .svg-inline--fa {
		color: var(--bs-green);
		margin-right: 5px;
	}

	.module-modal-link {
		color: var(--bs-green);
	}
	
	/* View Toggle Switch */
	.view-toggle { display: flex; background: var(--bs-gray-200); border-radius: 20px; overflow: hidden; border: 1px solid var(--bs-gray-400); color: #212121 }
	.view-toggle label { padding: 8px 20px; cursor: pointer; font-size: 14px; font-weight: bold; transition: 0.3s; }
	.view-toggle input { display: none; }
	/* Geef actieve radio button een blauwe achtergrond */
	.view-toggle label:has(input:checked) { background: var(--bs-primary); color: var(--bs-primary-color); }

	/* Layout 1: Fasering (Verticale Kolommen) */
	.roadmap { display: flex; gap: 20px; }
	.fase-kolom { flex: 1; background-color: rgba(var(--bs-dark-rgb),0.1); padding: 15px; border-radius: 8px; border-top: 4px solid var(--bs-green); }
	.fase-titel { text-align: center; margin-top: 0; color: var(--bs-green); font-size: 16px; }
	
	/* Layout 2: Programma's (Horizontale mappen) */
	.programs-view {
		display: none;
		flex-direction: column; 
		gap: 20px; 
		background-color: rgba(var(--bs-dark-rgb),0.1);
		padding: 15px; 
		border-radius: 8px; 
		border-top: 4px solid var(--bs-green); 
	}
	.program-card {
		background-color: rgba(var(--bs-white-rgb),0.6); 
		border: 1px solid rgba(var(--bs-dark-rgb),0.2); 
		border-left: 6px solid var(--bs-green); 
		border-radius: 8px; 
		padding: 20px; 
		box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}
	.program-card h3 {
		margin: 0 0 5px 0; 
		color: var(--bs-green); 
		font-size: 14pt; 
		font-weight: 600;
	}
	.program-card > p { margin: 0 0 15px 0;  }
	.program-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; padding-top: 15px; border-top: 1px solid #eee; }

	.program-card-desc {
		font-size:15px; 
		line-height:1.6; 
		margin-bottom:20px;
	}

	.program-card-link {
		transition:background 0.2s;
	}

	/* Module Kaartje (Wordt in beide weergaves gebruikt) */
	.module-card {
		border: 1px solid rgba(var(--bs-dark-rgb),0.2); 
		border-left: 4px solid var(--bs-green); 
		padding: 15px; 
		background-color: rgba(var(--bs-white-rgb),0.6);
		border-radius: 8px; 
		box-shadow: 0 2px 4px rgba(var(--bs-black-rgb),0.05); 
		position: relative;
		margin-bottom: .5rem;
	}
	.module-card h4 { 
		margin: 0 0 8px 0; 
		color: var(--bs-green); 
		font-size: 14pt; 
		font-weight: 600;
	}
	.module-card p { font-size: 11pt; line-height: 14pt; margin: 0 0 10px 0; }
	.tags {
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		margin-top: 10px;
		font-size: 11pt; 
		line-height: 14pt;
	 }
	.fase-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; background: #eef2f5; padding: 2px 6px; border-radius: 4px; font-weight: bold; color: var(--bs-green);}

	.empty-state {
		text-align: center; 
		color: var(--bs-gray-800);
		font-style: italic; 
		font-size: 11pt; 
		line-height: 14pt;
		padding: 20px; 
	}

	/* Styling voor modules die matchen met Kolom 3 (Specials) */
	.module-card.highlight { 
		border-left: 4px solid #f39c12; /* Mooie oranje/gouden accentkleur */
	}
	.context-badge { 
		display: inline-block; 
		font-size: 10pt; 
		line-height: 13pt;
		font-weight: 500; 
		border-radius: 12px; 
		margin-bottom: 8px; 
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

/* safety */
.highlight.module-18 { 
  border-left-color: var(--bs-cyan);
}
.highlight.module-18 .svg-inline--fa {
	color: var(--bs-cyan);
}

/* social welbeing */
.highlight.module-19 { 
  border-left-color: var(--bs-red);
}
.highlight.module-19 .svg-inline--fa {
	color: var(--bs-red);
}

/* maritime */
.highlight.module-20 { 
  border-left-color: var(--bs-warning);
}
.highlight.module-20 .svg-inline--fa {
	color: var(--bs-warning);
}

/* asia */
.highlight.module-21 { 
  border-left-color: var(--bs-orange);
}
.highlight.module-21 .svg-inline--fa {
	color: var(--bs-orange);
}

/* Eastern Europe */
.highlight.module-22 { 
  border-left-color: var(--bs-purple);
}
.highlight.module-22 .svg-inline--fa {
	color: var(--bs-purple);
}


/* phone > 480px */
@media (max-width: 480px) {

	.module-group {
		margin-top: 1rem;
		height: auto ;
		padding: 1rem;
	}

	.checkbox-group label { 
		min-width: 90%;
	}

	.roadmap {
		flex-direction: column; 
		gap: 20px; 
	}
	
	.fase-kolom {
		width: 100%;
	}

	.contact-bar .btn {
		width: 100%;
		text-align: left;
	}

	.btn-reset {
		display:none;
	}

	

}

/* Landscape phone */
@media (min-width: 481px) and (max-width: 767.97px) {

	.module-group {
		margin-top: 1rem;
		height: auto ;
		padding: 1rem;
	}

	.checkbox-group label { 
		min-width: 90%;
	}

	.roadmap {
		flex-direction: column; 
		gap: 20px; 
	}
	
	.fase-kolom {
		width: 100%;
	}

	.contact-bar .btn {
		width: 100%;
		text-align: left;
	}

	.btn-reset {
		display:none;
	}

	
}


/* Portrait tablet */
@media (min-width: 767.98px) and (max-width: 991.97px) {

	.module-group {
		margin-top: 1rem;
		height: auto ;
		padding: 1rem;
	}

	.checkbox-group label { 
		min-width: 90%;
	}

	.roadmap {
		flex-direction: column; 
		gap: 20px; 
	}
	
	.fase-kolom {
		width: 100%;
	}

	.contact-bar .btn {
		width: 100%;
		text-align: left;
	}

	.btn-reset {
		display:none;
	}


}


/* landscape tablet */
@media (min-width: 991.98px) and (max-width: 1199.98px) {

	
}

/* desktop */
@media (min-width: 1200px) {

	

}

/* desktop */
@media (min-width: 1800px) {


}