/* ==========================================================================
   modals.css — 1.1.0
   Auteur: Rik Spreen
   Laatste update: 11-01-2026
   ========================================================================== */

#hoofd_menu,
#popup_toegankelijkheid,
#popup_admin {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 300ms ease;
	position: fixed !important;
    top: 2.5rem;
    left: 0;
    right: 0;
	height: 100%;
	background: rgba(0, 0, 0, 0.65);
	z-index: 15;
	border: none;
}

/* Actieve wrapper: zichtbaar + fade-in */
#hoofd_menu.active,
#popup_toegankelijkheid.active,
#popup_admin.active{
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#hoofd_menu.crossfade,
#popup_toegankelijkheid.crossfade,
#popup_admin.crossfade{
	background: rgba(0, 0, 0, 0);
}

.popup {
	opacity: 0;
	transition: opacity 800ms ease;
	pointer-events: none;
	position: sticky;
	margin: 0 auto;
	border: 3px solid var(--spreen-kleur-border);
	border-radius: 0.5rem;
	top: 4rem;
	z-index: 120;
	overflow: hidden;
	contain: paint;
	will-change: opacity;
	background-color: var(--spreen-kleur-achtergrond-licht);
}

@media (min-width: 1025px) {
    .popup {
        width: 50%;
		max-height: 85vh;}
}

@media (min-width: 769px) {
    .popup {
        width: 60%;
        height: 85vh;
    }
}

@media (max-width: 768px) {
    .popup {
        width: 95%;
	height: 80vh;}
}

.popup.open {
	opacity: 1 !important;
	pointer-events: auto;
	background-color: var(--spreen-achtergrond-licht);
}

.popup.closing {
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity 800ms ease;
}

.popup-header {
    display: flex;
    position: sticky;
    z-index: 120;
    top: 0;
    padding: .1rem 0 .1rem .5rem;
    border-bottom: 3px solid var(--spreen-kleur-border);
	background-color: var(--spreen-kleur-menubalk);
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
}

.popup-header h1 {
	display: flex;
    color: var(--spreen-kleur-licht);
    margin: 0;
    line-height: .8;
    gap: .3rem;
    padding: .2rem 0;
    align-items: center;
	font-size: 1.6rem;
}

h3.popup-sub-header {
	font-size: large;
	padding: .3rem;
	background-color: var(--spreen-kleur-licht);
	border-bottom: 2px solid var(--spreen-kleur-border);
	z-index: 110;
	top: 0;
	margin: 0;
	border-top: none;
	position: sticky;
	display: flex;
	justify-content: center;
	gap: .3rem;
	align-items: flex-end;
}

.popup-inhoud {
	width: 100%;
	height: 100%;
	margin-top: -1rem;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-color: var(--spreen-kleur-border) var(--spreen-kleur-licht);
	scroll-behavior: smooth;
	scrollbar-width: thin;
	background: linear-gradient(to bottom, rgba(190, 229, 237, 0), #9dc9d3);
}

.popup-tekst {
	margin: 2rem 1rem 5rem;
	padding: 0 0 10rem;
	position: relative;
}

.popup-tekst p {
	margin-top: 1.5rem;
}

.popup-footer{
	position: sticky;
	bottom: 0;
	overflow: hidden;
	border-top: 3px solid var(--spreen-kleur-border);
	z-index: 120;
	background-color: var(--spreen-kleur-licht);
	justify-content: center;
}

.popup-footer-hoofdmenu{
	position: sticky;
	padding: .2rem .2rem 0;
	bottom: 0;
	overflow: hidden;
	border-top: 3px solid var(--spreen-kleur-border);
	z-index: 120;

	text-align: center;
	word-break: normal;
}

.popup-footer {
	display: flex;
}

.popup-footer p {
    color: var(--spreen-kleur);
    margin: 0 0 .05rem;
    font-weight: 700;
}

.popup-footer p a{
	color: #0a3d49;
	display: flex;
	gap: .3rem;
	margin: 0;
	padding: .1rem;
	align-items: center;
}

.popup-footer p a::before {
	content: "\f0da";
	font: var(--fa-font-solid);
}

.button-popup-sluiten::before {
    content: "\f00d";
    font: var(--fa-font-solid);
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--spreen-kleur-border);
    border-radius: 50%;
    color: #03627a;
    background-color: #8ba9b1;
    display: block;
    cursor: pointer;
    transition: 1s;
    margin: 0 0 .1rem;
}

ul.admin-acties li{
	margin-bottom: 1rem;
}

/* Einde popup/modals */