/* PAYNUSA V7.11.8 - single isolated loading effect */

/* Transition/process loading between pages. */
.pn-loading-overlay{
  position:fixed;
  z-index:2147483000;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(248,250,250,.92);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease;
}
.pn-loading-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.pn-loading-progress{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  overflow:hidden;
  background:color-mix(in srgb,var(--pn,#0b8e88) 12%,#fff);
}
.pn-loading-progress>span{
  display:block;
  height:100%;
  width:38%;
  background:var(--pn,#0b8e88);
  animation:pnLoaderSlide .95s ease-in-out infinite;
}
.pn-loading-card{
  min-width:176px;
  max-width:250px;
  min-height:72px;
  padding:14px 17px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 18px 48px rgba(15,23,30,.14);
}
.pn-loading-spinner{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  border:3px solid #e4e8ea;
  border-top-color:var(--pn,#0b8e88);
  animation:pnLoadingSpin .75s linear infinite;
}
.pn-loading-copy strong,
.pn-loading-copy small{display:block}
.pn-loading-copy strong{
  font-size:13px;
  line-height:1.25;
  color:#30363d;
  font-weight:800;
}
.pn-loading-copy small{
  margin-top:3px;
  font-size:10px;
  line-height:1.3;
  color:#92989f;
}

/* Button processing remains isolated. */
.pn-button-loading{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  cursor:wait!important;
}
.pn-button-spinner{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-block;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  animation:pnLoadingSpin .75s linear infinite;
}

@keyframes pnLoadingSpin{to{transform:rotate(360deg)}}
@keyframes pnLoaderPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes pnLoaderSlide{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(100%)}
  100%{transform:translateX(260%)}
}
@media(prefers-reduced-motion:reduce){
  .pn-loading-progress>span,.pn-loading-spinner,.pn-button-spinner{
    animation-duration:1.6s;
  }
,.pn-loading-overlay{transition:none}
}
@media(max-width:360px){
  .pn-loading-card{min-width:164px;padding:13px 15px;border-radius:16px}
}


/* PAYNUSA V7.11.6 - visual center correction for mobile/WebView
   Center the process card in the usable app viewport, not behind bottom nav. */
@media (max-width: 768px){
  .pn-loading-overlay{
    place-items:center;
  }
  .pn-loading-card{
    transform:translateY(-42px);
  }
}
@media (max-width: 360px){
  .pn-loading-card{
    transform:translateY(-34px);
  }
}

/* V7.11.8 single loader mode: loader partial now renders after closed <body> tag. */