/* display.css - confirmField
   Migrated CSS rules that control the confirm/password container and
   its child inputs from vMAX/hone.css.

   Original rules were consolidated here to keep field-specific styles
   next to the field's markup. If you need to tweak confirm field visuals,
   edit this file instead of vMAX/hone.css.

   NOTE: This file contains multiple blocks that were previously scattered
   through hone.css (duplicated/overridden in places). We've preserved the
   full set of confirm-related selectors in the same order they appeared so
   behavior/overrides remain unchanged.
*/

/* Ensure the confirm/password container (right column) matches the left
   column's spacing and input sizing */
[data-loc="confirmContainer"],
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* same internal gap as left column */
  padding-top: 0 !important; /* remove top padding so inputs align to top */
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Make inputs inside the confirm container use canonical input sizing and remove extra margins */
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"] .form-input,
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"] input,
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"] textarea {
  height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  box-sizing: border-box !important;
}

/* Ensure the right-hand column (password / confirm) gets identical vertical
   spacing to the left column. Some earlier rules aggressively reset padding
   for the third td; these stronger selectors restore it. */
.card-table tr.form-row td:nth-child(3) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.card-table tr.form-row td:nth-child(3) .form-input,
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"],
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"] * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Align right-column (password/confirm) vertically with left-column inputs.
   Remove any top padding/margin and neutralize transforms that were nudging
   the inputs down. This is intentionally specific and was placed late in hone.css. */
.card-table tr.form-row td:nth-child(3) {
  padding-top: 0 !important;
  margin-top: 0 !important;
  vertical-align: top !important;
}
.card-table tr.form-row td:nth-child(3) > [data-loc="confirmContainer"],
.card-table tr.form-row td:nth-child(3) [data-loc="confirmContainer"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}
.card-table tr.form-row td:nth-child(3) .form-input,
.card-table tr.form-row td:nth-child(3) input,
.card-table tr.form-row td:nth-child(3) textarea {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: none !important;
  vertical-align: top !important;
}

/* Confirm container: children match canonical input metrics (final overrides) */
[data-loc="confirmContainer"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
}
[data-loc="confirmContainer"] .form-input,
[data-loc="confirmContainer"] input,
[data-loc="confirmContainer"] textarea {
  height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  box-sizing: border-box !important;
}

/* End of confirm-specific rules */