/* ============================================================
   HSS Medical Supply — shared loading animation (CSS-only)
   ------------------------------------------------------------
   Use this file if you prefer markup over the JS API. Include:

     <link rel="stylesheet" href="../_shared/hss-loader/hss-loader.css">

   Full-screen overlay markup:

     <div class="hss-loader-overlay is-active">   <!-- drop is-active to hide -->
       <div class="hss-loader-card">
         <div class="hss-loader-mark" aria-hidden="true">
           <span class="hl-ring"></span>
           <span class="hl-mask"></span>
           <span class="hl-base"></span>
         </div>
         <div class="hss-loader-msg">Loading customer data…</div>
       </div>
     </div>

   Compact inline ring:  <span class="hss-spin"></span>

   Asset URLs below are relative to THIS file, so they resolve
   correctly no matter which portal folder includes it.
   ============================================================ */
@keyframes hssLoaderSpin { to { transform: rotate(360deg); } }
@keyframes hssLoaderFade { from { opacity: 0; } to { opacity: 1; } }

.hss-loader-overlay {
  position: fixed; inset: 0; z-index: 2147483600;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45); padding: 20px;
}
.hss-loader-overlay.is-active { display: flex; animation: hssLoaderFade .2s ease; }

.hss-loader-card {
  background: #fff; border-radius: 16px; padding: 38px 54px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  box-shadow: 0 18px 56px rgba(15, 23, 42, .26);
}

.hss-loader-mark { position: relative; width: 240px; aspect-ratio: 2448 / 895; }
.hss-loader-mark > span { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.hss-loader-mark .hl-ring {
  background-image: url(hss-ring.png);
  transform-origin: 42.30% 47.06%;
  animation: hssLoaderSpin 1.25s linear infinite;
}
.hss-loader-mark .hl-mask { background-image: url(hss-mask.png); }
.hss-loader-mark .hl-base { background-image: url(hss-base.png); }

.hss-loader-msg {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px; color: #374151; font-weight: 500; letter-spacing: .01em; text-align: center;
}

.hss-spin {
  display: inline-block; width: 28px; height: 28px; vertical-align: middle; flex-shrink: 0;
  background: url(hss-ring-emblem.png) center / contain no-repeat;
  animation: hssLoaderSpin 1.05s linear infinite;
}