/* =============================================================================
   Closing form (LE1-T250) — Konrad's design of 27 Oct 2026
   =============================================================================
   Built on the shared tokens (font, navy, text colours). The values below are
   the closing form's own: its card layout, step dots and buttons differ from
   the Business Loan form, so they live here rather than in app.css.
   ========================================================================== */

:root {
  --cf-bg: #f4f6f9;
  --cf-card: #ffffff;
  --cf-navy: #16202e;
  --cf-heading: #0f1e33;
  --cf-muted: #4b5563;
  --cf-blue: #3b82f6;
  --cf-blue-dark: #2563eb;
  --cf-blue-soft: #a9c6f6;
  --cf-grey-dot: #dfe3e8;
  --cf-note-bg: #eef4fd;
  --cf-panel-bg: #f2f6fc;
  --cf-border: #d7dce3;
  --cf-border-soft: #e6e9ee;
  --cf-error: #ca181f;
  --cf-radius-card: 22px;
  --cf-radius: 10px;
  --cf-field-h: 3rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-heading);
  font-family: var(--lc-font);
  -webkit-font-smoothing: antialiased;
}

.cf-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;      /* the card is as tall as its content, not the window */
  padding: 2rem 1rem;
}

.cf-card {
  width: 100%;
  max-width: 31rem;
  background: var(--cf-card);
  border-radius: var(--cf-radius-card);
  box-shadow: 0 1px 3px rgba(15, 30, 51, 0.06), 0 8px 24px rgba(15, 30, 51, 0.05);
  padding: 2.25rem 2rem 2rem;
}

/* --- header: wordmark + "1 of 3" ----------------------------------------- */

.cf-head { display: flex; justify-content: space-between; align-items: center; }
.cf-brand { height: 2.1rem; width: auto; display: block; }
.cf-count { margin: 0; font-size: 1.0625rem; color: var(--cf-heading); }
.cf-count b { font-weight: 700; }

/* --- step dots ----------------------------------------------------------- */

.cf-steps {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 1.9rem 0 2.2rem;
  padding: 0 1.75rem;
}
.cf-steps__dot {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--cf-grey-dot);
  flex: none;
}
.cf-steps__line {
  flex: 1;
  height: 3px;
  background: var(--cf-grey-dot);
}
.cf-steps__dot.is-on,
.cf-steps__line.is-on { background: var(--cf-blue); }

/* --- page copy ------------------------------------------------------------ */

.cf-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--cf-heading);
  letter-spacing: -0.01em;
}
.cf-sub {
  margin: 0.6rem 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--cf-muted);
}

.cf-note {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--cf-note-bg);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--cf-heading);
}
.cf-note__icon {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--cf-blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  font-family: Georgia, serif;
}

/* --- fields --------------------------------------------------------------- */

.cf-fields { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }

.cf-group {
  border: 1px solid var(--cf-border-soft);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cf-group__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--cf-heading); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.cf-input,
