/**
 * Error Handling Styles
 * Styles for error states, missing images, and error modals
 */

/* Image Error States */
img.image-error {
  background-color: #1a2a4a;
  border: 2px dashed #d4a574;
  opacity: 0.5 !important;
}

img.image-error::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d4a574" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>') no-repeat center;
  background-size: contain;
}

/* Fallback Gallery Container */
#gallery-track.gallery-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: linear-gradient(135deg, rgba(26, 42, 74, 0.5) 0%, rgba(42, 58, 90, 0.5) 100%);
  border: 2px dashed #d4a574;
  border-radius: 8px;
}

.gallery-error-message {
  text-align: center;
  color: #d4a574;
  font-size: 16px;
  font-weight: 500;
}

/* Error Modal Animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#error-modal:not(.hidden) > div {
  animation: slideIn 0.3s ease-out;
}

/* Loading state for form submission */
.form-sending {
  opacity: 0.6;
  pointer-events: none;
}

/* Success state */
.form-success input,
.form-success textarea,
.form-success select {
  background-color: #f0fdf4 !important;
  border-color: #34d399 !important;
}

/* Network error indicator */
.network-error {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 12px 16px;
  background: #dc2626;
  color: white;
  border-radius: 8px;
  font-size: 12px;
  z-index: 40;
  animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Error boundary text */
.error-boundary-text {
  color: #ef4444;
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
}

/* Disabled button state */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inline error message styling */
.error-message {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

/* Console-like error display for debugging */
.error-details {
  background: #0f172a;
  border-left: 3px solid #dc2626;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #9ca3af;
  overflow-x: auto;
  max-width: 100%;
}

.error-details code {
  color: #f97316;
}