/* ============================================================
   Design system, Bootstrap overrides, and utility classes
   for the Rank Media V3 redesign (MyAccount + ApplyNow).

   Sections:
      1. CSS Custom Properties
      2. Bootstrap Import
      3. Base / Reset Overrides
      4. Bootstrap Component Overrides
           Buttons, Forms, Progress, Badges, Tables,
           Alerts, Accordion, Card base & option, List
      5. Custom Components
           Alert Banner, Toggle Setting/Switch,
           Step Timeline, Linked Steps, Input Copy
      6. Layout Helpers
      7. Typography Utilities
      8. Color Utilities
      9. Flex & Layout Utilities
     10. Spacing Utilities
     11. Icon Helpers
     12. Card Variants
     13. Status & Badge Variants
     14. Misc / One-off
     15. Responsive Media Queries
   ============================================================ */

/* ── 1. CSS CUSTOM PROPERTIES ────────────────────────────── */
:root {
  /* Brand indigo - primary color scale */
  --brand-indigo-50: #eef2ff;
  --brand-indigo-100: #e0e7ff;
  --brand-indigo-200: #C7D2FE;
  --brand-indigo-300: #a5b4fc;
  --brand-indigo-light: #5659f0;    /* 500 */
  --brand-indigo-main: #6366f1;
  --brand-indigo: #4338ca;          /* 600 */
  --brand-indigo-700: #3730a3;
  --brand-indigo-800: #312e81;
  /* Brand amber */
  --brand-amber: #f59e0b;
  --brand-amber-light: #fde68a;
  --brand-amber-lighter: #fef3c7;
  --brand-amber-lightest: #fffbeb;
  --brand-warning: #be5a00;
  /* Neutral */
  --brand-neutral-50: #f9fafb;
  --brand-neutral-100: #f3f4f6;
  --brand-neutral-200: #e5e7eb;
  --brand-neutral-300: #d1d5db;
  --brand-neutral-400: #9ca3af;
  --brand-neutral-500: #6b7280;
  --brand-neutral-600: #4b5563;
  --brand-neutral-700: #374151;
  --brand-neutral-900: #111827;
  /* Destructive */
  --destructive-50: #fef2f2;
  --destructive-100: #fee2e2;
  --destructive-border: #fecaca;
  --destructive-500-main: #d72323;
  /* Success */
  --success-500-main: #15803d;
  --success-bright: #28A955;
  --success-200: #bbf7d0;
  --success-50: #f0fdf4;
  /* Warning */
  --warning-50: #fff6ee;
  --warning-100: #ffead8;
  --warning-200: #f5ceac;
  --warning-700: #763800;
  --warning-800: #582a00;
  /* Specialty / Stone */
  --specialty-500: #f59e0b;
  --secondary-stone-600: #57534e;
  /* Bootstrap body font override */
  --bs-body-font-size: 14px;
}

/* ── 2. BOOTSTRAP IMPORT ─────────────────────────────────── */
/* Bootstrap loaded globally via main-site.css bundle */

/* ── 3. BASE / RESET OVERRIDES ───────────────────────────── */
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    sans-serif;
  color: var(--brand-neutral-700);
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 700;
  color: var(--brand-neutral-900);
}

/* Default text color for card and table descendants */
.site-content .card,
.site-content table {
  color: var(--brand-neutral-700);
}

.card.constrained {
  max-width: clamp(675px, 60vw, 70%);
}

a {
  color: var(--brand-indigo-light);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.8;
}

a.arrow-link::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.5rem;
  background: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 2.25H2.25C1.42157 2.25 0.75 2.92157 0.75 3.75V11.25C0.75 12.0784 1.42157 12.75 2.25 12.75H9.75C10.5784 12.75 11.25 12.0784 11.25 11.25V8.25M8.25 0.75H12.75M12.75 0.75V5.25M12.75 0.75L5.25 8.25" stroke="%235659F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat center center;
  background-size: contain;
}

a.back-arrow {
  margin-right: 12px;
  display: none;
}


