/* =====================================================================
   company-wizard.css  -  Royal . Licht restyle of the create accounting firm /
   accounting client wizard (story #875).

   Source of truth: Docs/claude-design-template/design_handoff_kantoor_aanmaken
   (mocks/Kantoor Aanmaken.dc.html, screenshots 01-10, PROMPT.md). Every value below is
   taken from the mock's inline styles; the Playwright parity run (e2e/tests/parity/
   company-wizard-parity.spec.ts) compares the rendered mock with the app, per element.

   (1) Import ONCE globally (App.razor, after dashboard-home.css and before mobile.css).
       Every selector starts with .cw (or [data-theme-mode="dark"] .cw), so nothing leaks.
   (2) The --cw-* tokens exist (precedent: contact-person-dialog.css) because the app's theme
       tokens differ from the mock's at tolerance 0: app --default-border is #f3f3f3 (mock
       #eef0f3), app --default-text-color is #333335 (mock #232427). All colours below go
       through these tokens, so the dark-mode remap at the bottom is one block.
   (3) "Inter Cw" is a scoped 800 face for the title only: inter.css loads 400-700, and
       adding 800 globally is out of scope (precedent: "Inter Ild" in invoice-line-dialog.css).
   (4) MudBlazor puts a MudTextField's Class on its ROOT element and that root carries
       .mud-input-control, so the root is matched by the COMPOUND selector
       .cw-input.mud-input-control (a descendant selector cannot match it).
   ===================================================================== */

@font-face {
  font-family: "Inter Cw";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter/Inter-800.woff2") format("woff2");
}

.cw {
  --cw-text-strong: #232427;      /* app --default-text-color is #333335 */
  --cw-text-label: #4d5663;
  --cw-text-faint: #9aa1ad;
  --cw-text-body: #2b2f36;        /* mock body colour */
  --cw-text-seg-off: #6b7280;
  --cw-placeholder: #b3b8c2;
  --cw-border: #eef0f3;           /* app --default-border is #f3f3f3 */
  --cw-field-border: #e3e7ef;
  --cw-track: #f1f3f7;
  --cw-connector: #e6ebf1;
  --cw-surface: var(--custom-white);
  --cw-footer-bg: var(--meta-bg);
  --cw-muted: var(--text-muted);
  --cw-primary: var(--primary-color);
  --cw-primary-rgb: var(--primary-rgb);
  --cw-primary-dark: rgb(29, 78, 216);
  --cw-success-rgb: 16, 158, 120;
  --cw-success-text: #0d8a69;
  --cw-danger-rgb: 220, 74, 61;
  --cw-shadow-rgb: 40, 50, 80;

  font-family: var(--default-font-family);
  font-size: 16px;               /* the mock inherits the browser default; Ynex sets body to 13px */
  line-height: normal;
  letter-spacing: normal;
  color: var(--cw-text-body);
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 26px below the app header: the layout's .main-content margin-top is 59.2px while the header is 60px high */
  padding: 26.8px 0 40px;
}

.cw *,
.cw *::before,
.cw *::after {
  box-sizing: border-box;
}

.cw a {
  color: var(--cw-primary);
  text-decoration: none;
}

.cw a:hover {
  color: var(--cw-primary-dark);
}

/* styles.css: [class^="ri-"] { display: inline-flex }. The mock's icons are plain inline <i> (blockified in a flex row). */
.cw i[class^="ri-"],
.cw i[class*=" ri-"] {
  display: inline;
}

/* ---------- header ---------- */

.cw-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cw-head-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cw-backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.cw-backlink i {
  font-size: 15px;
}

.cw-title {
  font-family: "Inter Cw", var(--default-font-family);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--cw-text-strong);
  letter-spacing: -0.4px;
}

.cw-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cw-muted);
  white-space: nowrap;
}

.cw-crumbs i {
  font-size: 15px;
}

.cw-crumb-current {
  color: var(--cw-text-label);
  font-weight: 500;
}

/* ---------- step bar ---------- */

.cw-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cw-stepbar {
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--cw-shadow-rgb), .04);
  padding: 18px 22px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.cw-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: default;
}

.cw-step.is-done.is-interactive {
  cursor: pointer;
}

.cw-step-block {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--cw-track);
  color: var(--cw-text-faint);
  box-shadow: none;
}

.cw-step-block i {
  font-size: 18px;
}

.cw-step.is-active .cw-step-block {
  background: var(--cw-primary);
  color: rgb(255, 255, 255);
  box-shadow: 0 4px 12px rgba(var(--cw-primary-rgb), .26);
}

.cw-step.is-done .cw-step-block {
  background: rgba(var(--cw-success-rgb), .1);
  color: var(--cw-success-text);
}

