/* 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;
}