#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  direction: rtl;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.hide {
  opacity: 0;
  visibility: hidden;
}

#page-loader::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(to right, #076702, #1ab405);
  transform: scaleX(0);
  transform-origin: right;
  animation: loader-bar 2.5s ease-in-out forwards;
}

@keyframes loader-bar {
  to { transform: scaleX(1); }
}

.loader-orbit {
  width: 72px; height: 72px;
  position: relative;
}

.loader-orbit svg.spin-ring {
  position: absolute;
  top: 0; left: 0;
  animation: spin 2.5s linear infinite;
  transform-origin: center;
}

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

.loader-orbit .inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #076702, #1ab405);
  display: flex; align-items: center; justify-content: center;
}

.loader-dots { display: flex; gap: 10px; }
.loader-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1ab405;
  animation: dot-bounce 1.4s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .2s; background: #076702; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(.8); opacity: .5; }
  40%           { transform: scale(1.3); opacity: 1; }
}