.cw-step-text {
  line-height: 1.25;
  white-space: nowrap;
}

.cw-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cw-text-faint);
}

.cw-step-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cw-text-faint);
}

.cw-step.is-active .cw-step-label {
  color: var(--cw-text-strong);
}

.cw-step.is-done .cw-step-label {
  color: var(--cw-text-label);
}

.cw-step-line {
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--cw-connector);
  flex: none;
}

.cw-step.is-done .cw-step-line {
  background: rgb(var(--cw-success-rgb));
}

/* ---------- step bar with 6 or more steps (#887, client wizard) ---------- */
/* One row of equal columns, number block on top, "Step N" and the label centred below it. The default .cw-stepbar rules
   above are NOT edited, so the 3 step firm bar is unchanged. */
.cw-stepbar--many {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 18px 16px;
}

.cw-stepbar--many .cw-step {
  position: relative;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

/* a label wraps at spaces and, only if one word is wider than the column, inside the word: it never leaves its column */
.cw-stepbar--many .cw-step-text {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* the connector runs from 8px right of this block to 8px left of the next block (block 34px, column gap 8px) */
.cw-stepbar--many .cw-step-line {
  position: absolute;
  top: 16px;
  left: calc(50% + 25px);
  width: calc(100% - 42px);
}

/* ---------- card ---------- */

.cw-card {
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--cw-shadow-rgb), .04);
  overflow: hidden;
}

.cw-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cw-border);
}

.cw-card-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: rgba(var(--cw-primary-rgb), .1);
  color: var(--cw-primary);
}

.cw-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cw-text-strong);
}

.cw-card-sub {
  font-size: 12px;
  color: var(--cw-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.cw-card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cw-card-body--s1 {
  gap: 20px;
}

.cw-card-body--s2 {
  gap: 18px;
}

.cw-card-body--s3 {
  gap: 16px;
}

.cw-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--cw-border);
  background: var(--cw-footer-bg);
}

.cw-foot-next {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- buttons and hint ---------- */

.cw-btn {
  font-family: inherit;
  border: none;
  cursor: pointer;
  position: static;
  display: flex;
  justify-content: normal;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  height: 40px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: normal;
}

.cw-btn-back {
  padding: 0 16px;
  background: rgba(var(--cw-primary-rgb), .10);
  color: var(--cw-primary-dark);
}

.cw-btn-back i {
  font-size: 18px;
}

.cw-btn-back:disabled {
  opacity: .5;
}

.cw-btn-primary {
  padding: 0 18px;
  background: var(--cw-primary);
  color: rgb(255, 255, 255);
  box-shadow: 0 4px 12px rgba(var(--cw-primary-rgb), .26);
}

.cw-btn-primary i {
  font-size: 17px;
}

.cw-btn-primary:disabled {
  opacity: .5;
  box-shadow: none;
}

.cw-hint {
  font-size: 12px;
  color: var(--cw-muted);
  white-space: nowrap;
}

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

.cw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cw-field--seg {
  gap: 8px;
}

.cw-label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cw-text-label);
}

.cw-req {
  color: var(--cw-primary);
  font-weight: 700;
}

.cw-field-hint {
  font-size: 11.5px;
  color: var(--cw-muted);
}

.cw-field-hint.is-error {
  color: rgb(var(--cw-danger-rgb));
}

.cw-lookup {
  position: relative;
  display: flex;
}

.cw-lookup > .cw-input {
  width: 100%;
  flex: 1;
}

.cw-lookup-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 1;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  border: none;
  background: rgba(var(--cw-primary-rgb), .1);
  color: var(--cw-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: normal;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cw-lookup-btn i {
  font-size: 14px;
}

.cw-lookup-btn:disabled {
  opacity: .5;
}

/* MudTextField reset: the root is .cw-input.mud-input-control (compound, see header note 4). */
.cw-input.mud-input-control {
  margin: 0;
}

.cw-input .mud-input {
  box-sizing: border-box;
  height: 44px;
  border: 1px solid var(--cw-field-border);
  border-radius: 9px;
  background: var(--cw-surface);
  margin: 0;
}

.cw-input .mud-input::before,
.cw-input .mud-input::after {
  display: none;
}

.cw-input .mud-input input.mud-input-root {
  box-sizing: border-box;
  height: 42px;
  padding: 0 13px !important;    /* styles.css:  .mud-input > input.mud-input-root { padding: 6px 11px 7px !important } */
  font-family: inherit;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: var(--cw-text-strong);
  outline: none;
  box-shadow: none;
}

/* styles.css: .mud-input-root { font-size: .813rem !important }. Below 992px mobile.css wins on purpose (16px, no iOS zoom). */
@media (min-width: 992px) {
  .cw-input .mud-input input.mud-input-root {
    font-size: 14px !important;
  }
}

.cw-input--kbo .mud-input input.mud-input-root {
  padding-right: 120px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

.cw-input .mud-input input.mud-input-root::placeholder {
  color: var(--cw-placeholder);
  font-weight: 400;
  opacity: 1;
}

.cw-input .mud-input:focus-within {
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 3px rgba(var(--cw-primary-rgb), .12);
}

.cw-input .mud-input.mud-input-error {
  border-color: rgb(var(--cw-danger-rgb));
}

.cw-input .mud-disabled input,
.cw-input .mud-input.mud-disabled {
  color: var(--cw-text-strong);
}

/* existing MudAlerts live inside the card body */
.cw-alert {
  margin: 0;
}

/* ---------- loading ---------- */

.cw-loading {
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cw-loading-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cw-muted);
}

.cw-loading-label i {
  font-size: 16px;
  color: var(--cw-primary);
  animation: cw-spin 1s linear infinite;
}

.cw-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  animation: cw-skel 1.2s ease-in-out infinite;
}

