/* --- GLOBAL RESET --- */
        * {
            box-sizing: border-box; /* CRITICAL: Fixes the padding/width issue */
            margin: 0;
            padding: 0;
            font-family: 'Tahoma', 'Segoe UI', sans-serif;
        }

        :root{
            --bg:#07111f;
            --card:#0f1c2d;
            --border:rgba(255,255,255,.08);
            --text:#fff;
            --textSoft:#8ea3bc;
            --primary:#2563eb;
            --primaryHover:#1d4ed8;
            --orange:#f59e0b;
        }

        /* --- YOUR PROVIDED CSS (WITH RTL FIXES) --- */
        .auth-page{
            min-height:100vh;
            background:
                radial-gradient(circle at top right,#1e3a8a22,transparent 30%),
                radial-gradient(circle at bottom left,#f59e0b22,transparent 30%),
                var(--bg);
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            overflow:hidden;
            padding:40px 20px;
        }

        .bg-glow{
            position:absolute;
            border-radius:50%;
            filter:blur(100px);
            opacity:.25;
            z-index: 1;
        }

        .glow-1{ width:400px; height:400px; background:#2563eb; top:-100px; right:-100px; }
        .glow-2{ width:350px; height:350px; background:#f59e0b; left:-120px; bottom:-120px; }

        .auth-card-wrapper{
            width:100%;
            max-width:520px;
            position:relative;
            z-index:2;
        }

        .auth-logo{
            display:flex;
            justify-content:center;
            margin-bottom:-45px;
            position:relative;
            z-index:5;
        }

        .logo-ring{
            width:110px;
            height:110px;
            border-radius:50%;
            background: linear-gradient(135deg, #1e3a8a, #2563eb);
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow: 0 15px 50px rgba(37,99,235,.45);
        }

        .logo-ring img{ width:65px; height:65px; object-fit:contain; }

        .auth-card{
            background: rgba(15,28,45,.88);
            backdrop-filter:blur(24px);
            border:1px solid var(--border);
            border-radius:36px;
            padding:80px 40px 40px;
            box-shadow: 0 25px 80px rgba(0,0,0,.45);
        }

        .auth-header{ text-align:center; margin-bottom:35px; }
        .auth-header h1{ color:var(--text); font-size:34px; font-weight:900; margin-bottom:12px; }
        .auth-header p{ color:var(--textSoft); font-size:15px; }

        .input-group{ margin-bottom:22px; }
        .input-wrapper{ position:relative; }

        .input-wrapper input{
            width:100%;
            height:68px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.04);
            padding: 0 60px 0 50px; /* Fixed: Right space for Icon, Left for Eye */
            color:#fff;
            font-size:15px;
            transition:.25s;
            text-align: right;
        }

        .input-wrapper input:focus{
            outline:none;
            border-color:#2563eb;
            background: rgba(255,255,255,.06);
            box-shadow: 0 0 0 4px rgba(37,99,235,.12);
        }

        .input-wrapper label{
            position:absolute;
            top:50%;
            right:60px; /* Aligned to Right for RTL */
            transform:translateY(-50%);
            color:#8ea3bc;
            pointer-events:none;
            transition:.25s;
        }

        .input-wrapper input:focus + label,
        .input-wrapper input:not(:placeholder-shown) + label{
            top:-10px;
            right:18px;
            font-size:12px;
            padding:4px 10px;
            border-radius:999px;
            background:#0f1c2d;
            color:#60a5fa;
        }

        .input-wrapper i.fa-solid{
            position:absolute;
            right:22px; /* User/Lock Icon on the Right */
            top:50%;
            transform:translateY(-50%);
            color:#60a5fa;
        }

        .password-toggle{
            position:absolute;
            left:16px; /* Eye button on the Left */
            top:50%;
            transform:translateY(-50%);
            background:none;
            border:none;
            color:#8ea3bc;
            cursor:pointer;
            z-index: 10;
        }

        .auth-options{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:28px;
        }

        .auth-options a{ color:#60a5fa; text-decoration:none; font-size:14px; }
        .remember-box{ display:flex; align-items:center; gap:8px; color:#cbd5e1; font-size:14px; cursor: pointer; }

        .submit-btn{
            width:100%;
            height:68px;
            border:none;
            border-radius:22px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color:#fff;
            font-size:17px;
            font-weight:800;
            cursor:pointer;
            transition:.25s;
            position:relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .submit-btn:hover{
            transform:translateY(-2px);
            box-shadow: 0 15px 40px rgba(37,99,235,.35);
        }

        .auth-error{
            margin-bottom:24px;
            background: rgba(239,68,68,.12);
            border:1px solid rgba(239,68,68,.2);
            color:#fca5a5;
            padding:16px 18px;
            border-radius:18px;
            text-align:center;
        }

        /* ANIMATIONS */
        .stagger-1, .stagger-2, .stagger-3, .stagger-4{ opacity:0; transform:translateY(20px); animation:fadeUp .6s forwards; }
        .stagger-1{ animation-delay:.1s; }
        .stagger-2{ animation-delay:.2s; }
        .stagger-3{ animation-delay:.3s; }
        .stagger-4{ animation-delay:.4s; }
        /* Tabs */
.auth-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.tab-btn {
    padding: 10px 24px;
    background: rgba(255,255,255,.05);
    color: var(--text);
    border-radius: 18px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.25s;
}

.tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}

.auth-form { display: none; flex-direction: column; gap: 16px; }
.auth-form.active { display: flex; }

/* Form buttons */
.submit-btn {
    width: 100%;
    height: 60px;
    border:none;
    border-radius: 22px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color:#fff;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    transition:0.25s;
}

.submit-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(37,99,235,.35);
}

/* Inputs for Sign Up */
.auth-form .input-wrapper input {
    text-align: right;
    padding: 0 50px 0 50px;
    color: #fff;
}
.auth-form .input-wrapper label {
    right: 50px;
}
/* Phone input wrapper */
.phone-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Prefix (flag + +98) on the left inside input */
.phone-prefix {
    position: absolute;
    left: 12px;        /* left side for prefix */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #60a5fa;
    pointer-events: none;
}

/* Input field LTR and padding */
.phone-wrapper input {
    width: 100%;
    padding: 0 50px 0 70px; /* left padding for prefix, right for icon */
    text-align: left;        /* number starts from left */
    direction: ltr;
    font-size: 14px;
}

/* FontAwesome icon stays on the right */
.phone-wrapper i.fa-phone {
    position: absolute;
    right: 12px;       /* right side */
    top: 50%;
    transform: translateY(-50%);
    color: #60a5fa;
}
.password-guidelines {
    list-style: none;
    margin-top: 6px;
    padding-left: 12px;
    font-size: 12px;
    color: #f87171; /* red for invalid */
}

.password-guidelines li.valid { color: #22c55e; } /* green when satisfied */
.password-guidelines li.invalid { color: #f87171; }

#matchMessage.valid { color: #22c55e; }
#matchMessage.invalid { color: #f87171; }
.auth-success {
    margin-bottom: 24px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .22);
    color: #86efac;
    padding: 16px 18px;
    border-radius: 18px;
    text-align: center;
}
/* Responsive */
@media(max-width:768px){
    .auth-card{ padding: 60px 22px 25px; border-radius:28px; }
    .auth-header h1{ font-size:28px; }
    .tab-btn{ padding: 8px 16px; font-size:14px; }
}
        @keyframes fadeUp{ to{ opacity:1; transform:none; } }

        @media(max-width:768px){
            .auth-card{ padding: 70px 22px 25px; border-radius:28px; }
            .auth-header h1{ font-size:28px; }
        }