/* yoga.captcha — tenant-brand-aware Styling.
 *
 * Nutzt ausschliesslich Design-Tokens der aktiven Public-Site (cosmic_base /
 * yoga_global / scandi), damit das Captcha auf jedem Tenant (Miraculix-Grün,
 * Cmoments, Eveline, Astrologie-Violett) automatisch on-brand aussieht.
 * Fallbacks sind neutral-warm, nicht brand-spezifisch.
 *
 * Token-Konvention:
 *   --pri  Akzent/Primär   --on  Text-auf-Fläche   --on2 gedämpfter Text
 *   --s2   Fläche/Surface  --ol2 Hairline-Border   --r   Radius
 *   --cm-* Cmoments/yoga-Brand (Vorrang vor generischen Fallbacks)
 */
.yoga-captcha {
  --_accent: var(--pri, var(--cm-accent, #5b6b4a));
  --_ink: var(--on, var(--cm-text, #2f2a24));
  --_muted: var(--on2, color-mix(in srgb, var(--_ink) 62%, transparent));
  --_surface: var(--s2, var(--cm-cream, #f7f3ea));
  --_line: var(--ol2, color-mix(in srgb, var(--_ink) 16%, transparent));
  --_radius: var(--r, 12px);

  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--_accent) 4%, transparent),
      color-mix(in srgb, var(--_accent) 4%, transparent)),
    var(--_surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yoga-captcha-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--_ink);
  letter-spacing: .01em;
}

.yoga-captcha-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.yoga-captcha-challenge {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 6px 10px;
  background: var(--surf, #fff);
  border: 1px solid var(--_line);
  border-radius: calc(var(--_radius) - 4px);
  overflow: hidden;
}

.yoga-captcha-img {
  display: block;
  max-width: 100%;
  height: 56px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  user-select: none;
  -webkit-user-select: none;
}

.yoga-captcha-question {
  font-family: var(--fd, var(--cm-heading-font, Georgia, serif));
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--_ink);
  user-select: none;
}

.yoga-captcha-refresh {
  flex: 0 0 auto;
  width: 48px;
  align-self: stretch;
  background: transparent;
  border: 1px solid var(--_line);
  color: var(--_accent);
  border-radius: calc(var(--_radius) - 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.yoga-captcha-refresh:hover {
  background: color-mix(in srgb, var(--_accent) 10%, transparent);
  border-color: var(--_accent);
}

.yoga-captcha-refresh:active { transform: scale(.94); }

.yoga-captcha-refresh:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px;
}

.yoga-captcha-refresh .material-symbols-outlined {
  font-size: 22px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.yoga-captcha-refresh.is-busy {
  opacity: .6;
  pointer-events: none;
}

.yoga-captcha-refresh.is-busy .material-symbols-outlined {
  transform: rotate(360deg);
}

.yoga-captcha-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--_line);
  border-radius: calc(var(--_radius) - 4px);
  font-size: 1rem;
  font-family: inherit;
  background: var(--surf, #fff);
  color: var(--_ink);
  letter-spacing: .12em;
}

.yoga-captcha-input::placeholder {
  color: var(--_muted);
  letter-spacing: normal;
}

.yoga-captcha-input:focus {
  outline: none;
  border-color: var(--_accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 22%, transparent);
}

.yoga-captcha-help {
  font-size: .82rem;
  color: #b3261e;
}

.yoga-captcha-help[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .yoga-captcha-refresh,
  .yoga-captcha-refresh .material-symbols-outlined { transition: none; }
}

@media (max-width: 480px) {
  .yoga-captcha-question { font-size: 1.45rem; }
  .yoga-captcha-img { height: 50px; }
}