/* ZadSooq auth pages: login, register, password (v1.2, 2026-10-16)
   Loaded via intl-tel-input custom.css (the auth layout has no Custom CSS hook). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

.auth-login-register,
.auth-login-register h1, .auth-login-register h2, .auth-login-register h3, .auth-login-register h4,
.auth-login-register .btn, .auth-login-register input, .auth-login-register select, .auth-login-register label {
	font-family: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif !important;
}
.auth-login-register {
	--bs-primary: #5B2BC4;
	--bs-primary-rgb: 91, 43, 196;
	--bs-link-color: #5B2BC4;
	--bs-link-color-rgb: 91, 43, 196;
	--bs-link-hover-color: #4A21A6;
	--bs-link-hover-color-rgb: 74, 33, 166;
	color: #1E1633;
}

/* Brand panel */
.auth-login-register .hero-wrap { position: relative; overflow: hidden; background: #1E1633 !important; }
.auth-login-register .hero-mask,
.auth-login-register .hero-bg { display: none !important; }
.auth-login-register .hero-wrap::before {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	border: 64px solid #F2B230;
	opacity: .9;
	inset-inline-end: -300px;
	top: -320px;
	pointer-events: none;
}
.auth-login-register .hero-wrap::after {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: #5B2BC4;
	opacity: .6;
	inset-inline-start: -110px;
	bottom: -130px;
	pointer-events: none;
}
.auth-login-register .hero-content { position: relative; z-index: 1; }
.auth-login-register .hero-content h1 { font-weight: 700 !important; letter-spacing: 0; }
.auth-login-register .hero-content p { color: rgba(255, 255, 255, .75) !important; }

/* Form side */
.auth-login-register .col-md-6.d-flex { background: #fff; }
.auth-login-register h3, .auth-login-register h2 { font-weight: 700 !important; color: #1E1633; }
.auth-login-register .form-control,
.auth-login-register .form-select,
.auth-login-register .iti input {
	border-radius: 12px !important;
	border-color: #E6E1F0 !important;
	min-height: 46px;
	font-size: 16px;
}
.auth-login-register .input-group .form-control { border-radius: 12px !important; }
.auth-login-register .form-control:focus,
.auth-login-register .form-select:focus {
	border-color: #5B2BC4 !important;
	box-shadow: 0 0 0 4px rgba(91, 43, 196, .15) !important;
}
.auth-login-register .btn-primary {
	background: #5B2BC4 !important;
	border-color: #5B2BC4 !important;
	background-image: none !important;
	color: #fff !important;
	border-radius: 12px !important;
	min-height: 48px;
	font-weight: 600;
}
.auth-login-register .btn-primary:hover { background: #4A21A6 !important; border-color: #4A21A6 !important; }
.auth-login-register a.link-primary,
.auth-login-register .link-primary { color: #5B2BC4 !important; }
.auth-login-register .form-check-input:checked { background-color: #5B2BC4; border-color: #5B2BC4; }

/* Sign-up: hide the confusing "notification channel" choice.
   SMS (phone) stays selected by default, which matches phone-based sign-up. */
#signupForm .mb-3:has(> .form-check > input[name="auth_field"]) { display: none !important; }

/* Sign-up: no card-inside-a-card (the old theme gave the form its own shadow) */
#signupForm { box-shadow: none !important; background: transparent !important; border: 0 !important; }

/* Sign-up: "confirm password" is filled automatically from the password (see custom.js) */
#signupForm .zs-hidden-confirm { display: none !important; }

/* Sign-up: password rules tick green as you type */
#signupForm .zs-pw-rules { margin-top: 8px; display: grid; gap: 4px; }
#signupForm .zs-pw-rules span.d-block { color: #6B6580; font-size: 13px; transition: color .15s ease; }
#signupForm .zs-pw-rules span.d-block i {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #E6E1F0;
	color: transparent;
	font-size: 11px;
	margin-inline-end: 6px;
	vertical-align: -2px;
	transition: background-color .15s ease, color .15s ease;
}
#signupForm .zs-pw-rules span.zs-ok { color: #1F8A4C; }
#signupForm .zs-pw-rules span.zs-ok i { background: #1FAF5A; color: #fff; }
#signupForm .zs-phone-hint { color: #6B6580; font-size: 13px; margin-top: 6px; }

/* Sign-up: tidy consent checkboxes */
#signupForm .form-check { display: flex; align-items: flex-start; gap: 10px; padding-inline-start: 0; }
#signupForm .form-check .form-check-input { float: none; margin: 3px 0 0; width: 20px; height: 20px; flex: none; border-radius: 6px; border-color: #CFC4EC; }
#signupForm .form-check-label { font-size: 14px; font-weight: 500 !important; line-height: 1.6; color: #1E1633; }

/* Alerts */
.auth-login-register .alert { border-radius: 12px; border: 0; }
.auth-login-register .alert-info { background: #EEE8FB; color: #3A1A86; }
.auth-login-register .alert-danger { background: #FDECEC; color: #8A1C1C; }

@media (prefers-reduced-motion: reduce) { .auth-login-register * { transition: none !important; } }