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

* {
  box-sizing: border-box;
  }

body {
margin: 0;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
background: #f5f1ed;
color: #40362f;
}

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

.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 20px;
}

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

.login-card {
width: 100%;
max-width: 430px;
padding: 42px 40px 30px;
background: #ffffff;
border: 1px solid #ebe3dc;
border-radius: 20px;
box-shadow: 0 15px 45px rgba(90, 65, 48, 0.08);
}

/* ==========================================================
LOGO
========================================================== */

.login-logo {
width: 58px;
height: 58px;
margin: 0 auto 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background: #f1e9e2;
color: #8f6b54;
font-size: 24px;
}

.login-brand {
text-align: center;
}

.login-brand span {
display: block;
color: #514238;
font-size: 20px;
font-weight: 700;
}

.login-brand small {
display: block;
margin-top: 4px;
color: #96887e;
font-size: 12px;
}

/* ==========================================================
HEADING
========================================================== */

.login-heading {
margin: 34px 0 26px;
text-align: center;
}

.login-heading h1 {
margin: 0 0 8px;
font-size: 28px;
}

.login-heading p {
margin: 0;
color: #81756d;
font-size: 14px;
}

/* ==========================================================
MESSAGES
========================================================== */

.login-messages {
margin-bottom: 20px;
}

.login-message {
padding: 11px 13px;
border-radius: 9px;
background: #f8eaea;
color: #9b4f4f;
font-size: 13px;
}

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

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

.form-group label {
display: block;
margin-bottom: 8px;
color: #5d5048;
font-size: 13px;
font-weight: 600;
}

.input-wrapper {
position: relative;
}

.input-wrapper i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #a39388;
font-size: 14px;
}

.input-wrapper input {
width: 100%;
height: 48px;
padding: 0 14px 0 42px;
border: 1px solid #ded5ce;
border-radius: 10px;
outline: none;
background: #fcfaf8;
color: #40362f;
font-size: 14px;
transition: border-color 0.2s ease,
box-shadow 0.2s ease;
}

.input-wrapper input:focus {
border-color: #8f6b54;
box-shadow: 0 0 0 3px rgba(143, 107, 84, 0.10);
background: #ffffff;
}

.input-wrapper input::placeholder {
color: #aaa098;
}

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

.login-button {
width: 100%;
height: 49px;
margin-top: 5px;
border: 0;
border-radius: 10px;
background: #8f6b54;
color: #ffffff;
cursor: pointer;
font-size: 14px;
font-weight: 700;
transition: all 0.2s ease;
}

.login-button i {
margin-right: 7px;
}

.login-button:hover {
opacity: 0.92;
transform: translateY(-1px);
}

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

.login-footer {
margin-top: 27px;
padding-top: 20px;
border-top: 1px solid #eee7e2;
text-align: center;
}

.login-footer span {
color: #978a81;
font-size: 11px;
}

.login-footer i {
margin-right: 5px;
}

/* ==========================================================
MOBILE
========================================================== */

@media (max-width: 500px) {

```
.login-page {
    padding: 20px 15px;
}

.login-card {
    padding: 35px 25px 27px;
    border-radius: 16px;
}

.login-heading h1 {
    font-size: 25px;
}
```

}