* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body {
  background-color: #fff;
  padding: 20px;
  color: #333;
}

.security-paused {
  overflow: hidden !important;
}

.security-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 28, 0.96);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.security-lock-overlay.is-active {
  display: flex;
}

.security-lock-card {
  width: 100%;
  max-width: 560px;
  background: #151d2a;
  border: 1px solid #2e3c55;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  color: #f4f7fb;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.security-lock-card h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.security-lock-card p {
  font-size: 15px;
  line-height: 1.5;
  margin: 8px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.header {
  background: linear-gradient(135deg, #f80 0%, #dd4200 100%);
  color: #fff;
  padding: 32px;
  text-align: center;
}

.header h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.header p {
  opacity: 0.9;
  font-size: 16px;
}

.form-container {
  padding: 20px;
}

.form-section {
  margin-bottom: 0;
  padding: 20px;
  border: 1px solid rgb(231, 231, 231);
  border-radius: 8px;
}

/* All steps with multiple section cards get breathing room between them */
.form-step .form-section + .form-section {
  margin-top: 20px;
}

.section-title {
  font-size: 20px;
  color: #000000;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  color: #ff8800;
}

.form-subsection-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 24px 0 14px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.form-group {
  flex: 1 1 260px;
  min-width: 0;
  margin-bottom: 20px;
}

label {
  /* inline-block, not the default inline: an inline label's bottom margin
     does not apply and its box is shorter than its 24px line-height, so a
     plain-labelled field sat a few pixels higher than one whose label lives
     in a flex .field-label-row. Block-level boxes make the two identical. */
  display: inline-block;
  margin: 0px 0px 4px 4px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.32px;
  line-height: 24px;
  text-align: start;
  color: rgb(0, 0, 0);
}

.required::after {
  content: " *";
  color: #cf2e2e;
}

/* The browser's own [hidden] rule is only `display: none` at user-agent
   level, so ANY author rule that sets display beats it and the element stays
   on screen with the attribute still set. That silently defeated the
   hidden attribute on the "Verified" badge. Restore the attribute's meaning
   once, here, rather than remembering it at every call site. */
[hidden] {
  display: none !important;
}

input,
select,
textarea {
  width: 100%;
  background-color: rgb(231, 231, 231);
  border: 2px solid rgb(231, 231, 231);
  border-radius: 8px;
  margin: 0px;
  padding: 8px 16px;
  outline: none;

  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.32px;
  line-height: 24px;
  text-align: start;
  color: rgb(0, 0, 0);

  transition:
    background 0.3s ease,
    color 0.3s ease;
}
/* The browser's own arrow differs from one system to the next. Every
   select draws the chevron the search pickers use (Font Awesome's
   chevron-down, as an SVG, since a background cannot use the icon font),
   same size, same colour, same distance from the edge. */
select {
  padding: 8px 40px 8px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%233c3c3c' d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: auto 12px;
  cursor: pointer;
}
select:disabled {
  cursor: not-allowed;
}

/* One height for every single-line control. Without this, selects (their
   padding used to differ), date inputs (native chrome adds its own space)
   and text inputs all landed at slightly different heights, so fields
   sitting side by side in one row never quite lined up. Textareas are the
   deliberate exception. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  height: 44px;
}

/* Title options come from the CSE API as-is (MR., MRS., REV., …); this only
   changes how they're displayed, not the stored value. */
#Title,
#Title option {
  text-transform: capitalize;
}

input:focus,
select:focus,
textarea:focus {
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(231, 231, 231);

  color: rgb(6, 6, 6);
}

/* Field-level error: show below field, highlight input */
.form-group.field-error input,
.form-group.field-error select,
.form-group.field-error textarea {
  border-color: rgba(207, 46, 46, 1);
  background-color: rgba(207, 46, 46, 0.08);
}

.form-group .field-error-message {
  display: none;
  font-family: "DM Sans", sans-serif;
  color: rgba(207, 46, 46, 1);
  font-size: 12px;
  margin: 4px 0px 0px 4px;
  font-weight: 500;
}

.form-group.field-error .field-error-message {
  display: block;
}

/* Legacy error-message support (for existing markup) */
.error-message {
  display: none;
  color: rgba(207, 46, 46, 1);

  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.15px;
  line-height: 24px;
  margin-left: 0px 0px 8px 8px;
}

.field-error .error-message {
  display: block;
}

.field-error input,
.field-error select,
.field-error textarea {
  border-color: rgba(207, 46, 46, 1);
  background-color: rgba(207, 46, 46, 0.08);
}

/* Resubmit mode: every field is locked; only the Documents step stays live
   (see applyResubmitFieldRestriction() in form_scripts.php). Inputs are
   already grey by default here, so a darker shade plus a muted label is
   what actually reads as "locked" rather than just "unfocused". */
.form-group.is-locked input,
.form-group.is-locked select,
.form-group.is-locked textarea {
  background-color: rgb(219, 219, 219);
  color: rgb(120, 120, 120);
  cursor: not-allowed;
}
.form-group.is-locked input:focus,
.form-group.is-locked select:focus,
.form-group.is-locked textarea:focus {
  background-color: rgb(219, 219, 219);
  border-color: rgb(219, 219, 219);
}
.form-group.is-locked label {
  color: #7f8c8d;
}
.form-group.is-locked .radio-group,
.form-group.is-locked .checkbox-group {
  opacity: 0.6;
  pointer-events: none;
}
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 5px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
}

.radio-option input,
.checkbox-option input {
  width: auto;
  margin-right: 8px;
}

.employment-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px 20px;
}

.sources-funds-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px 24px;
}

.mode-transactions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 24px;
}

.form-note {
  font-size: 13px;
  color: #7f8c8d;
  margin-top: 5px;
  font-style: italic;
}

.char-counter {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 4px;
  text-align: right;
}
.char-counter-near-limit {
  color: #cf2e2e;
  font-weight: 600;
}

.phone-input-group {
  display: flex;
  align-items: stretch;
}

/* ── Searchable phone-country picker ─────────────────────────── */
.phone-picker {
  position: relative;
  flex: 0 0 auto;
}

/* The code is the start of the number, so it is set like the number: the
   inputs' type and left padding. A thin line between them shows where the
   code ends. */
.phone-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 8px 12px 8px 16px;
  background: rgb(231, 231, 231);
  border: 2px solid rgb(231, 231, 231);
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 24px;
  white-space: nowrap;
  min-width: 88px;
  color: rgb(0, 0, 0);
  transition: background 0.15s;
}
.phone-picker-btn:hover {
  background: rgb(220, 220, 220);
}

/* Local Individual: the mobile dialling code is pinned to +94 (the OTP goes
   there and only a Sri Lankan number can receive it). The flag and code stay
   visible; only the ability to change them goes. */
.phone-picker-locked .phone-picker-btn,
.phone-picker-locked .phone-picker-btn:hover {
  cursor: default;
  background: rgb(231, 231, 231);
}
/* Hidden but still taking its room, so this code is as wide as the one on
   the Telephone field and the two numbers start in line. */
.phone-picker-locked .pp-arrow { visibility: hidden; }
/* A locked number on the confirmation page: the code is greyed out with it. */
.form-group.is-locked .phone-picker-btn,
.form-group.is-locked .phone-picker-btn:hover {
  background-color: rgb(219, 219, 219);
  color: rgb(120, 120, 120);
  cursor: not-allowed;
}
.phone-picker-btn[aria-expanded="true"] {
  background: rgb(255, 255, 255);
}
/* Typing in the number whitens the whole field, code included, the way a
   focused input does. */
.phone-input-group:has(input[type="tel"]:focus) .phone-picker:not(.phone-picker-locked) .phone-picker-btn {
  background: rgb(255, 255, 255);
}

/* Ensure custom country-code picker shows required/error state like the tel input */
.form-group.field-error .phone-picker-btn,
.field-error .phone-picker-btn {
  border-color: rgba(207, 46, 46, 1);
  background-color: rgba(207, 46, 46, 0.08);
}

.pp-display {
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
/* One chevron on every dropdown (phone codes, advisor, the searchable
   selects), turned over while its list is open. The * rule would set the
   icon itself to 16px. */
.pp-arrow {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: rgb(60, 60, 60);
  transition: transform 0.2s ease;
}
.pp-arrow i {
  font-size: 12px;
  line-height: 1;
}
.phone-picker-btn[aria-expanded="true"] .pp-arrow {
  transform: rotate(180deg);
}
/* Greyed out with the rest of a locked or disabled field. */
.phone-picker-btn:disabled .pp-arrow,
.form-group.is-locked .pp-arrow {
  color: inherit;
}

.phone-picker-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  width: 280px;
  overflow: hidden;
}

