/*
|--------------------------------------------------------------------------
| DigiBot Login CSS
|--------------------------------------------------------------------------
| Version : 1.0
| Status  : Production
|--------------------------------------------------------------------------
*/

:root{

    --digibot-primary:#3b82f6;
    --digibot-primary-hover:#2563eb;

    --digibot-orange:#ff6b00;

    --digibot-bg:#0b1220;
    --digibot-card:#111a31;
    --digibot-card-light:#172342;

    --digibot-text:#ffffff;
    --digibot-text-light:#c6d0e3;
    --digibot-text-muted:#8fa2c4;

    --digibot-border:#273554;

    --digibot-success:#16a34a;
    --digibot-danger:#dc2626;
    --digibot-warning:#f59e0b;
    --digibot-info:#0ea5e9;

    --digibot-shadow:0 20px 60px rgba(0,0,0,.35);

    --digibot-radius:18px;

}

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

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    min-height:100%;
    overflow-x:hidden;

}

body{

    font-family:Inter,"Segoe UI",sans-serif;

    background:var(--digibot-bg);

    color:var(--digibot-text);

    line-height:1.6;

}

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

.digibot-login-page{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.digibot-login-background{

    position:absolute;

    inset:0;

    z-index:1;

}

.digibot-login-bg-image{

    width:100%;

    height:100%;

    object-fit:cover;

}

.digibot-login-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(8,15,30,.88),

            rgba(10,20,45,.78)

        );

}

.digibot-login-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.28;

}

.digibot-glow-1{

    width:320px;

    height:320px;

    background:#2563eb;

    top:-80px;

    left:-100px;

}

.digibot-glow-2{

    width:360px;

    height:360px;

    background:#ff6b00;

    right:-120px;

    bottom:-120px;

}

/*=========================================================
MAIN WRAPPER
=========================================================*/

.digibot-login-wrapper{

    position:relative;

    z-index:10;

    width:min(1180px,94%);

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

}

/*=========================================================
LEFT SIDE
=========================================================*/

.digibot-login-brand{

    color:#fff;

}

.digibot-login-logo{

    width:260px;

    max-width:100%;

    margin-bottom:35px;

}

.digibot-login-title{

    font-size:56px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:18px;

}

.digibot-login-tagline{

    font-size:22px;

    color:var(--digibot-text-light);

    margin-bottom:35px;

}

.digibot-login-divider{

    width:120px;

    height:4px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        var(--digibot-primary),

        var(--digibot-orange)

    );

    margin-bottom:35px;

}

.digibot-feature-list{

    display:grid;

    grid-template-columns:repeat(2,minmax(220px,1fr));

    gap:18px;

}

.digibot-feature-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

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

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

    border-radius:14px;

    backdrop-filter:blur(8px);

}

.digibot-feature-icon{

    font-size:22px;

}

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

.digibot-login-card{

    background:rgba(17,26,49,.92);

    backdrop-filter:blur(20px);

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

    border-radius:24px;

    box-shadow:var(--digibot-shadow);

    padding:50px;

}

.digibot-login-card-header{

    text-align:center;

    margin-bottom:35px;

}

.digibot-login-card-logo{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:18px;

}

.digibot-login-card-header h2{

    font-size:40px;

    font-weight:700;

    margin-bottom:10px;

}

.digibot-login-card-header p{

    color:var(--digibot-text-light);

    font-size:18px;

}

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

.digibot-login-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.digibot-form-group{

    display:flex;

    flex-direction:column;

}

.digibot-form-label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:var(--digibot-text);

}

.digibot-form-control{

    width:100%;

    height:52px;

    padding:0 18px;

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

    border-radius:12px;

    background:var(--digibot-card-light);

    color:var(--digibot-text);

    font-size:15px;

    transition:all .25s ease;

    outline:none;

}

.digibot-form-control::placeholder{

    color:var(--digibot-text-muted);

}

.digibot-form-control:hover{

    border-color:#4b6cb7;

}

.digibot-form-control:focus{

    border-color:var(--digibot-primary);

    box-shadow:0 0 0 4px rgba(59,130,246,.18);

}

.digibot-input-invalid{

    border-color:var(--digibot-danger)!important;

    box-shadow:0 0 0 4px rgba(220,38,38,.18)!important;

}

/*=========================================================
PASSWORD FIELD
=========================================================*/

.digibot-password-group{

    position:relative;

}

.digibot-password-group .digibot-form-control{

    padding-right:55px;

}

.digibot-password-toggle{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    width:34px;

    height:34px;

    border:none;

    background:transparent;

    color:var(--digibot-text-light);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    transition:.25s;

}

.digibot-password-toggle:hover{

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

    color:#fff;

}

/*=========================================================
INLINE ERRORS
=========================================================*/

.digibot-input-error{

    display:block;

    min-height:18px;

    margin-top:6px;

    font-size:13px;

    color:var(--digibot-danger);

}

/*=========================================================
REMEMBER ME
=========================================================*/