a.underline {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

hr {
  border: none;
  border-top: 1px solid var(--brand-neutral-400);
  margin: 16px 0;
}

label {
  font-weight: 500;
  color: var(--brand-neutral-900);
  font-size: 14px;
  line-height: 16px;
}

header .logo {
  max-height: 62px;
}

/* ── DESIGN BOUNDARY ─────────────────────────────────────
   Every redesigned partial wraps its content in .site-content.
   This reset block neutralizes inherited properties from global CSS
   (core.css, content.css, rankscore theme, Bootstrap base styles)
   so redesigned views start from a clean baseline. */
.site-content {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Override rankscore Gilroy font and Bootstrap heading defaults */
.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4 {
  color: var(--brand-neutral-900);
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
/* Override core.css p { margin: 0.7em 0 } and Bootstrap p { margin-bottom: 1rem } */
.site-content p {
  font-size: inherit;
  margin: 0;
}
.site-content a.btn-link-icon,
.site-content a.btn-link-icon:hover,
.site-content a.btn-link-icon:visited {
  color: var(--brand-indigo-main);
  text-decoration: none;
}
/* Override core.css ul,li { list-style: none; margin/padding: 0 } */
.site-content ul {
  margin: 0;
  padding: 0;
}
.site-content li {
  font-size: inherit;
  margin: 0;
  padding: 0;
}
.site-content form {
  display: block;
}
/* Typography utilities scoped to boundary - needed because
   .site-content p/li { font-size: inherit } (0,0,1,1)
   outranks bare utility classes (0,0,1,0). These at (0,0,2,0) win. */
.site-content .text-xs   { font-size: 12px; line-height: 16px; }
.site-content .text-sm   { font-size: 14px; line-height: 20px; }
.site-content .text-meta { font-size: 14px; line-height: 20px; color: var(--brand-neutral-700); }
.site-content .text-md   { font-size: 15px; line-height: 22px; }
.site-content .text-base { font-size: 16px; line-height: 24px; }
.site-content .text-lg   { font-size: 18px; line-height: 28px; }
/* Heading utilities on non-heading elements (e.g. <p class="h4-medium">) */
.site-content .h2-medium  { font-size: 36px; line-height: 44px; letter-spacing: -0.7px; font-weight: 600; }
.site-content .h4-medium  { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; font-weight: 700; }
.site-content .h4-desktop { font-size: 28px; line-height: 32px; letter-spacing: -0.4px; font-weight: 600; }
.site-content .h5-medium  { font-size: 24px; line-height: 32px; letter-spacing: -0.4px; font-weight: 600; }
.site-content .h5-small   { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; font-weight: 600; }
.site-content .h6-medium  { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; font-weight: 600; }
.site-content .h-page    { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; font-weight: 700; }
/* Button colors - boundary resets a { color: inherit } which overrides .btn color */
.site-content a.btn-primary,
.site-content a.btn-primary:visited { color: var(--bs-white, #fff); }
.site-content a.btn-secondary,
.site-content a.btn-secondary:visited { color: var(--brand-indigo-light); }
.site-content a.btn-light-blue,
.site-content a.btn-light-blue:visited {
  color: var(--brand-indigo-light);
  background: var(--brand-indigo-50);
  border: 1px solid var(--brand-indigo-100);
}
/* Main nav tab colors - override boundary a { color: inherit } */
.site-content a.main-nav-tab         { color: var(--brand-neutral-500); text-decoration: none; }
.site-content a.main-nav-tab:visited  { color: var(--brand-neutral-500); }
.site-content a.main-nav-tab.is-active { color: var(--brand-indigo); }
.site-content a.main-nav-tab.is-active:visited { color: var(--brand-indigo); }
/* main.css injects FA icon via .alert::before - suppress it */
.site-content .alert::before { content: none; }
.site-content .alert { padding-left: 24px; }
/* ── 4. BOOTSTRAP COMPONENT OVERRIDES ───────────────────── */

.site-content .rounded-3 {
  border-radius: 12px;
}

/* -- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 60px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  gap: 6px;
}
.btn.btn--white {
  border-color: #1E1E1E;
}
.btn.btn-radius-small {
  border-radius: 4px;
}
.btn.btn-default {
  padding: 17px 12px;
}
.btn-sm {
  padding: 8px 12px;
}
.btn-md {
  padding: 10px 18px;
}


.btn-primary {
  background-color: var(--brand-indigo-light);
  color: white;
  border: 1px solid var(--brand-indigo-light);
  gap: 8px;
}
.btn-primary:hover {
  opacity: 0.9;
}
.site-content .card-dark a.btn-secondary,
.site-content .card-dark a.btn-secondary:visited,
.site-content .card-dark a.btn-secondary:hover {
  text-decoration: none;
}
.site-content .card-dark .btn-secondary {
  --bs-btn-color: var(--brand-indigo-main);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-indigo-main);
  --bs-btn-hover-border-color: var(--brand-indigo-main);
  color: var(--brand-indigo-main);
  background-color: #fff;
  border-color: #fff;
}

.btn-secondary {
  background-color: var(--brand-indigo-50);
  color: var(--brand-indigo-main);
  border: 1px solid var(--brand-indigo-100);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}
.btn-secondary:hover {
  background-color: var(--brand-indigo-main);
  color: #fff;
}

.btn-destructive {
  background: var(--destructive-500-main);
  border-color: var(--destructive-500-main);
  color: #fff;
}

.btn-warning {
  background: var(--brand-warning);
  border-color: var(--brand-warning);
  color: #fff;
}

.btn-orange {
  background-color: var(--specialty-500);
  color: #fff;
  border: 1px solid var(--specialty-500);
}

.btn-empty {
  background-color: transparent;
  border: 1px solid var(--brand-neutral-900);
  color: var(--brand-neutral-900);
}

.btn-empty:hover {
  background: var(--brand-neutral-100);
  color: var(--brand-neutral-900);
}

.btn-light-blue {
  border: 1px solid var(--brand-indigo-100);
  background: var(--brand-indigo-50);
  color: var(--brand-indigo-light);
}

.btn-light-blue:hover {
  background: var(--brand-indigo-100);
  color: var(--brand-indigo-light);
}

.btn-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--brand-neutral-200);
  color: var(--brand-neutral-900);
}
.btn-outline-secondary:hover {
  background: var(--brand-neutral-100);
  color: var(--brand-neutral-900);
}

.btn-full {
  display: block;
  width: 100%;
  padding: 0.9375rem 1.5rem;
  background: var(--brand-indigo-main);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn-full:hover {
  opacity: 0.9;
  color: #fff;
}

.btn-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--brand-indigo-main);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  width: 100%;
}
.btn-link-icon:hover {
  opacity: 0.8;
  color: var(--brand-indigo-main);
}

.header__main-cta .btn {
  font-weight: 700;
}

/* -- Forms -------------------------------------------------- */
.site-content .valid-icon,
.site-content .invalid-icon {
  display: none;
}
.site-content .form-control {
  border: 1px solid var(--brand-neutral-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 1px 2px 0 rgba(16, 24, 40, 0.04);
}
.site-content .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #212529;
}
#main .site-content .input-validation-error {
  border-color: var(--destructive-500-main) !important; /* override input border set by #main .site-content input rules */
}
#main .site-content .input-group-bordered .input-validation-error,
#main .site-content .input-icon-wrap .input-validation-error {
  border: 0 !important; /* must match !important on .input-validation-error above to suppress inner border */
}
#main .input-group-bordered:has(.input-validation-error),
#main .input-icon-wrap:has(.input-validation-error),
#main .input-group-bordered.is-invalid {
  border-color: var(--destructive-500-main);
}
.site-content .field-validation-error {
  color: var(--destructive-500-main);
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}
.site-content .validation-summary-errors {
  color: var(--destructive-500-main);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 1rem;
}
.site-content .form-control:focus {
  border-color: var(--brand-indigo-main);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.site-content .form-control.error {
  border-color: var(--destructive-500-main);
}

.site-content .form-select {
  border: 1px solid var(--brand-neutral-200);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

.site-content .form-check-input {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--brand-neutral-500);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  background-color: white;
  transition: all 0.2s ease;
}
.site-content .form-check-input:checked {
  border-color: var(--brand-indigo-main);
  background-color: white;
  box-shadow: inset 0 0 0 4px var(--brand-indigo-main);
}

.site-content .form-label {
  font-weight: 600;
}

/* Override content.css #main input/select rules (0,1,0,1+).
   Must keep #main prefix to match that specificity.                   */
#main .site-content input[type='text']:not(.input-icon-wrap *),
#main .site-content input[type='email']:not(.input-icon-wrap *),
#main .site-content input[type='date']:not(.input-icon-wrap *),
#main .site-content input[type='datetime']:not(.input-icon-wrap *),
#main .site-content input[type='password']:not(.input-icon-wrap *),
#main .site-content input[type='number']:not(.input-icon-wrap *),
#main .site-content select,
.site-content .text-field {
  display: block;
  width: 100%;
  border: 1px solid var(--brand-neutral-200);
  border-radius: 6px;
  padding: 13px 10px;
  max-width: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--brand-neutral-900);
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 1px 2px 0 rgba(16, 24, 40, 0.04);
}
#main .site-content select {
  padding-right: 40px;
}
#main .site-content input:focus,
#main .site-content select:focus,
.site-content .text-field:focus {
  border-color: var(--brand-indigo-main);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

#main .site-content input[type='text']:disabled,
#main .site-content input[type='email']:disabled,
#main .site-content input[type='date']:disabled,
#main .site-content input[type='datetime']:disabled,
#main .site-content input[type='password']:disabled,
#main .site-content input[type='number']:disabled,
#main .site-content select:disabled,
#main .site-content input[type='text'][readonly],
#main .site-content input[type='email'][readonly],
#main .site-content input[type='tel'][readonly] {
  background-color: #fff;
  color: var(--brand-neutral-400);
  border-color: var(--brand-neutral-200);
  cursor: default;
}
.site-content .mb-3:has(input:disabled) > .form-label,
.site-content [class*="col-"]:has(input:disabled) > .form-label,
.site-content [class*="col-"]:has(input:disabled) > legend,
.site-content .field-wrap:has(input[readonly]) > .form-label {
  color: var(--brand-neutral-400);
}


/* -- Progress ----------------------------------------------- */
.site-content .progress {
  height: 1rem;
  border-radius: 100px;
  background-color: var(--brand-neutral-200);
  overflow: hidden;
}
.site-content .progress-bar {
  height: 100%;
  background-color: var(--brand-indigo-main);
  border-radius: 8px;
}

/* -- Badges ------------------------------------------------- */
.site-content .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-neutral-700);
}
.site-content .badge-circle {
  border-radius: 50%;
  background-color: var(--brand-neutral-200);
  align-items: center;
  justify-content: center;
}
.site-content .badge-neutral {
  background-color: var(--brand-neutral-100);
  color: var(--brand-neutral-700);
}
.site-content .badge-success {
  background-color: var(--success-500-main);
  color: white;
}
.site-content .badge-count {
  background-color: var(--brand-neutral-100);
  color: var(--brand-neutral-700);
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-content .badge-dark {
  background-color: var(--brand-neutral-900);
  color: white;
}
.site-content .badge-md {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
}

/* -- Tables ------------------------------------------------- */
.site-content .table {
  border-collapse: collapse;
  width: 100%;
}
.site-content .table.table-transparent {
  background-color: transparent;
}
.site-content .table.table-transparent th,
.site-content .table.table-transparent td {
  background-color: transparent;
}
.site-content .table.table-transparent tr:last-child td {
  border-bottom: none;
}
.site-content .table th {
  padding: 12px 8px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-neutral-900);
  background-color: transparent;
  border-bottom: 1px solid var(--brand-neutral-200);
}
.site-content .table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--brand-neutral-200);
  color: inherit;
}

