/* Shared styling for the login / signup / admin-login pages */

:root{
    --brand: #153d77;
    --brand-dark: #0f2c57;
}

body.auth-page{
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 45%, #eef2f7 45%, #eef2f7 100%);
    min-height: 100vh;
}

.auth-card{
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.2);
    position: relative;
    margin-top: 2.75rem;
}

/* Badge is absolutely centered on the card's own top edge so exactly
   half of it always floats above the card, at every breakpoint --
   independent of the card-body padding, which changes per breakpoint. */
.auth-badge{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #2a5aa0);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .5rem 1.25rem rgba(21,61,119,.35);
    flex-shrink: 0;
    overflow: hidden;
}
.auth-badge img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.auth-badge i{
    color: #fff;
    font-size: 2rem;
}

.auth-card .form-control{
    border-left: none;
}
.auth-card .input-group-text{
    background: #f4f6f9;
    border-right: none;
    color: #6c757d;
}
.auth-card .input-group:focus-within .input-group-text,
.auth-card .input-group:focus-within .form-control{
    border-color: #86a9d6;
}

.btn-brand{
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-brand:hover,
.btn-brand:focus{
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Responsive tweaks */
@media (max-width: 575.98px){
    .auth-card{
        margin-top: 2.4rem;
    }
    .auth-badge{
        width: 68px;
        height: 68px;
    }
    .auth-badge i{
        font-size: 1.6rem;
    }
    .auth-card .card-body.p-4{
        padding: 1.25rem !important;
    }
    .auth-hero h2{
        font-size: 1.5rem;
    }
}
@media (max-width: 360px){
    .auth-card{
        margin-top: 2.1rem;
    }
    .auth-badge{
        width: 58px;
        height: 58px;
    }
    .auth-badge i{
        font-size: 1.4rem;
    }
}