/* ===========================
   EMZ / Wellness Login - Final CSS
   Black / Gold Luxury Theme + Loader + Logo Image + Shine
   =========================== */

/* Reset / Base */
* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	direction: rtl;
	color: #e6e6e6;
	/* خلفية فاخرة ثابتة */
	background: radial-gradient(circle at 20% 25%, rgba(218,165,32,0.07) 0%, transparent 42%), radial-gradient(circle at 80% 70%, rgba(184,134,11,0.06) 0%, transparent 45%), linear-gradient(145deg, #0c0c0c 0%, #111111 50%, #0a0a0a 100%);
	position: relative;
}

	/* زخرفة خفيفة ثابتة */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		background-image: radial-gradient(circle at 30% 20%, rgba(218,165,32,0.03) 0%, transparent 22%), radial-gradient(circle at 70% 80%, rgba(184,134,11,0.03) 0%, transparent 22%);
		z-index: -1;
	}

/* Container tweaks (Bootstrap container موجود) */
.container {
	padding-top: 60px;
	padding-bottom: 60px;
}

/* Card */
.login-card {
	background: linear-gradient(145deg, rgba(25,25,25,0.96) 0%, rgba(18,18,18,0.98) 100%);
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(184,134,11,0.25);
	box-shadow: 0 18px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(218,165,32,0.10), inset 0 0 22px rgba(0,0,0,0.55);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
}

	.login-card::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 4px;
		background: linear-gradient(90deg, transparent 0%, #b8860b 25%, #DAA520 50%, #b8860b 75%, transparent 100%);
		z-index: 1;
	}

	.login-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 55px rgba(0,0,0,0.72), 0 0 0 1px rgba(218,165,32,0.18), inset 0 0 26px rgba(0,0,0,0.62);
	}

/* Header */
.login-header {
	text-align: center;
	padding: 28px 28px 18px;
}

/* ===========================
   Logo (Image) + Gold Shine
   =========================== */
.logo {
	width: 92px;
	height: 92px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* إطار ذهبي */
	background: linear-gradient(145deg, #b8860b 0%, #DAA520 50%, #b8860b 100%);
	box-shadow: 0 10px 26px rgba(218,165,32,0.28), inset 0 0 14px rgba(255,215,0,0.18);
	padding: 6px;
	position: relative;
	overflow: hidden;
}

	/* Glow خارجي خفيف */
	.logo::after {
		content: "";
		position: absolute;
		inset: -3px;
		border-radius: 50%;
		background: linear-gradient(145deg, rgba(184,134,11,0.45), rgba(218,165,32,0.65), rgba(184,134,11,0.45));
		z-index: -1;
	}

	/* بريق يلف حول الإطار */
	/*.logo::before {
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: 50%;
		padding: 3px;
		background: conic-gradient( transparent 0deg, transparent 60deg, rgba(255,215,0,0.95) 120deg, rgba(255,255,255,0.85) 160deg, rgba(255,215,0,0.95) 200deg, transparent 260deg, transparent 360deg );*/
		/* حلقة فقط */
		/*-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		animation: logoSpin 4s linear infinite;
		z-index: 1;
		pointer-events: none;
	}*/
	/* بريق يلف حول الإطار - نسخة متوافقة */
	.logo::before {
		content: "";
		position: absolute;
		inset: 0; /* خليها داخل الدائرة عشان ما تتقصش */
		border-radius: 50%;
		/* البريق */
		background: conic-gradient( from 0deg, transparent 0 55%, rgba(255,215,0,.95) 60%, rgba(255,255,255,.9) 62%, rgba(255,215,0,.95) 64%, transparent 70% 100% );
		/* نخليها حلقة فقط */
		-webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px) );
		mask: radial-gradient( farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px) );
		animation: logoSpin 2.8s linear infinite;
		z-index: 3; /* فوق كل شيء */
		pointer-events: none;
	}


@keyframes logoSpin {
	to {
		transform: rotate(360deg);
	}
}

.logo i {
	display: none;
}
/* لو أيقونة قديمة موجودة */

/*.logo .logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	background: #0f0f0f;
	padding: 6px;
	position: relative;
	z-index: 2;
}*/

.logo .logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	background: #0f0f0f;
	padding: 6px;
	position: relative;
	z-index: 2;
}

.login-header h2 {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #DAA520;
	text-shadow: 0 2px 12px rgba(218,165,32,0.18);
}

.login-header p {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #b8860b;
	display: inline-block;
	position: relative;
	padding: 0 18px;
}

	.login-header p::before,
	.login-header p::after {
		content: "✦";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(218,165,32,0.7);
		font-size: 13px;
	}

	.login-header p::before {
		right: 100%;
	}

	.login-header p::after {
		left: 100%;
	}

