/* ==========================================
   DATA MANAGEMENT TOOL
   Authentication Stylesheet
   Author: OpenAI
========================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Root Colors */
:root{
    --primary:#2563eb;
    --secondary:#1e40af;
    --success:#16a34a;
    --danger:#dc2626;
    --warning:#f59e0b;
    --dark:#1e293b;
    --light:#f8fafc;
    --border:#dbeafe;
    --text:#334155;
    --white:#ffffff;
}

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#2563eb,#1e3a8a,#0f172a);

    min-height:100vh;

    overflow-x:hidden;

}

/* LEFT PANEL */

.left-panel{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    padding:60px;

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

    backdrop-filter:blur(15px);

    color:#fff;

}

.left-panel img{

    max-width:85%;

    animation:float 4s ease-in-out infinite;

}

.left-panel h1{

    font-size:42px;

    font-weight:700;

    margin-top:20px;

}

.left-panel p{

    opacity:.9;

    font-size:18px;

}

/* Floating Animation */

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}

/* REGISTER CARD */

.register-card{

    width:100%;

    max-width:620px;

    padding:40px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    animation:fadeUp .8s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* HEADINGS */

.register-card h2{

    font-weight:700;

    color:var(--dark);

}

.register-card h5{

    color:var(--primary);

    font-weight:600;

}

/* FORM LABELS */

.form-label,
label{

    font-weight:600;

    color:var(--text);

}

/* INPUTS */

.form-control,
.form-select{

    height:50px;

    border-radius:12px;

    border:1px solid #d1d5db;

    transition:.3s;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

/* BUTTONS */

.btn{

    border-radius:12px;

    font-weight:600;

    padding:12px;

    transition:.3s;

}

.btn-primary{

    background:linear-gradient(45deg,#2563eb,#1d4ed8);

    border:none;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(37,99,235,.3);

}

.btn-success{

    background:linear-gradient(45deg,#16a34a,#15803d);

    border:none;

}

.btn-success:hover{

    transform:translateY(-2px);

}

.btn-secondary{

    border:none;

}

/* PROGRESS BAR */

.progress{

    height:10px;

    border-radius:20px;

    background:#e2e8f0;

}

.progress-bar{

    background:linear-gradient(90deg,#2563eb,#60a5fa);

    transition:.4s;

}

/* IMAGE PREVIEW */

#preview{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #fff;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

/* PASSWORD STRENGTH */

#strength{

    display:block;

    margin-top:8px;

    font-size:14px;

    font-weight:600;

}

/* LINKS */

a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

a:hover{

    color:#1d4ed8;

}

/* CHECKBOX */

.form-check-input{

    cursor:pointer;

}

/* INPUT GROUP */

.input-group .btn{

    border-radius:0 12px 12px 0;

}

/* MOBILE */

@media(max-width:992px){

.left-panel{

display:none;

}

.register-card{

margin:30px 15px;

padding:30px;

}

}

@media(max-width:768px){

.register-card{

padding:25px;

}

.register-card h2{

font-size:28px;

}

.register-card h5{

font-size:18px;

}

}

@media(max-width:576px){

body{

padding:10px;

}

.register-card{

border-radius:18px;

padding:20px;

}

.form-control,
.form-select{

height:46px;

font-size:15px;

}

.btn{

padding:10px;

font-size:15px;

}

#preview{

width:90px;

height:90px;

}

}

/* SMALL ANIMATIONS */

.form-control:hover,
.form-select:hover{

border-color:#60a5fa;

}

.btn:hover{

transition:.3s;

}

.register-card:hover{

transform:translateY(-3px);

transition:.3s;

}

/* FOOTER TEXT */

.small-text{

font-size:14px;

color:#64748b;

}