.page-template-page-app-template.elementor-editor-active .wrapper {
  max-width: 100%;
  width: 450px;
  max-height: calc(100% - 100px);
  height: calc(100% - 100px);
  margin: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: #000 10px solid;
  border-radius: 60px;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.2) 6px 12px 24px 6px;
  overflow: hidden;

  &:before {
    content: "";
    display: block;
    position: fixed;
    left: calc(50% - 90px);
    top: 0;
    width: 180px;
    height: 40px;
    z-index: 999;
    background: #000;
    border-radius: 0 0 25px 25px;
    pointer-events: none;
  }

  &:after {
    content: "";
    display: block;
    position: fixed;
    left: calc(50% - 75px);
    bottom: 8px;
    width: 150px;
    height: 8px;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    pointer-events: none;
  }

  #application-template {
    overflow: auto;
    width: 100%;
    height: 100%;
    padding: 40px 0;
    border-radius: 50px;
  }

  .application-preview-navbar {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 100%;
    z-index: 998;
    background: linear-gradient(to top, transparent, #fff);
    pointer-events: none;
    padding: 10px 40px;

    svg{
      opacity: 0.5;
    }
  }
}

.page-template-page-app-template:not(.elementor-editor-active){
  .application-preview-navbar{
    display: none !important;
  }
}

.application-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  z-index: 99999999;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;

  &.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.negarshop-app {
  user-select: none;
  -webkit-user-select: none;

  #wpadminbar{
    display: none !important;
  }
  &--has-navbar {
    .wrapper {
      margin-top: 55px;
    }
  }
}
.negarshop-app--has-navbar.woocommerce.archive {
  .wrapper {
    margin-top: 25px;
  }
}
body.negarshop-app{
  background-color: #fff !important;
}

body.app-loading {
  overflow: hidden;

  img {
    filter: contrast(0);
    opacity: 0.6;
  }
}

.modal-backdrop{
  background-color: #fff;
}

@import "application/navbar";
@import "application/product";
@import "application/account";
@import "application/archive";
@import "application/checkout";
@import "application/assets";