.cw-skel-bar {
  height: 30px;
  border-radius: 7px;
  background: var(--cw-track);
}

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

@keyframes cw-skel {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---------- result card ---------- */

.cw-result {
  border: 1px solid rgba(var(--cw-primary-rgb), .16);
  border-radius: 12px;
  overflow: hidden;
}

.cw-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(var(--cw-primary-rgb), .05);
  border-bottom: 1px solid rgba(var(--cw-primary-rgb), .12);
}

.cw-result-icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--cw-surface);
  border: 1px solid rgba(var(--cw-primary-rgb), .16);
  display: grid;
  place-items: center;
  color: var(--cw-primary);
  font-size: 19px;
}

.cw-result-main {
  flex: 1;
  min-width: 0;
}

.cw-result-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cw-text-strong);
}

.cw-result-sub {
  font-size: 12px;
  color: var(--cw-muted);
  margin-top: 1px;
}

.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(var(--cw-success-rgb), .1);
  color: var(--cw-success-text);
  font-size: 11.5px;
  font-weight: 700;
}

.cw-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--cw-success-rgb));
}

.cw-badge.is-inactive {
  background: rgba(var(--cw-danger-rgb), .1);
  color: rgb(var(--cw-danger-rgb));
}

.cw-badge.is-inactive .cw-badge-dot {
  background: rgb(var(--cw-danger-rgb));
}

.cw-result-body {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 28px;
}

.cw-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cw-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cw-border);
}

.cw-section-head i {
  font-size: 16px;
  color: var(--cw-primary);
}

.cw-section-head span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cw-text-strong);
}

.cw-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
}

.cw-row-k {
  color: var(--cw-muted);
}

.cw-row-v {
  color: var(--cw-text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cw-row-v--plain {
  font-variant-numeric: normal;
  white-space: normal;
}

.cw-row-v--multiline {
  white-space: pre-line;
}

.cw-row-note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--cw-muted);
}

.cw-source {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-top: 1px solid var(--cw-border);
  font-size: 11.5px;
  color: var(--cw-muted);
}

.cw-source i {
  font-size: 14px;
}

.cw-source.cw-source--review {
  padding: 4px 0 0;
  border-top: none;
}

/* ---------- segmented control ---------- */

.cw-seg {
  display: inline-flex;
  background: var(--cw-track);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
  align-self: flex-start;
}

.cw-seg-btn {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  position: static;
  display: flex;
  justify-content: normal;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: transparent;
  color: var(--cw-text-seg-off);
  box-shadow: none;
}

.cw-seg-btn i {
  font-size: 15px;
}

.cw-seg-btn.is-on {
  background: var(--cw-surface);
  color: var(--cw-primary);
  box-shadow: 0 1px 3px rgba(var(--cw-shadow-rgb), .12);
}

.cw-seg-btn:disabled {
  cursor: default;
  opacity: .5;
}

/* ---------- contact grid ---------- */

