/**!
 * Validetta Vanilla v1.0.0 — Stylesheet
 * Self-contained, customizable styles for error tooltips, inline alerts and animations.
 * License: MIT
 */

:root {
  --validetta-error: #e53935;
  --validetta-error-rgb: 229, 57, 53;
  --validetta-bg: #e53935;
  --validetta-text: #ffffff;
  --validetta-border: transparent;
  --validetta-radius: 4px;
  --validetta-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --validetta-z-index: 99999;
}

/* --------------------------------------------------------------------------
   Подсветка полей с ошибкой
   -------------------------------------------------------------------------- */
.validetta-error {
  border-color: var(--validetta-error) !important;
}

/* Строго убираем любые верхние/боковые рамки и box-shadow у полей с нижней линией */
.field-floating input,
.field-floating textarea,
.field-floating .form-field-input,
.field-floating .form-field-textarea,
.field-floating-input,
.cta-quick-input,
.subscribe-input {
  box-shadow: none !important;
}

.field-floating input.validetta-error,
.field-floating textarea.validetta-error,
.field-floating .form-field-input.validetta-error,
.field-floating .form-field-textarea.validetta-error,
.field-floating-input.validetta-error,
.cta-quick-input.validetta-error,
.subscribe-input.validetta-error,
.field-floating input.error,
.field-floating textarea.error,
.field-floating .form-field-input.error,
.field-floating .form-field-textarea.error,
.field-floating-input.error,
.cta-quick-input.error,
.subscribe-input.error,
.field-floating.has-error .form-field-input,
.field-floating.has-error .form-field-textarea {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--validetta-error, #e53935) !important;
  box-shadow: none !important;
  outline: none !important;
}

.field-floating.has-error .form-field-label,
.field-floating .validetta-error ~ .form-field-label,
.field-floating input.validetta-error ~ .form-field-label,
.field-floating textarea.validetta-error ~ .form-field-label,
.field-floating .error ~ .form-field-label,
.field-floating.has-error .field-floating-label,
.field-floating-input.validetta-error ~ .field-floating-label,
.field-floating-input.error ~ .field-floating-label {
  color: var(--validetta-error, #e53935) !important;
}

/* Чекбоксы согласия */
.form-group.has-error .custom-checkbox,
.form-agree-checkbox.validetta-error + .custom-checkbox,
.form-agree-checkbox.error + .custom-checkbox,
.form-group.has-error .cta-checkbox,
.cta-checkbox.validetta-error,
.cta-checkbox.error {
  border-color: var(--validetta-error, #e53935) !important;
}

/* Корректное отображение сообщений под строками быстрых форм и подписок */
.cta-quick-form .validetta-inline,
.cta-quick-form .field-error-msg {
  width: 100%;
  text-align: left;
  margin-top: -6px;
  margin-bottom: 2px;
}

.subscribe-form .validetta-inline,
.subscribe-form .field-error-msg {
  width: 100%;
  text-align: left;
  margin-top: 8px;
}

.subscribe-field {
  display: block;
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Анимация встряхивания поля (Shake)
   -------------------------------------------------------------------------- */
.validetta-shake {
  animation: validetta-shake-anim 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes validetta-shake-anim {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --------------------------------------------------------------------------
   Всплывающее облачко (Bubble / Tooltip)
   -------------------------------------------------------------------------- */
.validetta-bubble {
  position: absolute;
  z-index: var(--validetta-z-index);
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px 8px;
  font-family: var(--validetta-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--validetta-text);
  background-color: var(--validetta-bg);
  border: none;
  border-radius: var(--validetta-radius);
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.35);
  cursor: pointer;
  user-select: none;
  animation: validetta-bubble-in 0.2s ease-out both;
  white-space: normal;
  max-width: 320px;
}

.validetta-bubble::before {
  display: none;
}

/* Позиционирование: СНИЗУ */
.validetta-bubble.pos-bottom {
  top: calc(100% - 10px);
  left: 0;
}

.validetta-bubble.pos-bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 12px;
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent var(--validetta-bg) transparent;
}

/* Позиционирование: СВЕРХУ */
.validetta-bubble.pos-top {
  bottom: calc(100% + 4px);
  left: 0;
}

.validetta-bubble.pos-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  border-width: 4px;
  border-style: solid;
  border-color: var(--validetta-bg) transparent transparent transparent;
}

/* Позиционирование: СПРАВА (Desktop) */
.validetta-bubble.pos-right {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

.validetta-bubble.pos-right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent var(--validetta-bg) transparent transparent;
}

@keyframes validetta-bubble-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* На мобильных экранах справа бабблы могут вылезти за экран -> переключаем под поле */
@media (max-width: 767px) {
  .validetta-bubble.pos-right {
    top: calc(100% + 8px);
    left: 0;
    transform: none;
  }
  .validetta-bubble.pos-right::after {
    top: auto;
    bottom: 100%;
    left: 16px;
    right: auto;
    transform: none;
    border-color: transparent transparent var(--validetta-error) transparent;
  }
}

/* --------------------------------------------------------------------------
   Встроенный текст под полем (Inline Message)
   Фирменный стиль: ВСЕ БУКВЫ ЗАГЛАВНЫЕ, моноширинный шрифт, разреженный трекинг
   -------------------------------------------------------------------------- */
.validetta-inline,
.field-error-msg,
.agree-error-msg {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--validetta-error, #C8402E) !important;
  animation: validetta-inline-in 0.2s ease-out both;
}

@keyframes validetta-inline-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}