.pp-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  outline: none;
  background: #fafafa;
}
.pp-search:focus {
  background: #fff;
}

.pp-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pp-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background 0.1s;
}
.pp-list li:hover {
  background: #f0f4ff;
}
.pp-list li.pp-active {
  background: #e6eeff;
  font-weight: 600;
}
.pp-list li .pp-flag {
  font-size: 18px;
  line-height: 1;
}
.pp-list li .pp-name {
  flex: 1;
}
.pp-list li .pp-code {
  color: #666;
  font-size: 13px;
}
.pp-list li.pp-no-result {
  color: #999;
  pointer-events: none;
}

.phone-input-group input[type="tel"] {
  flex: 1;
  border-radius: 0 8px 8px 0;
  border-left: none;
  padding-left: 12px;
  width: auto;
}

@media (max-width: 480px) {
  .phone-picker-drop {
    width: calc(100vw - 32px);
  }
}

/* ========== Search picker as a form field (Investment Advisor) ==========
   assets/js/search_picker.js reuses the phone picker's parts, so these
   rules restyle them to match the form's own inputs and selects. All
   scoped to .pp-field, so the phone pickers above are untouched. */
.pp-picker {
  position: relative;
}

.pp-field .phone-picker-btn {
  width: 100%;
  min-width: 0;
  height: 44px;
  box-shadow: none;
  gap: 8px;
  padding: 8px 16px;
  background-color: rgb(231, 231, 231);
  border: 2px solid rgb(231, 231, 231);
  border-radius: 8px;
  outline: none;
  text-align: left;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: rgb(0, 0, 0);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.pp-field .phone-picker-btn:focus,
.pp-field .phone-picker-btn[aria-expanded="true"] {
  background-color: rgb(255, 255, 255);
  color: rgb(6, 6, 6);
}
.form-group.field-error .pp-field .phone-picker-btn {
  border-color: rgba(207, 46, 46, 1);
  background-color: rgba(207, 46, 46, 0.08);
}
.pp-field .phone-picker-btn:disabled,
.form-group.is-locked .pp-field .phone-picker-btn {
  background-color: rgb(219, 219, 219);
  color: rgb(120, 120, 120);
  cursor: not-allowed;
}

/* A long advisor name is cut with an ellipsis rather than wrapping the
   button onto a second line. The global * rule would force 16px on the
   span, and .pp-display sets 14px for the phone pickers: inherit instead. */
.pp-field .pp-display {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}

/* As wide as the field, and immune to the phone picker's small-screen
   width rule above. */
.pp-field .phone-picker-drop {
  right: 0;
  width: auto;
}

/* 16px also stops iOS Safari zooming the page when the box takes focus. */
.pp-field .pp-search {
  font-size: 16px;
}
/* The field-error input rule would otherwise tint the search box red too. */
.form-group.field-error .pp-field .pp-search {
  border-color: #e8e8e8;
  background-color: #fafafa;
}
.form-group.field-error .pp-field .pp-search:focus {
  border-color: rgb(231, 231, 231);
  background-color: #fff;
}

.pp-field .pp-list li {
  font-size: 16px;
}
.pp-field .pp-list li .pp-name {
  font-size: inherit;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The row the arrow keys are on. */
.pp-field .pp-list li.pp-focus {
  background: #f0f4ff;
  box-shadow: inset 3px 0 0 #ff8800;
}
.pp-field .pp-list li.pp-active.pp-focus {
  background: #e6eeff;
}

/* Date of birth spelled out ("15 January 1990") under the MM / DD / YYYY
   box, so someone used to typing the day first notices the order. Empty
   until the date is complete, and takes no space then. The expiry dates
   use the same line (.date-words). */
.dob-words,
.date-words {
  font-size: 13px;
  line-height: 20px;
  color: #7f8c8d;
}
.dob-words:not(:empty),
.date-words:not(:empty) {
  margin-top: 5px;
}

/* ========== Searchable selects, date fields and their calendar ==========
   District, country, nationality, bank and branch: SearchPicker.fromSelect()
   (assets/js/search_picker.js) hides the real <select> and puts a .pp-field
   picker straight after it, so they look and behave like the advisor field.
   Dates: the typed box with a calendar button inside its right end, and the
   popup from assets/js/calendar_picker.js (which lives on <body>). */
.pp-native-select {
  display: none !important;
}

/* Set by search_picker.js when the list would be cut off below. */
#cdsAccountForm .pp-picker .phone-picker-drop {
  position: relative;
  top: auto;
  bottom: auto;
  margin-top: 4px;
}

.pp-picker.pp-drop-up .phone-picker-drop {
  top: auto;
  bottom: calc(100% + 4px);
}

.date-field {
  position: relative;
}

.date-field .date-field-input {
  padding-right: 52px;
}

.date-field-cal {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgb(60, 60, 60);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.date-field-cal i {
  font-size: 17px;
}
.date-field-cal:hover,
.date-field-cal[aria-expanded="true"] {
  background: rgb(218, 218, 218);
  color: #dd4200;
}
.date-field-cal:focus-visible {
  outline: 2px solid #ff8800;
  outline-offset: 0;
}
.date-field-cal:disabled,
.date-field-cal:disabled:hover {
  background: transparent;
  color: rgb(160, 160, 160);
  cursor: not-allowed;
}

.date-cal {
  position: absolute;
  z-index: 1200;
  width: 296px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
}

.date-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.date-cal-selects {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  min-width: 0;
}

/* The global select rule makes every select full width and 44px tall. */
.date-cal select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 36px;
  padding: 4px 26px 4px 8px;
  background-position: right 9px center;
  background-size: auto 10px;
  font-size: 15px;
  line-height: 20px;
  background-color: #f3f3f5;
  border: 1px solid #e2e2e6;
  border-radius: 8px;
  cursor: pointer;
}
.date-cal select:focus {
  background-color: #fff;
  border-color: #ff8800;
}
.date-cal .date-cal-month {
  flex-basis: 58%;
}

.date-cal-nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #374151;
  cursor: pointer;
}
.date-cal-nav i {
  font-size: 13px;
}
.date-cal-nav:hover {
  background: #f3f3f5;
  color: #dd4200;
}
.date-cal-nav:disabled,
.date-cal-nav:disabled:hover {
  background: transparent;
  color: #c7c7cc;
  cursor: not-allowed;
}

/* Read out by screen readers when the month changes, never shown. */
.date-cal-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.date-cal-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.date-cal-grid th {
  padding: 4px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}
.date-cal-grid td {
  padding: 2px;
  text-align: center;
}

.date-cal-day {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
}
.date-cal-day:hover {
  background: #fff4e6;
}
.date-cal-day.is-today {
  box-shadow: inset 0 0 0 1px #ff8800;
  font-weight: 600;
}
.date-cal-day.is-selected,
.date-cal-day.is-selected:hover {
  background: #ff8800;
  box-shadow: none;
  color: #fff;
  font-weight: 600;
}
.date-cal-day[aria-disabled="true"],
.date-cal-day[aria-disabled="true"]:hover {
  background: transparent;
  color: #c7c7cc;
  cursor: not-allowed;
}
.date-cal-nav:focus-visible,
.date-cal-day:focus-visible {
  outline: 2px solid #ff8800;
  outline-offset: 1px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eaeaea;
}

