.select-field
  display: flex
  flex-direction: column
  gap: 0.5rem
  font-size: 0.9rem
  font-weight: 600
  color: #374048

.select-label
  letter-spacing: 0.3px
  margin-bottom: 0.2rem

.select-container
  position: relative
  display: flex
  align-items: center
  background: #ffffff
  border: 2px solid #e1e8f0
  border-radius: 16px
  transition: all 0.2s ease
  
  &.select-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)

.select-input
  appearance: none
  background: transparent
  border: 0
  color: var(--text)
  font: inherit
  font-size: 1rem
  font-weight: 500
  width: 100%
  line-height: 1.3
  outline: none
  cursor: pointer
  padding: 1rem 1.2rem
  
  &:disabled
    opacity: 0.6
    cursor: not-allowed

.select-icon
  position: absolute
  right: 1rem
  top: 50%
  transform: translateY(-50%)
  pointer-events: none
  color: var(--text-dim)
  display: flex
  align-items: center
  justify-content: center

.select-error-text
  font-size: 0.65rem
  font-weight: 600
  color: #d93025
  letter-spacing: 0.5px