/* Remove border on fr-wizard-body as requested */
.orbeon .fr-wizard-body { border: none !important; }
/* Hide fr-wizard-navigation as requested */
.orbeon .fr-wizard-navigation { display: none !important; }
/* === Remove h2.fr-section-title::after line === */
h2.fr-section-title::after {
  content: none !important;
  background: none !important;
  height: 0 !important;
}
/* === Remove fixed 320/880 grid and center buttons === */
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard {
    grid-template-columns: 260px 1fr !important; /* narrower TOC, flexible body */
  }
}
/* Center the button bar beneath the wizard */
.orbeon .fr-buttons {
  width: 100%;
  display: flex;
  justify-content: center !important;
  gap: 1.5rem;
  margin-top: 2.5rem !important;
}
.orbeon .fr-buttons .btn { margin-right: 0 !important; }
/* === End grid & button centering override === */
/* === Spacing Reset to Backup (20250918-113731) for TOC + Main Form === */
@media (min-width: 981px) {
  /* Restore original grid proportions and gap */
  .orbeon .xbl-fr-wizard {
    grid-template-columns: minmax(220px, 280px) 1fr !important;
    gap: var(--spacing-xl) !important; /* was var(--spacing-xl) in backup */
    align-items: flex-start !important;
  }
  /* TOC padding from backup: var(--spacing-lg) var(--spacing-md) */
  .orbeon .xbl-fr-wizard .fr-wizard-toc {
    padding: var(--spacing-lg) var(--spacing-md) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Wizard body padding from backup: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl) */
  .orbeon .xbl-fr-wizard .fr-wizard-body {
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl) !important;
  }
  /* Outer container spacing from backup */
  /* Remove border from full appearance containers */
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full {
    margin: var(--spacing-xl) auto !important;
    padding: var(--spacing-xl) var(--spacing-lg) !important;
    border: none !important;
  }
}
@media (max-width: 980px) {
  .orbeon .xbl-fr-wizard {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--spacing-lg) !important;
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc {
    order: -1;
    width: 100% !important;
    max-width: none !important;
  }
  .orbeon .xbl-fr-wizard .fr-wizard-body {
    width: 100% !important;
    max-width: none !important;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl) !important;
  }
}
@media (max-width: 640px) {
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full { padding: var(--spacing-lg) var(--spacing-md) !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-body { padding: var(--spacing-lg) 0 !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc { padding: 0 !important; }
}
@media (max-width: 640px) {
  .orbeon .fr-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .orbeon .fr-buttons .btn {
    width: 100% !important;
  }
}
/* === End Spacing Reset === */
/* === Final Width Overrides (Remove 600px constraint & widen body) === */
@media (min-width: 981px) {
  .orbeon .fr-form,
  .orbeon .xforms-dialog,
  .orbeon .fr-view-appearance-full {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Keep wizard layout with narrower TOC and wide body */
  .orbeon .xbl-fr-wizard {
    grid-template-columns: 190px minmax(0, 1100px) !important;
    justify-content: center !important;
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc {
    max-width: 190px !important;
    min-width: 190px !important;
  }
  .orbeon .xbl-fr-wizard .fr-wizard-body,
  .orbeon .fr-section-content,
  .orbeon .fr-grid-body {
    max-width: 1100px !important;
    margin: 0 auto !important;
  }
  /* Slightly tighten inner section padding for balance at larger width */
  .orbeon .xbl-fr-wizard .fr-wizard-body { padding: 2rem 2.25rem 2.5rem !important; }
}
/* === End Final Width Overrides === */
/* === User Center Section Maximum Width Override === */
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard .fr-wizard-body {
    max-width: 1200px !important;
    width: 100% !important;
    flex: 1 1 0 !important;
  }
  .orbeon .fr-section-content {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .orbeon .fr-grid-body {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* === End User Center Section Maximum Width Override === */
/* === User TOC/Main Section Size Adjustment (High Specificity) === */
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard {
    grid-template-columns: 200px minmax(0, 1000px) !important;
    gap: 2.5rem !important;
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc {
    min-width: 180px !important;
    max-width: 220px !important;
  }
  .orbeon .xbl-fr-wizard .fr-wizard-body {
    max-width: 1000px !important;
  }
}
/* === End User TOC/Main Section Size Adjustment === */
/* === User Final Style Overrides (High Specificity) === */
.orbeon button.btn,
.orbeon button.btn.next,
.orbeon button.btn.primary,
.orbeon button.next {
  background: rgb(46, 69, 97) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
}
.orbeon button.btn:hover,
.orbeon button.btn.next:hover,
.orbeon button.btn.primary:hover,
.orbeon button.next:hover {
  background: #254561 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.orbeon .xbl-fr-wizard .fr-wizard-body {
  box-shadow: none !important;
  background: #fff !important;
}
.orbeon .xbl-fr-wizard {
  gap: 1.5rem !important;
}
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard {
    gap: 2rem !important;
  }
}
/* === End User Final Style Overrides === */

/* User requested overrides: Top header, form labels, inputs, stepper, buttons */
/* Top Header */
.header {
  /* Top banner uses requested RGB color */
  background-color: rgb(46, 69, 97); /* #2E4561 */
  color: #ffffff; /* banner text white */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
}

/* Form Labels */
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
label.required::after {
  content: " *";
  color: red;
}

/* Input Fields */
input, select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
  margin-bottom: 16px;
  box-shadow: none;
}

/* Stepper */
.stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.stepper .step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.stepper .step.active {
  border-color: #2E3A47;
  color: #2E3A47;
}

/* Buttons */
button {
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
}
button.save, button.summary {
  background: #6c757d;
  color: #fff;
}
button.next {
  background: #f1f1f1;
  color: #333;
}

/* Typography & Base Styles */
:root {
  --font-family-base: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  --color-text: #1f2933;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --color-app-bg: #f3f4f8;

  --color-primary: #2563eb;
  --color-secondary: #111827;
  --color-accent: #2563eb;

  --color-gray-light: #f1f5f9;
  --color-gray-mid: #e2e8f0;
  --color-gray-dark: #94a3b8;

  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.08);

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-xxl: 3.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  --border-radius-sm: 0.45rem;
  --border-radius: 0.85rem;
  --border-radius-lg: 1.5rem;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  /* Use a pure white page background as requested */
  background-color: #FFFFFF; /* override --color-app-bg for page background */
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* Remove borders/shadows from main containers to eliminate side lines */
.orbeon,
.orbeon form,
.orbeon .fr-form,
.orbeon .xforms-dialog,
.orbeon .fr-layout-grid {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Navbar */
.navbar,
.orbeon .navbar-inverse .navbar-inner {
  /* Use requested top banner color to match .header */
  background: rgb(46, 69, 97); /* #2E4561 */
  color: #ffffff;
  border-bottom: none;
  box-shadow: var(--shadow-soft);
  padding: var(--spacing-sm) 0;
  /* Make navbar square with no rounding */
  border-radius: 0 !important;
}

.orbeon .navbar-inverse .navbar-inner .container h1 {
  background-color: transparent;
  color: #fff;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
}

/* Headers & Footers */
.custom-header,
.custom-footer {
  font-family: var(--font-family-base);
  margin-bottom: var(--spacing-md);
}

.custom-header {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-mid);
}

.custom-header a {
  border-bottom: none;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.custom-header a:hover {
  color: var(--color-primary);
}

.custom-header p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: var(--spacing-xs) 0;
}

.custom-footer p {
  font-size: 0.95rem;
  color: var(--color-muted);
}

.custom-footer h2 {
  color: var(--color-secondary);
  font-size: 1.4rem;
  line-height: 1.25;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semi-bold);
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.kroll-footer {
  background-color: #4d4d4f;
  color: #fff;
  padding: 16px 24px;
  margin-top: 24px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: var(--font-family-base);
}

.kroll-footer p {
  margin: 0;
  color: #fff;
}

.kroll-footer a,
.kroll-footer a:visited {
  color: #fff;
  text-decoration: underline;
}

.kroll-footer a:hover {
  text-decoration: none;
}

.orbeon button.btn {
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1d4ed8 100%);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.02em;
  margin-right: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding: 0.85rem 1.6rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.orbeon button.btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}

.orbeon button.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.orbeon button.btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.orbeon button.btn[disabled],
.orbeon button.btn:disabled {
  background: var(--color-gray-mid);
  color: var(--color-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* Headings */
.orbeon h2 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semi-bold);
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
  color: var(--color-secondary);
  letter-spacing: 0.01em;
}

/* Links hover */
a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Form labels */
.orbeon .xforms-label,
.orbeon .control-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  /* Disable forced full uppercase per request */
  text-transform: none;
  letter-spacing: 0.02em; /* reduced letter spacing for normal case */
  color: var(--color-muted);
  margin-bottom: var(--spacing-xs);
}

/* Form elements - larger, rounded inputs */
.orbeon input[type="text"],
.orbeon input[type="email"],
.orbeon input[type="tel"],
.orbeon input[type="number"],
.orbeon input[type="date"],
.orbeon select,
.orbeon textarea {
  font-family: var(--font-family-base);
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-mid);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-gray-light);
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  appearance: none;
}

