/* =========================================================
   نظام الحوالات
   صفحة تسجيل الدخول
   Login CSS - Part 1
========================================================= */

:root{

    /* ========= Colors ========= */

    --primary:#0D1B2A;
    --primary-light:#1B263B;
    --secondary:#415A77;

    --gold:#D4AF37;
    --gold-light:#F4D35E;

    --success:#2ECC71;
    --danger:#E74C3C;

    --white:#FFFFFF;
    --text:#F8FAFC;
    --text-soft:#D4D9E2;

    --glass:rgba(255,255,255,.08);
    --glass-strong:rgba(255,255,255,.13);

    --border:rgba(255,255,255,.14);

    --shadow-big:
        0 30px 70px rgba(0,0,0,.45);

    --shadow-small:
        0 10px 30px rgba(0,0,0,.25);

    --transition:.35s ease;

    --radius:24px;

}


/* =======================================
            RESET
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    direction:rtl;

    font-family:'Cairo',sans-serif;

    color:var(--text);

    background:#09111C;

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}


/* =======================================
            BACKGROUND
======================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at 20% 15%,
        rgba(212,175,55,.18),
        transparent 35%),

        radial-gradient(circle at 90% 10%,
        rgba(55,105,255,.22),
        transparent 30%),

        radial-gradient(circle at 80% 85%,
        rgba(255,255,255,.06),
        transparent 35%),

        linear-gradient(
            135deg,
            #071018 0%,
            #10233D 45%,
            #08111B 100%
        );

    z-index:-3;

}


/* Glow */

body::after{

    content:"";

    position:fixed;

    width:450px;

    height:450px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.18),
        transparent 70%
    );

    filter:blur(60px);

    z-index:-2;

}


/* =======================================
        الصفحة كاملة
======================================= */

.login-page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:35px 22px;

}


/* =======================================
      أسماء الشركات
======================================= */

.companies-branding{

    width:100%;

    margin-bottom:45px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.company-name{

    font-weight:900;

    letter-spacing:.6px;

    text-align:center;

    color:white;

    font-size:1.55rem;

    text-shadow:

        0 0 12px rgba(255,255,255,.30),

        0 0 22px rgba(212,175,55,.40),

        0 0 45px rgba(212,175,55,.20);

    transition:var(--transition);

    cursor:default;

    user-select:none;

}

.company-name:hover{

    transform:translateY(-2px);

    text-shadow:

        0 0 16px white,

        0 0 28px rgba(212,175,55,.80),

        0 0 60px rgba(212,175,55,.55);

}


/* =======================================
        Responsive البداية
======================================= */

@media(min-width:768px){

    .login-page{

        padding:50px;

    }

    .company-name{

        font-size:2rem;

    }

}

@media(min-width:1200px){

    .company-name{

        font-size:2.35rem;

    }

}

/* =========================================================
   Login CSS - Part 2
   بطاقة تسجيل الدخول
=========================================================*/


/*=========================================
            LOGIN CARD
=========================================*/

.login-card{

    width:100%;

    max-width:470px;

    background:var(--glass);

    border:1px solid var(--border);

    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);

    border-radius:var(--radius);

    padding:34px 28px;

    box-shadow:
        var(--shadow-big),
        inset 0 1px 0 rgba(255,255,255,.12);

    position:relative;

    overflow:hidden;

    transition:var(--transition);

}

.login-card::before{

    content:"";

    position:absolute;

    top:-140px;
    right:-120px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.18),
    transparent 72%);

    filter:blur(12px);

    pointer-events:none;

}

.login-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.05);

    pointer-events:none;

}

.login-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 45px 90px rgba(0,0,0,.55),
        0 0 35px rgba(212,175,55,.08);

}


/*=========================================
            HEADER
=========================================*/

.login-header{

    text-align:center;

    margin-bottom:28px;

}

.login-header h3{

    font-size:2rem;

    font-weight:900;

    color:white;

    margin-bottom:12px;

    letter-spacing:.4px;

}

.login-header p{

    color:#FFD166;

    font-size:.95rem;

    line-height:1.8;

    font-weight:700;

}


/*=========================================
            ERROR
=========================================*/

.error-message{

    background:rgba(231,76,60,.14);

    border:1px solid rgba(231,76,60,.35);

    color:#FFD7D2;

    border-radius:16px;

    padding:14px;

    margin-bottom:22px;

    text-align:center;

    font-weight:700;

}


/*=========================================
            FORM
=========================================*/

.login-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*=========================================
            GROUP
=========================================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-group label{

    color:var(--text);

    font-size:.95rem;

    font-weight:700;

}


/*=========================================
            INPUT
=========================================*/

.form-group input{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.07);

    color:white;

    font-size:1rem;

    font-family:'Cairo',sans-serif;

    outline:none;

    transition:var(--transition);

}

.form-group input::placeholder{

    color:rgba(255,255,255,.45);

}

.form-group input:hover{

    background:rgba(255,255,255,.09);

}

