/* Блок согласий в формах заявки. Цвет текста наследуется, чтобы блок
   одинаково читался и на светлых, и на тёмных страницах.

   Обязательная галочка, пока не отмечена, красная и пульсирует: так видно,
   что её нужно поставить самому. После отметки становится зелёной.
   Необязательная (реклама) нейтральная и тоже зеленеет при отметке. */
.ttt-consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 6px;
  text-align: left;
}

.ttt-consent__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: inherit;
  cursor: pointer;
}

.ttt-consent .ttt-consent__row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 1px 0 0;
  padding: 0;
  border: 2px solid #9ca3af;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.ttt-consent .ttt-consent__row input[type="checkbox"][data-consent-required]:not(:checked) {
  border-color: #e53e3e;
  background: rgba(229, 62, 62, .12);
  animation: ttt-consent-pulse 1.3s ease-out infinite;
}

.ttt-consent .ttt-consent__row input[type="checkbox"]:checked {
  border-color: #16a34a;
  background: #16a34a;
  animation: none;
}

.ttt-consent .ttt-consent__row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ttt-consent .ttt-consent__row input[type="checkbox"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.ttt-consent__row a {
  color: #e53e3e;
  text-decoration: underline;
}

.ttt-consent__row.is-invalid span {
  color: #e53e3e;
}

.ttt-consent__error {
  font-size: 12.5px;
  line-height: 1.4;
  color: #e53e3e;
}

@keyframes ttt-consent-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 62, 62, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(229, 62, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ttt-consent .ttt-consent__row input[type="checkbox"][data-consent-required]:not(:checked) {
    animation: none;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, .35);
  }
}