/**
* WooPlus Design System — wp-login.php skin
* ============================================================================
* Simple, centered single-card login. Renders on the four wp-login.php
* screens (login, register, lostpassword, rp/resetpass) when the WooPlus
* Auth module is disabled. When Auth is on, its own shortcode-driven
* login handles the page and this skin is suppressed.
*
* Design philosophy
* -----------------
* The standard SaaS pattern: one centred card, logo on top, heading +
* subline, form, primary button, footer links. No split shell, no hero
* image, no decorative panels — those proved more trouble than they
* were worth on a chrome the merchant only sees a few seconds per
* session.
*
* Markup it styles (injected by maybe_inject_login_brand + WP core):
*
*
*
*
← hidden
*
← our header
*
![]()
*
…
← only on login action
*
*
*
…
*
…
*
…
*
…
` inside #login).
This is the friendly notice WP shows on the register screen, the
lost-password screen, after a successful action, etc. Neutral blue
styling — NOT an error colour. The selector intentionally targets
`.message` directly inside #login (no phantom `.login` ancestor;
the body has class `login` but no nested `.login` element exists). */
body.login.wooplus-login-skin #login .message,
body.login.wooplus-login-skin #login p.message {
width: 100% !important;
max-width: none !important;
margin: 0 0 16px !important;
padding: 10px 14px !important;
background: rgba(61, 175, 229, .08) !important;
border: 1px solid rgba(61, 175, 229, .25) !important;
border-inline-start: 3px solid #3DAFE5 !important;
border-radius: 10px !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500;
color: #1F6A99 !important;
line-height: 1.6;
text-align: start;
}
/* Error message (#login_error). Red styling. */
body.login.wooplus-login-skin #login_error {
width: 100% !important;
max-width: none !important;
margin: 0 0 16px !important;
padding: 10px 14px !important;
background: rgba(238, 93, 80, .08) !important;
border: 1px solid rgba(238, 93, 80, .25) !important;
border-inline-start: 3px solid #EE5D50 !important;
border-radius: 10px !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500;
color: #B33C32 !important;
line-height: 1.6;
text-align: start;
}
/* Success notice (e.g. "Check your email" after lost-password). */
body.login.wooplus-login-skin #login .notice-success,
body.login.wooplus-login-skin #login .updated {
background: rgba(5, 205, 153, .08) !important;
border-color: rgba(5, 205, 153, .25) !important;
border-inline-start-color: #05CD99 !important;
color: #018660 !important;
}
body.login.wooplus-login-skin #login_error a,
body.login.wooplus-login-skin #login .message a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
/* Password strength meter (reset-password) */
body.login.wooplus-login-skin #pass-strength-result {
width: 100% !important;
margin: -6px 0 14px !important;
padding: 8px 12px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600;
background: var(--wooplus-surface-2, #F4F7FE) !important;
border: 1px solid var(--wooplus-border-strong, #D5DCEB) !important;
color: var(--wooplus-text-2, #2B3674) !important;
}
body.login.wooplus-login-skin #pass-strength-result.strong { background: rgba(5, 205, 153, .10) !important; border-color: #05CD99 !important; color: #01B574 !important; }
body.login.wooplus-login-skin #pass-strength-result.good { background: rgba(106, 210, 255, .12) !important; border-color: #6AD2FF !important; color: #3DAFE5 !important; }
body.login.wooplus-login-skin #pass-strength-result.bad { background: rgba(255, 206, 32, .12) !important; border-color: #FFCE20 !important; color: #E1A60B !important; }
body.login.wooplus-login-skin #pass-strength-result.short { background: rgba(238, 93, 80, .10) !important; border-color: #EE5D50 !important; color: #D64940 !important; }
/* ============================================================================
LANGUAGE SWITCHER (multi-locale installs)
============================================================================ */
body.login.wooplus-login-skin .language-switcher {
margin: 18px 0 0 !important;
padding: 14px 0 0;
border-top: 1px solid var(--wooplus-divider, #F4F7FE);
text-align: center;
}
body.login.wooplus-login-skin .language-switcher form {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
border: 0;
}
body.login.wooplus-login-skin .language-switcher label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--wooplus-text-mute, #707EAE);
}
body.login.wooplus-login-skin .language-switcher select {
height: 34px;
padding: 0 10px;
background: var(--wooplus-surface-2, #F4F7FE);
border: 1px solid transparent;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--wooplus-text, #1B254B);
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease;
}
body.login.wooplus-login-skin .language-switcher select:hover,
body.login.wooplus-login-skin .language-switcher select:focus {
background: var(--wooplus-surface, #FFFFFF);
border-color: var(--wooplus-brand-500, #157a41);
outline: none;
}
body.login.wooplus-login-skin .language-switcher .button {
height: 34px;
padding: 0 12px;
background: var(--wooplus-surface, #FFFFFF);
border: 1px solid var(--wooplus-border-strong, #D5DCEB);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--wooplus-text, #1B254B);
cursor: pointer;
box-shadow: none;
text-shadow: none;
line-height: 32px;
min-height: 34px;
transition: border-color 150ms ease, color 150ms ease;
}
body.login.wooplus-login-skin .language-switcher .button:hover {
border-color: var(--wooplus-brand-500, #157a41);
color: var(--wooplus-brand-500, #157a41);
}
/* Privacy-policy link (WP 5.7+) */
body.login.wooplus-login-skin .privacy-policy-page-link {
margin: 10px 0 0 !important;
text-align: center;
font-size: 12px;
color: var(--wooplus-text-mute, #707EAE);
}
body.login.wooplus-login-skin .privacy-policy-page-link a {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed currentColor;
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 480px) {
body.login.wooplus-login-skin {
padding: 12px 8px;
}
body.login.wooplus-login-skin #login {
padding: 28px 20px 24px;
}
body.login.wooplus-login-skin .wpu-login-subtitle {
font-size: 13px;
}
}
/* ============================================================================
DARK MODE
============================================================================ */
html[data-wooplus-theme="dark"] body.login.wooplus-login-skin {
background: var(--wooplus-bg, #0B1437);
color: var(--wooplus-text, #E2E8F4);
}
html[data-wooplus-theme="dark"] body.login.wooplus-login-skin #login {
background: var(--wooplus-surface, #111C44);
box-shadow:
0 20px 50px -20px rgba(0, 0, 0, .6),
0 6px 16px -8px rgba(0, 0, 0, .4);
}
/* ============================================================================
ACCESSIBILITY
============================================================================ */
@media (prefers-reduced-motion: reduce) {
body.login.wooplus-login-skin .button-primary {
transition: none;
}
body.login.wooplus-login-skin .button-primary:hover {
transform: none;
}
}
body.login.wooplus-login-skin :focus-visible {
outline: 2px solid var(--wooplus-brand-500, #157a41);
outline-offset: 2px;
}
body.login.wooplus-login-skin input:focus-visible,
body.login.wooplus-login-skin button:focus-visible,
body.login.wooplus-login-skin .button-primary:focus-visible {
outline: none; /* dedicated focus styles already above */
}