.digibot-login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:-4px;

}

.digibot-checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    user-select:none;

    color:var(--digibot-text-light);

}

.digibot-checkbox input{

    width:18px;

    height:18px;

    accent-color:var(--digibot-primary);

}

.digibot-forgot-password{

    color:var(--digibot-primary);

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.digibot-forgot-password:hover{

    color:#60a5fa;

}

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

.digibot-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    height:54px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    transition:.25s;

}

.digibot-btn-primary{

    background:linear-gradient(

        135deg,

        var(--digibot-primary),

        #2563eb

    );

    color:#fff;

}

.digibot-btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 30px rgba(37,99,235,.35);

}

.digibot-btn-primary:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}

.digibot-btn-block{

    width:100%;

}

.digibot-btn-spinner{

    display:flex;

    align-items:center;

    gap:10px;

}

.digibot-spinner{

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:digibot-spin .8s linear infinite;

}

/*=========================================================
ALERTS
=========================================================*/

.digibot-alert{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 16px;

    border-radius:12px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:500;

}

.digibot-alert-success{

    background:rgba(22,163,74,.18);

    color:#86efac;

    border:1px solid rgba(22,163,74,.35);

}

.digibot-alert-danger{

    background:rgba(220,38,38,.18);

    color:#fecaca;

    border:1px solid rgba(220,38,38,.35);

}

.digibot-alert-info{

    background:rgba(14,165,233,.18);

    color:#bae6fd;

    border:1px solid rgba(14,165,233,.35);

}

/*=========================================================
FOOTER
=========================================================*/

.digibot-login-footer{

    margin-top:30px;

    text-align:center;

    color:var(--digibot-text-muted);

    font-size:14px;

}

.digibot-login-footer strong{

    color:#fff;

}

/*=========================================================
ANIMATIONS
=========================================================*/

@keyframes digibot-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes digibot-fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes digibot-float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.digibot-login-card{

    animation:digibot-fadeIn .8s ease;

}

.digibot-login-logo{

    animation:digibot-float 5s ease-in-out infinite;

}

/*=========================================================
LINKS
=========================================================*/

a{

    transition:.25s ease;

}

a:hover{

    text-decoration:none;

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0b1220;

}

::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#475569;

}

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

@media (max-width:1024px){

    .digibot-login-wrapper{

        grid-template-columns:1fr;

        gap:40px;

        width:min(720px,94%);

        padding:40px 0;

    }

    .digibot-login-brand{

        text-align:center;

    }

    .digibot-login-divider{

        margin:30px auto;

    }

    .digibot-feature-list{

        grid-template-columns:repeat(2,1fr);

    }

}

/*=========================================================
MOBILE
=========================================================*/

@media (max-width:768px){

    .digibot-login-page{

        padding:20px;

    }

    .digibot-login-card{

        padding:32px 24px;

    }

    .digibot-login-logo{

        width:190px;

        margin:auto auto 25px;

    }

    .digibot-login-title{

        font-size:40px;

    }

    .digibot-login-tagline{

        font-size:18px;

    }

    .digibot-login-card-header h2{

        font-size:30px;

    }

    .digibot-login-card-header p{

        font-size:16px;

    }

    .digibot-feature-list{

        grid-template-columns:1fr;

    }

    .digibot-login-options{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:576px){

    .digibot-login-page{

        padding:15px;

    }

    .digibot-login-wrapper{

        width:100%;

        gap:25px;

    }

    .digibot-login-card{

        padding:25px 18px;

        border-radius:18px;

    }

    .digibot-login-logo{

        width:160px;

    }

    .digibot-login-title{

        font-size:32px;

    }

    .digibot-login-tagline{

        font-size:16px;

    }

    .digibot-login-card-header h2{

        font-size:26px;

    }

    .digibot-form-control{

        height:48px;

        font-size:14px;

    }

    .digibot-btn{

        height:50px;

        font-size:15px;

    }

}

/*=========================================================
EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:420px){

    .digibot-login-page{

        padding:12px;

    }

    .digibot-login-card{

        padding:20px 16px;

    }

    .digibot-login-title{

        font-size:28px;

    }

    .digibot-login-card-header h2{

        font-size:24px;

    }

    .digibot-feature-item{

        padding:14px;

        font-size:14px;

    }

}

/*=========================================================
ACCESSIBILITY
=========================================================*/

.digibot-btn:focus-visible,
.digibot-form-control:focus-visible,
.digibot-password-toggle:focus-visible,
.digibot-forgot-password:focus-visible{

    outline:2px solid var(--digibot-primary);

    outline-offset:3px;

}

/*=========================================================
UTILITY
=========================================================*/

.digibot-hidden{

    display:none!important;

}

.digibot-text-center{

    text-align:center;

}

.digibot-w-100{

    width:100%;

}

.digibot-mt-10{

    margin-top:10px;

}

.digibot-mt-20{

    margin-top:20px;

}

.digibot-mb-20{

    margin-bottom:20px;

}