/* Form Input Styling - Fix for light/dark mode */
.form-input,
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background-color: var(--bg-light) !important;
  color: var(--text-light) !important;
  transition: all 0.2s ease;
}

html.dark .form-input,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark select,
html.dark textarea {
  background-color: var(--bg-dark) !important;
  border-color: var(--border-dark);
  color: var(--text-dark) !important;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Quick Links and Card Hover Effects */
.quick-link,
a.quick-link {
  background-color: var(--bg-light) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-light) !important;
  transition: all 0.2s ease;
  text-decoration: none;
}

html.dark .quick-link,
html.dark a.quick-link {
  background-color: var(--bg-dark-secondary) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.quick-link:hover,
a.quick-link:hover {
  background-color: var(--bg-light-secondary) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
  text-decoration: none;
}

html.dark .quick-link:hover,
html.dark a.quick-link:hover {
  background-color: var(--bg-dark) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* Contact Page Green Box Styling */
.contact-info-box {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

html.dark .contact-info-box {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

.contact-info-box .material-icons {
  color: #16a34a !important;
}

html.dark .contact-info-box .material-icons {
  color: #22c55e !important;
}

.contact-info-box h3 {
  color: #166534 !important;
}

html.dark .contact-info-box h3 {
  color: #4ade80 !important;
}

.contact-info-box p {
  color: #166534 !important;
}

html.dark .contact-info-box p {
  color: #4ade80 !important;
}