/* ==========================================================================
   LOGIN.CSS  —  Premium login screen matching Squize & Sip brand
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --green:#3d8f0c;--green-dark:#2f7009;--green-light:#69b93a;
  --green-pale:#e8f5de;--green-ultra-pale:#f2f8ee;
  --white:#ffffff;--surface:#f8fff4;
  --text:#0f1a05;--text-muted:#5b6b45;--border:#d3e9c1;
  --shadow:0 24px 60px rgba(15,26,5,.20);
}

html,body{height:100%;}
body{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(105,185,58,.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 90%, rgba(61,143,12,.25) 0%, transparent 60%),
    linear-gradient(135deg, #f2f8ee 0%, #e8f5de 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px; color:var(--text); position:relative; overflow:hidden;
}

/* Decorative blobs */
.login-blob{position:absolute;border-radius:50%;pointer-events:none;}
.login-blob.b1{width:380px;height:380px;background:radial-gradient(circle,rgba(105,185,58,.18),transparent);top:-80px;right:-80px;animation:floatA 9s ease-in-out infinite;}
.login-blob.b2{width:280px;height:280px;background:radial-gradient(circle,rgba(61,143,12,.14),transparent);bottom:-60px;left:-60px;animation:floatB 11s ease-in-out infinite;}
@keyframes floatA{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,30px);}}
@keyframes floatB{0%,100%{transform:translate(0,0);}50%{transform:translate(25px,-20px);}}

.login-wrap{
  width:100%; max-width:420px; position:relative; z-index:2;
}

.login-brand{
  text-align:center; margin-bottom:24px;
}
.login-brand-name{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2rem; font-weight:700; color:var(--green); letter-spacing:-.02em;
}
.login-brand-name span{color:var(--text);}
.login-brand-sub{
  font-size:.82rem; color:var(--text-muted); margin-top:4px;
  text-transform:uppercase; letter-spacing:.18em; font-weight:600;
}

.login-card{
  background:#fff; border-radius:24px; padding:36px 32px;
  box-shadow:var(--shadow); border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.login-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--green),var(--green-light));
}

.login-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.7rem; font-weight:600; margin-bottom:4px; letter-spacing:-.01em;
}
.login-sub{
  font-size:.88rem; color:var(--text-muted); margin-bottom:24px;
}

.login-field{margin-bottom:14px;}
.login-label{
  display:block; font-size:.82rem; font-weight:600; margin-bottom:6px;
  color:var(--text);
}
.login-input{
  width:100%; padding:13px 16px; border:1.5px solid var(--border);
  border-radius:12px; font-size:.94rem; font-family:inherit;
  background:#fff; color:var(--text); transition:border-color .15s,box-shadow .15s;
}
.login-input:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(61,143,12,.12);
}

.login-error{
  background:#fef2f2; border:1px solid #fca5a5; color:#991b1b;
  padding:11px 14px; border-radius:10px; font-size:.84rem; font-weight:500;
  margin-bottom:14px; display:none;
}
.login-error.show{display:block;}

.login-btn{
  width:100%; padding:14px; background:var(--green); color:#fff;
  border:none; border-radius:12px; font-size:.95rem; font-weight:700;
  font-family:inherit; cursor:pointer; letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(61,143,12,.32); transition:background .2s,transform .15s,box-shadow .2s;
}
.login-btn:hover{background:var(--green-dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(61,143,12,.40);}
.login-btn:active{transform:translateY(0);}

.login-back{
  text-align:center; margin-top:18px; font-size:.85rem;
}
.login-back a{
  color:var(--text-muted); text-decoration:none; transition:color .15s;
}
.login-back a:hover{color:var(--green);}

.login-hint{
  margin-top:20px; padding:14px 16px; background:var(--green-ultra-pale);
  border:1px solid var(--border); border-radius:12px;
  font-size:.78rem; color:var(--text-muted); line-height:1.55;
}
.login-hint strong{color:var(--text);}
.login-hint code{
  background:#fff; padding:1px 6px; border-radius:4px;
  font-family:'Courier New',monospace; color:var(--green-dark);
  border:1px solid var(--border);
}