/*
 * B3D Factory — Luxury Login Page
 * Centered card, soft shadow, Cairo/Tajawal typography, RTL-aware.
 * Applies only to /login (and other website pages via web_include_css) —
 * scoped to .page-card so it never leaks into Desk itself.
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');

:root {
	--b3d-login-bg: #f4f2ee;
	--b3d-login-bg-dark: #17181c;
	--b3d-login-card: #ffffff;
	--b3d-login-card-dark: #1f2025;
	--b3d-login-border: #e2e8f0;
	--b3d-login-border-dark: #2c2d33;
	--b3d-login-accent: #8a6d3b;
	--b3d-login-accent-hover: #765a2c;
	--b3d-login-text: #2b2820;
	--b3d-login-text-dark: #e9e4da;
	--b3d-login-radius: 14px;
}

body {
	font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--b3d-login-bg);
}

body.dark {
	background: var(--b3d-login-bg-dark);
}

html[dir="rtl"] body,
body.rtl {
	font-family: 'Tajawal', 'Cairo', sans-serif;
}

.page-card {
	background: var(--b3d-login-card);
	border: 1px solid var(--b3d-login-border);
	border-radius: var(--b3d-login-radius);
	box-shadow: 0 12px 40px rgba(43, 40, 32, 0.08), 0 2px 8px rgba(43, 40, 32, 0.04);
	max-width: 400px;
	margin: 6vh auto;
	padding: 2.25rem 2rem;
}

body.dark .page-card {
	background: var(--b3d-login-card-dark);
	border-color: var(--b3d-login-border-dark);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.page-card .page-card-head-text h4 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--b3d-login-text);
	text-align: center;
	margin-bottom: 0.25rem;
}

.page-card .page-card-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1rem;
}

.page-card .page-card-subtitle {
	text-align: center;
	color: #6b6558;
	font-size: 0.9rem;
}

body.dark .page-card .page-card-head-text h4 {
	color: var(--b3d-login-text-dark);
}

body.dark .page-card .page-card-subtitle {
	color: #9a9384;
}

.page-card .form-control {
	border: 1px solid var(--b3d-login-border);
	border-radius: 8px;
	padding: 0.6rem 0.85rem;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-card .form-control:focus {
	border-color: var(--b3d-login-accent);
	box-shadow: 0 0 0 3px rgba(138, 109, 59, 0.12);
}

.page-card .btn-login,
.page-card .btn-primary {
	background: var(--b3d-login-accent);
	border-color: var(--b3d-login-accent);
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background 0.15s ease;
}

.page-card .btn-login:hover,
.page-card .btn-primary:hover {
	background: var(--b3d-login-accent-hover);
	border-color: var(--b3d-login-accent-hover);
}

.page-card .forgot-password-message a,
.page-card a {
	color: var(--b3d-login-accent);
	font-weight: 500;
}

.page-card .forgot-password-message a:hover,
.page-card a:hover {
	color: var(--b3d-login-accent-hover);
}

.page-card .form-label {
	font-weight: 500;
	color: var(--b3d-login-text);
	font-size: 0.85rem;
}

body.dark .page-card .form-label {
	color: var(--b3d-login-text-dark);
}

/* RTL: keep field icons and text aligned correctly */
html[dir="rtl"] .page-card .email-field .field-icon,
html[dir="rtl"] .page-card .password-field .field-icon {
	right: auto;
	left: 0.75rem;
}

@media (max-width: 480px) {
	.page-card {
		margin: 4vh 1rem;
		padding: 1.75rem 1.25rem;
	}
}