/* Contact Form Enhancements - Light Theme Optimized */

/* Character Counter Styling */
.character-counter {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  border: 1px solid var(--glass-border);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Form Field Improvements */
.form-field-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-input {
  transition: all 0.2s ease;
}

.form-input:focus {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 2px var(--brand-accent-20) !important;
  outline: none;
}

.form-input:hover {
  border-color: var(--brand-accent-10);
}

/* Floating Label Enhancements */
.floating-label {
  transition: all 0.2s ease;
  color: var(--text-tertiary);
}

.floating-label.focused,
.form-input:focus + .floating-label {
  color: var(--brand-accent) !important;
  font-size: 0.75rem;
  top: 0.25rem;
  left: 1rem;
  transform: none;
}

.form-input.has-content + .floating-label {
  color: var(--brand-accent) !important;
  font-size: 0.75rem;
  top: 0.25rem;
  left: 1rem;
  transform: none;
}

/* Error States */
.field-error {
  color: var(--color-error) !important;
  background: none;
}

.field-error svg {
  color: var(--color-error);
}

/* Success States */
.field-success {
  color: var(--color-success) !important;
}

.field-success svg {
  color: var(--color-success);
}

/* Form Validation States */
.form-input.error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

.form-input.success {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
}

/* Required Field Styling */
.required-field::after {
  content: ' *';
  color: var(--brand-accent);
  font-weight: bold;
}

/* Form Success Animation */
.form-success-state {
  animation: successGlow 0.8s ease-out;
}

@keyframes successGlow {
  0% {
    box-shadow: 0 0 0 0 var(--color-success);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(5, 150, 105, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 var(--color-success);
  }
}

/* Button Hover States */
.contact-submit-btn {
  transition: all 0.3s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--brand-accent-20);
}

.contact-submit-btn:active {
  transform: translateY(0);
}

/* Remove any black text overrides */
input,
textarea,
label,
button,
.character-counter,
.field-error,
.field-success {
  color: inherit;
}

/* Explicitly prevent black text */
* {
  color: inherit;
}

/* Override any hardcoded black colors */
[style*="color: #000"],
[style*="color: black"],
[style*="color: rgb(0, 0, 0)"],
.text-black {
  color: var(--text-primary) !important;
}

/* Ensure form elements use proper colors */
.form-input {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--glass-border) !important;
}

/* Contact page specific text colors */
.contact-page * {
  color: inherit;
}

.contact-page input,
.contact-page textarea {
  color: var(--text-primary) !important;
}

.contact-page label {
  color: var(--text-tertiary) !important;
}

.contact-page .floating-label.focused {
  color: var(--brand-accent) !important;
}

/* Ensure proper contrast */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Dark mode compatibility (when needed) */
@media (prefers-color-scheme: dark) {
  .character-counter {
    background-color: rgba(55, 65, 81, 0.8);
    border-color: rgba(75, 85, 99, 0.3);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .form-input {
    border-width: 2px;
  }
  
  .character-counter {
    border-width: 2px;
    font-weight: 600;
  }
  
  .floating-label {
    font-weight: 600;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .form-input,
  .floating-label,
  .character-counter,
  .contact-submit-btn {
    transition: none;
  }
  
  .form-success-state {
    animation: none;
  }
}