/* ================================================================
   AUTH PAGES (Login + Register) — Web/Desktop CSS
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #f7f9fc; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Nunito Sans', sans-serif; }

/* ── Auth Box (shared) ── */
.auth-box { background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); width: 400px; text-align: center; }
.auth-box img.auth-logo { max-height: 60px; margin-bottom: 10px; }
.auth-box h2 { font-family: 'Nunito Sans', sans-serif; font-weight: 800; margin-bottom: 5px; color: var(--text-color, #2c3e50); font-size: 1.3rem; }

/* ── Notice / Alert ── */
.auth-notice { background: #EAF3DE; border: 1px solid #97C459; border-radius: 10px; padding: 12px; margin-bottom: 20px; font-size: 0.85rem; color: #27500A; font-weight: 600; }
.auth-success { background: #EAF3DE; border: 1px solid #97C459; border-radius: 10px; padding: 10px; margin-bottom: 16px; font-size: 0.85rem; color: #27500A; font-weight: 600; }
.auth-error { color: #e74c3c; background: #fdeaea; padding: 10px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem; font-weight: 600; text-align: center; }

/* ── Inputs ── */
.auth-box input[type="text"],
.auth-box input[type="email"],
.auth-box input[type="password"] { width: 100%; padding: 13px; margin-bottom: 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; box-sizing: border-box; font-size: 0.95rem; font-family: 'Nunito Sans', sans-serif; transition: .2s; }
.auth-box input:focus { outline: none; border-color: var(--primary-color, #3498db); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }

/* ── Labels ── */
.auth-box label { display: block; text-align: left; font-size: 0.82rem; font-weight: 600; color: #555; margin-bottom: 4px; }

/* ── Login Button ── */
.btn-login { background: var(--primary-color, #3498db); color: #fff; width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 1rem; font-family: 'Nunito Sans', sans-serif; transition: .2s; }
.btn-login:hover { opacity: .9; }

/* ── Register Button ── */
.btn-reg { background: var(--primary-color, #2ecc71); color: #fff; width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 700; font-family: 'Nunito Sans', sans-serif; transition: .2s; }
.btn-reg:hover { opacity: .9; }

/* ── Divider ── */
.divider { margin: 18px 0; display: flex; align-items: center; color: #aaa; font-size: 0.8rem; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #eee; }
.divider:not(:empty)::before { margin-right: .5em; }
.divider:not(:empty)::after { margin-left: .5em; }

/* ── Google Button ── */
.btn-google { background: #fff; border: 1.5px solid #e2e8f0; width: 100%; padding: 11px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-family: 'Nunito Sans', sans-serif; font-size: 0.92rem; transition: .2s; }
.btn-google:hover { border-color: var(--primary-color, #3498db); background: #f9f9f9; }

/* ── Footer Links ── */
.auth-footer { margin-top: 20px; font-size: 0.9rem; }
.auth-footer a { color: var(--primary-color, #3498db); text-decoration: none; font-weight: 600; }
.auth-browse { font-size: 0.85rem; margin-top: 8px; }
.auth-browse a { color: #999; text-decoration: none; }
.auth-browse a:hover { color: var(--primary-color, #3498db); }