/* Additional Zoho Form Styling for better theme integration */

/* Global form container */
#zohoSupportWebToCase {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Form validation styles */
.zsFormClass input:invalid:not(:placeholder-shown) {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1) !important;
}

.zsFormClass input:valid:not(:placeholder-shown) {
  border-color: #27ae60 !important;
}

/* Focus states for better accessibility */
.zsFormClass input:focus,
.zsFormClass textarea:focus {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px !important;
}

/* Placeholder styling */
.zsFormClass input::placeholder,
.zsFormClass textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7 !important;
}

/* Loading state for submit button */
.zsFormClass input[type='submit']:disabled {
  position: relative !important;
}

.zsFormClass input[type='submit']:disabled::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin: -8px 0 0 -8px !important;
  border: 2px solid transparent !important;
  border-top: 2px solid white !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Dark theme specific overrides */
[data-theme="dark"] .zsFormClass input[type='text'],
[data-theme="dark"] .zsFormClass textarea {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .zsFormClass input[type='text']:focus,
[data-theme="dark"] .zsFormClass textarea:focus {
  background: var(--bg-primary) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .zsFormClass input[type='text'],
  .zsFormClass textarea {
    border-width: 2px !important;
  }
  
  .zsFormClass input[type='submit'],
  .zsFormClass input[type='button'] {
    border: 2px solid transparent !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .zsFormClass input,
  .zsFormClass textarea,
  .zsFormClass button {
    transition: none !important;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

/* Mobile specific improvements */
@media (max-width: 480px) {
  .zsFormClass input[type='text'],
  .zsFormClass textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  .zsFormClass input[type='submit'],
  .zsFormClass input[type='button'] {
    padding: 14px 20px !important;
    font-size: 16px !important;
  }
}