/* PAGE CONTAINER: .patientenlogin */
.patientenlogin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
@media (max-width: 768px) {
  .patientenlogin {
    padding-top: 24px;
    padding-left: 16px;
    min-height: auto;
  }
}

/* Root & Card */
.pin-root { width: 100%; display: flex; justify-content: center; }
.pin-card {
  width: min(720px, 100% - 32px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 40px 48px !important; /* generous inset padding */
}
@media (max-width: 768px) {
  .pin-card { padding: 24px; width: min(720px, 100% - 24px); }
}

/* TITLE + INTRO (no font-family here) */
#login-title {
  margin: 0;
  padding: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2rem;
  color: #f36633;
  text-align: center;
}
#login-intro {
  font-weight: 400;
  user-select: none;
  font-size: 1rem;
  line-height: 1.7rem;
  margin: 0;
  padding: 10px 0;
  color: #575656;
  text-align: center;
}

/* FORM */
.pin-form { display: flex; flex-direction: column; align-items: center; gap: 16px; }

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

/* PIN INPUTS */
.pin-input-group { display: flex; align-items: center; gap: 0.75rem; }

/* ↓ MOBILE-ONLY: make gaps tighter so all 7 inputs fit */
@media (max-width: 768px) {
  .pin-input-group { gap: 0.4rem; }       /* from 0.75rem → 0.4rem */
  .pin-sep { margin: 0 0.06rem; }         /* squeeze the "/" spacing a bit */
}

.pin-sep {
  user-select: none;
  color: #9ca3af;
  font: 700 1rem/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0 0.15rem;
}

.pin-input {
  display: block;
  width: 2.375rem;
  height: 2.5rem;
  padding: 0;
  text-align: center;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #ffffff;
  color: #111827;
  font: 600 1rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
@media (min-width: 640px) { .pin-input { font-size: 0.875rem; } }
.pin-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }
.pin-input:hover { border-color: #9ca3af; }
.pin-input:disabled { opacity: .5; pointer-events: none; background: #f9fafb; }
.pin-invalid .pin-input { border-color: #ef4444; }

@keyframes pin-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.shake { animation: pin-shake 300ms ease; }

.hidden { display: none !important; }

/* Dark-mode inputs */
@media (prefers-color-scheme: dark) {
  .pin-input { background: #0a0a0a; color: #9ca3af; border-color: #374151; }
  .pin-input::placeholder { color: #6b7280; }
  .pin-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.4); }
}

/* BUTTON */
.pin-actions { display: flex; gap: 12px; justify-content: center; align-items: center; width: 100%; }
.pin-submit {
  appearance: none; -webkit-appearance: none;
  margin-top: 10px;
  padding: 12px 28px;
  border: 1px solid #F36632;
  border-radius: 999px;
  background: #F36632;
  color: #ffffff;
  font: 700 16px/1 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease, transform 80ms ease;
  box-shadow: 0 8px 18px rgba(243, 102, 50, 0.32), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.pin-submit:hover { background-color: #e45723; border-color: #e45723; box-shadow: 0 10px 22px rgba(243, 102, 50, 0.38), 0 2px 4px rgba(0, 0, 0, 0.08); }
.pin-submit:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(243, 102, 50, 0.28), 0 1px 2px rgba(0, 0, 0, 0.06); }
.pin-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(243, 102, 50, 0.28), 0 10px 22px rgba(243, 102, 50, 0.36), 0 2px 4px rgba(0, 0, 0, 0.08); }

/* ALERT */
.pin-alert { margin: 12px 0; padding: 1rem; border-radius: 0.375rem; display: block; width: 100%; }
.pin-alert-flex { display: flex; }
.pin-alert-icon { flex-shrink: 0; }
.pin-alert-icon-svg { width: 1.25rem; height: 1.25rem; }
.pin-alert-body { margin-left: 0.75rem; }
.pin-alert-text { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.pin-alert--warning { background: #FFFBEB; color: #B45309; }
.pin-alert--warning .pin-alert-icon { color: #F59E0B; }
.pin-alert--error { background: #FEF2F2; color: #B91C1C; }
.pin-alert--error .pin-alert-icon { color: #F87171; }
@media (prefers-color-scheme: dark) {
  .pin-alert--warning { background: rgba(234, 179, 8, 0.10); outline: 1px solid rgba(234, 179, 8, 0.15); color: rgba(254,243,199,0.85); }
  .pin-alert--warning .pin-alert-icon { color: #FDE68A; }
  .pin-alert--error { background: rgba(239, 68, 68, 0.10); outline: 1px solid rgba(239, 68, 68, 0.15); color: rgba(254,226,226,0.90); }
  .pin-alert--error .pin-alert-icon { color: #FCA5A5; }
}