.orbeon select {
  padding-right: 2.75rem;
  /* Standard appearance property for broader compatibility */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231f2937' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) 50%;
  background-size: 0.85rem;
}

.orbeon input[type="text"]:focus,
.orbeon input[type="email"]:focus,
.orbeon input[type="tel"]:focus,
.orbeon input[type="number"]:focus,
.orbeon input[type="date"]:focus,
.orbeon select:focus,
.orbeon textarea:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
  outline: none;
}

.orbeon select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.orbeon input[type="text"]::placeholder,
.orbeon input[type="email"]::placeholder,
.orbeon input[type="tel"]::placeholder,
.orbeon textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.75;
}

.orbeon input[type="checkbox"],
.orbeon input[type="radio"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

.orbeon fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
}

.orbeon fieldset legend {
  font-size: 0.85rem;
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.02em;
  /* Keep legend readable without uppercase */
  text-transform: none;
  color: var(--color-muted);
  margin-bottom: var(--spacing-sm);
}

.orbeon .xforms-control {
  margin-bottom: var(--spacing-md);
}

.orbeon .xforms-help {
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: var(--spacing-xs);
}

/* Each section as a card */
.orbeon .xbl-fr-section {
  background: var(--color-bg);
  border-radius: var(--border-radius);
  border: none;
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
}

/* Section titles */
.orbeon .fr-section-title {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.orbeon .xbl-fr-section h2.fr-section-title,
.orbeon .xbl-fr-section h3.fr-section-title,
.orbeon .xbl-fr-section h4.fr-section-title,
.orbeon .xbl-fr-section h5.fr-section-title,
.orbeon .xbl-fr-section h6.fr-section-title {
  margin: 0 0 var(--spacing-md) 0;
  font-weight: var(--font-weight-semi-bold);
  padding: 0;
  color: var(--color-secondary);
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.orbeon .xbl-fr-section h2.fr-section-title::after,
.orbeon .xbl-fr-section h3.fr-section-title::after,
.orbeon .xbl-fr-section h4.fr-section-title::after,
.orbeon .xbl-fr-section h5.fr-section-title::after,
.orbeon .xbl-fr-section h6.fr-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-gray-mid);
  opacity: 0.6;
}

/* Tables */
.orbeon table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: none;
  box-shadow: none;
  background: #fff; /* Ensure the table has a white background */
  margin: var(--spacing-md) 0;
}

.orbeon .table th {
  font-family: var(--font-family-base);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semi-bold);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-gray-light);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-mid);
  color: var(--color-secondary);
}

.orbeon .table td {
  font-family: var(--font-family-base);
  font-size: 1.05rem;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-mid);
}

/* Utility Classes */
.no-max-width {
  max-width: none;
  margin-right: 3rem;
  padding-right: 5rem;
}