.site-content .table td.neutral-900,
.site-content .table th.neutral-900,
.site-content .table .neutral-900,
.site-content .table thead.neutral-900,
.site-content .table tbody.neutral-900 td,
.site-content .table thead.neutral-900 th,
.site-content .table tr.neutral-900 td,
.site-content .table tr.neutral-900 th {
  color: var(--brand-neutral-900);
}

.site-content .table td.fw-500,
.site-content .table th.fw-500,
.site-content .table tr.fw-500 td,
.site-content .table tr.fw-500 th,
.site-content .table tr.fw-500 td:last-child,
.site-content .table tr.fw-500 th:last-child {
  font-weight: 500;
}

.site-content .table td.neutral-700,
.site-content .table th.neutral-700,
.site-content .table .neutral-700,
.site-content .table tbody.neutral-700 td,
.site-content .table thead.neutral-700 th {
  color: var(--brand-neutral-700);
}

.site-content .table.table-borderless,
.site-content .table.table-borderless td,
.site-content .table.table-borderless th {
  border: none;
}
.site-content .table tr:last-child td {
  border-bottom: none;
}

/* -- Alerts ------------------------------------------------- */
.site-content .alert {
  padding: 16px 24px;
  border-radius: 8px;
  display: flex;
}
.site-content .alert.border-0 {
  border: none;
}

.site-content .alert-info {
  background-color: var(--brand-indigo-50);
  color: var(--brand-indigo-800);
}
.site-content .alert-warning {
  background-color: var(--warning-100);
  color: var(--warning-700);
}
.site-content .alert-warning.light {
  background-color: var(--warning-50);
  border: 1px solid var(--warning-200);
  color: var(--warning-700);
}
.site-content .alert-warning.light strong,
.site-content .alert-warning.light .fw-500 {
  color: var(--warning-800);
}
.site-content .alert-warning.light svg {
  stroke: var(--warning-800);
}
.site-content .alert-success.light {
  background-color: var(--success-50);
  border: 1px solid var(--success-200);
}

/* -- Accordion ---------------------------------------------- */
.accordion-compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.accordion-compact .accordion-item {
  background: #fff;
  border: 1px solid var(--brand-neutral-200);
  border-radius: 0.625rem;
  overflow: hidden;
}
.accordion-compact .accordion-item + .accordion-item {
  margin-top: 0;
  border-top: 1px solid var(--brand-neutral-200);
}
.site-content .accordion-compact .accordion-button {
  background: #fff;
  color: var(--brand-neutral-900);
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  border: 0;
  padding: 16px;
  gap: 8px;
  border-radius: 8px;
  box-shadow: none;
  max-width: none;
  display: flex;
  align-items: center;
}
.accordion-compact h2.accordion-header {
  margin: 0;
  font-size: inherit;
}
.site-content .accordion-compact .accordion-button::after {
  margin-left: auto;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
}
.site-content .accordion-compact .accordion-button:not(.collapsed) {
  background: #fff;
  color: var(--brand-neutral-900);
  box-shadow: none;
}
.site-content .accordion-compact .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M5 12.5L10 7.5L15 12.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.site-content .accordion-compact .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
.accordion-compact .accordion-body {
  padding: 0.5rem 1rem 1rem;
  font-size: 0.875rem;
  color: var(--brand-neutral-700);
  line-height: 1.6;
}
.accordion-compact .accordion-icon {
  flex-shrink: 0;
  color: var(--brand-neutral-500);
}

/* -- Card base & option ------------------------------------- */
.site-content .card {
  border-radius: 8px;
  border: 1px solid var(--brand-neutral-200);
  background-color: white;
  padding: 20px;
}
.small-shadow {
  box-shadow: 0 2px 6px 0 rgba(16, 24, 40, 0.06);
}

.card-option {
  background: #fff;
  border: 2px solid var(--brand-neutral-200);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  margin-bottom: 0;
}
.card-option.lg {
  padding: 24px 20px;
}
.card-option:hover {
  border-color: var(--brand-indigo-100);
  background: var(--brand-indigo-50);
}
.card-option-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 4px;
}
.card-option-desc {
  padding-left: calc(18px + 0.75rem);
}
.card-option:has(input[type="radio"]:checked) {
  border-color: var(--brand-indigo-main);
  background: #fff;
}

/* -- List --------------------------------------------------- */
.list-dotted {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.list-dotted li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.list-dotted li::before {
  content: "•";
  font-size: 1.1rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── 5. CUSTOM COMPONENTS ────────────────────────────────── */

/* -- Alert Banner (left strip + body layout) ---------------- */
.alert.alert-banner {
  padding: 0;
  gap: 0;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow: hidden;
}
.alert-banner__strip {
  width: 6px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
}
.alert-banner__strip--destructive {
  background: var(--destructive-500-main);
}
.alert-banner__strip--warning {
  background: var(--brand-amber);
}

.alert-banner__body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}
.alert-banner--destructive .alert-banner__body {
  background-color: var(--destructive-50);
  border-color: var(--destructive-border);
}
.alert-banner--warning .alert-banner__body {
  background-color: var(--brand-amber-lightest);
  border-color: var(--brand-amber-light);
}

.alert-banner__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.alert-banner--destructive .alert-banner__icon {
  background-color: var(--destructive-100);
}
.alert-banner--warning .alert-banner__icon {
  background-color: var(--brand-amber-lighter);
}

.alert-banner__copy {
  flex: 1 1 0%;
  min-width: 0;
}
.alert-banner__title {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--brand-neutral-900);
}
.alert-banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--brand-neutral-900);
}
.alert-banner__action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left:12px;
}

/* -- Toggle Setting Row ------------------------------------- */
.toggle-setting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border: 2px solid var(--brand-neutral-200);
  border-radius: 8px;
  background: #fff;
}
.toggle-setting-body {
  flex: 1;
  min-width: 0;
}
.toggle-setting-desc {
  font-size: 0.8125rem;
  color: var(--brand-neutral-500);
  line-height: 1.5;
  margin: 0;
}

/* -- Toggle Switch ------------------------------------------ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--brand-neutral-200);
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.toggle-switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-switch input:checked + .toggle-switch-slider {
  background: var(--brand-indigo-main);
}
.toggle-switch input:checked + .toggle-switch-slider::before {
  transform: translateX(20px);
}
.toggle-switch input:disabled + .toggle-switch-slider {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -- Step Timeline ------------------------------------------ */
.step-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  margin: 0 12px;
}
.step-timeline-node {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-timeline-node--active {
  border: 2px solid var(--brand-indigo-main);
  border-radius: 50%;
  background: #fff;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--brand-indigo-300);
}
.step-timeline-node__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-indigo-main);
}
.step-timeline-node--active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1.5px;
  margin-top: 4px;
  height: 28px;
  background: var(--brand-indigo-300);
}
.step-timeline-node--pending {
  border: 2px solid var(--brand-neutral-50);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--brand-neutral-500);
}
.step-timeline-node--pending::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 24px;
  margin-bottom: 4px;
  background: var(--brand-neutral-200);
}
.step-timeline-node--pending::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 24px;
  margin-top: 4px;
  background: var(--brand-neutral-200);
}

