/* =====================================================
   SQ4 DROPDOWN STATES — ALL DEVICES
   ===================================================== */

#question_SQ4 td.inj-sq4-disabled-cell {
  background-color: #e8e8e8 !important;
}

#question_SQ4 td.inj-sq4-active-cell {
  background-color: #eef8ef !important;
}

#question_SQ4 select.inj-sq4-disabled-select {
  pointer-events: none !important;
  cursor: not-allowed !important;
  background-color: #d8d8d8 !important;
  color: #777777 !important;
  opacity: 0.85 !important;
}

#question_SQ4 select.inj-sq4-enabled-select {
  pointer-events: auto !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
  color: #222222 !important;
  opacity: 1 !important;
}

#question_SQ4 .inj-sq4-mobile-select-label {
  display: none;
}


/* =====================================================
   SQ4 MOBILE / SMALL DEVICE LAYOUT
   ===================================================== */

@media screen and (max-width: 900px) {

  #question_SQ4,
  #question_SQ4 .answers,
  #question_SQ4 .answers-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }


  /*
   * Hide Forsta-generated mobile cells.
   * The original desktop cells are converted into
   * a stable stacked layout for smaller devices.
   */

  #question_SQ4 td.mobile,
  #question_SQ4 th.mobile {
    display: none !important;
  }


  #question_SQ4 table.grid,
  #question_SQ4 table.grid tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }


  /*
   * Hide the desktop column-heading row and
   * Forsta's mobile top-border row.
   */

  #question_SQ4 tr.mobile-top-border-row,
  #question_SQ4 tr.row-col-legends {
    display: none !important;
  }


  /*
   * Each occupation row becomes a separate card.
   */

  #question_SQ4 tr.row-elements {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }


  /*
   * Hide the separate desktop row heading because
   * the occupation description is already present
   * inside the radio-button cell.
   */

  #question_SQ4 tr.row-elements > th.row-legend {
    display: none !important;
  }


  /*
   * Force the original desktop cells to display
   * as stacked mobile sections.
   */

  #question_SQ4 tr.row-elements > td.desktop {
    display: block !important;
  }


  #question_SQ4 tr.row-elements > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 13px !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }


  /* =====================================================
     RADIO / JOC SECTION
     ===================================================== */

  #question_SQ4 td[headers*="SQ4_c1"] {
    display: block !important;
    background-color: #ffffff !important;
  }


  #question_SQ4 td[headers*="SQ4_c1"] .cell-sub-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  #question_SQ4 td[headers*="SQ4_c1"] .cell-input {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 3px 10px 0 0 !important;
  }


  #question_SQ4 td[headers*="SQ4_c1"] .cell-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    line-height: 1.4 !important;
  }


  #question_SQ4 td[headers*="SQ4_c1"] label {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }


  /* =====================================================
     ART-FORM DROPDOWN SECTION
     ===================================================== */

  #question_SQ4 td[headers*="SQ4_c2"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-top: 1px solid #dddddd !important;
    box-sizing: border-box !important;
  }


  /*
   * Hide the duplicated occupation description only
   * inside normal dropdown rows.
   *
   * IMPORTANT:
   * The :not(.row-no-answer) condition ensures that
   * the no-answer label remains visible.
   */

  #question_SQ4 tr.row-elements:not(.row-no-answer)
  td[headers*="SQ4_c2"]
  > .cell-sub-wrapper
  > .cell-text {
    display: none !important;
  }


  #question_SQ4 td[headers*="SQ4_c2"] .cell-sub-wrapper,
  #question_SQ4 td[headers*="SQ4_c2"] .cell-input,
  #question_SQ4 td[headers*="SQ4_c2"] .fir-select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  /*
   * Mobile-specific label inserted above each dropdown.
   */

  #question_SQ4 .inj-sq4-mobile-select-label {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: bold !important;
    color: #333333 !important;
  }


  /*
   * Mobile-safe dropdown sizing.
   * A 16px font prevents automatic zoom on iOS.
   */

  #question_SQ4 select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 8px 34px 8px 10px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }


  /* =====================================================
     NO-ANSWER OPTION
     ===================================================== */

  /*
   * Keep the no-answer option as a normal mobile card.
   */

  #question_SQ4 tr.row-no-answer {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }


  /*
   * The no-answer TD also contains headers="SQ4_c2",
   * but it is not an art-form dropdown cell.
   */

  #question_SQ4 tr.row-no-answer > td.cell-no-answer {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 13px !important;
    background-color: #ffffff !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
  }


  /*
   * Hide the dropdown helper label if one was inserted
   * accidentally inside the no-answer row.
   */

  #question_SQ4 tr.row-no-answer
  .inj-sq4-mobile-select-label {
    display: none !important;
  }


  /*
   * Display the checkbox and full no-answer wording
   * next to each other.
   */

  #question_SQ4 tr.row-no-answer
  td.cell-no-answer
  > .cell-sub-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  #question_SQ4 tr.row-no-answer
  td.cell-no-answer
  > .cell-sub-wrapper
  > .cell-input {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 2px 10px 0 0 !important;
  }


  #question_SQ4 tr.row-no-answer
  td.cell-no-answer
  > .cell-sub-wrapper
  > .cell-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    line-height: 1.4 !important;
  }


  #question_SQ4 tr.row-no-answer
  td.cell-no-answer
  label {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.4 !important;
  }
}

/* =====================================================
   SQ4 NO-ANSWER VISUAL RESET
   ===================================================== */

/*
 * Force the tick to disappear when the underlying
 * no-answer checkbox is no longer selected.
 */

#question_SQ4
tr.row-no-answer.inj-sq4-na-unchecked
.fir-icon
.fir-selected {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/*
 * Remove the retained selected background after
 * the no-answer option is unchecked.
 */

#question_SQ4
tr.row-no-answer.inj-sq4-na-unchecked,
#question_SQ4
tr.row-no-answer.inj-sq4-na-unchecked
td.cell-no-answer,
#question_SQ4
tr.row-no-answer.inj-sq4-na-unchecked
.cell-sub-wrapper {
  background-color: #ffffff !important;
}


/*
 * Do not interfere with Forsta's normal checked
 * appearance when the option is selected.
 */

#question_SQ4
tr.row-no-answer.inj-sq4-na-checked
.fir-icon
.fir-selected {
  visibility: visible !important;
  opacity: 1 !important;
}