/* Woo Geo Notice - Frontend Styles */

.wgn-notice {
	position: fixed;
	z-index: 99999;
	max-width: 380px;
	width: calc(100vw - 40px);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.wgn-notice.wgn-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Positions */
.wgn-bottom-right  { bottom: 24px; right: 24px; }
.wgn-bottom-left   { bottom: 24px; left: 24px; }
.wgn-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); }
.wgn-bottom-center.wgn-visible { transform: translateX(-50%) translateY(0); }

.wgn-top-right  { top: 24px; right: 24px; transform: translateY(-20px); }
.wgn-top-left   { top: 24px; left: 24px;  transform: translateY(-20px); }
.wgn-top-center { top: 24px; left: 50%;   transform: translateX(-50%) translateY(-20px); }
.wgn-top-right.wgn-visible,
.wgn-top-left.wgn-visible   { transform: translateY(0); }
.wgn-top-center.wgn-visible { transform: translateX(-50%) translateY(0); }

/* Inner layout */
.wgn-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
}

.wgn-message {
	flex: 1;
	min-width: 0;
}

/* Close button */
.wgn-close {
	background: none;
	border: none;
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	transition: color 0.2s;
}
.wgn-close:hover {
	color: #fff;
}

/* Mobile */
@media (max-width: 480px) {
	.wgn-notice {
		max-width: none;
		width: calc(100vw - 24px);
		border-radius: 10px;
	}
	.wgn-bottom-right,
	.wgn-bottom-left,
	.wgn-bottom-center {
		bottom: 12px;
		left: 12px;
		right: 12px;
		transform: translateY(20px);
	}
	.wgn-bottom-right.wgn-visible,
	.wgn-bottom-left.wgn-visible,
	.wgn-bottom-center.wgn-visible {
		transform: translateY(0);
	}
	.wgn-top-right,
	.wgn-top-left,
	.wgn-top-center {
		top: 12px;
		left: 12px;
		right: 12px;
		transform: translateY(-20px);
	}
	.wgn-top-right.wgn-visible,
	.wgn-top-left.wgn-visible,
	.wgn-top-center.wgn-visible {
		transform: translateY(0);
	}
}