/* optionalField/display.css
   Extracted from vMAX/hone.css. Contains optional-container display rules.
*/

[data-loc="optionalContainer"] {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important; /* neutralize the translateY(-2px) nudge */
  margin-top: 0 !important;
}

[data-loc="optionalContainer"] .form-input,
[data-loc="optionalContainer"] input,
[data-loc="optionalContainer"] textarea,
[data-loc="optionalContainer"] .prefix-input {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

[data-loc="optionalContainer"] input[name="optional"],
[data-loc="optionalContainer"] .form-input[data-loc="optionalInputCalc"] {
  transform: none !important;
}

.optional-swap-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.optional-swap-wrapper .form-input[name="optional"],
.optional-swap-wrapper input[name="optional"] {
  position: relative;
  z-index: 1;
  /* reduce optional field width to 40% on larger screens */
  width: 40% !important;
  max-width: 40% !important;
  box-sizing: border-box !important;
  /* nudged up by 3px per request */
  top: -3px !important;
}
.optional-swap-wrapper #prefix-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.optional-swap-wrapper #prefix-container.hidden { display: none !important; }
.optional-swap-wrapper #prefix-container .prefix-input {
  /* Force the prefix input to occupy 25% of the container (reduced) */
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  /* right-align the typed text inside the prefix input */
  text-align: right !important;
  padding-right: 5px !important;
  /* ensure typed text and caret are white */
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Align prefix inner and domain with the optional input's left edge and vertical position */
.optional-swap-wrapper #prefix-container,
.optional-swap-wrapper #prefix-container #prefix-inner {
  position: relative !important;
  left: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

.optional-swap-wrapper #prefix-container #prefix-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.optional-swap-wrapper #prefix-container .prefix-input {
  /* match the optional input vertical nudge */
  top: -3px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  /* ensure text is right-aligned here too */
  text-align: right !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Make the static domain sit inline and vertically aligned with the prefix input */
.optional-swap-wrapper #prefix-container #static-prefix-domain,
.card-table tr.form-row[data-expanded-only] td[colspan="3"] #static-prefix-domain,
.card-table tr.form-row.expanded-only td[colspan="3"] #static-prefix-domain {
  transform: none !important;
  /* raised 2px more (from -3px to -5px) then nudged down 0.5px => -4.5px */
  top: -4.5px !important;
  /* shift left by 10px */
  left: -10px !important;
  position: relative !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  [data-loc="optionalContainer"] { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
  /* On small screens, optional and prefix inputs should be full width */
  .optional-swap-wrapper .form-input[name="optional"],
  .optional-swap-wrapper input[name="optional"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .optional-swap-wrapper #prefix-container .prefix-input {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* Strong override: match expanded row + merged cell selectors to beat theme rules */
.card-table tr.form-row[data-expanded-only] td[colspan="3"] .optional-swap-wrapper .form-input[name="optional"],
.card-table tr.form-row.expanded-only td[colspan="3"] .optional-swap-wrapper .form-input[name="optional"],
[data-loc="optionalContainer"] .optional-swap-wrapper .form-input[name="optional"],
.optional-swap-wrapper .form-input[name="optional"] {
  width: 40% !important;
  max-width: 40% !important;
  box-sizing: border-box !important;
}

/* Left-align the optional input: remove theme centering and ensure text alignment */
.card-table tr.form-row[data-expanded-only] td[colspan="3"] [data-loc="optionalContainer"] .optional-swap-wrapper .form-input[name="optional"],
.card-table tr.form-row.expanded-only td[colspan="3"] [data-loc="optionalContainer"] .optional-swap-wrapper .form-input[name="optional"],
[data-loc="optionalContainer"] .optional-swap-wrapper .form-input[name="optional"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-block !important;
  text-align: left !important;
}

/* Ensure the merged td containing the optional/prefix row is left-aligned and uses full width */
.card-table tr.form-row[data-expanded-only] td[colspan="3"],
.card-table tr.form-row.expanded-only td[colspan="3"] {
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}