input::placeholder {
  text-align: right;
  direction: rtl;
}

/* Digit order stays LTR. Empty (placeholder) aligns right; typed value aligns left. */
input[type='tel'] {
  direction: ltr !important;
  text-align: left !important;
}

input[type='tel']:placeholder-shown {
  text-align: right !important;
}

input[type='tel']::placeholder {
  text-align: right;
  direction: rtl;
}

[data-slot='input-field'] {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

[data-slot='input'] {
  text-align: right;
}

/* Digit order for number fields stays LTR (same idea as tel). Alignment stays overridable (e.g. centered fee fields). */
[data-slot='number-field-input'] {
  direction: ltr !important;
}

/* Kill HeroUI focus-field-ring / invalid-field-ring so fields show a single border only.
 * invalid-field-ring draws outline-1 when invalid + unfocused (looks like a black ring).
 * Cover every HeroUI field shell that applies status-invalid-field / status-focused-field.
 * Legacy input-wrapper kept for older HeroUI markup. */
[data-slot='input-wrapper'],
[data-slot='input-group'],
[data-slot='textarea'],
[data-slot='select-trigger'],
[data-slot='autocomplete-trigger'],
[data-slot='input-otp-slot'],
[data-slot='input-otp-group'],
[data-slot='number-field-group'],
[data-slot='search-field-group'],
[data-slot='date-input-group'],
[data-slot='color-input-group'],
.input,
.textarea,
.input-group,
.number-field__group,
.search-field__group,
.date-input-group,
.color-input-group,
.input-otp__slot,
.select__trigger,
.autocomplete__trigger,
.radio__control,
.checkbox__control {
  outline: none !important;
  --tw-ring-offset-width: 0px !important;

  &[data-focus='true'],
  &[data-focused='true'],
  &[data-focus-within='true'],
  &[data-focus-visible='true'],
  &[data-active='true'],
  &[data-invalid='true'],
  &[aria-invalid='true'],
  &:focus,
  &:focus-visible,
  &:focus-within {
    outline: none !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-width: 0px !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  }
}

/* Parent-invalid → trigger shells (Select / Autocomplete) */
.select[data-invalid='true'] [data-slot='select-trigger'],
.select[aria-invalid='true'] [data-slot='select-trigger'],
.select[data-invalid='true'] .select__trigger,
.select[aria-invalid='true'] .select__trigger,
.autocomplete[data-invalid='true'] [data-slot='autocomplete-trigger'],
.autocomplete[aria-invalid='true'] [data-slot='autocomplete-trigger'],
.autocomplete[data-invalid='true'] .autocomplete__trigger,
.autocomplete[aria-invalid='true'] .autocomplete__trigger,
.radio[data-invalid='true'] .radio__control,
.radio[aria-invalid='true'] .radio__control,
.checkbox[data-invalid='true'] .checkbox__control,
.checkbox[aria-invalid='true'] .checkbox__control {
  outline: none !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-width: 0px !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.labelClass {
  font-weight: 400 !important;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  color: var(--color-text) !important;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.rmdp-input::placeholder,
.rmdp-input input::placeholder,
.date-picker-input .rmdp-input::placeholder,
.date-picker-input input::placeholder,
.date-picker-input input[type='text']::placeholder {
  font-size: 13px;
  color: var(--color-secondary-30) !important;
}

.rmdp-input {
  color: var(--color-primary-1000) !important;
  font-size: 14px !important;
}

.rmdp-input:hover {
  border-color: var(--color-primary-300) !important;
}

.rmdp-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0px var(--color-primary) !important;
}

.date-picker-input--in-wrapper .rmdp-input,
.date-picker-input--in-wrapper .rmdp-input:hover,
.date-picker-input--in-wrapper .rmdp-input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Match HeroUI invalid Input border (no extra ring) */
.date-picker-input--invalid .rmdp-input,
.date-picker-input--invalid input.rmdp-input {
  border-color: var(--color-fourth) !important;
}

.date-picker-input--invalid .rmdp-input:hover,
.date-picker-input--invalid .rmdp-input:focus,
.date-picker-input--invalid input.rmdp-input:hover,
.date-picker-input--invalid input.rmdp-input:focus {
  border-color: var(--color-fourth) !important;
  box-shadow: none !important;
}

@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  input,
  textarea {
    font-size: 16px !important;
  }
}