/* ============================================================
   IL MIO INVITO — LOGIN (login.html)
   Richiede main.css. Prima era un blocco <style> dentro login.html.
   ============================================================ */

body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--c-dark); overflow: hidden; }
.login-bg { position: fixed; inset: 0; background: url('../img/hero-bg.jpg') center/cover no-repeat; opacity: .15; }
.login-glow { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,168,76,.06), transparent 70%); pointer-events: none; }
.login-card {
  position: relative; z-index: 1;
  background: rgba(26,18,8,.85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(201,168,76,.15); border-radius: var(--r-xl);
  padding: 3rem; width: 100%; max-width: 420px; margin: 1rem;
}
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo-icon { width: 52px; height: 52px; border-radius: 10px; display: inline-block; object-fit: contain; margin-bottom: .75rem; }
.login-logo-name { font-family: var(--f-title); font-size: 1.5rem; color: #fff; }
.login-title { font-family: var(--f-title); font-size: 1.6rem; color: #fff; text-align: center; margin-bottom: .25rem; }
.login-sub { font-size: .82rem; color: rgba(255,255,255,.4); text-align: center; margin-bottom: 2rem; }
.login-form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.login-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.login-input {
  padding: .85rem 1.1rem; border-radius: var(--r);
  background: rgba(255,255,255,.05); border: 1px solid rgba(201,168,76,.2);
  color: #fff; font-family: var(--f-body); font-size: .9rem; outline: none; transition: var(--t);
}
.login-input:focus { border-color: var(--c-gold); background: rgba(255,255,255,.08); }
.login-input::placeholder { color: rgba(255,255,255,.2); }
.login-btn {
  width: 100%; padding: 1rem; margin-top: 1.5rem; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-lt), var(--c-gold-dk));
  color: var(--c-dark); font-family: var(--f-body); font-weight: 700; font-size: .95rem;
  border: none; cursor: pointer; transition: var(--t); box-shadow: var(--sh-gold); letter-spacing: .05em;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,168,76,.4); }
.login-btn:disabled { opacity: .6; cursor: wait; transform: none; }
/* Nascosto con l'attributo hidden finché login.js non mostra un errore */
.login-error {
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--r); padding: .75rem 1rem; font-size: .82rem; color: #fca5a5;
  margin-top: 1rem; text-align: center;
}
.login-error[hidden] { display: none; }
.login-footer { margin-top: 2rem; text-align: center; font-size: .78rem; color: rgba(255,255,255,.3); }
.login-footer .login-footer-buy { margin-top: .4rem; }
.login-footer .login-footer-home { margin-top: 1rem; }
.login-footer a { color: var(--c-gold); transition: var(--t); }
.login-footer a:hover { color: var(--c-gold-lt); }
.login-divider { margin: 1.5rem 0; display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.2); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }