/* =============================================================
   Meet b. Login Gate — gate.css v1.1.0
   Login + Registratie overlay.
   Mobiel: fullscreen slide-up, geen scroll, alles op 1 scherm.
   Desktop: gecentreerde modal.
   ============================================================= */

/* ── Gedeelde overlay reset ── */
#meetb-gate-overlay,
#meetb-gate-reg-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
}
#meetb-gate-overlay.is-open,
#meetb-gate-reg-overlay.is-open { display: block; }

/* ── Backdrop ── */
#meetb-gate-backdrop,
#meetb-gate-reg-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.25s ease;
}
#meetb-gate-overlay.is-open #meetb-gate-backdrop,
#meetb-gate-reg-overlay.is-open #meetb-gate-reg-backdrop { opacity: 1; }

/* ── Sluitknop — desktop: rechtsboven naast panel ── */
#meetb-gate-close,
#meetb-gate-reg-close {
	position: fixed;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.15);
	color: #e2e8f0;
	cursor: pointer;
	transition: background 0.2s;
	top: calc(50% - 45vh);
	right: calc(50% - 240px);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	padding: 0;
}
#meetb-gate-close:hover,
#meetb-gate-reg-close:hover { background: rgba(255,255,255,0.18); }

/* ── Panel — desktop gecentreerd ── */
#meetb-gate-panel,
#meetb-gate-reg-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 16px));
	width: calc(100% - 32px);
	max-width: 460px;
	max-height: 88dvh;
	overflow-y: auto;
	border-radius: 16px;
	opacity: 0;
	transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
	-webkit-overflow-scrolling: touch;
}
#meetb-gate-overlay.is-open #meetb-gate-panel,
#meetb-gate-reg-overlay.is-open #meetb-gate-reg-panel {
	transform: translate(-50%, -50%);
	opacity: 1;
}

/* ── Scroll lock ── */
body.meetb-gate-open { overflow: hidden !important; }

/* ── Form reset: wizard.css page-level stijlen neutraliseren ── */
#meetb-gate-panel #meetb-login-form,
#meetb-gate-panel #meetb-reg-wizard,
#meetb-gate-reg-panel #meetb-login-form,
#meetb-gate-reg-panel #meetb-reg-wizard {
	position: static !important;
	inset: unset !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	z-index: auto !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* wizard.css zet overflow:hidden op .meetb-wizard__panel — dat blokkeert checkbox clicks */
#meetb-gate-panel .meetb-wizard__panel,
#meetb-gate-reg-panel .meetb-wizard__panel {
	overflow: visible !important;
}

/* Verborgen panels ALTIJD verborgen houden — ook als display:flex !important gezet is */
#meetb-gate-panel .meetb-wizard__panel[hidden],
#meetb-gate-reg-panel .meetb-wizard__panel[hidden] {
	display: none !important;
}

/* ── Wizard panel achtergrond ── */
#meetb-gate-panel .meetb-wizard__panel,
#meetb-gate-reg-panel .meetb-wizard__panel {
	background: #1e2235 !important;
	border-radius: 16px !important;
	min-height: unset !important;
	padding: 36px 28px 28px !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}

/* ── Inputs ── */
#meetb-gate-panel input[type="text"],
#meetb-gate-panel input[type="email"],
#meetb-gate-panel input[type="password"],
#meetb-gate-reg-panel input[type="text"],
#meetb-gate-reg-panel input[type="email"],
#meetb-gate-reg-panel input[type="password"] {
	background: rgba(0,0,0,0.3) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	color: #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	width: 100% !important;
	display: block !important;
}
#meetb-gate-panel input::placeholder,
#meetb-gate-reg-panel input::placeholder { color: rgba(148,163,184,0.5) !important; }

/* ── Labels ── */
#meetb-gate-panel label,
#meetb-gate-reg-panel label {
	color: #e2e8f0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	display: block !important;
	margin-bottom: 4px !important;
}

/* Uitzondering: checkbox-label mag flex blijven zodat checkbox aanklikbaar is */
#meetb-gate-panel .meetb-login__checkbox-label,
#meetb-gate-reg-panel .meetb-login__checkbox-label {
	display: flex !important;
	align-items: center !important;
	margin-bottom: 0 !important;
	cursor: pointer !important;
}

