/* =====================================================
   Login Page
===================================================== */

.auth-container{

    width:100%;

    min-height:100vh;
    min-height:100dvh;

    display:flex;

    flex-direction:column;

}

.login-page{

    width:100%;

    min-height:0;

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;
    align-items:safe center;

    padding:40px;

}

/* =====================================================
   Card
===================================================== */

.login-card{

    width:100%;
    max-width:1050px;

    min-width:0;

    min-height:560px;

    display:flex;

    overflow:hidden;

    background:#465d7b;

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

    border-radius:26px;

    backdrop-filter:blur(20px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);

}

/* =====================================================
   Right Side
===================================================== */

.login-image-side{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/* =====================================================
   Company
===================================================== */

.company-info{

    max-width:100%;

    text-align:center;

    margin-bottom:45px;

    overflow-wrap:anywhere;

}

.company-info h1{

    color:#fff;

    font-size:38px;

    font-weight:900;

    margin-bottom:12px;

}

.company-info p{

    color:#8ba4c7;

    letter-spacing:4px;

    font-size:15px;

}

/* =====================================================
   Logo
===================================================== */

.login-image-side img{

    max-width:80%;

    max-height:360px;

    width:auto;

    height:auto;

    object-fit:contain;

    transition:.35s;

}

.login-image-side img:hover{

    transform:scale(1.03);

}

/* =====================================================
   Divider
===================================================== */

.login-divider{

    width:2px;

    margin:45px 0;

    background:

    linear-gradient(

        to bottom,

        transparent,

        rgba(255,255,255,.40),

        rgba(88,166,255,.60),

        rgba(255,255,255,.40),

        transparent

    );

}

/* =====================================================
   Left Side
===================================================== */

.login-form-side{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:50px;

}

/* =====================================================
   Title
===================================================== */

.login-form-side h2{

    color:white;

    text-align:center;

    font-size:34px;

    font-weight:900;

    margin-bottom:35px;

}

/* =====================================================
   Fields
===================================================== */

.field{

    margin-bottom:18px;

}

.field label{

    margin-bottom:6px;

    font-size:14px;

    color:#eef5ff;

}

.form-errors,
.field-error{

    overflow-wrap:anywhere;

}

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

.form-control,
input[type="text"],
input[type="password"],
input[type="email"]{

    width:100%;

    padding:13px 16px;

    border-radius:14px;

    border:1px solid #d6e3f3 !important;

    background:#ffffff !important;

    color:#1f2937 !important;

    font-size:15px;

    transition:.25s;

    box-shadow:none;

}

.form-control::placeholder,
input::placeholder{

    color:#94a3b8;

}

.form-control:focus,
input:focus{

    outline:none;

    background:rgba(255,255,255,.32) !important;

    color:#111827 !important;

    border:1px solid #58a6ff !important;

    box-shadow:
        0 0 0 4px rgba(88,166,255,.20);

}
/* =====================================================
   Button
===================================================== */

.login-btn{

    width:100%;

    margin-top:12px;

    padding:13px;

    font-size:16px;

    font-weight:700;

    border-radius:14px;

}

/* =====================================================
   Messages
===================================================== */

.messages{

    margin-top:25px;

}

.alert-error{

    background:

    linear-gradient(

        135deg,

        #991b1b,

        #dc2626

    );

    color:white;

    border-radius:14px;

    padding:14px;

    text-align:center;

}

/* =====================================================
   Responsive
===================================================== */

@media(max-width:950px){

    .login-page{

        padding:32px;

    }

    .login-card{

        flex-direction:column;

        min-height:auto;

    }

    .login-divider{

        display:none;

    }

    .login-image-side{

        padding:40px;

    }

    .login-image-side img{

        max-height:220px;

    }

    .company-info{

        margin-bottom:25px;

    }

    .login-form-side{

        padding:40px;

    }

    .login-form-side .field{

        margin-bottom:0;

    }

}

@media(max-width:600px){

    .login-page{

        align-items:flex-start;

        padding:clamp(10px, 4vw, 16px);

    }

    .login-image-side{

        padding:
            clamp(20px, 6vw, 24px)
            clamp(16px, 6vw, 24px)
            16px;

    }

    .company-info{

        margin-bottom:14px;

    }

    .company-info h1{

        margin-bottom:8px;

        font-size:clamp(26px, 8vw, 32px);
        line-height:1.45;

    }

    .company-info p{

        max-width:100%;

        font-size:clamp(11px, 3.6vw, 14px);
        letter-spacing:clamp(1px, .6vw, 2px);

        line-height:1.6;
        white-space:nowrap;

    }

    .login-image-side img{

        max-width:min(80%, 260px);
        max-height:clamp(82px, 25vw, 110px);

    }

    .login-form-side{

        padding:
            18px
            clamp(16px, 6vw, 24px)
            24px;

    }

    .login-form-side h2{

        margin-bottom:22px;

        font-size:clamp(26px, 8vw, 30px);

    }

    .login-form-side form{

        gap:14px;

    }

    .login-form-side .field{

        gap:6px;

        margin-bottom:0;

    }

    .login-form-side .form-control{

        min-height:48px;

        font-size:16px;

    }

    .login-btn{

        min-height:48px;

        margin-top:4px;

    }

}

@media(
    min-width:700px
) and (
    max-width:950px
) and (
    orientation:landscape
){

    .login-card{

        min-height:560px;

        flex-direction:row;

    }

    .login-divider{

        display:block;

    }

}

@media(
    min-width:600px
) and (
    max-width:950px
) and (
    max-height:600px
) and (
    orientation:landscape
){

    .login-page{

        padding:6px clamp(20px, 4vw, 32px);

    }

    .login-card{

        min-height:0;

    }

    .login-divider{

        margin:20px 0;

    }

    .login-image-side{

        padding:20px 24px;

    }

    .company-info{

        margin-bottom:10px;

    }

    .company-info h1{

        margin-bottom:6px;

        font-size:26px;

    }

    .company-info p{

        font-size:12px;
        letter-spacing:2px;

    }

    .login-image-side img{

        max-height:110px;

    }

    .login-form-side{

        padding:14px clamp(24px, 4vw, 36px);

    }

    .login-form-side h2{

        margin-bottom:10px;

        font-size:25px;

    }

    .login-form-side form{

        gap:8px;

    }

    .login-form-side .field{

        gap:4px;

        margin-bottom:0;

    }

    .login-form-side .field label{

        font-size:13px;

    }

    .login-form-side .form-control,
    .login-btn{

        min-height:44px;

    }

    .login-form-side .form-control{

        padding:7px 12px;

        font-size:16px;

    }

    .login-btn{

        padding:8px;

        margin-top:2px;

    }

}

@media(min-width:951px) and (max-height:700px){

    .login-page{

        padding:16px 40px;

    }

    .login-card{

        min-height:0;

    }

    .login-divider{

        margin:28px 0;

    }

    .login-image-side{

        padding:28px 40px;

    }

    .company-info{

        margin-bottom:20px;

    }

    .company-info h1{

        font-size:32px;

    }

    .login-image-side img{

        max-height:220px;

    }

    .login-form-side{

        padding:24px 50px;

    }

    .login-form-side h2{

        margin-bottom:20px;

        font-size:30px;

    }

    .login-form-side form{

        gap:12px;

    }

    .login-form-side .field{

        gap:6px;

        margin-bottom:0;

    }

    .login-form-side .form-control,
    .login-btn{

        min-height:44px;

    }

    .login-form-side .form-control{

        padding:10px 14px;

    }

    .login-btn{

        margin-top:4px;

    }

}