/* ==========================================================================
   Aflao Nexus Fintech & Logistics Platform
   Authentication Stylesheet
   File: auth.css
   Version: 1.0
   ========================================================================== */

:root{
    --primary:#1565C0;
    --primary-dark:#0D47A1;
    --secondary:#26A69A;
    --accent:#FFB300;
    --background:#F4F7FB;
    --surface:#FFFFFF;
    --text:#1F2937;
    --muted:#6B7280;
    --border:#E5E7EB;
    --danger:#D32F2F;
    --success:#2E7D32;

    --radius:14px;
    --shadow:0 18px 45px rgba(0,0,0,.08);
}

/* ==========================================================================
   PAGE
   ========================================================================== */

body{

    background:linear-gradient(135deg,#EEF4FF,#F8FAFC);

    min-height:100vh;

}

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

.auth-header{

    padding:40px 0 20px;

    text-align:center;

}

.auth-logo img{

    width:280px;

    max-width:100%;

    height:auto;

    display:block;

    margin:0 auto;

    object-fit:contain;

}

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

.auth-section{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:calc(100vh - 180px);

    padding:40px 20px;

}

.auth-container{

    width:100%;

    max-width:520px;

}

.auth-card{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--shadow);

    padding:45px;

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

}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

.auth-card h1,

.auth-card h2{

    color:var(--text);

    margin-bottom:8px;

    font-weight:700;

}

.auth-card p{

    color:var(--muted);

}

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

.auth-card form{

    margin-top:25px;

}

.auth-card label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--text);

}

.auth-card input,

.auth-card select,

.auth-card textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #D1D5DB;

    border-radius:10px;

    background:#fff;

    font-size:15px;

    transition:.25s;

    margin-bottom:18px;

}

.auth-card input:focus,

.auth-card textarea:focus,

.auth-card select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(21,101,192,.12);

}

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

.auth-card button,

.auth-card .btn-primary{

    width:100%;

    border:none;

    cursor:pointer;

    padding:15px;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-size:15px;

    font-weight:700;

    transition:.3s;

}

.auth-card button:hover,

.auth-card .btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-1px);

}

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

.auth-card a{

    color:var(--primary);

    text-decoration:none;

}

.auth-card a:hover{

    text-decoration:underline;

}

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

.errorlist{

    list-style:none;

    margin:0 0 15px;

    padding:12px;

    background:#FDECEC;

    color:var(--danger);

    border-radius:10px;

}

.success{

    background:#E8F5E9;

    color:var(--success);

    padding:12px;

    border-radius:10px;

}

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

.auth-footer{

    text-align:center;

    padding:25px;

    color:#6B7280;

    font-size:14px;

}