/* Dark Mode CSS Overrides for Website */
:root.dark-mode {
  /* Dark background system */
  --background: 18 18 18; /* #121212 */
  --background-secondary: 24 24 24; /* #181818 */
  --background-tertiary: 30 30 30; /* #1e1e1e */
  --foreground: 240 240 240; /* #f0f0f0 */
  --foreground-secondary: 200 200 200; /* #c8c8c8 */
  --foreground-muted: 160 160 160; /* #a0a0a0 */

  /* Dark green palette for plumber theme */
  --primary-50: 5 30 20; /* #051e14 */
  --primary-100: 8 45 30; /* #082d1e */
  --primary-200: 12 65 42; /* #0c412a */
  --primary-300: 16 90 58; /* #105a3a */
  --primary-400: 20 120 75; /* #14784b */
  --primary-500: 24 150 95; /* #18965f */
  --primary-600: 28 180 115; /* #1cb473 */
  --primary-700: 32 210 135; /* #20d287 */
  --primary-800: 36 240 155; /* #24f09b */
  --primary-900: 40 255 170; /* #28ffaa */

  /* Dark neutral palette */
  --gray-50: 30 30 30; /* #1e1e1e */
  --gray-100: 40 40 40; /* #282828 */
  --gray-200: 50 50 50; /* #323232 */
  --gray-300: 70 70 70; /* #464646 */
  --gray-400: 90 90 90; /* #5a5a5a */
  --gray-500: 120 120 120; /* #787878 */
  --gray-600: 150 150 150; /* #969696 */
  --gray-700: 180 180 180; /* #b4b4b4 */
  --gray-800: 210 210 210; /* #d2d2d2 */
  --gray-900: 240 240 240; /* #f0f0f0 */

  /* Semantic colors for dark mode */
  --success: 72 187 120; /* #48bb78 */
  --success-foreground: 0 0 0;
  --warning: 246 173 85; /* #f6ad55 */
  --warning-foreground: 0 0 0;
  --danger: 235 95 95; /* #eb5f5f */
  --danger-foreground: 0 0 0;
  --info: 99 179 237; /* #63b3ed */
  --info-foreground: 0 0 0;

  /* Component colors for dark mode */
  --card: 24 24 24; /* #181818 */
  --card-foreground: var(--foreground);
  --border: var(--gray-700);
  --border-light: var(--gray-600);
  --border-medium: var(--gray-500);
  --input: var(--gray-800);
  --input-border: var(--gray-600);
  --input-focus: var(--primary-500);
  --ring: var(--primary-400);

  /* Scrollbar styling for dark mode */
  --scrollbar-track: var(--gray-900);
  --scrollbar-thumb: var(--gray-700);
  --scrollbar-thumb-hover: var(--gray-600);
}

/* Apply dark mode styles when dark-mode class is on html element */
html.dark-mode body {
  background-color: rgb(var(--background)) !important;
  color: rgb(var(--foreground));
}

/* Scrollbar styling for dark mode */
html.dark-mode ::-webkit-scrollbar-track {
  background: rgb(var(--scrollbar-track));
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: rgb(var(--scrollbar-thumb));
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--scrollbar-thumb-hover));
}

/* Navigation */
html.dark-mode .nav-default {
  background: rgba(var(--background), 0.85);
  border-bottom: 1px solid rgba(var(--border), 0.6);
}

html.dark-mode .nav-scrolled {
  background: rgba(var(--background), 0.95);
  border-bottom: 1px solid rgba(var(--border), 0.8);
}

html.dark-mode .nav-link {
  color: rgb(var(--foreground-secondary));
}

html.dark-mode .nav-link:hover {
  color: rgb(var(--primary-400));
}

html.dark-mode .mobile-menu-button {
  color: rgb(var(--foreground-secondary));
  background-color: rgba(var(--background), 0.5);
}

html.dark-mode .mobile-menu-button:hover {
  color: rgb(var(--foreground));
  background-color: rgba(var(--background), 0.8);
}

/* Mobile menu */
html.dark-mode #mobile-menu {
  background: rgba(var(--background), 0.98);
  border-top: 1px solid rgba(var(--border), 0.8);
}

html.dark-mode #mobile-menu a {
  color: rgb(var(--foreground-secondary));
}

html.dark-mode #mobile-menu a:hover {
  color: rgb(var(--primary-400));
  background-color: rgba(var(--primary-500), 0.1);
}

html.dark-mode #mobile-menu .btn-primary-gradient {
  background: linear-gradient(135deg, rgb(var(--primary-600)), rgb(var(--primary-700)));
}

