/* ZadSooq auth pages, part 2 (v1.3, 2026-10-16): modern layout, tabs, benefits panel, OTP page */
/* Form column: one calm, centred column */
.auth-login-register .col-md-6.d-flex > .container { max-width: 480px; padding: 40px 24px !important; }
.auth-login-register .col-md-6.d-flex > .container > .row > [class*="col-"],
.auth-login-register .col-md-6.d-flex > .container .row > [class*="col-xxl"],
.auth-login-register .col-md-6.d-flex > .container .row > [class*="col-xl"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-inline: 0 !important; }
.auth-login-register .col-md-6.d-flex h3 { font-size: 1.75rem !important; margin-bottom: 6px !important; }
.auth-login-register .col-md-6.d-flex p.text-muted.mb-4 { font-size: 15px; line-height: 1.75; color: #6B6580 !important; margin-bottom: 22px !important; }
.auth-login-register .form-label { font-weight: 600 !important; font-size: 14.5px; color: #1E1633; margin-bottom: 6px; }
.auth-login-register .mb-3 { margin-bottom: 18px !important; }
.auth-login-register .form-control, .auth-login-register .iti input { min-height: 50px !important; background: #fff !important; border-width: 1.5px !important; }
.auth-login-register .btn-primary { min-height: 52px !important; font-size: 16.5px !important; font-weight: 700 !important; box-shadow: 0 10px 22px -12px rgba(91, 43, 196, .7); }
.auth-login-register .col-md-6.d-flex a:not(.btn):not(.auth-field):not(.text-secondary):not([role="tab"]) { color: #5B2BC4 !important; font-weight: 600; text-decoration: none; }
.auth-login-register .col-md-6.d-flex a:not(.btn):not(.auth-field):not(.text-secondary):not([role="tab"]):hover { color: #4A21A6 !important; text-decoration: underline; }

/* Login / Sign-up tabs */
.zs-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 26px; background: #F5F3FA; border: 1px solid #E6E1F0; border-radius: 14px; }
.auth-login-register .zs-auth-tabs a { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 10px; font-weight: 600; font-size: 15px; color: #6B6580 !important; text-decoration: none !important; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.auth-login-register .zs-auth-tabs a:hover { color: #1E1633 !important; }
.auth-login-register .zs-auth-tabs a.active { background: #fff; color: #1E1633 !important; box-shadow: 0 2px 8px rgba(30, 22, 51, .08); }
.auth-login-register:has(.zs-auth-tabs) p.text-center:has(a[href$="/auth/register"]),
.auth-login-register:has(.zs-auth-tabs) p.text-center:has(a[href$="/auth/login"]) { font-size: 14px; color: #6B6580 !important; }

/* Purple panel: benefits list */
.auth-login-register .hero-content h1 { font-size: clamp(2rem, 3.2vw, 2.75rem) !important; line-height: 1.3; }
.auth-login-register .hero-content p { font-size: 1.05rem !important; line-height: 1.8 !important; max-width: 440px; }
.zs-hero-points { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; max-width: 420px; }
.zs-hero-points li { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .9); font-size: 15.5px; font-weight: 500; }
.zs-hp-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #F2B230; font-size: 19px; }

/* "use email / use phone" switch as a small chip */
.auth-login-register a.auth-field { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #EEE8FB; color: #5B2BC4 !important; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.auth-login-register a.auth-field:hover { background: #E2D8FA; }

/* Checkboxes (remember me, terms) */
.auth-login-register .form-check { display: flex; align-items: center; gap: 10px; padding-inline-start: 0; margin: 0; }
.auth-login-register .form-check .form-check-input { float: none; margin: 0; flex: none; }
#loginForm .row:has(#rememberMe) { align-items: center; }
#loginForm a[href*="password/forgot"] { font-size: 14px; }
.auth-login-register .form-check-input { width: 20px; height: 20px; border-radius: 6px !important; border-color: #CFC4EC; }
.auth-login-register .form-check-label { font-size: 14px; }

/* Busy button */
.auth-login-register .btn.zs-busy { position: relative; color: transparent !important; pointer-events: none; }
.auth-login-register .btn.zs-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: zs-spin .7s linear infinite; }
@keyframes zs-spin { to { transform: rotate(360deg); } }

/* Verification code page */
.zs-otp-page .col-md-6.d-flex h3 { text-align: center; }
.zs-otp-page .col-md-6.d-flex h3::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; background: #EEE8FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B2BC4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E") center / 30px no-repeat; }
.zs-otp-page .col-md-6.d-flex p.text-muted.mb-4 { text-align: center; }
.zs-otp-box { width: 100% !important; max-width: 100% !important; }
.zs-otp-box .form-label { display: none; }
.auth-login-register input.zs-otp-input { min-height: 68px !important; text-align: center; font-size: 30px !important; font-weight: 700; letter-spacing: .5em; padding-inline-start: .5em !important; font-variant-numeric: tabular-nums; border-radius: 16px !important; }
.auth-login-register input.zs-otp-input::placeholder { color: #CFC4EC; letter-spacing: .3em; font-weight: 400; }
.zs-otp-page p.text-center a.zs-wait { color: #A39DB5 !important; pointer-events: none; }

/* Mobile */
@media (max-width: 767.98px) {
	.auth-login-register .col-md-6.d-flex > .container { padding: 28px 18px 32px !important; }
	.auth-login-register .col-md-6.d-flex h3 { font-size: 1.5rem !important; }
	.zs-auth-tabs { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .auth-login-register .btn.zs-busy::after { animation-duration: 2s; } }