/* Checkbox zelf expliciet klikbaar houden */
#meetb-gate-panel .meetb-login__checkbox-label input[type="checkbox"],
#meetb-gate-reg-panel .meetb-login__checkbox-label input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	min-height: unset !important;
	max-height: unset !important;
	display: inline-block !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	flex-shrink: 0 !important;
}

/* ── Social knoppen ── */
#meetb-gate-panel .meetb-wizard__social-btn,
#meetb-gate-reg-panel .meetb-wizard__social-btn {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(255,255,255,0.14) !important;
	color: #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 10px 16px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	width: 100% !important;
}

/* ── Submit ── */
#meetb-gate-panel .meetb-wizard__submit,
#meetb-gate-panel button[type="submit"],
#meetb-gate-panel #mlSubmit,
#meetb-gate-panel .meetb-wizard__btn--primary,
#meetb-gate-reg-panel .meetb-wizard__submit,
#meetb-gate-reg-panel button[type="submit"],
#meetb-gate-reg-panel .meetb-wizard__btn--primary {
	background: #4361ee !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 20px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	width: 100% !important;
	cursor: pointer !important;
	display: block !important;
}

/* ── Links + muted tekst ── */
#meetb-gate-panel .meetb-wizard__muted,
#meetb-gate-panel .meetb-login__footer-link,
#meetb-gate-panel small,
#meetb-gate-reg-panel .meetb-wizard__muted,
#meetb-gate-reg-panel small { color: #94a3b8 !important; }

#meetb-gate-panel a,
#meetb-gate-reg-panel a { color: #6b84f5 !important; text-decoration: none !important; }

/* ── Back-knop verbergen — overlay heeft eigen close ── */
#meetb-gate-panel .meetb-wizard__back-btn,
#meetb-gate-reg-panel .meetb-wizard__back-btn { display: none !important; }

/* ── Social knoppen naast elkaar ── */
#meetb-gate-panel .meetb-wizard__social-row,
#meetb-gate-reg-panel .meetb-wizard__social-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
}

/* ── Multi-step voortgangsbalk verbergen in overlay ── */
#meetb-gate-reg-panel .meetb-wizard__progress { display: none !important; }


/* =============================================================
   MOBIEL — fullscreen, geen scroll, alles op 1 scherm
   ============================================================= */
