.field
  display: flex
  flex-direction: column
  gap: .5rem
  font-size: .9rem
  font-weight: 600
  color: #374048

.field-label
  letter-spacing: .3px
  margin-bottom: .2rem

.field-control
  position: relative
  display: flex
  align-items: center
  background: #ffffff
  border: 2px solid #e1e8f0
  border-radius: 16px
  padding: 1rem 1.2rem
  transition: all .2s ease
  &.has-icon .field-input
    padding-left: 2.2rem
  &.has-error
    border-color: #d93025
    box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.1)
  &:focus-within
    border-color: #0f62fe
    box-shadow: 0 0 0 4px rgba(15, 98, 254, 0.1)
    transform: translateY(-1px)

.field-icon
  position: absolute
  left: 1rem
  top: 50%
  transform: translateY(-50%)
  display: inline-flex
  font-size: 1.1rem
  color: #6b7781
  pointer-events: none

.field-input
  appearance: none
  outline: none
  background: transparent
  border: 0
  color: #1f2429
  font: inherit
  font-size: 1rem
  font-weight: 500
  width: 100%
  line-height: 1.3
  &::placeholder
    color: #a0abb4
    font-weight: 400
  &:focus
    outline: none

.field-error
  font-size: .65rem
  font-weight: 600
  color: #d93025
  letter-spacing: .5px