.btn {
  background-color: rgb(255, 136, 0);
  border: 2px solid rgb(255, 136, 0);
  border-radius: 16px;
  color: rgb(255, 255, 255);
  fill: rgb(255, 255, 255);
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.64px;
  line-height: 24px;
  padding: 8px 14px;
  position: relative;
  text-decoration: none;
}
.btn::before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.btn::after {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn:hover::before {
  opacity: 0;
}
.btn:hover::after {
  opacity: 1;
}

.btn-submit {
  background-color: #2ecc71;
  /* .btn's border is the orange one. Without this the green button keeps
     an orange outline. */
  border-color: #2ecc71;
  color: white;
}

.btn-submit:hover {
  background-color: #27ae60;
  border-color: #27ae60;
}

.btn-submit .btn-text,
.btn-submit .btn-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-submit .btn-loader i {
  margin-right: 6px;
}

.btn-submit.btn-loading,
.btn-submit:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.btn-reset {
  background-color: #e74c3c;
  color: white;
}

.btn-reset:hover {
  background-color: #c0392b;
}

.btn-danger {
  background: #e74c3c;
  color: #fff;
  border-radius: 16px;
  border-color: #e74c3c;
}

.conditional-field {
  display: none;
  padding: 16px 0 0 0;
  border: none;
  border-top: 1px solid rgb(231, 231, 231);
  border-radius: 0;
  margin-top: 4px;
}

.conditional-field.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.fatca-citizenship-row {
  align-items: flex-start;
}

.fatca-citizenship-col {
  display: flex;
  flex-direction: column;
}

.fatca-citizenship-col .conditional-field {
  margin-top: 8px;
  width: 100%;
}

.fatca-details-item,
.dual-citizenship-item {
  flex: 1 1 auto;
  padding: 0;
  margin-bottom: 12px;
}

.fatca-details-item-last,
.dual-citizenship-item-last {
  margin-bottom: 0;
}

.fatca-checkbox-row {
  margin-top: 6px;
}

.fatca-download-wrap {
  margin-top: 10px;
}

.pep-specify-wrap {
  display: none;
  margin-top: 10px;
}

.pep-specify-wrap.active {
  display: block;
}

.progress-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
}

.progress {
  height: 100%;
  background: #ff8800;
  width: 0%;
  transition: width 0.5s ease;
}

/* Status: API/submit results only (validation errors show below each field) */
.status-message {
  padding: 14px 18px;
  border-radius: 6px;
  margin: 0 0 24px 0;
  display: none;
  font-size: 14px;
}

.status-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.upload-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
}

.upload-section > p {
  margin-bottom: 16px;
}

.upload-btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
}

.upload-btn:hover {
  background-color: #2980b9;
}

.existing-id-image {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #d6e4f0;
  background: #f0f7fc;
  border-radius: 8px;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
}

.existing-id-image-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #c7d6e5;
  background: #fff;
  display: block;
}

.existing-id-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.existing-id-image-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  min-width: 0;
}

.existing-id-image-status {
  font-size: 13px;
  font-weight: 600;
  color: #1f6f43;
}

.existing-id-image-status i {
  margin-right: 4px;
}

.existing-id-image-hint {
  font-size: 12px;
  color: #6b7280;
}

.existing-id-image.is-replacing {
  background: #fff7ed;
  border-color: #fed7aa;
  opacity: 0.85;
}

.existing-id-image.is-replacing .existing-id-image-status {
  color: #b45309;
}

/* Step Navigation */
.step-navigation {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
  padding: 0 20px;
  position: relative;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 4px 0;
}
/*
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #ddd;
    z-index: 1;
}

.step.active:not(:last-child)::after {
    background: #2ecc71;
}
*/
.step i {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #e7e7e7;
  color: #3d3d3d;
  font-weight: bold;
  position: relative;
  z-index: 2;
  font-size: 18px;
}

.step.active i,
.step.completed i {
  background: #ff8800;
  color: #ffffff;
}

/* Form Steps */
.form-steps-container {
  position: relative;
}

.form-step {
  display: none;
  animation: fadeIn 0.5s ease;
}

.form-step.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step Buttons */
.step-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(231, 231, 231);
}

.step-buttons .btn-next {
  margin-left: auto;
}

/*
.btn-prev {
    background-color: #95a5a6;
    color: white;
}

.btn-prev:hover {
    background-color: #7f8c8d;
}

.btn-next {
    background-color: #3498db;
    color: white;
}

.btn-next:hover {
    background-color: #2980b9;
}
*/

/* Enhanced Dropdown */
.enhanced-dropdown {
  position: relative;
}

.searchable-dropdown {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  background: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.searchable-dropdown::after {
  content: "▼";
  font-size: 12px;
  color: #666;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dropdown-options.active {
  display: block;
}

.dropdown-search {
  padding: 10px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
}

.dropdown-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.dropdown-options-list {
  max-height: 250px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 10px 15px;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-option:hover {
  background: #f5f5f5;
}

.dropdown-option.selected {
  background: #3498db;
  color: white;
}

@media (max-width: 768px) {
  body {
    padding: 0;
  }

  .container {
    border-radius: 0;
    box-shadow: none;
  }

  .header {
    padding: 20px 16px;
  }

  .header h1 {
    font-size: 20px;
  }

  .header p {
    font-size: 14px;
  }

  .step-navigation {
    padding: 0 8px;
    margin: 12px 0;
  }

  .step i {
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
  }

  .section-title {
    font-size: 17px;
  }

  .form-group {
    flex: 1 0 100%;
  }

  .fatca-citizenship-col .conditional-field {
    margin-top: 6px;
  }

  .phone-input-group input[type="tel"] {
    min-width: 0;
  }

  .form-section {
    padding: 16px;
  }

  .form-container {
    padding: 12px;
  }

  .employment-status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sources-funds-grid {
    grid-template-columns: 1fr;
  }

  .mode-transactions-grid {
    grid-template-columns: 1fr;
  }

  .step-buttons {
    margin-top: 12px;
    padding-top: 12px;
  }

  .btn {
    font-size: 15px;
    padding: 10px 16px;
  }

  .consent-gate-dialog {
    max-height: 90vh;
  }

  .consent-gate-scroll {
    padding: 20px;
  }

  .consent-gate-footer {
    padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 17px;
  }

  .header p {
    font-size: 13px;
  }

  .step i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }

  .section-title {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .employment-status-grid {
    grid-template-columns: 1fr;
  }

  .sources-funds-grid {
    grid-template-columns: 1fr;
  }

  .mode-transactions-grid {
    grid-template-columns: 1fr;
  }

  .form-section {
    padding: 14px 12px;
  }

  .form-container {
    padding: 10px;
  }

  .supporting-docs-grid {
    grid-template-columns: 1fr;
  }

  .consent-gate-overlay {
    padding: 12px;
  }

  .consent-agreement-content h2 {
    font-size: 17px;
  }
}

/* Submission progress modal (CDS account creation) */
.submission-progress-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}

.submission-progress-overlay.is-open {
  display: flex;
}

.submission-progress-dialog {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.submission-progress-spinner {
  font-size: 40px;
  color: #ff8800;
  margin-bottom: 20px;
}

.submission-progress-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.submission-progress-warning {
  font-size: 15px;
  color: #5a6c7d;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.submission-progress-status {
  font-size: 14px;
  font-weight: 600;
  color: #dd4200;
  margin: 0;
}

/* ========== Thank-you page ========== */
.thankyou-panel {
  max-width: 620px;
  margin: 0 auto;
  padding: 8px 0 12px;
  text-align: center;
}

.thankyou-tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #eafaf0;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .thankyou-tick {
    animation: thankyouTickIn .45s cubic-bezier(.2, .9, .3, 1.3) both;
  }
}

@keyframes thankyouTickIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

.thankyou-title {
  font-size: 21px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 10px;
  line-height: 1.35;
}

.thankyou-lead {
  font-size: 15px;
  line-height: 1.6;
  color: #5a6c7d;
  margin: 0 0 28px;
}

.thankyou-next-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #dd4200;
  margin: 0 0 14px;
}

.thankyou-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}

.thankyou-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 10px;
  border: 1px solid rgb(231, 231, 231);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

.thankyou-step-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff4e6;
  color: #dd4200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.thankyou-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: #7f8c8d;
  margin: 0;
}

/* ========== Email verification gate ========== */
.email-verify-open {
  overflow: hidden !important;
}

.email-verify-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9996;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.email-verify-overlay.is-open {
  display: flex;
  opacity: 1;
}

.email-verify-overlay.is-open.is-closing {
  opacity: 0;
}

.email-verify-dialog {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  text-align: center;
  transform: scale(0.96);
  transition: transform 0.22s ease;
}

.email-verify-overlay.is-open .email-verify-dialog {
  transform: scale(1);
}

.email-verify-overlay.is-open.is-closing .email-verify-dialog {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .email-verify-overlay,
  .email-verify-dialog {
    transition: none;
  }
}

.email-verify-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.email-verify-body {
  font-size: 15px;
  color: #5a6c7d;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.email-verify-code-input {
  width: 100%;
  margin: 0 0 12px;
  display: block;
  /* Same reasoning as .cv-code: the caret belongs at the start, and the
     padding starts the six digits where a centred code begins, so the box
     can be as wide as the button under it. */
  text-align: left;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 8px;
  padding: 0 8px 0 calc(50% - 3ch - 20px);
  border: 2px solid rgb(231, 231, 231);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
}

