/* file: webapp/style/loading.css */
.page-load-overlay{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 30% 20%, rgba(219, 238, 214, 0.82), rgba(241, 247, 240, 0.86));
  transition: opacity 0.18s ease, visibility 0.18s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-load-card{
  width: min(92vw, 280px);
  border: 1px solid #c7dcc3;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(40, 73, 44, 0.14);
  padding: 14px 13px;
  text-align: center;
}

.page-load-spinner{
  width: 30px;
  height: 30px;
  border: 4px solid #d9e9d5;
  border-top-color: #2f7d32;
  border-radius: 50%;
  margin: 0 auto 10px;
  animation: pageLoaderSpin .88s linear infinite;
}

.page-load-title{
  font-size: 16px;
  font-weight: 700;
  color: #1f3d20;
}

.page-load-text{
  margin-top: 5px;
  font-size: 13px;
  color: #47644a;
}

.page-load-overlay.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

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

@media (prefers-reduced-motion: reduce){
  .page-load-overlay,
  .page-load-spinner{
    transition: none;
    animation: none;
  }
}