.badge {
  position: absolute;
  top: 12px;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 9999px;
  background: rgba(31,41,55,0.85);
  color: #e5e7eb;
  pointer-events: none;
  user-select: none;
}
.btn {
  background-color: #2563eb;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s ease;
}
.btn:hover { background-color: #1d4ed8; }
.after-img { clip-path: inset(0 50% 0 0); z-index: 2; }
canvas { position: absolute; top: 0; left: 0; z-index: 10; pointer-events: auto; user-select: none; }


/* === Theme V2: Light overrides === */
html.light body { background-color: #f3f4f6; color: #111827; }
html.light nav { background-color: #ffffff !important; }
html.light footer { background-color: #f3f4f6 !important; color: #4b5563 !important; }
html.light .btn { background-color: #2563eb; color: #fff; }

/* Override common Tailwind utility backgrounds in light mode */
html.light .bg-gray-900 { background-color: #f3f4f6 !important; }
html.light .bg-gray-800 { background-color: #ffffff !important; }
html.light .bg-gray-700 { background-color: #ffffff !important; }

/* Borders */
html.light .border-gray-600 { border-color: #d1d5db !important; }
html.light .border-gray-700 { border-color: #d1d5db !important; }

/* Text */
html.light .text-gray-100 { color: #111827 !important; }
html.light .text-gray-200 { color: #1f2937 !important; }
html.light .text-gray-300 { color: #513737 !important; }
html.light .text-gray-400 { color: #4b5563 !important; }
html.light .text-gray-500 { color: #6b7280 !important; }

/* Tool wrapper specific */
html.light #imageWrapper { background-color: #ffffff !important; border-color: #d1d5db !important; }

#beforeImg,
#afterImg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* gebruik 'cover' i.p.v. 'contain' als je geen letterboxing wilt */
}

/* Dark mode (default) — nav links rechtsboven */
#navMenu a {
  color: #93c5fd;      /* bv. Tailwind blue-300 */
}
#navMenu a:hover {
  color: #bfdbfe;      /* bv. Tailwind blue-200 */
}

/* Light-mode override (html.light) */
html.light #navMenu a {
  color: #1f2937;      /* gray-800 voor light mode */
}
html.light #navMenu a:hover {
  color: #2563eb;      /* blue-600 hover in light mode */
}