.email-verify-error {
  color: rgba(207, 46, 46, 1);
  font-size: 13px;
  margin: 0 0 14px 0;
}

.email-verify-dialog .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.email-verify-resend {
  background: none;
  border: none;
  color: #ff8800;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px;
}

.email-verify-resend:disabled {
  color: #8e8e93;
  cursor: not-allowed;
}

.email-verify-hint {
  font-size: 13px;
  color: #7f8c8d;
  margin: 10px 0 0 0;
}

/* Shown on a reviewer's "please check this" link, where the applicant can
   send their details back but cannot submit them to CSE. */
.review-only-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
}
.review-only-banner i { margin-top: 3px; }

/* ========== Verify link beside the email / mobile labels ========== */
/* A row so the link sits after the label's own red asterisk (which is a
   ::after on .required, and would otherwise land after the link). */
.field-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  /* 4px, matching a bare label's bottom margin exactly. This row wraps the
     labels that carry a Verify link (Email, Mobile); at 8px their inputs sat
     4px lower than the plain-labelled field beside them in the same row. */
  margin-bottom: 4px;
}
.field-label-row label { margin-bottom: 0; }

.verify-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #ff8800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.verify-link:hover { color: #dd4200; }
.verify-link:focus-visible { outline: 2px solid #ff8800; outline-offset: 3px; border-radius: 3px; }

.verify-done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  animation: cvVerifiedIn .32s cubic-bezier(.2, .9, .3, 1.4) both;
}
@keyframes cvVerifiedIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
input.is-verified { border-color: #86efac; background-color: #f6fefa; }

/* ========== Confirm-your-contact popup ========== */
.cv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 20, 28, .55);
  opacity: 0;
  transition: opacity .24s ease;
}
/* Two stages on purpose. Flipping display and opacity in the same frame means
   the browser never sees the starting state, so the transition is skipped and
   the popup just appears. is-open lays it out, then is-shown (added on the
   next frame) is what actually animates. */
.cv-overlay.is-open { display: flex; }
.cv-overlay.is-shown { opacity: 1; }
@supports (backdrop-filter: blur(3px)) {
  .cv-overlay.is-shown { backdrop-filter: blur(3px); }
}

.cv-dialog {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 26px 24px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
  transform: translateY(14px) scale(.94);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.25), opacity .2s ease;
}
.cv-overlay.is-shown .cv-dialog { transform: translateY(0) scale(1); opacity: 1; }
/* Closing runs the same motion backwards rather than vanishing outright:
   is-shown comes off, the transition plays, then is-open goes. */

