/* Scope all rules to workflow wrapper */
#workflow-wrapper .workflowContent .form-element-wrapper { margin-bottom: 14px; }
#workflow-wrapper .workflowContent .align-block, #workflow-wrapper .workflowContent .align-block-30, #workflow-wrapper .workflowContent .align-block-50 { padding-right: 10px; }
#workflow-wrapper .workflowContent .snrha-letterhead { text-align: center; line-height: 1.25; margin-top: 6px; margin-bottom: 10px; }
#workflow-wrapper .workflowContent .snrha-letterhead .agency { font-weight: 700; font-size: 1.1rem; letter-spacing: .3px; }
#workflow-wrapper .workflowContent .snrha-letterhead .dept { font-weight: 600; text-transform: uppercase; margin-top: 4px; }
#workflow-wrapper .workflowContent .snrha-letterhead .address, #workflow-wrapper .workflowContent .snrha-letterhead .contacts, #workflow-wrapper .workflowContent .snrha-letterhead .tdd { font-size: .95rem; }
#workflow-wrapper .workflowContent .title-block { text-align: center; margin: 8px 0 14px; }
#workflow-wrapper .workflowContent .title-block h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: .3px; margin: 0; text-transform: uppercase; }
#workflow-wrapper .workflowContent .title-block h2 { font-size: 1.05rem; font-weight: 700; margin: 2px 0 10px; text-transform: uppercase; }
#workflow-wrapper .workflowContent .title-block p { max-width: 820px; margin: 6px auto; }
#workflow-wrapper .workflowContent .return-instructions { border-top: 1px solid #d6d6d6; padding-top: 10px; margin-top: 4px; }
#workflow-wrapper .workflowContent .return-instructions p { margin: 2px 0; }
#workflow-wrapper .workflowContent .espanol h3 { font-style: italic; margin-top: 6px; }
#workflow-wrapper .workflowContent .form-static-text { color: #444; font-size: .9rem; }
#workflow-wrapper .workflowContent .section-breadcrumb-item { text-transform: none; }
#workflow-wrapper .workflowContent .form-header, #workflow-wrapper .workflowContent .form-element-wrapper .form-heading { font-weight: 700; }#workflow-wrapper .workflowContent .fact-sheet { margin-top: 8px; line-height: 1.35; }
#workflow-wrapper .workflowContent .fact-sheet .agency { text-align: center; font-weight: 700; }
#workflow-wrapper .workflowContent .fact-sheet h1 { text-align: center; font-weight: 700; font-size: 1.1rem; margin: 4px 0; text-transform: uppercase; }
#workflow-wrapper .workflowContent .fact-sheet h2 { text-align: center; font-weight: 700; font-size: 1.0rem; margin: 0 0 8px; text-transform: uppercase; }
#workflow-wrapper .workflowContent .fact-sheet h3 { font-weight: 700; font-size: .98rem; margin: 10px 0 4px; }
#workflow-wrapper .workflowContent .fact-sheet p { margin: 0 0 8px; }/* ===== Base / Desktop (unchanged _) ===== */

.page-top,
.page-footer,
.infoSection,
.workflowRightTab {
  display: none !important;
}

.form-section {
  display: block;
  overflow: hidden;
  padding-left: 10px;
  padding-bottom: 16px;
}

.section-breadcrumb-item.active {
  border-bottom: 5px solid #008551;
  cursor: default;
}

#workflow-wrapper:not(.embed):not(.registered-embed) {
  min-height: 0px;
}

#divWorkflowContent {
  width: 70%;
  height: 100% !important;
  min-height: 100% !important;
}

div#workflow-background-wrapper {
  min-width: 70% !important;
  border: 0px;
}

/* center form, remove right border divider */
#workflow-background-wrapper {
  float: none !important;
  margin: auto !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* add background color and padding so that it's visible above/below form */
#workflow-wrapper,
#divWorkflowContent,
.page-content {
  background-color: #ffffff !important;
}

/* adjust page padding */
#workflow-wrapper,
#divWorkflowContent {
  padding: 5px 0px !important;
}

html,
body {
  background: #ffffff !important;
}

div.page-wrap {
  padding-bottom: 0 !important;
}

/* Hide print button */
#print-preview {
  display: none !important;
}

.form-element-wrapper.static-html .form-static-html {
  line-height: 1.45;
}

