:root {
  --identity-shell: #ffffff;
  --identity-card: #ffffff;
  --identity-copy: #6b7280;
  --identity-heading: #111827;
  --identity-border: #d9dee8;
  --identity-border-strong: #cfd6e2;
  --identity-accent: #f2b400;
  --identity-accent-dark: #e0a700;
  --identity-danger: #dc2626;
  --identity-danger-bg: #fef2f2;
  --identity-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body.identity-shell {
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--identity-copy);
  background: var(--identity-shell) url("/images/imcer-hex-bg.jpg") center center / cover no-repeat fixed;
}

/* All sign-in experiences share the same white hexagon background and card.
   Only the accent colour differs per tenant: IMCER gold, Biebprinten orange. */
body.identity-shell--biebprinten,
body.identity-shell--biebprinten-v2 {
  --identity-accent: #f47920;
  --identity-accent-dark: #d9650f;
}

/* Royal KB's house style is black, matching the KB skin on the Biebprinten /kb page.
   Only the error screen opts into this shell today: KB clients auto-start the KB
   challenge, so the login card behind it is never actually read. */
body.identity-shell--biebprinten-kb {
  --identity-accent: #101111;
  --identity-accent-dark: #000000;
  --identity-heading: #101111;
  --identity-border: #d5d8d8;
  --identity-border-strong: #bfc3c3;
  background-color: #eef2f7;
  background-image:
    radial-gradient(1200px 760px at 6% -8%, rgba(16, 17, 17, 0.07), transparent 58%),
    radial-gradient(1100px 720px at 104% 110%, rgba(31, 110, 200, 0.14), transparent 56%),
    radial-gradient(900px 600px at 92% -10%, rgba(16, 17, 17, 0.04), transparent 60%),
    linear-gradient(180deg, #f6f9fc 0%, #e9eef6 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* dbieb sign in on warm cream paper with a coral accent. The backdrop follows the KB block's
   layered-gradient approach rather than Hasselt's hard colour band: dbieb's own site keeps the
   cream flat and lets the coral appear only in small doses, so the washes stay faint enough that
   the white card is still the loudest thing on the page. */
body.identity-shell--biebprinten-dbieb {
  --identity-accent: #eb5e5d;
  --identity-accent-dark: #d54e4d;
  --identity-heading: #1d1d1b;
  --identity-border: #e3e0d6;
  --identity-border-strong: #cfcbbe;
  background-color: #f6f4ec;
  background-image:
    radial-gradient(1150px 740px at 4% -8%, rgba(235, 94, 93, 0.11), transparent 58%),
    radial-gradient(1050px 700px at 104% 110%, rgba(235, 94, 93, 0.07), transparent 56%),
    linear-gradient(180deg, #fbf9f3 0%, #f1eee2 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.identity-shell--biebprinten-hasselt {
  --identity-accent: #646363;
  --identity-accent-dark: #4e4d4d;
  --identity-heading: #121212;
  font-family: "Barlow", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    linear-gradient(180deg, #646363 0, #646363 13.5rem, #f7f7f5 13.5rem, #f7f7f5 100%);
}

.identity-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.identity-card {
  width: min(100%, 30rem);
  padding: 1.95rem 2.15rem 1.95rem;
  border-radius: 1rem;
  background: var(--identity-card);
  border: 1px solid var(--identity-border);
  box-shadow: var(--identity-shadow);
}

.identity-card--login {
  position: relative;
}

.identity-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.identity-brand--compact {
  margin-bottom: 1.25rem;
}

.identity-brand--login {
  gap: 0.35rem;
  margin-bottom: 1.95rem;
}

.identity-brand__logo {
  width: 18.8rem;
  max-width: 100%;
  margin-top: 0.8rem;
  margin-bottom: 0.55rem;
}

.identity-brand__logo--biebprinten {
  width: 18rem;
}

.identity-brand__logo--hasselt {
  width: 20rem;
  margin-top: 0.4rem;
}

/* The dbieb wordmark is a wide lowercase lockup (227:80), so it belongs with the other
   lockups rather than with the KB monogram. It is set narrower than Biebprinten and
   Hasselt because it is also flatter: at their width the letterforms would out-shout the
   heading beneath them. */
.identity-brand__logo--dbieb {
  width: 13rem;
  margin-top: 0.5rem;
}

/* The KB monogram is a tall, narrow mark, not a wide lockup — sizing it like the
   others would blow it up to fill the card. */
.identity-brand__logo--kb {
  width: auto;
  height: 2.6rem;
  margin-top: 0.4rem;
}

body.identity-shell--biebprinten-hasselt .identity-card {
  border-radius: 0;
  border-color: #d4dbde;
  box-shadow: 0 22px 46px rgba(18, 18, 18, 0.18);
}

body.identity-shell--biebprinten-hasselt .identity-button--primary:hover {
  background: #a8ad19;
}

.identity-brand h1 {
  margin: 0.35rem 0 0;
  font-size: 1.34rem;
  font-weight: 700;
  color: var(--identity-heading);
}

.identity-brand__copy {
  margin: 0.55rem 0 0;
  font-size: 1.03rem;
  line-height: 1.4;
}

.identity-language-form {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.35rem;
}

/* ── Flag language switcher (popup) ── */

.identity-lang {
  position: relative;
}

.identity-lang > summary {
  list-style: none;
}

.identity-lang > summary::-webkit-details-marker,
.identity-lang > summary::marker {
  display: none;
  content: "";
}

.identity-lang__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2.3rem;
  border: 1px solid #dfe4ec;
  border-radius: 0.6rem;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.identity-lang__flag:hover {
  border-color: var(--identity-border-strong);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.identity-lang__flag svg {
  width: 1.7rem;
  height: 1.18rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.identity-lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  min-width: 12rem;
  padding: 0.35rem;
  background: #ffffff;
  border: 1px solid var(--identity-border);
  border-radius: 0.75rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.identity-lang__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--identity-heading);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.identity-lang__item:hover {
  background: #f3f5f9;
}

.identity-lang__item--active {
  background: color-mix(in srgb, var(--identity-accent) 14%, transparent);
  color: var(--identity-accent-dark);
}

.identity-lang__item svg {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.12rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.identity-method-selector {
  display: grid;
  gap: 1rem;
}

.identity-panel-header__body {
  display: grid;
  gap: 0.35rem;
}

.identity-panel-header__body h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--identity-heading);
}

.identity-panel-header__body p:not(.identity-panel-header__eyebrow) {
  margin: 0;
  color: var(--identity-copy);
  line-height: 1.45;
}

.identity-method-list {
  display: grid;
  gap: 0.85rem;
}

.identity-button__method-label {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--identity-heading);
  text-align: center;
}

.identity-button--method-choice {
  min-height: 3.35rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.identity-panel-header {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.15rem;
}

.identity-panel-back {
  display: inline-flex;
  align-items: center;
  align-self: start;
  color: var(--identity-accent-dark);
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
}

.identity-panel-back:hover {
  color: var(--identity-accent);
  text-decoration: underline;
}

.identity-alert {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
  padding: 0.8rem 0.9rem 0.8rem 1rem;
  border-left: 4px solid var(--identity-danger);
  border-radius: 0.75rem;
  background: var(--identity-danger-bg);
  color: #991b1b;
}

/* ── Error page ─────────────────────────────────────────────────────────────
   The old page put the raw provider reason straight under the title in body copy,
   which read as "something is broken with your account". The panel states plainly
   what happened, the retry line invites the obvious next step, and the technical
   reason folds away for support. */

.identity-error-panel {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 1.15rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--identity-border);
  border-left: 4px solid var(--identity-danger);
  border-radius: 0.75rem;
  background: var(--identity-danger-bg);
}

.identity-error-panel__mark {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  color: var(--identity-danger);
}

.identity-error-panel__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.identity-error-panel__copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #7f1d1d;
}

.identity-error-retry {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--identity-heading);
}

.identity-validation-summary {
  margin-bottom: 1rem;
  color: #b91c1c;
}

.identity-validation-summary:empty {
  display: none;
}

.identity-login-form,
.identity-actions {
  display: grid;
  gap: 1rem;
}

.identity-session-details {
  display: grid;
  gap: 0.75rem;
  margin: 1.35rem 0 0;
}

.identity-session-details > div {
  display: grid;
  gap: 0.22rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--identity-border);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.72);
}