/* Buttons */
html.dark-mode .btn-primary-gradient {
  background: linear-gradient(135deg, rgb(var(--primary-600)), rgb(var(--primary-700)));
  color: white;
}

html.dark-mode .btn-primary-gradient:hover {
  background: linear-gradient(135deg, rgb(var(--primary-700)), rgb(var(--primary-800)));
}

html.dark-mode .text-gray-600 {
  color: rgb(var(--foreground-secondary));
}

html.dark-mode .text-gray-700 {
  color: rgb(var(--foreground));
}

html.dark-mode .text-gray-900 {
  color: rgb(var(--foreground));
}

html.dark-mode .hover\:text-gray-900:hover {
  color: rgb(var(--foreground));
}

html.dark-mode .hover\:bg-gray-50:hover {
  background-color: rgba(var(--gray-700), 0.2);
}

html.dark-mode .bg-white {
  background-color: rgb(var(--background));
}

html.dark-mode .bg-gray-50 {
  background-color: rgb(var(--background-secondary));
}

/* Cards */
html.dark-mode .card {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
}

html.dark-mode .border-gray-200 {
  border-color: rgb(var(--border));
}

html.dark-mode .bg-white.border.border-gray-200 {
  background-color: rgb(var(--card));
  border-color: rgb(var(--border));
}

html.dark-mode .bg-green-50 {
  background-color: rgba(var(--primary-500), 0.1);
}

html.dark-mode .group:hover .bg-green-50 {
  background-color: rgba(var(--primary-500), 0.2);
}

/* Text and headings */
html.dark-mode .text-green-600 {
  color: rgb(var(--primary-400));
}

html.dark-mode .text-gray-600 {
  color: rgb(var(--foreground-secondary));
}

html.dark-mode .text-gray-700 {
  color: rgb(var(--foreground));
}

html.dark-mode .text-gray-900 {
  color: rgb(var(--foreground));
}

/* Forms */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: rgb(var(--input));
  border: 1px solid rgb(var(--input-border));
  color: rgb(var(--foreground));
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  background: rgb(var(--background));
  border-color: rgb(var(--input-focus));
  color: rgb(var(--foreground));
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--input-focus), 0.3);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode select::placeholder {
  color: rgb(var(--foreground-muted));
}

html.dark-mode .form-input {
  background: rgb(var(--input));
  border: 1px solid rgb(var(--input-border));
  color: rgb(var(--foreground));
}

html.dark-mode .form-input:focus {
  background: rgb(var(--background));
  border-color: rgb(var(--primary-500));
  color: rgb(var(--foreground));
}

html.dark-mode .form-input::placeholder {
  color: rgb(var(--foreground-muted));
}

/* Specific input types */
html.dark-mode input[type="text"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode textarea {
  background: rgb(var(--input));
  border: 1px solid rgb(var(--input-border));
  color: rgb(var(--foreground));
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="tel"]:focus,
html.dark-mode input[type="number"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode textarea:focus {
  background: rgb(var(--background));
  border-color: rgb(var(--input-focus));
  color: rgb(var(--foreground));
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--input-focus), 0.3);
}

html.dark-mode input[type="text"]::placeholder,
html.dark-mode input[type="tel"]::placeholder,
html.dark-mode input[type="number"]::placeholder,
html.dark-mode input[type="email"]::placeholder,
html.dark-mode input[type="password"]::placeholder,
html.dark-mode textarea::placeholder {
  color: rgb(var(--foreground-muted));
}

/* Range input */
html.dark-mode input[type="range"] {
  background: rgb(var(--input-border));
}

html.dark-mode input[type="range"]::-webkit-slider-thumb {
  background: rgb(var(--primary-500));
  border: 1px solid rgb(var(--input-border));
}

html.dark-mode input[type="range"]::-moz-range-thumb {
  background: rgb(var(--primary-500));
  border: 1px solid rgb(var(--input-border));
}

/* Checkboxes and radio buttons */
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
  background: rgb(var(--input));
  border: 1px solid rgb(var(--input-border));
}

html.dark-mode input[type="checkbox"]:checked,
html.dark-mode input[type="radio"]:checked {
  background: rgb(var(--primary-500));
  border-color: rgb(var(--primary-500));
}

html.dark-mode input[type="checkbox"]:focus,
html.dark-mode input[type="radio"]:focus {
  border-color: rgb(var(--input-focus));
  box-shadow: 0 0 0 3px rgba(var(--input-focus), 0.3);
}

/* Labels */
html.dark-mode label {
  color: rgb(var(--foreground));
}

/* Address Autocomplete */
html.dark-mode #address-suggestions {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
}