.cv-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #b8b8bd;
  cursor: pointer;
  transition: color .15s ease;
}
.cv-close:hover { color: #6b7280; }

.cv-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fff4e6;
  color: #dd4200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  animation: cvIconIn .4s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes cvIconIn {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.cv-title { margin: 0 0 6px; font-size: 19px; color: #1f2937; }
.cv-sub { margin: 0 0 18px; font-size: 14px; color: #6b7280; line-height: 1.5; }
.cv-sub strong { color: #1f2937; word-break: break-word; }

/* As wide and as tall as the Confirm button under it: at 220px wide and
   left aligned, the box and its digits sat off centre against the
   full-width button. (The height is the global 44px input rule.) */
.cv-code {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  /* Left aligned, not centred: an empty centred box puts the caret in the
     middle of nowhere, which reads as though the field is already filled.
     The left padding starts the six digits where a centred code would
     begin (half of 6 digits plus 5 gaps before the middle; the % is of
     this box's own width, it fills its container), so the caret starts
     at the first digit and a full code sits in the middle. */
  padding: 0 12px 0 calc(50% - 3ch - 22.5px);
  border: 1px solid #d7d7dc;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 9px;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cv-code:focus {
  outline: none;
  border-color: #ff8800;
  box-shadow: 0 0 0 3px rgba(255, 136, 0, .16);
}
.cv-code.is-wrong {
  border-color: #cf2e2e;
  animation: cvShake .38s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes cvShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.cv-msg { min-height: 18px; margin: 0 0 14px; font-size: 13px; color: #7f8c8d; }
/* No message, no gap: the empty line left a hole between the address and
   the button that the space under the button did not match. */
.cv-msg:empty { min-height: 0; margin: 0; }
.cv-msg.is-error { color: #c0392b; }
.cv-msg.is-ok { color: #15803d; }

.cv-confirm { width: 100%; margin-bottom: 10px; }
.cv-hint { margin: 0; font-size: 12.5px; color: #9a9aa0; }
.cv-confirm:disabled { opacity: .65; cursor: not-allowed; }
.cv-resend {
  background: none;
  border: none;
  font-size: 13px;
  color: #7f8c8d;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
.cv-resend:disabled { color: #b8b8bd; cursor: not-allowed; text-decoration: none; }

/* Success state, swapped in where the code entry was. */
.cv-success { padding: 6px 0 2px; animation: cvFadeUp .3s ease both; }
@keyframes cvFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cv-success p { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: #15803d; }
.cv-success-tick {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  animation: cvTickPop .45s cubic-bezier(.2, .9, .3, 1.5) both;
}
@keyframes cvTickPop {
  0%   { opacity: 0; transform: scale(.3); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* Anyone who has asked for less motion gets the states without the movement. */
@media (prefers-reduced-motion: reduce) {
  .cv-overlay, .cv-dialog, .cv-icon, .cv-success, .cv-success-tick,
  .verify-done, .cv-code.is-wrong {
    transition-duration: .01ms !important;
    animation: none !important;
  }
  .cv-overlay.is-open .cv-dialog { transform: none; }
}

body.cv-open { overflow: hidden; }

/* ========== Two-channel verification (email + mobile) ========== */
.verify-channel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  text-align: left;
}
.verify-channel.is-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.verify-channel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}
.verify-channel-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #eef2ff;
  color: #3730a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.verify-channel.is-done .verify-channel-icon { background: #dcfce7; color: #15803d; }
.verify-channel-label { flex: 1 1 auto; word-break: break-word; }
.verify-channel-done {
  color: #15803d;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.verify-channel-body { margin-top: 12px; text-align: center; }
.verify-channel.is-done .verify-channel-body { display: none; }
/* The dialog can now be tall enough to need scrolling on a short screen. */
.email-verify-dialog { max-height: 92vh; overflow-y: auto; }

/* Inline field error, used for the "must be a Sri Lankan mobile" rule. */
.field-inline-error {
  color: #c0392b;
  font-size: 13px;
  margin: 6px 0 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.35;
}
.field-inline-error i { margin-top: 2px; }
input.has-inline-error,
input.has-inline-error:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

/* ========== Report-an-issue gate (resubmit mode) ========== */
.flag-issue-open {
  overflow: hidden !important;
}

.flag-issue-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9996;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.flag-issue-overlay.is-open {
  display: flex;
  opacity: 1;
}

.flag-issue-overlay.is-open.is-closing {
  opacity: 0;
}

.flag-issue-dialog {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  text-align: left;
  transform: scale(0.96);
  transition: transform 0.22s ease;
}

.flag-issue-overlay.is-open .flag-issue-dialog {
  transform: scale(1);
}

.flag-issue-overlay.is-open.is-closing .flag-issue-dialog {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .flag-issue-overlay,
  .flag-issue-dialog {
    transition: none;
  }
}

.flag-issue-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.flag-issue-body {
  font-size: 14px;
  color: #5a6c7d;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.flag-issue-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 2px solid rgb(231, 231, 231);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}

.flag-issue-error {
  color: rgba(207, 46, 46, 1);
  font-size: 13px;
  margin: 0 0 14px 0;
}

.flag-issue-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ========== Consent agreement gate ========== */
.consent-gate-open {
  overflow: hidden !important;
}

.consent-gate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9995;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.consent-gate-overlay.is-open {
  display: flex;
  opacity: 1;
}

.consent-gate-overlay.is-open.is-closing {
  opacity: 0;
}

.consent-gate-dialog {
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.22s ease;
}

.consent-gate-overlay.is-open .consent-gate-dialog {
  transform: scale(1);
}

.consent-gate-overlay.is-open.is-closing .consent-gate-dialog {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .consent-gate-overlay,
  .consent-gate-dialog {
    transition: none;
  }
}

.consent-gate-scroll {
  overflow-y: auto;
  padding: 28px 32px;
  flex: 1 1 auto;
}

.consent-gate-footer {
  flex: 0 0 auto;
  padding: 18px 32px;
  border-top: 1px solid rgb(231, 231, 231);
  background: #fafafa;
}

.consent-gate-hint {
  font-size: 13px;
  color: #7f8c8d;
  margin: 0 0 10px 0;
}

/* One bordered box per declaration, sitting close together: the rows read as
   a checklist rather than as paragraphs adrift on the page. The border is a
   full 1px outline in a shade barely off the card behind it, so it groups
   each line without drawing attention to itself. */
.consent-gate-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid #e9e9ec;
  border-radius: 8px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.consent-gate-checkbox-row input {
  width: auto;
  margin-top: 3px;
  accent-color: #dd4200;
  cursor: pointer;
}

.consent-gate-checkbox-row label {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
}

/* The required marker. An asterisk on its own is easy to skim past, so it
   carries a little colour and sits tight against the sentence it belongs
   to; when the row is called out as missing it grows and pulses once. */
.consent-required-star {
  display: inline-block;
  margin-left: 3px;
  color: #dd4200;
  font-weight: 700;
  transform-origin: center;
}

/* A box the applicant still has to tick, called out after they tried to
   move past it. The border stays 1px like every other row; the ring around
   it is what carries the callout, since recolouring a hairline on its own is
   easy to miss when you are looking somewhere else on the page. */
.consent-gate-checkbox-row.is-missing {
  background: #fff4ec;
  border-color: #dd4200;
  box-shadow: 0 0 0 3px rgba(221, 66, 0, 0.15);
}

.consent-gate-checkbox-row.is-missing label {
  color: #1f2937;
}

.consent-gate-checkbox-row.is-missing .consent-required-star {
  font-size: 17px;
}

@media (prefers-reduced-motion: no-preference) {
  .consent-gate-checkbox-row.is-missing {
    animation: consentMissingPulse .9s ease-out 1;
  }

  .consent-gate-checkbox-row.is-missing .consent-required-star {
    animation: consentStarPop .5s cubic-bezier(.2, .9, .3, 1.4) 1;
  }
}

@keyframes consentMissingPulse {
  0%   { background: #ffd9c2; box-shadow: 0 0 0 6px rgba(221, 66, 0, 0.26); }
  100% { background: #fff4ec; box-shadow: 0 0 0 3px rgba(221, 66, 0, 0.15); }
}

@keyframes consentStarPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* Ticked: the row settles back to plain, so what is left undone stands out. */
.consent-gate-checkbox-row.is-done .consent-required-star {
  color: #15803d;
}

.consent-gate-footer .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.consent-gate-footer .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Legal document typography — everything below is reset by the universal
   `* { margin:0; padding:0; }` rule at the top of this file, so headings,
   paragraphs, lists and rules all need explicit spacing here. */
.consent-agreement-content h2 {
  font-size: 19px;
  font-weight: 700;
  color: #2c3e50;
  text-align: center;
  margin: 0 0 18px 0;
  line-height: 1.4;
}

.consent-agreement-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #dd4200;
  margin: 20px 0 8px 0;
}

.consent-agreement-content h3:first-of-type {
  margin-top: 0;
}

.consent-agreement-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px 0;
}

.consent-agreement-content ul {
  margin: 0 0 10px 20px;
  padding: 0;
}

.consent-agreement-content li {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 4px;
}

.consent-agreement-content strong {
  /* The site's own `* { font-size: 16px; font-weight: 400; }` reset applies
     directly to every element, <strong> included, so without this it
     ignores the 14px surrounding it (in .consent-agreement-content p/li, or
     the checkbox row's label) and renders both bigger and lighter than the
     text around it. */
  font-weight: 700;
  font-size: inherit;
}

.consent-agreement-content hr {
  border: none;
  border-top: 1px solid rgb(231, 231, 231);
  margin: 20px 0;
}

/* ========== Terms, Conditions & Declarations (final step) ========== */
.agreements-intro {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px 0;
}

.agreements-help {
  font-size: 13px;
  color: #7f8c8d;
  margin: 0 0 18px 0;
}

.agreements-help i {
  margin-right: 4px;
}

.agreements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agreement-item {
  border: 1px solid rgb(231, 231, 231);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.agreement-item.agreement-item-attention {
  border-color: rgba(207, 46, 46, 1);
}

.agreement-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agreement-check-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 2px;
  cursor: pointer;
}

.agreement-doc-scroll:focus-visible {
  outline: 2px solid #ff8800;
  outline-offset: -2px;
}

.agreement-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #dd4200;
  cursor: pointer;
}

/* Not disabled before reading, on purpose: a disabled box cannot be reached
   by keyboard and swallows the click that is meant to open the document.
   The tick itself is refused in JS until the document has been read. */

.agreement-item-title {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.5;
  cursor: pointer;
}

.agreement-required-mark {
  color: #cf2e2e;
}

/* Its own column on the right, ahead of the open icon. The slot is always
   reserved (visibility, not display) so every row's mark and icon sit on the
   same two vertical lines whether or not that document has been read. */
.agreement-read-done {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 68px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  white-space: nowrap;
  visibility: hidden;
}

.agreement-item.is-read .agreement-read-done {
  visibility: visible;
}

@media (max-width: 560px) {
  /* Not enough width to hold a column open; the title needs the room more. */
  .agreement-read-done {
    min-width: 0;
  }
}

/* Icon only, no label: the document opens by ticking it, and this is just
   the way back in once it has been read. */
.agreement-open-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #b0b7bd;
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.agreement-item:hover .agreement-open-icon {
  color: #dd4200;
}

.agreement-open-icon:hover {
  background: #fdf1ec;
  color: #dd4200;
}

.agreement-open-icon:focus-visible {
  outline: 2px solid #ff8800;
  outline-offset: 2px;
}

.agreement-item-error {
  margin: 10px 2px 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(207, 46, 46, 1);
}

.agreement-item.is-read {
  border-color: #cfe6d5;
  background: #fbfefc;
}

@media (max-width: 560px) {
  .agreement-item-title {
    font-size: 13.5px;
  }
}

/* ---- The separate consents CSE asked for (local accounts) ----
   Same box as a document row, so the step reads as one list; the rows just
   carry their clause text under the title instead of a title alone. */

/* Anything given a display below would otherwise beat the hidden attribute. */
#cdsAccountForm [data-account-scope][hidden],
.consent-details[hidden] {
  display: none !important;
}

.consent-clauses {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

.consent-clauses-title {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 2px;
}

.consent-clause-row {
  align-items: flex-start;
}

.consent-clause .agreement-check-wrap {
  margin-top: 1px;
}

.consent-clause-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #dd4200;
  cursor: pointer;
}

.consent-clause-body {
  flex: 1 1 auto;
  min-width: 0;
}

.consent-clause-body .agreement-item-title {
  display: block;
  margin-bottom: 6px;
}

/* The privacy consent carries the Read mark and the open icon like a
   document row, but its clause text is long. As flex columns they would
   squeeze that text into a strip on a phone, so they sit in the top-right
   corner instead and the title alone makes room for them. */
.consent-clause[data-agreement-key] {
  position: relative;
}

.consent-clause[data-agreement-key] .agreement-open-icon {
  position: absolute;
  top: 6px;
  right: 10px;
}

.consent-clause[data-agreement-key] .agreement-read-done {
  position: absolute;
  top: 14px;
  right: 54px;
  min-width: 0;
}

.consent-clause[data-agreement-key] .agreement-item-title {
  padding-right: 116px;
}

.consent-clause-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #444;
}

.consent-clause-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7f8c8d;
}

/* The site sets `* { font-size: 16px }`, so any element inside running text
   that does not set its own size jumps back to 16px. These inherit instead. */
.privacy-policy-link,
.consent-details-count span,
.privacy-pdf-status a,
.privacy-pdf-source a {
  font-size: inherit;
}

.privacy-policy-link {
  color: #dd4200;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-policy-link:focus-visible {
  outline: 2px solid #ff8800;
  outline-offset: 2px;
  border-radius: 2px;
}

.consent-optional-mark {
  font-size: 12.5px;
  font-weight: 500;
  color: #7f8c8d;
}

.consent-yn {
  border: none;
  margin: 14px 0 0;
  padding: 0;
  min-width: 0;
}

.consent-yn-legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2c3e50;
}

.consent-yn-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 26px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.consent-yn-option input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #dd4200;
  cursor: pointer;
}

.consent-details {
  margin-top: 14px;
}

.consent-details-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.5;
}

.consent-details textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid rgb(220, 220, 220);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  resize: vertical;
  box-sizing: border-box;
}

.consent-details textarea:focus {
  outline: none;
  border-color: #ff8800;
  box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.15);
}

.consent-details-count {
  margin-top: 4px;
  font-size: 12px;
  color: #7f8c8d;
  text-align: right;
}

/* CSE's live privacy policy, drawn page by page inside the reader. */
.privacy-pdf-status {
  margin: 0;
  padding: 18px 0;
  font-size: 14px;
  color: #555;
}

.privacy-pdf-status a {
  color: #dd4200;
  font-weight: 600;
}

.privacy-pdf-pages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacy-pdf-page {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

/* The page text for screen readers. The canvases are aria-hidden. */
.privacy-pdf-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.privacy-pdf-source {
  margin: 14px 0 0;
  font-size: 12px;
  color: #7f8c8d;
}

.privacy-pdf-source a {
  color: #dd4200;
}

/* Document reader dialog: shares the consent gate's shell classes, so only
   the pieces the gate does not have need styling here. */
.agreement-doc-dialog {
  max-width: 780px;
}

.agreement-doc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-bottom: 1px solid rgb(231, 231, 231);
}

.agreement-doc-title {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
}

/* Matches .cv-close, so closing any popup looks the same. */
.agreement-doc-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #b8b8bd;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.agreement-doc-close:hover {
  background: #f2f2f2;
  color: #6b7280;
}

/* The CDS documents use numbered clauses and inner part headings, which the
   consent agreement's own typography block never needed. */
.consent-agreement-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: #2c3e50;
  margin: 16px 0 6px 0;
}

.consent-agreement-content ol {
  margin: 0 0 10px 20px;
  padding: 0;
}

.consent-agreement-content ol li {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 6px;
}

.consent-agreement-content ol ol,
.consent-agreement-content ol ul,
.consent-agreement-content ul ol {
  margin-top: 6px;
}

/* ---- Online Trading Agreement (optional item on the last step) ----
   The applicant's own answers, filled into the agreement as the reader opens
   it. Inline in running text, so they inherit the size (the global
   `* { font-size: 16px }` rule would otherwise make them jump). */
.ot-field {
  font-size: inherit;
  font-weight: 600;
  color: #1f2937;
  border-bottom: 1px dotted #b0b7bd;
  word-break: break-word;
}

.ot-field.ot-field-empty {
  font-weight: 500;
  color: #9a9aa0;
}

/* The agreement's own layout pieces (class names from
   online_trading_agreement_html()). Headings, paragraphs and rules already
   get the reader's legal typography from .consent-agreement-content. */
.ot-agreement .ot-title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #1f2937;
  text-align: center;
}

.ot-agreement .ot-subhead {
  margin: 14px 0 6px;
}

/* A hanging label ("(a)") without flex: the item's text holds inline fill-in
   spans and bold runs, which a flex row would split into separate columns. */
.ot-agreement .ot-item {
  padding-left: 40px;
  text-indent: -32px;
}

.ot-agreement .ot-item-label {
  display: inline-block;
  min-width: 32px;
  text-indent: 0;
  font-size: inherit;
  font-weight: 600;
}

.ot-agreement strong,
.ot-agreement th,
.ot-agreement td {
  font-size: inherit;
}

.ot-agreement table {
  width: 100%;
  margin: 6px 0 14px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* Sized on the cells: `* { font-size: 16px }` reaches every tr, so the
   table's own 14px is never inherited. */
.ot-agreement th,
.ot-agreement td {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}

.ot-agreement th {
  width: 34%;
  font-weight: 600;
  background: #fafafa;
}

.ot-agreement .ot-notice th {
  width: 28%;
}

.ot-signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px 28px;
  margin: 26px 0 8px;
}

.ot-sign-box {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.ot-sign-line {
  min-height: 64px;
  padding: 0 2px 6px;
  border-bottom: 1px solid #9ca3af;
  display: flex;
  align-items: flex-end;
  font-size: 14px;
}

.ot-sign-line .ot-field {
  border-bottom: none;
}

.ot-agreement .ot-sign-label {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
}

@media (max-width: 560px) {
  .ot-agreement th,
  .ot-agreement td {
    display: block;
    width: 100%;
  }

  .ot-agreement th {
    border-bottom: none;
  }
}

/* The Rs 50,000 notice shown on ticking it: a small dialog in the reader's
   shell (the shared popup block at the end of this file styles the shell). */
.ot-notice-dialog {
  max-width: 420px;
}

.ot-notice-body {
  padding: 28px 26px 8px;
  text-align: center;
}

.ot-notice-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fff4e6;
  color: #dd4200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ot-notice-icon i {
  font-size: 21px;
}

.ot-notice-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.35;
}

.ot-notice-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4b5563;
}

