/* index/shared/hold-captcha.css
 * ─────────────────────────────────────────────────────────────────────
 * Visual styling for the hold-to-confirm captcha widget. Round button
 * with a conic-gradient progress ring that fills during the hold.
 * Palette uses dating-site CSS custom properties (--c-crimson, --c-blush,
 * --c-burgundy) with hex fallbacks — works even before :root applies.
 *
 * Mobile-first: 140px target (fits ergonomic thumb hit-zone), no
 * touch-action that would interfere with the hold gesture.
 * ─────────────────────────────────────────────────────────────────────
 */

/* 2026-05-23 redesign: horizontal slider/pill (was a 140px circle).
 * Fits inline below password input on reg step 1, blocks the Continue
 * button until the hold completes. Progress fills left-to-right. */

.spark-hcap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
  width: 100%;
  margin: 4px 0 0 0;
}

.spark-hcap__btn {
  position: relative;
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 1.5px solid var(--c-blush-dark, #ffc7d3);
  padding: 0;
  background: var(--c-blush, #ffe0e7);
  color: var(--c-burgundy, #5a1932);
  cursor: pointer;
  outline: none;
  transition: border-color 200ms ease-out, transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overflow: hidden;
}

.spark-hcap__btn:hover:not(:disabled):not(.spark-hcap__btn--success):not(.spark-hcap__btn--error) {
  border-color: var(--c-crimson, #d91a4d);
}

.spark-hcap__btn:active:not(:disabled):not(.spark-hcap__btn--success):not(.spark-hcap__btn--error) {
  transform: scale(0.99);
}

.spark-hcap__btn--pressing {
  border-color: var(--c-crimson, #d91a4d);
  color: #ffffff;
}
.spark-hcap__btn--pressing:hover,
.spark-hcap__btn--pressing:active { transform: scale(1); }

/* 2026-05-23 brand palette only — no green, no bright red.
 * Success: deep burgundy (locked, satisfying). Error: brand crimson with
 * shake. Keeps everything in the project's color vocabulary. */
.spark-hcap__btn--success {
  background: var(--c-burgundy, #5a1932);
  border-color: var(--c-burgundy, #5a1932);
  color: var(--c-blush, #ffe0e7);
  cursor: default;
}

.spark-hcap__btn--error {
  background: var(--c-crimson, #d91a4d);
  border-color: var(--c-crimson, #d91a4d);
  color: #ffffff;
  animation: spark-hcap-shake 380ms ease;
}

.spark-hcap__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Progress fill — horizontal left-to-right, width driven by --p (0..100).
 * 2026-05-23: solid crimson (was gradient) to stay disciplined in the brand
 * palette. The fill colour matches the press-state border, so the bar
 * looks like it's filling INTO the same vessel rather than introducing a
 * new accent. */
.spark-hcap__ring {
  position: absolute;
  inset: 0;
  width: calc(var(--p, 0) * 1%);
  background: var(--c-crimson, #d91a4d);
  border-radius: 0;
  pointer-events: none;
  transition: opacity 120ms;
  opacity: 1;
  z-index: 0;
}
.spark-hcap__btn:not(.spark-hcap__btn--pressing) .spark-hcap__ring {
  opacity: 0;
}

.spark-hcap__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  height: 100%;
  padding: 0 16px;
}

/* 2026-05-23: icons removed from UX (per user request "галочки крестики
 * убрать"). Element stays in DOM for backward compat but hidden via display:none
 * so JS that toggles it doesn't error. */
.spark-hcap__icon { display: none; }

.spark-hcap__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

.spark-hcap__hint {
  font-size: 11px;
  line-height: 1.3;
  color: var(--c-burgundy, #5a1932);
  opacity: 0.6;
  text-align: center;
  margin: 0;
  min-height: 1.3em;
  padding-left: 4px;
}

.spark-hcap__hint--error {
  color: var(--c-crimson, #d91a4d);
  opacity: 1;
  font-weight: 600;
}

.spark-hcap__hint--success {
  color: var(--c-burgundy, #5a1932);
  opacity: 1;
  font-weight: 600;
}

/* Animations */
@keyframes spark-hcap-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes spark-hcap-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* 2026-05-23: explicit disabled-state for the reg-step1 Continue button.
 * Tailwind's `disabled:opacity-50` utility wasn't in the built CSS because
 * the HTML attribute was added AFTER the last build pass — utilities for
 * variants are JIT-purged. Hardcoded here so the visual cue ("you can't
 * click this yet, complete the captcha") is unmissable. */
#reg-step1-next:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
  transform: none !important;
}
#reg-step1-next:disabled:hover,
#reg-step1-next:disabled:active {
  transform: none !important;
}

/* Respect prefers-reduced-motion — bot-resistance still works; just
 * skip the bounce/shake. */
@media (prefers-reduced-motion: reduce) {
  .spark-hcap__btn,
  .spark-hcap__btn--success,
  .spark-hcap__btn--error,
  .spark-hcap__btn--pressing {
    animation: none !important;
    transition: background 60ms linear, color 60ms linear;
  }
}