/* ==========================================================================
 *  QYNTRO PREMIUM — LOGIN / AUTH pages
 *  Dark + acid-lime brand treatment: bigger bold heading, premium form,
 *  lime CTA. Loaded via ONE <link> line in layouts/auth.blade.php.
 *  Remove that line to revert.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --qpl-bg: #0f1113;
  --qpl-card: #17191d;
  --qpl-border: #26292e;
  --qpl-text: #f7f7f8;
  --qpl-muted: #9b9ea6;
  --qpl-lime: #d1fe17;
  --qpl-lime-ink: #131517;
  --qpl-lime-soft: rgba(209, 254, 23, 0.10);
}

/* ---- page ground (auth pages only) ---- */
body.white-background,
.login-background {
  background: var(--qpl-bg) !important;
  color: var(--qpl-text);
}

/* ---- premium heading ---- */
.login-title {
  font-family: 'Space Grotesk', 'Poppins', sans-serif !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
  color: var(--qpl-text) !important;
  text-shadow: none !important;
}
.login-title .text-info,
.login-title .text-info a {
  color: var(--qpl-lime) !important;
  text-shadow: 0 0 22px rgba(209, 254, 23, 0.4);
  text-decoration: none !important;
}

/* ---- form labels + inputs ---- */
#login-responsive label { color: var(--qpl-muted) !important; }
#login-responsive .form-control {
  background: var(--qpl-card) !important;
  border: 1px solid var(--qpl-border) !important;
  color: var(--qpl-text) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  height: auto !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#login-responsive .form-control::placeholder { color: var(--qpl-muted) !important; opacity: 0.7; }
#login-responsive .form-control:focus {
  border-color: rgba(209, 254, 23, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(209, 254, 23, 0.12) !important;
}
/* kill Chrome's light autofill background on saved email/password */
#login-responsive input:-webkit-autofill,
#login-responsive input:-webkit-autofill:hover,
#login-responsive input:-webkit-autofill:focus,
#login-responsive input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--qpl-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--qpl-card) inset !important;
  box-shadow: 0 0 0 1000px var(--qpl-card) inset !important;
  caret-color: var(--qpl-text) !important;
  border: 1px solid var(--qpl-border) !important;
  border-radius: 12px !important;
}

/* ---- links (forgot password, sign up) ---- */
#login-responsive .text-info,
#login-responsive .text-info a,
.special-action-sign { color: var(--qpl-lime) !important; }
.special-action-sign:hover { filter: brightness(1.1); }

/* register consent — clickable Terms / Privacy links */
.custom-switch-description a.qpl-legal-link,
a.qpl-legal-link {
  color: var(--qpl-lime) !important;
  font-weight: 600;
  text-decoration: underline;
}
a.qpl-legal-link:hover { filter: brightness(1.15); }

/* ---- primary "Sign In" button ---- */
.login-main-button,
.btn-primary.login-main-button {
  background: var(--qpl-lime) !important;
  border-color: var(--qpl-lime) !important;
  color: var(--qpl-lime-ink) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  box-shadow: 0 10px 30px -8px rgba(209, 254, 23, 0.5);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.login-main-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  color: var(--qpl-lime-ink) !important;
}
/* clicked / focus / loading(disabled) state: stay on-brand lime, don't go grey */
.login-main-button:active,
.login-main-button:focus,
.login-main-button:focus-visible,
.login-main-button:disabled,
.login-main-button[disabled] {
  background: var(--qpl-lime) !important;
  border-color: var(--qpl-lime) !important;
  color: var(--qpl-lime-ink) !important;
  outline: none !important;
  opacity: 1;
}
/* loading spinner dots: dark (not white) so they're clearly visible on lime */
.login-main-button .loading span {
  background-color: var(--qpl-lime-ink) !important;
}

/* ---- social login buttons: dark surface, light text, lime glow on hover ---- */
.social-login-button,
.social-login-button span,
.social-login-button:hover,
.social-login-button:hover span,
.social-login-button:focus,
.social-login-button:focus span {
  color: var(--qpl-text) !important;   /* light label, visible in EVERY state */
}
.social-login-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--qpl-card) !important;
  background-image: none !important;
  border: 1.5px solid var(--qpl-border) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
/* hover / focus / active / click: keep it dark, lime border + lime glow */
.social-login-button:hover,
.social-login-button:focus,
.social-login-button:focus-visible,
.social-login-button:active {
  background: var(--qpl-card) !important;
  background-image: none !important;
  transform: translateY(-2px);
  border: 1.5px solid var(--qpl-lime) !important;   /* brand lime, never black */
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(209, 254, 23, 0.4), 0 0 26px -2px rgba(209, 254, 23, 0.55) !important;
}

/* ---- REGISTER page only: lime social buttons (scoped via form action) ---- */
form[action*="register"] .social-login-button,
form[action*="register"] .social-login-button span,
form[action*="register"] .social-login-button i,
form[action*="register"] .social-login-button:hover,
form[action*="register"] .social-login-button:hover span,
form[action*="register"] .social-login-button:hover i,
form[action*="register"] .social-login-button:focus,
form[action*="register"] .social-login-button:active {
  color: var(--qpl-lime-ink) !important;   /* dark text/icon, crisp on lime */
}
form[action*="register"] .social-login-button {
  background: var(--qpl-lime) !important;
  background-image: none !important;
  border: 1.5px solid var(--qpl-lime) !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px -8px rgba(209, 254, 23, 0.5);
}
form[action*="register"] .social-login-button:hover,
form[action*="register"] .social-login-button:focus,
form[action*="register"] .social-login-button:active {
  background: var(--qpl-lime) !important;
  background-image: none !important;
  border: 1.5px solid var(--qpl-lime) !important;
  outline: none !important;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 2px rgba(209, 254, 23, 0.35), 0 0 28px -2px rgba(209, 254, 23, 0.6) !important;
}

/* ---- divider ---- */
.divider .divider-text { color: var(--qpl-muted) !important; }

/* ---- remember-me switch ---- */
.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--qpl-lime) !important;
  border-color: var(--qpl-lime) !important;
}

/* ---- right-side media panel (GIF) ---- */
#login-background {
  background: var(--qpl-bg);
  min-height: 100%;
  overflow: hidden;
}
#login-background .login-bg,
#login-background .login-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#login-background .login-bg img {
  min-height: 100vh;
  border-radius: 0 !important;
}