/* CAPTCHA styling to match other form fields */
.captcha-type-challenge--image {
  --image-width: 150px;
  --reload-icon-size: 20px;
  --gap-h: 0.75rem;
  /* tighter vertical gap */
  --gap-v: 0.25rem;
  position: relative;
  margin: 16px 0;
}

/* Style the fieldset to match other form sections */
.captcha-type-challenge--image fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  /* slightly reduced padding for compact look */
  padding: 16px 16px 14px;
  background: #fafafa;
  margin: 0;
}

.captcha-type-challenge--image fieldset > legend {
  /* ensure CAPTCHA title is bold like other field titles */
  font-weight: 700;
  color: #333;
  font-size: 16px;
  padding: 0 10px;
  margin-bottom: 15px;
}

/* Robust override for varying Drupal markups */
.captcha-type-challenge--image legend,
.captcha-type-challenge--image fieldset > legend,
.captcha-type-challenge--image .fieldset-legend,
.captcha-type-challenge--image .fieldset__legend,
.captcha-type-challenge--image .fieldset__label,
/* handle themes that wrap legend text in spans */
.captcha-type-challenge--image fieldset > legend span,
.captcha-type-challenge--image fieldset > legend .fieldset-legend,
.captcha-type-challenge--image fieldset > legend .fieldset__legend,
.captcha-type-challenge--image fieldset > legend .fieldset__label,
/* ensure any nested descendant inside legend inherits bold */
.captcha-type-challenge--image fieldset > legend * {
  font-weight: 700 !important;
}

/* Directly target the legend class used by the template */
.captcha .captcha__title,
.captcha .captcha__title.form-required,
.captcha .captcha__title.js-form-required,
.captcha-type-challenge--image .captcha__title,
.captcha-type-challenge--image .captcha__title.form-required,
.captcha-type-challenge--image .captcha__title.js-form-required {
  font-weight: 700 !important;
}

/* In case some theme uses font shorthand on legend, normalize then bold */
.captcha-type-challenge--image fieldset > legend,
.captcha-type-challenge--image fieldset > legend * {
  font: inherit !important;
  font-weight: 700 !important;
}

.captcha-type-challenge--image .captcha__element {
  /* default: vertical stack with minimal gap (fallback) */
  display: flex;
  flex-direction: column;
  gap: var(--gap-v);
}

/* Top row: Image and refresh button side by side */
.captcha-type-challenge--image .captcha__image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* make the image to input spacing almost zero */
  margin-bottom: 4px;
}

.captcha-type-challenge--image .captcha__image-wrapper img {
  display: block;
  width: var(--image-width);
  height: auto;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.captcha-type-challenge--image .captcha__image-wrapper .reload-captcha-wrapper {
  display: flex;
  align-items: center;
}

.captcha-type-challenge--image .captcha__image-wrapper .reload-captcha-wrapper .reload-captcha {
  display: inline-block;
  width: var(--reload-icon-size);
  height: var(--reload-icon-size);
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 56 56' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg transform='matrix(1,0,0,1,-344.937,-314.119)'%3E%3Cpath d='M399.28,314.12L390.155,321.37C385.356,317.346 379.193,314.901 372.499,314.901C357.37,314.901 344.937,327.335 344.937,342.463C344.937,357.591 357.371,369.744 372.499,369.744C384.359,369.744 394.551,362.29 398.405,351.775L388.53,349.369C385.887,355.601 379.763,359.9 372.499,359.9C362.775,359.9 355.061,352.187 355.061,342.462C355.061,332.737 362.774,324.743 372.499,324.743C376.107,324.743 379.422,325.86 382.186,327.743L373.155,334.931L399.28,339.774L399.28,314.118L399.28,314.12Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0px;
  text-align: left;
  opacity: 0.7;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.captcha-type-challenge--image .captcha__image-wrapper .reload-captcha-wrapper .reload-captcha:hover {
  opacity: 1;
  transform: scale(1.1);
}

.captcha-type-challenge--image .captcha__image-wrapper .reload-captcha-wrapper .reload-captcha:focus {
  outline: none;
  opacity: 1;
}

/* Bottom section: Text input field */
.captcha-type-challenge--image .captcha__element > .form-item {
  margin: 0;
  width: 100%;
}

.captcha-type-challenge--image .captcha__element > .form-item > label {
  margin-top: 0;
  font-weight: 600;
  color: #333;
  /* reduce bottom spacing under label in compact mode */
  margin-bottom: 4px;
  display: block;
  font-size: 14px;
}

.captcha-type-challenge--image .captcha__element > .form-item input[type="text"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  background: #fff;
}

.captcha-type-challenge--image .captcha__element > .form-item input[type="text"]:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
}

.captcha-type-challenge--image .captcha__element > .form-item input[type="text"]::placeholder {
  color: #999;
}

.captcha-type-challenge--image .captcha__element > .form-item .description {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}

/*
  Optional: place the label on the same row as the CAPTCHA image (desktop+)
  Progressive enhancement using CSS Grid and display: contents, with
  fallback to the vertical layout above when unsupported.
*/
@supports (display: grid) {
  @media (min-width: 768px) {
    .captcha-type-challenge--image .captcha__element {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-column-gap: 12px;
      grid-row-gap: 6px;
      align-items: center;
    }

    /* Allow label and input to participate as grid items */
    .captcha-type-challenge--image .captcha__element > .form-item {
      display: contents;
    }

    /* Keep image/reload in first column */
    .captcha-type-challenge--image .captcha__image-wrapper {
      margin-bottom: 0; /* no extra gap when grid is active */
    }

    /* Put the label next to the image (same row) */
    .captcha-type-challenge--image .captcha__element > .form-item > label {
      grid-column: 2;
      margin: 0; /* inline with image, no extra spacing */
      align-self: center;
    }

    /* Make the input span full width under both columns */
    .captcha-type-challenge--image .captcha__element > .form-item > input[type="text"],
    .captcha-type-challenge--image .captcha__element > .form-item > .form-text {
      grid-column: 1 / -1;
      width: 100%;
    }
  }
}

/* Loading state for CAPTCHA refresh */
.captcha--loading .reload-captcha {
  animation: image_captcha_refresh_spin 500ms linear infinite;
}

@keyframes image_captcha_refresh_spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .captcha-type-challenge--image .captcha__image-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .captcha-type-challenge--image .captcha__image-wrapper img {
    width: 120px;
  }
}