.ot-notice-actions {
  display: flex;
  gap: 10px;
  padding: 18px 26px 24px;
}

/* Three classes deep so .btn.btn-secondary (later in this file, 13px text
   and a 6px corner) does not shrink Cancel beside Continue. */
.ot-notice-dialog .ot-notice-actions .btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 12px;
}

/* ---- Set-Off Letter (required item on the last step) ----
   Class names from setoff_letter_html(); the fill-ins and the ticked boxes
   are set by fillSetoffFields() in form_scripts.php. */
.so-field {
  font-size: inherit;
  font-weight: 600;
  color: #1f2937;
  word-break: break-word;
}

.so-field.so-field-empty {
  font-weight: 500;
  color: #9a9aa0;
}

.so-letter p,
.so-letter strong,
.so-letter th,
.so-letter td,
.so-letter div {
  font-size: inherit;
}

.so-letter .so-address {
  margin: 0 0 16px;
}

.so-letter .so-address-label {
  font-weight: 600;
}

.so-letter .so-to {
  margin: 0 0 16px;
}

.so-letter .so-cds {
  margin: 16px 0;
}

/* The two instructions: tick boxes the client sets (either or both), laid
   out like the consent declarations so they read as something to choose.
   The text wraps under itself, not under the box. */
.so-letter .so-choose-hint {
  margin: 4px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ab3300;
}

.so-letter .so-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid #e3e5ea;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.so-letter .so-option.is-ticked {
  border-color: #dd4200;
  background: #fff7f3;
}

.so-letter .so-option-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: #dd4200;
  cursor: pointer;
}

.so-letter .so-option-text {
  font-size: inherit;
  line-height: 1.5;
}

.so-letter .so-option-text strong {
  font-size: inherit;
}

/* The applicant's column only (the letter is signed by one person online).
   Fixed layout, so the long signature line wraps inside its cell instead of
   pushing the table past a phone screen; the widths come from the heading
   row. */
.so-letter .so-signtable {
  width: 100%;
  margin: 20px 0 8px;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.5;
  color: #333;
}

.so-letter .so-signtable thead td:first-child,
.so-letter .so-signtable thead th:first-child {
  width: 28%;
}

/* The size is set on the cells themselves: the global `* { font-size: 16px }`
   rule reaches every tr, so a size on the table is never inherited. */
.so-letter .so-signtable th,
.so-letter .so-signtable td {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  font-size: 13.5px;
  text-align: left;
  vertical-align: top;
  /* Only on a screen too narrow for the longest word. */
  overflow-wrap: anywhere;
}

.so-letter .so-signtable thead th,
.so-letter .so-signtable tbody th {
  font-weight: 600;
  background: #fafafa;
}

.so-letter .so-signtable .so-corner {
  background: #fafafa;
}

@media (max-width: 560px) {
  .so-letter .so-signtable thead td:first-child,
  .so-letter .so-signtable thead th:first-child {
    width: 34%;
  }

  .so-letter .so-signtable th,
  .so-letter .so-signtable td {
    padding: 6px 8px;
    font-size: 12.5px;
  }
}

/* ---- Risk Disclosure Statement (required item on the last step) ----
   Sampath's video on top of the reader, then the statement from
   risk_disclosure_html(). The fill-ins are set by fillRiskDisclosureFields()
   in form_scripts.php. */
.rd-video {
  margin: 0 0 22px;
  text-align: center;
}

/* A portrait clip (720 x 950): a fixed height from the start, so the text
   under it does not jump when the video loads, and short enough that the
   statement starts on the first screen of a laptop. */
.rd-video-player {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(56vh, 480px);
  aspect-ratio: 720 / 950;
  margin: 0 auto;
  border-radius: 12px;
  background: #111;
  object-fit: contain;
}

/* The Annexure under the video, set apart from it by a rule. Paragraphs and
   the list already get the reader's legal typography. */
