/* ===========================
   Google Font
=========================== */

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


/* ===========================
   Reset
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


/* ===========================
   Body
=========================== */

body{

    background:#FFF8F5;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:100vh;
}


/* ===========================
   Main Container
=========================== */

.login-container{

    width:100%;
    max-width:550px;

    padding:20px;

    text-align:center;
}


/* ===========================
   Logo
=========================== */

.login-container h1{

    font-size:42px;

    color:#8B5E57;

    margin-bottom:8px;

    letter-spacing:2px;
}


/* ===========================
   Tagline
=========================== */

.tagline{

    color:#777;

    margin-bottom:35px;

    font-size:15px;
}


/* ===========================
   Card
=========================== */

.login-card{

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);
}


/* ===========================
   Heading
=========================== */

.login-card h2{

    color:#333;

    margin-bottom:8px;
}


.login-card p{

    color:#777;

    margin-bottom:25px;
}


/* ===========================
   Inputs
=========================== */

input{

    width:100%;

    padding:14px;

    margin-bottom:18px;

    border:1px solid #E7D8D4;

    border-radius:10px;

    outline:none;

    font-size:15px;

    transition:.3s;
}


input:focus{

    border-color:#B5838D;

    box-shadow:0 0 8px rgba(181,131,141,.25);
}


/* ===========================
   Button
=========================== */

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:10px;

    background:#B5838D;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.3s;
}


button:hover{

    background:#9F6D78;

    transform:translateY(-2px);
}


/* ===========================
   Links
=========================== */

.signup-link{

    margin-top:25px;

    font-size:14px;
}


.signup-link a{

    color:#B5838D;

    text-decoration:none;

    font-weight:600;
}


.signup-link a:hover{

    text-decoration:underline;
}


/* ===========================
   Error
=========================== */

.error{

    color:#E74C3C;

    margin-bottom:15px;
}


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

.success{

    background:#D4EDDA;

    color:#155724;

    padding:12px;

    border-radius:8px;

    margin-bottom:18px;
}


.danger{

    background:#F8D7DA;

    color:#721C24;

    padding:12px;

    border-radius:8px;

    margin-bottom:18px;
}

/* ===========================
   Labels
=========================== */

label{

    display:block;

    text-align:left;

    margin-bottom:8px;

    color:#444;

    font-size:14px;

    font-weight:500;

}

/* ===========================
   Section Titles
=========================== */

.section-title{

    text-align:left;

    margin-top:25px;

    margin-bottom:18px;

    color:#8B5E57;

    font-size:18px;

    font-weight:600;

    border-bottom:1px solid #F0E4E1;

    padding-bottom:8px;
}

.secondary-btn{

    display:block;

    width:100%;

    text-align:center;

    margin-top:15px;

    padding:14px;

    border:1px solid #B5838D;

    border-radius:10px;

    color:#B5838D;

    text-decoration:none;

    transition:.3s;
}

.secondary-btn:hover{

    background:#B5838D;

    color:white;
}

/* ===========================
   Profile Details
=========================== */

.profile-details{

    margin-top:25px;

}

.profile-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #F0E4E1;

}

.profile-item strong{

    color:#8B5E57;

    font-weight:600;

}

.profile-item span{

    color:#555;

}

/* ===========================
   Recommendation Cards
=========================== */

.result-card{

    background:#FFF8F5;

    border:1px solid #F0E4E1;

    border-radius:12px;

    padding:20px;

    margin-bottom:25px;

    text-align:center;
}

.result-card h1,
.result-card h2{

    color:#8B5E57;

    margin-bottom:10px;
}

.result-card p{

    margin:0;
}


/* ===========================
   Clothing Box
=========================== */

.recommendation-box{

    text-align:left;

    background:#FFF8F5;

    border-radius:12px;

    padding:20px;

    margin-bottom:25px;
}

.recommendation-box h4{

    color:#8B5E57;

    margin-top:15px;

    margin-bottom:10px;
}

.recommendation-box ul{

    padding-left:20px;
}

.recommendation-box li{

    margin-bottom:8px;
}

.measurement-box{
    margin:25px 0;
    padding:22px;
    background:#faf7f6;
    border:1px solid #eadfdb;
    border-radius:18px;
}

.measurement-box h3{
    color:#8b5e57;
    margin-bottom:18px;
    text-align:center;
}

.measurement-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #ece4e1;
    font-size:17px;
}

.measurement-row:last-child{
    border-bottom:none;
}

.measurement-row strong{
    color:#2f2f2f;
}

.login-card a{
    text-decoration:none;
}

.login-card button{
    margin-top:14px;
}

.primary-btn{
    background:#8b5e57;
}

.primary-btn:hover{
    background:#734b45;
}

.danger-btn{
    background:#d86a6a;
}

.danger-btn:hover{
    background:#be5555;
}

.logout-btn{
    margin-top:25px;
}