/**
 * Accesso Modal Custom Styling
 *
 * Applies glassmorphism aesthetic to Accesso modal overlay.
 *
 * @package Sierra_Accesso
 */

/* Override Accesso default backdrop with glassmorphism effect */
.accesso-backdrop {
	background: rgba(10, 106, 88, 0.15) !important;
	backdrop-filter: blur(12px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
	animation: accesso-fade-in 0.3s ease-out !important;
}

/* Modal frame wrapper with glass effect */
.accesso-frame {
	border-radius: 20px !important;
	overflow: hidden !important;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		0 0 1px rgba(255, 255, 255, 0.3) inset !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	animation: accesso-scale-in 0.3s ease-out !important;
}

/* Main modal container */
#accesso {
	z-index: 999999 !important;
}

/* Shim/overlay layer */
#accesso-shim {
	z-index: 999998 !important;
}

/* Close button styling with glass effect */
.accesso-close {
	background: rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}

/* X icon using inline SVG */
.accesso-close::before {
	content: '' !important;
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.accesso-close:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	transform: scale(1.05) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.accesso-close:active {
	transform: scale(0.95) !important;
}

/* Focus state for accessibility */
.accesso-close:focus {
	outline: 2px solid var(--wp--preset--color--primary, #0A6A58) !important;
	outline-offset: 2px !important;
}

/* Animations */
@keyframes accesso-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes accesso-scale-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Mobile: Full-screen responsive modal */
@media (max-width: 768px) {
	.accesso-frame {
		width: 100vw !important;
		height: 100vh !important;
		border-radius: 0 !important;
		max-width: 100% !important;
		max-height: 100% !important;
		border: none !important;
	}

	/* Disable blur on mobile for performance */
	.accesso-backdrop {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(10, 106, 88, 0.95) !important;
	}

	.accesso-close {
		/* Position close button in top-right on mobile */
		position: fixed !important;
		top: 16px !important;
		right: 16px !important;
		z-index: 10 !important;
	}
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
	.accesso-frame {
		max-width: 90vw !important;
		border-radius: 16px !important;
	}
}

/* Large desktop */
@media (min-width: 1400px) {
	.accesso-frame {
		max-width: 1200px !important;
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.accesso-backdrop,
	.accesso-frame,
	.accesso-close {
		animation: none !important;
		transition: none !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.accesso-frame {
		border: 2px solid currentColor !important;
	}

	.accesso-close {
		border: 2px solid currentColor !important;
		background: Canvas !important;
		color: CanvasText !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.accesso-backdrop {
		background: rgba(0, 0, 0, 0.4) !important;
	}

	.accesso-close {
		background: rgba(0, 0, 0, 0.5) !important;
		border-color: rgba(255, 255, 255, 0.2) !important;
	}

	.accesso-close::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
	}

	.accesso-close:hover {
		background: rgba(0, 0, 0, 0.7) !important;
	}
}