/* ============================================================
           ZINOX LOGIN — REDESIGN v3
           Desktop : two-column card (form left / branding right)
           Mobile  : single-column form, full-screen
        ============================================================ */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Vazirmatn', Arial, sans-serif;
            min-height: 100vh;
            background: #EEF2F7;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-font-smoothing: antialiased;
        }

        [data-theme="dark"] body { background: #060C14; }

        /* ── WRAPPER ─────────────────────────────────────────────── */
        .auth-wrapper {
            width: 100%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
        }

        /* ── CARD ────────────────────────────────────────────────── */
        .auth-card {
            width: 100%;
            max-width: 1080px;
            background: #fff;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 32px 80px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.08);
            display: flex;
            /* RTL: first child → RIGHT, second child → LEFT */
            flex-direction: row;
            min-height: 566px;
            height: 558px;
        }

        [data-theme="dark"] .auth-card { background: #141B24; box-shadow: 0 32px 80px rgba(0,0,0,.5); }

        /* ════════════════════════════════════════════════════════════
           BRANDING PANEL  (RIGHT side — image only, full bleed)
        ════════════════════════════════════════════════════════════ */
        .branding-panel {
            flex: 1;
            position: relative;
            overflow: hidden;
            padding: 0;
            min-height: 0;
            background: #050C19;
        }

        .branding-panel-img {
            position: absolute;
            inset: 0;
            width: 106%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0;
            transition: opacity 1.2s ease-in-out;
        }

        .branding-panel-img.active {
            opacity: 1;
        }

        /* ════════════════════════════════════════════════════════════
           FORM PANEL  (LEFT side — second in DOM for RTL)
        ════════════════════════════════════════════════════════════ */
        .form-panel {
            width: 400px;
            min-width: 360px;
            background: #fff;
            display: flex;
            flex-direction: column;
            padding: 36px 40px 28px 40px;
            overflow-y: auto;
        }

        [data-theme="dark"] .form-panel { background: #141B24; }

        /* ── Logo ───────────────────────────────────────────────── */
        .form-logo { margin-bottom: 0; }

        .logo-en {
            font-size: 20px;
            font-weight: 800;
            color: #0B0F14;
            letter-spacing: 1.5px;
            line-height: 1;
        }
        [data-theme="dark"] .logo-en { color: #E2EAF4; }

        .logo-fa {
            font-size: 11px;
            color: #9AA8B8;
            margin-top: 2px;
            display: block;
        }

        /* ── Steps container ────────────────────────────────────── */
        .form-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 24px 0 16px;
        }

        .login-step { display: none; }
        .login-step.active { display: block; }

        /* ── Headings ───────────────────────────────────────────── */
        .form-title {
            font-size: 28px;
            font-weight: 700;
            color: #0B0F14;
            margin-bottom: 6px;
        }
        [data-theme="dark"] .form-title { color: #E2EAF4; }

        .form-sub {
            font-size: 13.5px;
            color: #6B7A8A;
            margin-bottom: 28px;
            line-height: 1.6;
        }

        /* ── Field ──────────────────────────────────────────────── */
        .field-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 7px;
        }
        [data-theme="dark"] .field-label { color: #9AA8B8; }

        .input-wrap { position: relative; margin-bottom: 7px; }

        .input-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #B0BEC5;
            font-size: 14px;
            pointer-events: none;
        }

        .form-input {
            width: 100%;
            padding: 13px 42px 13px 16px;
            border: 1.5px solid #E5E7EB;
            border-radius: 12px;
            font-size: 15px;
            font-family: 'Vazirmatn', Arial, sans-serif;
            color: #0B0F14;
            background: #fff;
            transition: border-color .2s, box-shadow .2s;
            text-align: right;
            direction: ltr;
        }
        .form-input::placeholder { color: #CBD5E0; direction: rtl; }
        .form-input:focus {
            outline: none;
            border-color: #00AEEF;
            box-shadow: 0 0 0 3px rgba(0,174,239,.14);
        }

        [data-theme="dark"] .form-input {
            background: #1A2330;
            border-color: #243040;
            color: #D9E2EC;
        }
        [data-theme="dark"] .form-input:focus {
            background: #1A2330;
            border-color: #00AEEF;
        }

        .field-hint { font-size: 12px; color: #9AA8B8; margin-bottom: 22px; display: block; }

        /* ── Buttons ────────────────────────────────────────────── */
        .btn-otp {
            width: 100%;
            padding: 13px 20px;
            background: #00AEEF;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Vazirmatn', Arial, sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: background .2s, transform .15s, box-shadow .2s;
            margin-bottom: 14px;
        }
        .btn-otp:hover:not(:disabled) {
            background: #0099D4;
            transform: translateY(-1px);
            box-shadow: 0 6px 22px rgba(0,174,239,.35);
        }
        .btn-otp:disabled { background: #9AA8B8; cursor: not-allowed; transform: none; box-shadow: none; }

        .or-div {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            color: #CBD5E0;
            font-size: 13px;
        }
        .or-div::before, .or-div::after { content:''; flex:1; height:1px; background:#E5E7EB; }
        [data-theme="dark"] .or-div::before,
        [data-theme="dark"] .or-div::after { background: #243040; }
        [data-theme="dark"] .or-div { color: #3D4F62; }

        .btn-account {
            width: 100%;
            padding: 12px 20px;
            background: #fff;
            color: #374151;
            border: 1.5px solid #E5E7EB;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Vazirmatn', Arial, sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: border-color .2s, background .2s;
        }
        .btn-account:hover:not(:disabled) { border-color: #9AA8B8; background: #F9FAFB; }
        .btn-account:disabled { opacity: .6; cursor: not-allowed; }

        [data-theme="dark"] .btn-account {
            background: #1A2330;
            border-color: #243040;
            color: #9AA8B8;
        }
        [data-theme="dark"] .btn-account:hover:not(:disabled) { border-color: #375070; background: #1f2d40; }

        .btn-back-link {
            width: 100%;
            padding: 11px;
            background: transparent;
            color: #6B7A8A;
            border: 1.5px solid #E5E7EB;
            border-radius: 12px;
            font-size: 13.5px;
            font-family: 'Vazirmatn', Arial, sans-serif;
            cursor: pointer;
            margin-top: 10px;
            transition: border-color .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-back-link:hover { border-color: #9AA8B8; }
        [data-theme="dark"] .btn-back-link { border-color: #243040; color: #6B7A8A; }
        [data-theme="dark"] .btn-back-link:hover { border-color: #375070; }

        .btn-primary-full {
            width: 100%;
            padding: 13px;
            background: #00AEEF;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Vazirmatn', Arial, sans-serif;
            cursor: pointer;
            margin-top: 14px;
            transition: background .2s, transform .15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .btn-primary-full:hover:not(:disabled) { background: #0099D4; transform: translateY(-1px); }
        .btn-primary-full:disabled { background: #9AA8B8; cursor: not-allowed; transform: none; }

        /* ── Alerts ─────────────────────────────────────────────── */
        .login-alert {
            border-radius: 10px;
            padding: 11px 14px;
            margin-bottom: 14px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .la-danger  { background: rgba(239,68,68,.08);  color: #DC2626; border: 1px solid rgba(239,68,68,.2); }
        .la-success { background: rgba(0,174,239,.08);  color: #0077A3; border: 1px solid rgba(0,174,239,.2); }
        .la-info    { background: rgba(59,130,246,.08); color: #1D4ED8; border: 1px solid rgba(59,130,246,.2); }
        .la-warning { background: rgba(245,158,11,.08); color: #92400E; border: 1px solid rgba(245,158,11,.2); }

        /* ── Phone badge (inside OTP/password steps) ────────────── */
        .phone-badge {
            background: rgba(0,174,239,.08);
            border: 1px solid rgba(0,174,239,.22);
            border-radius: 10px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 13.5px;
        }
        .phone-badge-number { color: #00AEEF; font-weight: 600; direction: ltr; }
        .btn-change-ph {
            background: none; border: none; color: #9AA8B8; font-size: 12px;
            cursor: pointer; padding: 4px 8px; border-radius: 6px;
            font-family: 'Vazirmatn', Arial, sans-serif; transition: color .2s;
        }
        .btn-change-ph:hover { color: #00AEEF; }

        /* ── OTP input ──────────────────────────────────────────── */
        .otp-icon-wrap {
            width: 62px; height: 62px;
            border-radius: 50%;
            background: linear-gradient(135deg, #00AEEF, #0078A8);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 14px;
            color: #fff; font-size: 24px;
        }

        .verification-input {
            width: 100%;
            padding: 15px;
            border: 1.5px solid #E5E7EB;
            border-radius: 12px;
            font-size: 22px;
            letter-spacing: 10px;
            text-align: center;
            font-family: 'Courier New', monospace;
            font-weight: 700;
            color: #0B0F14;
            background: #F9FAFB;
            transition: border-color .2s, box-shadow .2s;
        }
        .verification-input:focus {
            outline: none;
            border-color: #00AEEF;
            box-shadow: 0 0 0 3px rgba(0,174,239,.14);
            background: #fff;
        }
        [data-theme="dark"] .verification-input { background: #1A2330; border-color: #243040; color: #D9E2EC; }
        [data-theme="dark"] .verification-input:focus { background: #1A2330; border-color: #00AEEF; }

        .resend-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
            font-size: 13px;
        }
        .btn-resend {
            background: none; border: none;
            color: #00AEEF; cursor: pointer;
            font-family: 'Vazirmatn', Arial, sans-serif;
            font-size: 13px; padding: 4px 8px;
            border-radius: 6px; transition: background .2s;
        }
        .btn-resend:hover:not(:disabled) { background: rgba(0,174,239,.1); }
        .btn-resend:disabled { color: #9AA8B8; cursor: not-allowed; }

        /* ── Remember / forgot ──────────────────────────────────── */
        .pwd-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 14px 0 18px;
            font-size: 13px;
            color: #6B7A8A;
        }
        .pwd-meta a { color: #00AEEF; text-decoration: none; }
        .pwd-meta a:hover { text-decoration: underline; }
        .pwd-meta label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
        [data-theme="dark"] .pwd-meta { color: #6B7A8A; }

        /* ── Spinner ────────────────────────────────────────────── */
        .spinner {
            width: 17px; height: 17px;
            border: 2px solid rgba(255,255,255,.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .75s linear infinite;
            display: inline-block; flex-shrink: 0;
        }
        .spinner-dark {
            border-color: rgba(0,0,0,.15);
            border-top-color: #374151;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── Form footer ────────────────────────────────────────── */
        .form-footer {
            font-size: 12px;
            color: #9AA8B8;
            text-align: center;
            padding-top: 18px;
            border-top: 1px solid #F3F4F6;
            line-height: 1.7;
        }
        .form-footer a { color: #00AEEF; text-decoration: none; }
        .form-footer a:hover { text-decoration: underline; }
        [data-theme="dark"] .form-footer { border-top-color: #1E2B3A; }

        /* ── Theme toggle (fixed) ───────────────────────────────── */
        .theme-toggle-btn {
            position: fixed;
            top: 20px; left: 20px;
            width: 44px; height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.22);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 16px;
            cursor: pointer;
            transition: background .2s;
            z-index: 1000;
            backdrop-filter: blur(8px);
        }
        .theme-toggle-btn:hover { background: rgba(0,174,239,.35); }

        /* ════════════════════════════════════════════════════════════
           RESPONSIVE — MOBILE  (≤ 991px)
        ════════════════════════════════════════════════════════════ */
        @media (max-width: 991px) {
            body { background: #fff; align-items: flex-start; }
            [data-theme="dark"] body { background: #141B24; }

            .auth-wrapper { padding: 0; min-height: 100vh; align-items: stretch; }

            .auth-card {
                flex-direction: column;
                border-radius: 0;
                box-shadow: none;
                min-height: 100vh;
                height: auto;
                max-width: 100%;
            }

            .branding-panel { display: none !important; }

            .form-panel {
                width: 100%;
                min-width: unset;
                min-height: 100vh;
                padding: 28px 24px 24px;
            }

            .form-title { font-size: 26px; }

            .form-input {
                padding: 15px 42px 15px 16px;
                font-size: 16px;
            }

            .btn-otp, .btn-primary-full { padding: 15px; font-size: 16px; }
            .btn-account { padding: 13px; }

            .verification-input {
                font-size: 20px;
                letter-spacing: 8px;
                padding: 17px;
            }

            .theme-toggle-btn {
                background: rgba(0,174,239,.1);
                color: #00AEEF;
                border-color: rgba(0,174,239,.25);
            }
        }

        @media (max-width: 480px) {
            .form-panel { padding: 22px 18px 20px; }
            .form-title { font-size: 23px; }
            .verification-input { font-size: 18px; letter-spacing: 6px; }
        }

        /* landscape mobile */
        @media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
            .form-panel { padding: 18px 28px 14px; min-height: 100vh; }
            .form-body   { padding: 10px 0 10px; }
            .form-title  { font-size: 20px; margin-bottom: 4px; }
            .form-sub    { margin-bottom: 14px; }
            .field-hint  { margin-bottom: 12px; }
        }

        /* focus rings */
        .btn-otp:focus-visible,
        .btn-account:focus-visible,
        .btn-primary-full:focus-visible,
        .form-input:focus-visible,
        .verification-input:focus-visible {
            outline: 2px solid #00AEEF;
            outline-offset: 2px;
        }