/**
 * تم روشن ورود/ثبت‌نام (Inertia + MobileAuthLayout)
 * با !important روی Vue scoped overrides می‌شود؛ بعد از app.css و custom-site-css لود شود.
 */
.mobile-auth-layout {
    background:
        radial-gradient(circle at 92% -12%, rgba(255, 109, 163, 0.28), transparent 42%) !important,
        radial-gradient(circle at -8% 50%, rgba(168, 85, 247, 0.2), transparent 48%) !important,
        linear-gradient(180deg, #fbfaff 0%, #f5f3fb 100%) !important;
}

.mobile-auth-layout .mobile-auth-card {
    width: 100%;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 26px !important;
    padding: 28px 22px 26px !important;
    box-shadow: 0 14px 44px -14px rgba(122, 95, 196, 0.22) !important;
    border: 1px solid rgba(140, 120, 200, 0.14) !important;
    color: #1f1733 !important;
}

.mobile-auth-layout .mobile-auth-card__title {
    color: #1f1733 !important;
}

.mobile-auth-layout .mobile-auth-card__subtitle,
.mobile-auth-layout .mobile-auth-card__intro {
    color: #6e6985 !important;
}

.mobile-auth-layout .mobile-auth-card__logo {
    filter: none !important;
}

.mobile-auth-layout .mobile-auth-label {
    color: #334155 !important;
}

.mobile-auth-layout .mobile-auth-input {
    background: #ffffff !important;
    color: #1f1733 !important;
    border: 1px solid rgba(140, 120, 200, 0.26) !important;
}

.mobile-auth-layout .mobile-auth-input:focus {
    border-color: rgba(255, 77, 141, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.18) !important;
    background: #ffffff !important;
}

.mobile-auth-layout .mobile-auth-input::placeholder {
    color: #9692ad !important;
    opacity: 1 !important;
}

.mobile-auth-layout .mobile-auth-input.is-invalid {
    border-color: #f87171 !important;
}

.mobile-auth-layout .mobile-auth-field {
    position: relative !important;
}

.mobile-auth-layout .mobile-auth-toggle {
    border: 0 !important;
    background: transparent !important;
    color: #9692ad !important;
    box-shadow: none !important;
}

.mobile-auth-layout .mobile-auth-toggle:hover {
    color: #ff4d8d !important;
}

.mobile-auth-layout .mobile-auth-error {
    color: #dc2626 !important;
}

.mobile-auth-layout .mobile-auth-check {
    color: #475569 !important;
}

.mobile-auth-layout .mobile-auth-check input {
    accent-color: #ff4d8d !important;
}

.mobile-auth-layout .mobile-auth-check a,
.mobile-auth-layout .mobile-auth-footnote a,
.mobile-auth-layout .mobile-auth-link {
    color: #ff4d8d !important;
    font-weight: 700 !important;
}

.mobile-auth-layout .mobile-auth-footnote {
    color: #6e6985 !important;
}

.mobile-auth-layout .mobile-auth-btn {
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ff4d8d 0%, #b157e8 60%, #ffa07a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px -8px rgba(255, 77, 141, 0.55) !important;
}

.mobile-auth-layout .mobile-auth-btn--ghost {
    background: #ffffff !important;
    color: #1f1733 !important;
    border: 2px solid rgba(140, 120, 200, 0.38) !important;
    box-shadow: none !important;
}

.mobile-auth-layout .mobile-auth-steps__dot {
    background: rgba(140, 120, 200, 0.28) !important;
}

.mobile-auth-layout .mobile-auth-steps__dot.active,
.mobile-auth-layout .mobile-auth-steps__dot.done {
    background: linear-gradient(135deg, #ff4d8d, #b157e8) !important;
}

.mobile-auth-layout .mobile-auth-banner--success {
    background: #ecfdf5 !important;
    border: 1px solid #86efac !important;
    color: #065f46 !important;
}

.mobile-auth-layout .mobile-auth-banner--error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
}

.mobile-auth-layout .mobile-auth-banner__list,
.mobile-auth-layout .mobile-auth-banner--error ul {
    color: inherit !important;
}

.mobile-auth-layout .mobile-auth-alert {
    background: #fef2f2 !important;
    border: 1px solid rgba(252, 165, 165, 0.55) !important;
}

.mobile-auth-layout .mobile-auth-alert__title {
    color: #991b1b !important;
}

.mobile-auth-layout .mobile-auth-alert__list {
    color: #7f1d1d !important;
}