/* form-validate.css — стилі клієнтської валідації форм. Парний до form-validate.js. */

/* Підказка під полем (JS-генерована) */
.field-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-top: 6px;
  color: var(--iprm-error-text, #dc2626);
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-hint--js::before {
  content: '⚠';
  font-size: 0.875rem;
}

/* Підсвічування невалідного поля */
.field-invalid,
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color: var(--iprm-error, #ef4444) !important;
  box-shadow: 0 0 0 3px var(--iprm-error-bg, #fef2f2) !important;
  background-color: var(--iprm-error-bg, #fef2f2);
}

/* Позитивне підтвердження: поле пройшло перевірку.
   Галочка -- фоновою SVG (input не має ::after), колір #22c55e читається
   і на світлій, і на тёмній темі. */
input.field-valid,
select.field-valid,
textarea.field-valid {
  border-color: var(--iprm-success) !important;
  box-shadow: 0 0 0 3px var(--iprm-success-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 42px;
}

/* Textarea: галочка вгорі, а не по центру поля */
textarea.field-valid {
  background-position: right 14px top 12px;
}

.field-hint--ok {
  color: var(--iprm-success);
  animation: iprm-hint-in 0.25s ease-out both;
}

.field-hint--ok::before {
  content: '✓';
  font-size: 0.875rem;
  font-weight: 700;
}

@keyframes iprm-hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Підказка всередині .form-checkbox (flex-рядок) -- окремим рядком під ним */
.form-checkbox > .field-hint {
  flex-basis: 100%;
  margin-top: 4px;
}

.form-checkbox:has(> .field-hint) {
  flex-wrap: wrap;
}

/* Для груп (radio/checkbox) підсвічуємо контейнер */
[data-required-group].field-invalid {
  outline: 2px solid var(--iprm-error, #ef4444);
  outline-offset: 4px;
  border-radius: var(--iprm-radius-sm, 12px);
}

/* Анімація трясіння при помилці */
@keyframes iprm-field-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.field-shake {
  animation: iprm-field-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@media (prefers-reduced-motion: reduce) {
  .field-shake { animation: none; }
  .field-hint--ok { animation: none; }
}