/* HSCODES UI kit base (shared by the website and the admin panel) */
hs-loader { display: inline-block; width: 72px; height: 72px; }
hs-loader svg { display: block; }

/* Bootstrap / Ionic spinners re-skinned as the Lottie loader */
.spinner-border.hs-lottie-host { border: 0 !important; animation: none !important; width: 56px !important; height: 56px !important; background: none; }
ion-spinner.hs-lottie-host { display: none !important; }
.hs-loader-ionic { width: 56px; height: 56px; }
.hs-loader-inline { width: 100%; height: 100%; }

/* boot preloader (logo + loader), removed by HSUI.ready() */
#hs-preloader { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: #ffffff; transition: opacity .3s ease; }
#hs-preloader .hs-preloader-inner { display: grid; justify-items: center; gap: 12px; }
#hs-preloader img { width: 96px; height: 96px; border-radius: 50%; }
#hs-preloader.is-done { opacity: 0; pointer-events: none; }

/* overlay loader */
.hs-overlay { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; background: rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.hs-overlay.is-visible { opacity: 1; pointer-events: auto; }
.hs-overlay-card { padding: 16px; border-radius: 16px; background: #ffffff; box-shadow: 0 8px 28px rgba(16, 24, 40, .14); }
.hs-overlay-card hs-loader { width: 88px; height: 88px; }

/* blurhash placeholder until an image loads */
img.hs-img-pending { background-size: cover; background-position: center; color: transparent; }
img { transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  #hs-preloader, .hs-overlay, img { transition: none; }
}