/* ==========================================================================
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 color-mix(in srgb, var(--theme-color) 18%, transparent);
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: rgba(0, 0, 0, 0.72);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mgs-login-popup.is-open {
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: var(--surface-color);
color: var(--text-color);
border-radius: 12px;
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.28);
font-family: var(--font-body);
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: var(--muted-color);
font-size: 28px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.mgs-login-close:hover {
background: var(--page-background);
color: var(--text-color);
}
.mgs-login-close:focus-visible {
outline: 3px solid color-mix(in srgb, var(--theme-color) 18%, transparent);
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: var(--font-heading);
font-size: var(--h2-size);
font-weight: var(--h2-weight);
line-height: 1.3;
color: var(--text-color);
text-align: center;
}
.mgs-login-subtitle {
margin: 0;
color: var(--muted-color);
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(--border-color);
border-radius: 7px;
background: var(--surface-color);
color: var(--text-color);
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: var(--muted-color);
}
.mgs-login-input:hover {
border-color: var(--muted-color);
}
.mgs-login-input:focus {
border-color: var(--theme-color);
outline: 0;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--theme-color) 18%, transparent);
}
/* ==========================================================================
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: var(--muted-color);
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.mgs-login-password-toggle:hover {
background: var(--page-background);
color: var(--text-color);
}
.mgs-login-password-toggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--theme-color) 18%, transparent);
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: var(--muted-color);
font-size: 13px;
line-height: 1.4;
cursor: pointer;
}
.mgs-login-remember input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--theme-color);
}
.mgs-login-forgot {
color: var(--link-color);
font-size: 13px;
text-decoration: none;
}
.mgs-login-forgot:hover,
.mgs-login-forgot:focus {
color: var(--link-hover-color);
text-decoration: underline;
}

/* ==========================================================================
Submit Button
========================================================================== */
.mgs-login-submit {
width: 100%;
}

.mgs-login-loading {
pointer-events: none;
opacity: 0.7;
}
/* ==========================================================================
Google Login
========================================================================== */
.mgs-login-social {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.mgs-login-social-title {
margin: 0 0 13px;
text-align: center;
color: var(--muted-color);
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(--border-color);
border-radius: 7px;
background: var(--surface-color);
color: var(--text-color);
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: var(--page-background);
border-color: var(--muted-color);
}
.mgs-login-social-button:focus-visible {
outline: 3px solid color-mix(in srgb, var(--theme-color) 18%, transparent);
outline-offset: 2px;
}
.mgs-login-social-button img {
display: block;
flex: 0 0 auto;
}
/* ==========================================================================
Registration
========================================================================== */
.mgs-login-register {
padding: 10px 0;
text-align: center;
color: var(--muted-color);
font-size: 15px;
line-height: 1.6;
}
/* ==========================================================================
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(--border-color);
border-radius: 7px;
background: var(--surface-color);
color: var(--text-color);
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: var(--page-background);
border-color: var(--muted-color);
color: var(--link-hover-color);
}
.mgs-login-user-link:focus-visible {
outline: 3px solid color-mix(in srgb, var(--theme-color) 18%, transparent);
outline-offset: 2px;
}
/* ==========================================================================
Profile Incomplete Notice
========================================================================== */
.mgs-profile-incomplete {
position: relative;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
column-gap: 12px;
row-gap: 2px;
margin: 18px 0 0;
padding: 14px 15px;
border: 1px solid color-mix(in srgb, var(--theme-color) 22%, var(--border-color));
border-radius: 10px;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--theme-color) 8%, var(--surface-color)),
var(--surface-color)
);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 6px 18px rgba(0, 0, 0, 0.04);
text-align: left;
overflow: hidden;
}

.mgs-profile-incomplete::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--theme-color);
}

.mgs-profile-incomplete::before {
content: "!";
grid-column: 1;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: start;
width: 30px;
height: 30px;
margin-top: 1px;
border-radius: 50%;
background: var(--theme-color);
color: #fff;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
line-height: 1;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--theme-color) 10%, transparent);
}

.mgs-profile-incomplete strong {
grid-column: 2;
display: block;
margin: 0;
color: var(--text-color);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}

.mgs-profile-incomplete span {
grid-column: 2;
display: block;
margin: 0;
color: var(--muted-color);
font-size: 12px;
line-height: 1.5;
}

.mgs-profile-incomplete + .mgs-login-user-menu {
margin-top: 12px;
}

.mgs-profile-incomplete + .mgs-login-user-menu .mgs-login-user-link {
border-color: color-mix(in srgb, var(--theme-color) 22%, var(--border-color));
background: color-mix(in srgb, var(--theme-color) 3%, var(--surface-color));
font-weight: 600;
}

.mgs-profile-incomplete + .mgs-login-user-menu .mgs-login-user-link:hover {
background: color-mix(in srgb, var(--theme-color) 8%, var(--surface-color));
border-color: var(--theme-color);
color: var(--text-color);
}

/* ==========================================================================
Terms & Privacy
========================================================================== */
.mgs-login-terms {
margin: 16px 0 0;
color: var(--muted-color);
font-size: 11px;
line-height: 1.6;
text-align: center;
}
/* ==========================================================================
Mobile
========================================================================== */
@media (max-width: 575px) {
.mgs-profile-incomplete {
grid-template-columns: 30px minmax(0, 1fr);
column-gap: 10px;
padding: 13px 13px;
}
.mgs-profile-incomplete::before {
width: 27px;
height: 27px;
font-size: 14px;
}

.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-options {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
.mgs-login-forgot {
align-self: flex-end;
}
}
/* ==========================================================================
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;
}
}