/* Dark Mode Styles */
body.dark-mode {
  --primary: #3b82f6; /* A slightly brighter blue for dark mode */
  --secondary: #e2e8f0; /* Light gray for text */
  --light-gray: #334155; /* Darker gray for backgrounds/borders */
  --background-color: #0f172a;
  --surface-color: #1e293b;
  --text-color: #e2e8f0;
  --heading-color: #ffffff;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  --card-background-color: var(--surface-color); /* The Fix */

  color: var(--text-color);
  background: var(--background-color);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--heading-color);
}

.dark-mode .logo span,
.dark-mode .logo,
.dark-mode .main-nav a,
.dark-mode .nav-toggle {
    color: var(--heading-color);
}

.dark-mode .main-nav a,
.dark-mode .dropdown-content a {
    background: transparent;
}

.dark-mode .main-nav a:hover {
    background: transparent; /* Ensure no background box on hover in dark mode for main nav */
    border-bottom: 2px solid var(--primary); /* Keep the border bottom from original styles */
}

.dark-mode .main-nav a:hover,
.dark-mode .logo:hover,
.dark-mode .dropdown-content a:hover,
.dark-mode .nav-toggle:hover {
    color: var(--primary);
    background: transparent; /* Explicitly transparent for hover */
}

.dark-mode .theme-switch-btn {
  background-color: var(--light-gray); /* Use dark version of light-gray */
  color: var(--text-color); /* Light text for dark button */
}

.dark-mode .theme-switch-btn:hover {
  background-color: #4b5563; /* Slightly darker hover */
}

body.dark-mode .theme-switch-btn.light-mode-btn {
  background-color: white !important;
  color: black !important;
}

.dark-mode .theme-switch-btn.light-mode-btn:hover {
  background-color: #eee; /* Slightly darker white on hover */
}

/* Styles for when the button itself indicates dark mode */
body.dark-mode .theme-switch-btn.dark-mode-btn {
  background-color: black !important;
  color: white !important;
}

.dark-mode .theme-switch-btn.dark-mode-btn:hover {
  background-color: #333; /* Slightly lighter black on hover */
}

/* Override sections for Om oss page */
.dark-mode .about-section {
  background: var(--background-color);
}

.dark-mode .values-section {
  background: var(--background-color);
}

.dark-mode .value-card {
  background: var(--surface-color);
}

