/* ==============================================
   التوحيد - Premium Login Page
   Full-Screen Split Design with Background Image
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

body[data-page="login"] {
	font-family: 'Cairo', sans-serif !important;
	margin: 0; padding: 0;
	background: #07254a !important;
	overflow-x: hidden;
}
body[data-page="login"] * { font-family: 'Cairo', sans-serif !important }

body[data-page="login"] .navbar,
body[data-page="login"] .web-footer,
body[data-page="login"] footer { display: none !important }

body[data-page="login"] .main-section { padding: 0 !important; min-height: 100vh !important }
body[data-page="login"] .page-content { padding: 0 !important }
body[data-page="login"] .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important }

/* ===== SPLIT LAYOUT ===== */
body[data-page="login"] .page-card {
	background: transparent !important;
	border: none !important; box-shadow: none !important;
	max-width: 100% !important; margin: 0 !important; padding: 0 !important;
	border-radius: 0 !important; display: flex !important;
	min-height: 100vh; direction: rtl; position: relative;
}

/* RIGHT - Branding Panel (background image) */
body[data-page="login"] .page-card::before {
	content: '';
	position: fixed; right: 0; top: 0;
	width: 50%; height: 100vh; z-index: 0;
	background: url('https://mahgoubceramic.storage.googleapis.com/wp-content/uploads/Home-Page-Banners/bathroom-units-ar.jpg') center/cover no-repeat;
}

body[data-page="login"] .page-card::after {
	content: '';
	position: fixed; right: 0; top: 0;
	width: 50%; height: 100vh; z-index: 1;
	background: linear-gradient(160deg, rgba(7,37,74,.92) 0%, rgba(13,59,102,.85) 50%, rgba(7,37,74,.92) 100%);
}

/* Branding text overlay (via extra element) */
body[data-page="login"]::before {
	content: 'التوحيد';
	position: fixed; right: 0; top: 0;
	width: 50%; height: 100vh; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	font-size: 80px; font-weight: 900;
	color: rgba(201,151,46,.15);
	font-family: 'Cairo', sans-serif !important;
	letter-spacing: -2px;
	pointer-events: none;
}

body[data-page="login"]::after {
	content: 'التوحيد للأدوات الصحية والسيراميك\Aجودة \2022 ثقة \2022 التزام';
	white-space: pre-line;
	position: fixed; right: 0; top: 50%;
	transform: translateY(-50%);
	width: 50%; z-index: 3;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	font-size: 28px; font-weight: 700;
	color: rgba(255,255,255,.9);
	font-family: 'Cairo', sans-serif !important;
	line-height: 2;
	pointer-events: none;
	padding: 40px;
}

/* LEFT - Form Panel */
body[data-page="login"] .page-card > div {
	position: relative; z-index: 5;
	width: 50% !important; margin-right: 50% !important;
	min-height: 100vh;
	display: flex !important; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 48px !important;
	background: #fff;
}

/* Logo */
body[data-page="login"] .page-card .login-content .page-card-head {
	text-align: center; margin-bottom: 36px !important;
}
body[data-page="login"] .page-card-head img { display: none !important }
body[data-page="login"] .page-card-head .title { display: none !important }

body[data-page="login"] .page-card-head::before {
	content: '◆ التوحيد';
	display: block; font-size: 36px; font-weight: 900;
	color: #0D3B66; margin-bottom: 8px; line-height: 1.2;
}
body[data-page="login"] .page-card-head::after {
	content: 'سجّل دخولك للمتابعة إلى لوحة التحكم';
	display: block; font-size: 14px; color: #6b7280; margin-top: 8px;
}

/* Form */
body[data-page="login"] .login-content { width: 100%; max-width: 400px }

body[data-page="login"] .form-group { margin-bottom: 22px !important }
body[data-page="login"] .form-group label,
body[data-page="login"] .form-group .clearfix {
	font-weight: 700 !important; font-size: 13px !important;
	color: #374151 !important; margin-bottom: 8px !important;
}

body[data-page="login"] .form-control,
body[data-page="login"] input[type="text"],
body[data-page="login"] input[type="email"],
body[data-page="login"] input[type="password"] {
	height: 52px !important;
	border: 2px solid #e5e7eb !important;
	border-radius: 14px !important;
	padding: 14px 18px !important;
	font-size: 15px !important;
	color: #1f2937 !important;
	background: #f9fafb !important;
	transition: all .3s ease !important;
	direction: ltr; text-align: right;
	width: 100%;
}

body[data-page="login"] .form-control:focus,
body[data-page="login"] input:focus {
	border-color: #0D3B66 !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(13,59,102,.08) !important;
	outline: none !important;
}

/* Login Button */
body[data-page="login"] .btn-primary,
body[data-page="login"] .btn-primary-dark,
body[data-page="login"] .btn-login {
	width: 100% !important; height: 52px !important;
	background: linear-gradient(135deg, #0D3B66, #1565C0) !important;
	border: none !important; border-radius: 14px !important;
	font-size: 16px !important; font-weight: 700 !important;
	color: #fff !important; cursor: pointer !important;
	transition: all .3s ease !important; margin-top: 8px;
	letter-spacing: .5px;
}
body[data-page="login"] .btn-primary:hover,
body[data-page="login"] .btn-login:hover {
	background: linear-gradient(135deg, #07254a, #0D3B66) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 30px rgba(13,59,102,.25) !important;
}

/* Social login */
body[data-page="login"] .btn-default {
	height: 48px !important; border: 2px solid #e5e7eb !important;
	border-radius: 14px !important; font-weight: 600 !important;
	transition: all .3s ease !important; background: #fff !important;
}
body[data-page="login"] .btn-default:hover {
	border-color: #0D3B66 !important; background: rgba(13,59,102,.02) !important;
}

/* Links */
body[data-page="login"] a { color: #0D3B66 !important; font-weight: 600 }
body[data-page="login"] a:hover { color: #C9972E !important }

/* Divider */
body[data-page="login"] .or-section { margin: 24px 0 !important; color: #9ca3af; font-size: 13px }

/* Error */
body[data-page="login"] .indicator-right.red { border-radius: 12px !important; font-size: 13px !important }

/* ===== MOBILE ===== */
@media (max-width: 992px) {
	body[data-page="login"] .page-card::before,
	body[data-page="login"] .page-card::after,
	body[data-page="login"]::before,
	body[data-page="login"]::after { display: none !important }

	body[data-page="login"] .page-card > div {
		width: 100% !important; margin-right: 0 !important;
	}
	body[data-page="login"] { background: #fff !important }
	body[data-page="login"] .page-card { flex-direction: column !important }
}

@media (max-width: 576px) {
	body[data-page="login"] .page-card > div { padding: 28px !important }
	body[data-page="login"] .page-card-head::before { font-size: 28px }
}