/* A local, lightweight scene: no video, icon font, or remote animation needed. */
.route-loader[hidden], .route-loader-dismiss[hidden] { display: none !important; }
.route-loader {
  --loader-bg: #100b20;
  --loader-text: #f6f2ff;
  --loader-muted: #b3a7cc;
  --loader-edge: #c7afff24;
  --loader-accent: #ba9aff;
  --loader-map-ink: #dfceff;
  --loader-map-fill: #ad85f910;
  position: fixed;
  inset: 0;
  z-index: 10000;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  overflow: auto;
  padding: max(30px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 40%, #6b34ce26, transparent 58%), var(--loader-bg);
  color: var(--loader-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  text-align: center;
  outline: none;
}
html[data-theme="light"] .route-loader {
  --loader-bg: #f7f4ff;
  --loader-text: #281847;
  --loader-muted: #77648f;
  --loader-edge: #6236bb24;
  --loader-accent: #7646cf;
  --loader-map-ink: #7954ac;
  --loader-map-fill: #8052ce0c;
  background: radial-gradient(ellipse at 50% 40%, #b391ff24, transparent 58%), var(--loader-bg);
}
html.upay-route-loading, html.upay-route-loading body { overflow: hidden; }
.route-loader-grain { position: absolute; z-index: -1; inset: 0; opacity: .35; pointer-events: none; background-image: radial-gradient(var(--loader-edge) .6px, transparent .6px); background-size: 6px 6px; mask-image: linear-gradient(transparent, #000 45%, transparent); }
.route-loader-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(960px, 100%); margin: 0 auto; }
.route-loader-wordmark { font: 800 27px/1 Manrope, system-ui, sans-serif; letter-spacing: 0; }
.route-loader-edition { font-size: 9px; font-weight: 700; letter-spacing: .22em; color: var(--loader-muted); }
.route-loader-main { width: min(480px, 100%); margin: auto; padding: 30px 0 32px; }
.route-loader-art { position: relative; width: min(360px, 100%); aspect-ratio: 6 / 5; margin: 0 auto 18px; }
.route-loader-halo { position: absolute; inset: 18% 17%; border-radius: 50%; background: radial-gradient(circle, #8045ee36, #6b3bb512 46%, transparent 72%); box-shadow: 0 0 80px #7645ec12; }
.route-loader-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-orbit-outer { stroke: var(--loader-edge); stroke-width: 1; }
.route-orbit-inner { stroke: var(--loader-edge); stroke-width: 1; stroke-dasharray: 2 7; }
.route-orbit-trail { stroke: var(--loader-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 92; animation: route-orbit-travel 4.5s linear infinite; }
.route-orbit-bridge { stroke: var(--loader-accent); stroke-width: 1; stroke-dasharray: 3 6; opacity: .38; }
.route-loader-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 100px; height: 100px; padding: 12px; transform: translate(-50%, -50%); border: 1px solid #bc9dff60; border-radius: 29px; background: linear-gradient(145deg, #4b2688, #21103f); box-shadow: inset 0 1px 0 #dac6ff30, 0 0 0 9px #9a69ed07, 0 0 0 20px #9a69ed05, 0 20px 45px #10072050; }
.route-loader-core img { display: block; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 7px 10px #12032a55); }
/* Fine coastline sketches with a second pencil trace and quiet contour lines. */
.route-loader-map {
  position: absolute;
  width: 34%;
  aspect-ratio: 12 / 13;
  color: var(--loader-map-ink);
}
.route-loader-map svg { display: block; width: 100%; height: 100%; overflow: visible; }
.route-map-pencil { stroke: var(--loader-accent); stroke-width: .65; opacity: .26; stroke-dasharray: 5 2 1 3; }
.route-map-land { fill: var(--loader-map-fill); }
.route-map-outline { stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #be9bff28); }
.route-map-contours { stroke: var(--loader-accent); stroke-width: .6; opacity: .2; }
.route-map-node-ring { stroke: var(--loader-accent); stroke-width: .75; opacity: .45; }
.route-map-node { fill: currentColor; filter: drop-shadow(0 0 4px #c6a8ff80); }
.route-loader-tanzania { left: 0; top: 7%; transform: rotate(-2deg); animation: route-tanzania-float 5s ease-in-out infinite; }
.route-loader-india { right: 0; bottom: 6%; transform: rotate(2deg); animation: route-india-float 5s ease-in-out infinite; }
.route-loader-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #cfb6ff; box-shadow: 0 0 12px #bc91ff; }
.route-spark-one { right: 15%; top: 12%; }
.route-spark-two { left: 17%; bottom: 12%; width: 4px; height: 4px; background: #9fe9d3; box-shadow: 0 0 12px #72d9bb55; }
.route-loader-kicker { margin: 0 0 13px; color: var(--loader-accent); font-size: 9px; font-weight: 800; letter-spacing: .3em; }
.route-loader-status h2 { margin: 0; color: var(--loader-text); font: 700 clamp(22px, 5.6vw, 29px)/1.25 Manrope, system-ui, sans-serif; letter-spacing: -.045em; }
.route-loader-status p { max-width: 290px; min-height: 42px; margin: 13px auto 0; color: var(--loader-muted); font-size: 12px; line-height: 1.75; text-wrap: pretty; }
.route-loader-motion { display: flex; justify-content: center; align-items: center; gap: 6px; height: 22px; margin-top: 12px; }
.route-loader-motion span { width: 5px; height: 5px; border-radius: 50%; background: var(--loader-accent); animation: route-loader-dot 1.6s ease-in-out infinite; }
.route-loader-motion span:nth-child(2) { animation-delay: .16s; }
.route-loader-motion span:nth-child(3) { animation-delay: .32s; }
.route-loader-dismiss { margin: 18px auto 0; padding: 12px 17px; min-height: 44px; border: 1px solid var(--loader-edge); border-radius: 99px; background: transparent; color: var(--loader-text); font: 600 12px/1.4 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.route-loader-dismiss span { margin-left: 12px; color: var(--loader-accent); }
.route-loader-dismiss:hover { background: #9b73ee12; }
.route-loader-dismiss:focus-visible { outline: 2px solid var(--loader-accent); outline-offset: 4px; }
.route-loader-footer { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--loader-muted); font-size: 9px; letter-spacing: .035em; }
.route-loader-footer-line { width: 28px; height: 1px; background: var(--loader-edge); }
.route-loader[data-connection="offline"] .route-loader-motion span { animation: none; opacity: .5; }
@keyframes route-orbit-travel { to { stroke-dashoffset: -100; } }
@keyframes route-tanzania-float { 50% { transform: translateY(-4px); } }
@keyframes route-india-float { 50% { transform: translateY(4px); } }
@keyframes route-loader-dot { 0%, 70%, 100% { opacity: .3; transform: scale(.8); } 35% { opacity: 1; transform: scale(1.2); } }
@media (max-width: 380px) {
  .route-loader { padding-inline: 22px; }
  .route-loader-core { width: 86px; height: 86px; border-radius: 25px; }
  .route-loader-core img { width: 64px; height: 64px; }
}
@media (max-height: 630px) {
  .route-loader { padding-block: 18px; }
  .route-loader-main { padding-block: 16px; }
  .route-loader-art { width: 220px; margin-bottom: 10px; }
  .route-map-contours { display: none; }
  .route-loader-core { width: 76px; height: 76px; border-radius: 22px; }
  .route-loader-core img { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .route-loader, .route-loader * { animation: none !important; }
  .route-loader-motion span:nth-child(2) { opacity: .65; }
  .route-loader-motion span:nth-child(3) { opacity: .35; }
}
@media print { .route-loader { display: none !important; } }