.identity-session-details dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--identity-copy-muted);
}

.identity-session-details dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--identity-heading);
}

.identity-login-form__fields,
.identity-form {
  display: grid;
  gap: 0.85rem;
}

.identity-form-field {
  display: grid;
  gap: 0.35rem;
}

.identity-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;
}

.identity-input-wrap {
  position: relative;
}

.identity-form input,
.identity-form-field input {
  width: 100%;
  min-height: 3.05rem;
  padding: 0.88rem 3rem 0.88rem 1rem;
  border: 1px solid var(--identity-border);
  border-radius: 0.6rem;
  font-size: 0.98rem;
  color: var(--identity-heading);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.identity-form input::placeholder,
.identity-form-field input::placeholder {
  color: #8a94a6;
}

.identity-form input:focus,
.identity-form-field input:focus {
  outline: none;
  border-color: var(--identity-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--identity-accent) 18%, transparent);
}

.identity-input-icon {
  position: absolute;
  top: 50%;
  right: 0.78rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -0.575rem;
  border-radius: 0.28rem;
  background: #d1d5db;
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.15rem;
  text-align: center;
  pointer-events: none;
  font-weight: 700;
}

.identity-validation {
  font-size: 0.82rem;
  color: #b91c1c;
}

.identity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.05rem;
  padding: 0.88rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--identity-heading);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.identity-button:hover {
  transform: translateY(-1px);
}

.identity-button--primary {
  color: #ffffff;
  background: var(--identity-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--identity-accent) 26%, transparent);
}

