/* Fix for translation keys showing during page load */

/* Hide content until translations are loaded */
body:not(.translations-loaded) [data-i18n],
body:not(.translations-loaded) .translation-text {
  visibility: hidden;
}

/* Smooth fade-in when translations are ready */
body.translations-loaded [data-i18n],
body.translations-loaded .translation-text {
  visibility: visible;
  animation: fadeInTranslation 0.3s ease-in;
}

@keyframes fadeInTranslation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Prevent layout shift during loading */
.translation-placeholder {
  min-height: 1em;
  display: inline-block;
}

/* Loading skeleton for text content */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
  min-width: 100px;
  min-height: 1em;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Ensure preloader covers everything */
#preloader {
  position: fixed !important;
  z-index: 9999 !important;
  background: #fafafa !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* Smooth transition when preloader is removed */
#main-wrap {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

body.loaded #main-wrap {
  opacity: 1;
}

/* Fix for SVG icons in RTL mode - prevent them from being flipped */
[dir="rtl"] .MuiSvgIcon-root {
  transform: none !important;
}

/* Specifically fix ChevronRight and ChevronLeft icons to always point in correct direction */
[dir="rtl"] .MuiSvgIcon-root[data-testid="ChevronRightIcon"],
[dir="rtl"] .MuiSvgIcon-root[data-testid="ChevronLeftIcon"] {
  transform: none !important;
  direction: ltr !important;
}

/* Remove RTL-specific classes from SVG icons */
.MuiSvgIcon-root.mui-style-rtl-i4bv87-MuiSvgIcon-root {
  transform: none !important;
}

/* Ensure navigation icons always work correctly */
.MuiIconButton-root .MuiSvgIcon-root {
  direction: ltr !important;
}