/**
 * Global Notification System — Styles
 *
 * Apple-style stacking notifications with grouping.
 *
 * @since 5.4.0
 */

/* ============================================
   Container
   ============================================ */
.advan-notif-container {
	position: fixed;
	top: 42px; /* Below WP admin bar */
	right: 16px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: calc(100vh - 58px);
	overflow-y: auto;
	overflow-x: hidden;
	pointer-events: none;
	padding: 8px 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.advan-notif-container::-webkit-scrollbar {
	display: none;
}

/* ============================================
   Individual Notification
   ============================================ */
.advan-notif,
.advan-notif-group {
	pointer-events: auto;
	width: 360px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border-radius: 12px;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.08),
		0 1px 4px rgba(0, 0, 0, 0.04),
		0 0 0 1px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	opacity: 0;
	transform: translateX(100%) scale(0.95);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advan-notif-visible {
	opacity: 1;
	transform: translateX(0) scale(1);
}

.advan-notif-exit {
	opacity: 0;
	transform: translateX(100%) scale(0.95);
	transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}

/* ============================================
   Content Layout
   ============================================ */
.advan-notif-content {
	display: flex;
	align-items: flex-start;
	padding: 12px 14px;
	gap: 10px;
	position: relative;
}

.advan-notif-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 1px;
}

.advan-notif-body {
	flex: 1;
	min-width: 0;
}

.advan-notif-message {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #1a1a2e;
	word-wrap: break-word;
}

.advan-notif-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 11px;
	color: #6b7280;
}

.advan-notif-module {
	background: #f3f4f6;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 500;
	text-transform: capitalize;
}

.advan-notif-time {
	white-space: nowrap;
}

/* ============================================
   Dismiss Button
   ============================================ */
.advan-notif-dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: #9ca3af;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
	padding: 0;
}

.advan-notif-dismiss:hover {
	background: #f3f4f6;
	color: #374151;
}

/* ============================================
   Group Expand Button
   ============================================ */
.advan-notif-group-expand {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: #f3f4f6;
	color: #6b7280;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.15s;
	padding: 0;
}

.advan-notif-group-expand:hover {
	background: #e5e7eb;
}

/* ============================================
   Progress Bar (auto-dismiss countdown)
   ============================================ */
.advan-notif-progress {
	height: 3px;
	background: #f3f4f6;
	overflow: hidden;
}

.advan-notif-progress-bar {
	height: 100%;
	width: 100%;
	transform-origin: left;
	animation: advan-notif-countdown linear forwards;
}

@keyframes advan-notif-countdown {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}

/* ============================================
   Type-specific Colors
   ============================================ */

/* Success */
.advan-notif-success {
	border-left: 4px solid #10b981;
}

.advan-notif-success .advan-notif-icon {
	color: #10b981;
}

.advan-notif-success .advan-notif-progress-bar {
	background: #10b981;
}

/* Error */
.advan-notif-error {
	border-left: 4px solid #ef4444;
}

.advan-notif-error .advan-notif-icon {
	color: #ef4444;
}

.advan-notif-error .advan-notif-progress-bar {
	background: #ef4444;
}

/* Warning */
.advan-notif-warning {
	border-left: 4px solid #f59e0b;
}

.advan-notif-warning .advan-notif-icon {
	color: #f59e0b;
}

.advan-notif-warning .advan-notif-progress-bar {
	background: #f59e0b;
}

/* Info */
.advan-notif-info {
	border-left: 4px solid #3b82f6;
}

.advan-notif-info .advan-notif-icon {
	color: #3b82f6;
}

.advan-notif-info .advan-notif-progress-bar {
	background: #3b82f6;
}

/* ============================================
   Group Card (stacked appearance)
   ============================================ */
.advan-notif-group {
	position: relative;
}

.advan-notif-group::before,
.advan-notif-group::after {
	content: '';
	position: absolute;
	left: 8px;
	right: 8px;
	height: 6px;
	background: #ffffff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	pointer-events: none;
}

.advan-notif-group::before {
	bottom: -4px;
	opacity: 0.7;
}

.advan-notif-group::after {
	bottom: -8px;
	left: 14px;
	right: 14px;
	opacity: 0.4;
}

/* ============================================
   Dark Mode
   ============================================ */
.aadvana-darkskin .advan-notif,
.aadvana-darkskin .advan-notif-group {
	background: #1e1e2e;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.3),
		0 1px 4px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.aadvana-darkskin .advan-notif-message {
	color: #e2e8f0;
}

.aadvana-darkskin .advan-notif-meta {
	color: #94a3b8;
}

.aadvana-darkskin .advan-notif-module {
	background: #2d2d3f;
	color: #cbd5e1;
}

.aadvana-darkskin .advan-notif-dismiss:hover {
	background: #2d2d3f;
	color: #e2e8f0;
}

.aadvana-darkskin .advan-notif-group-expand {
	background: #2d2d3f;
	color: #94a3b8;
}

.aadvana-darkskin .advan-notif-group-expand:hover {
	background: #3d3d4f;
}

.aadvana-darkskin .advan-notif-progress {
	background: #2d2d3f;
}

.aadvana-darkskin .advan-notif-group::before,
.aadvana-darkskin .advan-notif-group::after {
	background: #1e1e2e;
}

/* ============================================
   Responsive — Tablet
   ============================================ */
@media (max-width: 782px) {
	.advan-notif-container {
		top: 46px; /* WP mobile admin bar */
		right: 8px;
		left: 8px;
	}

	.advan-notif,
	.advan-notif-group {
		width: 100%;
		max-width: none;
	}
}

/* ============================================
   Responsive — Mobile
   ============================================ */
@media (max-width: 480px) {
	.advan-notif-container {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 0;
		gap: 1px;
		flex-direction: column-reverse;
		max-height: 60vh;
		border-radius: 16px 16px 0 0;
		background: rgba(0, 0, 0, 0.02);
	}

	.advan-notif,
	.advan-notif-group {
		border-radius: 0;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
	}

	.advan-notif:first-child {
		border-radius: 16px 16px 0 0;
	}

	.advan-notif-group::before,
	.advan-notif-group::after {
		display: none;
	}

	/* Swipe-to-dismiss hint */
	.advan-notif-visible {
		transform: translateX(0) scale(1);
	}
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	.advan-notif,
	.advan-notif-group {
		transition: opacity 0.1s;
		transform: none !important;
	}

	.advan-notif-visible {
		transform: none !important;
	}

	.advan-notif-exit {
		transform: none !important;
	}

	.advan-notif-progress-bar {
		animation: none !important;
	}
}