/* Custom colors to match the design */
.bg-pixelpath-blue { background-color: #2572a3; }
.bg-pixelpath-grayblue { background-color: rgb(110 146 173); }
.text-pixelpath-blue { color: #0066CC; }
.bg-pixelpath-orange { background-color: #FF9900; }
.hover\:bg-pixelpath-orange-dark:hover { background-color: #E68800; }

/* Tooltip styles for webform descriptions */
.webform-element-description--tooltip {
  @apply absolute z-10 invisible opacity-0 transition-all duration-300;
  @apply bg-gray-800 text-white text-xs rounded-lg py-2 px-3 shadow-lg;
  @apply bottom-full left-1/2 transform -translate-x-1/2 mb-2;
}

.webform-element-description--tooltip::after {
  content: '';
  @apply absolute top-full left-1/2 transform -translate-x-1/2;
  @apply border-4 border-transparent border-t-gray-800;
}

.form-item:hover .webform-element-description--tooltip {
  @apply visible opacity-100;
}

/* Enhanced error state styling */
.form-item.error input,
.form-item.error textarea {
  @apply border-red-500 focus:ring-red-500;
}

.form-item.error label {
  @apply text-red-700;
}

/* Required field indicator */
.form-required::after {
  content: '*';
  @apply text-red-500 ml-1;
}