/* ============================================================
   page-loader.css — Overlay che TOÀN TRANG lúc tải, gỡ khi 'load'.
   Mượn nguyên phong cách .page-loader của www/style.css (module
   main/) — cùng markup/behavior, đổi logo + màu progress bar cho AOC.

   LÝ DO: color.php hiện #appView NGAY (không còn class d-none của
   #heroView cũ ẩn kín nó) → mọi FOUC bên trong (placeholder mờ, modal
   Chi tiết màu chớp tắt lúc script khởi tạo…) lộ ra hết. Loader này
   che phủ tới khi window 'load' xong, tránh vá lẻ tẻ từng chỗ.
   ============================================================ */

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

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

.loader-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loader-logo {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.loader-logo-inner {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo-inner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.loader-progress-track {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  overflow: hidden;
}

.loader-progress-bar {
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green, #2f7d57), var(--green-bright, #3f9d70));
  animation: loader-progress 1.2s ease-in-out infinite;
}

.loader-text {
  font-size: 13px;
  color: var(--ink-2, #61635d);
}

@keyframes loader-progress {
  0% { transform: translateX(-60%); }
  50% { transform: translateX(60%); }
  100% { transform: translateX(-60%); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-progress-bar { animation: none; }
}