/* Force Dark Mode Styles for Forms */

/* Form controls - always use dark mode styles */
.form-control, 
.quote-form-card .form-control,
select.form-control,
textarea.form-control,
input.form-control {
  background-color: #2d2d2d !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Fix for inputs turning white when filled */
input.form-control {
  -webkit-text-fill-color: var(--text-color) !important;
  background-color: #2d2d2d !important;
}

/* Enhanced fix for autofill styles to prevent black text in dark mode */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active,
select.form-control:-webkit-autofill,
select.form-control:-webkit-autofill:hover,
select.form-control:-webkit-autofill:focus,
select.form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #2d2d2d inset !important;
  -webkit-text-fill-color: var(--text-color) !important;
  caret-color: var(--text-color) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Ensure select dropdowns maintain dark appearance */
select.form-control option {
  background-color: #2d2d2d !important;
  color: var(--text-color) !important;
}

/* Dark checkbox styling */
.form-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background-color: #333333 !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  box-shadow: 0 0 5px rgba(123, 85, 168, 0.3) !important;
  transition: all 0.2s ease !important;
  margin-right: 8px !important;
}

.form-checkbox:checked {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-light) !important;
  box-shadow: 0 0 8px rgba(123, 85, 168, 0.5) !important;
}

.form-checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 6px !important;
  height: 10px !important;
  border: solid white !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.form-checkbox:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(123, 85, 168, 0.4) !important;
}

.form-control:focus, 
.quote-form-card .form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
input.form-control:focus {
  border-color: var(--accent-color) !important;
  background-color: #333333 !important;
  box-shadow: 0 0 0 2px rgba(123, 85, 168, 0.2) !important;
}

/* Form labels - always use dark mode styles */
.form-label,
.quote-form-card .form-label {
  color: var(--text-light) !important;
}

/* Quote form card - always use dark mode styles */
.quote-form-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 15px 30px rgba(20, 20, 40, 0.15) !important;
}

.quote-form-card .card-header {
  background-color: var(--accent-color) !important;
}

.quote-form-card .card-body {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* Form placeholders */
.form-control::placeholder {
  color: rgba(200, 200, 206, 0.5) !important;
}

/* Form select dropdown arrow for dark mode */
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Force dark mode variables regardless of system preference */
:root {
  /* Theme colors - Force Dark Mode */
  --body-bg: #2a2a32 !important; 
  --card-bg: #33333a !important;
  --header-bg: #232329 !important;
  --footer-bg: #232329 !important;
  --header-text: #ffffff !important;
  --body-text: #e9e9ec !important;
  --link-text: #9373bd !important;
  --border-color: #44444c !important;
  --shadow-color: rgba(20, 20, 40, 0.2) !important;
  --footer-text: #ffffff !important;
  --footer-text-secondary: #b0b0b8 !important;
  --accent-light: #9373bd !important;
  
  /* Dark mode specific colors */
  --text-color: #e9e9ec !important;
  --text-light: #c8c8ce !important;
  --bg-light: #2a2a30 !important;
  --bg-dark: #1a1a1e !important;
  --gray-100: #35353a !important;
  --gray-200: #4a4a50 !important;
  --gray-300: #b0b0b8 !important;
  --gray-400: #c0c0c8 !important;
  --gray-500: #d0d0d8 !important;
  --gray-600: #e0e0e8 !important;
  --gray-700: #f0f0f8 !important;
  --gray-800: #f5f5fc !important;
  --gray-900: #ffffff !important;
  --hover-bg: rgba(255, 255, 255, 0.05) !important;
  --input-bg: rgba(255, 255, 255, 0.07) !important;
  --label-color: #b0b0b8 !important;
  --heading-color: #ffffff !important;
  --pricing-bg: rgba(255, 255, 255, 0.05) !important;
}

/* Force dark mode styles for project type dropdown in quote form */
.custom-dropdown-trigger,
.custom-dropdown-menu {
  background-color: #2d2d2d !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

.custom-dropdown-menu-item:hover {
  background-color: var(--hover-bg) !important;
}

/* Any error messages - ensure visible in dark mode */
[style*="background-color: rgba(239, 68, 68, 0.1)"] {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

/* Force dark mode styles for team member social media icons */
.team-social-icon {
  background-color: rgba(123, 85, 168, 0.3) !important; 
  color: white !important;
  border: 1px solid rgba(147, 115, 189, 0.6) !important;
  box-shadow: 0 3px 6px rgba(123, 85, 168, 0.4) !important;
  font-size: 1.4rem !important;
  transition: all 0.3s ease !important;
}

.team-social-icon:hover {
  background-color: var(--accent-light) !important;
  color: white !important;
  transform: translateY(-5px) !important;
  border-color: white !important;
  box-shadow: 0 5px 12px rgba(147, 115, 189, 0.7), 0 0 5px rgba(255, 255, 255, 0.3) !important;
}

/* Platform-specific colors for icons with brighter gradients */
.team-social-icon.github:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #666 100%) !important;
  border-color: white !important;
}

.team-social-icon.twitter:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #444 100%) !important;
  border-color: white !important;
}

.team-social-icon.linkedin:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #0099e0 100%) !important;
  border-color: white !important;
}

.team-social-icon.instagram:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #ff5b7a 100%) !important;
  border-color: white !important;
}

.team-social-icon.facebook:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #4893f5 100%) !important;
  border-color: white !important;
}

.team-social-icon.website:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #0088ff 100%) !important;
  border-color: white !important;
}

.team-social-icon.email:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #ff5446 100%) !important;
  border-color: white !important;
}

.team-social-icon.dribbble:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #ff6fa6 100%) !important;
  border-color: white !important;
}

.team-social-icon.behance:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #4889ff 100%) !important;
  border-color: white !important;
}

.team-social-icon.youtube:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, #ff4444 100%) !important;
  border-color: white !important;
}