html,
body {
  min-height: 100%;
}

body {
  margin: 0;
}

:root {
  --vfi-bootstrap-background: #1f2d38;
  --vfi-bootstrap-surface: #2a3a46;
  --vfi-bootstrap-text: #f5f7fa;
  --vfi-bootstrap-border: rgba(245, 247, 250, 0.12);
  --vfi-bootstrap-accent: #5b92ff;
}

[data-vfi-theme='light'] {
  --vfi-bootstrap-background: #eef3f7;
  --vfi-bootstrap-surface: #ffffff;
  --vfi-bootstrap-text: #15202b;
  --vfi-bootstrap-border: rgba(21, 32, 43, 0.12);
}

.vfi-bootstrap-loading {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--vfi-bootstrap-background, #1f2d38);
  color: var(--vfi-bootstrap-text, #f5f7fa);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    backdrop-filter 0.35s ease;
}

.vfi-bootstrap-loading--exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vfi-bootstrap-loading__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(320px, 100%);
  padding: 28px 24px;
  border: 1px solid var(--vfi-bootstrap-border, rgba(245, 247, 250, 0.12));
  border-radius: 18px;
  background: var(--vfi-bootstrap-surface, #2a3a46);
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  transform: translateY(0) scale(1);
  opacity: 1;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease;
}

.vfi-bootstrap-loading__logo {
  width: min(190px, 60vw);
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition:
    filter 0.2s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

[data-vfi-theme='light'] .vfi-bootstrap-loading__logo {
  filter: brightness(0) opacity(0.8);
}

.vfi-bootstrap-loading__spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--vfi-bootstrap-border, rgba(245, 247, 250, 0.12));
  border-top-color: var(--vfi-bootstrap-accent, #5b92ff);
  border-radius: 50%;
  animation: vfi-bootstrap-spin 0.8s linear infinite;
}

.vfi-bootstrap-loading__message {
  margin: 0;
  font:
    600 16px/1.4 Roboto,
    sans-serif;
}

.vfi-bootstrap-loading--exiting .vfi-bootstrap-loading__panel {
  transform: translateY(-10px) scale(0.985);
  opacity: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.vfi-bootstrap-loading--exiting .vfi-bootstrap-loading__logo {
  opacity: 0;
  transform: translateY(-6px);
}

@keyframes vfi-bootstrap-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}