/* PIN-scherm: dekt de site af tot de juiste pincode is ingevuld (zie js/pin.js) */
html.is-locked { overflow: hidden; }
html.is-locked body > *:not(.pin-gate) { visibility: hidden; }

.pin-gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: var(--navy);
  transition: opacity 500ms var(--ease-io), visibility 0s 500ms;
}
.pin-gate.is-open { opacity: 0; visibility: hidden; }
.pin-card { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; width: min(100%, 360px); }
.pin-logo { display: flex; align-items: center; gap: 7px; }
.pin-logo img:first-child { width: 27px; height: 27px; }
.pin-logo img:last-child { width: 84px; height: 28px; }
.pin-card h1 { font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -0.035em; }
.pin-card p { color: var(--text-3); }
.pin-form { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pin-boxes { display: flex; gap: 10px; }
.pin-boxes input {
  width: 56px; height: 64px; border-radius: 2px; text-align: center;
  background: var(--navy-light); color: #fff; border: 1px solid var(--line);
  font: inherit; font-size: 26px; font-weight: 600; caret-color: var(--sky);
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.pin-boxes input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.25); }
.pin-boxes input.is-filled { background: #1c1c6b; }
.pin-form.is-wrong .pin-boxes { animation: pin-shake 420ms var(--ease-out); }
.pin-form.is-wrong .pin-boxes input { border-color: #ff8a8a; }
.pin-msg { min-height: 21px; font-size: 14px; color: #ff9d9d; }
@keyframes pin-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (max-width: 400px) { .pin-boxes input { width: 52px; height: 60px; } }