/* File: public_html/bila-doxa/assets/css/auth.css */
/* ============================================================================
   BILA — AUTH PAGES (login.php, reset-password.php)
   Loaded after theme.css. Same design language as the app shell (Fraunces
   headline, Archivo body, accent green), but a normal responsive page
   layout instead of the phone-frame — these are standalone pages.
   ============================================================================ */

body{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.auth-shell{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Hero banner (Fraunces wordmark on accent green), mirrors screen-welcome */
.auth-hero{
  background:var(--accent);
  color:#F4F2EC;
  padding:48px 24px 40px;
  text-align:center;
  flex-shrink:0;
}
.auth-wordmark{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:34px;
  letter-spacing:0.5px;
  margin-bottom:6px;
}
.auth-hero p{
  font-size:13px;
  color:#BFD3CB;
  letter-spacing:0.3px;
}

/* Card that holds the actual forms */
.auth-card{
  flex:1;
  width:100%;
  max-width:420px;
  margin:0 auto;
  background:var(--surface);
  padding:28px 24px 40px;
  position:relative;
}

.auth-guest-link{
  display:block;
  text-align:center;
  font-size:12.5px;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  margin-bottom:22px;
}

.auth-tabs{
  display:flex;
  gap:8px;
  margin-bottom:24px;
  background:var(--accent-soft);
  border-radius:100px;
  padding:4px;
}
.auth-tab{
  flex:1;
  border:none;
  background:transparent;
  border-radius:100px;
  padding:10px 12px;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:13px;
  color:var(--accent);
  cursor:pointer;
}
.auth-tab.active{
  background:var(--accent);
  color:#fff;
}

.auth-panel{ display:none; }
.auth-panel.active{ display:block; }

.auth-submit{ margin-top:6px; }

.auth-forgot-link,
.auth-back-link{
  display:block;
  background:none;
  border:none;
  cursor:pointer;
  font-family:'Archivo',sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  text-align:right;
  margin:-10px 0 18px;
  padding:0;
}
.auth-back-link{ text-align:left; color:var(--accent); margin-bottom:18px; }

.auth-hint{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:18px;
}

.auth-error{
  font-size:12.5px;
  color:var(--danger);
  margin-top:-6px;
  min-height:1px;
}

/* Toast — standalone pages have no .frame, so this is fixed to the viewport */
.toast-stack{
  position:fixed;
  left:16px; right:16px;
  bottom:24px;
  z-index:500;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  max-width:420px;
  margin:0 auto;
}
.toast{
  background:var(--ink);
  color:#fff;
  font-family:'Archivo',sans-serif;
  font-size:12.5px;
  font-weight:600;
  padding:13px 16px;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* Wider screens: center the card as a floating panel instead of full-bleed */
@media (min-width:640px){
  body{
    background:#0E0F0D;
  }
  .auth-shell{
    max-width:420px;
    margin:32px auto;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 40px 80px rgba(0,0,0,0.5);
    min-height:auto;
  }
}