/* ===== Theme Loading Overlay =====
   Shown by theme-loader.js while a structural theme's fragment loads.
   Deliberately theme-neutral: it renders before the theme is known and
   must look right no matter which theme is coming. Shared by the TV and
   player pages (tv.css does not import shared.css, hence its own file). */

.theme-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: #0b0b14;
  color: #e8e8f0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s;
}

.theme-loading.active {
  opacity: 1;
  visibility: visible;
}

.theme-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: #e8e8f0;
  border-radius: 50%;
  animation: theme-loading-spin 0.9s linear infinite;
}

.theme-loading-text {
  font-family: "Open Sans", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

@keyframes theme-loading-spin {
  to {
    transform: rotate(360deg);
  }
}