/* Login page specific styles (scoped under .auth-page) */

/* Compact hero */
.auth-page .hero.hero-sm{padding:3rem 0 2rem}
.auth-page .hero.hero-sm .hero-inner{display:grid;gap:.5rem;justify-items:center;text-align:center}

/* Two-column grid for login/register cards */
.auth-page .auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width: 900px){ .auth-page .auth-grid{grid-template-columns:1fr} }

/* Cards */
.auth-page .card{background:var(--card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}
.auth-page .card-header{padding:1rem;border-bottom:1px solid var(--border-color);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.auth-page .card-body{padding:1rem}

/* Forms inside cards */
.auth-page .card-body form label{display:grid;gap:.5rem;margin:.6rem 0;color:var(--text)}
.auth-page .card-body form input,
.auth-page .card-body form select,
.auth-page .card-body form textarea{width:100%;background:#0c1326;border:1px solid #1d2a52;color:var(--text);padding:.75rem 1rem;border-radius:.6rem;font-size:.95rem}
.auth-page .card-body form input:focus,
.auth-page .card-body form select:focus,
.auth-page .card-body form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.25)}

/* Password toggle */
.auth-page .input-with-toggle{position:relative;display:block}
.auth-page .input-with-toggle input{padding-right:4rem !important}
.auth-page .pw-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:2.4rem !important;
  min-width:3.2rem !important;
  padding:0 .8rem !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  background:#182246 !important;
  border:1px solid #223260 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.5) !important;
  z-index:1200 !important;
}
.auth-page .pw-toggle:hover{
  background:#223260 !important;
  border-color:#2b3b6e !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.auth-page .pw-toggle[aria-pressed="true"]{
  background:var(--primary) !important;
  border-color:var(--ring) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Inline checkbox row */
.auth-page .checkbox-inline{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .6rem}

/* Helpers */
.auth-page .w-100{width:100%}
.auth-page .mt-2{margin-top:.5rem}

/* Error placeholders to avoid layout shift */
.auth-page .error{color:var(--err)}
.auth-page .error[role="alert"]{min-height:1.25rem}

/* Reveal on scroll (match homepage feel) */
.auth-page [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.auth-page [data-reveal].in{opacity:1;transform:none}

/* Forgot/Reset two-column area */
.auth-page .auth-aux-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width: 900px){ .auth-page .auth-aux-grid{grid-template-columns:1fr} }

/* Mobile-only: Sign In + Post buttons as white on login page */
@media (max-width: 640px){
  /* Sign In button inside login form */
  body.auth-page #loginForm .btn-primary{
    background:#ffffff !important;
    color:#111111 !important;
    border-color:#ffffff !important;
  }
  body.auth-page #loginForm .btn-primary:hover{
    background:#f3f4f6 !important; /* light gray hover */
    border-color:#f3f4f6 !important;
    color:#111111 !important;
  }
  /* Header "Post" CTA (nav button) */
  body.auth-page .site-header .nav a.btn{
    background:#ffffff !important;
    color:#111111 !important;
    border-color:#ffffff !important;
  }
  body.auth-page .site-header .nav a.btn:hover{
    background:#f3f4f6 !important;
    border-color:#f3f4f6 !important;
    color:#111111 !important;
  }
}