/* ═══════════════════════════════════════════════
   PARROTRON — LOGIN PAGE STYLES
   Matches: #0a2f24 jungle bg, #00C97B green,
            #FFD23F gold, Trebuchet MS font
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --ptr-jungle:   #0a2f24;
  --ptr-jungle2:  #0D3B2E;
  --ptr-emerald:  #1A6B4A;
  --ptr-green:    #00C97B;
  --ptr-gold:     #FFD23F;
  --ptr-ink:      #0A0A0A;
  --ptr-white:    #ffffff;
  --ptr-f:        'Trebuchet MS', 'Gill Sans MT', 'Century Gothic', sans-serif;
}

/* ── PAGE BACKGROUND ── */
html {
  background: var(--ptr-jungle) !important;
}

body.login {
  background: var(--ptr-jungle) !important;
  font-family: var(--ptr-f) !important;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── ANIMATED BACKGROUND GRID ── */
.ptr-bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,201,123,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,201,123,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── RADIAL GLOWS ── */
.ptr-glow-1 {
  position: fixed;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,201,123,.12) 0%, transparent 70%);
  top: -200px; right: -100px;
  pointer-events: none;
  z-index: 0;
}
.ptr-glow-2 {
  position: fixed;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,210,63,.07) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  pointer-events: none;
  z-index: 0;
}

/* ── FLOATING CHIPS ── */
.ptr-floating-chips { pointer-events: none; z-index: 0; }
.ptr-chip {
  position: fixed;
  background: rgba(10,10,10,.9);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 9px 14px;
  font-family: var(--ptr-f);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  animation: ptr-chipfloat 3s ease-in-out infinite;
  white-space: nowrap;
}
.ptr-chip-1 {
  top: 80px; right: 48px;
  color: var(--ptr-green);
  border-color: rgba(0,201,123,.3);
  animation-delay: 0s;
}
.ptr-chip-2 {
  bottom: 80px; left: 48px;
  color: var(--ptr-gold);
  border-color: rgba(255,210,63,.3);
  animation-delay: 1.2s;
}
@keyframes ptr-chipfloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (max-width: 600px) { .ptr-floating-chips { display: none; } }

/* ── BRAND HEADER (logo area) ── */
.ptr-login-brand {
  text-align: center;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.ptr-placeholder-label {
  display: none !important;
}

.login label[for="user_login"],
.login label[for="user_pass"],
.login .user-pass-wrap > label,
.login p:has(> label[for="user_login"]),
.login p:has(> label[for="user_pass"]) {
  display: none !important;
}

.ptr-parrot-svg {
  animation: ptr-float 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0,201,123,.3));
}
@keyframes ptr-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.ptr-brand-wordmark {
  font-family: var(--ptr-f);
  font-size: 34px;
  font-weight: 900;
  color: var(--ptr-white);
  letter-spacing: -1.5px;
  line-height: 1;
}
.ptr-brand-wordmark span { color: var(--ptr-green); }

.ptr-brand-tagline {
  font-family: var(--ptr-f);
  font-size: 12px;
  color: rgba(255,255,255,.45);
  letter-spacing: 1px;
}

/* ── HIDE DEFAULT WP LOGO H1 ── */
body.login h1 a {
  display: none !important;
}
#login h1 { display: none !important; }

/* ── LOGIN FORM WRAPPER ── */
#login {
  padding: 0 !important;
  width: min(940px, 96vw) !important;
  max-width: 940px !important;
  position: relative;
  z-index: 2;
  margin: 0 auto !important;
}

.ptr-login-shell {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(340px, 380px);
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.ptr-login-brand-col,
.ptr-login-form-col {
  display: flex;
  flex-direction: column;
}

.ptr-login-brand-col {
  align-items: center;
  justify-content: center;
}

.ptr-login-form-col {
  align-items: stretch;
}

@media (min-width: 900px) {
  body.login {
    padding: 24px;
  }
}

@media (max-width: 899px) {
  body.login {
    padding: 20px 14px;
    align-items: center;
    justify-content: center;
  }

  #login {
    width: min(420px, calc(100vw - 28px)) !important;
    max-width: 420px !important;
  }

  .ptr-login-shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── LOGIN FORM BOX ── */
#loginform,
#registerform,
#lostpasswordform,
.login form {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 24px !important;
  padding: 36px 36px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(20px) !important;
  margin-top: 0 !important;
}

.login form:has(#xs-social-login-container):not(:has(#user_pass)):not(:has(.forgetmenot)):not(:has(.submit)) {
  padding: 10px 18px !important;
}

/* ── LABELS ── */
.login label {
  font-family: var(--ptr-f) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* ── INPUTS ── */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  color: var(--ptr-white) !important;
  font-family: var(--ptr-f) !important;
  font-size: 15px !important;
  padding: 14px 18px !important;
  height: auto !important;
  line-height: 1.4 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .2s, background .2s !important;
  box-shadow: none !important;
  outline: none !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--ptr-green) !important;
  background: rgba(0,201,123,.07) !important;
  box-shadow: 0 0 0 3px rgba(0,201,123,.12) !important;
}
.login input[type="text"]::placeholder,
.login input[type="password"]::placeholder { color: rgba(255,255,255,.2) !important; }

