/* Plus Jakarta Sans font for all Form.io elements */
.formio-form * {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Form.io Custom Styling */

/* Form Container */
.formio-form {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 1rem;
}

/* Form Components */
.formio-component {
  margin-bottom: 1.5rem;
}

/* First form component - add top margin */
.formio-component:first-child {
  margin-top: 1.5rem;
}

/* Labels */
.formio-component-label,
.col-form-label,
label.field-required {
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  display: block;
}

/* Required asterisk */
.formio-component-label .field-required {
  color: #ef4444;
  font-weight: normal;
}

/* Input Fields */
.form-control,
.formio-component input[type="text"],
.formio-component input[type="email"],
.formio-component input[type="tel"],
.formio-component input[type="date"],
.formio-component textarea,
.formio-component select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #374151;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Input Focus State */
.form-control:focus,
.formio-component input:focus,
.formio-component textarea:focus,
.formio-component select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Date picker container */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Date picker with icon inside */
.input-group .form-control {
  padding-right: 2.5rem;
  width: 100%;
}

/* Date picker icon - both old and new Form.io structure */
.input-group-addon,
.input-group-append,
.input-group-text {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  border: none;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  z-index: 2;
}

.input-group-append {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.input-group-text {
  background-color: transparent;
  border: none;
}

.input-group-addon:hover,
.input-group-text:hover {
  background-color: transparent;
}

.input-group-addon i,
.input-group-addon .fa,
.input-group-addon .glyphicon,
.input-group-text i,
.input-group-text .fa {
  color: #6b7280;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  margin-right: 0.5rem;
  margin-top: 0.125rem;
  border: 2px solid #d1d5db;
  border-radius: 0.25rem;
  cursor: pointer;
  background-color: white;
  flex-shrink: 0;
}

.form-check-input[type="checkbox"]:checked {
  background-color: #667eea;
  border-color: #667eea;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
  background-color: #667eea;
  border-color: #667eea;
}

.form-check-label {
  cursor: pointer;
  color: #4b5563;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 1.25rem;
}


/* Label text handling with wrapping support */
.form-check-label {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  position: relative;
  cursor: pointer;
  max-width: 100%;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* Add tooltip for truncated text */
.form-check-label[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2937;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  white-space: normal;
  max-width: 250px;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.25rem;
  word-wrap: break-word;
}



/* Alternative: Allow text wrapping for long labels */
.form-check-label.wrap-text {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  line-height: 1.3;
}


/* Keep normal size for option labels */
.formio-component-selectboxes .form-check-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Option to use smaller font for many options if needed */
.formio-component-selectboxes.compact .form-check-label {
  font-size: 0.8125rem;
  line-height: 1.2;
}



/* Specific spacing for different field types */
.formio-component-radio {
  margin-bottom: 1.5rem;
}

.formio-component-selectboxes {
  margin-bottom: 1.5rem;
}

/* Remove extra spacing */
.checkbox.form-check {
  margin-bottom: 0 !important;
}

/* Select Dropdowns */
.choices__inner {
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.5rem;
}

.choices__list--dropdown {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  margin-top: 2px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.choices__item--selectable {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.choices__item--selectable.is-highlighted {
  background-color: #667eea;
  color: white;
}

/* Wizard Navigation - Tab style with gray background bar */
nav[aria-label="Wizard navigation"] {
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  position: relative;
}

nav[aria-label="Wizard navigation"] .pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 8px;
  margin: 0;
  list-style: none;
  background-color: #f5f5f5;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  height: 52px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: visible;
}

nav[aria-label="Wizard navigation"] .page-item {
  display: flex !important;
  align-items: center;
  margin: 0;
  flex: 1;
  position: relative;
  max-width: 250px;
  height: 36px;
  overflow: visible;
}

/* Hide the Common tab (first item) */
nav[aria-label="Wizard navigation"] .page-item:first-child {
  display: none !important;
}

/* Remove the arrow separators */
nav[aria-label="Wizard navigation"] .page-item:not(:last-child)::after {
  content: "";
  display: none;
}

/* Dynamic width based on number of visible items (excluding hidden first item) */
/* When there are 5 total items (4 visible after hiding first) - make them fit */
nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(5)
  ~ .page-item {
  flex: 1;
  max-width: 220px;
  width: auto;
}

nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(5)
  ~ .page-item
  .page-link {
  width: 100%;
}

/* When there are 4 total items (3 visible after hiding first) */
nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(4)
  ~ .page-item {
  flex: 1;
  max-width: 280px;
  width: auto;
}

nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(4)
  ~ .page-item
  .page-link {
  width: 100%;
}

/* When there are 3 total items (2 visible after hiding first) */
nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(3)
  ~ .page-item {
  flex: 1;
  max-width: 420px;
  width: auto;
}

nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(3)
  ~ .page-item
  .page-link {
  width: 100%;
}

/* When there are 6+ total items (5+ visible after hiding first) */
nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(n + 6)
  ~ .page-item {
  flex: 1;
  max-width: 180px;
  width: auto;
}

nav[aria-label="Wizard navigation"]
  .page-item:first-child:nth-last-child(n + 6)
  ~ .page-item
  .page-link {
  width: 100%;
}

/* All wizard tab styling - Override Form.io defaults */
.formio-form
  > div
  > nav[aria-label="Wizard navigation"]
  > ul.pagination
  .page-link,
nav[aria-label="Wizard navigation"] ul.pagination .page-link,
nav[aria-label="Wizard navigation"] .page-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  padding: 8px;
  font-size: 0.8125rem !important;
  color: #333333 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Active tab styling - Override Form.io default styles */
.formio-form
  > div
  > nav[aria-label="Wizard navigation"]
  > ul.pagination
  .page-item.active
  .page-link,
nav[aria-label="Wizard navigation"] ul.pagination .page-item.active .page-link,
nav[aria-label="Wizard navigation"] .page-item.active .page-link {
  color: #333333 !important;
  font-weight: 600 !important;
  background-color: #caddff !important;
  border: 1px solid #93c5fd !important;
  border-color: #93c5fd !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Hover state for non-active tabs - Override Form.io defaults */
.formio-form
  > div
  > nav[aria-label="Wizard navigation"]
  > ul.pagination
  .page-item:not(.active)
  .page-link:hover,
nav[aria-label="Wizard navigation"]
  ul.pagination
  .page-item:not(.active)
  .page-link:hover,
nav[aria-label="Wizard navigation"] .page-item:not(.active) .page-link:hover {
  color: #333333 !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(229, 231, 235, 0.5) !important;
}

/* Make wizard tooltip icons visible and styled - Override all other styles */
nav[aria-label="Wizard navigation"] .page-link i.fa-question-circle,
nav[aria-label="Wizard navigation"] .page-link .fa-question-circle,
nav[aria-label="Wizard navigation"] .page-link i.fa.fa-question-circle,
nav[aria-label="Wizard navigation"] .page-link i.text-muted.fa-question-circle {
  color: #9ca3af !important;
  opacity: 1 !important;
  margin-left: 0.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  cursor: help !important;
  display: inline-block !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  visibility: visible !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  width: auto !important;
  height: auto !important;
}

nav[aria-label="Wizard navigation"] .page-link i.fa-question-circle::before,
nav[aria-label="Wizard navigation"] .page-link .fa-question-circle::before,
nav[aria-label="Wizard navigation"]
  .page-link
  i.text-muted.fa-question-circle::before {
  content: "\f059" !important;
  display: inline-block !important;
}

nav[aria-label="Wizard navigation"] .page-link i.fa-question-circle:hover,
nav[aria-label="Wizard navigation"] .page-link .fa-question-circle:hover,
nav[aria-label="Wizard navigation"]
  .page-link
  i.text-muted.fa-question-circle:hover {
  color: #4b5563 !important;
}

/* Tooltip on hover for wizard navigation items */
nav[aria-label="Wizard navigation"] .page-link {
  position: relative;
}

nav[aria-label="Wizard navigation"] .page-link i[data-tooltip] {
  position: relative;
}

/* Create tooltip on hover */
nav[aria-label="Wizard navigation"] .page-link i[data-tooltip]:hover::before,
nav[aria-label="Wizard navigation"] .page-link i[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

nav[aria-label="Wizard navigation"] .page-link i[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background-color: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: normal;
  white-space: normal;
  width: 250px;
  max-width: 250px;
  line-height: 1.4;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* Tooltip arrow */
nav[aria-label="Wizard navigation"] .page-link i[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1f2937;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
}

/* Alternative: Show tooltip for entire tab on hover */
nav[aria-label="Wizard navigation"] .page-link[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8125rem;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

nav[aria-label="Wizard navigation"] .page-link:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.3);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-wizard-nav-cancel,
.btn-wizard-nav-previous {
  background-color: transparent;
  color: #374151;
  border: 2px solid #333333;
  padding: 16px 40px;
  border-radius: 30px;
  font-weight: 500;
  min-width: 136px;
  height: 56px;
}

.btn-wizard-nav-cancel:hover,
.btn-wizard-nav-previous:hover {
  background-color: #f3f4f6;
  color: #111827;
}

/* Change "Previous" text to "Back" */
.btn-wizard-nav-previous::after {
  content: "Back";
}

.btn-wizard-nav-previous {
  font-size: 0;
}

.btn-wizard-nav-previous::after {
  font-size: 1rem;
}

.btn-wizard-nav-next,
.btn-wizard-nav-submit {
  background-color: #f0a763;
  color: white;
  font-weight: 600;
  min-width: 136px;
  height: 56px;
  padding: 16px 40px;
  border-radius: 30px;
  font-size: 1rem;
  gap: 10px;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-wizard-nav-next:hover,
.btn-wizard-nav-submit:hover {
  background-color: #e89a4f;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Wizard Navigation Container */
.formio-wizard-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding-top: 0;
  border-top: none;
  gap: 1rem;
}

/* Error Messages */
.help-block {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Form descriptions/help text */
.form-text,
.text-muted,
.form-text.text-muted {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #6b7280;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

/* Make descriptions even more compact */
.formio-component .form-text {
  font-size: 0.65rem;
  line-height: 1.2;
  color: #9ca3af;
  font-style: italic;
}

/* Loading State */
.formio-loading {
  text-align: center;
  padding: 2rem;
}

/* Responsive Grid for form fields */
@media (min-width: 768px) {
  .formio-component-columns2 > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .formio-component-columns3 > .row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
}

/* Hide Form.io branding */
.formio-form > div:last-child a[href*="form.io"] {
  display: none !important;
}

/* Tooltip styling */
.tooltip {
  background-color: #1f2937;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  max-width: 200px;
}

/* Panel styling */
.formio-component-panel {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.formio-component-panel > .panel-heading {
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

/* Add margin after form title/header */
.formio-form > h1,
.formio-form > h2,
.formio-form > h3,
.formio-form > .formio-component-htmlelement:first-child {
  margin-bottom: 2rem;
}

/* Fieldset styling */
.formio-component-fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.formio-component-fieldset legend {
  font-weight: 600;
  color: #374151;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}

/* Table styling for complex forms */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table td,
.table th {
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
}

.table th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #374151;
}

/* Multi-value fields */
.formio-component-multiple .list-group-item {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

/* File upload styling */
.formio-component-file .fileSelector {
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.formio-component-file .fileSelector:hover {
  border-color: #667eea;
  background-color: #f3f4f6;
}

/* Signature pad */
.formio-component-signature canvas {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

/* Day input styling */
.formio-component-day .daySelect {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 0.5rem;
}

/* Survey component */
.formio-component-survey .table td:first-child {
  font-weight: 500;
  color: #374151;
}

/* Tags input */
.formio-component-tags .choices__inner {
  min-height: auto;
}

.formio-component-tags .choices__list--multiple .choices__item {
  background-color: #667eea;
  border: 1px solid #667eea;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Disabled state */
.formio-disabled-input,
.formio-component.formio-disabled-input input,
.formio-component.formio-disabled-input textarea,
.formio-component.formio-disabled-input select {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Success message */
.formio-alerts .alert-success {
  background-color: #10b981;
  color: white;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

/* Warning message */
.formio-alerts .alert-warning {
  background-color: #f59e0b;
  color: white;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

/* Error message */
.formio-alerts .alert-danger {
  background-color: #ef4444;
  color: white;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

/* Info message */
.formio-alerts .alert-info {
  background-color: #3b82f6;
  color: white;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

/* Mobile Responsive Styles for Small Screens */
@media (max-width: 767px) {
  /* Form Section Container - Prevent overflow */
  #intake-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  
  /* Form Container - Mobile Adjustments */
  .formio-form {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
    margin: 0 !important;
  }
  
  /* Force no padding on form container div - padding handled by parent */
  #formio-form {
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure all form children don't exceed screen width */
  .formio-form > * {
    max-width: 100% !important;
    box-sizing: border-box;
  }


  /* Form Components - Reduce spacing on mobile */
  .formio-component {
    margin-bottom: 1rem;
  }

  .formio-component:first-child {
    margin-top: 1rem;
  }

  /* Labels - Mobile sizing */
  .formio-component-label,
  .col-form-label,
  label.field-required {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
  }

  /* Input Fields - Mobile adjustments */
  .form-control,
  .formio-component input[type="text"],
  .formio-component input[type="email"],
  .formio-component input[type="tel"],
  .formio-component input[type="date"],
  .formio-component textarea,
  .formio-component select {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Wizard Navigation - Mobile Layout */
  nav[aria-label="Wizard navigation"] {
    margin-bottom: 1.5rem;
  }

  nav[aria-label="Wizard navigation"] .pagination {
    padding: 4px;
    gap: 2px;
    height: 52px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  nav[aria-label="Wizard navigation"] .page-item {
    flex: 0 1 auto;
    max-width: none;
    min-width: 80px;
    height: 40px;
  }

  /* All wizard tab styling for mobile */
  .formio-form > div > nav[aria-label="Wizard navigation"] > ul.pagination .page-link,
  nav[aria-label="Wizard navigation"] ul.pagination .page-link,
  nav[aria-label="Wizard navigation"] .page-link {
    height: 40px;
    padding: 8px 6px;
    font-size: 0.75rem !important;
    min-width: 80px;
  }

  /* Dynamic width adjustments for mobile - Override desktop rules */
  nav[aria-label="Wizard navigation"] .page-item:first-child:nth-last-child(5) ~ .page-item,
  nav[aria-label="Wizard navigation"] .page-item:first-child:nth-last-child(4) ~ .page-item,
  nav[aria-label="Wizard navigation"] .page-item:first-child:nth-last-child(3) ~ .page-item,
  nav[aria-label="Wizard navigation"] .page-item:first-child:nth-last-child(n + 6) ~ .page-item {
    flex: 0 1 auto;
    max-width: none;
    min-width: 80px;
    width: auto;
  }

  /* Tooltip icons - Smaller on mobile */
  nav[aria-label="Wizard navigation"] .page-link i.fa-question-circle,
  nav[aria-label="Wizard navigation"] .page-link .fa-question-circle,
  nav[aria-label="Wizard navigation"] .page-link i.fa.fa-question-circle,
  nav[aria-label="Wizard navigation"] .page-link i.text-muted.fa-question-circle {
    font-size: 0.75rem !important;
    margin-left: 0.25rem !important;
  }

  /* Tooltip content adjustments for mobile */
  nav[aria-label="Wizard navigation"] .page-link i[data-tooltip]::before {
    width: 200px;
    max-width: 200px;
    font-size: 0.75rem;
    padding: 6px 8px;
  }

  /* Buttons - Mobile sizing */
  .btn-wizard-nav-cancel,
  .btn-wizard-nav-previous {
    padding: 12px 24px;
    font-size: 0.875rem;
    min-width: 100px;
    height: 44px;
    border-radius: 22px;
  }

  .btn-wizard-nav-next,
  .btn-wizard-nav-submit {
    padding: 12px 24px;
    font-size: 0.875rem;
    min-width: 100px;
    height: 44px;
    border-radius: 22px;
  }

  /* Wizard Navigation Container - Mobile layout */
  .formio-wizard-nav-container {
    margin-top: 1.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* Form components spacing adjustments */
  .formio-component-radio,
  .formio-component-selectboxes {
    margin-bottom: 1rem;
  }

  /* Checkbox/Radio labels - Mobile sizing */
  .form-check-label {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .formio-component-selectboxes .form-check-label {
    font-size: 0.8125rem;
  }

  /* Form descriptions - Mobile sizing */
  .form-text,
  .text-muted,
  .form-text.text-muted {
    font-size: 0.625rem;
    line-height: 1.2;
  }

  .formio-component .form-text {
    font-size: 0.6rem;
    line-height: 1.1;
  }

  /* Panel styling - Mobile adjustments */
  .formio-component-panel {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .formio-component-panel > .panel-heading {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  /* Fieldset styling - Mobile adjustments */
  .formio-component-fieldset {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .formio-component-fieldset legend {
    font-size: 0.8125rem;
  }

  /* Input groups - Mobile adjustments */
  .input-group-addon,
  .input-group-append,
  .input-group-text {
    padding: 0.5rem 0.75rem;
  }

  /* Multi-value fields - Mobile adjustments */
  .formio-component-multiple .list-group-item {
    padding: 0.5rem;
    margin-bottom: 0.25rem;
  }

  /* File upload - Mobile adjustments */
  .formio-component-file .fileSelector {
    padding: 1rem;
  }

  /* Day input - Mobile grid adjustment */
  .formio-component-day .daySelect {
    gap: 0.25rem;
  }

  /* Table - Mobile adjustments */
  .table td,
  .table th {
    padding: 0.5rem;
    font-size: 0.8125rem;
  }

  /* Alert messages - Mobile adjustments */
  .formio-alerts .alert-success,
  .formio-alerts .alert-warning,
  .formio-alerts .alert-danger,
  .formio-alerts .alert-info {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }

  /* Form margin adjustments */
  .formio-form > h1,
  .formio-form > h2,
  .formio-form > h3,
  .formio-form > .formio-component-htmlelement:first-child {
    margin-bottom: 1.5rem;
  }

  /* Choices dropdown - Mobile adjustments */
  .choices__inner {
    min-height: 2.25rem;
    padding: 0.25rem 0.375rem;
  }

  .choices__item--selectable {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
  }

  /* Tags - Mobile adjustments */
  .formio-component-tags .choices__list--multiple .choices__item {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.375rem;
  }
}