/* Sign-in, sign-up, forgot/reset password and verify email in the app's look
   (Roz/lib/features/auth/presentation/widgets/auth_blue_ui.dart): #F3F8FE page, one
   flat white card (radius 16, #E2E8F0), fields and buttons radius 12, primary #1E88E5,
   Vazirmatn for Dari. CSS only: the app reads these pages' markup and texts. */
body, body.bg-light { background: #F3F8FE !important; color: #0F172A; }
[dir="rtl"] body { font-family: 'Vazirmatn', system-ui, sans-serif; }

.card, .card.shadow { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: none !important; }
.card-body h2, .card-body h1, .card-body .fw-bold { color: #0F172A; }
.text-muted { color: #475569 !important; }
a { color: #1E88E5; }
a:hover { color: #1565C0; }

.form-label { font-weight: 700; color: #475569; font-size: .9rem; }
.form-control, .form-select, .input-group-text {
  border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; color: #0F172A; min-height: 46px;
}
.input-group > .form-control { border-radius: 12px; }
.form-control:focus, .form-select:focus { border-color: #1E88E5; box-shadow: 0 0 0 3px rgba(30, 136, 229, .15); }
.form-check-input:checked { background-color: #1E88E5; border-color: #1E88E5; }

.btn { border-radius: 12px; font-weight: 700; box-shadow: none !important; }
.btn-primary { background: #1E88E5 !important; border-color: #1E88E5 !important; color: #FFFFFF; min-height: 48px; }
.btn-primary:hover { background: #1565C0 !important; border-color: #1565C0 !important; }
.btn-outline-primary, .btn-outline-secondary { background: #FFFFFF; border: 1px solid #E2E8F0; color: #1565C0; }
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: #E3F2FD; color: #1565C0; border-color: #E2E8F0; }

/* Account type choice (buyer / seller), like the app's chips. */
.role-label { border: 1px solid #E2E8F0 !important; border-radius: 12px !important; color: #475569 !important; background: #FFFFFF; }
.role-option input:checked + .role-label { border-color: #1E88E5 !important; background: #E3F2FD !important; color: #1565C0 !important; }

.alert { border-radius: 12px; }
@media (max-width: 575px) { .card-body.p-5 { padding: 24px !important; } }

/* Verify email (verify_email_page.dart). The page's own <style> comes later, hence !important. */
.verify-page { background: #F3F8FE !important; }
.verify-card { border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: none !important; }
.verify-head { background: #1E88E5 !important; }
.verify-note { background: #E3F2FD !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; }
.btn-verify { background: #1E88E5 !important; }
.btn-verify:hover { background: #1565C0 !important; filter: none; }

/* Login: the app's four account types, in its order (seller, employee, customer,
   online seller). The markup keeps customer and vendor first (the app reads them). */
.role-selector { flex-wrap: wrap; }
.role-selector .role-option { flex: 1 1 calc(50% - 10px); }
.role-selector .role-option:has(#role-vendor) { order: 1; }
.role-selector .role-option--employee { order: 2; }
.role-selector .role-option:has(#role-customer) { order: 3; }
.role-selector .role-option--online { order: 4; }
@media (min-width: 576px) { .role-selector .role-option { flex-basis: calc(25% - 10px); } }

/* Sign-up: the app's account types (register_screen.dart), same chips as the login page. */
.signup-roles { display: flex; gap: 10px; margin-bottom: 16px; }
.signup-roles .role-option { position: relative; }
.signup-roles .role-option input { position: absolute; opacity: 0; pointer-events: none; }
.signup-roles .role-label { display: block; padding: 10px 6px; text-align: center; cursor: pointer; font-size: .85rem; }
.signup-roles .role-label i { display: block; font-size: 1.3rem; margin-bottom: 4px; }
.signup-roles .role-option:has(#account-vendor) { order: 1; }
.signup-roles .role-option:has(#account-employee) { order: 2; }
.signup-roles .role-option:has(#account-customer) { order: 3; }
.signup-roles .role-option:has(#account-online_seller) { order: 4; }
/* Employee: no form, only the app's message (accounts are made by the shop owner). */
#signupForm[data-account="employee"] > .mb-3,
#signupForm[data-account="employee"] > button[type="submit"] { display: none; }
/* The request was sent (SellerApprovalCard, submitted). */
.seller-sent { display: grid; gap: 8px; text-align: center; background: #E3F2FD; border-radius: 16px; padding: 18px; margin-bottom: 16px; color: #0F172A; }
.seller-sent i { font-size: 1.8rem; color: #1565C0; }