/* =====================================================================
   auth.css — prijava, registracija, nova lozinka i potvrda e-maila
   (Figma: 07 Account & Admin, Auth). Stoji na odmoria.css; ovdje je samo
   raspored koji ove četiri stranice dijele, da se ne raziđu.
   ===================================================================== */

.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px)}
.auth__main{display:grid;align-content:center;justify-items:center;padding:48px 24px}
.auth__box{width:100%;max-width:420px;display:grid;gap:20px}
.auth__logo{font:800 30px/1 var(--font-ui);letter-spacing:-.03em;text-decoration:none;justify-self:start}
.auth__logo i{color:var(--action);font-style:normal}
.auth__title{font:800 32px/1.15 var(--font-ui);letter-spacing:-.03em}
.auth__lead{color:var(--text-muted);margin-top:-8px}

/* desna ploha s fotografijom */
.auth__art{position:relative;display:flex;align-items:flex-end;padding:48px;color:#fff;
  background:#2E6F86 url(/assets/landing/villa-900.jpg) center/cover no-repeat}
.auth__art::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.auth__art > *{position:relative;z-index:1}
.auth__art .eyebrow{color:var(--text-on-inverse-accent)}
.auth__art h2{font:800 clamp(28px,2.8vw,40px)/1.15 var(--font-ui);letter-spacing:-.03em;margin:12px 0}
.auth__art p{color:rgba(255,255,255,.92)}

/* obrazac */
.form{display:grid;gap:16px}
.fg{display:grid;gap:8px}
.fg label{font:700 14px/1.3 var(--font-ui)}
.inp{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--border-control);border-radius:var(--radius-control);background:var(--bg-surface);color:var(--text);font:400 16px/1.4 var(--font-body)}
.inp:hover{border-color:var(--text)}
.inp:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 2px var(--text)}
.inp[aria-invalid="true"]{border:2px solid var(--danger)}
.pw{position:relative}
.pw .inp{padding-right:52px}
.pw__eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-control);background:none;color:var(--text);cursor:pointer}
.pw__eye:hover{background:var(--bg-wash)}
.hint{font-size:13px;color:var(--text-muted)}
.fieldErr{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--danger)}
.fieldErr .ic{width:16px;height:16px}
.linkbtn{justify-self:end;min-height:44px;padding:0;border:0;background:none;color:var(--text);cursor:pointer;font:700 14px/1.3 var(--font-ui);text-align:right}
.linkbtn:hover{color:var(--text-accent);text-decoration:underline}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:authspin .8s linear infinite}
@keyframes authspin{to{transform:rotate(360deg)}}
.btn[disabled]{background:var(--bg-wash);border-color:var(--bg-wash);color:var(--text-muted);cursor:not-allowed}

.or{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--border)}

.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-panel);font-weight:600}
.alert .ic{flex:none;margin-top:2px}
.alert--err{background:var(--danger-bg);color:var(--danger)}
.alert--ok{background:var(--bg-wash);color:var(--text)}
.alert--ok .ic{color:var(--text-accent)}

.bottom{text-align:center;color:var(--text-muted)}
.bottom a{color:var(--text);font-weight:700;margin-left:6px}
.legal{font-size:13px;color:var(--text-muted)}
.legal a{color:var(--text)}

/* stanja (provjerite e-mail, potvrđeno, link nije valjan) */
.state{display:grid;gap:16px;justify-items:center;text-align:center}
.state__ic{width:72px;height:72px;border-radius:50%;background:var(--bg-wash);color:var(--text-accent);display:grid;place-items:center}
.state__ic .ic{width:32px;height:32px}
.state__ic--err{background:var(--danger-bg);color:var(--danger)}
.state h1{font:800 28px/1.2 var(--font-ui);letter-spacing:-.02em}
.state p{color:var(--text-muted)}
.state .btn{width:100%}
.boot-ring{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--action);animation:authspin 1s linear infinite}

[hidden]{display:none!important}

@media (max-width:900px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth__art{display:none}
  .auth__main{align-content:start;padding:24px 20px 48px}
  .auth__logo{margin-bottom:12px}
  .auth__title{font-size:28px}
}