/* form[data-validate] {
  @apply grid gap-4;
  display: grid;
  gap: 16px;
} */

form[data-validate] .input-field {
  /* @apply relative grid; */
  position: relative;
  display: grid;
}

form[data-validate] .input-field label {
  /* @apply text-xs font-bold uppercase tracking-wide leading-none text-gray-700 mb-2; */
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1;
  color: #9E9E9E;
  margin-bottom: 8px;
}

form[data-validate] .input-field input,
form[data-validate] .input-field textarea,
form[data-validate] .input-field select {
  /* @apply font-normal text-netbanktextgray outline-none leading-tight box-border py-3 px-4 rounded border border-gray-700; */
  font-weight: 400;
  color: #374151;
  outline: none;
  line-height: 1.25;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border: solid 1px #aaa;
}

form[data-validate] .input-field input::placeholder,
form[data-validate] .input-field textarea::placeholder,
form[data-validate] .input-field select::placeholder {
  color: #9ca3af;
}

form[data-validate] .input-field select {
  /* @apply appearance-none bg-no-repeat; */
  appearance: none;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: calc(100% - 1rem) center;
}

form[data-validate] .input-field:not(:has(> p)) {
  /* @apply pb-4; */
  padding-bottom: 16px;
}

form[data-validate] .input-field input~p,
form[data-validate] .input-field textarea~p,
form[data-validate] .input-field select~p {
  /* @apply mt-1; */
  margin-top: 4px;
}

form[data-validate] .input-field .counter {
  /* @apply hidden absolute top-0 right-0 opacity-50 text-xs leading-none text-gray-700; */
  padding: inherit;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.5;
  font-size: 0.75rem;
  line-height: 1;
  color: #9ca3af;
}

form[data-validate][data-validate-expose-counter] .input-field .counter {
  /* @apply block; */
  display: block;
}

form[data-validate] .input-field:focus-within .counter {
  /* @apply block; */
  display: block;
}

form[data-validate] .input-field:not(.input-field--invalid) input:focus,
form[data-validate] .input-field:not(.input-field--invalid) textarea:focus,
form[data-validate] .input-field:not(.input-field--invalid) select:focus {
  outline: none;
  background-color: #f7f8ff;
  border-color: #2266ea;
  transition: all 350ms ease-in-out;
}

form[data-validate] .input-field p.helper {
  /* @apply text-netbanktextgray text-xs leading-none; */
  font-size: 0.75rem;
  color: #9E9E9E;
  line-height: 1;
}

form[data-validate] .input-field--invalid input,
form[data-validate] .input-field--invalid textarea,
form[data-validate] .input-field--invalid select {
  /* @apply border-netbankREJECTEDColor; */
  border-color: #ef4444;
}

form[data-validate] .input-field--invalid .counter {
  /* @apply text-netbankREJECTEDColor; */
  color: #ef4444;
}

form[data-validate] .input-field--invalid p.helper {
  /* @apply hidden; */
  display: none;
}