/* -- Linked Steps (numbered vertical list) ------------------ */
.linked-steps {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  margin: 0;
}
.linked-step {
  display: flex;
  gap: 14px;
  position:relative;
}
.linked-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.linked-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-indigo-light);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  position:relative;
  top: 50%;
  transform:translateY(-50%);
}
.linked-step-line {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--brand-indigo-300);
  opacity: 0.25;
  position:absolute;
  height:100%;
}

.linked-step-content {
  padding-bottom: 10px;
  flex: 1;
  min-width: 0;
  min-height: 60px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.linked-step:last-child .linked-step-line{
  height:50%;
}


.linked-step-desc {
  font-size: 13px;
  color: var(--brand-neutral-500);
  margin: 0;
  line-height: 20px;
}

/* -- Input Copy --------------------------------------------- */
.input-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--brand-neutral-200);
  border-radius: 6px;
  padding: 7px 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--brand-neutral-700);
}
.input-copy span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-content .input-copy span a {
  pointer-events: none;
  color: var(--brand-indigo-light);
}

@media (max-width: 575.98px) {
  .input-copy span a {
    pointer-events: auto;
  }
}

.site-content .input-copy .btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--brand-indigo-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-content .input-copy .btn-copy:hover {
  opacity: 0.75;
}

.flow-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}
.flow-actions .btn {
  min-width: 220px;
}

@media (max-width: 575.98px) {

  .flow-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .flow-actions .btn {
    min-width: 100%;
  }
}

/* -- Password Input / Strength UI ---------------------------- */
.input-icon-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--brand-neutral-200);
  border-radius: 0.5rem;
  background: #fff;
  transition: border-color 0.15s ease;
}
.input-icon-wrap.focused {
  border-color: var(--brand-indigo-main);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
.site-content .input-icon-wrap input,
.input-icon-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-neutral-900);
  min-width: 0;
  padding: 0;
  margin: 0;
  width: auto;
  box-shadow: none;
}
.input-icon-wrap input::placeholder {
  color: var(--brand-neutral-500);
}
/* Hide browser-native password reveal buttons */
.input-icon-wrap input::-ms-reveal,
.input-icon-wrap input::-ms-clear {
  display: none;
}

.site-content button.input-icon-btn,
.input-icon-btn {
  background: none;
  border: 0 none transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--brand-neutral-500);
  flex-shrink: 0;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  font-size: inherit;
  font-weight: normal;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input-icon-btn:hover {
  color: var(--brand-neutral-700);
}

.strength-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.strength-bar-segment {
  flex: 1;
  height: 4px;
  border-radius: 9999px;
  background: var(--brand-neutral-200);
}
.strength-bar-segment.filled {
  background: var(--success-500-main);
}

.pw-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pw-rule.passed {
  color: var(--success-500-main);
}
.pw-rule.pending {
  color: var(--brand-neutral-500);
}

/* ── 6. LAYOUT HELPERS ───────────────────────────────────── */
.container,
.container-xl {
  max-width: 1140px;
}

.container-xl.constrained {
  max-width: 986px;
}

.layout-main-constrained-6 {
  width: 100%;
}

@media (min-width: 992px) {
  .layout-main.layout-main-constrained-6 {
    flex: 1 1 570px;
    width: 100%;
    max-width: 570px;
  }
}

.layout-center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem 4rem;
}

.max-w-520 {
  max-width: 520px;
}
.fit-content {
  max-width: fit-content;
}

.banner-strip {
  border-radius: 8px 8px 0 0;
  background: var(--brand-indigo-700);
  color: #fff;
  text-align: center;
  padding: 12px 24px;
  font-size: 12px;
  line-height: 16px;
}
.banner-strip--destructive {
  background: var(--destructive-500-main);
}
.banner-strip--warning {
  background: var(--brand-warning);
}

/* ── 7. TYPOGRAPHY UTILITIES ────────────────────────────── */

/* Type scale */
.text-xs   { font-size: 12px; line-height: 16px; }
.text-sm   { font-size: 14px; line-height: 20px; }
.text-meta { font-size: 14px; line-height: 20px; color: var(--brand-neutral-700); }
.text-md   { font-size: 15px; line-height: 22px; }
.text-base { font-size: 16px; line-height: 24px; }
.text-lg   { font-size: 18px; line-height: 28px; }

/* Heading scale */
.h-page     { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; font-weight: 700; color: var(--brand-neutral-900); }
.h2-medium  { font-size: 36px; line-height: 44px; letter-spacing: -0.7px; font-weight: 600; color: var(--brand-neutral-900); }
.h2-desktop { font-size: 36px; line-height: 44px; letter-spacing: -0.7px; font-weight: 700; color: var(--brand-neutral-900); }
.h4-medium  { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; font-weight: 700; color: var(--brand-neutral-900); }
.h4-desktop { font-size: 28px; line-height: 32px; letter-spacing: -0.4px; font-weight: 600; color: var(--brand-neutral-900); }
.h5-medium  { font-size: 24px; line-height: 32px; letter-spacing: -0.4px; font-weight: 600; color: var(--brand-neutral-900); }
.h5-small   { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; font-weight: 600; color: var(--brand-neutral-900); }
.h6-medium  { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; font-weight: 600; color: var(--brand-neutral-900); }

.heading-subheading-section {
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

/* Descriptive / semantic text */
.text-desc {
  font-size: 0.9rem;
  color: var(--brand-neutral-700);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.text-label {
  font-size: 0.8125rem;
  color: var(--brand-neutral-500);
  margin-bottom: 0.25rem;
}
.text-label-strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-neutral-900);
}
/* Font weights - scoped to .site-content boundary (0,0,2,0) */
.site-content .fw-400 { font-weight: 400; }
.site-content .fw-500 { font-weight: 500; }
.site-content .fw-600 { font-weight: 600; }
.site-content .fw-800 { font-weight: 800; }

/* Letter spacing */
.letter-spacing-1 {
  letter-spacing: 1px;
}

/* Section overline - small caps label above detail rows */
.section-overline {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-neutral-500);
  margin-bottom: 4px;
}

/* Tight horizontal rule for detail sections */
.divider-tight {
  margin: 8px 0;
  border-color: var(--brand-neutral-200);
  opacity: 1;
}

/* ── 8. COLOR UTILITIES ──────────────────────────────────── */
/* Scoped to .site-content boundary (0,0,2,0) */

