/*
 * Client form system.
 *
 * This file is the final authority for customer-facing forms only. Marketing
 * uses data-scope="marketing" and the admin/moderator layouts do not expose a
 * data-page value, so their controls remain isolated from these rules.
 */
body[data-scope="app"][data-page] {
  --form-border: #cbd6de;
  --form-border-hover: #9cafbd;
  --form-border-focus: #2f668e;
  --form-fill: #ffffff;
  --form-fill-hover: #fcfdfe;
  --form-fill-disabled: #f1f4f6;
  --form-fill-invalid: #fff9fa;
  --form-ink: #10283e;
  --form-muted: #526b7e;
  --form-placeholder: #596f81;
  --form-danger: #b54a54;
  --form-ring: rgba(47, 102, 142, .13);
  --form-danger-ring: rgba(181, 74, 84, .11);
  --form-radius: 9px;
  --form-height: 46px;
}

/* Text, date, number and password controls share one restrained geometry. */
html body[data-scope="app"][data-page] main.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html body[data-scope="app"][data-page] main.page-content select,
html body[data-scope="app"][data-page] main.page-content textarea,
html body[data-scope="app"][data-page] main.page-content input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  height: var(--form-height) !important;
  min-height: var(--form-height) !important;
  margin: 0;
  padding: 11px 13px !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  color: var(--form-ink) !important;
  background-color: var(--form-fill) !important;
  box-shadow: none !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  outline: 0 !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

html body[data-scope="app"][data-page] main.page-content textarea,
html body[data-scope="app"][data-page] main.page-content textarea.input {
  height: auto !important;
  min-height: 116px !important;
  padding-block: 12px !important;
  line-height: 1.5 !important;
  resize: vertical;
}

/* Preserve a restrained chevron while replacing legacy underline selects. */
html body[data-scope="app"][data-page] main.page-content select,
html body[data-scope="app"][data-page] main.page-content select.input {
  padding-right: 42px !important;
  appearance: none;
  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='%23566b7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 16px !important;
}

html body[data-scope="app"][data-page] main.page-content input::placeholder,
html body[data-scope="app"][data-page] main.page-content textarea::placeholder {
  color: var(--form-placeholder) !important;
  opacity: 1;
}

html body[data-scope="app"][data-page] main.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
html body[data-scope="app"][data-page] main.page-content select:hover,
html body[data-scope="app"][data-page] main.page-content textarea:hover,
html body[data-scope="app"][data-page] main.page-content input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover {
  border-color: var(--form-border-hover) !important;
  background-color: var(--form-fill-hover) !important;
}

html body[data-scope="app"][data-page] main.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
html body[data-scope="app"][data-page] main.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible,
html body[data-scope="app"][data-page] main.page-content select:focus,
html body[data-scope="app"][data-page] main.page-content select:focus-visible,
html body[data-scope="app"][data-page] main.page-content textarea:focus,
html body[data-scope="app"][data-page] main.page-content textarea:focus-visible,
html body[data-scope="app"][data-page] main.page-content input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html body[data-scope="app"][data-page] main.page-content input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible {
  border-color: var(--form-border-focus) !important;
  background-color: var(--form-fill) !important;
  box-shadow: 0 0 0 3px var(--form-ring) !important;
  outline: 0 !important;
}

html body[data-scope="app"][data-page] main.page-content input:disabled,
html body[data-scope="app"][data-page] main.page-content select:disabled,
html body[data-scope="app"][data-page] main.page-content textarea:disabled,
html body[data-scope="app"][data-page] main.page-content .input:disabled,
html body[data-scope="app"][data-page] main.page-content input[readonly],
html body[data-scope="app"][data-page] main.page-content textarea[readonly] {
  border-color: #dae2e7 !important;
  color: var(--form-muted) !important;
  background-color: var(--form-fill-disabled) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}

/* Validation works with both native aria state and the project's wrappers. */
html body[data-scope="app"][data-page] main.page-content [aria-invalid="true"],
html body[data-scope="app"][data-page] main.page-content .input.is-invalid,
html body[data-scope="app"][data-page] main.page-content .is-invalid:not(.input) > input,
html body[data-scope="app"][data-page] main.page-content .is-invalid:not(.input) > select,
html body[data-scope="app"][data-page] main.page-content .is-invalid:not(.input) > textarea,
html body[data-scope="app"][data-page] main.page-content .has-error > input,
html body[data-scope="app"][data-page] main.page-content .has-error > select,
html body[data-scope="app"][data-page] main.page-content .has-error > textarea {
  border-color: var(--form-danger) !important;
  background-color: var(--form-fill-invalid) !important;
  box-shadow: 0 0 0 3px var(--form-danger-ring) !important;
}

/* Browser autofill must not resurrect the old underline or blue/yellow fill. */
html body[data-scope="app"][data-page] main.page-content input:-webkit-autofill,
html body[data-scope="app"][data-page] main.page-content input:-webkit-autofill:hover {
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  -webkit-text-fill-color: var(--form-ink) !important;
  caret-color: var(--form-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--form-fill) inset !important;
  box-shadow: 0 0 0 1000px var(--form-fill) inset !important;
  transition: background-color 9999s ease-out 0s;
}

