.azan-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 22px;
	background: linear-gradient(135deg, #064e3b, #059669)
}

.azan-overlay.subuh {
	background: linear-gradient(135deg, #1e3a8a, #38bdf8)
}

.azan-overlay.zohor {
	background: linear-gradient(135deg, #065f46, #10b981)
}

.azan-overlay.asar {
	background: linear-gradient(135deg, #0f766e, #14b8a6)
}

.azan-overlay.maghrib {
	background: linear-gradient(135deg, #7c2d12, #fb923c)
}

.azan-overlay.isyak {
	background: linear-gradient(135deg, #020617, #1e3a8a)
}

.azan-panel {
	width: 100%;
	max-width: 430px;
	background: rgba(15, 23, 42, .38);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 34px;
	padding: 26px 20px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
	backdrop-filter: blur(18px)
}

.azan-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 12px
}

.azan-label {
	letter-spacing: .18em;
	font-size: 13px;
	font-weight: 900;
	opacity: .9;
	text-transform: uppercase
}

.azan-title {
	font-size: 38px;
	line-height: 1.1;
	font-weight: 1000;
	margin: 10px 0 8px
}

.azan-subtitle {
	font-size: 16px;
	opacity: .92;
	line-height: 1.6
}

.azan-arabic {
	margin: 20px 0;
	padding: 18px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .12);
	font-size: 30px;
	line-height: 1.8;
	direction: rtl
}

.azan-meta {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0
}

.azan-chip {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 800
}

.azan-actions {
	display: grid;
	gap: 10px;
	margin-top: 18px
}

.azan-actions .btn {
	width: 100%;
	border: 0;
	border-radius: 18px;
	padding: 15px 16px;
	font-weight: 1000;
	font-size: 16px
}

.azan-actions .primary {
	background: #fff;
	color: #065f46
}

.azan-actions .secondary {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25)
}

.azan-actions .danger {
	background: rgba(15, 23, 42, .45);
	color: #fff
}

.azan-progress-wrap {
	height: 10px;
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	overflow: hidden;
	margin-top: 16px
}

.azan-progress {
	height: 100%;
	width: 0%;
	background: #fff;
	border-radius: 999px;
	transition: width .2s linear
}

.azan-timer {
	margin-top: 8px;
	font-size: 14px;
	opacity: .9
}

.azan-dua {
	text-align: right;
	direction: rtl;
	font-size: 24px;
	line-height: 2
}

.azan-dua-meaning {
	text-align: left;
	direction: ltr;
	font-size: 14px;
	line-height: 1.7;
	opacity: .9
}

.azan-hidden {
	display: none !important
}

.azan-pulse {
	animation: azanPulse 1.4s infinite
}

@keyframes azanPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, .45)
	}

	70% {
		transform: scale(1.03);
		box-shadow: 0 0 0 18px rgba(255, 255, 255, 0)
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
	}
}