/* Backgrounds */
.site-content .bg-brand-indigo-50  { background-color: var(--brand-indigo-50); }
.site-content .bg-brand-neutral-100 { background-color: var(--brand-neutral-100); }
.site-content .bg-secondary-stone-600 { background-color: var(--secondary-stone-600); }
.site-content .bg-brand-amber       { background-color: var(--brand-amber); }
.site-content .bg-brand-amber-lightest { background-color: var(--brand-amber-lightest); }
.site-content .bg-brand-indigo      { background-color: var(--brand-indigo); }
.site-content .bg-brand-indigo-100  { background-color: var(--brand-indigo-100); }
.site-content .bg-brand-indigo-light { background-color: var(--brand-indigo-light); }
.site-content .bg-brand-indigo-main { background-color: var(--brand-indigo-main); }
.site-content .bg-brand-neutral-50  { background-color: var(--brand-neutral-50); }
.site-content .bg-brand-neutral-700 { background-color: var(--brand-neutral-700); }
.site-content .bg-brand-neutral-900 { background-color: var(--brand-neutral-900); }
.site-content .bg-destructive-50    { background-color: var(--destructive-50); }
.site-content .bg-destructive-100   { background-color: var(--destructive-100); }
.site-content .badge-primary        { background-color: var(--brand-indigo-main); color: #fff; }
.site-content .badge-secondary      { background-color: var(--brand-indigo-50); color: var(--brand-indigo-main); }

/* Text colors */
.site-content .text-brand-indigo      { color: var(--brand-indigo); }
.site-content .text-brand-indigo-700       { color: var(--brand-indigo-700); }
.site-content .text-brand-indigo-main,
.site-content a.text-brand-indigo-main { color: var(--brand-indigo-main); }
.site-content .text-brand-neutral-400 { color: var(--brand-neutral-400); }
.text-brand-neutral-500 { color: var(--brand-neutral-500); }
.site-content .text-brand-neutral-700 { color: var(--brand-neutral-700); }
.site-content .text-brand-neutral-900 { color: var(--brand-neutral-900); }
.site-content .text-white             { color: var(--bs-white, #fff); }
.site-content .text-success           { color: var(--success-500-main); }
.site-content .text-success-bright    { color: var(--success-bright); }

/* Named neutral aliases (shorthand) */
.site-content .neutral-600 { color: var(--brand-neutral-600); }
.site-content .neutral-700 { color: var(--brand-neutral-700); }
.site-content .neutral-900 { color: var(--brand-neutral-900); }

/* Borders */
.site-content .border-brand-indigo-200 { border-color: var(--brand-indigo-200); }
.site-content .border-brand-indigo-main { border-color: var(--brand-indigo-main); }
.site-content .border-brand-neutral-200 { border-color: var(--brand-neutral-200); }
.site-content .border-brand-neutral-500 { border-color: var(--brand-neutral-500); }

/* ── 9. FLEX & LAYOUT UTILITIES ────────────────────────── */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flat-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-row-lg {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stack ul {
  padding-left: 1.5em;
  margin: 0.25em 0;
}
.stack li {
  list-style: disc;
  margin-bottom: 0.4em;
}
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.callout-amber {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem;
  background: var(--brand-amber-lightest);
  border-radius: 8px;
}

.flex-1 {
  flex: 1 0 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.min-w-0 {
  min-width: 0;
}
.spinner-sm {
  width: 30px;
  height: 30px;
}
.lh-snug {
  line-height: 1.3;
}
.error-detail {
  color: silver;
  margin-top: 15px;
}

/* ── 10. SPACING UTILITIES ──────────────────────────────── */
/* Rank templates use a non-standard spacing scale (12px, 20px, 32px) that
   doesn't map to Bootstrap 5's default utilities. Custom classes below
   preserve Rank's exact pixel values without shadowing Bootstrap names.
   Bootstrap's native .mb-3, .mb-4, .gap-2, .py-3, etc. remain unmodified. */
.site-content .gap-12 { gap: 12px; }
.site-content .gap-24 { gap: 24px; }

.site-content .py-12 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.site-content .py-16 { padding-top: 1rem; padding-bottom: 1rem; }
.site-content .py-32 { padding-top: 32px; padding-bottom: 32px; }
.site-content .px-12 { padding-left: 0.75rem; padding-right: 0.75rem; }
.site-content .px-16 { padding-left: 1rem; padding-right: 1rem; }
.site-content .px-20 { padding-left: 1.25rem; padding-right: 1.25rem; }

.site-content .mb-32 { margin-bottom: 32px; }
.site-content .mt-32 { margin-top: 32px; }

/* ── 11. ICON HELPERS ───────────────────────────────────── */
.icon-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Dead CSS - zero view usage. Commenting out for QA verification.
.icon-flex.icon-flex--start {
  align-items: flex-start;
}
*/
.icon-inline,
.icon-inline-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inline-icon {
  width: 84px;
  height: 84px;
  border-radius: 8px;
  background-color: var(--brand-indigo-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inline-icon.circle {
  border-radius: 50%;
}
.inline-icon.dark {
  background-color: var(--brand-indigo);
}
.inline-icon.medium {
  width: 48px;
  height: 48px;
}
.inline-icon.medium svg {
  width: 20px;
  height: 20px;
}
.inline-icon.small {
  width: 42px;
  height: 42px;
}
.inline-icon.small svg {
  width: 17px;
  height: 17px;
}
.inline-icon.indigo {
  color: var(--brand-indigo-main);
}

/* ── 12. CARD VARIANTS ───────────────────────────────────── */
.card-xs {
  padding: 16px;
}
.card-sm {
  padding: 24px 12px;
}
.card-md {
  padding: 18px 20px;
}
.card.card-base {
  padding: 24px;
}
.card.lg,
.card-lg {
  padding: 32px;
}

.site-content .card-gray {
  background-color: var(--brand-neutral-100);
  border: none;
}
.site-content .card-gray.border {
  border: 1px solid var(--brand-neutral-200);
}

.card-highlight {
  background: var(--brand-indigo-50);
  border: 1px solid var(--brand-indigo-100);
  display: flex;
  overflow: hidden;
}
.card-highlight.light {
  background: var(--brand-neutral-50);
  --bs-card-border-width: 0;
  border: none;
}
.card-highlight.lighter {
  background: var(--brand-indigo-50);
}
.card-highlight.lighter.border {
  border: 1px solid var(--brand-indigo-200);
}
.card-highlight.light.border {
  border: 1px solid var(--brand-indigo-200);
}

.site-content .card-dark {
  color: #fff;
  border: 1px solid var(--brand-indigo);
  background: var(--brand-indigo-700);
}

/* ── 13. STATUS & BADGE VARIANTS ────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 24px;
  padding: 4px 8px;
  min-width: max-content;
}
.status-automatic {
  color: var(--brand-neutral-700);
  background-color: var(--brand-neutral-100);
}
.status-required {
  color: var(--destructive-500-main);
  background-color: var(--destructive-50);
  border-radius: 24px;
  padding: 4px 8px;
}
.status-progress {
  color: var(--brand-indigo-light);
  background-color: var(--brand-indigo-50);
}
.status-paid {
  color: var(--success-500-main);
  background-color: var(--success-50);
}

/* ── 14. MISC / ONE-OFF ──────────────────────────────────── */
.name-initial-circle {
  border-radius: 50%;
  border: 1px solid var(--brand-indigo-200);
  background-color: var(--brand-indigo-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-indigo-light);
  font-size: 16px;
  font-weight: 600;
  width: 40px;
  height: 40px;
}

/* Dead CSS - no view uses .inactive class. Commenting out for QA verification.
.inactive .name-initial-circle {
  border: 2px solid #fff;
  background-color: var(--brand-indigo-50);
}
*/

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}
.detail-label {
  color: var(--brand-neutral-500);
  margin-bottom: 0.25rem;
}
.detail-value {
  font-size: 16px;
  color: var(--brand-neutral-900);
}
.detail-value.amount {
  font-size: 1rem;
  font-weight: 700;
}
/* Dead CSS - zero view usage. Commenting out for QA verification.
.detail-grid .col-full {
  grid-column: 1 / -1;
}
*/
hr.divider-inset {
  margin: 0.75rem 0;
  border-color: var(--brand-neutral-200);
}

/* Override legacy green (#679f2b) */
.site-content .positiveHighlight {
  color: var(--success-500-main);
}

/* Dim label when sibling input is disabled */
.field-wrap:has(input:disabled) > .form-label {
  color: var(--brand-neutral-400);
}

/* Fixed-size icon pin (use alongside icon-* classes) */
.px16 {
  width: 16px;
  height: 16px;
}

#bootscore-navbar {
  gap: 12px;
}

#nav-main > .container {
  flex-wrap: nowrap;
}

#offcanvas-navbar .offcanvas-body {
  gap: 12px;
}

#offcanvas-navbar .header__main-cta {
  display: flex;
  gap: 12px;
}

.header__main-cta .menu-item {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-link {
  font-weight: 700;
  color: var(--brand-neutral-900);
  font-size: 16px;
}

.nav-link:hover {
  color: var(--brand-indigo);
}

header .dropdown-menu {
  border: 0;
}

.step-number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.875rem;
}

.flow-container.constrained-sm {
  max-width: 640px;
}

.two-col-cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .two-col-cards {
    flex-direction: row;
  }
  .two-col-cards > div {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ── 15. RESPONSIVE MEDIA QUERIES ───────────────────────── */

@media (max-width: 575.98px) {
  .site-content .input-copy {
    border: 0;
    padding: 0;
    color: var(--brand-indigo-light);
  }
  .site-content .input-copy .btn-copy {
    display: none;
  }

  .site-content .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .alert-banner__action {
    flex: 1 0 100%;
    justify-content: center;
    margin: auto;
  }
  .alert-banner__action .btn {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 768px) {


  .site-content .h2-desktop {
    font-size: 28px;
    line-height: 36px;
  }

  header .navbar-brand.xs img {
    max-width: 34.4vmin;
  }

  .card-lg,
  .card.lg,
  .card {
    padding: 16px;
  }
  .card-highlight .accordion-compact {
    margin-top: 16px;
  }
  /* Loan Instructions: add spacing between text and button column on mobile stack */
  .card-dark .row > [class*="col-md-5"] {
    margin-top: 20px;
  }
  a.back-arrow {
    display: inline-flex;
  }
}

@media (min-width: 768px) {
  .alert-banner__body {
    gap: 16px;
    padding: 16px 24px;
  }
}

@media (max-width: 1200px) {
  .name-initial-circle {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  header.site-header #bootscore-navbar {
    align-items: start;
    gap: 0;
  }

  .top-nav-widget {
    margin-top: 12px;
  }
}

.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-wrap-container {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.gauge-svg {
  width: 320px;
  max-width: 100%;
  overflow: visible;
}
.gauge-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -4rem;
}
/* Dead CSS - Rank gauge demo leftovers, _LoanGauge uses .h2-desktop instead.
   Commenting out for QA verification.
.gauge-sub {
  display: block;
  font-size: 13px;
  color: var(--brand-neutral-500);
  margin-bottom: 4px;
}
.gauge-val {
  display: block;
  font-size: 32px;
  font-weight: 500;
  color: var(--brand-neutral-900);
}
*/


/* ============================================================
   Page layouts, structural shells, and page-specific patterns
   for the Rank Media V3 redesign (MyAccount + ApplyNow).

   Sections:
      1. Main nav tab strip
      2. Page layouts
      3. Flow wizard (application steps)
      4. Repeating rows / cells / links
      5. Disclaimer modal
      6. Form action buttons
      7. Inline alerts
      8. Contract signing
      9. Extracted inline utilities
     10. Scheduler (overdue payment options)
     11. Background overlay
     12. jQuery UI dialog override (wizard alert)
     13. Wizard split payment table
   ============================================================ */

/* ── 1. MAIN NAV TAB STRIP ───────────────────────────────── */

/* Nav wrapper under masthead */
.main-nav {
  width: 100%;
  border-top: 1px solid var(--brand-neutral-200);
  margin-bottom: 32px;
}

.main-nav>.container-xl,
.main-nav__inner {
  padding-top: 1.5rem;
}

/* Tab menu container (rounded bar holding My Account / Loan History / Account tabs) */
.main-nav-track {
  display: flex;
  flex: 1 0 0%;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.25rem;
  border-radius: 12px;
  background-color: var(--brand-neutral-100);
}

@media (min-width: 576px) {
  .main-nav-track {
    padding: 0.5rem;
  }
}

/* Tab link base (inactive state) */
.main-nav-tab {
  display: flex;
  flex: 1 0 0%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  color: var(--brand-neutral-700);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

@media (min-width: 576px) {
  .main-nav-tab {
    padding: 0.5rem 1rem;
  }
}

.main-nav-tab:hover {
  color: var(--brand-neutral-900);
  text-decoration: none;
}

/* Active state */
.main-nav-tab.is-active {
  background-color: #fff;
  color: var(--brand-indigo);
  font-weight: 500;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Tab-icon responsive visibility */
.main-nav-icon {
  display: none;
}

@media (min-width: 576px) {
  .main-nav-icon {
    display: inline;
  }
}


/* ── 2. PAGE LAYOUTS ─────────────────────────────────────── */

/* Full-height page with column flex */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
}

/* Padded main content column that grows inside .app-shell */
.app-main {
  flex-grow: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Site header bottom border */
.site-header {
  border-bottom: 1px solid var(--brand-neutral-200);
}

/* Wizard/flow page shell */
.flow-shell {
  min-height: 100vh;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Narrow wizard reading column (870px max-width) */
.flow-container {
  width: 100%;
  max-width: 870px;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
}

/* Contract signing pages need more width for the server-generated contract HTML
   (table is designed for ~1000px). Matches master's 1080px section-inner. */
.flow-container.flow-contract {
  max-width: 1080px;
}

/* Sidebar column, stacks on mobile */
.layout-two-column {
  align-items: flex-start;
}

@media (min-width: 768px) {
  .layout-two-column {
    flex-wrap: nowrap;
  }
}

.layout-sidebar {
  flex: 0 1 auto;
  width: 100%;
  display: none;
  min-width: 0;
}

@media (min-width: 768px) {
  .layout-sidebar {
    display: flex;
    flex-direction: column;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    height: auto;
    align-self: stretch;
  }
}

/* Mobile sidebar/main toggle for Account page.
   Default (no tab selected): show sidebar list full-width, hide main panel.
   When a tab is explicitly selected: hide sidebar, show main panel. */
@media (max-width: 767.98px) {
  .mobile-nav .layout-sidebar {
    display: flex;
    flex-direction: column;
  }
  .layout-two-column.mobile-nav:not(.tab-selected) .layout-main { display: none; }
  .layout-two-column.mobile-nav.tab-selected .layout-sidebar { display: none; }
}

/* Override icon color inside selected sidebar items */
.layout-sidebar .text-brand-indigo-main svg {
  color: var(--brand-indigo-main);
}

/* Paired main column */
.layout-main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .layout-main {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
}


/* Mobile back arrow - returns to sidebar list on Account page */
.back-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--brand-neutral-900);
  text-decoration: none;
  margin-right: 0.5rem;
}
.back-arrow:hover {
  color: var(--brand-indigo-main);
  text-decoration: none;
}


/* ── 3. FLOW WIZARD (APPLICATION STEPS) ──────────────────── */

/* Wizard screen title (inherits font styles from .h4-medium) */
.flow-title {
  margin-top: 0.5rem;
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.flow-title+hr {
  padding-bottom: 1rem;
  margin-top: 0;
}

/* Step-progress block - wrapper for label + progress + meta */
.flow-progress {
  margin-bottom: 3rem;
}

.flow-progress__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--brand-neutral-900);
  margin-bottom: 0.75rem;
}

.flow-progress__track {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.flow-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow-progress__meta-next {
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-neutral-500);
}

.flow-progress__meta-percent {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--brand-neutral-900);
}

/* ── 4. REPEATING ROWS / CELLS / LINKS ───────────────────── */

/* Loan-history sidebar nav button (unselected base) */
.sidebar-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid var(--brand-neutral-200);
  background-color: #fff;
  color: var(--brand-neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sidebar-nav-item:hover {
  border-color: var(--brand-indigo-100);
  color: var(--brand-neutral-900);
}

.sidebar-nav-item.is-selected {
  background-color: var(--brand-indigo-50);
  border-color: var(--brand-indigo-200);
  color: var(--brand-indigo-700);
}

/* Tappable settings row button (account settings list) */
.settings-row-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid var(--brand-neutral-200);
  background-color: #fff;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.settings-row-btn:hover {
  border-color: var(--brand-indigo-100);
  background-color: var(--brand-neutral-50);
}

/* Inline "Edit" action beside read-only fields */
.site-content .field-edit-link,
.site-content .field-edit-link:visited {
  padding: 0;
  background: none;
  border: 0;
  color: var(--brand-indigo-main);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}

.site-content .field-edit-link:hover {
  color: var(--brand-indigo-main);
  opacity: 0.85;
  text-decoration: none;
}

/* Right-aligned monetary cell in payment tables */
.cell-amount {
  text-align: right;
  font-weight: 700;
}

/* Payment list - flex-based replacement for payment tables.
   Desktop: single row (date | badge | amount).
   Mobile (<576px): stacked vertically. */
.payment-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
}
.payment-item + .payment-item {
  border-top: 1px solid var(--brand-neutral-200);
}
.payment-date {
  white-space: nowrap;
  min-width: 110px;
}
.payment-item .payment-type {
  flex: 1;
  text-align: center;
}
.payment-amount {
  min-width: 110px;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}


.payment-list-header,
.payment-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 12px 0;
  font-size: 0.875rem;
}
.payment-list-header {
  color: var(--brand-neutral-500);
  font-weight: 500;
}
.payment-list-row {
  border-top: 1px solid var(--brand-neutral-200);
}

/* ── 5. DISCLAIMER MODAL ────────────────────────────────── */

/* Modal wrapper - borderless white card matching Figma modal pattern */
.disclaimer-modal .modal-dialog {
  max-width: 480px;
}

.disclaimer-modal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.disclaimer-modal .modal-body {
  padding: 32px 28px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Close button */
.disclaimer-modal .modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--brand-neutral-500);
  line-height: 0;
  display: inline-flex;
  max-width: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: normal;
  box-shadow: none;
  border-radius: 0;
}
.disclaimer-modal .modal-close-btn:hover {
  color: var(--brand-neutral-900);
}

