/* Modern JV Submit Wizard - Fixed Styles */

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

/* Progress Indicator */
.step-indicator {
  @apply flex flex-col items-center space-y-2;
}

.step-indicator[data-step="1"].active .step-circle {
  @apply bg-blue-600 text-white shadow-lg transform scale-110;
}

.step-indicator[data-step="2"].active .step-circle {
  @apply bg-green-600 text-white shadow-lg transform scale-110;
}

.step-indicator[data-step="3"].active .step-circle {
  @apply bg-purple-600 text-white shadow-lg transform scale-110;
}

.step-indicator[data-step="4"].active .step-circle {
  @apply bg-orange-600 text-white shadow-lg transform scale-110;
}

.step-indicator.completed .step-circle {
  @apply bg-gray-600 text-white;
}

.step-circle {
  @apply w-12 h-12 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-lg font-medium transition-all duration-300 hover:shadow-md;
}

.step-label {
  @apply text-sm font-medium text-gray-600 text-center;
}

.step-indicator[data-step="1"].active .step-label {
  @apply text-blue-600 font-semibold;
}

.step-indicator[data-step="2"].active .step-label {
  @apply text-green-600 font-semibold;
}

.step-indicator[data-step="3"].active .step-label {
  @apply text-purple-600 font-semibold;
}

.step-indicator[data-step="4"].active .step-label {
  @apply text-orange-600 font-semibold;
}

.step-indicator.completed .step-label {
  @apply text-gray-600;
}

.step-connector {
  @apply w-16 h-0.5 bg-gray-300 mt-6;
}

/* Form Layout - Clean and Simple */
.step-content {
  @apply transition-all duration-300 ease-in-out;
  position: relative;
}

#jv-wizard {
  @apply max-w-6xl mx-auto px-4 py-8;
}

/* Form Groups with Better Spacing */
.form-group {
  @apply mb-6;
}

.form-label {
  @apply block text-sm font-semibold text-gray-700 mb-3;
}

/* Input Styling - Clean and Professional */
.input-wrapper {
  @apply relative;
}

.input-icon {
  @apply absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-base;
  z-index: 2;
}

.form-input {
  @apply w-full pl-12 pr-4 py-4 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white shadow-sm text-base font-medium;
  min-height: 56px;
  line-height: 1.5;
}

.form-input:focus {
  @apply border-blue-500 ring-2 ring-blue-200;
}

/* Address Input - Specific Fix */
#autocomplete.form-input {
  @apply w-full;
  min-width: 100%;
  max-width: 100%;
}

/* Select Styling */
.select-wrapper {
  @apply relative;
}

.form-select {
  @apply w-full pl-12 pr-10 py-4 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white shadow-sm text-base font-medium appearance-none;
  min-height: 56px;
  line-height: 1.5;
}

.select-icon {
  @apply absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none;
}

/* Textarea Styling */
textarea.form-input {
  @apply pl-4 resize-none;
  min-height: 100px;
}

/* Deal Type Cards */
.deal-type-option {
  @apply mb-4;
}

.deal-type-card {
  @apply cursor-pointer transition-all duration-300 border-2 border-transparent rounded-xl p-4 bg-white shadow-md hover:shadow-lg;
}

.deal-type-card:hover {
  @apply border-blue-400 shadow-lg transform -translate-y-1;
}

.deal-type-option input[type="radio"]:checked + .deal-type-card,
.deal-type-card.selected {
  @apply border-blue-500 bg-blue-50 shadow-lg;
}

/* Radio Button Styling */
.deal-type-option input[type="radio"] {
  @apply sr-only;
}

.deal-type-option label {
  @apply cursor-pointer block w-full;
}

/* Grid Layout Improvements */
.grid {
  @apply gap-6;
}

.grid.grid-cols-1 {
  @apply grid-cols-1;
}

.grid.grid-cols-2 {
  @apply grid-cols-1 md:grid-cols-2;
}

/* Button Styling */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
}

.btn-secondary {
  @apply bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-3 px-6 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
}

/* Photo Upload Area */
.photo-upload-area {
  @apply w-full;
}

#photo-drop-zone {
  @apply border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition-colors;
}

/* Step Headers */
.step-header {
  @apply flex items-center mb-6;
}

.step-header h2 {
  @apply text-2xl font-bold;
}

.step-header p {
  @apply text-sm;
}

/* Responsive Improvements */
@media (max-width: 768px) {
  .grid.grid-cols-1.md\\:grid-cols-2 {
    @apply grid-cols-1;
  }
  
  .step-indicator {
    @apply space-y-1;
  }
  
  .step-label {
    @apply text-xs;
  }
  
  .form-input, .form-select {
    @apply pl-10 py-3;
    min-height: 48px;
  }
  
  .input-icon {
    @apply left-3;
  }
  
  #autocomplete.form-input {
    min-width: 100%;
  }
}

/* Fix for overlapping text and cramped layout */
.bg-white.rounded-xl.p-6.shadow-md {
  @apply p-8;
}

.space-y-6 > * + * {
  @apply mt-6;
}

/* Clean up positioning conflicts */
.step-content,
.form-input,
.form-select,
.deal-type-card,
.btn-primary,
.btn-secondary {
  position: relative;
  z-index: auto;
}

/* Ensure proper text rendering */
.form-label,
.step-header h2,
.step-header p {
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

/* Fix for step navigation */
.step-indicator {
  @apply flex-shrink-0;
}

/* Container improvements */
.max-w-6xl {
  @apply max-w-4xl;
}

/* Additional spacing fixes */
.p-8 {
  @apply p-6 md:p-8;
}

.space-y-6 {
  @apply space-y-4 md:space-y-6;
}

/* Deal Numbers Step Specific Fixes */
fieldset[data-step="3"] .form-group {
  @apply mb-8;
}

fieldset[data-step="3"] .grid {
  @apply gap-8;
}

fieldset[data-step="3"] .form-input {
  @apply text-lg;
  min-height: 60px;
}

fieldset[data-step="3"] .form-label {
  @apply text-base font-bold mb-4;
}

/* Improve text rendering and spacing */
.step-header h2 {
  @apply mb-2;
  line-height: 1.2;
}

.step-header p {
  @apply text-base;
  line-height: 1.4;
}

/* Fix overlapping issues */
.bg-gradient-to-br {
  @apply relative;
  z-index: 1;
}

.bg-white.rounded-xl {
  @apply relative;
  z-index: 2;
}

/* Responsive improvements for smaller screens */
@media (max-width: 640px) {
  .step-indicator {
    @apply space-y-1;
  }
  
  .step-label {
    @apply text-xs leading-tight;
  }
  
  .step-circle {
    @apply w-10 h-10;
  }
  
  .step-connector {
    @apply w-8;
  }
  
  .form-group {
    @apply mb-6;
  }
  
  .grid.grid-cols-1.md\\:grid-cols-2 {
    @apply grid-cols-1 gap-4;
  }
}

/* Prevent text overflow */
.form-label,
.step-header h2,
.step-header p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Better spacing for form elements */
.form-group + .form-group {
  @apply mt-6;
}

/* Improve visual hierarchy */
.step-header {
  @apply pb-6 border-b border-gray-200;
}

.bg-white.rounded-xl.p-6.shadow-md {
  @apply mt-6;
}