/**
 * Global panel floating-label inputs (My Account).
 *
 * Canonical markup (do not duplicate these rules elsewhere):
 *
 *   <div class="amount-input-wrapper-ts ayarfar-floating-field">
 *     <input class="amount-input-ts" placeholder=" " ...>
 *     <label class="ayarfar-floating-label" for="...">Label</label>
 *   </div>
 *
 * Legacy aliases `.trades-floating-field` / `.trades-floating-label` remain for BC.
 * Styles live only here — endpoint CSS must not re-declare the float animation.
 */

:is(.ayarfar-floating-field, .trades-floating-field) {
  position: relative;
}

:is(.ayarfar-floating-label, .trades-floating-label) {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: var(--ayarfar-panel-fs-13, 13px);
  font-weight: var(--ayarfar-panel-fw-regular, 400);
  font-family: inherit;
  line-height: 1.2;
  color: #d7d7d7;
  background-color: #fff;
  padding: 0 4px;
  pointer-events: none;
  transition: top var(--transition-fast, 0.2s ease), transform var(--transition-fast, 0.2s ease), font-size var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}

:is(.ayarfar-floating-field, .trades-floating-field) .amount-input-ts:is(:focus, :not(:placeholder-shown)) + :is(.ayarfar-floating-label, .trades-floating-label) {
  top: 0;
  transform: translateY(-50%);
  font-size: var(--ayarfar-panel-fs-11, 11px);
  color: #d7d7d7;
  font-weight: var(--ayarfar-panel-fw-semibold, 600);
}

:is(.ayarfar-floating-field, .trades-floating-field) .amount-input-ts:focus + :is(.ayarfar-floating-label, .trades-floating-label) {
  color: var(--color-border-focus);
}

:is(.ayarfar-floating-field, .trades-floating-field) .amount-input-ts {
  border: 1px solid var(--color-border-light);
}

/* Error: red border + floating label / placeholder — driven by .input-error-ts via AyarfarPanelInputs.showInputError() */
.calculator-ts .amount-input-ts.input-error-ts,
.calculator-ts .amount-input-ts.input-error-ts:focus,
.amount-input-ts.input-error-ts,
.amount-input-ts.input-error-ts:focus,
.card-input-ws.input-error-ts,
.card-input-ws.input-error-ts:focus,
select.input-error-ts,
select.input-error-ts:focus {
  border-color: var(--color-status-error) !important;
  box-shadow: none !important;
}

.amount-input-ts.input-error-ts::placeholder,
.card-input-ws.input-error-ts::placeholder {
  color: var(--color-status-error) !important;
}

:is(.ayarfar-floating-field, .trades-floating-field) .amount-input-ts.input-error-ts + :is(.ayarfar-floating-label, .trades-floating-label) {
  color: var(--color-status-error) !important;
}