.cf-select {
  width: 100%;
  height: var(--cf-field-h);
  padding: 0 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--cf-heading);
  background: #fff;
  border: 1px solid var(--cf-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cf-input::placeholder { color: #8a94a3; }
.cf-input:focus,
.cf-select:focus { border-color: var(--cf-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.cf-select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316202e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.cf-select:invalid { color: #8a94a3; }
.cf-select option { color: var(--cf-heading); }

/* Relationship list: combobox.js, the Business Loan form's dropdown. Its list
   styles live in app.css, which this page doesn't load, so they are repeated
   here in the closing form's colours. */
.cf-combo { position: relative; }
.lc-ac {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--cf-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(22, 32, 46, 0.12);
}
.lc-ac[hidden] { display: none; }
.lc-ac__item {
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  color: var(--cf-heading);
  cursor: pointer;
}
.lc-ac__item.is-active,
.lc-ac__item:hover { background: var(--cf-note-bg); }
.lc-ac__empty { padding: 0.6rem 0.9rem; color: var(--cf-muted); cursor: default; }

/* Visually hidden, still read by screen readers: the design shows placeholders,
   not visible labels. */
.cf-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- buttons ------------------------------------------------------------- */

.cf-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: var(--cf-radius);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.cf-btn svg { width: 1.15rem; height: 1.15rem; }
.cf-btn--back {
  background: #fff;
  color: var(--cf-heading);
  border: 1px solid var(--cf-border);
}
.cf-btn--back:hover { border-color: #b9c1cc; }
.cf-btn--next {
  min-width: 11rem;
  background: var(--cf-blue);
  color: #fff;
  border: none;
}
.cf-btn--next:hover:not(:disabled) { background: var(--cf-blue-dark); }
.cf-btn--next:disabled { background: var(--cf-blue-soft); cursor: not-allowed; }
.cf-btn--navy {
  width: 100%;
  background: var(--cf-navy);
  color: #fff;
  border: none;
  height: 3.6rem;
}
.cf-btn--navy:hover:not(:disabled) { background: #232f40; }
.cf-btn--navy:disabled { opacity: 0.7; cursor: progress; }
.cf-btn:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; }

/* --- step 3: identity ---------------------------------------------------- */

.cf-id-panel {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.3rem 1.25rem;
  border-radius: 14px;
  background: var(--cf-panel-bg);
}
.cf-id-panel svg { flex: none; width: 4rem; height: 4rem; }
.cf-id-panel h2 { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 700; }
.cf-id-panel p { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--cf-muted); }
.cf-id-start { margin-top: 1.25rem; }
.cf-secure {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--cf-muted);
  font-size: 1rem;
}
.cf-secure svg { width: 1.1rem; height: 1.1rem; }

/* Trulioo renders its own screens into this element. */
.cf-sdk { margin-top: 1.5rem; min-height: 32rem; }
.cf-sdk[hidden] { display: none; }
.cf-sdk-status {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 12rem; margin-top: 1.5rem; color: var(--cf-muted); font-size: 1rem;
}
.cf-sdk-status[hidden] { display: none; }
.cf-spinner {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 3px solid #d1d5db; border-top-color: var(--cf-navy);
  animation: cf-spin 0.8s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf-spinner { animation-duration: 2.4s; } }
/* Trulioo's screens (.truliooMain) are position:absolute filling the INITIAL
   viewport, so they covered one screen-height and our longer page scrolled out
   from under them (laptop QR screen, 10 Nov 2026). Pin them to the window as a
   real full-screen layer with their own scrolling, and lock our page while one
   (or one of their modals) is open. */
.cf-sdk .truliooMain { position: fixed; inset: 0; height: auto; z-index: 1000; overflow-y: auto; }
html:has(.truliooMain), body:has(.truliooMain),
html:has(.truliooModal), body:has(.truliooModal) { overflow: hidden; }

.cf-error {
  margin: 1rem 0 0;
  color: var(--cf-error);
  font-size: 0.95rem;
}

/* --- step 4: end page ---------------------------------------------------- */

.cf-done { text-align: center; padding: 1.5rem 0 0.5rem; }
.cf-done__icon {
  width: 5rem; height: 5rem; margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: #e8f1fd;
  display: grid; place-items: center;
}
.cf-done__icon svg { width: 2.5rem; height: 2.5rem; }
.cf-done .cf-sub { margin-bottom: 1.75rem; }
.cf-done__closed { margin: 1rem 0 0; color: var(--cf-muted); }

.cf-noscript { text-align: center; padding: 2rem; }

/* Preview-only furniture (test mode, result line): dashed so it never reads as
   part of the applicant's design. */
.cf-preview { border: 1.5px dashed #b8c4d6; }
.cf-preview-note {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 1.5px dashed #b8c4d6;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--cf-muted);
  text-align: left;
  white-space: pre-line;
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 480px) {
  .cf-shell { padding: 0; }
  .cf-card { border-radius: 0; min-height: 100vh; padding: 1.75rem 1rem 1.5rem; box-shadow: none; }
  .cf-title { font-size: 1.75rem; }
  .cf-steps { padding: 0 0.75rem; }
  .cf-btn--next { min-width: 9rem; }
}