/* ==========================================================================
   Sepo WordPress Bridge — styled login page (single-card layout)
   The whole page is ONE card: logo, title, form, then a compact footer row
   with "Lost your password?" and "Go to site" right under the button.
   Applies to log in, lost password, reset password and register screens.
   Colours, logo, title and footer come from the feature's settings.
   ========================================================================== */

body.login {
  --primary: #00bcd4;
  --primary-dark: #2e6b76;
  --slate: #817c94;
  --surface: rgba(255, 255, 255, 0.9);
  --border: #e0e6e8;
  --text-main: #333333;
  --error: #c0392b;
  --error-bg: #fff5f5;
  --error-border: #fed7d7;
  --ok: #2e7d5b;
  --ok-bg: #f1faf5;
  --ok-border: #c9ead9;
}

body.login *,
body.login *::before,
body.login *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

body.login {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--primary-dark) 14%, transparent), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, #fff), color-mix(in srgb, var(--primary) 30%, #fff));
  background-attachment: fixed;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: auto;
  margin: 0;
  padding: 24px 16px;
}

/* --------------------------------------------------------------------------
   Card — #login is the card; its children sit on a 2-column grid so the two
   footer links share one row instead of stacking.
   -------------------------------------------------------------------------- */

#login {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 36px 40px 22px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

#login > * {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Logo and title
   -------------------------------------------------------------------------- */

#login h1,
#login .wp-login-logo {
  margin: 0 0 6px;
  text-align: center;
}

#login h1 a,
#login .wp-login-logo a {
  width: 72px !important;
  height: 72px !important;
  background-size: contain !important;
  background-position: center !important;
  margin: 0 auto !important;
}

#login .sepo-login-title {
  margin: 0 0 22px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--slate);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Forms (no card styling of their own — the card is #login)
   -------------------------------------------------------------------------- */

#login form {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none !important;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Labels and inputs
   -------------------------------------------------------------------------- */

#login form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  text-align: left;
  display: block;
  margin-bottom: 5px;
}

#login form input[type="text"],
#login form input[type="password"],
#login form input[type="email"] {
  width: 100%;
  min-height: 0;
  padding: 12px 15px;
  margin: 0 0 15px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  background: #ffffff;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus ring — kept so keyboard users can see where they are */
#login form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

#login form .description,
#login form .indicator-hint,
#login #pass-strength-result {
  font-size: 12px;
  color: var(--slate);
  text-align: left;
}

#login #pass-strength-result {
  width: 100%;
  margin: -6px 0 15px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Password field and show-password toggle
   -------------------------------------------------------------------------- */

#login form .wp-pwd {
  position: relative;
  margin-bottom: 15px;
}

#login form .wp-pwd input[type="password"],
#login form .wp-pwd input[type="text"] {
  margin-bottom: 0;
  padding-right: 45px;
}

#login form .wp-pwd .button.wp-hide-pw {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--slate);
}

#login form .wp-pwd .button.wp-hide-pw:hover,
#login form .wp-pwd .button.wp-hide-pw:focus {
  color: var(--primary-dark);
  background: transparent !important;
  box-shadow: none !important;
}

#login form .wp-pwd .button.wp-hide-pw:focus-visible {
  outline: 2px solid var(--primary-dark) !important;
  outline-offset: 1px;
  border-radius: 6px;
}

#login form .wp-pwd .button.wp-hide-pw .dashicons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  top: 0;
}

/* --------------------------------------------------------------------------
   Remember me
   -------------------------------------------------------------------------- */

#login form .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  font-size: 13px;
  color: var(--slate);
}

#login form .forgetmenot label {
  margin: 0;
  font-weight: 500;
}

#login form .forgetmenot input[name="rememberme"] {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Primary button — flat
   -------------------------------------------------------------------------- */

#login form .submit,
#login form .reset-pass-submit {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#login .button-primary {
  float: none !important;
  width: 100%;
  padding: 12px;
  height: auto;
  min-height: 0;
  margin: 0;
  background: var(--primary) !important;
  border: none !important;
  border-radius: 8px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.2s ease;
}

#login .button-primary:hover,
#login .button-primary:focus,
#login .button-primary:active {
  background: var(--primary-dark) !important;
  box-shadow: none !important;
  outline: none !important;
}

#login .button-primary:focus-visible {
  outline: 2px solid var(--primary-dark) !important;
  outline-offset: 2px;
}

#login .button-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* "Generate password" on the reset screen */
#login form .reset-pass-submit .button:not(.button-primary) {
  width: 100%;
  padding: 10px;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--slate);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Footer links — one compact row under the button:
   [ Lost your password? ]                    [ ← Go to site ]
   Prefixed with #login so they beat core's ".login #nav" margins/padding.
   -------------------------------------------------------------------------- */

#login #nav,
#login #backtoblog,
#login .privacy-policy-page-link {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.3;
  background: transparent;
  border: none;
}

#login #nav,
#login #backtoblog {
  margin-top: 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  align-self: start;
}

#login #nav {
  grid-column: 1;
  text-align: left;
}

#login #backtoblog {
  grid-column: 2;
  text-align: right;
}

/* Only one of the two present: it takes the whole row */
#login #nav:only-of-type,
#login #backtoblog:only-of-type {
  grid-column: 1 / -1;
  text-align: center;
}

#login #nav a,
#login #backtoblog a,
#login .privacy-policy-page-link a {
  color: var(--slate) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s ease;
}

#login #nav a:hover,
#login #nav a:focus,
#login #backtoblog a:hover,
#login #backtoblog a:focus,
#login .privacy-policy-page-link a:hover,
#login .privacy-policy-page-link a:focus {
  color: var(--primary-dark) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

#login .privacy-policy-page-link {
  text-align: center;
  margin-top: 10px;
}

#login .privacy-policy-page-link a {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Messages / errors / success
   -------------------------------------------------------------------------- */

#login .message,
#login .success,
#login .notice,
#login #login_error {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left-width: 1px;
  background: #fff;
  color: var(--text-main);
  box-shadow: none;
  overflow-wrap: anywhere;
}

#login .message,
#login .success {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

#login .error,
#login #login_error {
  color: var(--error);
  background: var(--error-bg);
  border-color: var(--error-border);
}

/* --------------------------------------------------------------------------
   Outside the card
   -------------------------------------------------------------------------- */

.login .language-switcher {
  margin-top: 16px;
  padding: 0;
}

.login .language-switcher form {
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sepo-login-footer {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--slate);
  text-align: center;
}

.sepo-login-footer a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  #login {
    padding: 28px 22px 18px;
  }

  #login #nav,
  #login #backtoblog {
    grid-column: 1 / -1;
    text-align: center;
  }

  #login #backtoblog {
    margin-top: 0;
    padding-top: 8px;
    border-top: 0;
  }
}