/* 0.4.159: final popup polish loaded after the main stylesheet. */

.procedure-info-dialog {
  width: min(1040px, calc(100vw - 48px)) !important;
}

.procedure-info-dialog .procedure-dialog-shell {
  width: 100% !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 26px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(248, 245, 239, 0.98)),
    #ffffff !important;
}

.procedure-info-dialog .procedure-dialog-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
  align-items: stretch !important;
  gap: 22px !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  border: 1px solid rgba(197, 165, 99, 0.2) !important;
  border-radius: 20px !important;
  padding: 20px 22px !important;
  text-align: left !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 238, 0.96)),
    #ffffff !important;
}

.procedure-info-dialog .procedure-dialog-head h2 {
  max-width: 720px !important;
  margin: 0 !important;
  font-size: clamp(34px, 4vw, 46px) !important;
  line-height: 1.04 !important;
}

.procedure-info-dialog .procedure-dialog-head p {
  max-width: 700px !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.procedure-info-dialog .procedure-dialog-head .dialog-mascot-card {
  min-height: 168px !important;
}

.procedure-info-dialog .procedure-dialog-head .dialog-mascot-card img {
  width: min(170px, 88%) !important;
  max-height: 160px !important;
}

.procedure-info-dialog .procedure-info-layout {
  display: grid !important;
  gap: 14px !important;
}

.procedure-info-dialog .procedure-info-choice-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.procedure-info-dialog .procedure-info-choice-list[hidden] {
  display: none !important;
}

.procedure-info-dialog .procedure-info-choice {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 104px !important;
  padding: 18px 48px 18px 18px !important;
  border: 1px solid rgba(10, 28, 52, 0.1) !important;
  border-radius: 18px !important;
  color: var(--navy) !important;
  text-align: left !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 14px 32px rgba(8, 20, 39, 0.055) !important;
}

.procedure-info-dialog .procedure-info-choice::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 18px;
  color: #b6905f;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.procedure-info-dialog .procedure-info-choice > [data-lucide] {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border: 1px solid rgba(197, 165, 99, 0.24) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  color: #b6905f !important;
  background: #fbf6ec !important;
}

.procedure-info-dialog .procedure-info-choice span {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.procedure-info-dialog .procedure-info-choice strong {
  margin: 0 !important;
  color: var(--navy) !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
}

.procedure-info-dialog .procedure-info-choice small {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
}

.procedure-info-dialog .procedure-info-choice:hover,
.procedure-info-dialog .procedure-info-choice.is-selected {
  border-color: rgba(197, 165, 99, 0.56) !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 242, 0.98), rgba(255, 255, 255, 0.96)),
    #ffffff !important;
  box-shadow: 0 18px 38px rgba(8, 20, 39, 0.08) !important;
}

.procedure-info-dialog .procedure-info-choice.is-selected > [data-lucide] {
  color: #ffffff !important;
  background: #b6905f !important;
}

@media (min-width: 900px) {
  .procedure-info-dialog .procedure-info-choice:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .procedure-info-dialog {
    width: min(calc(100vw - 16px), 600px) !important;
  }

  .procedure-info-dialog .procedure-dialog-shell {
    max-height: calc(100dvh - 16px) !important;
    padding: 16px !important;
  }

  .procedure-info-dialog .procedure-dialog-head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .procedure-info-dialog .procedure-dialog-head h2 {
    font-size: 30px !important;
  }

  .procedure-info-dialog .procedure-dialog-head p {
    font-size: 15px !important;
  }

  .procedure-info-dialog .procedure-dialog-head .dialog-mascot-card {
    min-height: 140px !important;
  }

  .procedure-info-dialog .procedure-info-choice-list {
    grid-template-columns: 1fr !important;
  }

  .procedure-info-dialog .procedure-info-choice {
    min-height: 96px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 15px 42px 15px 15px !important;
  }

  .procedure-info-dialog .procedure-info-choice > [data-lucide] {
    width: 44px !important;
    height: 44px !important;
    padding: 11px !important;
  }

  .procedure-info-dialog .procedure-info-choice strong {
    font-size: 17px !important;
  }

  .procedure-info-dialog .procedure-info-choice small {
    font-size: 14px !important;
  }
}

/* 0.4.163: betaalvenster, WhatsApp en leesbaarheid. */

.payment-dialog {
  width: min(720px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: transparent !important;
  color: var(--navy) !important;
}

.payment-dialog::backdrop {
  background: rgba(6, 18, 35, 0.62) !important;
  backdrop-filter: blur(10px) !important;
}

.payment-dialog-shell,
.whatsapp-dialog-shell,
.membership-terms-dialog > form,
.membership-request-dialog > form,
.service-notice-dialog > form {
  box-sizing: border-box !important;
  border: 1px solid rgba(197, 165, 99, 0.26) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(250, 247, 241, 0.98)),
    #ffffff !important;
  color: var(--navy) !important;
  box-shadow: 0 26px 72px rgba(8, 20, 39, 0.24) !important;
}

.payment-dialog-shell {
  position: relative !important;
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
  padding: 30px !important;
}

.payment-dialog .close-dialog,
.whatsapp-dialog .close-dialog,
.membership-terms-dialog .close-dialog,
.membership-request-dialog .close-dialog,
.service-notice-dialog .close-dialog {
  background: #ffffff !important;
}

.payment-dialog-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) !important;
  gap: 20px !important;
  align-items: stretch !important;
  padding-right: 42px !important;
}

.payment-dialog-head h2 {
  margin: 4px 0 8px !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.payment-dialog-head p,
.payment-dialog-status {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.payment-dialog-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 1px solid rgba(20, 135, 84, 0.18) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  background: rgba(236, 253, 245, 0.8) !important;
}

.payment-dialog-summary span {
  color: #667085 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.payment-dialog-summary strong {
  color: #0f8f57 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
}

.payment-dialog-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

.payment-dialog-actions .primary-button,
.payment-dialog-actions .secondary-button {
  min-height: 50px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
}

.payment-dialog-actions .primary-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
}

.dialog-mascot-card.is-payment {
  min-height: 170px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(41, 157, 96, 0.18), transparent 34%),
    linear-gradient(135deg, #fff8ee, #ffffff) !important;
}

.dialog-mascot-card.is-payment img {
  width: min(168px, 88%) !important;
  max-height: 158px !important;
}

