/*
 * Arabjo Extras — Frontend CSS
 *
 * Adds notification UIs (lock-reminder banner, achievement toasts) that
 * complement the parent Theme Layer. We reuse the parent's CSS variables
 * (--aj-*) so light/dark switching just works.
 */

/* === LOCK REMINDER BANNER === */
.aj-lock-reminder {
	margin: 12px;
	padding: 12px 14px;
	background: linear-gradient(135deg, rgba(200,168,106, 0.18), rgba(200,168,106, 0.08));
	border: 1px solid rgba(200,168,106, 0.45);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	animation: aj-reminder-slide 0.4s ease;
}
@keyframes aj-reminder-slide {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.aj-lock-reminder-icon {
	width: 36px; height: 36px;
	background: linear-gradient(135deg, #C8A86A, #A8893F);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	flex-shrink: 0;
	animation: aj-tick-pulse 1.5s ease-in-out infinite;
}
@keyframes aj-tick-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
.aj-lock-reminder-body { flex: 1; min-width: 0; }
.aj-lock-reminder-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--aj-text);
	margin-bottom: 2px;
}
.aj-lock-reminder-sub {
	font-size: 11px;
	color: var(--aj-muted);
}
.aj-lock-reminder-time {
	font-size: 22px;
	font-weight: 900;
	color: var(--aj-gold-dark);
	white-space: nowrap;
	text-align: center;
	line-height: 1;
}
.aj-lock-reminder-time small {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: var(--aj-muted);
	margin-top: 2px;
}

/* === ACHIEVEMENT TOAST === */
.aj-toast-stack {
	position: fixed;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
	max-width: calc(100vw - 24px);
}
.aj-toast {
	background: linear-gradient(135deg, #1F2433, #0B0C12);
	border: 2px solid var(--aj-gold);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(200,168,106, 0.15);
	min-width: 280px;
	max-width: 380px;
	color: #fff;
	pointer-events: auto;
	font-family: 'Tajawal', 'Cairo', sans-serif;
	direction: rtl;
	animation: aj-toast-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes aj-toast-in {
	from { opacity: 0; transform: translateY(-30px) scale(0.85); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.aj-toast.aj-toast-out {
	animation: aj-toast-out 0.3s ease forwards;
}
@keyframes aj-toast-out {
	to { opacity: 0; transform: translateY(-20px) scale(0.95); }
}
.aj-toast-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #1a0f00;
	box-shadow: 0 4px 12px rgba(200,168,106, 0.4);
	flex-shrink: 0;
	animation: aj-toast-spin 0.6s ease;
}
@keyframes aj-toast-spin {
	from { transform: rotate(-180deg) scale(0.5); }
	to   { transform: rotate(0deg) scale(1); }
}
.aj-toast-body { flex: 1; min-width: 0; }
.aj-toast-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-gold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}
.aj-toast-name {
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	margin-bottom: 2px;
}
.aj-toast-desc {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.4;
}
.aj-toast-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.aj-toast-close:hover { color: #fff; }

/* === BADGE OVERRIDES — Font Awesome inside badges === */
/* When the achievements engine renders <i class="fa-solid ..."> instead of
   an emoji, scale the icon nicely inside the badge container. */
.aj-badge .aj-badge-icon i.fa-solid,
.aj-badge .aj-badge-icon i.fa-regular,
.aj-badge .aj-badge-icon i.fa-brands {
	font-size: 32px;
	line-height: 1;
}

/* In the user profile and stats pages, the icon goes inside a slightly
   different container — match it. */
.aj-profile-recent .aj-toast-icon i.fa-solid {
	font-size: 22px;
}