/* One loading component, shared by both configurators and their iframe. */
html.ui-modern .ui-viewer-loading, html.ui-modern .ui-viewer-loading * { box-sizing: border-box; }
html.ui-modern .ui-viewer-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px)); padding: var(--ui-space-3);
  color: var(--ui-text); background: var(--ui-surface);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-overlay); font-family: var(--ui-font-body); text-align: left;
}
html.ui-modern .ui-loading-heading { display: flex; align-items: center; gap: var(--ui-space-2); }
html.ui-modern .ui-loading-symbol {
  display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px;
  color: var(--ui-accent); background: var(--ui-accent-soft); border-radius: var(--ui-radius-md);
}
html.ui-modern .ui-loading-icon {
  display: block; width: 24px; height: 24px; background: currentColor;
  mask: url("./icons/loader-4-line.svg") center / contain no-repeat;
  animation: ui-loading-spin 1s linear infinite;
}
html.ui-modern .ui-loading-copy { min-width: 0; }
html.ui-modern .ui-loading-title { font-size: 16px; line-height: 1.4; font-weight: 600; }
html.ui-modern .ui-loading-description { margin-top: 4px; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
html.ui-modern .ui-loading-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0 var(--ui-space-1); color: var(--ui-muted); font-size: 12px; line-height: 1.5;
}
html.ui-modern .ui-loading-percentage { color: var(--ui-text); font: 600 18px/1 var(--ui-font-display); font-variant-numeric: tabular-nums; }
html.ui-modern .ui-loading-progress { height: 6px; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-border); }
html.ui-modern .ui-loading-fill {
  height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-hover));
  transition: width var(--ui-duration) ease;
}
html.ui-modern .is-indeterminate .ui-loading-fill { animation: ui-loading-sweep 1.6s ease-in-out infinite; }
html.ui-modern .is-error .ui-loading-icon { mask-image: url("./icons/error-warning-line.svg"); animation: none; }
html.ui-modern .is-error .ui-loading-fill { animation: none; }
@keyframes ui-loading-spin { to { transform: rotate(360deg); } }
@keyframes ui-loading-sweep { from { transform: translateX(-100%); } to { transform: translateX(412.5%); } }
@media (prefers-reduced-motion: reduce) {
  html.ui-modern .ui-loading-icon, html.ui-modern .is-indeterminate .ui-loading-fill { animation: none; }
  html.ui-modern .ui-loading-fill { transition: none; }
}