.identity-button--primary:hover {
  background: var(--identity-accent-dark);
}

.identity-button--qr-approve {
  color: #111827;
  background: #f2b400;
  box-shadow: 0 10px 22px rgba(242, 180, 0, 0.3);
}

.identity-button--qr-approve:hover {
  color: #111827;
  background: #e0a700;
}

.identity-button--qr-approve:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 2px;
  color: #111827;
  background: #f2b400;
}

.identity-button--secondary,
.identity-button--microsoft {
  background: #ffffff;
  border-color: var(--identity-border-strong);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.identity-button--secondary:hover,
.identity-button--microsoft:hover {
  background: #fbfbfd;
}

.identity-button__microsoft-mark {
  display: grid;
  grid-template-columns: repeat(2, 0.42rem);
  grid-template-rows: repeat(2, 0.42rem);
  gap: 0.08rem;
}

.identity-button__microsoft-mark span:nth-child(1) { background: #f25022; }
.identity-button__microsoft-mark span:nth-child(2) { background: #7fba00; }
.identity-button__microsoft-mark span:nth-child(3) { background: #00a4ef; }
.identity-button__microsoft-mark span:nth-child(4) { background: #ffb900; }

.identity-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.2rem;
  color: #8b93a4;
}

.identity-divider span {
  flex: 1;
  height: 1px;
  background: #d8dde7;
}

.identity-divider strong {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.identity-divider--section {
  margin: 0 0 0.35rem;
}

.identity-divider--section strong {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--identity-accent-dark);
}

.identity-meta {
  margin: 1rem 0 0;
  text-align: center;
}

.identity-meta a {
  color: var(--identity-accent-dark);
  font-weight: 600;
}

/* ── Card footer (Powered by) ── */

.identity-card-footer {
  margin-top: 1.05rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--identity-copy);
}

/* Biebprinten card sits a little tighter at the bottom so the footer
   hugs the lower edge of the card. */
.identity-card--biebprinten {
  padding-bottom: 1.3rem;
}

.identity-card-footer__brand {
  font-weight: 700;
  color: var(--identity-heading);
}

.identity-provider-mark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.identity-provider-mark svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.identity-provider-mark--qr {
  color: var(--identity-accent-dark);
}

.identity-provider-mark--qr svg {
  fill: currentColor;
}

/* ── Biebprinten guest button layout ── */

.biebprinten-guest-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

/* ── QR cross-device login ── */

.identity-qr,
.identity-qr-result {
  display: grid;
  justify-items: center;
  text-align: center;
}

.identity-qr__frame {
  display: flex;
  justify-content: center;
  margin: 0.35rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--identity-border);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.identity-qr__image {
  display: block;
  width: min(100%, 17rem);
  height: auto;
  image-rendering: pixelated;
  border-radius: 0.4rem;
}

.identity-qr__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--identity-copy);
  font-size: 0.92rem;
}

.identity-qr__status--success {
  background: #ecfdf5;
  color: #047857;
  font-weight: 600;
}

.identity-qr__status--error {
  background: var(--identity-danger-bg);
  color: #991b1b;
  font-weight: 600;
}

.identity-qr__spinner {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(15, 23, 42, 0.18);
  border-top-color: var(--identity-accent);
  border-radius: 50%;
  animation: identity-qr-spin 0.9s linear infinite;
}

.identity-qr__cancel {
  justify-self: center;
}

@keyframes identity-qr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Phone-side approval and result states */

.identity-qr-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
}

.identity-qr-result__icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

.identity-qr-result__icon--success {
  background: #ecfdf5;
  color: #059669;
}

.identity-qr-result__icon--muted {
  background: rgba(15, 23, 42, 0.06);
  color: var(--identity-copy);
}

.identity-qr-result__title {
  margin: 0 0 0.45rem;
  color: var(--identity-heading);
  font-size: 1.45rem;
  font-weight: 700;
}

.identity-qr-result__message {
  margin: 0 0 1.4rem;
  max-width: 22rem;
  color: var(--identity-copy);
  line-height: 1.5;
}

.identity-qr-result__message strong {
  color: var(--identity-heading);
}

.identity-qr-approval {
  display: grid;
  justify-items: center;
  width: 100%;
}

.identity-qr-approval__title {
  margin-bottom: 1.4rem;
  color: #000000;
}

.identity-qr-approval__actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.identity-qr-approval__account {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.15rem 0 0;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.82rem;
  font-weight: 600;
}

.identity-qr-approval__status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #10b981;
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .identity-main {
    padding: 1rem;
  }

  .identity-card {
    width: min(100%, 26.5rem);
    padding: 1.6rem 1.35rem 1.45rem;
  }

  body.identity-shell--biebprinten .identity-card--biebprinten,
  body.identity-shell--biebprinten-v2 .identity-card--biebprinten {
    min-height: auto;
  }

  body.identity-shell--biebprinten-hasselt .identity-card--biebprinten {
    min-height: auto;
  }

  .identity-brand__logo {
    width: 15.3rem;
  }

}