/* ============================================================
   2factlogin.css
   Celsius & Watt - 2FACT.CLOUD login styling
   ============================================================ */

:root{
  --brand:#1e5c3b;
  --brand-600:#247048;
  --brand-500:#2f9c63;
  --brand-400:#36af6f;
  --ink:#16241d;
  --muted:#6b7d73;
  --card:#ffffff;
  --field-bg:#f5f8f6;
  --field-bg-focus:#ffffff;
  --border:#e3eae5;
  --border-focus:var(--brand-400);
  --ring:rgba(54,175,111,.18);
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,40,28,.04),
           0 12px 28px -8px rgba(16,40,28,.18),
           0 40px 70px -30px rgba(16,40,28,.35);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
  position:relative;
  overflow:hidden;
  background:#0f3322;
}

/* Achtergrond ACHTER alles (z-index:-1) zodat ze nooit je kaart afdekt,
   ook al draagt het door Domino gegenereerde <form> geen eigen class. */
.auth-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(54,175,111,.55), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(20,72,46,.85), transparent 55%),
    radial-gradient(700px 500px at 85% 8%, rgba(236,196,108,.18), transparent 60%),
    linear-gradient(135deg,#1d5f3d 0%,#0f3322 55%,#0a2418 100%);
}
.auth-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Breedte + z-index op de Domino-form via name-selector */
form[name="_DominoForm"]{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
}
.auth{
  position:relative;
  z-index:1;
  width:100%;
  animation:rise .6s cubic-bezier(.22,.61,.36,1) both;
}

.brand-wordmark{
  text-align:center;
  color:#eafff2;
  font-weight:700;
  letter-spacing:.14em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:18px;
  opacity:.9;
}
.brand-wordmark b{font-weight:800;color:#fff}

.auth-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:38px 34px 34px;
  border:1px solid rgba(255,255,255,.6);
}
.auth-logo{display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.auth-logo img{max-height:54px;width:auto;display:block}
.auth-title{margin:0 0 6px;text-align:center;font-size:20px;font-weight:700;letter-spacing:-.01em}
.auth-sub{margin:0 0 22px;text-align:center;font-size:14px;line-height:1.5;color:var(--muted)}
.auth-sub a{color:var(--brand-500);text-decoration:none;font-weight:600}
.auth-sub a:hover{text-decoration:underline}

.auth-alert{
  display:flex;gap:11px;align-items:flex-start;
  background:#fff8ea;border:1px solid #f4e2bd;color:#7a5b14;
  border-radius:var(--radius-sm);padding:12px 14px;
  font-size:13px;line-height:1.45;margin-bottom:22px;
}
.auth-alert svg{flex:0 0 auto;margin-top:1px;color:#d8a52a}

.field{position:relative;margin-bottom:14px}
.field .ico{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;transition:color .18s ease;
}
.field input{
  width:100%;height:52px;padding:0 46px 0 46px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--field-bg);color:var(--ink);
  font-size:15px;font-family:inherit;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
  outline:none;
}
.field input::placeholder{color:#9aa9a0}
.field input:focus{
  border-color:var(--border-focus);background:var(--field-bg-focus);
  box-shadow:0 0 0 4px var(--ring);
}
.field input:focus ~ .ico{color:var(--brand-500)}

.toggle-pw{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--muted);
  border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease;
}
.toggle-pw:hover{color:var(--brand-500);background:var(--field-bg)}
.toggle-pw .eye-off{display:none}
.toggle-pw.is-visible .eye{display:none}
.toggle-pw.is-visible .eye-off{display:block}

.btn-login{
  width:100%;height:52px;margin-top:8px;border:0;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--brand-500) 0%,var(--brand) 100%);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;box-shadow:0 8px 18px -6px rgba(30,92,59,.55);
  transition:transform .15s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-login:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(30,92,59,.6)}
.btn-login:active{transform:translateY(0);box-shadow:0 6px 14px -6px rgba(30,92,59,.55)}
.btn-login:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.auth-foot{margin-top:20px;text-align:center;font-size:12px;color:rgba(234,255,242,.7)}
.auth-foot a{color:rgba(234,255,242,.9);text-decoration:none}
.auth-foot a:hover{text-decoration:underline}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:420px){.auth-card{padding:30px 22px 26px}}