/* ============================================================
   QMED — shared loading animation (CSS-only, generic spinner)
   ------------------------------------------------------------
   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></span></div>
         <div class="hss-loader-msg">Loading customer data…</div>
       </div>
     </div>

   Compact inline ring:  <span class="hss-spin"></span>
   ============================================================ */
@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(26,77,92, .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(26,77,92, .26);
}

.hss-loader-mark { position: relative; width: 56px; height: 56px; }
.hss-loader-mark > span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 5px solid #7DC5BC; border-top-color: #159485;
  animation: hssLoaderSpin .9s linear infinite;
}

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

.hss-spin {
  display: inline-block; width: 28px; height: 28px; vertical-align: middle; flex-shrink: 0;
  border-radius: 50%; border: 3px solid #7DC5BC; border-top-color: #159485;
  animation: hssLoaderSpin .9s linear infinite;
}