.form-element-wrapper.static-html .static-subheading {
  display: block;
  font-style: italic;
  margin-top: 6px;
}

.form-element-wrapper.static-html .form-static-html strong,
.form-element-wrapper.static-html .form-static-html .form-letterhead-line {
  display: block;
}

/* ===== Mobile Styles (???768px) ===== */
@media only screen and (max-width: 768px) {
  /* Predictable sizing + avoid stray horizontal scroll */
  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    /* Stop rubber-band overscroll revealing a white pane */
    overscroll-_: none;
    background-color: #fff;
  }

  /* Use 100% (not 100vw) and add symmetric gutters */
  .page-wrap,
  body > div.page-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Make the outer container always cover the viewport height to avoid
     a ???leftover??? blank area as the URL bar hides/shows on mobile */
  .page-wrap,
  #workflow-wrapper {
    min-height: 100svh; /* safe viewport height for mobile */
  }
  @supports (min-height: 100dvh) {
    .page-wrap,
    #workflow-wrapper {
      min-height: 100dvh; /* dynamic viewport height (iOS/modern) */
    }
  }

  /* Neutralize left-only padding from desktop rules */
  .form-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 16px;
  }

  /* Hiding hovertips */
  .qtip { display: none !important; }

  /* Remove padding from "container" form */
  #StageSubmitForm { padding: 0 !important; }

  /* Hard-center and let them fill the mobile width */
  #divWorkflowContent,
  #workflow-background-wrapper {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Critical: remove fixed inner heights that can leave a ghost white band */
  #divWorkflowContent {
    height: auto !important;
    min-height: 0 !important;
  }
  #workflow-background-wrapper {
    min-height: 0 !important;
  }

  /* Ensure outer wrapper is fully fluid and centered */
  #workflow-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  #contentWorkbench { width: 100% !important; }

  /* Dialogs / popups fit on small screens */
  .k-widget.k-window {
    width: 90% !important;
    left: 5% !important;
    right: 5% !important;
  }

  /* Typography scale for readability (keeps iOS from zooming) */
  body, .page-content, .form-section {
    font-size: 14px;
    line-height: 1.45;
  }

  input, select, textarea,
  select:focus {
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }

  /* Field containers: comfy padding + prevent clipping */
  .workflowContent .formFieldWrapper,
  #ts-form-editor-wrapper .form-element-wrapper {
    padding: 14px 12px 8px 12px !important; /* symmetric */
    font-size: 14px;
    min-width: 0;
  }

  /* Labels */
  .formFieldWrapper label,
  .form-element-wrapper label,
  .form-element-wrapper .form-label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* Inputs/selects/textarea fill available width without clipping */
  .formFieldWrapper input[type="text"],
  .formFieldWrapper input[type="email"],
  .formFieldWrapper input[type="tel"],
  .formFieldWrapper input[type="number"],
  .formFieldWrapper select,
  .formFieldWrapper textarea,
  .form-element-wrapper input[type="text"],
  .form-element-wrapper input[type="email"],
  .form-element-wrapper input[type="tel"],
  .form-element-wrapper input[type="number"],
  .form-element-wrapper select,
  .form-element-wrapper textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  /* Kendo & common widget wrappers ??? ensure full width and no clipping */
  .k-input,
  .k-input-inner,
  .k-textbox,
  .k-dropdown,
  .k-dropdown-wrap,
  .k-combobox,
  .k-combobox .k-input,
  .k-numerictextbox,
  .k-numerictextbox .k-input,
  .k-dateinput,
  .k-datepicker,
  .k-datetimepicker,
  .k-picker,
  .k-selectbox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Radio/checkbox text */
  .formFieldWrapper .radio-checkbox-label,
  .form-element-wrapper .radio-checkbox-label {
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
  }

  /* Buttons: full-width & touch-friendly */
  .formFieldWrapper .k-button,
  .form-element-wrapper .k-button,
  .form-actions .k-button,
  button,
  input[type="submit"] {
    min-height: 44px;
    padding: 10px 14px;
    width: 100%;
  }

  /* Tables: scroll instead of overflow */
  .form-element-wrapper table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Images/iframes scale down */
  img, iframe {
    max-width: 100%;
    height: auto;
  }

  /* Breadcrumbs: compact */
  .section-breadcrumb-item {
    padding: 8px 6px;
    font-size: 13px;
  }

  /* Hide print button (kept) */
  #print-preview { display: none !important; }
}