.salesforce-form form {
  @apply relative grid gap-4 md:gap-8 text-base grid-cols-(--cols-automin-xs) md:grid-cols-(--cols-automin-sm) isolate;
}

.salesforce-form form > div {
  @apply flex flex-wrap gap-2 items-center;
}

.salesforce-form label {
  @apply text-gray-600 font-bold;
}

.salesforce-form input[type="text"],
.salesforce-form input[type="password"],
.salesforce-form input[type="email"],
.salesforce-form input[type="number"],
.salesforce-form input[type="url"],
.salesforce-form input[type="date"],
.salesforce-form input[type="datetime-local"],
.salesforce-form input[type="month"],
.salesforce-form input[type="week"],
.salesforce-form input[type="time"],
.salesforce-form input[type="tel"],
.salesforce-form select,
.salesforce-form select[multiple],
.salesforce-form textarea {
  @apply w-full px-8 py-4 focus:outline-none focus:ring-2 focus:ring-secondary-700 focus:border-secondary-700;
}

.salesforce-form div:has(textarea),
.salesforce-form textarea {
  @apply col-start-1 -col-end-1;
}

.salesforce-form input[type="number"] {
  @apply text-right;
}

.salesforce-form input[type="checkbox"] {
  @apply order-first text-3xl rounded-none text-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-700 focus:border-secondary-700;
}

.salesforce-form input[type="radio"] {
  @apply order-first text-3xl rounded-full text-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-700 focus:border-secondary-700;
}

.salesforce-form div:has(input[type="file"]) {
  @apply col-span-full;
}

.salesforce-form input[type="file"] {
  @apply block w-full text-sm text-gray-900 focus:outline-none file:button file:inline-flex file:w-auto file:mr-4 file:secondary;
}

.salesforce-form div:has([name*="gdprConfirmation"]) {
  @apply col-span-full;
}

.salesforce-form label:has([name*="gdprConfirmation"]) {
  @apply flex items-center gap-4 flex-nowrap;
}

.salesforce-form input[type="submit"] {
  @apply col-span-full w-full cursor-default button wide md:w-auto;
}

/* Flash messages */
.salesforce-form .response-view {
  @apply absolute inset-x-0 lg:-inset-x-4 bottom-0 place-content-center gap-4 p-4 md:p-8 bg-white/70 backdrop-blur-md col-span-full opacity-0 pointer-events-none transition-all duration-150 ease-in-out shadow-lg border-2 border-primary-300;
}

/* .response-view does not have aria-hidden attrbute att all */
.salesforce-form .response-view:not([aria-hidden]) {
  @apply !grid opacity-100 pointer-events-auto scale-105;
}

.salesforce-form .response-view h2 {
  @apply text-secondary-800 text-2xl font-bold text-center leading-tight;
}

.salesforce-form .response-view p {
  @apply text-secondary-800 text-lg text-center;
}

.salesforce-form
  form:has(.response-view:not([aria-hidden]))
  > div:not(.response-view) {
  @apply opacity-50 pointer-events-none transition-all duration-150 ease-in-out blur-[1px];
}

.salesforce-form
  form:has(.response-view:not([aria-hidden]))
  > input[type="submit"] {
  @apply hidden;
}