/* ===========================
   Kwikly – Auth Page (Pro)
   Palette: #000c7c / #b6e7ff / white / greys
   =========================== */

/* Tokens */
:root{
  --kw-primary:#000c7c;
  --kw-primary-600:#000a63;
  --kw-secondary:#b6e7ff;

  --kw-white:#fff;
  --kw-gray-900:#0f1117;
  --kw-gray-700:#273244;
  --kw-gray-500:#536072;
  --kw-gray-300:#9aa6b2;
  --kw-gray-200:#d4dae3;

  --kw-radius-lg:16px;
  --kw-radius:12px;
  --kw-radius-sm:8px;

  --kw-shadow:0 20px 40px rgba(0,0,0,.25);
  --kw-focus:0 0 0 3px rgba(182,231,255,.75), 0 0 0 6px rgba(0,12,124,.35);
}

/* Base reset (keeps your font stack) */
*{margin:0;padding:0;box-sizing:border-box}
body{
  display:flex;align-items:center;justify-content:center;
  min-height:100svh; /* mobiel-safe viewport */
  padding:16px; color:var(--kw-white);
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  position:relative; isolation:isolate;
  background:url('../../assets/img/hero-bg.jpg') center/cover no-repeat #000;
}
/* Brand overlay for legibility */
body::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(182,231,255,.30), transparent 60%),
    linear-gradient(135deg, rgba(0,12,124,.60) 0%, rgba(0,12,124,.20) 40%, rgba(0,0,0,.45) 100%);
}

/* Card */
.wrapper{
  width:100%; max-width:430px;
  padding:28px 26px;
  border-radius:var(--kw-radius-lg);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(182,231,255,.35);
  box-shadow:var(--kw-shadow);
}

/* Brand slot (logo + naam) – optioneel in je HTML */
.brand-slot{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.brand-logo{
  width:48px; height:48px; border-radius:12px; object-fit:contain;
  background:rgba(255,255,255,.08); padding:6px;
  border:1px solid rgba(182,231,255,.35);
}
.brand-name{
  font-weight:800; letter-spacing:.3px; color:var(--kw-secondary);
}

/* Heading */
.wrapper h2{
  text-align:left; margin:8px 0 18px;
  font-size:1.8rem; line-height:1.2; color:var(--kw-white);
}

/* label blijft zoals je had */
.input-field{ margin-bottom:16px; }
.input-field label{ display:block; margin-bottom:8px; font-size:.92rem; color:#e8f0ff; }

/* unified look voor input & select */
.input-field input,
.input-field select{
  width:100%;
  padding:12px 14px;
  font-size:16px; /* voorkomt iOS zoom */
  color:var(--kw-white);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(182,231,255,.35);
  border-radius:var(--kw-radius);
  outline:0;
  transition:border-color .2s, box-shadow .2s, background .2s;
  caret-color:var(--kw-secondary);
}

/* subtiele hover */
.input-field input:hover,
.input-field select:hover{
  border-color:rgba(182,231,255,.55);
}

/* focus state consistent */
.input-field input:focus,
.input-field select:focus{
  border-color:var(--kw-secondary);
  box-shadow:var(--kw-focus);
}

/* placeholders */
.input-field input::placeholder{ color:#cfe3ff; opacity:.85; }

/* --- Select specifieke polish --- */
.input-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:44px;                 /* ruimte voor caret */
  background-color:rgba(255,255,255,.12);
  /* custom caret (svg) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b6e7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}

/* caret kleurtje bij focus */
.input-field select:focus{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000c7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* placeholder-stijl voor select: gebruik <option value='' disabled selected> */
.input-field select:required:invalid{
  color:#cfe3ff; opacity:.9;
}
.input-field select option{ color:#0b1220; background:#fff; } /* lijst zelf */

/* invalid helper (blijft zoals je had) */
.input-field.error input,
.input-field.error select{ border-color:#ff8080; }
.input-field.error label{ color:#ffb3b3; }

/* mobile tweaks */
@media (max-width:480px){
  .input-field input,
  .input-field select{ height:52px; padding:12px 16px; border-radius:14px; }
  .input-field select{ background-position:right 14px center; }
}
/* Aux rows */
.auth-forgot{ text-align:center; margin-top:10px; }
.auth-forgot a{ color:var(--kw-secondary); text-decoration:none; font-size:.95rem; }
.auth-forgot a:hover{ text-decoration:underline; }

/* Divider */
.auth-divider{ position:relative; text-align:center; margin:18px 0; }
.auth-divider::before,
.auth-divider::after{
  content:""; position:absolute; top:50%; width:38%; height:1px;
  background:rgba(255,255,255,.25);
}
.auth-divider::before{ left:0; } .auth-divider::after{ right:0; }
.auth-divider span{
  font-size:.8rem; color:#e6f0ff; text-transform:lowercase;
  padding:0 10px; border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(182,231,255,.25);
}

/* Actions */
button{
  width:100%; padding:12px 18px; margin-top:18px;
  border-radius:14px; border:1px solid transparent;
  background: #fff;
  color:#000; font-weight:700; font-size:16px; letter-spacing:.2px;
  cursor:pointer; transition:filter .2s ease, transform .06s ease, box-shadow .2s ease;
  box-shadow:0 10px 24px rgba(0,12,124,.40);
}
button:hover{ filter:brightness(1.2); color: #fff}
button:active{ transform:translateY(1px); }
button:focus-visible{ outline:none; box-shadow:var(--kw-focus); }
button:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* Secondary CTA */
.auth-create{ text-align:center; margin-top:10px; }
.auth-create .btn-create{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none; font-weight:600;
  background:#fff; color:#0b1220; transition:filter .2s ease;
}
.auth-create .btn-create:hover{ filter:brightness(.95); }

/* Links */
.wrapper a{ color:var(--kw-secondary); }
.wrapper a:hover{ text-decoration:underline; }

/* Alerts (themed) */
.custom-alert{
  padding:12px 16px; margin:14px 0; border-radius:10px; position:relative;
  font-size:.95rem; box-shadow:0 10px 20px rgba(0,0,0,.12);
  background:rgba(255,255,255,.12); border-left:5px solid var(--kw-primary);
  animation:fadeIn .25s ease;
}
.success-alert{ background:#e6f9ed; color:#237a47; border-left-color:#16a34a; }
.error-alert{ background:#fdecea; color:#a94442; border-left-color:#dc2626; }
.close-btn{ position:absolute; top:8px; right:12px; font-size:20px; cursor:pointer; color:#6b7280; }
.close-btn:hover{ color:#374151; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* Checkboxes */
input[type="checkbox"]{ appearance:auto; -webkit-appearance:checkbox; cursor:pointer; }

/* === Mobile tweaks === */
@media (max-width: 480px){
  .wrapper{ padding:22px 16px; border-radius:14px; }
  .brand-slot{ justify-content:center; }
  .brand-name{ font-size:1rem; }
  .wrapper h2{ text-align:center; font-size:1.6rem; }
  .auth-divider::before, .auth-divider::after{ width:32%; }
}

/* Respect user motion prefs */
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}