.form-group input:focus{

    border-color:var(--gold);

    background:rgba(255,255,255,.12);

    box-shadow:

        0 0 0 4px rgba(212,175,55,.12),

        0 0 18px rgba(212,175,55,.18);

}


/*=========================================
            BUTTON
=========================================*/

.login-button{

    margin-top:10px;

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-family:'Cairo',sans-serif;

    font-size:1rem;

    font-weight:800;

    color:#09111C;

    background:
    linear-gradient(
        135deg,
        #FFD54F,
        #D4AF37
    );

    transition:var(--transition);

    box-shadow:

        0 15px 35px rgba(212,175,55,.35);

}

.login-button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 20px 45px rgba(212,175,55,.45);

}

.login-button:active{

    transform:scale(.98);

}


/*=========================================
            TABLET
=========================================*/

@media(min-width:768px){

    .login-card{

        padding:42px;

        max-width:520px;

    }

}

/* =========================================================
   Login CSS - Part 3
   Premium Effects & Polish
=========================================================*/


/*=========================================
        تحسين البطاقة الزجاجية
=========================================*/

.login-card{

    isolation:isolate;

}

.login-card::before{

    animation:goldGlow 8s ease-in-out infinite alternate;

}

.login-card::after{

    background:

        linear-gradient(
            120deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.04) 25%,
            transparent 45%,
            transparent 70%,
            rgba(255,255,255,.08) 100%
        );

}


/* انعكاس زجاجي */

.login-card .glass-reflection{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:inherit;

    pointer-events:none;

}

.login-card .glass-reflection::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-55%;

    width:45%;

    height:320%;

    background:

    linear-gradient(

        to right,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(28deg);

    animation:glassMove 10s linear infinite;

}


/*=========================================
        أسماء الشركات
=========================================*/

.company-name{

    position:relative;

}

.company-name::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-6px;

    width:0;

    height:2px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--gold),

        transparent

    );

    transition:var(--transition);

}

.company-name:hover::after{

    width:90%;

}


/*=========================================
        تحسين الحقول
=========================================*/

.form-group input{

    caret-color:var(--gold);

}

.form-group input:focus{

    transform:translateY(-1px);

}

.form-group label{

    transition:var(--transition);

}

.form-group:focus-within label{

    color:var(--gold-light);

}


/*=========================================
        الزر
=========================================*/

.login-button{

    position:relative;

    overflow:hidden;

}

.login-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.login-button:hover::before{

    left:170%;

}

.login-button:hover{

    letter-spacing:.4px;

}


/*=========================================
        Selection
=========================================*/

::selection{

    background:rgba(212,175,55,.35);

    color:white;

}


/*=========================================
        Scrollbar
=========================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08111B;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        180deg,

        var(--gold-light),

        var(--gold)

    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#FFD54F;

}


/*=========================================
        Animations
=========================================*/

@keyframes glassMove{

    0%{

        left:-150%;

    }

    100%{

        left:220%;

    }

}

@keyframes goldGlow{

    from{

        opacity:.45;

        transform:scale(.9);

    }

    to{

        opacity:.95;

        transform:scale(1.15);

    }

}


/*=========================================
        Accessibility
=========================================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto;

    }

}

/* =========================================================
   Login CSS - Part 4
   Responsive & Final Polish
=========================================================*/


/*=========================================
            Mobile Small
=========================================*/

@media(max-width:360px){

    .login-page{

        padding:20px 16px;

    }

    .company-name{

        font-size:1.3rem;

    }

    .login-card{

        padding:24px 18px;

        border-radius:20px;

    }

    .login-header h3{

        font-size:1.55rem;

    }

    .login-button{

        height:56px;

    }

}


/*=========================================
        Mobile Landscape
=========================================*/

@media(max-height:620px){

    .login-page{

        padding:30px 18px;

    }

    .companies-branding{

        margin-bottom:22px;

    }

}


/*=========================================
            Tablet
=========================================*/

@media(min-width:768px){

    .login-page{

        padding:55px;

    }

    .login-card{

        max-width:540px;

    }

}


/*=========================================
            Laptop
=========================================*/

@media(min-width:1200px){

    .login-card{

        max-width:560px;

    }

}


/*=========================================
        Large Desktop
=========================================*/

@media(min-width:1600px){

    .company-name{

        font-size:2.7rem;

    }

    .login-card{

        max-width:600px;

    }

}


/*=========================================
            Inputs
=========================================*/

input{

    -webkit-appearance:none;

    appearance:none;

}


/*=========================================
            Buttons
=========================================*/

button{

    -webkit-tap-highlight-color:transparent;

}


/*=========================================
        Images
=========================================*/

img{

    max-width:100%;

    display:block;

}


/*=========================================
        Links
=========================================*/

a{

    text-decoration:none;

    color:inherit;

}


/*=========================================
        Focus
=========================================*/

button:focus-visible,

input:focus-visible{

    outline:none;

}


/*=========================================
        Final Polish
=========================================*/

.login-card{

    will-change:transform;

}

.login-button{

    user-select:none;

}

.company-name{

    user-select:none;

}