/* The first screen while the panel loads, in asatsp.ir's look (backdrop glows and grid, white tile,
   brand-to-leaf progress). --asa-font comes from media/fonts/vazirmatn.css. */
body.page-loading {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.splash-screen {
  display: none;
}

.page-loading .splash-screen {
  position: fixed;
  z-index: 1000000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  direction: rtl;
  font-family: var(--asa-font, Tahoma, sans-serif);
  background: radial-gradient(42rem 26rem at 78% 8%, rgba(0, 165, 227, 0.14), transparent 62%),
    radial-gradient(38rem 24rem at 18% 0%, rgba(64, 186, 141, 0.14), transparent 60%),
    linear-gradient(180deg, #f4f8fc 0%, #ffffff 45%, #f3faf6 100%);
}

.page-loading .splash-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(1, 52, 96, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 52, 96, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

.splash-card {
  width: min(320px, calc(100vw - 32px));
  padding: 30px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(14, 26, 43, 0.05), 0 2px 6px rgba(14, 26, 43, 0.05),
    0 28px 70px rgba(14, 26, 43, 0.13);
  animation: splashIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.splash-mark {
  width: 84px;
  height: 84px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  position: relative;
}

.splash-mark img {
  width: 56px;
  height: 56px;
  z-index: 1;
  object-fit: contain;
}

.splash-orbit {
  position: absolute;
  inset: 0;
  border: 2px solid #eef2f7;
  border-top-color: #00a5e3;
  border-right-color: #40ba8d;
  border-radius: 50%;
  animation: splashSpin 1.05s linear infinite;
}

.splash-orbit::after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  top: 5px;
  right: 10px;
  border-radius: 50%;
  background: #40ba8d;
  box-shadow: 0 0 0 4px rgba(64, 186, 141, 0.14);
}

.splash-title {
  color: #0e1a2b;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.splash-detail {
  margin-top: 6px;
  color: #7b8697;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

.splash-progress {
  width: 160px;
  height: 4px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 99px;
  background: #eef2f7;
}

.splash-progress span {
  width: 45%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #00a5e3, #40ba8d);
  animation: splashProgress 1.35s ease-in-out infinite;
}

.splash-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.splash-actions button {
  padding: 6px 16px;
  border: 1px solid rgba(14, 26, 43, 0.12);
  border-radius: 999px;
  color: #4a5668;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.splash-actions button:hover {
  border-color: rgba(0, 119, 200, 0.4);
  color: #0077c8;
}

#error-message {
  max-width: 260px;
  color: #b4233c;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

@keyframes splashIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.98);
  }
}

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

@keyframes splashProgress {
  0% {
    transform: translateX(130%);
  }
  50% {
    width: 65%;
  }
  100% {
    transform: translateX(-230%);
  }
}

@media (max-width: 575.98px) {
  .splash-card {
    padding: 26px 22px 20px;
    border-radius: 24px;
  }
  .splash-mark {
    width: 74px;
    height: 74px;
  }
  .splash-mark img {
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-card {
    animation: none;
  }
  .splash-orbit {
    animation-duration: 2.4s;
  }
  .splash-progress span {
    width: 62%;
    margin: auto;
    animation: none;
  }
}