/* ── SUBMIT BUTTON ── */
.login input[type="submit"],
.login .button-primary {
  background: var(--ptr-green) !important;
  color: var(--ptr-jungle2) !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: var(--ptr-f) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: .5px !important;
  padding: 15px 36px !important;
  height: auto !important;
  line-height: 1.4 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all .2s !important;
  box-shadow: 0 0 40px rgba(0,201,123,.3) !important;
  text-shadow: none !important;
}
.login input[type="submit"]:hover,
.login .button-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 60px rgba(0,201,123,.5) !important;
  background: #00e68a !important;
}
.login input[type="submit"]:focus,
.login .button-primary:focus {
  box-shadow: 0 0 0 3px rgba(0,201,123,.35) !important;
  outline: none !important;
}

/* ── REMEMBER ME CHECKBOX ── */
.login .forgetmenot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.login .forgetmenot label {
  font-size: 13px !important;
  letter-spacing: .5px !important;
  text-transform: none !important;
  color: rgba(255,255,255,.45) !important;
  margin-bottom: 0 !important;
}
.login input[type="checkbox"] {
  accent-color: var(--ptr-green) !important;
  width: 15px !important;
  height: 15px !important;
}

/* ── SUBMIT ROW ── */
.login .submit {
  margin-top: 24px !important;
}
.login p.submit { padding: 0 !important; }

/* ── FORGOT PASSWORD / BACK TO BLOG ── */
#nav, #backtoblog {
  text-align: center !important;
  margin-top: 8px !important;
  padding: 0 !important;
}
#nav a, #backtoblog a {
  font-family: var(--ptr-f) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.4) !important;
  transition: color .2s !important;
  text-decoration: none !important;
}
#nav a:hover, #backtoblog a:hover {
  color: var(--ptr-green) !important;
}
#backtoblog { margin-top: 4px !important; }

/* ── ERROR / NOTICE MESSAGES ── */
.login #login_error,
.login .message,
.login .success {
  background: rgba(255,107,107,.1) !important;
  border-left: 3px solid #FF6B6B !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.8) !important;
  font-family: var(--ptr-f) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}
.login .message,
.login .success {
  background: rgba(0,201,123,.1) !important;
  border-color: rgba(0,201,123,.5) !important;
}

/* ── PRIVACY POLICY LINK ── */
.login #login-form-defaults,
.login .privacy-policy-page-link {
  font-family: var(--ptr-f) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.25) !important;
  text-align: center !important;
  margin-top: 8px !important;
}
.login .privacy-policy-page-link a { color: rgba(255,255,255,.4) !important; }

/* ── FOOTER LINKS ── */
.login #login_form_footer {
  text-align: center;
  margin-top: 8px;
}

/* ── FIELD SPACING ── */
.login .input-text-wrap { margin-bottom: 0 !important; }
.login p { margin-bottom: 10px !important; }

/* Tight the form vertically */
.login form .user-pass-wrap { margin-bottom: 2px !important; }

/* ── PASSWORD TOGGLE BUTTON ── */
.login .wp-pwd button.button {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,.3) !important;
  box-shadow: none !important;
  padding: 0 8px !important;
}
.login .wp-pwd button.button:hover { color: var(--ptr-green) !important; }

/* ── LOADING SPINNER ── */
.login .spinner {
  filter: invert(1) brightness(2) !important;
  border-color: var(--ptr-green) transparent transparent transparent !important;
}


#xs-social-login-container{
	padding-bottom:0 !important; margin: 10px auto 6px;
}
#login form p{
  margin-bottom: 0 !important;
}

.ptr-login-form-col #nav,
.ptr-login-form-col #backtoblog,
.ptr-login-form-col .privacy-policy-page-link {
  width: 100%;
}

.ptr-login-form-col {
  position: relative;
}

.ptr-login-form-col #nav,
.ptr-login-form-col #backtoblog {
  display: inline-block !important;
  width: auto !important;
  margin-top: 8px !important;
}

.ptr-login-form-col #nav {
  display: none !important;
}

.ptr-login-form-col #backtoblog {
  margin-right: 14px !important;
}

.ptr-login-form-col .privacy-policy-page-link {
  display: inline-block !important;
  width: auto !important;
  margin-top: 8px !important;
}

.login .user-pass-wrap,
.login p:has(#user_pass),
.login p:has(label[for="user_pass"]) {
  display: none !important;
}

.login .forgetmenot,
.login p.forgetmenot,
.login .submit,
.login p.submit,
.login input[type="submit"],
.login .button-primary {
  display: none !important;
}