/* ===========================================================
   AUTH.CSS
   Hotel Booking Management System
   =========================================================== */

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;
    --secondary:#6f42c1;

    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;

    --light:#f8f9fa;
    --dark:#212529;

    --white:#ffffff;

}

/* ===========================================================
   BODY
   =========================================================== */

html,
body{

    height:100%;

}

body{

    margin:0;

    padding:0;

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    background-attachment:fixed;

}

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

.login-background{

    background:linear-gradient(

        rgba(13,110,253,.75),

        rgba(111,66,193,.75)

    );

    color:#fff;

}

.login-background h1{

    font-weight:700;

}

.login-background p{

    opacity:.9;

}

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

.login-card{

    width:100%;

    max-width:470px;

    border:none;

    border-radius:18px;

    overflow:hidden;

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

    backdrop-filter:blur(12px);

    box-shadow:

        0 15px 40px rgba(0,0,0,.18);

    animation:fadeIn .6s ease;

}

.card-body{

    padding:40px;

}

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

.form-label{

    font-weight:600;

}

.form-control{

    height:48px;

    border-radius:10px;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

.input-group-text{

    background:#fff;

    border-radius:10px 0 0 10px;

}

.input-group .btn{

    border-radius:0 10px 10px 0;

}

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

.btn{

    border-radius:10px;

    transition:.3s;

}

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

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

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(13,110,253,.25);

}

.btn-outline-secondary:hover{

    transform:translateY(-2px);

}

/* ===========================================================
   ALERT
   =========================================================== */

.alert{

    border-radius:10px;

}

/* ===========================================================
   LINK
   =========================================================== */

a{

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/* ===========================================================
   LOGO
   =========================================================== */

.login-logo{

    width:90px;

    height:90px;

    object-fit:contain;

}

/* ===========================================================
   DIVIDER
   =========================================================== */

.divider{

    text-align:center;

    margin:25px 0;

    color:#888;

}

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

.login-footer{

    margin-top:25px;

    text-align:center;

    color:#777;

    font-size:.9rem;

}

/* ===========================================================
   SPINNER
   =========================================================== */

.spinner-border{

    width:1rem;

    height:1rem;

}

/* ===========================================================
   ANIMATION
   =========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media(max-width:991px){

    body{

        background:#f3f5f9;

    }

    .login-card{

        margin:20px;

    }

}

@media(max-width:576px){

    .card-body{

        padding:25px;

    }

    .login-background{

        display:none !important;

    }

}