/**
 * Styles for translatable elements
 * 
 * These styles are used to highlight translatable elements during development.
 * They can be disabled in production by setting the DEBUG_MODE to false in text-translator.js.
 */

/* Debug styles for translatable spans */
.translatable {
  /* No visible styling by default */
}

/* Debug mode styles - only applied when debug mode is enabled */
.debug-mode .translatable {
  border: 1px dashed rgba(0, 123, 255, 0.3);
  background-color: rgba(0, 123, 255, 0.05);
  position: relative;
}

/* Show data-id on hover in debug mode */
.debug-mode .translatable:hover {
  border: 1px dashed rgba(0, 123, 255, 0.8);
  background-color: rgba(0, 123, 255, 0.1);
}

.debug-mode .translatable:hover::after {
  content: attr(data-id);
  position: absolute;
  top: -20px;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 9999;
}

/* Debug toggle button */
#debug-toggle {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  z-index: 9999;
}

#debug-toggle:hover {
  background-color: rgba(0, 0, 0, 0.9);
}