/* Contact field icons: a quiet visual cue that keeps the labels and
   browser-native validation as the accessible source of truth. */
.ct-field-control,
.ct-message-control {
  position: relative;
}

.ct-field-control > svg,
.ct-message-control > svg {
  position: absolute;
  z-index: 1;
  left: 14px;
  width: 19px;
  height: 19px;
  color: #8ca59d;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(131, 215, 187, .08));
  transition: color .2s ease, transform .2s ease;
}

.ct-field-control > svg {
  top: 50%;
  transform: translateY(-50%);
}

.ct-message-control > svg {
  top: 15px;
}

.ct-field-control:focus-within > svg {
  color: var(--ct-gold);
  transform: translateY(-50%) scale(1.05);
}

.ct-message-control:focus-within > svg {
  color: var(--ct-gold);
  transform: scale(1.05);
}

.ct-shell .ct-field-control > input:not([type=radio]):not([type=hidden]) {
  padding-left: 44px;
}

.ct-shell .ct-message-control > textarea {
  padding-left: 44px;
}

/* Keep the same 300px banner treatment as the login form. The widget stays
   centered inside the narrow mobile form without stretching the page. */
.ct-verification .cf-turnstile {
  max-width: none;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .ct-field-control > svg,
  .ct-message-control > svg {
    transition: none;
  }
}