/**
 * WhoKnew Shield - Format Modals Styling
 * Styles for the three format help modals (Email, Phone, Address)
 */

/* Modal Close Button */
.whoknewshield-modal-close {
	position: absolute;
	top: 15px;
	right: 25px;
	font-size: 28px;
	cursor: pointer;
	color: white;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.whoknewshield-modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(90deg);
}

/* Modal overlay base styles */
.whoknewshield-format-modal {
	display: none;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(0, 0, 0, 0.8) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	z-index: 9999999 !important;
	overflow-y: auto !important;
}

/* Modal animation */
@keyframes modalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes modalSlideUp {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Modal close button hover */
.whoknewshield-modal-close {
	transition: all 0.3s ease !important;
}

.whoknewshield-modal-close:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	transform: rotate(90deg) scale(1.1) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.whoknewshield-format-modal > div {
		width: 95% !important;
		margin: 5% auto !important;
	}
}