/* =====================================================
LUXELITE LOGIN PAGE
MOBILE FIRST
===================================================== */

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

html,
body {
width: 100%;
min-height: 100%;
}

body {
font-family: "Montserrat", Arial, sans-serif;
background:
linear-gradient(
135deg,
#f8eef9 0%,
#fff8f2 50%,
#f3e8f5 100%
);
color: #351d39;
}

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

.lux-login-page {
min-height: 100vh;

width: 100%;

display: flex;

align-items: center;

justify-content: center;

padding: 25px 14px;

}

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

.lux-login-card {
width: 100%;

max-width: 430px;

background: rgba(255, 255, 255, 0.96);

border-radius: 22px;

padding: 30px 20px 25px;

box-shadow:
    0 15px 45px rgba(53, 29, 57, 0.12);

border: 1px solid rgba(173, 117, 177, 0.15);

}

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

.lux-login-logo {
display: flex;

flex-direction: column;

align-items: center;

text-decoration: none;

margin-bottom: 25px;

}

.lux-login-logo strong {
font-size: 25px;

letter-spacing: 3px;

color: #351d39;

}

.lux-login-logo span {
margin-top: 2px;

font-size: 10px;

letter-spacing: 5px;

color: #b58b45;

}

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

.lux-login-heading {
text-align: center;

margin-bottom: 24px;

}

.lux-login-label {
font-size: 10px;

font-weight: 700;

letter-spacing: 2px;

color: #b58b45;

margin-bottom: 7px;

}

.lux-login-heading h1 {
font-size: 24px;

line-height: 1.25;

color: #351d39;

margin-bottom: 9px;

}

.lux-login-heading > p:last-child {
font-size: 13px;

line-height: 1.6;

color: #766978;

}

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

.lux-login-messages {
margin-bottom: 18px;
}

.lux-login-message {
padding: 11px 12px;

border-radius: 10px;

font-size: 12px;

line-height: 1.5;

text-align: center;

}

.lux-login-message.success {
background: #edf8ef;

color: #28733a;

}

.lux-login-message.error {
background: #fff0f0;

color: #a33a3a;

}

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

.lux-login-form {
width: 100%;
}

.lux-login-field {
margin-bottom: 17px;
}

.lux-login-field label {
display: block;

font-size: 12px;

font-weight: 700;

color: #351d39;

margin-bottom: 7px;

}

.lux-login-field input {
width: 100%;

height: 48px;

padding: 0 13px;

border: 1px solid #ddd2df;

border-radius: 11px;

background: #fff;

color: #351d39;

font-size: 13px;

outline: none;

transition: 0.2s ease;

}

.lux-login-field input:focus {
border-color: #b58b45;

box-shadow:
    0 0 0 3px rgba(181, 139, 69, 0.10);

}

.lux-login-field input::placeholder {
color: #aaa1ab;
}

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

.lux-login-button {
width: 100%;

height: 49px;

border: none;

border-radius: 12px;

background: #351d39;

color: #fff;

font-size: 12px;

font-weight: 700;

letter-spacing: 1.5px;

cursor: pointer;

margin-top: 4px;

transition: 0.2s ease;

}

.lux-login-button:active {
transform: scale(0.98);
}

/* =====================================================
REGISTER
===================================================== */

.lux-login-register {
text-align: center;

margin-top: 22px;

font-size: 12px;

color: #766978;

line-height: 1.6;

}

.lux-login-register a {
color: #9b6d22;

font-weight: 700;

text-decoration: none;

margin-left: 4px;

}

/* =====================================================
HOME
===================================================== */

.lux-login-home {
display: block;

text-align: center;

margin-top: 18px;

color: #351d39;

font-size: 12px;

text-decoration: none;

font-weight: 600;

}

/* =====================================================
SMALL PHONES
===================================================== */

@media (max-width: 360px) {

.lux-login-page {
    padding: 18px 10px;
}

.lux-login-card {
    padding: 25px 16px 22px;

    border-radius: 18px;
}

.lux-login-heading h1 {
    font-size: 21px;
}

.lux-login-field input {
    height: 46px;
}

}