/* الأشكال التجميلية في هيدر الصفحات الداخلية */
.slider-decor-shape {
	position: absolute;
	border: 1.5px solid rgba(255, 255, 255, 0.08);
	pointer-events: none;
	z-index: 1;
}

.slider-decor-shape.shape-circle {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	top: 15%;
	right: 8%;
	border-style: dashed;
	opacity: 0.35;
	animation: spin-clockwise 25s linear infinite;
}

.slider-decor-shape.shape-square {
	width: 90px;
	height: 90px;
	border-radius: 20px;
	bottom: 12%;
	left: 12%;
	transform: rotate(45deg);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	opacity: 0.5;
	animation: float-slow 6s ease-in-out infinite alternate;
}

.slider-decor-shape.shape-radial {
	width: 350px;
	height: 350px;
	border-radius: 50%;
	top: -150px;
	left: 35%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 75%);
	border: none;
}

@keyframes spin-clockwise {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes float-slow {
	0% {
		transform: rotate(45deg) translateY(0);
	}
	100% {
		transform: rotate(55deg) translateY(-10px);
	}
}

/* ==========================================================================
   Custom Alert Modal Styles
   ========================================================================== */
.custom-alert-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 72, 75, 0.45); /* overlay tint utilizing theme palette */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	padding: 20px;
	box-sizing: border-box;
}

.custom-alert-overlay.active {
	opacity: 1;
}

.custom-alert-overlay.fade-out {
	opacity: 0;
}

.custom-alert-box {
	background: #ffffff;
	border-radius: var(--border-radius, 16px);
	box-shadow: var(--shadow-lg, 0 15px 30px rgba(6, 97, 101, 0.15));
	padding: 35px 24px 30px 24px;
	width: 100%;
	max-width: 380px;
	text-align: center;
	direction: rtl;
	transform: scale(0.85) translateY(10px);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
	border: 1px solid rgba(6, 97, 101, 0.08);
}

.custom-alert-box.active {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.custom-alert-box.scale-down {
	transform: scale(0.85) translateY(10px);
	opacity: 0;
}

.custom-alert-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(155, 200, 90, 0.12); /* light accent green tint */
	border: 3px solid var(--accent-green, #9bc85a);
	color: var(--accent-green, #9bc85a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin: 0 auto 24px auto;
	box-shadow: 0 8px 20px rgba(155, 200, 90, 0.25);
}

.custom-alert-title {
	font-family: 'Tajawal', 'Almarai', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-teal, #066165);
	margin-bottom: 12px;
	margin-top: 0;
}

.custom-alert-message {
	font-family: 'Tajawal', 'Almarai', sans-serif;
	font-size: 15px;
	color: var(--text-dark, #333333);
	margin-bottom: 28px;
	line-height: 1.6;
	font-weight: 500;
}

.custom-alert-btn {
	font-family: 'Tajawal', 'Almarai', sans-serif;
	background-color: var(--primary-teal, #066165);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 12px 30px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
	outline: none;
	box-shadow: 0 6px 15px rgba(6, 97, 101, 0.25);
	width: 100%;
	display: block;
}

.custom-alert-btn:hover {
	background-color: var(--primary-teal-dark, #04484b);
	box-shadow: 0 8px 20px rgba(4, 72, 75, 0.35);
	transform: translateY(-2px);
}

.custom-alert-btn:focus {
	outline: none;
}

.custom-alert-btn:active {
	transform: translateY(1px);
	box-shadow: 0 4px 10px rgba(6, 97, 101, 0.15);
}

/* animation keyframes for the icon bounce */
.custom-alert-icon i {
	animation: icon-bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s both;
}

@keyframes icon-bounce {
	0% {
		transform: scale(0) rotate(-45deg);
		opacity: 0;
	}
	70% {
		transform: scale(1.2) rotate(10deg);
	}
	100% {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
}

/* Mobile Compatibility */
@media (max-width: 576px) {
	.custom-alert-overlay {
		padding: 16px;
	}
	.custom-alert-box {
		padding: 30px 20px 24px 20px;
		max-width: 340px;
	}
	.custom-alert-title {
		font-size: 19px;
	}
	.custom-alert-message {
		font-size: 14px;
		margin-bottom: 22px;
	}
	.custom-alert-btn {
		padding: 10px 24px;
		font-size: 15px;
	}
	.custom-alert-icon {
		width: 60px;
		height: 60px;
		font-size: 24px;
		margin-bottom: 18px;
	}
}