/**
 * @file
 * Tailwind overrides for the Drupal Webform to match the SDC design.
 */

.newsletter-webform-wrapper form {
  @apply flex flex-col sm:flex-row gap-4 w-full m-0;
}

/* Make the input container take up remaining space */
.newsletter-webform-wrapper .form-item,
.newsletter-webform-wrapper .js-form-item {
  @apply flex-grow m-0;
}

/* Hide the label visually but keep it for screen readers */
.newsletter-webform-wrapper label {
  @apply sr-only;
}

/* Style the text input */
.newsletter-webform-wrapper input[type="email"] {
  @apply w-full px-5 py-4 rounded-2xl bg-white/50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 focus:border-purple-500 dark:focus:border-purple-400 focus:ring-4 focus:ring-purple-500/10 outline-none transition-all text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500;
}

/* Remove default margins from the actions wrapper */
.newsletter-webform-wrapper .form-actions {
  @apply m-0 flex-shrink-0 mt-0;
}

/* Style the submit button */
.newsletter-webform-wrapper input[type="submit"],
.newsletter-webform-wrapper button[type="submit"] {
  @apply w-full sm:w-auto px-8 py-4 rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold text-lg transition-all shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 hover:-translate-y-0.5 cursor-pointer border-none m-0;
}

/* Style AJAX progress spinner if enabled in Webform */
.newsletter-webform-wrapper .ajax-progress-throbber {
  @apply absolute ml-4 mt-4;
}