#password-generator {
	display: none !important;
	font-size: 12px !important;
}

.hasjs #password-generator {
	display: block !important;
}

.password-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #f8f9fa !important;
	padding: 1em !important;
	box-sizing: border-box !important;
}

.password-container {
	background: #ffffff !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 2em !important;
}

.password-generator {
	text-align: center !important;
	font-size: 0.95em !important;
	color: #333 !important;
}

.password-generator h3 {
	font-size: 1.3em !important;
	margin-bottom: 0.8em !important;
	color: #222 !important;
}

.password-generator .instructions {
	font-size: 0.9em !important;
	margin-bottom: 1.2em !important;
	color: #555 !important;
}

.password-generator .inputbox {
	width: 100% !important;
	max-width: 260px !important;
	margin: 0 auto 1em !important;
	padding: 0.6em !important;
	font-size: 1em !important;
	text-align: center !important;
	border: 1px solid #ccc !important;
	border-radius: 6px !important;
	background-color: #fafafa !important;
	box-shadow: 0 0 6px 0 rgba(0, 123, 255, 0.5) !important;
	transition: box-shadow 0.3s ease !important;
}

.password-generator .inputbox:focus {
	outline: none !important;
	box-shadow: 0 0 12px 2px rgba(0, 123, 255, 0.75) !important;
	border-color: #007bff !important;
}

.password-generator .buttons {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 0.6em !important;
	margin: 0.5em 0 1em !important;
}

.modern-btn {
	background-color: #0c4798 !important;
	color: white !important;
	border: none !important;
	padding: 0.6em 1.2em !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.3s ease !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

.modern-btn:hover {
	background-color: #0056b3 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.modern-btn:active {
	background-color: #004a99 !important;
	transform: translateY(0) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

.modern-btn.copied::after {
	content: ' ✓' !important;
	color: #28a745 !important;
	margin-left: 0.4em !important;
	font-weight: bold !important;
	font-size: 1em !important;
}

.password-generator .reminder {
	font-size: 0.85em !important;
	color: #777 !important;
	margin-top: 1.4em !important;
}

/* Mobiele stijl voor schermen kleiner dan 600px */
@media (max-width: 600px) {
	.password-wrapper {
		padding: 0.5em !important;
		flex-direction: column !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.password-container {
		padding: 1em !important;
		border-radius: 8px !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.password-generator .inputbox {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 1.1em !important;
		padding: 0.75em !important;
		box-sizing: border-box !important;
	}

	.password-generator .buttons {
		flex-direction: column !important;
		gap: 0.5em !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-btn {
		width: 100% !important;
		padding: 0.75em 0 !important;
		font-size: 1.1em !important;
		box-sizing: border-box !important;
	}
}