.rd-annex {
  padding-top: 18px;
  border-top: 1px solid rgb(231, 231, 231);
}

.consent-agreement-content .rd-annex-no {
  margin: 0 0 6px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6b7280;
}

/* Two classes deep to beat the reader's orange h3. */
.consent-agreement-content .rd-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #1f2937;
}

.consent-agreement-content .rd-heading {
  margin: 16px 0 6px;
  font-size: 13.5px;
  letter-spacing: .03em;
}

.consent-agreement-content .rd-heading-gap {
  margin-bottom: 10px;
}

/* The client's acknowledgement: label and value side by side, in the same
   greys as the Set-Off Letter's signature table. */
.rd-ack {
  margin: 18px 0 6px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
}

.rd-ack-row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
}

.rd-ack-row + .rd-ack-row {
  border-top: 1px solid #d1d5db;
}

.rd-ack-label,
.rd-ack-value {
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333;
  overflow-wrap: anywhere;
}

.rd-ack-label {
  font-weight: 600;
  background: #fafafa;
  border-right: 1px solid #d1d5db;
}

.rd-ack-sign {
  font-size: inherit;
  color: #6b7280;
}

.rd-field {
  font-size: inherit;
  font-weight: 600;
  color: #1f2937;
  word-break: break-word;
}

.rd-field.rd-field-empty {
  font-weight: 500;
  color: #9a9aa0;
}

@media (max-width: 560px) {
  .rd-video-player {
    height: min(50vh, 420px);
  }

  .rd-ack-row {
    grid-template-columns: 1fr;
  }

  .rd-ack-label {
    border-right: none;
    padding-bottom: 2px;
  }

  .rd-ack-value {
    padding-top: 2px;
  }
}

/* ========== Supporting Documents (final step + admin edit) ========== */
.supporting-docs-help {
  font-size: 13px;
  color: #5a6c7d;
  margin: 4px 0 16px 0;
}

.optional-tag {
  font-size: 13px;
  font-weight: 500;
  color: #888;
  margin-left: 6px;
}

.supporting-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

/* The 4 ID-photo cards also carry .form-group (for the shared validation-error
   JS, which looks up the closest .form-group), whose own margin-bottom: 20px
   would otherwise stack on top of this grid's gap and make rows with an
   ID-photo card visibly taller than rows with only supporting-doc cards. */
.supporting-docs-grid .form-group {
  margin-bottom: 0;
}

.supporting-doc-card {
  background: #f8f9fa;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.supporting-doc-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.supporting-doc-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  flex: 1;
}

.supporting-doc-custom-label {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.supporting-doc-remove-card {
  background: transparent;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
}

.supporting-doc-remove-card:hover {
  background: rgba(192, 57, 43, 0.1);
}

.supporting-doc-picker {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  /* The global label rule indents labels by 4px; these are buttons. */
  margin-left: 0;
}

.supporting-doc-picker input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.supporting-doc-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px dashed #b6bfc9;
  color: #2c3e50;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.supporting-doc-picker:hover .supporting-doc-picker-btn {
  border-color: #3498db;
  color: #3498db;
  background: #f0f7fc;
}

.supporting-doc-files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.supporting-doc-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.supporting-doc-file .file-icon {
  color: #3498db;
}

.supporting-doc-file .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2c3e50;
}

.supporting-doc-file .file-size {
  color: #7a8898;
  font-size: 12px;
}

.supporting-doc-file .file-remove {
  background: transparent;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}

.supporting-doc-file .file-remove:hover {
  background: rgba(192, 57, 43, 0.1);
}

.supporting-doc-file a.file-name,
.supporting-doc-file .file-name-link {
  color: #2c3e50;
  text-decoration: none;
}

.supporting-doc-file a.file-name:hover,
.supporting-doc-file .file-name-link:hover {
  color: #3498db;
  text-decoration: underline;
}

.supporting-doc-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f6f8;
  border: 1px solid #e1e5ea;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supporting-doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.supporting-doc-thumb.is-icon i {
  color: #e74c3c;
  font-size: 20px;
}

.supporting-doc-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.supporting-doc-meta .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supporting-doc-error {
  font-size: 12px;
  color: #c0392b;
}

/* A photo still being shrunk in the browser ("Preparing photo…"). */
.supporting-doc-file.is-preparing .supporting-doc-thumb i {
  color: #7f8c8d;
}

.supporting-doc-file.is-preparing .file-size {
  font-style: italic;
}

/* Next / Submit waiting for that photo (whenPhotosReady() in form_scripts.php). */
.photo-wait-note {
  font-size: 13px;
  color: #5a6c7d;
  text-align: right;
  margin: 16px 0 0 0;
}

/* "Clear my saved details" under the buttons: the answers and files kept on
   this device (form_scripts.php), for a shared computer. Quiet, out of the
   way of Next and Submit. */
.saved-details-note {
  text-align: right;
  margin: 12px 0 0 0;
}
/* Smaller than the other in-text actions, which are styled further down. */
.saved-details-note .saved-details-clear {
  font-size: 13px;
  font-weight: 500;
}

.supporting-docs-actions {
  margin-top: 4px;
}

.btn.btn-secondary {
  background: #fff;
  color: #2c3e50;
  border: 1px solid #d0d7de;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn.btn-secondary:hover {
  background: #f0f7fc;
  border-color: #3498db;
  color: #3498db;
}

/* ========== Video Verification (form step 7 + video.php) ==========
   Sample video on the left, the applicant's own upload on the right; one
   column on phones. The panels borrow the supporting-document card look so
   the step sits naturally after the Documents step. */
.video-step-intro {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 16px 0;
}

.video-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .video-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

/* Anything given a display below would otherwise beat the hidden attribute. */
.video-step [hidden],
.submission-progress-choice[hidden],
.submission-progress-choice [hidden] {
  display: none !important;
}

.video-step-panel {
  background: #f8f9fa;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.video-step-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

/* The site sets `* { font-size: 16px }`, so icons inside small text would
   jump back to 16px without this. */
.video-step i,
.video-page-note i {
  font-size: inherit;
}

/* Portrait phone videos are letterboxed rather than allowed to grow taller
   than the screen. */
.video-step-player,
.video-step-preview {
  display: block;
  width: 100%;
  max-height: 440px;
  border-radius: 8px;
  background: #1f2430;
  object-fit: contain;
}

.video-step-preview {
  max-height: 260px;
}

@media (max-width: 767px) {
  .video-step-player {
    max-height: 60vh;
  }

  .video-step-preview {
    max-height: 40vh;
  }
}

.video-step-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5a6c7d;
}

.video-step-caption i {
  color: #ff8800;
}

.video-step-picker {
  align-self: flex-start;
}

.video-step-picker:focus-within .supporting-doc-picker-btn {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.video-step.is-disabled .video-step-picker {
  opacity: 0.6;
  pointer-events: none;
}

.video-step-hint {
  font-size: 13px;
  color: #7f8c8d;
}

.video-step-error {
  font-size: 13px;
  line-height: 1.5;
  color: #c0392b;
}

.video-step-chosen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-step-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: 0;
}

.video-step-file > i {
  color: #3498db;
}

.video-step-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #2c3e50;
}

.video-step-file-size {
  flex: 0 0 auto;
  font-size: 12px;
  color: #7a8898;
}

.video-step-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: #c0392b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}

.video-step-remove:hover {
  background: rgba(192, 57, 43, 0.1);
}

.video-step-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.video-step-skip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #d0d7de;
}

.video-step-skip p {
  font-size: 13px;
  line-height: 1.5;
  color: #5a6c7d;
}

.video-step-skip p i {
  color: #7f8c8d;
  margin-right: 2px;
}

/* A thin progress bar, used in the submit popup and on video.php. */
.video-progress {
  height: 8px;
  border-radius: 999px;
  background: #eef1f5;
  overflow: hidden;
}

.video-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #ff8800;
  transition: width 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .video-progress-fill {
    transition: none;
  }
}

/* In the submit popup: the bar under the status line, and the choice after
   a failed documents or video upload (which replaces the spinner). */
.submission-progress-bar {
  max-width: 280px;
  margin: 14px auto 0;
}

.submission-progress-overlay.is-choice .submission-progress-spinner {
  display: none;
}

.submission-progress-choice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* The label the script swaps: the global "*" rule would set it apart from
   the button's own size and weight. */
.submission-progress-choice .btn span {
  font-size: inherit;
  font-weight: inherit;
}

/* A failed upload's reason can run to two or three lines. */
.submission-progress-overlay.is-choice .submission-progress-status {
  line-height: 1.5;
}

