.purchase-package {
  @apply relative w-full h-full;
  overflow: hidden;
  min-height: 375px;
}

.purchase-package__modal .modal__card {
  @apply p-0;
}

.purchase-package__modal .modal__card-section {
  @apply mt-0 h-full;
}

.purchase-package .reveal {
  @apply w-full px-8 py-6;
}

.purchase-package__loading,
.purchase-package__failed,
.purchase-package__success,
.purchase-package__payment,
.purchase-package__email {
  @apply absolute flex justify-center flex-col;
}

.purchase-package__loading,
.purchase-package__failed,
.purchase-package__success {
  @apply w-full h-full;
  align-items: center;
}

.purchase-package__loading {
  @apply justify-center;
}

.purchase-package-failed__title,
.purchase-package-success__title,
.purchase-package__title {
  @apply text-xl font-semibold mb-4;
}

.purchase-package-success__pin,
.purchase-package-failed__pin {
  @apply mt-4 mb-6;
}

.purchase-package-success__subtitle,
.purchase-package-failed__subtitle,
.purchase-package__subtitle {
  @apply text-sm font-normal text-grey-dark text-center mb-6;
  /*max-width: 300px;*/
}

.purchase-package-success__subtitle a {
  @apply block mt-2;
}

.reveal-child__purchase-package__subtitle-container {
  flex: 1;
}

.reveal-child__purchase-package__btn-container,
.purchase-package .purchase-package__btn,
.purchase-package .purchase-package__btn .btn {
  @apply w-full;
}

.purchase-package__email h2,
.purchase-package__email .image,
.purchase-package__payment h2,
.purchase-package__payment .image {
  @apply text-xl font-semibold mb-2;
}

.purchase-package__email p,
.purchase-package__payment p {
  @apply text-sm mb-8 text-grey-dark font-medium;
}

.purchase-package__payment .image {
  @apply shadow-lg;
  width: 100px;
}

.reveal-child__purchase-package__payment-link-container {
  @apply text-center mt-6;
}