/*
 * qme-loading.css - the look of themes/shared/js/qme-loading.js (both QME engine repos).
 * Top bar while any request runs; a veil + spinner + "Loading..." over content being
 * replaced; a small spinner in a busy button. Nothing here moves the page: the bar is
 * fixed and the veil is absolute over its box. Accent = var(--site_color_g).
 */
.qme-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.qme-topbar > span {
  display: block;
  height: 100%;
  background: var(--site_color_g, var(--secondary-color, Highlight));
  box-shadow: 0 0 6px var(--site_color_g, var(--secondary-color, Highlight));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.qme-topbar.is-on { opacity: 1; }
.qme-topbar.is-done { opacity: 0; transition: opacity .3s ease .1s; }

/* Container loader */
.qme-loading-pos { position: relative; }
/* isolation: the veil stays inside its box and never paints over fixed headers/footers */
.qme-loading-host { min-height: 56px; isolation: isolate; }
.qme-loading-veil.qme-loading-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 18px 12px;
  border: 0;
  border-radius: inherit;
  list-style: none;
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
  cursor: progress;
  min-height: 0;
  width: auto;
  height: auto;
  grid-column: 1 / -1;
}
.qme-loading-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  color: var(--site_font_color_g, inherit);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.qme-spin {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .12);
  border-top-color: var(--site_color_g, var(--secondary-color, currentColor));
  animation: qme-spin .75s linear infinite;
}

/* A DataTable shows this veil instead of its own "Processing..." box */
.qme-loading-host .dataTables_processing, .qme-loading-host .dt-processing { display: none !important; }

/* Inline "Searching..." row (QmeLoading.inline): a dropdown or a cell that draws its own */
.qme-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--site_font_color_g, inherit);
}

/* Busy button: same size as before, a spinner before its words */
.qme-btn-busy { cursor: progress !important; opacity: .85; }
.qme-btn-spin {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
  margin-right: .45em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: qme-spin .75s linear infinite;
}

@keyframes qme-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .qme-topbar, .qme-topbar > span, .qme-topbar.is-done { transition: none; }
  .qme-spin, .qme-btn-spin { animation: none; }
  .qme-spin { border-color: var(--site_color_g, var(--secondary-color, currentColor)); border-right-color: transparent; }
}