/*
  static/css/login.css
  Clean, refactored login page styles (optimized)
  - Mobile-first
  - Centralized variables for quick tuning
  - Logical sections: layout, type, form, buttons, socials, responsive
*/

/* Global box-sizing so components behave predictably */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

:root {
  --forest: var(--color-forest, #2b7a3a);
  --page-padding: 0;
  --card-max-width: 400px;
  --card-padding: 28px;
  --control-height: 48px;
  --radius: 16px;
  --transition-fast: 0.22s;

  /* Social icon sizing */
  --icon-gap: 8px;
  --social-icon-box: calc(var(--control-height) - (var(--icon-gap) * 2));
  --social-icon-scale: 0.5;
}

/* Minimal reset applied to the login page only */
body.login-page { margin: 0; padding: 0; height: 100%; }

/* ------------------------------
   Layout
   ------------------------------ */
.login-page { background: var(--forest); min-height: 100vh; }

.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  animation: fadeIn 260ms ease both;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.login-card {
  width: 100%;
  max-width: var(--card-max-width);
  padding: 0 var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* Remove default paragraph margins inside the card to avoid accidental spacing */
.login-card p { margin: 0; }

/* ------------------------------
   Type & Branding
   ------------------------------ */
.login-card,
.brand-row,
.login-title,
.login-subtitle,
.login-form,
.btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.login-top { display:flex; justify-content:center }
.brand-row { display:flex; align-items:center; justify-content:center; gap:0; font-size:1.6rem }
.login-logo { height:3rem; width:auto; aspect-ratio:1/1; display:block; transform: translate(-8px, -2px); }
.login-title { font-size:1.6rem; margin:0; color:#fff }
.login-subtitle { font-size:.95rem; color:rgba(255,255,255,.9); margin:2px 0 6px; text-align:center }

/* ------------------------------
   Form
   ------------------------------ */
.login-form { display:flex; flex-direction:column; gap:10px; margin-top:4px; width:100% }
.login-form .inputs { display:flex; flex-direction:column; gap:3px }

.login-form input[type="email"],
.login-form input[type="password"] {
  width:100%;
  height: var(--control-height);
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.login-form input::placeholder { color: rgba(255,255,255,.8) }
.login-form input:focus { border-color: rgba(255,255,255,.28); box-shadow: 0 6px 24px rgba(43,122,58,.12) }

/* Rounded stack: email top, password bottom */
.login-form input[type="email"] { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius) }
.login-form input[type="password"] { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius) }

/* ------------------------------
   Buttons
   ------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; font-weight:600; border:none; height:var(--control-height); box-sizing:border-box; text-decoration:none }

.btn-primary { width:100%; background:#fff; color:var(--forest); padding:0 14px; border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; font-size:1rem }
.btn-primary:hover { filter:brightness(.96); box-shadow: 0 8px 20px rgba(0,0,0,.12) }

.btn-outline { padding:6px 18px; border-radius:999px; border:2px solid rgba(255,255,255,.18); background:transparent; color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center }
.btn-outline:hover { background: rgba(255,255,255,.06) }

/* Smaller variant used inside the CTA box (reduces visual height) */
.cta-box .btn-outline { height:36px; padding:4px 12px; font-size:0.95rem }

/* ------------------------------
   Divider
   ------------------------------ */
.divider { display:flex; align-items:center; gap:10px; margin:6px 0 }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:#e8e8ec }
.divider span { padding:0 10px; color:#9aa0a6; font-weight:600; font-size:.9rem }

/* ------------------------------
   Social buttons (card style)
   Left: circular white icon area; Right: label
   ------------------------------ */
.socials { display:flex; flex-direction:column; gap:10px; width:100% }
.btn-social { width:100%; display:flex; align-items:center; padding:0; gap:0; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color:#fff; box-sizing:border-box; height:var(--control-height); border-radius:var(--radius); overflow:hidden }
.btn-social:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12) }

.icon-circle {
  display:flex; align-items:center; justify-content:center;
  width: var(--social-icon-box);
  height: var(--social-icon-box);
  margin: var(--icon-gap) 12px var(--icon-gap) 8px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 var(--social-icon-box);
  box-sizing: border-box;
}

.social-icon-img {
  width: calc(var(--social-icon-box) * var(--social-icon-scale));
  height: calc(var(--social-icon-box) * var(--social-icon-scale));
  object-fit: contain;
  display:block;
  margin:auto;
}

.btn-social .social-label { display:flex; align-items:center; padding:0 16px; flex:1; justify-content:flex-start; color:#fff; font-weight:700; font-size:0.95rem }

/* ------------------------------
   CTA box
   ------------------------------ */
.cta-box { border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); padding:16px 18px; border-radius:var(--radius); display:flex; flex-direction:column; gap:8px; align-items:center; color:#fff; text-align:center }

/* Give extra space between socials and the CTA register box */
.register { margin-top: 18px; }

/* class applied to body to lock document scrolling (used by JS) */
.locked-scroll { position: fixed !important; width: 100% !important; }
.locked-inner { overflow: hidden !important; touch-action: none !important; -webkit-overflow-scrolling: auto !important; }

/* Floating flash messages shown at top of screen (no JS required) */
.floating-messages {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none; /* allow clicks to pass through except on the alert itself */
  width: 100%;
  max-width: var(--card-max-width);
  padding: 0 var(--card-padding);
  box-sizing: border-box;
}
.floating-messages .alert,
.floating-messages .login-alert {
  pointer-events: auto;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  position: relative;
}

/* Danger variant: glass style */
.floating-messages .login-alert-danger {
  background: rgba(180, 20, 40, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1.5px solid rgba(255, 120, 130, 0.35) !important;
  color: #fff !important;
}

/* Header row: title left, close right */
.login-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.login-alert-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Body text */
.login-alert-msg {
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  color: rgba(255,255,255,.9);
}

/* Close button */
.login-alert-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color .15s;
}
.login-alert-close:hover { color: #fff; }

.login-alert-sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,.25);
  margin: 0 0 10px;
}

/* ------------------------------
   Misc
   ------------------------------ */
.muted-link { color: rgba(255,255,255,.85); font-size:.9rem; text-decoration:none }
.muted-link:hover { color:#fff; text-decoration:underline }
.visually-hidden { position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap }

@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

@media (min-width: 640px) {
  .login-card { padding: 32px }
  .login-title { font-size:1.8rem }
  .login-logo { height:3.5rem }
  .icon-circle { width: var(--social-icon-box); height: var(--social-icon-box) }
}