/* Kinso.ai Form Design System */

/* Form Section Container */
.kinso-form-section {
  @apply bg-white rounded-2xl p-6 md:p-8;
  @apply shadow-[0_2px_15px_rgba(0,0,0,0.06)];
  @apply border border-gray-100;
  @apply space-y-6;
}

/* Section Title */
.kinso-form-title {
  @apply text-2xl md:text-3xl font-semibold text-gray-900;
  @apply border-l-4 border-amber-500 pl-4 mb-2;
}

/* Section Description */
.kinso-form-description {
  @apply text-gray-900 text-sm md:text-base mb-6 pl-4;
}

/* Input Fields */
.kinso-input {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200;
  @apply bg-white text-gray-900 placeholder:text-gray-400;
  @apply focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20;
  @apply transition-all duration-200 shadow-sm;
  @apply hover:border-gray-300;
}

.kinso-input:disabled {
  @apply bg-gray-50 cursor-not-allowed opacity-60;
}

/* Select Dropdowns */
.kinso-select {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200;
  @apply bg-white text-gray-900;
  @apply focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20;
  @apply transition-all duration-200 shadow-sm;
  @apply hover:border-gray-300 cursor-pointer;
}

/* Textarea */
.kinso-textarea {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200;
  @apply bg-white text-gray-900 placeholder:text-gray-400;
  @apply focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20;
  @apply transition-all duration-200 shadow-sm;
  @apply hover:border-gray-300 resize-none;
}

/* Checkbox Group Container */
.kinso-checkbox-group {
  @apply space-y-3;
}

/* Individual Checkbox Item */
.kinso-checkbox-item {
  @apply flex items-start gap-3 p-4 rounded-lg;
  @apply border border-gray-200 hover:border-amber-400;
  @apply bg-white hover:bg-amber-50/30 transition-all duration-200;
  @apply cursor-pointer;
}

.kinso-checkbox-item input[type="checkbox"] {
  @apply w-5 h-5 rounded border-gray-300 text-amber-500;
  @apply focus:ring-2 focus:ring-amber-500/20;
  @apply cursor-pointer mt-0.5;
}

.kinso-checkbox-item label {
  @apply text-sm text-gray-900 cursor-pointer flex-1 leading-relaxed;
}

/* Form Labels */
.kinso-label {
  @apply text-sm font-medium text-gray-900 mb-2 block;
}

/* Required Indicator */
.kinso-required {
  @apply text-amber-600 ml-1;
}

/* Primary Button */
.kinso-button-primary {
  @apply px-6 py-3 rounded-xl;
  @apply bg-gradient-to-r from-amber-500 to-amber-600;
  @apply text-white font-semibold shadow-lg shadow-amber-500/30;
  @apply hover:shadow-xl hover:shadow-amber-500/40;
  @apply transform hover:-translate-y-0.5 transition-all duration-200;
  @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
}

/* Secondary Button */
.kinso-button-secondary {
  @apply px-6 py-3 rounded-xl;
  @apply bg-white text-gray-700 font-semibold;
  @apply border border-gray-300 hover:border-gray-400;
  @apply hover:bg-gray-50 transition-all duration-200;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Step Indicator */
.kinso-step-indicator {
  @apply flex items-center justify-between mb-8;
}

.kinso-step-dot {
  @apply w-3 h-3 rounded-full transition-all duration-300;
}

.kinso-step-dot.active {
  @apply bg-amber-500 scale-125;
}

.kinso-step-dot.inactive {
  @apply bg-gray-300;
}

.kinso-step-dot.completed {
  @apply bg-amber-400;
}

/* Step Label */
.kinso-step-label {
  @apply text-xs text-gray-600 mt-2;
}

.kinso-step-label.active {
  @apply text-amber-600 font-medium;
}

/* Progress Bar */
.kinso-progress-bar {
  @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
}

.kinso-progress-fill {
  @apply h-full bg-gradient-to-r from-amber-500 to-amber-600;
  @apply transition-all duration-300 ease-out;
}

/* Field Group */
.kinso-field-group {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

/* Helper Text */
.kinso-helper-text {
  @apply text-xs text-gray-900 mt-1.5;
}

/* Error Message */
.kinso-error-text {
  @apply text-xs text-red-600 mt-1.5 font-medium;
}

/* Success State */
.kinso-success-state {
  @apply flex flex-col items-center justify-center py-12;
  @apply text-center;
}

.kinso-success-icon {
  @apply w-20 h-20 text-amber-500 mb-6;
}

.kinso-success-title {
  @apply text-3xl font-semibold text-gray-900 mb-3;
}

.kinso-success-description {
  @apply text-lg text-gray-600;
}

/* Form Card for Mobile */
@media (max-width: 768px) {
  .kinso-form-section {
    @apply p-4 rounded-xl;
  }

  .kinso-form-title {
    @apply text-xl;
  }

  .kinso-input,
  .kinso-select,
  .kinso-textarea {
    @apply py-2.5 text-sm;
  }

  .kinso-button-primary,
  .kinso-button-secondary {
    @apply py-2.5 text-sm;
  }
}