/* =========================
AFIEZA FASHION - LOGIN
Readable but compact
========================= */

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

html{
width:100%;
min-height:100%;
-webkit-text-size-adjust:100%;
}

body{
width:100%;
min-height:100vh;
min-height:100dvh;
background:#f4efe9;
color:#2b2725;
font-family:"Montserrat",sans-serif;
-webkit-font-smoothing:antialiased;
}

button,
input{
font:inherit;
}

button,
a,
input{
-webkit-tap-highlight-color:transparent;
}

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

.login-page{
width:100%;
min-height:100vh;
min-height:100dvh;
padding:32px;
display:flex;
align-items:center;
justify-content:center;
}

/* =========================
CARD
========================= */

.login-card{
width:100%;
max-width:440px;
padding:36px 34px;
background:#fff;
border:1px solid rgba(50,35,25,.08);
border-radius:24px;
box-shadow:0 22px 60px rgba(45,32,25,.09);
}

/* =========================
BRAND
========================= */

.brand{
margin-bottom:28px;
}

.brand span{
display:block;
margin-bottom:9px;
font-size:14px;
font-weight:700;
letter-spacing:2px;
color:#a98566;
}

.brand h1{
margin-bottom:7px;
font-size:30px;
line-height:1.2;
font-weight:700;
}

.brand p{
font-size:15px;
line-height:1.6;
color:#8c8580;
}

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

.form-group{
margin-bottom:18px;
}

.form-group label{
display:block;
margin-bottom:8px;
font-size:15px;
font-weight:600;
}

/* =========================
INPUT
========================= */

.form-group input{
width:100%;
height:52px;
padding:0 15px;
border:1px solid #e4ddd7;
border-radius:12px;
outline:none;
background:#faf8f6;
color:#2b2725;
font-size:17px;
transition:
border-color .2s,
background .2s,
box-shadow .2s;
}

.form-group input::placeholder{
color:#aaa29d;
font-size:15px;
}

.form-group input:focus{
border-color:#a98566;
background:#fff;
box-shadow:0 0 0 3px rgba(169,133,102,.08);
}

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

.login-btn{
width:100%;
height:52px;
margin-top:5px;
border:0;
border-radius:12px;
background:#2b2725;
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:
transform .15s,
opacity .15s;
}

.login-btn:active{
transform:scale(.99);
}

/* =========================
ERROR
========================= */

.login-error{
margin-bottom:19px;
padding:12px 14px;
border:1px solid rgba(198,75,75,.12);
border-radius:11px;
background:#fff1f1;
color:#c64b4b;
font-size:14px;
font-weight:500;
line-height:1.5;
}

/* =========================
IPAD / TABLET
========================= */

@media(min-width:768px) and (max-width:1366px){

.login-page{
padding:40px;
}

.login-card{
max-width:450px;
padding:38px 36px;
}

.brand span{
font-size:14px;
}

.brand h1{
font-size:30px;
}

.brand p{
font-size:15px;
}

.form-group label{
font-size:15px;
}

.form-group input{
height:52px;
font-size:17px;
}

.login-btn{
height:52px;
font-size:16px;
}

}

/* =========================
PHONE
========================= */

@media(max-width:767px){

.login-page{
padding:20px;
}

.login-card{
max-width:420px;
padding:30px 24px;
border-radius:21px;
}

.brand{
margin-bottom:25px;
}

.brand span{
font-size:13px;
}

.brand h1{
font-size:28px;
}

.brand p{
font-size:14px;
}

.form-group{
margin-bottom:17px;
}

.form-group label{
font-size:14px;
}

.form-group input{
height:50px;
font-size:16px;
}

.form-group input::placeholder{
font-size:14px;
}

.login-btn{
height:51px;
font-size:15px;
}

.login-error{
font-size:13px;
}

}

/* =========================
SMALL PHONE
========================= */

@media(max-width:420px){

.login-page{
padding:15px;
}

.login-card{
padding:27px 20px;
border-radius:19px;
}

.brand h1{
font-size:27px;
}

}