/* =============================================================================
   Site popup
   Fixed presentation: editors control content/timing only, never layout/style.
   ========================================================================== */
.mks-site-popup{
   --mks-popup-radius: 1.25rem;
   --mks-popup-shadow: 0 1.5rem 4rem rgb(var(--mks-black-rgb) / .24);
   --mks-modal-width: 60rem;
}

.mks-site-popup.no-image{--mks-modal-width: 43.75rem}

.mks-site-popup .modal-dialog{
   width: auto;
   margin: 1.5rem auto;
   padding-left: 1rem;
   padding-right: 1rem;
}

.mks-site-popup .modal-content{
   position: relative;
   overflow: visible;
   border: 0;
   border-radius: var(--mks-popup-radius);
   background: var(--mks-white-color);
   box-shadow: var(--mks-popup-shadow);
}

.mks-site-popup .modal-content::before{
   content: '';
   position: absolute;
   top: 0;
   left: 2rem;
   right: 2rem;
   height: .375rem;
   z-index: 2;
   background: var(--mks-primary-color);
   border-radius: 0 0 .375rem .375rem;
}

.mks-site-popup__layout{
   display: grid;
   grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
   overflow: hidden;
   border-radius: var(--mks-popup-radius);
}

.mks-site-popup.no-image .mks-site-popup__layout{display: block}

.mks-site-popup__content{
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 0;
   padding: 3.75rem 3.5rem 3.5rem;
}

.mks-site-popup.no-image .mks-site-popup__content{
   align-items: center;
   padding: 4rem 4.25rem 3.75rem;
   text-align: center;
}

.mks-site-popup__title{
   margin: 0;
   color: var(--mks-black-color);
   font-size: clamp(1.75rem, 3vw, 2.5rem);
   line-height: 1.08;
}

.mks-site-popup__text{
   margin-top: 1.5rem;
   color: var(--mks-black-color);
   font-size: var(--mks-body-font-size);
   line-height: 1.5;
}

.mks-site-popup.no-image .mks-site-popup__text{max-width: 35rem}

.mks-site-popup__text > *{margin-top: 0}
.mks-site-popup__text > * + *{margin-top: .875rem}
.mks-site-popup__text > *:last-child{margin-bottom: 0}

.mks-site-popup__action{margin-top: 1.875rem}

.mks-site-popup__button{
   min-width: 9rem;
   box-shadow: none!important;
}

.mks-site-popup__media{
   min-height: 24rem;
   background: var(--mks-gray-light-color);
}

.mks-site-popup__media img{
   display: block;
   width: 100%;
   height: 100%;
   min-height: 24rem;
   object-fit: cover;
   object-position: center;
   border-radius: 0 var(--mks-popup-radius) var(--mks-popup-radius) 0;
}

.mks-site-popup__close.btn-close{
   position: absolute;
   top: -1.125rem;
   right: -1.125rem;
   z-index: 5;
   width: 2.875rem;
   height: 2.875rem;
   padding: 0;
   margin: 0;
   color: var(--mks-white-color);
   opacity: 1;
   background: var(--mks-primary-color)!important;
   border: .25rem solid var(--mks-white-color);
   border-radius: 50%;
   box-shadow: 0 .5rem 1.25rem rgb(var(--mks-black-rgb) / .18);
   transition: background-color .2s ease, transform .2s ease;
}

.mks-site-popup__close.btn-close::before,
.mks-site-popup__close.btn-close::after{
   width: 1.125rem;
   height: .125rem;
   left: calc(50% - .5625rem);
   top: calc(50% - .0625rem);
   background-color: currentColor;
}

.mks-site-popup__close.btn-close:hover,
.mks-site-popup__close.btn-close:focus{
   color: var(--mks-black-color);
   background: var(--mks-secondary-color)!important;
   transform: rotate(8deg) scale(1.04);
}

.mks-site-popup__close.btn-close:hover::before,
.mks-site-popup__close.btn-close:focus::before{transform: rotate(45deg)}
.mks-site-popup__close.btn-close:hover::after,
.mks-site-popup__close.btn-close:focus::after{transform: rotate(-45deg)}

.mks-site-popup__close.btn-close:focus-visible{
   box-shadow: 0 0 0 .25rem rgb(var(--mks-primary-rgb) / .22), 0 .5rem 1.25rem rgb(var(--mks-black-rgb) / .18);
}

body.mks-site-popup-open .modal-backdrop.show{
   opacity: .58;
}

@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){
   body.mks-site-popup-open .modal-backdrop.show{
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
   }
}

@media (max-width: 767px){
   .mks-site-popup .modal-dialog{
      margin-top: 1rem;
      margin-bottom: 1rem;
      padding-left: .75rem;
      padding-right: .75rem;
   }

   .mks-site-popup__layout{
      grid-template-columns: 1fr;
      max-height: calc(100vh - 2rem);
      overflow-y: auto;
   }

   .mks-site-popup__media{
      order: -1;
      min-height: 0;
      aspect-ratio: 16 / 9;
   }

   .mks-site-popup__media img{
      min-height: 0;
      aspect-ratio: 16 / 9;
      border-radius: var(--mks-popup-radius) var(--mks-popup-radius) 0 0;
   }

   .mks-site-popup__content,
   .mks-site-popup.no-image .mks-site-popup__content{
      padding: 2.75rem 1.75rem 2.25rem;
   }

   .mks-site-popup__title{font-size: 1.875rem}
   .mks-site-popup__text{font-size: 1rem}

   .mks-site-popup__close.btn-close{
      top: -.75rem;
      right: -.5rem;
      width: 2.625rem;
      height: 2.625rem;
   }
}

@media (prefers-reduced-motion: reduce){
   .mks-site-popup__close.btn-close{transition: none}
}