.disclaimer-modal .inline-icon {
  margin: 0 auto;
}

.disclaimer-modal .modal-body img {
  border: 1px solid var(--brand-neutral-300);
}

/* Override boundary a { color: inherit } inside the modal */
.disclaimer-modal a {
  color: var(--brand-indigo-main);
  text-decoration: underline;
}
.disclaimer-modal a:hover {
  color: var(--brand-indigo-700);
}
.disclaimer-modal a:visited {
  color: var(--brand-indigo-main);
}
.disclaimer-modal h3 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Checkbox acknowledgment row - bordered card per Figma default.png */
.disclaimer-acknowledge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--brand-neutral-200);
  border-radius: 8px;
  margin-top: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.disclaimer-acknowledge:hover {
  border-color: var(--brand-indigo-100);
}

.disclaimer-acknowledge label {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--brand-neutral-900);
  cursor: pointer;
  margin: 0;
}

.disclaimer-acknowledge input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-indigo-main);
  flex-shrink: 0;
  cursor: pointer;
}

/* Provincial purple border (BC, MB, NB, NL, SK). */
.disclaimer-purple-border {
  border: 8px solid #920492;
  border-radius: 9px;
}


/* ── 5b. PAGINATION ──────────────────────────────────────── */

/* Bootstrap overrides for the paged-list component */
.paged-list-pagination {
  padding-top: 8px;
}