.whatsapp-dialog {
  width: min(780px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.whatsapp-dialog::backdrop {
  background: rgba(6, 18, 35, 0.62) !important;
  backdrop-filter: blur(10px) !important;
}

.whatsapp-dialog-shell {
  width: 100% !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 30px !important;
  overflow: auto !important;
}

.whatsapp-dialog-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.whatsapp-dialog h2 {
  margin: 4px 0 8px !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.06 !important;
}

.whatsapp-dialog p,
.whatsapp-dialog label,
.whatsapp-dialog small {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.whatsapp-dialog textarea {
  min-height: 140px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.whatsapp-dialog-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.whatsapp-dialog-actions .primary-button,
.whatsapp-dialog-actions .secondary-button {
  min-height: 52px !important;
  font-size: 16px !important;
}

.membership-terms-dialog {
  width: min(900px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.membership-terms-dialog::backdrop,
.membership-request-dialog::backdrop,
.service-notice-dialog::backdrop {
  background: rgba(6, 18, 35, 0.62) !important;
  backdrop-filter: blur(10px) !important;
}

.membership-terms-dialog > form {
  width: 100% !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 30px !important;
  overflow: auto !important;
}

.membership-terms-dialog h2 {
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.08 !important;
}

.membership-terms-dialog p,
.membership-terms-dialog li,
.membership-dialog-note,
.terms-check,
.membership-dialog-benefit,
.membership-dialog-proof,
.membership-request-dialog p,
.membership-request-dialog li,
.service-notice-dialog p,
.service-notice-dialog li {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.membership-dialog-hero strong,
.membership-request-dialog h2,
.service-notice-dialog h2 {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.12 !important;
}

[data-panel-view="procedures"] .page-visual-copy p,
[data-panel-view="procedures"] .document-card p,
[data-panel-view="procedures"] .automation-row,
[data-panel-view="procedures"] .doc-row small,
[data-panel-view="procedures"] .active-procedure-card small,
[data-panel-view="procedures"] .lane-step small,
[data-panel-view="procedures"] .procedure-overview-card p,
[data-panel-view="procedures"] .procedure-empty-card p,
[data-panel-view="procedures"] .procedure-note,
[data-panel-view="procedures"] .route-summary p {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

[data-panel-view="procedures"] .case-status-row span,
[data-panel-view="procedures"] .live-stage-meta span,
[data-panel-view="procedures"] .section-title span {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

[data-panel-view="procedures"] .live-stage-meta strong,
[data-panel-view="procedures"] .doc-row strong,
[data-panel-view="procedures"] .active-procedure-card strong,
[data-panel-view="procedures"] .lane-step strong,
[data-panel-view="procedures"] .automation-row strong {
  font-size: 17px !important;
  line-height: 1.35 !important;
}

[data-panel-view="membership"] .membership-hero-panel p,
[data-panel-view="membership"] .membership-plan-intro p,
[data-panel-view="membership"] .membership-action-head p,
[data-panel-view="membership"] .membership-note,
[data-panel-view="membership"] .membership-current-card small,
[data-panel-view="membership"] .membership-plan-card li,
[data-panel-view="membership"] .member-action small,
[data-panel-view="membership"] .member-tool-list small,
[data-panel-view="membership"] .membership-page p {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

[data-panel-view="membership"] .member-action strong,
[data-panel-view="membership"] .member-tool-list strong,
[data-panel-view="membership"] .membership-plan-card h3,
[data-panel-view="membership"] .membership-current-card strong {
  font-size: 18px !important;
  line-height: 1.32 !important;
}

@media (max-width: 760px) {
  .payment-dialog,
  .whatsapp-dialog,
  .membership-terms-dialog {
    width: min(calc(100vw - 16px), 620px) !important;
  }

  .payment-dialog-shell,
  .whatsapp-dialog-shell,
  .membership-terms-dialog > form {
    max-height: calc(100dvh - 16px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .payment-dialog-head,
  .whatsapp-dialog-head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-right: 34px !important;
  }

  .payment-dialog-head h2,
  .whatsapp-dialog h2,
  .membership-terms-dialog h2 {
    font-size: 30px !important;
  }

  .payment-dialog-head p,
  .payment-dialog-status,
  .whatsapp-dialog p,
  .whatsapp-dialog label,
  .whatsapp-dialog small,
  .membership-terms-dialog p,
  .membership-terms-dialog li,
  .membership-dialog-note,
  .terms-check {
    font-size: 15px !important;
  }

  .payment-dialog-summary {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .payment-dialog-actions,
  .whatsapp-dialog-actions {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
}

/* 0.4.164: every portal popup uses a real white surface. */

dialog.login-dialog,
dialog.register-dialog,
dialog.profile-dialog,
dialog.procedure-dialog,
dialog.procedure-info-dialog,
dialog.upload-document-dialog,
dialog.free-letter-dialog,
dialog.authorization-dialog,
dialog.assignment-dialog,
dialog.whatsapp-dialog,
dialog.payment-dialog,
dialog.membership-terms-dialog,
dialog.membership-request-dialog,
dialog.service-notice-dialog {
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

dialog.login-dialog::backdrop,
dialog.register-dialog::backdrop,
dialog.profile-dialog::backdrop,
dialog.procedure-dialog::backdrop,
dialog.procedure-info-dialog::backdrop,
dialog.upload-document-dialog::backdrop,
dialog.free-letter-dialog::backdrop,
dialog.authorization-dialog::backdrop,
dialog.assignment-dialog::backdrop,
dialog.whatsapp-dialog::backdrop,
dialog.payment-dialog::backdrop,
dialog.membership-terms-dialog::backdrop,
dialog.membership-request-dialog::backdrop,
dialog.service-notice-dialog::backdrop {
  background: rgba(6, 18, 35, 0.64) !important;
  backdrop-filter: blur(10px) !important;
}

.login-dialog > form,
.register-dialog > form,
.profile-dialog > form,
.procedure-dialog > .procedure-dialog-shell,
.procedure-dialog > form.procedure-dialog-shell,
.procedure-info-dialog > .procedure-dialog-shell,
.procedure-info-dialog > form.procedure-dialog-shell,
.upload-document-dialog > .procedure-dialog-shell,
.upload-document-dialog > form.procedure-dialog-shell,
.free-letter-dialog > form,
.authorization-dialog > form,
.assignment-dialog > form,
.whatsapp-dialog-shell,
.payment-dialog-shell,
.membership-terms-dialog > form,
.membership-request-dialog > form,
.service-notice-dialog > form {
  box-sizing: border-box !important;
  border: 1px solid rgba(197, 165, 99, 0.28) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(251, 248, 242, 0.99)),
    #ffffff !important;
  color: var(--navy) !important;
  box-shadow: 0 28px 76px rgba(8, 20, 39, 0.26) !important;
}

.login-dialog {
  width: min(760px, calc(100vw - 32px)) !important;
}

.login-dialog > form,
.register-dialog > form,
.profile-dialog > form {
  width: 100% !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 30px !important;
  overflow: auto !important;
}

.login-dialog h2,
.register-dialog h2,
.profile-dialog h2,
.free-letter-dialog h2,
.authorization-dialog h2,
.assignment-dialog h2,
.upload-document-dialog h2 {
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.08 !important;
}

.login-dialog p,
.login-dialog label,
.login-dialog input,
.register-dialog p,
.register-dialog label,
.register-dialog input,
.profile-dialog p,
.profile-dialog label,
.profile-dialog input,
.free-letter-dialog p,
.free-letter-dialog li,
.authorization-dialog p,
.authorization-dialog li,
.assignment-dialog p,
.assignment-dialog li,
.upload-document-dialog p,
.upload-document-dialog small,
.upload-document-dialog button {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.login-dialog .close-dialog,
.register-dialog .close-dialog,
.profile-dialog .close-dialog,
.procedure-dialog .close-dialog,
.free-letter-dialog .close-dialog,
.authorization-dialog .close-dialog,
.assignment-dialog .close-dialog,
.upload-document-dialog .close-dialog {
  border: 1px solid rgba(10, 28, 52, 0.12) !important;
  background: #ffffff !important;
  color: var(--navy) !important;
}

@media (max-width: 760px) {
  .login-dialog,
  .register-dialog,
  .profile-dialog,
  .free-letter-dialog,
  .authorization-dialog,
  .assignment-dialog {
    width: min(calc(100vw - 16px), 620px) !important;
  }

  .login-dialog > form,
  .register-dialog > form,
  .profile-dialog > form,
  .free-letter-dialog > form,
  .authorization-dialog > form,
  .assignment-dialog > form {
    max-height: calc(100dvh - 16px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .login-dialog h2,
  .register-dialog h2,
  .profile-dialog h2,
  .free-letter-dialog h2,
  .authorization-dialog h2,
  .assignment-dialog h2,
  .upload-document-dialog h2 {
    font-size: 30px !important;
  }
}

/* 0.4.165: clearer, calmer messages page. */

[data-panel-view="contact"] .contact-visual-band {
  border: 1px solid rgba(10, 28, 52, 0.12) !important;
  background:
    linear-gradient(135deg, rgba(7, 27, 53, 0.96), rgba(18, 47, 82, 0.94) 58%, rgba(245, 239, 228, 0.94)) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 48px rgba(8, 20, 39, 0.16) !important;
}

[data-panel-view="contact"] .contact-visual-band figure {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16) !important;
}

[data-panel-view="contact"] .contact-visual-band .small-label {
  color: #f2c56d !important;
}

[data-panel-view="contact"] .contact-visual-band .page-visual-copy h3 {
  max-width: 640px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.08 !important;
}

[data-panel-view="contact"] .contact-visual-band .page-visual-copy p {
  max-width: 680px !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

[data-panel-view="contact"] .contact-visual-band .visual-pill-row span {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

[data-panel-view="contact"] .mailbox-shell {
  overflow: hidden !important;
  border: 1px solid rgba(10, 28, 52, 0.14) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 48px rgba(8, 20, 39, 0.1) !important;
}

[data-panel-view="contact"] .mailbox-list-panel {
  border-right: 1px solid rgba(10, 28, 52, 0.1) !important;
  background: #f7f9fc !important;
}

[data-panel-view="contact"] .mailbox-topline {
  border-bottom: 0 !important;
  background: #071b35 !important;
  color: #ffffff !important;
}

[data-panel-view="contact"] .mailbox-topline h3 {
  color: #ffffff !important;
  font-size: 24px !important;
}

[data-panel-view="contact"] .mailbox-topline .small-label {
  color: #f2c56d !important;
}

[data-panel-view="contact"] .mailbox-count {
  border: 1px solid rgba(197, 165, 99, 0.36) !important;
  background: #fff4dc !important;
  color: #7a5413 !important;
  font-weight: 800 !important;
}

[data-panel-view="contact"] .mailbox-tabs {
  display: flex !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #eef3f8 !important;
}

[data-panel-view="contact"] .mailbox-tab {
  border: 1px solid rgba(10, 28, 52, 0.12) !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

[data-panel-view="contact"] .mailbox-tab.is-active {
  border-color: #071b35 !important;
  background: #071b35 !important;
  color: #ffffff !important;
}

[data-panel-view="contact"] .mailbox-row {
  border-bottom: 1px solid rgba(10, 28, 52, 0.08) !important;
  background: #ffffff !important;
  color: #0b1b34 !important;
}

[data-panel-view="contact"] .mailbox-row:hover,
[data-panel-view="contact"] .mailbox-row.is-active {
  background: #fff8ec !important;
  box-shadow: inset 4px 0 0 #c5a563 !important;
}

[data-panel-view="contact"] .mailbox-row strong {
  color: #0b1b34 !important;
  font-size: 15px !important;
}

[data-panel-view="contact"] .mailbox-row small,
[data-panel-view="contact"] .mailbox-row em {
  color: #526178 !important;
  font-size: 12px !important;
}

[data-panel-view="contact"] .mailbox-read-panel {
  background: #ffffff !important;
}

[data-panel-view="contact"] .mailbox-reader {
  background: #ffffff !important;
}

[data-panel-view="contact"] .mailbox-reader-head h3 {
  color: #0b1b34 !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
}

[data-panel-view="contact"] .mailbox-reader-head p {
  color: #526178 !important;
  font-size: 14px !important;
}

[data-panel-view="contact"] .mailbox-reader-body {
  border: 1px solid rgba(10, 28, 52, 0.1) !important;
  background: #f8fafc !important;
}

[data-panel-view="contact"] .mailbox-reader-body p,
[data-panel-view="contact"] .mailbox-reader > p {
  color: #26364d !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

[data-panel-view="contact"] .mailbox-compose {
  border-top: 1px solid rgba(10, 28, 52, 0.1) !important;
  background: #f8fafc !important;
}

[data-panel-view="contact"] .mailbox-compose-head > [data-lucide] {
  border-radius: 14px !important;
  background: #071b35 !important;
  color: #f2c56d !important;
}

[data-panel-view="contact"] .mailbox-compose-head h3 {
  color: #0b1b34 !important;
  font-size: 24px !important;
}

[data-panel-view="contact"] .mailbox-compose-head p,
[data-panel-view="contact"] .mailbox-compose label,
[data-panel-view="contact"] .mailbox-compose small {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

[data-panel-view="contact"] .mailbox-compose input,
[data-panel-view="contact"] .mailbox-compose select,
[data-panel-view="contact"] .mailbox-compose textarea {
  border: 1px solid rgba(10, 28, 52, 0.16) !important;
  background: #ffffff !important;
  color: #0b1b34 !important;
  font-size: 16px !important;
}

[data-panel-view="contact"] .mailbox-compose textarea {
  min-height: 150px !important;
}

[data-panel-view="contact"] .portal-message-status.is-success {
  color: #087443 !important;
}

[data-panel-view="contact"] .portal-message-status.is-error {
  color: #b42318 !important;
}

@media (max-width: 900px) {
  [data-panel-view="contact"] .mailbox-shell {
    grid-template-columns: 1fr !important;
  }

  [data-panel-view="contact"] .mailbox-list-panel {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(10, 28, 52, 0.1) !important;
  }

  [data-panel-view="contact"] .mailbox-list {
    max-height: 280px !important;
  }
}

@media (max-width: 640px) {
  [data-panel-view="contact"] .contact-visual-band {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  [data-panel-view="contact"] .contact-visual-band figure {
    max-width: 240px !important;
    margin: 0 auto !important;
  }

  [data-panel-view="contact"] .mailbox-topline,
  [data-panel-view="contact"] .mailbox-reader,
  [data-panel-view="contact"] .mailbox-compose {
    padding: 18px !important;
  }
}

/* 0.4.166: hard modal surface fix. Dialogs themselves and their inner cards stay white. */

html body dialog.login-dialog,
html body dialog.register-dialog,
html body dialog.profile-dialog,
html body dialog.procedure-dialog,
html body dialog.procedure-info-dialog,
html body dialog.upload-document-dialog,
html body dialog.free-letter-dialog,
html body dialog.authorization-dialog,
html body dialog.assignment-dialog,
html body dialog.whatsapp-dialog,
html body dialog.payment-dialog,
html body dialog.membership-terms-dialog,
html body dialog.membership-request-dialog,
html body dialog.service-notice-dialog {
  color: #0b1b34 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(197, 165, 99, 0.28) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(8, 20, 39, 0.28) !important;
}

html body dialog.login-dialog > form,
html body dialog.register-dialog > form,
html body dialog.profile-dialog > form,
html body dialog.procedure-dialog > .procedure-dialog-shell,
html body dialog.procedure-dialog > form.procedure-dialog-shell,
html body dialog.procedure-info-dialog > .procedure-dialog-shell,
html body dialog.procedure-info-dialog > form.procedure-dialog-shell,
html body dialog.upload-document-dialog > .procedure-dialog-shell,
html body dialog.upload-document-dialog > form.procedure-dialog-shell,
html body dialog.free-letter-dialog > form,
html body dialog.authorization-dialog > form,
html body dialog.assignment-dialog > form,
html body .whatsapp-dialog-shell,
html body .payment-dialog-shell,
html body dialog.membership-terms-dialog > form,
html body dialog.membership-request-dialog > form,
html body dialog.service-notice-dialog > form,
html body .upload-progress-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0b1b34 !important;
}

html body dialog.login-dialog *,
html body dialog.register-dialog *,
html body dialog.profile-dialog *,
html body dialog.procedure-dialog *,
html body dialog.procedure-info-dialog *,
html body dialog.upload-document-dialog *,
html body dialog.free-letter-dialog *,
html body dialog.authorization-dialog *,
html body dialog.assignment-dialog *,
html body dialog.whatsapp-dialog *,
html body dialog.payment-dialog *,
html body dialog.membership-terms-dialog *,
html body dialog.membership-request-dialog *,
html body dialog.service-notice-dialog * {
  text-shadow: none !important;
}

html body dialog::backdrop {
  background: rgba(6, 18, 35, 0.68) !important;
  backdrop-filter: blur(10px) !important;
}

/* 0.4.168: form, popup scroll and readability pass. */

html body [data-panel-view="overview"],
html body [data-panel-view="procedures"],
html body [data-panel-view="membership"],
html body [data-panel-view="contact"] {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

html body [data-panel-view="overview"] p,
html body [data-panel-view="overview"] li,
html body [data-panel-view="overview"] small,
html body [data-panel-view="procedures"] p,
html body [data-panel-view="procedures"] li,
html body [data-panel-view="procedures"] small,
html body [data-panel-view="membership"] p,
html body [data-panel-view="membership"] li,
html body [data-panel-view="membership"] small,
html body [data-panel-view="contact"] p,
html body [data-panel-view="contact"] li,
html body [data-panel-view="contact"] small {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

html body [data-panel-view="overview"] button,
html body [data-panel-view="procedures"] button,
html body [data-panel-view="membership"] button,
html body [data-panel-view="contact"] button,
html body [data-panel-view="overview"] .mini-button,
html body [data-panel-view="procedures"] .mini-button,
html body [data-panel-view="membership"] .mini-button,
html body [data-panel-view="contact"] .mini-button {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

html body [data-panel-view="overview"] h2,
html body [data-panel-view="procedures"] h2,
html body [data-panel-view="membership"] h2,
html body [data-panel-view="contact"] h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.08 !important;
}

html body [data-panel-view="overview"] h3,
html body [data-panel-view="procedures"] h3,
html body [data-panel-view="membership"] h3,
html body [data-panel-view="contact"] h3,
html body [data-panel-view="procedures"] .active-procedure-card strong,
html body [data-panel-view="procedures"] .doc-row strong,
html body [data-panel-view="procedures"] .requirement-item strong,
html body [data-panel-view="procedures"] .lane-step strong {
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.25 !important;
}

html body .procedure-dialog,
html body .procedure-info-dialog,
html body .login-dialog,
html body .register-dialog,
html body .profile-dialog,
html body .upload-document-dialog,
html body .authorization-dialog,
html body .assignment-dialog,
html body .payment-dialog,
html body .whatsapp-dialog,
html body .membership-terms-dialog,
html body .membership-request-dialog,
html body .service-notice-dialog {
  box-sizing: border-box !important;
}

html body .procedure-dialog .procedure-dialog-shell,
html body .procedure-info-dialog .procedure-dialog-shell,
html body .upload-document-dialog .procedure-dialog-shell,
html body .authorization-shell,
html body .assignment-dialog form,
html body .payment-dialog-shell,
html body .whatsapp-dialog-shell,
html body .membership-terms-dialog form,
html body .membership-request-dialog form,
html body .service-notice-dialog form,
html body .login-dialog form,
html body .register-dialog form,
html body .profile-dialog form {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html body .hubspot-form-panel {
  gap: 18px !important;
  border: 1px solid rgba(198, 157, 94, 0.38) !important;
  border-radius: 24px !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
  background: #fffdfa !important;
  box-shadow: 0 18px 48px rgba(8, 20, 39, 0.08) !important;
}

html body .hubspot-form-panel .application-head {
  text-align: center !important;
}

html body .hubspot-form-panel .application-head span {
  color: #c19345 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body .hubspot-form-panel .application-head h3 {
  color: #071b35 !important;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.08 !important;
}

html body .hubspot-form-panel .application-head p {
  max-width: 680px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  color: #5d6a80 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

html body .hubspot-form-status {
  border-color: rgba(26, 146, 83, 0.22) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  background: #f0fbf4 !important;
  color: #143d27 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

html body .hubspot-form-target {
  min-height: 420px !important;
  border: 1px solid rgba(198, 157, 94, 0.28) !important;
  border-radius: 24px !important;
  padding: clamp(16px, 2vw, 28px) !important;
  background: #ffffff !important;
  overflow: visible !important;
}

html body .hubspot-form-target iframe {
  width: 100% !important;
  min-height: 900px !important;
  border: 0 !important;
  background: #ffffff !important;
}

html body .hubspot-form-target form,
html body .hubspot-form-target .hs-form,
html body form.hs-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  color: #10213d !important;
  font-family: "Plus Jakarta Sans", Lexend, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

html body .hubspot-form-target .hs-form-field,
html body .hubspot-form-target .hs-submit,
html body .hubspot-form-target .hs_error_rollup,
html body .hubspot-form-target .legal-consent-container,
html body form.hs-form .hs-form-field,
html body form.hs-form .hs-submit,
html body form.hs-form .hs_error_rollup,
html body form.hs-form .legal-consent-container {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

html body .hubspot-form-target .htn-hubspot-wide-field,
html body .hubspot-form-target .hs-submit,
html body .hubspot-form-target .hs_error_rollup,
html body .hubspot-form-target .legal-consent-container,
html body form.hs-form .htn-hubspot-wide-field,
html body form.hs-form .hs-submit,
html body form.hs-form .hs_error_rollup,
html body form.hs-form .legal-consent-container {
  grid-column: 1 / -1 !important;
}

html body .hubspot-form-target .htn-hubspot-hidden-field,
html body .hubspot-form-target .htn-hubspot-empty-field,
html body .hubspot-form-target .hs-fieldtype-hidden,
html body .hubspot-form-target input[type="hidden"],
html body form.hs-form .htn-hubspot-hidden-field,
html body form.hs-form .htn-hubspot-empty-field,
html body form.hs-form .hs-fieldtype-hidden,
html body form.hs-form input[type="hidden"] {
  display: none !important;
}

html body .hubspot-form-target label,
html body form.hs-form label {
  display: block !important;
  margin-bottom: 8px !important;
  color: #344966 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html body .hubspot-form-target input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html body .hubspot-form-target select,
html body .hubspot-form-target textarea,
html body form.hs-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html body form.hs-form select,
html body form.hs-form textarea {
  width: 100% !important;
  min-height: 54px !important;
  border: 1px solid #e2cba8 !important;
  border-radius: 999px !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  color: #071b35 !important;
  box-shadow: none !important;
  font: 700 16px/1.45 "Plus Jakarta Sans", Lexend, Arial, sans-serif !important;
  outline: none !important;
  transition: border-color 0.12s ease, background-color 0.12s ease !important;
}

html body .hubspot-form-target textarea,
html body form.hs-form textarea {
  min-height: 150px !important;
  border-radius: 24px !important;
  resize: vertical !important;
}

html body .hubspot-form-target input:focus,
html body .hubspot-form-target select:focus,
html body .hubspot-form-target textarea:focus,
html body form.hs-form input:focus,
html body form.hs-form select:focus,
html body form.hs-form textarea:focus {
  border-color: #c59b52 !important;
  background: #fffdfa !important;
  box-shadow: 0 0 0 4px rgba(197, 155, 82, 0.16) !important;
}

html body .hubspot-form-target input[type="file"],
html body form.hs-form input[type="file"] {
  min-height: 54px !important;
  padding: 8px 12px !important;
}

html body .hubspot-form-target input[type="file"]::file-selector-button,
html body form.hs-form input[type="file"]::file-selector-button {
  margin-right: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  background: #071b35 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

html body .hubspot-form-target input[type="submit"],
html body .hubspot-form-target .hs-button,
html body form.hs-form input[type="submit"],
html body form.hs-form .hs-button {
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  background: #071b35 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(7, 27, 53, 0.22) !important;
  font: 900 16px/1.2 "Plus Jakarta Sans", Lexend, Arial, sans-serif !important;
  cursor: pointer !important;
}

html body .hubspot-form-target input[type="checkbox"],
html body .hubspot-form-target input[type="radio"],
html body form.hs-form input[type="checkbox"],
html body form.hs-form input[type="radio"] {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 1px 8px 0 0 !important;
  accent-color: #071b35 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  opacity: 1 !important;
  position: relative !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html body .hubspot-form-target .hs-form-checkbox,
html body .hubspot-form-target .hs-form-radio,
html body .hubspot-form-target .inputs-list li,
html body form.hs-form .hs-form-checkbox,
html body form.hs-form .hs-form-radio,
html body form.hs-form .inputs-list li {
  min-height: 44px !important;
  cursor: pointer !important;
}

html body .hubspot-form-target .hs-form-checkbox label,
html body .hubspot-form-target .hs-form-radio label,
html body .hubspot-form-target .inputs-list label,
html body form.hs-form .hs-form-checkbox label,
html body form.hs-form .hs-form-radio label,
html body form.hs-form .inputs-list label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

html body .hubspot-form-target .hs-error-msgs,
html body form.hs-form .hs-error-msgs {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #b42318 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  html body dialog.login-dialog,
  html body dialog.register-dialog,
  html body dialog.profile-dialog,
  html body dialog.procedure-dialog,
  html body dialog.procedure-info-dialog,
  html body dialog.upload-document-dialog,
  html body dialog.free-letter-dialog,
  html body dialog.authorization-dialog,
  html body dialog.assignment-dialog,
  html body dialog.whatsapp-dialog,
  html body dialog.payment-dialog,
  html body dialog.membership-terms-dialog,
  html body dialog.membership-request-dialog,
  html body dialog.service-notice-dialog {
    position: fixed !important;
    inset: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  html body dialog.login-dialog > form,
  html body dialog.register-dialog > form,
  html body dialog.profile-dialog > form,
  html body dialog.procedure-dialog > .procedure-dialog-shell,
  html body dialog.procedure-dialog > form.procedure-dialog-shell,
  html body dialog.procedure-info-dialog > .procedure-dialog-shell,
  html body dialog.procedure-info-dialog > form.procedure-dialog-shell,
  html body dialog.upload-document-dialog > .procedure-dialog-shell,
  html body dialog.upload-document-dialog > form.procedure-dialog-shell,
  html body dialog.free-letter-dialog > form,
  html body dialog.authorization-dialog > form,
  html body dialog.assignment-dialog > form,
  html body .whatsapp-dialog-shell,
  html body .payment-dialog-shell,
  html body dialog.membership-terms-dialog > form,
  html body dialog.membership-request-dialog > form,
  html body dialog.service-notice-dialog > form {
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  html body .hubspot-form-panel {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  html body .hubspot-form-target {
    min-height: 360px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  html body .hubspot-form-target form,
  html body .hubspot-form-target .hs-form,
  html body form.hs-form {
    grid-template-columns: 1fr !important;
  }

  html body .hubspot-form-target .hs-form-field,
  html body .hubspot-form-target .hs-submit,
  html body form.hs-form .hs-form-field,
  html body form.hs-form .hs-submit {
    grid-column: 1 / -1 !important;
  }

  html body [data-panel-view="overview"] p,
  html body [data-panel-view="overview"] li,
  html body [data-panel-view="overview"] small,
  html body [data-panel-view="procedures"] p,
  html body [data-panel-view="procedures"] li,
  html body [data-panel-view="procedures"] small,
  html body [data-panel-view="membership"] p,
  html body [data-panel-view="membership"] li,
  html body [data-panel-view="membership"] small,
  html body [data-panel-view="contact"] p,
  html body [data-panel-view="contact"] li,
  html body [data-panel-view="contact"] small {
    font-size: 15.5px !important;
  }
}

/* 0.4.170: popup close button and procedure-start alignment. */

html body dialog .close-dialog {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 40 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid rgba(197, 165, 99, 0.36) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: #071b35 !important;
  box-shadow: 0 10px 24px rgba(8, 20, 39, 0.12) !important;
  overflow: visible !important;
}

html body dialog .close-dialog svg,
html body dialog .close-dialog [data-lucide] {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.4 !important;
}

html body dialog.procedure-dialog > .procedure-dialog-shell,
html body dialog.procedure-info-dialog > .procedure-dialog-shell,
html body dialog.upload-document-dialog > .procedure-dialog-shell {
  position: relative !important;
  padding-top: max(32px, env(safe-area-inset-top)) !important;
  overflow: visible !important;
}

html body #procedure-dialog .procedure-dialog-head .dialog-head-copy {
  text-align: center !important;
  justify-items: center !important;
}

html body #procedure-dialog .procedure-dialog-head h2,
html body #procedure-dialog .procedure-dialog-head p,
html body #procedure-dialog .procedure-dialog-head .eyebrow {
  text-align: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (max-width: 760px) {
  html body dialog .close-dialog {
    top: 10px !important;
    right: 10px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  html body dialog.procedure-dialog > .procedure-dialog-shell,
  html body dialog.procedure-info-dialog > .procedure-dialog-shell,
  html body dialog.upload-document-dialog > .procedure-dialog-shell {
    padding-top: 46px !important;
  }
}

/* 0.4.171: HubSpot formulier bedankt-scherm blijft in het portaal. */
html body .hubspot-form-success-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: min(760px, 100%);
  margin: 22px auto 0;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(33, 166, 103, .22);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(8, 20, 39, .12);
}

html body .hubspot-form-success-card .success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  color: #0d8a55;
  background: #eaf8f0;
  border: 1px solid rgba(33, 166, 103, .22);
}

html body .hubspot-form-success-card h3 {
  margin: 6px 0 8px;
  color: #071b35;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.04;
  letter-spacing: 0;
}

html body .hubspot-form-success-card p,
html body .hubspot-form-success-card li {
  color: #516079;
  font-size: 17px;
  line-height: 1.55;
}

html body .hubspot-form-success-card ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

html body .hubspot-form-success-card li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #142947;
  font-weight: 700;
}

html body .hubspot-form-success-card li svg {
  width: 20px;
  height: 20px;
  color: #c49a45;
  flex: 0 0 auto;
}

html body .hubspot-form-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

html body .hubspot-form-success-actions button {
  min-height: 52px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  html body .hubspot-form-success-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }

  html body .hubspot-form-success-card .success-icon {
    width: 52px;
    height: 52px;
  }

  html body .hubspot-form-success-actions {
    flex-direction: column;
  }

  html body .hubspot-form-success-actions button {
    width: 100%;
  }
}

/* 0.4.172: mobiele navigatie, document-preview en rustiger documentflow. */
html body .main-nav {
  position: relative;
}

html body .procedure-cancel-button {
  color: #9f2e28 !important;
  border-color: rgba(217, 45, 32, .22) !important;
  background: #fff7f6 !important;
}

html body .procedure-cancel-button[hidden] {
  display: none !important;
}

html body .documents-visual-band figure {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 260px;
  background:
    radial-gradient(circle at 18% 18%, rgba(196, 154, 69, .16), transparent 32%),
    linear-gradient(135deg, #fffaf2, #f8fbff);
}

html body .documents-visual-band figure::before,
html body .documents-visual-band figure::after {
  content: "";
  position: absolute;
  width: 116px;
  height: 148px;
  border: 1px solid rgba(197, 165, 99, .34);
  border-radius: 14px;
  background:
    linear-gradient(#d9c09b 0 8px, transparent 8px),
    linear-gradient(#eef2f6 0 10px, transparent 10px);
  background-size: 100% 34px, 72% 22px;
  background-position: 0 18px, 18px 54px;
  background-repeat: no-repeat;
  box-shadow: 0 18px 34px rgba(8, 26, 49, .10);
}

html body .documents-visual-band figure::before {
  left: 8%;
  bottom: 16%;
  transform: rotate(-8deg);
}

html body .documents-visual-band figure::after {
  right: 8%;
  top: 12%;
  transform: rotate(7deg);
}

html body .documents-visual-band figure img {
  position: relative;
  z-index: 2;
  max-width: min(78%, 320px);
  max-height: 300px;
  object-fit: contain;
}

html body [data-view-document],
html body .compact-doc-list button[data-view-document],
html body .doc-row .mini-button,
html body .requirement-item .outline-button {
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

html body .terms-check {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  line-height: 1.45 !important;
}

html body .terms-check input {
  width: 18px !important;
  height: 18px !important;
  margin: 4px 0 0 !important;
}

html body dialog.document-preview-dialog {
  width: min(1040px, calc(100vw - 48px)) !important;
  max-height: min(860px, calc(100dvh - 36px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

html body .document-preview-shell {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff !important;
}

html body .document-preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 20px;
  padding-right: 56px;
}

html body .document-preview-head h2 {
  margin: 4px 0 6px;
  color: #071b35;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}

html body .document-preview-head p {
  margin: 0;
  color: #667189;
  font-size: 17px;
  line-height: 1.5;
}

html body .dialog-mascot-card.is-document-preview {
  min-height: 146px;
}

html body .document-preview-frame {
  display: grid;
  place-items: center;
  min-height: min(58dvh, 560px);
  overflow: hidden;
  border: 1px solid rgba(197, 165, 99, .24);
  border-radius: 22px;
  background: #f8fafc;
}

html body .document-preview-frame iframe,
html body .document-preview-frame img {
  width: 100%;
  height: min(58dvh, 560px);
  border: 0;
}

html body .document-preview-frame img {
  object-fit: contain;
  padding: 18px;
}

html body .document-preview-fallback {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: #071b35;
}

html body .document-preview-fallback svg {
  width: 44px;
  height: 44px;
  color: #c49a45;
}

html body .document-preview-fallback span {
  color: #667189;
  font-size: 16px;
}

html body .document-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

html body .document-preview-actions .primary-button,
html body .document-preview-actions .secondary-button {
  min-height: 52px;
  border-radius: 999px;
  padding: 0 22px;
}

html body .portal-benefit-grid article:nth-child(5) {
  grid-column: 1 / -1;
  min-height: 96px;
}

@media (max-width: 900px) {
  html body .main-nav {
    grid-template-columns: minmax(92px, 112px) minmax(0, 1fr) max-content 44px !important;
    gap: 8px !important;
    min-height: 72px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }

  html body .brand {
    grid-column: 1;
    grid-row: 1;
    width: 112px !important;
  }

  html body .nav-actions {
    grid-column: 3;
    grid-row: 1;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-self: end !important;
    width: max-content !important;
    min-width: 94px !important;
    height: 44px !important;
    gap: 6px !important;
  }

  html body .mobile-toggle {
    grid-column: 4;
    grid-row: 1;
    justify-self: end !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 !important;
  }

  html body .mobile-toggle span,
  html body .nav-actions .language-switch,
  html body .nav-actions .nav-user-chip {
    display: none !important;
  }

  html body .nav-icon-button,
  html body .nav-auth-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 !important;
  }

  html body .nav-auth-button {
    gap: 0 !important;
    font-size: 0 !important;
  }

  html body .nav-auth-button svg,
  html body .nav-icon-button svg {
    width: 20px !important;
    height: 20px !important;
  }

  html body .nav-tabs {
    position: absolute !important;
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 30 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(197, 165, 99, .22) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 56px rgba(8, 20, 39, .22) !important;
  }

  html body .nav-tabs.is-open {
    display: flex !important;
  }

  html body .nav-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 0 14px !important;
    color: #071b35 !important;
    background: #f8fafc !important;
    font-size: 15px !important;
  }

  html body .nav-tab.is-active {
    color: #071b35 !important;
    background: #f5ead9 !important;
  }

  html body .nav-tab::after {
    display: none !important;
  }

  html body .panel-head-actions {
    align-items: stretch !important;
  }
}

@media (max-width: 760px) {
  html body .requirements-board {
    grid-template-columns: 1fr !important;
  }

  html body .requirement-item,
  html body .timeline-list li,
  html body .compact-doc-list > div {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html body .requirement-item > svg,
  html body .timeline-list li > svg,
  html body .compact-doc-list > div > svg {
    margin-inline: auto !important;
  }

  html body .requirement-item .outline-button,
  html body .timeline-list button,
  html body .compact-doc-list button {
    grid-column: 1 !important;
    justify-self: center !important;
    min-width: min(100%, 190px) !important;
  }

  html body .documents-visual-band figure {
    min-height: 240px;
  }

  html body .document-preview-dialog {
    inset: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 20px) !important;
  }

  html body .document-preview-shell {
    min-height: 100%;
    padding: 48px 16px 18px;
  }

  html body .document-preview-head {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-right: 0;
    text-align: center;
  }

  html body .document-preview-head .dialog-mascot-card {
    width: min(100%, 220px);
  }

  html body .document-preview-frame,
  html body .document-preview-frame iframe,
  html body .document-preview-frame img {
    min-height: 360px;
    height: 48dvh;
  }

  html body .document-preview-actions {
    flex-direction: column;
  }

  html body .document-preview-actions .primary-button,
  html body .document-preview-actions .secondary-button {
    width: 100%;
  }

  html body .portal-benefit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 0.4.173: duidelijke document-preview fallback en intake-blokkade voor tweede procedure. */

html body dialog.procedure-blocked-dialog {
  width: min(680px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: auto !important;
  color: #071b35 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(197, 165, 99, .28) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(8, 20, 39, .3) !important;
}

html body dialog.procedure-blocked-dialog::backdrop {
  background: rgba(7, 20, 38, .64) !important;
  backdrop-filter: blur(10px) !important;
}

html body .procedure-blocked-shell {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 30px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #071b35 !important;
}

html body .procedure-blocked-shell .close-dialog {
  position: absolute;
  top: 16px;
  right: 16px;
}

html body .procedure-blocked-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 22px;
  align-items: center;
  padding-right: 46px;
}

html body .procedure-blocked-head h2 {
  margin: 4px 0 8px;
  color: #071b35;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: 0;
}

html body .procedure-blocked-head p {
  margin: 0;
  color: #667189;
  font-size: 17px;
  line-height: 1.55;
}

html body .dialog-mascot-card.is-procedure-blocked {
  min-height: 190px;
}

html body .procedure-blocked-docs {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid rgba(197, 165, 99, .28);
  border-radius: 16px;
  background: #fff8ed;
  color: #071b35;
  font-size: 17px;
  line-height: 1.5;
}

html body .procedure-blocked-docs svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: #c49a45;
}

html body .procedure-blocked-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

html body .procedure-blocked-actions .primary-button,
html body .procedure-blocked-actions .secondary-button {
  min-height: 52px;
  border-radius: 999px;
  padding: 0 22px;
}

/* 0.4.208: bevestigde zelfannulering zolang de intake nog niet compleet is. */
html body dialog.procedure-cancel-dialog {
  width: min(590px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: auto !important;
  color: #071b35 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(159, 46, 40, .2) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(8, 20, 39, .32) !important;
}

html body dialog.procedure-cancel-dialog::backdrop {
  background: rgba(7, 20, 38, .66) !important;
  backdrop-filter: blur(10px) !important;
}

html body .procedure-cancel-shell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 34px;
  color: #071b35 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  text-align: center;
}

html body .procedure-cancel-shell .close-dialog {
  position: absolute;
  top: 14px;
  right: 14px;
}

html body .procedure-cancel-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: #9f2e28;
  background: #fff2f0;
  border: 1px solid rgba(159, 46, 40, .18);
  border-radius: 50%;
}

html body .procedure-cancel-icon svg {
  width: 30px;
  height: 30px;
}

html body .procedure-cancel-copy h2 {
  margin: 5px 0 8px;
  color: #071b35;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
}

html body .procedure-cancel-copy p {
  margin: 0;
  color: #5f6d84;
  font-size: 17px;
  line-height: 1.55;
}

html body .procedure-cancel-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 15px 17px;
  color: #33445d;
  background: #f7f9fc;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

html body .procedure-cancel-notice svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: #c49a45;
}

html body .procedure-cancel-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

html body .procedure-cancel-actions .secondary-button,
html body .procedure-cancel-actions .danger-button {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
}

html body .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ffffff;
  background: #9f2e28;
  border: 1px solid #8e2823;
  box-shadow: 0 8px 18px rgba(159, 46, 40, .2);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

html body .danger-button:hover {
  background: #872620;
  transform: translateY(-1px);
}

html body .danger-button:disabled {
  cursor: wait;
  opacity: .7;
  transform: none;
}

html body .danger-button svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 620px) {
  html body dialog.procedure-cancel-dialog {
    position: fixed !important;
    inset: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
  }

  html body .procedure-cancel-shell {
    min-height: 100%;
    align-content: center;
    padding: 52px 18px 22px;
  }

  html body .procedure-cancel-actions {
    flex-direction: column-reverse;
  }

  html body .procedure-cancel-actions .secondary-button,
  html body .procedure-cancel-actions .danger-button {
    width: 100%;
  }
}

html body .document-preview-fallback.is-stored {
  background: linear-gradient(180deg, rgba(237, 252, 244, .92), rgba(255, 255, 255, .95));
}

html body .document-preview-fallback.is-missing {
  background: linear-gradient(180deg, rgba(255, 248, 237, .95), rgba(255, 255, 255, .95));
}

html body .document-preview-fallback.is-stored svg {
  color: #15965d;
}

@media (max-width: 760px) {
  html body dialog.procedure-blocked-dialog {
    position: fixed !important;
    inset: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  html body .procedure-blocked-shell {
    min-height: 100%;
    padding: 52px 18px 20px;
  }

  html body .procedure-blocked-head {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-right: 0;
    text-align: center;
  }

  html body .dialog-mascot-card.is-procedure-blocked {
    width: min(100%, 230px);
  }

  html body .procedure-blocked-docs {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  html body .procedure-blocked-actions {
    flex-direction: column;
  }

  html body .procedure-blocked-actions .primary-button,
  html body .procedure-blocked-actions .secondary-button {
    width: 100%;
  }
}

/* 0.4.174: laptop-safe procedure flow actions. */

html body .procedure-dialog:not(.procedure-info-dialog).has-selected-procedure:not(.has-summary-step):not(.has-application-step) .route-actions {
  position: sticky;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px -6px -6px;
  border-top: 1px solid rgba(10, 28, 52, .08);
  border-radius: 0 0 18px 18px;
  padding: 14px 6px 6px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}

html body [data-submit-existing-form].is-route-ready {
  min-height: 54px;
  border-radius: 999px;
  padding: 0 24px;
  box-shadow: 0 16px 34px rgba(7, 27, 53, .18);
}

html body .procedure-dialog.has-summary-step .procedure-summary-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px -6px -6px;
  border: 1px solid rgba(197, 165, 99, .2);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -12px 34px rgba(8, 20, 39, .08);
  backdrop-filter: blur(10px);
}

html body .procedure-dialog.has-summary-step .procedure-summary-actions .secondary-button {
  min-height: 54px;
  border-color: #071b35 !important;
  color: #ffffff !important;
  background: #071b35 !important;
  box-shadow: 0 16px 34px rgba(7, 27, 53, .18);
}

html body .procedure-dialog.has-summary-step .procedure-summary-cta {
  min-height: 54px;
  border-radius: 999px;
}

@media (max-height: 820px) and (min-width: 761px) {
  html body .procedure-dialog:not(.procedure-info-dialog) {
    width: min(1040px, calc(100vw - 42px)) !important;
  }

  html body .procedure-dialog:not(.procedure-info-dialog) .procedure-dialog-shell {
    padding: 20px !important;
  }

  html body .procedure-dialog:not(.procedure-info-dialog) .procedure-dialog-head {
    gap: 14px;
    margin-bottom: 14px;
  }

  html body .procedure-dialog:not(.procedure-info-dialog) .procedure-dialog-head h2 {
    font-size: clamp(28px, 3vw, 36px) !important;
  }

  html body .procedure-summary-hero {
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 16px;
    padding: 16px;
  }

  html body .procedure-summary-copy h3 {
    font-size: clamp(26px, 2.8vw, 34px);
  }

  html body .procedure-summary-copy p {
    font-size: 16px;
  }

  html body .procedure-summary-illustration {
    min-height: 180px;
  }

  html body .procedure-summary-illustration img {
    max-height: 200px;
  }
}

@media (max-width: 760px) {
  html body .procedure-dialog:not(.procedure-info-dialog).has-selected-procedure:not(.has-summary-step):not(.has-application-step) .route-actions,
  html body .procedure-dialog.has-summary-step .procedure-summary-actions {
    flex-direction: column;
    align-items: stretch;
    margin-right: 0;
    margin-left: 0;
  }

  html body [data-submit-existing-form].is-route-ready,
  html body .procedure-dialog.has-summary-step .procedure-summary-actions .secondary-button,
  html body .procedure-dialog.has-summary-step .procedure-summary-actions .outline-button {
    width: 100%;
    justify-content: center;
  }
}