/* ============================================================
   Плашка «Я не робот»
   Стили самодостаточные: тема может ничего не знать о плагине.
   Если у темы есть свои токены (--accent, --radius), плашка их
   подхватит — иначе возьмёт запасные значения.
   ============================================================ */

.hcf7 {
  --hcf7-accent: var(--accent, #2f6f6b);
  --hcf7-ink: var(--ink, #23201d);
  --hcf7-ink-2: var(--ink-2, #5d5750);
  --hcf7-line: var(--line, #e2ddd6);
  --hcf7-bg: var(--surface, #fff);
  --hcf7-radius: var(--radius, .875rem);
  --hcf7-ok: color-mix(in oklab, var(--hcf7-accent) 12%, transparent);

  margin-block: .875rem;
}

/* Ловушка: не display:none — часть ботов пропускает скрытые поля. */
.hcf7__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hcf7__box {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 3rem;
  padding: .375rem .75rem;
  border: 1px solid var(--hcf7-line);
  border-radius: var(--hcf7-radius);
  background: var(--hcf7-bg);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.hcf7:not(.is-done) .hcf7__box:hover { border-color: color-mix(in oklab, var(--hcf7-accent) 45%, var(--hcf7-line)); }

.hcf7.is-done .hcf7__box {
  border-color: color-mix(in oklab, var(--hcf7-accent) 55%, transparent);
  background: linear-gradient(0deg, var(--hcf7-ok), var(--hcf7-ok)), var(--hcf7-bg);
}

.hcf7.is-error .hcf7__box { border-color: #c2553b; }

/* Знак справа: проверку делает сам сайт, без чужих сервисов. */
.hcf7__shield {
  margin-inline-start: auto;
  flex: none;
  display: inline-flex;
  color: color-mix(in oklab, var(--hcf7-ink-2) 45%, transparent);
  transition: color .18s ease, scale .18s ease;
}

.hcf7.is-done .hcf7__shield { color: var(--hcf7-accent); scale: 1.04; }

@media (prefers-reduced-motion: reduce) {
  .hcf7 *, .hcf7 { transition: none !important; animation: none !important; }
}

/* ---------- Ползунок ---------- */

.hcf7__box { padding: .25rem; gap: .5rem; }

.hcf7__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 2.375rem;
  border-radius: calc(var(--hcf7-radius) - .25rem);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--hcf7-accent) 14%, transparent),
    color-mix(in oklab, var(--hcf7-accent) 4%, transparent));
  color: var(--hcf7-ink-2);
  font-weight: 600;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.hcf7__track:active { cursor: grabbing; }
.hcf7__track:focus-visible { outline: 2px solid var(--hcf7-accent); outline-offset: 2px; }

.hcf7__knob {
  position: absolute;
  inset-block: .1875rem;
  inset-inline-start: .1875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  border-radius: calc(var(--hcf7-radius) - .375rem);
  background: var(--hcf7-accent);
  color: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
  translate: var(--hcf7-x, 0) 0;
}

.hcf7.is-dragging .hcf7__knob { transition: none; }
.hcf7:not(.is-dragging) .hcf7__knob { transition: translate .18s ease; }

.hcf7.is-done .hcf7__track {
  background: color-mix(in oklab, var(--hcf7-accent) 16%, transparent);
  color: var(--hcf7-ink);
  cursor: pointer;
}

/* Куда вести ручку: пунктирная площадка у правого края дорожки. */
.hcf7__target {
  position: absolute;
  inset-block: .1875rem;
  inset-inline-end: .1875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  border: 1.5px dashed color-mix(in oklab, var(--hcf7-accent) 55%, transparent);
  border-radius: calc(var(--hcf7-radius) - .375rem);
  color: color-mix(in oklab, var(--hcf7-accent) 70%, transparent);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, scale .18s ease;
}

.hcf7__track:hover .hcf7__target,
.hcf7.is-dragging .hcf7__target {
  border-style: solid;
  background: color-mix(in oklab, var(--hcf7-accent) 14%, transparent);
  color: var(--hcf7-accent);
  scale: 1.04;
}

/* Подтверждено — цель отработала и уходит. */
.hcf7.is-done .hcf7__target { opacity: 0; }

.hcf7__hint {
  position: relative;
  z-index: 1;
  padding-inline: 2.5rem;
  font-size: .875rem;
  pointer-events: none;
}

/* ---------- Общее ---------- */

.hcf7__note {
  margin: .375rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--hcf7-ink-2);
  min-height: 1.25rem;
}

.hcf7.is-error .hcf7__note { color: #a3341f; }
.hcf7.is-done .hcf7__note { color: var(--hcf7-accent); }

/* Кнопка отправки, пока подтверждения нет */
.hcf7-locked { opacity: .55; cursor: not-allowed; }