/**
 * WooCommerce Order Limit - Frontend Popup Styles
 * Premium glassmorphism modal with blur background and animations.
 */

.wol-order-blocked-marker {
	display: none !important;
}

.wol-popup-overlay {
	--wol-primary: #7c3aed;
	--wol-secondary: #f472b6;
	--wol-radius: 20px;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba( 15, 15, 25, 0.55 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	font-family: 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	padding: 20px;
	box-sizing: border-box;
}

.wol-popup-overlay.wol-active {
	opacity: 1;
	visibility: visible;
}

.wol-popup-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: rgba( 255, 255, 255, 0.85 );
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: var( --wol-radius );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 );
	padding: 40px 32px 32px;
	text-align: center;
	transform: scale( 0.85 );
	opacity: 0;
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 ), opacity 0.3s ease;
	backdrop-filter: blur( 20px );
	-webkit-backdrop-filter: blur( 20px );
}

.wol-popup-overlay.wol-active .wol-popup-modal {
	transform: scale( 1 );
	opacity: 1;
}

.wol-popup-overlay.wol-no-animation,
.wol-popup-overlay.wol-no-animation .wol-popup-modal {
	transition: none !important;
}

.wol-popup-icon {
	font-size: 48px;
	margin-bottom: 12px;
	line-height: 1;
}

.wol-popup-heading {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 700;
	background: linear-gradient( 135deg, var( --wol-primary ), var( --wol-secondary ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var( --wol-primary );
}

.wol-popup-description {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.7;
	color: #333333;
}

.wol-popup-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	border: none;
	border-radius: calc( var( --wol-radius ) - 8px );
	background: linear-gradient( 135deg, var( --wol-primary ), var( --wol-secondary ) );
	box-shadow: 0 10px 25px rgba( 124, 58, 237, 0.35 );
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wol-popup-button:hover,
.wol-popup-button:focus {
	transform: translateY( -2px );
	box-shadow: 0 14px 30px rgba( 124, 58, 237, 0.45 );
	color: #ffffff;
}

.wol-popup-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.06 );
	color: #333333;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.wol-popup-close:hover {
	background: rgba( 0, 0, 0, 0.12 );
	transform: rotate( 90deg );
}

@media ( max-width: 480px ) {
	.wol-popup-modal {
		padding: 32px 22px 26px;
	}

	.wol-popup-heading {
		font-size: 22px;
	}

	.wol-popup-description {
		font-size: 14.5px;
	}
}