/* LiveAlert — auth.css, logo above welcome phrase on a red map (standalone) */
:root {
  --red: #b91c1c;
  --red-dark: #7f1d1d;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font-body); color: #fff; line-height: 1.5; -webkit-font-smoothing: antialiased; background: #f3f4f6; }
.hidden { display: none !important; }
.page { display: none; }
.page.active { display: block; min-height: 100%; }

/* ---------- Page + card (the red map lives inside the card) ---------- */
.login-wrapper { position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: #fff; }
.login-wrapper::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("../asset/bg.png") center / cover no-repeat; }
.login-wrapper::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(255, 255, 255, .82); }
.login-column { width: 100%; max-width: 440px; }
.login-card { position: relative; isolation: isolate; overflow: hidden; width: 100%; padding: 40px 36px 36px; border-radius: 18px; background: var(--red-dark); box-shadow: 0 20px 50px rgba(127, 29, 29, .28); }
.login-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../asset/bg.jpg") center / cover no-repeat; filter: grayscale(1) contrast(1.05) brightness(1.1); }
.login-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(185, 28, 28, .88), rgba(127, 29, 29, .93)); }

/* ---------- Logo, then the welcome phrase ---------- */
.login-hero { display: flex; justify-content: center; margin-bottom: 22px; }
.login-logo-img { height: 90px; width: auto; display: block; user-select: none;}
.auth-title { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.15; text-align: center; margin-bottom: 8px; }
.login-subtitle { text-align: center; color: rgba(255, 255, 255, .85); font-size: 1rem; margin-bottom: 30px; }

/* ---------- Form ---------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: rgba(255, 255, 255, .95); }
.input-wrapper { position: relative; }
.input-wrapper input {
  width: 100%; height: 48px; padding: 0 44px 0 16px;
  font-family: var(--font-body); font-size: .95rem; color: #111827;
  background: #fff; border: 2px solid transparent; border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-wrapper input::placeholder { color: #9ca3af; }
.input-wrapper input:focus { border-color: #fecaca; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.password-toggle-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 4px; font-size: .95rem; color: #9ca3af; cursor: pointer; }
.password-toggle-icon:hover { color: #111827; }
.forgot-link { display: inline-block; margin-top: 8px; font-size: .84rem; color: #fff; opacity: .9; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; opacity: 1; }

/* ---------- Buttons ---------- */
.btn-login, .btn-signup { width: 100%; height: 48px; border-radius: 10px; cursor: pointer; font-family: var(--font-body); font-size: .95rem; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.btn-login { margin-top: 8px; border: none; background: #fff; color: var(--red); }
.btn-login:hover { background: #fee2e2; }
.btn-signup { margin-top: 12px; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
.btn-signup:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.btn-login:focus-visible, .btn-signup:focus-visible, .auth-back-btn:focus-visible, .forgot-link:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 2px; }
.auth-back-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: .88rem; color: rgba(255, 255, 255, .85); cursor: pointer; }
.auth-back-btn:hover { color: #fff; }

/* ---------- Messages ---------- */
.login-error, .login-success { margin-top: 16px; font-size: .86rem; font-weight: 500; text-align: center; border-radius: 8px; }
.login-error:not(:empty) { padding: 10px 14px; color: #7f1d1d; background: #ffffff; border: 1px solid #fecaca; }
.login-success:not(:empty) { padding: 10px 14px; color: #166534; background: #ffffff; border: 1px solid #bbf7d0; }

@media (max-width: 480px) { .login-card { padding: 32px 22px 28px; } .auth-title { font-size: 2rem; } .login-logo-img { height: 64px; } }