html body[data-scope="app"][data-page] main.page-content input:-webkit-autofill:focus {
  border-color: var(--form-border-focus) !important;
  -webkit-text-fill-color: var(--form-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--form-fill) inset, 0 0 0 3px var(--form-ring) !important;
  box-shadow: 0 0 0 1000px var(--form-fill) inset, 0 0 0 3px var(--form-ring) !important;
}

/* Labels and assistance text follow the same quiet hierarchy everywhere. */
body[data-scope="app"][data-page] main.page-content .form-field,
body[data-scope="app"][data-page] main.page-content .form-row,
body[data-scope="app"][data-page] main.page-content .field,
body[data-scope="app"][data-page] main.page-content .access-form label {
  gap: 7px;
}

body[data-scope="app"][data-page] main.page-content .label,
body[data-scope="app"][data-page] main.page-content .form-field > label,
body[data-scope="app"][data-page] main.page-content .form-row > label,
body[data-scope="app"][data-page] main.page-content .field > label,
body[data-scope="app"][data-page] main.page-content .access-form label {
  color: #40596c !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4;
}

body[data-scope="app"][data-page] main.page-content .hint,
body[data-scope="app"][data-page] main.page-content .help,
body[data-scope="app"][data-page] main.page-content .loan-hint,
body[data-scope="app"][data-page] main.page-content .field-hint,
body[data-scope="app"][data-page] main.page-content .form-help,
body[data-scope="app"][data-page] main.page-content .benef-editor__hint,
body[data-scope="app"][data-page] main.page-content .file-uploader-note,
body[data-scope="app"][data-page] main.page-content .pr3-fineprint {
  margin-top: 1px !important;
  color: var(--form-muted) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body[data-scope="app"][data-page] main.page-content .field-error,
body[data-scope="app"][data-page] main.page-content .form-error,
body[data-scope="app"][data-page] main.page-content .error-box,
body[data-scope="app"][data-page] main.page-content .transfer-amount-error {
  margin-top: 6px;
  color: var(--form-danger) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.45;
}

/* Input adornments are kept inside the full field, never as an underline. */
body[data-scope="app"][data-page] main.page-content .input-wrap,
body[data-scope="app"][data-page] main.page-content .input-addon-wrap { min-width: 0; }

body[data-scope="app"][data-page] main.page-content .input-wrap > input { padding-right: 50px !important; }
body[data-scope="app"][data-page] main.page-content .input-addon-wrap > input { padding-right: 64px !important; }

body[data-scope="app"][data-page] main.page-content .input-addon {
  right: 13px;
  color: var(--form-muted);
  font-size: 11px;
  font-weight: 400;
}

/* File fields and native checks remain recognisable and accessible. */
html body[data-scope="app"][data-page] main.page-content input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--form-height) !important;
  padding: 5px !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  color: var(--form-muted) !important;
  background: var(--form-fill) !important;
  box-shadow: none !important;
  font: 400 12.5px/1.35 "IBM Plex Sans", Arial, sans-serif !important;
}

html body[data-scope="app"][data-page] main.page-content input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  padding: 7px 11px;
  border: 0;
  border-radius: 6px;
  color: var(--form-ink);
  background: #edf2f5;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

html body[data-scope="app"][data-page] main.page-content input[type="checkbox"],
html body[data-scope="app"][data-page] main.page-content input[type="radio"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 1px 0 0;
  accent-color: var(--form-border-focus);
}

/* Composite money fields own the border; their input must not create a second one. */
html body[data-scope="app"][data-page] main.page-content .transfer-money-field {
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  background: var(--form-fill) !important;
  box-shadow: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

html body[data-scope="app"][data-page] main.page-content .transfer-money-field:focus-within {
  border-color: var(--form-border-focus) !important;
  box-shadow: 0 0 0 3px var(--form-ring) !important;
}

html body[data-scope="app"][data-page] main.page-content .transfer-money-field > .transfer-money-field__input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-scope="app"] .kyc-mobile-progress { display: none; }

@media (max-width: 600px) {
  body[data-scope="app"] .kyc-stepper-row,
  body[data-scope="app"] .kyc-stepper-divider { display: none !important; }
  body[data-scope="app"] .kyc-mobile-progress { display: grid; gap: 8px; }
  body[data-scope="app"] .kyc-mobile-progress__copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #687b8b; font-size: 10.5px; }
  body[data-scope="app"] .kyc-mobile-progress__copy > span:last-child { overflow: hidden; color: #10283e; text-overflow: ellipsis; white-space: nowrap; }
  body[data-scope="app"] .kyc-mobile-progress__track { display: block; height: 2px; overflow: hidden; background: #dce5ea; }
  body[data-scope="app"] .kyc-mobile-progress__track > span { display: block; width: 25%; height: 100%; background: #2f668e; transition: width 160ms ease; }

  html body[data-scope="app"][data-page] main.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  html body[data-scope="app"][data-page] main.page-content select,
  html body[data-scope="app"][data-page] main.page-content textarea,
  html body[data-scope="app"][data-page] main.page-content input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    max-width: 100%;
    min-width: 0;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  html body[data-scope="app"][data-page] main.page-content textarea,
  html body[data-scope="app"][data-page] main.page-content textarea.input { min-height: 124px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-scope="app"][data-page] main.page-content input,
  html body[data-scope="app"][data-page] main.page-content select,
  html body[data-scope="app"][data-page] main.page-content textarea,
  body[data-scope="app"] .kyc-mobile-progress__track > span { transition: none !important; }
}