/* CAPTCHA loading indicator */
.captcha-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(var(--color-canvas), 0.8);
  border-radius: 0;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-body);
  color: rgb(var(--color-text));
  opacity: 0.7;
}

.captcha-loading .spinner {
  width: var(--icon-size);
  height: var(--icon-size);
  border: 2px solid rgb(var(--color-grey-300));
  border-top: 2px solid rgb(var(--color-primary));
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* CAPTCHA Container (enhanced) */
.captcha-container {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: rgba(var(--color-canvas), 0.6);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(var(--color-canvas), 0.4);
  border-radius: 0;
  display: none;
  transition: transform var(--transition-dramatic),
              opacity var(--transition-dramatic),
              box-shadow var(--transition-dramatic),
              background var(--transition-dramatic),
              border-color var(--transition-dramatic);
  box-shadow: var(--shadow-medium);
  /* Prevent CAPTCHA from causing overflow */
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.captcha-container.visible {
  display: block;
  animation: captchaSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Prevent CAPTCHA iframes from causing overflow */
.captcha-container iframe,
.captcha-container .h-captcha,
.captcha-container .g-recaptcha {
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ensure CAPTCHA widgets don't exceed container */
.captcha-container > * {
  max-width: 100%;
  box-sizing: border-box;
}

@keyframes captchaSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

