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

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

:root{

    --primary:#ff0000;
    --primary-hover:#e00000;

    --bg:#0f172a;
    --card:#1e293b;

    --border:#334155;

    --text:#ffffff;
    --muted:#94a3b8;

    --success:#22c55e;
    --danger:#ef4444;

    --radius:14px;

}

html{

    font-size:16px;

}

body{

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

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

}


/* ==========================
   Layout
========================== */

.container{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

.card{

    width:100%;

    max-width:430px;

    background:var(--card);

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

    border-radius:20px;

    padding:30px;

}


/* ==========================
   Header
========================== */

.back{

    color:var(--muted);

    text-decoration:none;

    font-size:14px;

}

.back:hover{

    color:#fff;

}

.title{

    font-size:38px;

    font-weight:700;

    line-height:46px;

    margin-top:20px;

}

.subtitle{

    color:var(--muted);

    margin-top:10px;

    margin-bottom:28px;

    line-height:28px;

    font-size:15px;

}


/* ==========================
   Form
========================== */

.form-group{

    margin-bottom:18px;

}

label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:500;

}

input{

    width:100%;

    height:54px;

    border-radius:var(--radius);

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

    background:#111827;

    color:#fff;

    padding:0 16px;

    font-size:15px;

    outline:none;

    transition:.25s;

}

input::placeholder{

    color:#6b7280;

}

input:focus{

    border-color:var(--primary);

}


/* ==========================
   Password
========================== */

.password-box{

    position:relative;

}

.password-box input{

    padding-right:50px;

}

.togglePassword{

    position:absolute;

    top:50%;

    right:16px;

    transform:translateY(-50%);

    cursor:pointer;

    user-select:none;

    color:#94a3b8;

    font-size:18px;

}


/* ==========================
   Password Strength
========================== */

.strength{

    margin-top:10px;

    height:6px;

    border-radius:100px;

    overflow:hidden;

    background:#334155;

}

.strength-bar{

    width:0;

    height:100%;

    transition:.3s;

}


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

.error{

    color:var(--danger);

    font-size:13px;

    margin-top:6px;

    display:none;

}

.success{

    color:var(--success);

    font-size:13px;

    margin-top:6px;

}

.alert{

    display:none;

    padding:14px;

    margin-bottom:22px;

    border-radius:12px;

}

.alert-error{

    display:block;

    background:#451a1a;

    color:#fecaca;

}

.alert-success{

    display:block;

    background:#052e16;

    color:#bbf7d0;

}


/* ==========================
   Buttons
========================== */

.btn{

    width:100%;

    height:54px;

    border:none;

    border-radius:var(--radius);

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-register{

    background:var(--primary);

    color:#fff;

}

.btn-register:hover{

    background:var(--primary-hover);

}

.btn-register:disabled{

    opacity:.7;

    cursor:not-allowed;

}

.btn-google{

    margin-top:16px;

    background:#fff;

    color:#111827;

}

.btn-google:hover{

    background:#f4f4f4;

}


/* ==========================
   OR
========================== */

.or{

    position:relative;

    text-align:center;

    color:var(--muted);

    margin:24px 0;

    font-size:14px;

}

.or::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:38%;

    height:1px;

    background:#334155;

}

.or::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:38%;

    height:1px;

    background:#334155;

}


/* ==========================
   Bottom
========================== */

.bottom{

    margin-top:25px;

    text-align:center;

    color:var(--muted);

    font-size:14px;

}

.bottom a{

    color:#ff4d4d;

    text-decoration:none;

    font-weight:600;

}

.bottom a:hover{

    text-decoration:underline;

}


/* ==========================================
   Tablet
========================================== */

@media (max-width:768px){

    .container{

        padding:25px 18px;

        align-items:flex-start;

    }

    .card{

        max-width:100%;

        margin-top:20px;

        padding:26px;

    }

    .title{

        font-size:34px;

        line-height:42px;

    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width:480px){

    .container{

        padding:15px;

    }

    .card{

        padding:22px;

        border-radius:18px;

    }

    .title{

        font-size:30px;

        line-height:38px;

    }

    .subtitle{

        font-size:14px;

        line-height:24px;

    }

    input{

        height:52px;

        font-size:16px;

    }

    .btn{

        height:52px;

        font-size:16px;

    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width:360px){

    .container{

        padding:12px;

    }

    .card{

        padding:18px;

    }

    .title{

        font-size:26px;

        line-height:34px;

    }

    .subtitle{

        font-size:13px;

        line-height:22px;

    }

}