@media (max-width: 768px) {

	/* Geen backdrop op mobiel */
	#meetb-gate-backdrop,
	#meetb-gate-reg-backdrop { display: none; }

	/* Panel: fullscreen slide-up, GEEN scroll */
	#meetb-gate-panel,
	#meetb-gate-reg-panel {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 100%;
		height: 100dvh;
		border-radius: 0;
		transform: translateY(100%);
		opacity: 1;
		transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
		overflow-y: auto;           /* scrollbaar als content te lang is */
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	#meetb-gate-overlay.is-open #meetb-gate-panel,
	#meetb-gate-reg-overlay.is-open #meetb-gate-reg-panel {
		transform: translateY(0);
	}

	/* Inner wizard panel: min-height zodat korte forms gecentreerd blijven */
	#meetb-gate-panel .meetb-wizard__panel,
	#meetb-gate-reg-panel .meetb-wizard__panel {
		border-radius: 0 !important;
		min-height: 100dvh !important;
		height: auto !important;
		padding: 72px 20px 40px !important;
		box-shadow: none !important;
		border: none !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		overflow: visible !important;  /* wizard.css zet overflow:hidden — blokkeert checkbox */
	}

	/* Registratie + login: zelfde padding zodat beide overlays identiek ogen */
	#meetb-gate-panel .meetb-wizard__panel,
	#meetb-gate-reg-panel .meetb-wizard__panel {
		padding: 61px 20px 24px !important;
	}

	/* Mobiel: voornaam en achternaam naast elkaar, labels geforceerd gelijk */
	#meetb-gate-reg-panel .meetb-wizard__row--2col,
	#meetb-gate-reg-panel .meetb-wizard .meetb-wizard__row--2col {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0 12px !important;
		align-items: end !important;
	}
	#meetb-gate-reg-panel .meetb-wizard__row--2col .meetb-wizard__field {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
	}
	#meetb-gate-reg-panel .meetb-wizard__row--2col .meetb-wizard__field label {
		margin: 0 0 4px 0 !important;
		padding: 0 !important;
	}

	/* Panel-inner: compacte spacing */
	#meetb-gate-panel .meetb-wizard__panel-inner,
	#meetb-gate-reg-panel .meetb-wizard__panel-inner {
		padding: 0 !important;
	}

	/* Header compacter */
	#meetb-gate-panel .meetb-wizard__header,
	#meetb-gate-reg-panel .meetb-wizard__header {
		margin-bottom: 12px !important;
		text-align: center;
	}
	#meetb-gate-panel .meetb-wizard__icon,
	#meetb-gate-reg-panel .meetb-wizard__icon { margin-bottom: 6px !important; }

	#meetb-gate-panel .meetb-wizard__header h2,
	#meetb-gate-reg-panel .meetb-wizard__header h2 {
		font-size: 18px !important;
		margin-bottom: 3px !important;
	}
	#meetb-gate-panel .meetb-wizard__header p,
	#meetb-gate-reg-panel .meetb-wizard__header p {
		font-size: 12px !important;
		margin: 0 !important;
	}

	/* Social knoppen compacter */
	#meetb-gate-panel .meetb-wizard__social-btn,
	#meetb-gate-reg-panel .meetb-wizard__social-btn {
		padding: 9px 12px !important;
		font-size: 13px !important;
	}

	/* Divider compacter */
	#meetb-gate-panel .meetb-wizard__divider,
	#meetb-gate-reg-panel .meetb-wizard__divider { margin: 10px 0 !important; }

	/* Velden compacter */
	#meetb-gate-panel .meetb-wizard__field,
	#meetb-gate-reg-panel .meetb-wizard__field { gap: 3px !important; }

	#meetb-gate-panel .meetb-wizard__field + .meetb-wizard__field,
	#meetb-gate-reg-panel .meetb-wizard__field + .meetb-wizard__field,
	#meetb-gate-reg-panel .meetb-wizard__row--2col { margin-top: 8px !important; }

	/* Input hoogte compacter */
	#meetb-gate-panel input[type="text"],
	#meetb-gate-panel input[type="email"],
	#meetb-gate-panel input[type="password"],
	#meetb-gate-reg-panel input[type="text"],
	#meetb-gate-reg-panel input[type="email"],
	#meetb-gate-reg-panel input[type="password"] {
		padding: 9px 12px !important;
		font-size: 16px !important; /* 16px voorkomt iOS auto-zoom */
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
	}

	/* Submit compacter */
	#meetb-gate-panel .meetb-wizard__btn--primary,
	#meetb-gate-panel button[type="submit"],
	#meetb-gate-panel #mlSubmit,
	#meetb-gate-reg-panel .meetb-wizard__btn--primary,
	#meetb-gate-reg-panel button[type="submit"] {
		padding: 11px 20px !important;
		margin-top: 12px !important;
	}

	/* Footer link compacter */
	#meetb-gate-panel .meetb-login__footer-link,
	#meetb-gate-reg-panel .meetb-login__footer-link {
		margin-top: 10px !important;
		font-size: 13px !important;
	}

	#meetb-gate-panel .meetb-login__remember {
		margin: 8px 0 0 !important;
	}

	/* Grotere touch target voor checkbox op mobiel */
	#meetb-gate-panel .meetb-login__checkbox-label {
		padding: 8px 0 !important;
		min-height: 44px !important;
		align-items: center !important;
	}
	#meetb-gate-panel .meetb-login__checkbox-label input[type="checkbox"] {
		width: 20px !important;
		height: 20px !important;
		min-height: 20px !important;
		max-height: 20px !important;
		flex-shrink: 0 !important;
		position: relative !important;
		z-index: 1 !important;
	}

	/* Sluitknop mobiel: "← Terug" pill linksboven */
	#meetb-gate-close,
	#meetb-gate-reg-close {
		top: 16px;
		left: 16px;
		right: auto;
		width: auto;
		height: 44px;
		padding: 0 16px;
		border-radius: 22px;
		gap: 6px;
		font-size: 14px;
		font-weight: 500;
		font-family: Roboto, -apple-system, sans-serif;
	}

	/* Mobile nav + header verbergen als overlay open */
	body.meetb-gate-open #meetb-mobile-nav,
	body.meetb-gate-open #meetb-mob-header,
	body.meetb-gate-open nav#meetb-mobile-nav { display: none !important; }
}

/* ── Chat en installeer knop verbergen als overlay open (alle schermgroottes) ── */
body.meetb-gate-open #meetb-assistent,
body.meetb-gate-open #meetb-pwa-install { display: none !important; }