.dark-mode .cta-section {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.dark-mode header {
  background: var(--surface-color);
  box-shadow: var(--shadow);
}

.dark-mode .main-nav {
  background: transparent;
}

.dark-mode .dropdown-content {
    background: var(--surface-color);
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
  .dark-mode .nav-toggle,
  .dark-mode .settings-toggle {
    background: #162133;
    border-color: rgba(226, 232, 240, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    color: var(--heading-color);
  }

  .dark-mode .nav-toggle:hover,
  .dark-mode .settings-toggle:hover,
  .dark-mode .nav-toggle:focus-visible,
  .dark-mode .settings-toggle:focus-visible {
    background: #1b2a40;
    color: var(--primary);
  }
}

.dark-mode .hero,
.dark-mode .page-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.dark-mode .hero p,
.dark-mode .page-hero p,
.dark-mode .section-title p {
    color: var(--heading-color);
}

.dark-mode .step-card,
.dark-mode .service-card,
.dark-mode .problem-card,
.dark-mode .pricing-card,
.dark-mode .benefit-card,
.dark-mode .value-card,
.dark-mode .contact-section,
.dark-mode .privacy-card,
.dark-mode .terms-card,
.dark-mode .modal-content,
.dark-mode .notification,
.dark-mode .support-banner {
  background: var(--surface-color);
  box-shadow: var(--shadow);
}

.dark-mode .support-banner {
  border-bottom-color: var(--light-gray);
}

.dark-mode .support-banner-text {
  color: var(--text-color);
}

.dark-mode .notification {
  background:
    radial-gradient(circle at top, rgba(59, 130, 246, 0.1), transparent 58%),
    linear-gradient(160deg, var(--surface-color) 0%, #1b2a40 100%);
  border-color: rgba(255,255,255,0.08);
  border-top-color: var(--primary);
}

.dark-mode .notification .notification-header h3,
.dark-mode .notification p {
  color: var(--heading-color);
}

.dark-mode .environmental-section {
    background: #1e3a2a;
    border-left-color: var(--success);
}

.dark-mode .everytool-section,
.dark-mode .about-section,
.dark-mode .privacy-section,
.dark-mode .terms-section {
    background: #1a2433;
}

.dark-mode .subpage-main-section,
.dark-mode .licenses-section,
.dark-mode .privacy-section,
.dark-mode .terms-section {
    background: #162133;
}

.dark-mode .subpage-main-section .legal-content,
.dark-mode .tool-main-section .card,
.dark-mode .pricing-card,
.dark-mode .contact-section {
    background: var(--surface-color);
    box-shadow: var(--shadow);
}

.dark-mode .form-group label,
.dark-mode .form-disclaimer,
.dark-mode .footer-bottom,
.dark-mode .terms-checkbox-container {
  color: var(--heading-color);
}

.dark-mode .additional-fee {
  color: var(--text-color);
  background: rgba(220, 38, 38, 0.1); /* Using a transparent warning color for the background */
  border-left-color: var(--warning);
}


.dark-mode .form-group input,
.dark-mode .form-group textarea,
.dark-mode .form-group select {
  background-color: transparent;
  border-color: var(--light-gray);
  color: var(--text-color);
}

.dark-mode select,
.dark-mode select option,
.dark-mode select optgroup,
.dark-mode .tool-col select,
.dark-mode .setting select {
  background-color: var(--surface-color);
  color: var(--text-color);
}

.dark-mode select option,
.dark-mode select optgroup {
  color-scheme: dark;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .form-group select:focus {
  border-color: var(--primary);
  background-color: var(--surface-color);
}

.dark-mode footer {
  background: #0b1220;
}

.dark-mode .footer-section h3 {
    color: var(--heading-color);
}

.dark-mode .footer-section p,
.dark-mode .footer-section a,
.dark-mode .footer-section ul {
    color: var(--heading-color);
}

.dark-mode .footer-section a:hover {
    color: var(--primary);
}

.dark-mode .cta-banner {
    background-color: var(--surface-color);
}

.dark-mode .cta-banner h2 {
    color: var(--heading-color);
}

.dark-mode .faq-toggle {
    background: none;
}

.dark-mode .faq-title {
    color: var(--heading-color);
}

.dark-mode .faq-panel p {
    color: var(--heading-color); /* Pure white for better contrast */
}

.dark-mode .licenses-section {
    background: var(--background-color);
    color: var(--text-color);
}

.dark-mode .licenses-section .license-item p {
    color: var(--heading-color);
}

.dark-mode .license-item p,
.dark-mode .license-item li,
.dark-mode .tools-license-item p,
.dark-mode .legal-content p,
.dark-mode .legal-content li,
.dark-mode .legal-content td {
    color: var(--text-color);
}

.dark-mode .license-item a,
.dark-mode .legal-content a {
    color: #93c5fd;
}

.dark-mode .license-item a:hover,
.dark-mode .legal-content a:hover {
    color: #bfdbfe;
}

.dark-mode .card {
    background-color: var(--surface-color);
}

.dark-mode .card p,
.dark-mode .card span,
.dark-mode .card label,
.dark-mode .card li {
  color: var(--heading-color); /* Ensure text is white for better contrast */
}

/* Tool Tab Overrides */
.dark-mode .tabs {
    border-bottom-color: var(--light-gray);
}

.dark-mode .tab {
    color: var(--heading-color); /* White text for tabs */
}

.dark-mode .tab:hover {
    background-color: var(--light-gray); /* Darker background on hover */
    color: var(--primary); /* Keep primary color for hover text */
}

.dark-mode .tab.active {
    color: var(--primary); /* Primary color for active tab text */
    border-bottom-color: var(--primary); /* Primary color for active tab border */
}

/* Tool Options Header Overrides (Fargevalg, Logo og kantlinjevalg) */
.dark-mode .options-container {
    background-color: var(--surface-color);
    border-color: var(--light-gray);
}

.dark-mode .options-header {
    background-color: #243244;
    border-bottom-color: var(--light-gray);
}

.dark-mode .options-header:hover {
    background-color: #2d3d52;
}

.dark-mode .options-title,
.dark-mode .options-header h3,
.dark-mode .options-header label,
.dark-mode .options-header i,
.dark-mode .toggle-icon {
    color: var(--heading-color); /* White text for options headers */
}

.dark-mode .options-content {
    background-color: var(--surface-color);
    border-top-color: var(--light-gray);
}

.dark-mode .options-content p,
.dark-mode .options-content span,
.dark-mode .options-content label,
.dark-mode .options-content li,
.dark-mode .options-content strong {
    color: var(--text-color);
}

/* Form Labels and Upload Area Text Overrides */
.dark-mode .form-group label,
.dark-mode .file-upload-area h3 {
    color: var(--heading-color); /* White text for form labels and upload area headers */
}

.dark-mode .file-upload-area p,
.dark-mode .file-upload-hint {
    color: var(--text-color); /* Light gray for hints/descriptions */
}

.dark-mode .file-upload-area {
    background-color: var(--background-color);
    border-color: var(--light-gray);
}

.dark-mode .file-upload-area i {
    color: var(--primary);
}

.dark-mode .file-upload-area:hover,
.dark-mode .file-upload-area.drag-over {
    background-color: #182437;
    border-color: var(--primary);
}

.dark-mode .format-tag {
    background-color: var(--light-gray);
    color: var(--text-color);
}

/* Feedback/Status Texts */
.dark-mode .feedback-text,
.dark-mode .loading,
.dark-mode .scan-result,
.dark-mode .copy-success {
    color: var(--text-color);
}

.dark-mode .loading .spinner {
    border-top-color: var(--primary);
}

.dark-mode .scan-result {
    background-color: var(--background-color);
    border-color: var(--light-gray);
}

/* Image tools specific text */
.dark-mode .resize-inputs label,
.dark-mode .quality-control label,
.dark-mode .input-group label,
.dark-mode .resize-panel-title,
.dark-mode .setting label {
    color: var(--heading-color) !important;
}

.dark-mode .form-group input[type="text"],
.dark-mode .form-group input[type="url"],
.dark-mode .form-group input[type="tel"],
.dark-mode .form-group input[type="email"],
.dark-mode .form-group input[type="number"],
.dark-mode .form-group textarea,
.dark-mode .options-content input[type="text"],
.dark-mode .options-content input[type="url"],
.dark-mode .options-content input[type="tel"],
.dark-mode .options-content input[type="email"],
.dark-mode .options-content input[type="number"],
.dark-mode .options-content textarea {
    background-color: var(--background-color) !important;
    border-color: var(--light-gray) !important;
    color: var(--text-color) !important;
}

.dark-mode .form-group input[type="text"]::placeholder,
.dark-mode .form-group input[type="url"]::placeholder,
.dark-mode .form-group input[type="tel"]::placeholder,
.dark-mode .form-group input[type="email"]::placeholder,
.dark-mode .form-group input[type="number"]::placeholder,
.dark-mode .form-group textarea::placeholder,
.dark-mode .options-content input[type="text"]::placeholder,
.dark-mode .options-content input[type="url"]::placeholder,
.dark-mode .options-content input[type="tel"]::placeholder,
.dark-mode .options-content input[type="email"]::placeholder,
.dark-mode .options-content input[type="number"]::placeholder,
.dark-mode .options-content textarea::placeholder {
    color: #94a3b8;
}

.dark-mode .options-content input[type="range"] {
    accent-color: var(--primary);
}

.dark-mode .overlay-preview-container,
.dark-mode .preview-container,
.dark-mode .copy-container {
    background-color: var(--background-color);
    border-color: var(--light-gray);
}

.dark-mode #overlay-preview-canvas,
.dark-mode #batch-overlay-preview-canvas {
    background-color: var(--background-color);
}

.dark-mode .color-value-box {
    background: #162133;
    border: 1px solid #314155;
    color: var(--heading-color);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dark-mode .color-values-panel {
    gap: 0.6rem;
}

.dark-mode .color-swatch-box {
    background: #182437;
    border-color: #314155;
}

.dark-mode #colorDisplay {
    border-color: #475569;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.dark-mode .hsl-box {
    background: #182437 !important;
}

.dark-mode .quality-slider {
    background-color: var(--light-gray); /* Darker gray for the slider track */
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    appearance: none;
    height: 8px; /* Adjust height as needed */
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

.dark-mode .quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.dark-mode .quality-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.dark-mode .resize-inputs div,
.dark-mode .quality-control {
    background-color: var(--background-color) !important; /* Use main body background */
}

.dark-mode .resize-panel {
    background: #162133 !important;
    border-color: #314155 !important;
}

.dark-mode .resize-panel-hint {
    color: #94a3b8 !important;
}

.dark-mode .resize-inputs input[type="number"],
.dark-mode .quality-control input[type="range"] {
    background-color: var(--background-color) !important; /* Use main body background */
    color: var(--text-color) !important; /* Ensure text is light */
    border-color: var(--light-gray) !important; /* Consistent border */
    box-shadow: none !important; /* No shadows */
}

.dark-mode .quality-control span { /* For the "80%" text next to the slider */
    color: var(--text-color) !important;
}

.dark-mode .quality-control label {
    color: var(--heading-color) !important;
}

.dark-mode .color-value-title,
.dark-mode .color-value-content {
    color: var(--text-color);
}

.dark-mode .tool-controls {
    background-color: var(--surface-color);
    border-color: var(--light-gray);
}

.dark-mode .sidebar-controls {
    background-color: var(--surface-color) !important;
    border-color: var(--light-gray);
}

.dark-mode #ean-output,
.dark-mode #custom-output {
    background-color: var(--background-color);
    border-color: var(--light-gray);
}

.dark-mode .copy-container {
    background-color: var(--background-color);
    border-color: var(--light-gray);
}

.dark-mode .preview-container {
    background-color: var(--background-color);
    border-color: var(--light-gray);
}

.dark-mode .status-processing {
    background-color: #0d324f;
    color: var(--primary);
    border-color: #1a4f7e;
}

.dark-mode .status-completed {
    background-color: #1a3a2a;
    color: var(--success);
    border-color: #216a3a;
}

.dark-mode .card p,
.dark-mode .card span,
.dark-mode .card label,
.dark-mode .card li {
  color: var(--heading-color); /* Ensure text is white for better contrast */
}

.dark-mode .legal-content th {
  background-color: var(--surface-color);
  color: var(--heading-color);
}

.dark-mode .legal-content td {
  border-color: var(--light-gray);
}

.dark-mode .legal-content tr:nth-child(even) {
  background-color: #1a2433; /* A slightly different shade for stripes */
}

.dark-mode .warning-box {
  background: rgba(220, 38, 38, 0.1);
  border-left-color: var(--warning);
}

.dark-mode .warning-box p {
  color: var(--text-color);
}

/* Cookie Page Dark Mode */
.dark-mode .cookie-consent-text,
.dark-mode .cookie-consent-helper {
  color: var(--text-color);
}

.dark-mode .cookie-consent-helper a {
  color: #93c5fd;
}

.dark-mode .cookie-consent-helper a:hover {
  color: #bfdbfe;
}

.dark-mode .cookie-consent-card {
  background: #182437;
  border-color: var(--light-gray);
}

.dark-mode .cookie-consent-card.inactive {
  background: #141e2d;
}

.dark-mode .cookie-consent-card-copy strong {
  color: var(--heading-color);
}

.dark-mode .cookie-consent-card-copy p {
  color: var(--text-color);
}

.dark-mode .cookie-consent-badge {
  background: #243244;
  color: var(--text-color);
}

.dark-mode .cookie-consent-badge.always-on {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

.dark-mode .cookie-consent-badge.inactive {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.dark-mode .cookie-consent-button {
  border-color: var(--light-gray);
  background-color: #162133;
  color: var(--text-color);
}

.dark-mode .cookie-consent-button:hover {
  background-color: #243244;
}

.dark-mode .cookie-consent-button.primary {
  background-color: var(--primary);
  color: var(--heading-color);
  border-color: var(--primary);
}

.dark-mode .cookie-consent-button.primary:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .dark-mode .main-nav {
    background: var(--surface-color); /* Override hardcoded #fff */
  }
  .dark-mode .dropdown-content {
    background: var(--background-color); /* Override hardcoded #f9fafb */
  }
}