.auth-modal-overlay {
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.auth-modal-content {
background: #fff;
border-radius: 18px;
max-width: 500px;
width: 90%;
padding: 2rem 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
position: relative;
transition: transform 0.3s ease, opacity 0.3s ease;
transform: scale(0.95);
opacity: 0;
}
.auth-step {
display: none;
}
.auth-step.active {
display: block;
}
.auth-btn-red {
background-color: #d00;
color: white;
border: none;
padding: 0.75rem 1.25rem;
width: 100%;
border-radius: 25px;
font-weight: 600;
font-size: 1rem;
margin-top: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.auth-btn-red:hover {
background-color: #b80000;
}
.auth-close {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.hidden {
display: none !important;
}
.auth-modal-overlay:not(.hidden) .auth-modal-content {
transform: scale(1);
opacity: 1;
}
.auth-modal-content h2 {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 1.5rem;
}
.auth-modal-content input {
background-color: #fff !important;
border: 1px solid #ccc;
border-radius: 9px;
padding: 0.6rem 1rem;
font-size: 1rem;
width: 100%;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.auth-label {
display: block;
font-size: 0.9rem;
font-weight: 400;
color: #777777;
margin-bottom: 0.5rem;
margin-top: 1rem;
} .auth-actions {
text-align: center;
margin-top: 1.2rem;
font-size: 0.95rem;
color: #333;
font-weight: 400;
line-height: 1.4;
}
.auth-actions a {
text-decoration: none;
color: #333;
transition: color 0.2s ease;
}
.auth-actions a span {
color: #d00;
font-weight: 500;
margin-left: 4px;
transition: color 0.2s ease;
}
.auth-actions a span:hover {
text-decoration: underline;
color: #b80000;
} .auth-google .nsl-container {
width: 100%;
}
.auth-google .nsl-button-google {
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid #cccccc !important;
border-radius: 50px !important;
padding: 0.25rem 1rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
width: 100%;
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 0.5rem;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.auth-google .nsl-container-buttons {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
}
.auth-google .nsl-button-google:hover {
background-color: #f7f7f7 !important;
border-color: #bbbbbb !important;
}
.auth-google .nsl-button-google img {
height: 20px !important;
width: 20px !important;
}
.auth-step.auth-forgot h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
text-align: center;
}
.auth-step.auth-forgot form {
text-align: center;
}
.auth-step.auth-forgot input {
margin-top: 0.15rem;
}
.auth-step.auth-forgot button {
margin-top: 1rem;
} .auth-password-wrapper {
position: relative;
display: flex;
align-items: center;
}
.auth-password-wrapper input {
width: 100%;
padding-right: 2.5rem;
}
.toggle-password {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #000;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
}
.icon-show,
.icon-hide {
position: absolute;
} .toggle-password i {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
}
.toggle-password .hidden {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
} .auth-row-between {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.25rem;
margin-bottom: 1rem;
} .auth-checkbox {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.9rem;
color: #333;
cursor: pointer;
}
.auth-checkbox input[type="checkbox"] {
width: 19px;
height: 19px;
accent-color: #d00;
cursor: pointer;
margin: 0;
} .auth-row-between .auth-show-forgot {
font-size: 0.85rem;
color: #d00;
text-decoration: none;
font-weight: 500;
cursor: pointer;
}
.auth-row-between .auth-show-forgot:hover {
text-decoration: underline;
} .auth-forgot-text {
font-size: 0.95rem;
color: #555;
text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
line-height: 1.5;
} .auth-forgot-label {
font-size: 0.95rem;
color: #222;
font-weight: 500;
margin-bottom: 0.4rem;
display: block;
text-align: left;
margin-top: 1rem;
} .auth-actions a {
text-decoration: none;
color: #333;
font-size: 0.9rem;
}
.auth-actions a span {
color: #d00;
font-weight: 500;
margin-left: 4px;
transition: color 0.2s ease;
}
.auth-actions a span:hover {
text-decoration: underline;
}  .auth-register-label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: #696c80;
margin-bottom: 0.4rem;
margin-top: 1rem;
text-align: left;
} .auth-register-checkbox-label {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
margin-top: 1rem;
text-align: left;
line-height: 1.5;
font-weight: 400;
color: #000000;
flex-wrap: wrap;
}
.auth-register-checkbox-label input[type="checkbox"] {
margin-top: 0.25rem;
width: 18px;
height: 18px;
accent-color: #d00;
flex-shrink: 0;
cursor: pointer;
}
.auth-register-checkbox-label span {
flex: 1;
min-width: 0;
}
.auth-register-checkbox-label a {
color: #000;
text-decoration: underline;
font-weight: 500;
transition: color 0.25s ease-in-out, text-decoration 0.25s ease-in-out;
}
.auth-register-checkbox-label a:hover {
color: #d00
}  .auth-register2-label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: #444;
margin-bottom: 0.4rem;
margin-top: 1rem;
text-align: left;
} .auth-register2-checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.85rem;
margin-top: 1.2rem;
text-align: left;
line-height: 1.5;
font-weight: 400;
color: #000000;
flex-wrap: wrap;
}
.auth-register2-checkbox-label input[type="checkbox"] {
margin-top: 0.25rem;
width: 18px;
height: 18px;
accent-color: #d00;
flex-shrink: 0;
cursor: pointer;
}
.auth-register2-checkbox-label span {
flex: 1;
min-width: 0;
}
.auth-register2-checkbox-label a {
color: #000;
text-decoration: underline;
font-weight: 500;
transition: color 0.25s ease-in-out, text-decoration 0.25s ease-in-out;
}
.auth-register2-checkbox-label a:hover {
color: #d00;
}