/* Базовый спиннер */

.ms-loading-spinner {

  display: inline-block;

  width: var(--ms-spinner-size, 24px);

  height: var(--ms-spinner-size, 24px);

  border: 3px solid rgba(0, 0, 0, 0.15);

  border-top-color: var(--ms-primary, #004952);

  border-radius: 50%;

  animation: ms-spin 0.8s linear infinite;

}

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

/* Режимы отображения (без вставки HTML спиннера в верстку) */

.ms-loading--inline { position: relative; pointer-events: none; color: transparent !important; overflow: visible !important; }

.ms-loading--inline::after {

  content: ""; position: absolute; inset: 50% auto auto 50%;

  width: var(--ms-spinner-size, 24px); height: var(--ms-spinner-size, 24px);

  margin: -12px 0 0 -12px; border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ms-primary,#004952);

  border-radius: 50%; animation: ms-spin .8s linear infinite; z-index: 2;

}

.ms-loading--overlay { position: relative; }

.ms-loading--overlay > * { opacity: .3; }

.ms-loading--overlay::after {

  content: ""; position: absolute; inset: 50% auto auto 50%;

  width: 32px; height: 32px; margin: -16px 0 0 -16px;

  border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ms-primary,#004952);

  border-radius: 50%; animation: ms-spin .8s linear infinite; z-index: 3;

}

/* Фиксированный спиннер у нижней кромки экрана (для загрузок у конца страницы) */

.ms-viewport-loader {

  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);

  z-index: 9999; width: 32px; height: 32px;

  border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ms-primary,#004952);

  border-radius: 50%; animation: ms-spin .8s linear infinite;

}

/* Уважение prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {

  .ms-loading-spinner,

  .ms-loading--inline::after,

  .ms-loading--overlay::after,

  .ms-viewport-loader { animation: none; }

}

.ms-loading--overlay > * {
    opacity: 0.6 !important;
}

.ms-loading--overlay:after{
    top: 40px;
}