/* ---- video.php (the upload-later page) ---- */
.video-page-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 10px 12px;
  border: 1px solid #bfe3cc;
  border-radius: 8px;
  background: #eafaf0;
  color: #166534;
  font-size: 13.5px;
  line-height: 1.5;
}

.video-page-note i {
  margin-top: 3px;
}

.video-page-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #d0d7de;
}

.video-page-upload .video-progress {
  width: 100%;
}

.video-page-upload .btn span {
  font-size: inherit;
}

.video-page-upload .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.video-page-status {
  font-size: 14px;
  font-weight: 600;
  color: #dd4200;
}

.video-page-expiry {
  margin-top: 16px;
  font-size: 13px;
  color: #7f8c8d;
}

.video-page-phone {
  color: #dd4200;
  font-weight: 600;
  font-size: inherit;
  white-space: nowrap;
}

/* The thank-you page's round icon, in amber for "this link cannot be used". */
.thankyou-tick.video-page-tick-warn {
  background: #fff4e6;
  color: #dd4200;
}

/* ========== Buttons: one look across the form ==========
   Buttons had drifted into four shapes: orange 16px-corner buttons, small
   white 6px-corner ones with a blue hover, a green Submit and dashed file
   pickers. Now there are two, sharing one height, corner, font, padding
   and focus ring:
     primary   .btn (orange), Submit included
     secondary .btn-secondary and the file pickers ("Add file", "Choose
               video"), white with a grey border
   Small in-text actions (Verify, Resend code, Remove) share one link look.
   The popup-specific selectors are listed so this block wins over their
   own sizes; it sits after all of them on purpose. */
.btn,
.email-verify-dialog .btn,
.consent-gate-footer .btn,
.ot-notice-dialog .ot-notice-actions .btn,
.btn.btn-secondary,
.supporting-doc-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 20px;
  border-width: 2px;
  border-style: solid;
  border-radius: 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}

/* Labels inside buttons (loading text, swapped labels) would otherwise
   fall back to the global 16px / 400 of the * rule. */
.btn span,
.supporting-doc-picker-btn span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
/* Submit's inline-flex label sat on the baseline and made it half a pixel
   taller than Next beside it. */
.btn .btn-text,
.btn .btn-loader {
  vertical-align: top;
}

.btn i,
.supporting-doc-picker-btn i {
  font-size: 15px;
}

.btn-submit,
.btn-submit:hover {
  background-color: rgb(255, 136, 0);
  border-color: rgb(255, 136, 0);
  color: #fff;
}

.btn.btn-secondary,
.supporting-doc-picker-btn {
  background: #fff;
  border-color: rgb(214, 214, 219);
  color: #1f2937;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn.btn-secondary::before,
.btn.btn-secondary::after {
  display: none;
}
.btn.btn-secondary:hover,
.supporting-doc-picker:hover .supporting-doc-picker-btn {
  background: #fff7ef;
  border-color: #ff8800;
  color: #dd4200;
}

.btn:focus-visible,
.supporting-doc-picker:focus-within .supporting-doc-picker-btn,
.video-step-picker:focus-within .supporting-doc-picker-btn {
  outline: 3px solid rgba(255, 136, 0, 0.4);
  outline-offset: 2px;
}

.btn:disabled,
.btn.btn-loading,
.email-verify-dialog .btn:disabled,
.consent-gate-footer .btn:disabled,
.cv-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:disabled:hover::before {
  opacity: 1;
}
.btn:disabled:hover::after {
  opacity: 0;
}
.btn.btn-secondary:disabled:hover {
  background: #fff;
  border-color: rgb(214, 214, 219);
  color: #1f2937;
}

/* Two buttons side by side in a phone-width popup ("Cancel" and "Send to
   Admin") only fit on one line with a little less padding. The step
   buttons keep their words on one line: on the confirmation link's last
   step (Previous, Report an Issue, Submit to CSE) they wrap to a second
   row instead of squeezing each label onto two lines, and Submit and
   Report fill their row. */
@media (max-width: 480px) {
  .btn,
  .email-verify-dialog .btn,
  .consent-gate-footer .btn,
  .ot-notice-dialog .ot-notice-actions .btn,
  .btn.btn-secondary,
  .supporting-doc-picker-btn {
    padding-left: 16px;
    padding-right: 16px;
  }

  .step-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }

  .step-buttons .btn {
    white-space: nowrap;
  }

  .step-buttons #report-issue-btn,
  .step-buttons #submit-btn {
    flex: 1 1 auto;
  }
}

/* In-text actions: plain words, one size and colour. The Verify link keeps
   no padding and a 24px line so the label row it sits in stays the height
   of a plain label (the fields in that row line up). */
.verify-link,
.cv-resend,
.email-verify-resend,
.video-step-remove,
.saved-details-clear {
  background: none;
  border: 0;
  padding: 4px 2px;
  border-radius: 4px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  color: #dd4200;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.verify-link {
  padding: 0;
  line-height: 24px;
}
.verify-link:hover,
.cv-resend:hover,
.email-verify-resend:hover,
.saved-details-clear:hover {
  color: #b33600;
  background: none;
}
.video-step-remove {
  color: #c0392b;
}
.video-step-remove:hover {
  color: #a93226;
  background: none;
}
.verify-link:focus-visible,
.cv-resend:focus-visible,
.email-verify-resend:focus-visible,
.video-step-remove:focus-visible,
.saved-details-clear:focus-visible {
  outline: 2px solid #ff8800;
  outline-offset: 2px;
}
.cv-resend:disabled,
.email-verify-resend:disabled,
.video-step-remove:disabled {
  color: #9a9aa0;
  text-decoration: none;
  cursor: not-allowed;
}

/* ========== Shared popup shell ==========
   Four dialogs interrupt this form: the consent gate and the confirm-your-
   contact popup on the way in, the verification gate after submitting, and
   the document reader on the last step. They had drifted into three
   different corner radii, shadows, backdrops and heading sizes, so they read
   as pieces of different products. These are the values they all share.

   This block sits at the end of the file deliberately: each dialog's own
   section above sets the same properties at the same specificity, so only
   the last definition wins. Keep it last. */
.cv-overlay,
.email-verify-overlay,
.consent-gate-overlay,
.flag-issue-overlay {
  background: rgba(17, 20, 28, 0.55);
}

@supports (backdrop-filter: blur(3px)) {
  .email-verify-overlay.is-open,
  .consent-gate-overlay.is-open,
  .flag-issue-overlay.is-open {
    backdrop-filter: blur(3px);
  }
}

.cv-dialog,
.email-verify-dialog,
.consent-gate-dialog,
.flag-issue-dialog {
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.cv-title,
.email-verify-title,
.consent-agreement-content h2,
.agreement-doc-title,
.flag-issue-title {
  font-size: 19px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.35;
}

/* One motion for all four. They were between .22s and .28s on different
   curves, which is long enough to feel like waiting when a popup is in the
   way of what you were doing. Short, eased out, and the same every time:
   the dialog lifts the last few pixels into place as the backdrop fades. */
.cv-overlay,
.email-verify-overlay,
.consent-gate-overlay,
.flag-issue-overlay {
  transition: opacity .16s ease-out;
}

.cv-dialog,
.email-verify-dialog,
.consent-gate-dialog,
.flag-issue-dialog {
  transform: translateY(8px) scale(.98);
  transition: transform .19s cubic-bezier(.2, .9, .3, 1.1), opacity .16s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .cv-overlay,
  .email-verify-overlay,
  .consent-gate-overlay,
  .flag-issue-overlay,
  .cv-dialog,
  .email-verify-dialog,
  .consent-gate-dialog,
  .flag-issue-dialog {
    transition: none;
  }
}

.document-upload-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.document-upload-actions .supporting-doc-picker { margin: 0; }
.document-camera-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #dd4200; cursor: pointer; }
.has-document-camera .document-camera-btn { display: inline-flex; }
.document-camera-btn:hover { background: #fff7ef; }
.document-camera-btn:focus-visible { outline: 2px solid #dd4200; outline-offset: 2px; }
.document-camera-dialog { width: min(560px, 92vw); max-height: 90vh; margin: auto; overflow: auto; padding: 24px; border: 0; border-radius: 16px; }
.document-camera-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.document-camera-dialog video { display: block; width: 100%; max-height: 55vh; margin: 16px 0; background: #111; border-radius: 12px; }
.document-camera-dialog p { margin-bottom: 16px; }