form[data-validate] .input-field--invalid p.validation-error {
  /* @apply text-xs text-netbankREJECTEDColor flex items-center gap-1 leading-none; */
  font-size: 0.75rem;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

form[data-validate] .input-field--invalid p.validation-error::before {
  /* @apply h-3 w-3; */
  color: inherit;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  width: 12px;
  height: 12px;
}


/*  */

/* form[data-validate] {
  @apply grid gap-4;
  display: grid;
  gap: 16px;
} */

form[data-validate-signup] .input-field {
  /* @apply relative grid; */
  position: relative;
  display: grid;
}

form[data-validate-signup] .input-field label {
  /* @apply text-xs font-bold uppercase tracking-wide leading-none text-gray-700 mb-2; */
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1;
  color: #9E9E9E;
  margin-bottom: 8px;
}

form[data-validate-signup] .input-field input,
form[data-validate-signup] .input-field textarea,
form[data-validate-signup] .input-field select {
  /* @apply font-normal text-netbanktextgray outline-none leading-tight box-border py-3 px-4 rounded border border-gray-700; */
  font-weight: 400;
  color: #374151;
  outline: none;
  line-height: 1.25;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border: solid 1px #aaa;
}

form[data-validate-signup] .input-field input::placeholder,
form[data-validate-signup] .input-field textarea::placeholder,
form[data-validate-signup] .input-field select::placeholder {
  color: #9ca3af;
}

form[data-validate-signup] .input-field select {
  /* @apply appearance-none bg-no-repeat; */
  appearance: none;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: calc(100% - 1rem) center;
}

form[data-validate-signup] .input-field:not(:has(> p)) {
  /* @apply pb-4; */
  padding-bottom: 16px;
}

form[data-validate-signup] .input-field input~p,
form[data-validate-signup] .input-field textarea~p,
form[data-validate-signup] .input-field select~p {
  /* @apply mt-1; */
  margin-top: 4px;
}

form[data-validate-signup] .input-field .counter {
  /* @apply hidden absolute top-0 right-0 opacity-50 text-xs leading-none text-gray-700; */
  padding: inherit;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.5;
  font-size: 0.75rem;
  line-height: 1;
  color: #9ca3af;
}

form[data-validate-signup][data-validate-signup-expose-counter] .input-field .counter {
  /* @apply block; */
  display: block;
}

form[data-validate-signup] .input-field:focus-within .counter {
  /* @apply block; */
  display: block;
}

form[data-validate-signup] .input-field:not(.input-field--invalid) input:focus,
form[data-validate-signup] .input-field:not(.input-field--invalid) textarea:focus,
form[data-validate-signup] .input-field:not(.input-field--invalid) select:focus {
  outline: none;
  background-color: #f7f8ff;
  border-color: #2266ea;
  transition: all 350ms ease-in-out;
}

form[data-validate-signup] .input-field p.helper {
  /* @apply text-netbanktextgray text-xs leading-none; */
  font-size: 0.75rem;
  color: #9E9E9E;
  line-height: 1;
}

form[data-validate-signup] .input-field--invalid input,
form[data-validate-signup] .input-field--invalid textarea,
form[data-validate-signup] .input-field--invalid select {
  /* @apply border-netbankREJECTEDColor; */
  border-color: #ef4444;
}

form[data-validate-signup] .input-field--invalid .counter {
  /* @apply text-netbankREJECTEDColor; */
  color: #ef4444;
}

form[data-validate-signup] .input-field--invalid p.helper {
  /* @apply hidden; */
  display: none;
}

form[data-validate-signup] .input-field--invalid p.validation-error {
  /* @apply text-xs text-netbankREJECTEDColor flex items-center gap-1 leading-none; */
  font-size: 0.75rem;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

form[data-validate-signup] .input-field--invalid p.validation-error::before {
  /* @apply h-3 w-3; */
  color: inherit;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  width: 12px;
  height: 12px;
}


/* Fund transfer form (#disburse-form).

   It is not built on the form[data-validate] primitive - converting it would
   restyle every label on the page - but it reuses that primitive's inline-error
   contract verbatim: .input-field--invalid on the field wrapper, and a
   p.validation-error carrying the message below the input. Same red, same
   warning glyph, so a field error reads identically wherever it appears.
   [NBV-4676]

   #fav-edit-form is the favorites edit modal, which saves through the same
   validator. It is listed here rather than given its own block so the two can
   never drift into two spellings of the same error. */

#disburse-form .input-field--invalid input,
#disburse-form .input-field--invalid select,
#fav-edit-form .input-field--invalid input,
#fav-edit-form .input-field--invalid select {
  border-color: #ef4444;
}

/* Address is one labelled field spread over four boxes, so the wrapper rule
   above would red a filled Address line 1 because the City beside it is empty.
   The client-side validator flags the offending boxes individually instead. */
#disburse-form input.field-invalid,
#disburse-form select.field-invalid,
#fav-edit-form input.field-invalid,
#fav-edit-form select.field-invalid {
  border-color: #ef4444;
}

#disburse-form p.validation-error,
#fav-edit-form p.validation-error {
  font-size: 0.75rem;
  color: #ef4444;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.25;
  margin-top: 4px;
}

#disburse-form p.validation-error::before,
#fav-edit-form p.validation-error::before {
  color: inherit;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Bank list failed to load [NBV-4677]. The message sits in the field's helper
   slot rather than the validation slot, so a submit's "required" message can't
   paint over the retry button beside it. Same #ef4444 as every other error on
   this form - DESIGN.md already lists three competing danger reds, so this
   does not introduce a fourth. */
#disburse-form #f_bank_helper.helper-error {
  color: #ef4444;
}