html.dark-mode .address-suggestion {
  border-bottom: 1px solid rgb(var(--border));
}

html.dark-mode .address-suggestion:last-child {
  border-bottom: none;
}

html.dark-mode .address-suggestion:hover {
  background-color: rgba(var(--primary-500), 0.1);
}

html.dark-mode .address-suggestion.selected {
  background-color: rgba(var(--primary-500), 0.2);
}

html.dark-mode .address-loading i {
  color: rgb(var(--foreground-secondary));
}

/* Form errors */
html.dark-mode .form-error {
  color: rgb(var(--danger));
}

html.dark-mode .form-input.border-red-300 {
  border-color: rgb(var(--danger));
  background: rgba(var(--danger), 0.1);
}

html.dark-mode .text-red-600 {
  color: rgb(var(--danger));
}

/* Country dropdown */
html.dark-mode .country-option:hover {
  background-color: rgba(var(--primary-500), 0.2);
}

html.dark-mode .country-option:active {
  background-color: rgba(var(--primary-500), 0.3);
}

html.dark-mode #countries-list::-webkit-scrollbar-track {
  background: rgb(var(--gray-800));
}

html.dark-mode #countries-list::-webkit-scrollbar-thumb {
  background: rgb(var(--gray-600));
}

html.dark-mode #countries-list::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gray-500));
}

/* Sections */
html.dark-mode #services,
html.dark-mode #pricing,
html.dark-mode #how-it-works {
  background-color: rgb(var(--background));
}

/* Pricing section */
html.dark-mode .border-green-600 {
  border-color: rgb(var(--primary-600));
}

html.dark-mode .bg-green-600 {
  background-color: rgb(var(--primary-600));
}

html.dark-mode .bg-green-600:hover {
  background-color: rgb(var(--primary-700));
}

html.dark-mode .text-green-600 {
  color: rgb(var(--primary-400));
}

html.dark-mode .bg-green-50 {
  background-color: rgba(var(--primary-500), 0.1);
}

html.dark-mode .text-green-600.bg-green-50 {
  color: rgb(var(--primary-300));
}

/* Beta badge */
html.dark-mode .bg-green-600.text-white {
  background-color: rgb(var(--primary-600));
}

/* Selection */
html.dark-mode ::selection {
  background-color: rgba(var(--primary-500), 0.3);
  color: rgb(var(--foreground));
}

/* Toggle button styles */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
  background-color: rgba(var(--gray-700), 0.2);
}

.dark-mode-toggle i {
  font-size: 1.25rem;
  color: rgb(var(--foreground-secondary));
}

html.dark-mode .dark-mode-toggle i {
  color: rgb(var(--foreground));
}  border-color: rgb(var(--danger));
  background: rgba(var(--danger), 0.1);
}

html.dark-mode .text-red-600 {
  color: rgb(var(--danger));
}

/* Country dropdown */
html.dark-mode .country-option:hover {
  background-color: rgba(var(--primary-500), 0.2);
}

html.dark-mode .country-option:active {
  background-color: rgba(var(--primary-500), 0.3);
}

html.dark-mode #countries-list::-webkit-scrollbar-track {
  background: rgb(var(--gray-800));
}

html.dark-mode #countries-list::-webkit-scrollbar-thumb {
  background: rgb(var(--gray-600));
}

html.dark-mode #countries-list::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gray-500));
}

/* Sections */
html.dark-mode #services,
html.dark-mode #pricing,
html.dark-mode #how-it-works {
  background-color: rgb(var(--background));
}

/* Pricing section */
html.dark-mode .border-green-600 {
  border-color: rgb(var(--primary-600));
}

html.dark-mode .bg-green-600 {
  background-color: rgb(var(--primary-600));
}

html.dark-mode .bg-green-600:hover {
  background-color: rgb(var(--primary-700));
}

html.dark-mode .text-green-600 {
  color: rgb(var(--primary-400));
}

html.dark-mode .bg-green-50 {
  background-color: rgba(var(--primary-500), 0.1);
}

html.dark-mode .text-green-600.bg-green-50 {
  color: rgb(var(--primary-300));
}

/* Beta badge */
html.dark-mode .bg-green-600.text-white {
  background-color: rgb(var(--primary-600));
}

/* Selection */
html.dark-mode ::selection {
  background-color: rgba(var(--primary-500), 0.3);
  color: rgb(var(--foreground));
}

/* Toggle button styles */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
  background-color: rgba(var(--gray-700), 0.2);
}

.dark-mode-toggle i {
  font-size: 1.25rem;
  color: rgb(var(--foreground-secondary));
}

html.dark-mode .dark-mode-toggle i {
  color: rgb(var(--foreground));
}