.paged-list-pagination .page-link {
  border: none;
  background: none;
  color: var(--brand-neutral-700);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.paged-list-pagination .page-link:hover {
  background-color: var(--brand-neutral-100);
  color: var(--brand-neutral-900);
}

.paged-list-pagination .page-item.active .page-link {
  background: none;
  border: 1.5px solid var(--brand-indigo-main);
  color: var(--brand-indigo-main);
  font-weight: 600;
}

.paged-list-pagination .page-item.disabled .page-link {
  background: none;
  opacity: 0.4;
}

.paged-list-pagination .page-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}


/* ── 6. FORM ACTION BUTTONS ────────────────────────────────── */

/* Pill-shaped form submit/cancel buttons */
.btn-form-action {
  border-radius: 60px;
  padding: 0.75rem 3rem;
  font-weight: 500;
  min-width: 140px;
}


/* ── 7. INLINE ALERTS ─────────────────────────────────────── */

/* Inline alert bar - bordered strip with icon, message, close button.
   Matches Rank Media "Alert / inline" pattern. */
.alert-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}

.alert-inline-success {
  background-color: var(--success-50, #F0FDF4);
  border: 1px solid var(--success-200, #BBF7D0);
  color: var(--success-800, #166534);
}

.alert-inline-warning {
  background-color: var(--brand-amber-50, #FFFBEB);
  border: 1px solid var(--brand-amber-200, #FDE68A);
  border-left: 4px solid var(--brand-amber-main, #F59E0B);
  color: var(--brand-amber-800, #582A00);
}
.alert-inline-warning.alert-inline-flat {
  border-left: 1px solid var(--brand-amber-200, #FDE68A);
}

.alert-inline-icon {
  flex-shrink: 0;
  display: inline-flex;
}
.alert-inline-icon.amber-circle {
  background-color: var(--brand-amber-lighter);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.alert-inline-message {
  flex: 1;
}

.alert-inline-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  box-shadow: none;
  border-radius: 0;
}

.alert-inline-close:hover {
  opacity: 1;
}


/* ── 8. CONTRACT SIGNING ──────────────────────────────────── */

/* Constrains the server-rendered contract HTML and allows horizontal scroll
   if the contract contains wide tables. */
.contract-container {
  max-width: 1000px;
  overflow-x: auto;
  padding-top: 5px;
  margin-top: 5px;
}

@media (min-width: 576px) {
  .contract-review-section #StartContract {
    width: auto;
  }
}


/* ── 9. EXTRACTED INLINE UTILITIES ──────────────────────────── */

/* Bordered input group - rounded wrapper for prefix + input combos */
.input-group-bordered {
  border: 1px solid var(--brand-neutral-200);
  border-radius: 8px;
  overflow: hidden;
}

.input-group-bordered .form-control {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.input-group-bordered > span:first-child {
  min-width: 5.5rem;
  justify-content: center;
}
/* Override for phone type selects inside input-group-bordered.
   Inherits form-control styling (padding, font, caret) but
   overrides width/border to fit inside the bordered container. */
#main .site-content .phone-type-select {
  width: auto;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  flex-shrink: 0;
}

/* Fixed-width column for phone type dropdown, input label prefix, etc. */
.col-type {
  flex-basis: 30%;
  flex-shrink: 0;
}

/* Fixed min-width for phone type label in profile readonly display */
.phone-type-label {
  min-width: 5rem;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 1px 2px 0 rgba(16, 24, 40, 0.04);
}

/* Step indicator circles - numbered flow steps */
.step-circle {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
  min-width: 32px;
}

.step-circle-sm {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  min-width: 28px;
}

.zum-iframe {
  border: 0;
  margin-top: 20px;
  width: 100%;
  height: 1000px;
}

/* Icon circles - sized containers for SVG icons */
.icon-circle-inline {
  width: 18px;
  height: 18px;
}

.icon-circle-heading {
  width: 24px;
  height: 24px;
}

.icon-circle-hero {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.icon-circle-hero svg {
  width: 36px;
  height: 36px;
}

.icon-circle-hero-lg {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

/* Gauge chart legend dots */
.gauge-legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.gauge-legend-dot-primary {
  background-color: var(--brand-indigo-main);
}

.gauge-legend-dot-progress {
  background-image: radial-gradient(circle, #5659F0 1px, transparent 1px);
  background-size: 4px 4px;
  border: 1px solid var(--brand-indigo-200);
}

.gauge-legend-dot-light {
  background-color: var(--brand-indigo-50);
  border: 1px solid var(--brand-indigo-100);
}

/* Radio button row - consistent tap target height */
.radio-row {
  min-height: 48px;
}

/* Monospace code example - bank transit/institution/account samples */
.code-example {
  border: 1px solid var(--brand-neutral-400);
}

/* Accordion item without side/corner borders - flush within cards */
.accordion-item-borderless {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}


/* --- Date dropdown selects (dateDropDowns plugin) --- */
.dateLists_container {
  display: flex;
  gap: 6px;
}

.dateLists_container .year_container,
.dateLists_container .month_container,
.dateLists_container .day_container {
  display: flex;
  flex-direction: column;
}

#main .site-content .dateLists_container select {
  display: inline-block;
  width: auto;
}

.dateLists_container .ui-datepicker-trigger {
  width: 16px;
  height: 16px;
  cursor: pointer;
  align-self: center;
}

/* --- Wizard validation (Type of Loan / Validation / Amount) --- */
.wizard-validation-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  flex: 1;
}

.wizard-val {
  background-color: var(--brand-neutral-100);
  border: 1px solid var(--brand-neutral-200);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}

.text-destructive-500 {
  color: var(--destructive-500-main, #D72323);
}


/* ── 10. SCHEDULER (OVERDUE PAYMENT OPTIONS) ────────────── */

/* Keep the balance compact so self-scheduling remains the main action. */
.site-content .sched-loan-summary {
	border: 1px solid var(--brand-neutral-200);
}

.sched-loan-banner {
	background: var(--destructive-500-main);
	font-weight: 600;
	padding: 8px 16px;
}

.sched-loan-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 24px;
	padding: 24px;
}

.sched-loan-gauge {
	align-self: center;
	min-width: 0;
}

.sched-loan-gauge .gauge-svg {
	width: 280px;
}

.sched-loan-gauge .flex-between {
	gap: 12px;
}

.sched-loan-gauge .flex-between > span {
	flex-shrink: 0;
}

.sched-loan-details {
	border-left: 1px solid var(--brand-neutral-200);
	padding-left: 24px;
	min-width: 0;
}

.sched-loan-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 3px 0;
	font-size: 14px;
	line-height: 20px;
}

.sched-loan-row > span:first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sched-loan-row > span:last-child {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.sched-loan-balance-only {
	grid-column: 1 / -1;
}

.site-content .sched-heading {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	scroll-margin-top: 24px;
}

@media (max-width: 767.98px) {
	.sched-loan-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 16px;
	}

	.sched-loan-details {
		border-left: 0;
		border-top: 1px solid var(--brand-neutral-200);
		padding-left: 0;
		padding-top: 16px;
	}
}

/* Card wrapper for each payment option */
.sched-option {
  padding: 1.25rem;
}

.site-content .sched-option-header {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--brand-neutral-900);
  text-align: center;
  margin-bottom: 0.75rem;
}

.sched-option-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.sched-option-dates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  max-width: 420px;
}

.sched-option-body > .btn {
  flex-shrink: 0;
  align-self: flex-end;
}

#main .site-content input.sched-input[readonly] {
  background-color: #fff;
  border-color: var(--brand-neutral-200, #E5E7EB);
  color: var(--brand-neutral-700, #374151);
  text-align: center;
  cursor: default;
}

/* Date picker overlay - text input sits on top of native date input */
.sched-date-picker {
  position: relative;
  display: flex;
}

.sched-date-picker .etrans {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.sched-date-picker input[type="date"] {
  position: relative;
  z-index: 1;
}

/* Clickable date inputs get pointer cursor */
.sched-input.etrans[readonly] {
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .sched-option-body {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .sched-option-body > .btn {
    align-self: center;
  }
}

/* ── 11. BACKGROUND OVERLAY ─────────────────────────────── */
/* Translucent backdrop shown during form submissions
   (Wizard, ContractSign). Originally in old_main.css. */
.bg-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(185, 185, 185, 0.70);
  z-index: 1000;
  display: none;
}

body.waiting * {
  cursor: progress;
}


/* ── 12. JQUERY UI DIALOG OVERRIDE (Wizard alert) ──────── */

.ui-widget-overlay {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

.ui-dialog.error {
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--destructive-border);
  border-top: 4px solid var(--destructive-500-main);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  padding: 0;
  background: var(--destructive-50);
  overflow: hidden;
  min-width: 380px;
  max-width: 420px;
}

.ui-dialog.error .ui-dialog-titlebar {
  display: none;
}

.ui-dialog.error .ui-dialog-content.ui-widget-content {
  padding: 20px 24px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-neutral-700);
  display: flex;
  gap: 14px;
  align-items: center;
}

.ui-dialog.error .ui-dialog-content::before {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--destructive-100) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.89243 6.01391C10.8286 4.3912 13.1706 4.3912 14.1068 6.01391L20.0704 16.3509C21.0061 17.9727 19.8356 19.9993 17.9633 19.9993H6.03595C4.16359 19.9993 2.99311 17.9727 3.92877 16.3509L9.89243 6.01391ZM11.9998 10.2684C12.3357 10.2684 12.608 10.5407 12.608 10.8766V13.9175C12.608 14.2534 12.3357 14.5257 11.9998 14.5257C11.6639 14.5257 11.3916 14.2534 11.3916 13.9175V10.8766C11.3916 10.5407 11.6639 10.2684 11.9998 10.2684ZM11.9998 16.9584C12.3357 16.9584 12.608 16.6861 12.608 16.3502C12.608 16.0143 12.3357 15.742 11.9998 15.742C11.6639 15.742 11.3916 16.0143 11.3916 16.3502C11.3916 16.6861 11.6639 16.9584 11.9998 16.9584Z' fill='%23D72323'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.ui-dialog.error .ui-dialog-content p {
  padding: 0;
  margin: 0;
}

.ui-dialog.error .ui-dialog-buttonpane {
  border: none;
  padding: 0 24px 16px 82px;
  margin: 0;
  background: transparent;
  text-align: left;
}

.ui-dialog.error .ui-dialog-buttonpane button {
  background: var(--destructive-500-main);
  color: #fff;
  border: 1px solid var(--destructive-500-main);
  border-radius: 999px;
  padding: 8px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ui-dialog.error .ui-dialog-buttonpane button:hover {
  opacity: 0.9;
}

/* ── 13. WIZARD SPLIT PAYMENT TABLE ─────────────────────── */
/* Moved from content.css (wizard-specific, not legacy) */

#SplitPaymentTable td {
  line-height: 2em;
  font-size: 1em;
}

@media screen and (max-width: 760px) {
  #SplitPaymentTable td {
    line-height: 1.6em;
  }
}

#SplitPaymentTable {
  font-size: medium;
}

#errorList li {
  list-style: disc;
}

.positiveHighlight {
  color: #679f2b;
}