/* Enhanced Form Validation Styles */
/* Add these to your pagination.css or contract-form.css */

/* Field error highlighting */
.field-error {
  position: relative;
  animation: shake 0.3s ease-in-out;
}

.field-error label {
  color: #dc2626 !important;
  font-weight: 600;
}

.field-error input,
.field-error select,
.field-error textarea {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
}

.field-error input:focus,
.field-error select:focus,
.field-error textarea:focus {
  outline: 2px solid #dc2626 !important;
  outline-offset: 2px;
}

/* Add red asterisk for required fields with errors */
.field-error label::after {
  content: ' *';
  color: #dc2626;
  font-weight: bold;
}

/* Shake animation for invalid fields */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Progress step with error (invalid/incomplete page) */
.progress-step.invalid .step-circle {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: white !important;
}

.progress-step.invalid .step-label {
  color: #dc2626 !important;
  font-weight: 600;
}

/* Completed step (valid - all required fields filled) - GREEN */
.progress-step.completed .step-circle {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: white !important;
}

.progress-step.completed .step-label {
  color: #16a34a !important;
  font-weight: 600;
}

/* Active step (current page) - BLUE */
.progress-step.active .step-circle {
  background-color: #0080ff !important;
  border-color: #0080ff !important;
  color: white !important;
  box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.2);
}

.progress-step.active .step-label {
  color: #0080ff !important;
  font-weight: 700;
}

/* Not yet visited - gray */
.progress-step .step-circle {
  background-color: #e5e7eb;
  border: 2px solid #d1d5db;
  color: #6b7280;
}

.progress-step .step-label {
  color: #6b7280;
}

/* Hover effects - no scale to prevent jumping */
.progress-step:hover .step-circle {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

/* Error summary banner (optional - shows at top of invalid pages) */
.page-error-summary {
  background-color: #fef2f2;
  border-left: 4px solid #dc2626;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 4px;
  display: none;
}

.page-error-summary.show {
  display: block;
  animation: slideDown 0.3s ease-out;
}

.page-error-summary p {
  margin: 0;
  color: #dc2626;
  font-weight: 600;
  font-size: 14px;
}

.page-error-summary ul {
  margin: 8px 0 0 20px;
  color: #991b1b;
  font-size: 13px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .progress-step.invalid::after {
    font-size: 10px;
    bottom: -30px;
  }
  
  .field-error {
    margin-bottom: 8px;
  }
}