.floating-field {
  position: relative; height: 64px; margin: 12px 0; border-radius: 12px;
  background: #eaf0f6;
}
.floating-label {
  position: absolute; left: 16px; right: 44px; top: 50%;
  transform: translateY(-50%); transform-origin: left top;
  font-size: 16px; line-height: 20px; color: #7c8798;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  transition: top 180ms ease, transform 180ms ease, font-size 180ms ease;
}
.floating-field:focus-within .floating-label,
.floating-field:has(input:not(:placeholder-shown)) .floating-label {
  top: 9px; transform: translateY(0); font-size: 12px;
}
.floating-field input {
  display: block; height: 64px; padding: 27px 44px 9px 16px;
  line-height: 24px; border-radius: 12px; font-size: 16px;
}
.floating-field .amount { display: block; }
.floating-field .amount input { padding-right: 74px; font-size: 24px; }
.floating-field #currency-symbol {
  position: absolute; right: 44px; top: 28px; font-size: 20px; line-height: 24px;
  opacity: 0; transition: opacity 180ms ease; pointer-events: none;
}
.floating-field:focus-within #currency-symbol,
.floating-field:has(input:not(:placeholder-shown)) #currency-symbol { opacity: 1; }
.floating-field .clear-field {
  position: absolute; right: 2px; top: 10px; width: 40px; height: 44px;
  padding: 0; background: transparent; color: #a7b1bf;
  font-size: 24px; line-height: 1; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 150ms;
}
.floating-field:has(input:not(:placeholder-shown)) .clear-field { opacity: 1; visibility: visible; }
.floating-field .clear-field:hover { color: #65758b; }
.floating-field.field-invalid {
  background: #fff;
  box-shadow: inset 0 0 0 2px #eb5757;
}
.floating-field.field-invalid .floating-label {
  top: 9px; transform: translateY(0); font-size: 12px; color: #eb5757;
}
.floating-field.field-invalid input,
.floating-field.field-invalid #currency-symbol { color: #eb5757; caret-color: #eb5757; }
.floating-field.field-invalid #currency-symbol { opacity: 1; }
.field-error {
  margin: -6px 16px 12px; color: #eb5757; font-size: 12px; line-height: 18px;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .floating-label, .floating-field .clear-field, .floating-field #currency-symbol { transition: none; }
}