/* Body */
.login-body {
	padding: 22px 28px 28px;
}

/* Labels */
.form-label {
	color: #b8860b;
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 10px;
}

	.form-label i {
		color: #DAA520;
		font-size: 16px;
	}

/* Inputs */
.form-control {
	background: rgba(34,34,34,0.92);
	border: 1px solid rgba(184,134,11,0.32);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 15px;
	color: #f1f1f1;
	box-shadow: inset 0 2px 9px rgba(0,0,0,0.45);
	transition: border-color .25s ease, box-shadow .25s ease, transform .12s ease, background .25s ease;
}

	.form-control::placeholder {
		color: rgba(218,165,32,0.35);
		opacity: 1;
		font-style: italic;
	}

	.form-control:focus {
		background: rgba(42,42,42,0.95);
		border-color: #DAA520;
		outline: none;
		box-shadow: inset 0 2px 12px rgba(0,0,0,0.55), 0 0 0 2px rgba(218,165,32,0.16);
		transform: translateY(-1px);
	}

/* Remember me */
.form-check {
	display: flex;
	align-items: center;
	gap: 10px;
}

.form-check-input {
	background-color: rgba(34,34,34,0.92);
	border: 1px solid rgba(184,134,11,0.40);
	cursor: pointer;
}

	.form-check-input:checked {
		background-color: #DAA520;
		border-color: #DAA520;
		box-shadow: 0 0 10px rgba(218,165,32,0.35);
	}

.form-check-label {
	color: #b8860b;
	font-weight: 500;
	cursor: pointer;
}

/* Button */
.btn-login {
	background: linear-gradient(145deg, #b8860b 0%, #DAA520 50%, #b8860b 100%);
	border: none;
	border-radius: 12px;
	color: #090909;
	font-weight: 800;
	padding: 14px 16px;
	width: 100%;
	font-size: 16px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 10px 22px rgba(184,134,11,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

	.btn-login:hover {
		transform: translateY(-2px);
		filter: brightness(1.03);
		box-shadow: 0 14px 28px rgba(184,134,11,0.36), inset 0 1px 0 rgba(255,255,255,0.25);
	}

	.btn-login:active {
		transform: translateY(0);
		box-shadow: 0 8px 18px rgba(184,134,11,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
	}

/* Alerts */
.alert-danger {
	background: linear-gradient(to right, rgba(120,0,0,0.88), rgba(150,30,30,0.88));
	border: 1px solid rgba(255,215,0,0.12);
	border-radius: 10px;
	color: #ffd700;
	border-right: 4px solid #8b0000;
	box-shadow: 0 6px 14px rgba(139,0,0,0.22);
}

/* ===========================
   Full Page Loader (Overlay)
   =========================== */
#pageLoader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none; /* هيتفتح من JS */
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.62);
	backdrop-filter: blur(6px);
}

	#pageLoader .loader-content {
		width: min(420px, 92vw);
		text-align: center;
		padding: 26px 26px 22px;
		border-radius: 16px;
		background: linear-gradient(145deg, rgba(20,20,20,0.96), rgba(12,12,12,0.98));
		border: 1px solid rgba(218,165,32,0.25);
		box-shadow: 0 18px 45px rgba(0,0,0,0.55), inset 0 0 20px rgba(0,0,0,0.55);
		animation: emzPop .18s ease-out;
	}

@keyframes emzPop {
	from {
		transform: translateY(6px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

#pageLoader .loader-ring {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	border: 4px solid rgba(218,165,32,0.22);
	border-top-color: #DAA520;
	animation: emzSpin .85s linear infinite;
}

@keyframes emzSpin {
	to {
		transform: rotate(360deg);
	}
}

#pageLoader .loader-title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 1.2px;
	color: #DAA520;
	margin-bottom: 6px;
	text-transform: uppercase;
}

#pageLoader .loader-sub {
	font-size: 13px;
	color: rgba(230,230,230,0.75);
	margin: 0;
}

/* dots animation span */
#dots {
	color: #DAA520;
	font-weight: 800;
	letter-spacing: 2px;
}

/* ===========================
   Remove Yellow Circle / Focus Ring
   =========================== */
a, button, input, label, .btn, .btn-login, .form-check-input {
	-webkit-tap-highlight-color: transparent;
}

	.btn:focus, .btn:focus-visible,
	.btn-login:focus, .btn-login:focus-visible,
	a:focus, a:focus-visible,
	.form-check-input:focus, .form-check-input:focus-visible,
	.form-control:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}

/* Responsive */
@media (max-width: 768px) {
	.login-body {
		padding: 18px 18px 22px;
	}

	.login-header h2 {
		font-size: 26px;
	}

	.logo {
		width: 80px;
		height: 80px;
	}

		.logo .logo-img {
			padding: 5px;
		}
}