/*! Copyright 2014 SoftCafe, LLC. Use of any code on this site or the imenupro app is forbidden. */
 
/* for stripe checkout, mainly */

button#buy-pac1, button#buy-pac2, button#buy-pac3, button#buy-cats, button#buy-ttcreator, button#buy-gccreator, button#buy-cufonts {
  justify-content: center;
  align-items: center;
  width: 69px;
  display: inline-flex;
}

:is(button#buy-pac1, button#buy-pac2, button#buy-pac3, button#buy-cats, button#buy-ttcreator, button#buy-gccreator, button#buy-cufonts) > span.spinner {
  justify-content: center;
  align-items: center;
  display: flex;
}

.checkout-modal-animated-in {
  animation-name: fadeInUp;
  animation-duration: var(--animate-modal-entrance-duration);
  animation-fill-mode: both;
}

.checkout-modal-animated-out {
  animation-name: fadeOutDown;
  animation-duration: var(--animate-modal-exit-duration);
  animation-fill-mode: both;
}

body.is-nightmode #addon-checkout-modal {
  background: #141d26 !important;
  border: 1px solid #0000004d !important;
}

body.is-nightmode #addon-checkout-modal #dialog-addon-checkout-x {
  color: #9fafcb;
  opacity: .8;
}

body.is-nightmode #addon-checkout-modal #dialog-addon-checkout-x:hover {
  opacity: 1;
}

body.is-nightmode #addon-checkout-modal #dialog-addons-checkout-help {
  color: #1375d7;
  opacity: .8;
}

body.is-nightmode #addon-checkout-modal #dialog-addons-checkout-help:hover {
  opacity: 1 !important;
}

#addon-checkout-modal-wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  inset: 0;
}

#addon-checkout-modal-wrapper > :first-child {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

@media (max-width: 950px) {
  #addon-checkout-modal {
    width: 100% !important;
    height: 100% !important;
  }

	#addon-checkout-modal .modal-content .modal-body #stripe-addon-checkout-mount {
		align-items: flex-start !important;
	}
}

@media (max-height: 800px) {
	#addon-checkout-modal .modal-content .modal-body #stripe-addon-checkout-mount {
		align-items: flex-start !important;
	}
}

#addon-checkout-modal {
  z-index: 1052;
  box-shadow: var(--modern-modal-box-shadow);
  border-radius: var(--modern-modal-border-radius);
  background: #fff;
  border: 1px solid #e4e4e4;
  flex-direction: column;
  width: 90%;
  max-width: 1200px;
  height: 90%;
  max-height: 900px;
  margin-left: -483px;
  display: flex;
  margin: 0 !important;
}

#addon-checkout-modal .modal-content {
  flex-direction: column;
  height: 100%;
  display: flex;
}

#addon-checkout-modal .modal-content .modal-header {
  border-top-right-radius: var(--modern-modal-border-radius);
  border-top-left-radius: var(--modern-modal-border-radius);
  line-height: 30px;
  display: flex;
}

#addon-checkout-modal .modal-content .modal-header .modal-title {
  align-items: center;
  display: flex;
}

#addon-checkout-modal .modal-content .modal-header .header-right-wrapper {
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  display: flex;
}

#addon-checkout-modal .modal-content:has(.modal-footer) .modal-body {
  bottom-bottom-right-radius: 0px;
  border-bottom-left-radius: 0;
}

#addon-checkout-modal .modal-content .modal-body {
  background-color: var(--stripe-checkout-bg-color);
  border-bottom-left-radius: var(--modern-modal-border-radius);
  border-bottom-right-radius: var(--modern-modal-border-radius);
  flex: 1;
  position: relative;
}

#addon-checkout-modal .modal-content .modal-body #stripe-addon-checkout-mount {
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: scroll;
}

/* 11.2.22 Nice animations for checkout modal */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}