/* Wizard navigation */
.orbeon .xbl-fr-wizard {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc {
  background: var(--color-bg);
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  padding: var(--spacing-lg) var(--spacing-md);
  min-width: 220px;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  counter-reset: wizard-step;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li {
  position: relative;
  counter-increment: wizard-step;
  padding-left: 3rem;
  padding-bottom: var(--spacing-md);
  min-height: 2.75rem;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li::before {
  content: counter(wizard-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  /* Use requested TOC breadcrumb icon color */
  background: #2E4561; /* deep slate */
  color: #ffffff; /* ensure contrast */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semi-bold);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li::after {
  content: "";
  position: absolute;
  left: 1.12rem;
  top: 2.5rem;
  width: 2px;
  height: calc(100% - 2.5rem);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.25) 0%, rgba(148, 163, 184, 0.2) 100%);
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li:last-child::after {
  display: none;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1.4;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: 0.02em;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link .fr-toc-title {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semi-bold);
  color: inherit;
  text-transform: none;
  letter-spacing: 0.02em;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link .fr-toc-status,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link .fr-toc-edit {
  display: none;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.active::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.started::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.changed::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-complete::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.completed::before {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.active > span > .btn-link,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.started > span > .btn-link,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.changed > span > .btn-link,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-complete > span > .btn-link,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.completed > span > .btn-link {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semi-bold);
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-invalid::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-incomplete::before {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-invalid > span > .btn-link,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-incomplete > span > .btn-link {
  color: #b91c1c;
}

.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link:hover {
  color: var(--color-secondary);
}

.orbeon .xbl-fr-wizard .fr-wizard-body {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  background: var(--color-bg);
  padding: 0;
}

/* === Wizard Layout Adjustments (TOC overlap fix) === */
/* The TOC (table of contents) card looked like it was hovering because of large gap + independent shadows. 
   Strategy: tighten horizontal layout, align vertical start, use sticky positioning on wide screens, and 
   collapse gracefully on narrow viewports. */

.orbeon .xbl-fr-wizard {
  /* Increase gap for better visual separation between TOC and body */
  gap: var(--spacing-xl);
  align-items: flex-start; /* ensure both columns start at same top */
}

/* TOC card: ensure consistent width and avoid appearing detached */
.orbeon .xbl-fr-wizard .fr-wizard-toc {
  position: sticky; /* keep visible while scrolling large forms */
  top: 5.5rem;      /* below navbar; adjust if header height changes */
  align-self: flex-start;
  max-height: calc(100vh - 6rem);
  overflow-y: auto; /* scroll TOC internally if long */
  scrollbar-width: thin;
}

/* Provide subtle scrollbar styling (Firefox + WebKit) */
.orbeon .xbl-fr-wizard .fr-wizard-toc::-webkit-scrollbar { width: 6px; }
.orbeon .xbl-fr-wizard .fr-wizard-toc::-webkit-scrollbar-track { background: transparent; }
.orbeon .xbl-fr-wizard .fr-wizard-toc::-webkit-scrollbar-thumb { background: var(--color-gray-mid); border-radius: 3px; }

/* Body column: ensure it expands and aligns flush with TOC top */
.orbeon .xbl-fr-wizard .fr-wizard-body {
  margin-top: 0; /* remove any offset causing misalignment */
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
}

/* Make sure large outer margin centers entire wizard block, not individual columns */
.orbeon .fr-mode-new .fr-view-appearance-full,
.orbeon .fr-mode-edit .fr-view-appearance-full,
.orbeon .fr-mode-view .fr-view-appearance-full,
.orbeon .fr-mode-test .fr-view-appearance-full {
  display: block;
  width: 100%;
  max-width: 1180px; /* allow a bit more width to reduce wrapping */
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

/* Harmonize shadows so TOC and body feel part of same surface layer */
.orbeon .xbl-fr-wizard .fr-wizard-toc,
.orbeon .xbl-fr-wizard .fr-wizard-body { box-shadow: var(--shadow-soft); }

/* Reduce card padding on very wide screens to avoid excessive whitespace */
@media (min-width: 1400px) {
  .orbeon .xbl-fr-wizard .fr-wizard-body { padding: var(--spacing-lg) var(--spacing-xl); }
}

/* Tablet breakpoint: stack but keep TOC ahead of content, styled as horizontal progress if desired */
@media (max-width: 980px) {
  .orbeon .xbl-fr-wizard { gap: var(--spacing-lg); }
  .orbeon .xbl-fr-wizard .fr-wizard-toc { position: relative; top: auto; max-height: none; overflow: visible; }
  .orbeon .xbl-fr-wizard .fr-wizard-body { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl); }
}

/* Small phones: condense spacing further */
@media (max-width: 640px) {
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full { padding: var(--spacing-lg) var(--spacing-md); }
  .orbeon .xbl-fr-wizard .fr-wizard-body { box-shadow: none; padding: var(--spacing-lg) 0; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc { box-shadow: none; padding: 0; }
}

/* Optional: subtle connecting vertical guide between TOC and content (desktop only) */
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard { position: relative; }
  .orbeon .xbl-fr-wizard::before {
    content: "";
    position: absolute;
    left: 270px; /* ~ TOC width + internal padding; adjust if width changes */
    top: 0.75rem;
    bottom: 0.75rem;
    width: 1px;
    background: linear-gradient(var(--color-gray-mid), transparent 60%);
    opacity: 0.4;
    pointer-events: none;
  }
}
/* === End Wizard Layout Adjustments === */

/* === TOC Fully Left, Separated === */
@media (min-width: 981px) {
  /* Make this selector more specific so it overrides other theme styles */
  .orbeon .xbl-fr-wizard.xbl-fr-wizard--custom-layout {
  /* left TOC (fixed width) + main content column that we'll center */
  grid-template-columns: 320px minmax(0, 880px) !important;
  gap: var(--spacing-xxl, 3.5rem); /* large gap for clear separation */
  justify-content: center; /* center the overall wizard block */
  }
  .orbeon .xbl-fr-wizard.xbl-fr-wizard--custom-layout .fr-wizard-toc {
  /* keep TOC visually detached to the left of the centered body */
  margin-left: calc(-1 * var(--spacing-xl, 2.5rem));
  margin-right: var(--spacing-xl, 2.5rem);
  box-shadow: 0 8px 32px rgba(15,23,42,0.10), 0 1.5px 6px rgba(15,23,42,0.06);
  background: #fff;
  z-index: 3;
  position: sticky;
  left: calc(50% - 880px/2 - 320px - var(--spacing-xxl, 3.5rem)) !important; /* align left edge relative to centered body */
  top: 5.5rem;
  border-radius: var(--border-radius-lg, 1.5rem);
  }
  .orbeon .xbl-fr-wizard .fr-wizard-body {
  /* constrain and center the body column visually */
  margin-left: 0;
  background: #fff;
  border-radius: var(--border-radius-lg, 1.5rem);
  box-shadow: var(--shadow-soft);
  z-index: 2;
  }
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full {
    padding-left: var(--spacing-xxl, 3.5rem);
    padding-right: var(--spacing-xxl, 3.5rem);
    background: #f3f4f8;
  }
}

/* Extra large gap variable for clarity */
:root {
  --spacing-xxl: 3.5rem;
}

/* === End TOC Fully Left, Separated === */

/* === Enhanced TOC Features === */

/* Smooth scrolling for TOC navigation links */
html { scroll-behavior: smooth; }

/* Active section highlight animation */
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.active::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.started::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.changed::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-complete::before,
.orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.completed::before {
  /* Match active breadcrumb to requested TOC color with subtle depth */
  background: linear-gradient(135deg, #2E4561 0%, #25495f 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(46, 69, 97, 0.28);
  animation: pulseActive 2s ease-in-out infinite alternate;
}

/* Ensure headings, banners, and titles are not forced uppercase */
.header,
.orbeon .navbar-inverse .navbar-inner .container h1,
.custom-header,
.custom-footer h2,
.orbeon h2,
.orbeon .xbl-fr-section h2.fr-section-title,
.orbeon .fr-section-title {
  text-transform: none;
}

@keyframes pulseActive {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* Mobile TOC dropdown functionality */
@media (max-width: 980px) {
  .orbeon .xbl-fr-wizard .fr-wizard-toc {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  /* TOC Header for mobile - clickable to expand/collapse */
  .orbeon .xbl-fr-wizard .fr-wizard-toc::before {
    content: "Form Sections ▼";
    display: block;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1d4ed8 100%);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: var(--font-weight-semi-bold);
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: background 0.2s ease;
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc:hover::before {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  }

  /* Initially collapsed on mobile */
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    padding: 0 var(--spacing-md);
  }

  /* Expanded state - will be toggled by JavaScript */
  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav {
    max-height: 500px;
    padding: var(--spacing-md);
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded::before {
    content: "Form Sections ▲";
  }

  /* Horizontal layout when expanded on tablet */
  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--spacing-sm);
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav > li {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 200px;
    padding-left: 0;
    text-align: center;
    padding-bottom: var(--spacing-sm);
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav > li::before {
    position: relative;
    margin: 0 auto var(--spacing-xs);
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav > li::after {
    display: none;
  }
}

/* Small phones: simpler vertical stack when expanded */
@media (max-width: 640px) {
  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav > li {
    flex: none;
    min-width: auto;
    max-width: none;
  }
}

/* === End Enhanced TOC Features === */

/* === Final layout & navbar fixes (CSS-only) === */

/* Replace logo picture with text 'Kroll' using CSS only (hide images and inject text) */
.orbeon .navbar-brand picture,
.orbeon .navbar-brand img {
  display: none !important;
}
.orbeon .navbar-brand::before {
  content: "Kroll";
  color: #ffffff;
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  display: inline-block;
}

/* Right-align the H1 title inside the navbar container by using flex layout */
.orbeon .navbar-inverse .navbar-inner .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.orbeon .navbar-inverse .navbar-inner .container h1 {
  margin-left: auto;
  text-align: right;
}

/* Strong desktop override: center wizard body and place TOC to the left without JS.
   This block is intentionally specific and placed at the end so it wins. */
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard {
    display: grid !important;
    justify-content: center !important;
    align-items: start !important;
    position: relative !important;
  }

  .orbeon .xbl-fr-wizard .fr-wizard-toc {
    position: sticky !important;
    top: 5.5rem !important;
    left: calc(50% - 880px/2 - 320px - var(--spacing-xxl, 3.5rem)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
    box-shadow: 0 8px 32px rgba(15,23,42,0.10), 0 1.5px 6px rgba(15,23,42,0.06) !important;
  }

  .orbeon .xbl-fr-wizard .fr-wizard-body {
    margin-left: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
  }
}

/* Removed embedded JS: interactivity belongs in a script file, keeping CSS clean so media/layout rules apply reliably. */

/* === Guide Styles Integration (Form Container / Groups / Inputs / Buttons) === */
/* Container equivalent: wrap Orbeon form main panel */
.orbeon .fr-form, .orbeon .xforms-dialog, .orbeon .fr-view-appearance-full {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  padding: 2rem 2rem 2.25rem;
}

/* Groups: approximate .xforms-control blocks */
.orbeon .xforms-control { margin-bottom: 1.5rem; }

/* Labels (reuse existing but strengthen size & color to match guide) */
.orbeon .xforms-label, .orbeon .control-label, .orbeon fieldset legend {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.5rem;
}

/* Inputs (refine radii and focus transition) */
.orbeon input[type=text],
.orbeon input[type=email],
.orbeon input[type=tel],
.orbeon input[type=number],
.orbeon input[type=date],
.orbeon select,
.orbeon textarea {
  padding: 0.75rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.15s ease;
}
.orbeon input[type=text]::placeholder,
.orbeon input[type=email]::placeholder,
.orbeon input[type=tel]::placeholder,
.orbeon textarea::placeholder { color: #999; }

.orbeon input[type=text]:focus,
.orbeon input[type=email]:focus,
.orbeon input[type=tel]:focus,
.orbeon input[type=number]:focus,
.orbeon input[type=date]:focus,
.orbeon select:focus,
.orbeon textarea:focus {
  border-color: #0077cc;
  box-shadow: 0 0 0 3px rgba(0,119,204,0.25);
  outline: none;
  background: #fff;
}

/* Optional note text */
.orbeon .xforms-help, .optional-note { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }

/* Actions: align primary/secondary like guide's .form-actions */
.orbeon .fr-buttons, .form-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Buttons mapping (keep existing gradient for primary; style save/next similar to guide) */
.orbeon button.btn.next, .orbeon button.btn.primary, .orbeon button.next {
  background: #0077cc;
  color: #fff;
  border-radius: 6px;
}
.orbeon button.btn.save, .orbeon button.btn.summary, .orbeon button.save {
  background: #f0f0f0;
  color: #333;
  border-radius: 6px;
  box-shadow: none;
}
.orbeon button.btn.save:hover, .orbeon button.save:hover { background: #e2e2e2; }
.orbeon button.btn.next:hover, .orbeon button.next:hover { background: #0067b0; }

/* Tighten spacing inside the wizard body to reflect new 600px container rhythm */
@media (min-width: 981px) {
  .orbeon .xbl-fr-wizard .fr-wizard-body { padding: 1.5rem 0rem 2.5rem !important; }
}

/* Ensure wider layout pages don't double-apply container treatment */
@media (min-width: 981px) {
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full {
    max-width: 600px;
  }
}

/* === End Guide Styles Integration === */

/* === Modern Form Revamp: Typography & Base Scale (Spec Implementation Part 1) === */
/* Font stack: Inter first (if loaded separately via HTML <link>), fallback to system-ui */
html, body, .orbeon { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; }

/* Headings scale (tailwind-ish mapping) */
.orbeon .form-page-title, .orbeon h1.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
@media (min-width: 980px){ .orbeon .form-page-title, .orbeon h1.page-title { font-size: 1.75rem; } }

/* Section headings */
.orbeon .fr-section-title, .orbeon .xbl-fr-section h2.fr-section-title { font-size: 1.125rem !important; font-weight: 500 !important; letter-spacing: -0.005em; }

/* Labels */
.orbeon .xforms-label, .orbeon .control-label, .orbeon fieldset legend { font-size: 0.875rem !important; font-weight: 500 !important; color: #4b5563 !important; line-height: 1.4; }

/* Input text sizing */
.orbeon input[type=text],
.orbeon input[type=email],
.orbeon input[type=tel],
.orbeon input[type=number],
.orbeon input[type=date],
.orbeon select,
.orbeon textarea { font-size: 1rem !important; line-height: 1.5 !important; height: 2.75rem; padding: 0 0.875rem; }

/* Reserve helper / error space below each control to avoid layout jump */
.orbeon .xforms-help, .orbeon .xforms-alert { min-height: 1.125rem; display: block; }
.orbeon .xforms-alert { font-size: 0.75rem; color: #b91c1c; margin-top: 0.25rem; }

/* Focus ring (modern) */
.orbeon input[type=text]:focus,
.orbeon input[type=email]:focus,
.orbeon input[type=tel]:focus,
.orbeon input[type=number]:focus,
.orbeon input[type=date]:focus,
.orbeon select:focus,
.orbeon textarea:focus { outline: 2px solid #2563eb !important; outline-offset: 2px; box-shadow: none !important; border-color: #2563eb !important; background: #fff !important; }

/* Remove decorative ellipsis after labels if any theme injects them */
.orbeon .xforms-label::after { content: none !important; }

/* Contrast ensure placeholders */
.orbeon input::placeholder, .orbeon textarea::placeholder { color: #6b7280; opacity: 0.85; }

/* === End Typography & Base Scale === */

/* === Modern Form Revamp: Constrained Single Surface (Spec Implementation Part 2) === */
@media (min-width: 981px) {
  /* Wrap entire wizard body in a centered readable width ~ max-w-3xl (896px) */
  .orbeon .xbl-fr-wizard .fr-wizard-body,
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full {
    max-width: 880px !important; /* within 768–896px target */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Reduce elevation: single card surface, stepper (TOC) flattened unless using progress bar variant */
.orbeon .xbl-fr-wizard .fr-wizard-body { box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08) !important; }
.orbeon .xbl-fr-wizard .fr-wizard-toc { box-shadow: none !important; background: transparent !important; }

/* If using a top progress bar variant (class .wizard-progress-top), make it minimal */
.orbeon .wizard-progress-top { height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; margin: 0 0 1.25rem; position: relative; }
.orbeon .wizard-progress-top .progress-inner { position: absolute; left:0; top:0; bottom:0; width:0%; background:#2563eb; transition: width .35s ease; }

/* Section cards inside now visually blend: remove inner big shadows */
.orbeon .xbl-fr-section { box-shadow: none !important; border: 1px solid #e5e7eb; }

/* === End Constrained Single Surface === */

/* === Modern Form Revamp: 12-Column Field Grid Utilities (Spec Implementation Part 3) === */
/* Wrapper utility: apply class `.form-grid` to a container (e.g., section) to enable grid layout */
.orbeon .form-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1.25rem 1.5rem; }

/* Default each control to full width unless a span utility added */
.orbeon .form-grid > * { grid-column: span 12 / span 12; }

/* Span helpers (desktop >= 768px) */
@media (min-width: 768px){
  .orbeon .col-span-12 { grid-column: span 12 / span 12; }
  .orbeon .col-span-8 { grid-column: span 8 / span 8; }
  .orbeon .col-span-6 { grid-column: span 6 / span 6; }
  .orbeon .col-span-7 { grid-column: span 7 / span 7; }
  .orbeon .col-span-5 { grid-column: span 5 / span 5; }
  .orbeon .col-span-4 { grid-column: span 4 / span 4; }
  .orbeon .col-span-3 { grid-column: span 3 / span 3; }
}

/* Preset pattern helpers (optional sugar classes) */
.orbeon .pair-6-6 > *:nth-child(1),
.orbeon .pair-6-6 > *:nth-child(2) { grid-column: span 12; }
@media (min-width: 768px){
  .orbeon .pair-6-6 > *:nth-child(1),
  .orbeon .pair-6-6 > *:nth-child(2) { grid-column: span 6; }
}

.orbeon .pair-7-5 > *:nth-child(1),
.orbeon .pair-7-5 > *:nth-child(2) { grid-column: span 12; }
@media (min-width: 768px){
  .orbeon .pair-7-5 > *:nth-child(1) { grid-column: span 7; }
  .orbeon .pair-7-5 > *:nth-child(2) { grid-column: span 5; }
}

/* Triple pattern Postal (3) State/Region (4) Country (5) */
.orbeon .triple-3-4-5 > * { grid-column: span 12; }
@media (min-width: 768px){
  .orbeon .triple-3-4-5 > *:nth-child(1) { grid-column: span 3; }
  .orbeon .triple-3-4-5 > *:nth-child(2) { grid-column: span 4; }
  .orbeon .triple-3-4-5 > *:nth-child(3) { grid-column: span 5; }
}

/* Ensure vertical rhythm: 16–20px (~1rem–1.25rem) already addressed via gap (1.25rem) */

/* === End 12-Column Field Grid Utilities === */

/* === Modern Form Revamp: Desktop Action Bar Layout (Spec Implementation Part 4) === */
/* Structure expectation: existing .fr-buttons container; we'll flex and allow sub-groups via utility classes if added by JS */
.orbeon .fr-buttons { 
  display: flex !important; 
  flex-wrap: nowrap; 
  align-items: center; 
  justify-content: space-between !important; 
  gap: 1rem; 
  padding-top: 1.25rem; 
  border-top: 1px solid #e5e7eb; 
  margin-top: 2.5rem !important;
}

/* Group containers (JS can wrap buttons) */
.orbeon .fr-buttons .actions-left { display: flex; gap: .75rem; align-items: center; }
.orbeon .fr-buttons .actions-right { display: flex; gap: .75rem; align-items: center; }

/* Tertiary (Save draft) as subtle link/ghost */
.orbeon button.btn-tertiary, .orbeon .btn-tertiary { background: transparent !important; color: #2563eb !important; border: none !important; box-shadow: none !important; padding: 0 .25rem !important; height: auto; }
.orbeon button.btn-tertiary:hover { text-decoration: underline; background: transparent !important; }

/* Ensure summary link not styled as button if moved to header area */
.orbeon .summary-link-inline { font-size: 0.875rem; color: #2563eb; text-decoration: none; font-weight: 500; }
.orbeon .summary-link-inline:hover { text-decoration: underline; }

/* Hide original summary button inside main button row when JS moves it */
.orbeon .fr-buttons .btn-summary-moved { display: none !important; }

/* === End Desktop Action Bar Layout === */

/* === Modern Form Revamp: Button Variants & States (Spec Implementation Part 5) === */
.orbeon .btn-primary, .orbeon button.btn-primary { 
  background: #2E4561 !important; 
  color: #fff !important; 
  border: 1px solid #2E4561 !important; 
  font-weight: 600; 
  transition: background .18s ease, box-shadow .18s ease; 
}
.orbeon .btn-primary:hover:not([disabled]) { background:#24394f !important; }

.orbeon .btn-secondary, .orbeon button.btn-secondary { 
  background: #fff !important; 
  color: #2E4561 !important; 
  border: 1px solid #2E4561 !important; 
  font-weight: 500; 
}
.orbeon .btn-secondary:hover:not([disabled]) { background:#f1f5f9 !important; }

/* Outline subtle variant if needed */
.orbeon .btn-outline { background: #fff !important; border:1px solid #94a3b8 !important; color:#1f2937 !important; }
.orbeon .btn-outline:hover { background:#f8fafc !important; }

/* Tertiary already defined via .btn-tertiary (link style) */

/* Loading state: add class .is-loading to button; use CSS spinner */
.orbeon button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.orbeon button.is-loading::after { content:""; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.orbeon button.is-loading::after { width:1rem; height:1rem; border-radius:50%; border:2px solid rgba(255,255,255,0.6); border-top-color:#fff; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Disabled uniform */
.orbeon button[disabled], .orbeon button:disabled { opacity:.55 !important; cursor:not-allowed !important; box-shadow:none !important; }

/* Icon arrow on primary Next (if text contains 'Next') optional attribute .with-arrow */
.orbeon .btn-primary.with-arrow { padding-right: 2.25rem; position: relative; }
.orbeon .btn-primary.with-arrow::after { content: "\2192"; position:absolute; right:0.9rem; top:50%; transform:translateY(-50%); font-size:1rem; }

/* === End Button Variants & States === */

/* === Modern Form Revamp: Stepper / Progress (Spec Implementation Part 6) === */
/* Clickable stepper: unify styles & add done state checkmark (JS adds .is-done) */
.orbeon .fr-wizard-toc .nav > li.is-done::before { content: "\2713"; font-weight: 700; }

/* Remove legacy tiny pager if progress bar or stepper active */
.orbeon .wizard-hide-pager .fr-wizard-pager { display: none !important; }

/* Top progress compact bar (when using .use-progress-bar on root) */
.orbeon.use-progress-bar .fr-wizard-toc { display: none !important; }
.orbeon.use-progress-bar .wizard-progress-top { display: block !important; }
.orbeon .wizard-progress-top { display: none; }

/* Mobile: collapse left stepper to top bar indicator */
@media (max-width: 768px){
  .orbeon .xbl-fr-wizard .fr-wizard-toc { display: none !important; }
  .orbeon .wizard-mobile-progress { display: flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:500; color:#4b5563; margin-bottom:1rem; }
  .orbeon .wizard-mobile-progress-bar { flex:1; height:4px; background:#e5e7eb; border-radius:2px; position:relative; overflow:hidden; }
  .orbeon .wizard-mobile-progress-bar .bar-inner { position:absolute; inset:0; width:0%; background:#2563eb; transition: width .35s ease; }
}
@media (min-width: 769px){ .orbeon .wizard-mobile-progress { display:none; } }

/* === End Stepper / Progress === */

/* === Modern Form Revamp: Mobile Sticky Action Bar (Spec Implementation Part 7) === */
@media (max-width: 640px){
  .orbeon .mobile-action-bar { 
    position: sticky; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: #ffffffee; 
    backdrop-filter: blur(6px); 
    border-top: 1px solid #e5e7eb; 
    padding: .75rem .85rem env(safe-area-inset-bottom); 
    display: flex; 
    gap: .75rem; 
    align-items: center; 
    z-index: 50; 
  }
  .orbeon .mobile-action-bar .primary-full { flex:1; }
  .orbeon .mobile-action-bar button { width:100%; margin:0; }
  .orbeon .mobile-action-bar .back-link { background: transparent !important; color:#2563eb !important; border:none !important; width:auto; padding:0 .25rem; font-weight:500; }
  .orbeon .mobile-action-bar .back-link:hover { text-decoration: underline; }
}
@media (min-width: 641px){ .orbeon .mobile-action-bar { display:none; } }

/* === End Mobile Sticky Action Bar === */

/* Validation summary region styling */
.orbeon .validation-summary-region { background:#fff; border:1px solid #fecaca; border-radius:6px; padding:.75rem 1rem; }
.orbeon .validation-summary-region .xforms-alert-summary, 
.orbeon .validation-summary-region .fr-validation-summary { margin:0; font-size:.8rem; color:#b91c1c; }

/* Force remove border on fr-wizard-body (all specificity levels) */
.orbeon .xbl-fr-wizard .fr-wizard-body,
.orbeon .fr-wizard-body {
  border: none !important;
  box-shadow: none;
}

/* Remove box-shadow from fr-wizard-body as requested */
.orbeon .xbl-fr-wizard .fr-wizard-body {
  box-shadow: none !important;
}

/* === Mobile Enhancements (2025-09-19) === */
@media (max-width: 760px) {
  /* General container padding tightening */
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full { padding: 1rem var(--spacing-md, 1rem) 6.5rem !important; }

  /* Force all form controls to fluid width */
  .orbeon input[type="text"],
  .orbeon input[type="email"],
  .orbeon input[type="tel"],
  .orbeon input[type="number"],
  .orbeon input[type="date"],
  .orbeon input[type="password"],
  .orbeon select,
  .orbeon textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Remove any grid multi-column spans on mobile */
  .orbeon .form-grid > * { grid-column: span 12 / span 12 !important; }

  /* Tighten section card padding */
  .orbeon .xbl-fr-section { padding: 1.1rem 1rem 1.25rem !important; }

  /* TOC: present as collapsible minimal bar (if still visible) */
  .orbeon .xbl-fr-wizard .fr-wizard-toc { margin-bottom: 1rem; border-radius: 0.75rem; background: #fff !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc::before { font-size: 0.95rem; letter-spacing: 0.01em; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li { padding-left: 2.75rem; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc.expanded .nav > li { flex: 1 1 45%; max-width: 48%; }

  /* When collapsed keep minimal height */
  .orbeon .xbl-fr-wizard .fr-wizard-toc:not(.expanded) { max-height: 3rem; overflow: hidden; }

  /* Improve tap targets */
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link { min-height: 2.25rem; }

  /* Sticky stacked actions (fallback if mobile-action-bar not injected) */
  .orbeon .fr-buttons { position: fixed !important; bottom: 0; left: 0; right: 0; background: #ffffffee; backdrop-filter: blur(6px); padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 10px rgba(0,0,0,0.08); display: flex !important; flex-direction: column; gap: 0.65rem; z-index: 60; border-top: 1px solid #e5e7eb; }
  .orbeon .fr-buttons .btn, .orbeon .fr-buttons button { width: 100% !important; margin: 0 !important; }
  .orbeon .fr-buttons .actions-left, .orbeon .fr-buttons .actions-right { width: 100%; justify-content: stretch; }

  /* Provide extra padding at bottom of form content so last fields not covered by sticky bar */
  .orbeon form { padding-bottom: 7.5rem !important; }
}

/* Ultra-small devices refinement */
@media (max-width: 380px) {
  .orbeon .xbl-fr-section { padding: 0.9rem 0.75rem 1rem !important; }
  .orbeon .fr-buttons { padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); }
  .orbeon button.btn { padding: 0.75rem 1rem !important; font-size: 0.9rem !important; }
}

/* High contrast support toggle (user could add class .prefers-high-contrast on body) */
body.prefers-high-contrast .orbeon .fr-buttons { background: #000 !important; }
body.prefers-high-contrast .orbeon button.btn { box-shadow: none !important; }

/* Touch adjustments: eliminate 300ms delay (if not already) */
html { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }

/* Utility: hide-only-mobile and show-only-mobile helpers */
@media (max-width:760px) { .hide-mobile { display: none !important; } }
@media (min-width:761px) { .show-mobile { display: none !important; } }
/* === End Mobile Enhancements === */

/* === Mobile Fix Round 2 (2025-09-19) === */
@media (max-width: 760px) {
  /* 1. Restore TOC visibility (earlier rules hid it at <=768) */
  .orbeon .xbl-fr-wizard .fr-wizard-toc { display: block !important; }
  /* Convert TOC list to horizontal scrollable step nav */
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav { 
    max-height: none !important; 
    display: flex !important; 
    flex-direction: row !important; 
    gap: .75rem !important; 
    overflow-x: auto; 
    padding: .75rem .5rem !important; 
    scrollbar-width: none; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav::-webkit-scrollbar { display: none; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li { 
    flex: 0 0 auto; 
    padding: 0 !important; 
    min-height: auto; 
    position: relative; 
    padding-left: 0 !important; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li::after { display: none !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li::before { 
    position: relative; 
    left: auto; top: auto; 
    margin: 0 auto .35rem; 
    width: 2.1rem; height: 2.1rem; 
    font-size: .85rem; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link { 
    background: #f1f5f9; 
    border: 1px solid #e2e8f0; 
    border-radius: 999px; 
    padding: .35rem .85rem .35rem .85rem !important; 
    display: flex; flex-direction: column; align-items: center; 
    min-width: 4.25rem; 
    font-size: .65rem; 
    color: #475569; 
    line-height: 1.1; 
    gap: .15rem; 
    text-align: center; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.active > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.started > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.changed > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-complete > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.completed > span > .btn-link { 
    background: #2E4561; 
    border-color: #2E4561; 
    color: #fff; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc::before { 
    content: "Sections"; 
    display: block; 
    font-size: .7rem; 
    letter-spacing: .08em; 
    font-weight: 600; 
    text-transform: uppercase; 
    color: #64748b; 
    padding: .35rem .75rem 0; 
  }

  /* 2. Full-width container (remove 600px card constraint) */
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full { 
    max-width: none !important; 
    width: 100% !important; 
    margin: 0 !important; 
    border-radius: 0 !important; 
    box-shadow: none !important; 
    padding-left: 1rem !important; 
    padding-right: 1rem !important; 
    background: #fff !important; 
  }

  /* 3. Inputs: enforce full stretch & consistent font sizing */
  .orbeon input[type="text"],
  .orbeon input[type="email"],
  .orbeon input[type="tel"],
  .orbeon input[type="number"],
  .orbeon input[type="date"],
  .orbeon input[type="password"],
  .orbeon select,
  .orbeon textarea { 
    width: 100% !important; 
    max-width: 100% !important; 
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* 4. Flatten surfaces: remove section card shadows & heavy radii */
  .orbeon .xbl-fr-section { 
    box-shadow: none !important; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 12px !important; 
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)) border-box; 
    padding-top: 1.25rem !important; 
  }
  /* Remove extra top gradient/line created earlier under header if any */
  .orbeon .xbl-fr-wizard .fr-wizard-body { box-shadow: none !important; background: transparent !important; }

  /* 5. Action bar: lighten heavy shadow line */
  .orbeon .fr-buttons { 
    box-shadow: 0 -1px 4px rgba(0,0,0,0.06) !important; 
    border-top: 1px solid #e2e8f0 !important; 
    background: #fff !important; 
  }

  /* Provide subtle background blend */
  body { background: #f3f5f9 !important; }
  .orbeon .fr-mode-new .fr-view-appearance-full,
  .orbeon .fr-mode-edit .fr-view-appearance-full,
  .orbeon .fr-mode-view .fr-view-appearance-full,
  .orbeon .fr-mode-test .fr-view-appearance-full { background: #fff !important; }

  /* Extra breathing room below last section above buttons */
  .orbeon .xbl-fr-section:last-of-type { margin-bottom: 2.75rem !important; }
}
/* === End Mobile Fix Round 2 === */

/* === Mobile Spec Implementation (Round 3) 2025-09-19 === */
@media (max-width:760px){
  /* 1. Actions: single primary button + back & save links */
  .orbeon .fr-buttons { 
    flex-direction: column !important; 
    align-items: stretch !important; 
    gap: .75rem !important; 
  }
  .orbeon .fr-buttons .btn, 
  .orbeon .fr-buttons button { 
    display: inline-flex !important; 
    width:100% !important; 
    margin:0 !important; 
    justify-content:center; 
    font-size:1rem !important; 
    padding:0.95rem 1.1rem !important; 
    border-radius:10px !important; 
  }
  .orbeon .fr-buttons button.next::after { content:"→"; display:inline-block; margin-left:.5rem; }

  .orbeon .fr-buttons::before, 
  .orbeon .fr-buttons::after { 
    content:none !important; 
    display:none !important; 
  }
  /* Allow consumer JS to set data-back-label="Back" data-save-label="Save draft" */
  .orbeon .fr-buttons { position:fixed !important; bottom:0; left:0; right:0; z-index:70; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e2e8f0; box-shadow:0 -2px 6px rgba(0,0,0,0.08); }
  body { padding-bottom:6.5rem; }
  /* Hide summary button except final step (JS should add .is-final-step on body) */
  body:not(.is-final-step) .btn-summary, body:not(.is-final-step) button[name*="summary" i] { display:none !important; }
  body.is-final-step .btn-summary { display:flex !important; }

  /* 2. Sticky horizontal chip TOC below main header */
  .orbeon .xbl-fr-wizard .fr-wizard-toc { 
    position:sticky !important; 
    top: var(--mobile-chip-toc-top, 3.75rem); 
    z-index: 40; 
    background:linear-gradient(#fff,#fff); 
    padding:.25rem 0 .4rem !important; 
    margin:0 -1rem .75rem; 
    border-bottom:1px solid #e5e7eb; 
    box-shadow:none !important; 
    border-radius:0 !important; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc::before { display:none !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav { 
    display:flex !important; 
    flex-direction:row !important; 
    gap:.5rem !important; 
    overflow-x:auto; 
    padding:.25rem .75rem !important; 
    scrollbar-width:none; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav::-webkit-scrollbar { display:none; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li { 
    flex:0 0 auto; 
    padding:0 !important; 
    min-width:auto; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li::after { display:none !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li::before { display:none !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li > span > .btn-link { 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    padding:.45rem .85rem !important; 
    background:#f1f5f9; 
    border:1px solid #e2e8f0; 
    border-radius:999px; 
    font-size:.7rem; 
    font-weight:500; 
    color:#475569; 
    line-height:1; 
    min-height:2rem; 
    text-transform:none; 
    gap:.25rem; 
  }
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.active > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.started > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.changed > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.visible-complete > span > .btn-link,
  .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.completed > span > .btn-link { 
    background:#2E4561; color:#fff; border-color:#2E4561; 
  }

  /* 3. Tighten type & spacing */
  .orbeon .xforms-label, .orbeon .control-label, .orbeon fieldset legend { 
    font-size:14px !important; line-height:20px !important; margin-bottom:8px !important; font-weight:600 !important; letter-spacing:0; color:#374151 !important; 
  }
  .orbeon input[type=text],
  .orbeon input[type=email],
  .orbeon input[type=tel],
  .orbeon input[type=number],
  .orbeon input[type=date],
  .orbeon select,
  .orbeon textarea { height:46px !important; padding:0 0.9rem !important; line-height:1.3 !important; }
  .orbeon .xforms-control { margin-bottom:14px !important; }
  .orbeon .xbl-fr-section h2.fr-section-title { font-size:18px !important; line-height:1.25 !important; margin-bottom:1rem !important; }

  /* 4. Lighten chrome */
  .orbeon .xbl-fr-section { border-radius:10px !important; box-shadow:0 1px 2px rgba(15,23,42,0.05) !important; }
  .orbeon .xbl-fr-wizard .fr-wizard-body { box-shadow:none !important; }
  .orbeon .fr-buttons button.next, .orbeon .fr-buttons .btn-primary { box-shadow:none !important; }

  /* 5. Safe area already considered; reinforce */
  .orbeon .fr-buttons { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important; }

  /* Reduce motion for users; pulse removed on mobile */
  @media (prefers-reduced-motion: reduce){
    .orbeon .xbl-fr-wizard .fr-wizard-toc .nav > li.active > span > .btn-link { animation:none !important; }
  }
}
/* === End Mobile Spec Implementation (Round 3) === */

/* === Dropdown Grid Button Normalization (2025-09-19) === */
.orbeon .fr-grid-dropdown-button,
.orbeon button.fr-grid-dropdown-button.btn-mini,
.orbeon .fr-grid-dropdown-button.btn-mini {
  padding: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  width: 1.5rem !important;
  line-height: 1 !important;
  font-size: .7rem !important;
  border-radius: 5px !important;
  background: #2E4561 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.orbeon .fr-grid-dropdown-button i { font-size: .9rem; }

/* Ensure it doesn't stretch grid cell height */
.orbeon .fr-grid-body td .fr-grid-dropdown-button { vertical-align: middle; }

/* Compact variant when table cells are shorter (desktop forms) */
@media (min-width: 761px){
  .orbeon .fr-grid-dropdown-button { height: 34px !important; min-height:34px !important; }
}

/* If inside a very tight row reduce more */
.orbeon .fr-grid-row--compact .fr-grid-dropdown-button { height:30px !important; min-height:30px !important; width:1.85rem !important; border-radius:5px !important; }

/* Hover/focus states */
.orbeon .fr-grid-dropdown-button:hover { background:#24394f !important; }
.orbeon .fr-grid-dropdown-button:focus-visible { outline:2px solid #2563eb !important; outline-offset:2px; }

/* Remove transition that caused size jitter */
.orbeon .fr-grid-dropdown-button { transition: background .18s ease !important; }
/* === End Dropdown Grid Button Normalization === */

/* === Dropdown Grid Button Alignment Adjustments (2025-09-19) === */
/* Force table cells containing the dropdown to vertically center contents */
.orbeon .fr-grid-body td, 
.orbeon .fr-grid-body th { vertical-align: middle !important; }

/* If parent uses flex/grid ensure button is centered */
.orbeon .fr-grid-body td, 
.orbeon .fr-grid-body td > .xforms-control, 
.orbeon .fr-grid-body td > div { align-items: center; }

.orbeon .fr-grid-dropdown-button { align-self: center !important; }

/* Smaller icon size */
.orbeon .fr-grid-dropdown-button i { font-size: .75rem !important; line-height:1; }
/* === End Dropdown Grid Button Alignment Adjustments === */

.fr-data-icon {
  display: none !important;
}

.fr-user-nav {
  display: none !important;
}