/* =========================================================
   GSC FatooraX — Page Loader
   Updated: 2026-10-21 20:05 - Fixed scrollbar jitter on menu navigation with scrollbar-gutter: stable
   ========================================================= */

/* Prevent scrollbar layout shift and position jitter during page navigation */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

:root {
  --fx-brand: #438a7a;
  --fx-brand-hover: #397568;
  --fx-brand-dark: #1b3832;

  /* Light mode (70% transparent white + subtle blur) */
  --fx-loader-bg: rgba(255, 255, 255, 0.3);
  --fx-loader-track: #e3efec;
  --fx-loader-text: #000000;
  --fx-loader-muted: #64748b;
  --fx-loader-accent: var(--fx-brand);
}

/* Dark mode (70% transparent dark + subtle blur) */
[data-bs-theme="dark"] {
  --fx-loader-bg: rgba(15, 31, 27, 0.3);
  --fx-loader-track: #22403a;
  --fx-loader-text: #e8f1ef;
  --fx-loader-muted: #8fb0a8;
  --fx-loader-accent: #5fae9c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --fx-loader-bg: rgba(15, 31, 27, 0.3);
    --fx-loader-track: #22403a;
    --fx-loader-text: #e8f1ef;
    --fx-loader-muted: #8fb0a8;
    --fx-loader-accent: #5fae9c;
  }
}

/* Explicit Light Loader Override (e.g. login page or forced light theme) */
#fx-loader.fx-loader-light,
[data-bs-theme="light"] #fx-loader {
  --fx-loader-bg: rgba(255, 255, 255, 0.9) !important;
  --fx-loader-track: #e3efec !important;
  --fx-loader-text: #000000 !important;
  --fx-loader-muted: #64748b !important;
  --fx-loader-accent: var(--fx-brand) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Explicit Dark Loader Override */
#fx-loader.fx-loader-dark,
[data-bs-theme="dark"] #fx-loader {
  --fx-loader-bg: rgba(15, 31, 27, 0.3) !important;
  --fx-loader-track: #22403a !important;
  --fx-loader-text: #e8f1ef !important;
  --fx-loader-muted: #8fb0a8 !important;
  --fx-loader-accent: #5fae9c !important;
  background: rgba(15, 31, 27, 0.3) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Updated: 2026-10-21 20:05 - Fixed jitter with overflow protection and smooth 0.3s fade-out */
#fx-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--fx-loader-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: opacity .3s ease, visibility .3s ease;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#fx-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fx-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}

/* Spinner */
.fx-spinner {
  position: relative;
  width: 72px;
  height: 72px;
}

.fx-spinner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fx-spinner .track {
  stroke: var(--fx-loader-track);
}

.fx-spinner .arc {
  stroke: var(--fx-loader-accent);
  stroke-linecap: round;
  stroke-dasharray: 60 140;
  transform-origin: 50% 50%;
  animation: fx-spin 1.1s linear infinite,
             fx-dash 2.2s ease-in-out infinite;
}

.fx-spinner .doc {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 26px;
  color: var(--fx-loader-accent);
  animation: fx-pulse 2.2s ease-in-out infinite;
}

/* Branding */
.fx-brand-text {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -.01em;
  color: var(--fx-loader-text);
  text-align: center;
}

.fx-status {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  margin-top: .35rem;
  font-size: .8125rem;
  color: var(--fx-loader-muted);
  text-align: center;
}

html[lang="ar"] .fx-status,
html[dir="rtl"] .fx-status {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
}

/* Progress bar */
.fx-bar {
  width: 160px;
  height: 3px;
  border-radius: 3px;
  background: var(--fx-loader-track);
  overflow: hidden;
  position: relative;
}

.fx-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  border-radius: 3px;
  background: var(--fx-loader-accent);
  animation: fx-slide 1.4s ease-in-out infinite;
}

/* Animations */
@keyframes fx-spin {
  to { transform: rotate(360deg); }
}

@keyframes fx-dash {
  0%   { stroke-dasharray: 20 180; }
  50%  { stroke-dasharray: 110 90; }
  100% { stroke-dasharray: 20 180; }
}

@keyframes fx-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes fx-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .fx-spinner .arc,
  .fx-spinner .doc,
  .fx-bar::after {
    animation: none;
  }
}

/* =========================================================
   End of Page Loader CSS
   ========================================================= */