:root {
--mgs-login-primary: #5035d3;
--mgs-login-primary-hover: #4329b8;
--mgs-login-primary-focus: rgba(80, 53, 211, 0.18);
--mgs-login-text: #222;
--mgs-login-border: #e2e5e8;
--mgs-login-border-hover: #c9ced3;
--mgs-login-overlay: rgba(0, 0, 0, 0.72);
}
/* ==========================================================================
Accessibility
========================================================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Login Trigger
========================================================================== */
.mgs-login-trigger {
cursor: pointer;
text-decoration: none;
}
.mgs-login-trigger:focus-visible {
outline: 3px solid var(--mgs-login-primary-focus);
outline-offset: 3px;
}
/* ==========================================================================
Popup Overlay
========================================================================== */
.mgs-login-popup {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--mgs-login-overlay);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mgs-login-popup.is-open {
display: flex;
}
.mgs-login-popup[aria-hidden="true"] {
display: none;
}
.mgs-login-popup[aria-hidden="false"] {
display: flex;
}
html.mgs-login-popup-open,
body.mgs-login-popup-open {
overflow: hidden;
}
/* ==========================================================================
Login Dialog
========================================================================== */
.mgs-login-dialog {
position: relative;
width: min(100%, 430px);
max-height: calc(100vh - 48px);
overflow-y: auto;
box-sizing: border-box;
padding: 32px;
background: #ffffff;
color: var(--mgs-login-text);
border-radius: 12px;
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.28);
font-family: "Poppins", Arial, sans-serif;
animation: mgsLoginPopupIn 0.2s ease-out;
}
@keyframes mgsLoginPopupIn {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ==========================================================================
Close Button
========================================================================== */
.mgs-login-close {
position: absolute;
top: 12px;
right: 14px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: #555;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.mgs-login-close:hover {
background: #f1f3f4;
color: #111;
}
.mgs-login-close:focus-visible {
outline: 3px solid var(--mgs-login-primary-focus);
outline-offset: 2px;
}
/* ==========================================================================
Header / Logo
========================================================================== */
.mgs-login-header {
padding-right: 38px;
margin-bottom: 10px;
text-align: center;
}
.mgs-login-header img {
display: block;
max-width: 200px;
height: auto;
margin: 0 auto 14px;
}
/* ==========================================================================
Titles / Subtitles
========================================================================== */
.mgs-login-title {
margin: 0 0 7px;
font-family: "Poppins", Arial, sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
color: var(--mgs-login-text);
text-align: center;
}
.mgs-login-subtitle {
margin: 0;
color: #6b7280;
font-size: 14px;
line-height: 1.6;
text-align: center;
}
/* ==========================================================================
Login Message
========================================================================== */
.mgs-login-message {
margin: 0 0 18px;
padding: 11px 13px;
border-radius: 7px;
font-size: 13px;
line-height: 1.5;
}
.mgs-login-message--error {
color: #c62828;
background: #fff1f1;
border: 1px solid #f3caca;
}
.mgs-login-message--success {
color: #212121;
background: #e4f3e6;
border: 1px solid #9ec0a2;
}
/* ==========================================================================
Forms
========================================================================== */
.mgs-login-form {
margin: 0;
}
.mgs-login-field {
margin: 0 0 17px;
}
/* ==========================================================================
Inputs
========================================================================== */
.mgs-login-input {
display: block;
width: 100%;
min-height: 46px;
box-sizing: border-box;
padding: 10px 13px;
border: 1px solid var(--mgs-login-border);
border-radius: 7px;
background: #fff;
color: var(--mgs-login-text);
font-family: inherit;
font-size: 14px;
line-height: 1.4;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.mgs-login-input::placeholder {
color: #9aa0a6;
}
.mgs-login-input:hover {
border-color: var(--mgs-login-border-hover);
}
.mgs-login-input:focus {
border-color: var(--mgs-login-primary);
outline: 0;
box-shadow:
0 0 0 3px var(--mgs-login-primary-focus);
}
/* ==========================================================================
Password
========================================================================== */
.mgs-login-password {
position: relative;
}
.mgs-login-password .mgs-login-input {
padding-right: 48px;
}
.mgs-login-password-toggle {
position: absolute;
top: 50%;
right: 8px;
width: 36px;
height: 36px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 5px;
background: transparent;
color: #6b7280;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.mgs-login-password-toggle:hover {
background: #f2f4f5;
color: #222;
}
.mgs-login-password-toggle:focus-visible {
outline: 2px solid var(--mgs-login-primary-focus);
outline-offset: 1px;
}
/* ==========================================================================
Remember Me / Forgot Password
========================================================================== */
.mgs-login-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 4px 0 20px;
}
.mgs-login-remember {
display: inline-flex;
align-items: center;
gap: 7px;
color: #555;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
}
.mgs-login-remember input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--mgs-login-primary);
}
.mgs-login-forgot {
color: var(--mgs-login-primary);
font-size: 13px;
text-decoration: none;
}
.mgs-login-forgot:hover,
.mgs-login-forgot:focus {
color: var(--mgs-login-primary-hover);
text-decoration: underline;
}
.mgs-login-forgot:focus-visible {
outline: 2px solid var(--mgs-login-primary-focus);
outline-offset: 2px;
}
/* ==========================================================================
Submit Button
========================================================================== */
.mgs-login-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 47px;
padding: 11px 18px;
border: 0;
border-radius: 7px;
background: var(--mgs-login-primary);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.15s ease;
}
.mgs-login-submit:hover {
background: var(--mgs-login-primary-hover);
}
.mgs-login-submit:focus-visible {
outline: 3px solid var(--mgs-login-primary-focus);
outline-offset: 3px;
}
.mgs-login-submit:active {
transform: translateY(1px);
}
.mgs-login-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.mgs-login-loading {
pointer-events: none;
opacity: 0.7;
}
/* ==========================================================================
Google Login
========================================================================== */
.mgs-login-social {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #edf0f2;
}
.mgs-login-social-title {
margin: 0 0 13px;
text-align: center;
color: #777;
font-size: 12px;
}
.mgs-login-social-button {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
min-height: 44px;
box-sizing: border-box;
padding: 9px 14px;
border: 1px solid var(--mgs-login-border);
border-radius: 7px;
background: #fff;
color: #333;
font-family: inherit;
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.mgs-login-social-button:hover {
background: #f7f8f9;
border-color: #cbd0d5;
}
.mgs-login-social-button:focus-visible {
outline: 3px solid var(--mgs-login-primary-focus);
outline-offset: 2px;
}
.mgs-login-social-button img {
display: block;
flex: 0 0 auto;
}
/* ==========================================================================
Registration
========================================================================== */
.mgs-login-register {
padding: 10px 0px;
text-align: center;
color: #555;
font-size: 15px;
line-height: 1.6;
}
.mgs-login-register a {
color: var(--mgs-login-primary);
font-weight: 600;
text-decoration: none;
}
.mgs-login-register a:hover,
.mgs-login-register a:focus {
color: var(--mgs-login-primary-hover);
text-decoration: underline;
}
.mgs-login-register a:focus-visible {
outline: 2px solid var(--mgs-login-primary-focus);
outline-offset: 2px;
}
/* ==========================================================================
Logged-in User Menu
========================================================================== */
.mgs-login-user-menu {
display: flex;
flex-direction: column;
gap: 10px;
margin: 22px 0;
}
.mgs-login-user-link {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
border: 1px solid var(--mgs-login-border);
border-radius: 7px;
background: #fff;
color: #333;
font-size: 13px;
font-weight: 500;
text-align: center;
text-decoration: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.mgs-login-user-link:hover {
background: #f7f8f9;
border-color: #cbd0d5;
color: var(--mgs-login-primary);
}
.mgs-login-user-link:focus-visible {
outline: 3px solid var(--mgs-login-primary-focus);
outline-offset: 2px;
}
/* ==========================================================================
Terms & Privacy
========================================================================== */
.mgs-login-terms {
margin: 16px 0 0;
color: #777;
font-size: 11px;
line-height: 1.6;
text-align: center;
}
.mgs-login-terms a {
color: #0066cc;
font-weight: 600;
text-decoration: none;
}
.mgs-login-terms a:hover,
.mgs-login-terms a:focus {
color: #0052a3;
text-decoration: underline;
}
.mgs-login-terms a:focus-visible {
outline: 2px solid rgba(0, 102, 204, 0.3);
outline-offset: 2px;
border-radius: 2px;
}
/* ==========================================================================
Mobile
========================================================================== */
@media (max-width: 575px) {
.mgs-login-popup {
align-items: flex-start;
padding: 16px;
}
.mgs-login-dialog {
width: 100%;
max-height: calc(100vh - 32px);
padding: 26px 20px 22px;
border-radius: 10px;
margin-top: 8px;
}
.mgs-login-title {
font-size: 22px;
}
.mgs-login-options {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
.mgs-login-forgot {
align-self: flex-end;
}
.mgs-login-terms {
font-size: 11px;
}
}
/* ==========================================================================
Reduced Motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.mgs-login-dialog {
animation: none;
}
.mgs-login-submit,
.mgs-login-input,
.mgs-login-close,
.mgs-login-password-toggle,
.mgs-login-social-button,
.mgs-login-user-link {
transition: none;
}
}