/* the EditForm of step 2 wraps the segmented control and the grid; it keeps the card body's column gap */
.cw-form {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.cw-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.cw-full {
  grid-column: 1 / -1;
}

/* ---------- review ---------- */

.cw-review-block {
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cw-edit-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.cw-edit-link i {
  font-size: 14px;
}

.cw-edit-link[aria-disabled="true"] {
  pointer-events: none;
  opacity: .5;
}

/* ---------- hover / focus ---------- */

.cw-btn-back:hover:not(:disabled) {
  background: rgba(var(--cw-primary-rgb), .16);
}

.cw-btn:focus-visible,
.cw-seg-btn:focus-visible,
.cw-lookup-btn:focus-visible,
.cw-step.is-interactive:focus-visible,
.cw-edit-link:focus-visible {
  outline: 2px solid rgba(var(--cw-primary-rgb), .5);
  outline-offset: 2px;
}

/* ---------- dark mode ---------- */

/* styles.css:174 defines the dark card colour as --custom-white: rgb(var(--body-bg-rgb)) with --body-bg-rgb 26, 28, 30, but
   royal-theme.css re-declares --body-bg-rgb on :root (231, 238, 251) after it and so clobbers the dark value: every card is
   light blue under data-theme-mode="dark" while the text tokens turn white. Until royal-theme.css gets a dark counterpart the
   wizard pins the surface to the intended dark card colour (the value of styles.css:166). */
[data-theme-mode="dark"] .cw {
  --cw-surface: rgb(26, 28, 30);
  --cw-text-strong: var(--default-text-color);
  --cw-text-label: var(--default-text-color);
  --cw-text-body: var(--default-text-color);
  --cw-text-faint: var(--text-muted);
  --cw-text-seg-off: var(--text-muted);
  --cw-border: var(--default-border);
  --cw-field-border: var(--default-border);
  --cw-track: rgba(255, 255, 255, .06);
  --cw-connector: rgba(255, 255, 255, .12);
  --cw-footer-bg: rgba(255, 255, 255, .03);
  --cw-placeholder: var(--text-muted);
  --cw-primary-dark: #93c5fd;
  --cw-success-text: #34d399;
}

[data-theme-mode="dark"] .cw .cw-result-icon,
[data-theme-mode="dark"] .cw .cw-seg-btn.is-on {
  background: var(--cw-surface);
}

/* ---------- narrow widths ---------- */

@media (max-width: 1279.98px) {
  /* 6 steps do not fit with every label: only the active step keeps its label (the card title also names it) */
  .cw-stepbar--many .cw-step:not(.is-active) .cw-step-text {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .cw-card-sub,
  .cw-title,
  .cw-crumbs,
  .cw-hint {
    white-space: normal;
  }

  .cw-head {
    align-items: flex-start;
  }

  /* Back and Next must share one row at every width: the wrapper dissolves so both buttons are siblings in
     .cw-card-foot, and the hint takes a full-width line of its own below them (on desktop it sits next to Next, as in the mock) */
  .cw-card-foot {
    flex-wrap: wrap;
  }

  .cw-foot-next {
    display: contents;
  }

  .cw-hint {
    flex: 0 0 100%;
    order: 3;
  }

  /* a note under a row (flex, with an icon) wraps inside the card instead of running past its edge */
  .cw-row-note,
  .cw-field-hint {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cw-row-note > i {
    flex: none;
  }

  /* a long label wraps inside its own column instead of running under the value */
  .cw-row-k,
  .cw-row-v {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 575.98px) {
  .cw-step-text {
    display: none;
  }

  .cw-step-line {
    width: 24px;
  }

  /* 6 steps on a phone: smaller blocks and gaps so the connectors stay visible (at least about 12px at 320px) */
  .cw-stepbar--many {
    padding: 14px 8px;
    gap: 2px;
  }

  .cw-stepbar--many .cw-step-block {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12.5px;
  }

  .cw-stepbar--many .cw-step-block i {
    font-size: 16px;
  }

  /* connector from 2px right of this block to 2px left of the next one (block 28px, column gap 2px) */
  .cw-stepbar--many .cw-step-line {
    top: 13px;
    left: calc(50% + 16px);
    width: calc(100% - 30px);
  }

  /* the longest submit label (en "Create Accounting Client") must still sit beside Back inside a 358px card */
  .cw-card-foot {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .cw-btn {
    gap: 4px;
    font-size: 13px;
  }

  .cw-btn-back {
    padding: 0 12px;
  }

  .cw-btn-primary {
    padding: 0 12px;
  }

  /* the result grid's 260px column minimum is wider than the card interior at 320px (256px): one shrinkable column */
  .cw-result-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* label above value: the two can never overlap on a phone */
  .cw-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* the two labels do not fit side by side at 390px: stack the segments */
  .cw-seg {
    align-self: stretch;
    flex-direction: column;
  }

  .cw-seg-btn {
    flex: 1;
    padding: 0 8px;
    justify-content: center;
  }
}

/* #875 round 4 (L2): on 320-360px phones the longest submit label ("Create Accounting Client") must stay on one line
   beside Back with the same top and height, so the two buttons shrink (tighter font, padding and gap) instead of wrapping */
@media (max-width: 360px) {
  .cw-card-foot {
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
  }

  .cw-btn {
    min-width: 0;
    gap: 3px;
    font-size: 12px;
  }

  .cw-btn-back,
  .cw-btn-primary {
    padding: 0 9px;
  }
}