@charset "UTF-8";
/* ============================================
   Thank You Page Styles
   ============================================ */

/* ----------------------------------------
   Header Override
   ---------------------------------------- */
.header--thankyou {
  position: sticky;
  top: 0;
  z-index: var(--z-index-header);
  background: transparent;
}

.header--thankyou .header__inner {
  height: 80px;
  padding: 15px var(--spacing-5xl);
}

.header--thankyou .header__logo img {
  width: 200px;
}

/* ----------------------------------------
   Main Content
   ---------------------------------------- */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------
   Thank You Section
   ---------------------------------------- */
.thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 192px var(--spacing-7xl);
  background-color: var(--color-bg-gray);
  width: 100%;
}

.thankyou__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.thankyou__title {
  font-family: var(--font-family-number);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-normal);
  text-align: center;
  color: var(--color-text-black);
  /* Animation */
  animation: fadeInBlur 0.8s ease forwards;
}

.thankyou__message {
  font-family: var(--font-family-number);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  text-align: center;
  color: var(--color-text-black);
  margin-top: var(--spacing-5xl);
  /* Animation */
  animation: fadeInUp 0.6s ease 0.2s forwards;
  opacity: 0;
}

.thankyou__back {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-5xl);
  transition: var(--transition-slow);
  /* Animation */
  animation: fadeInUp 0.6s ease 0.4s forwards;
  opacity: 0;
}

.thankyou__back:hover {
  opacity: 0.5;
  transform: translate(4px, 4px);
}

.thankyou__back .material-icons {
  font-size: var(--font-size-xl);
  color: var(--color-text-black);
}

.thankyou__back span {
  font-family: var(--font-family-number);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-black);
  margin-left: 6px;
}

/* ----------------------------------------
   Animations
   ---------------------------------------- */
@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(48px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Responsive - Tablet (max-width: 840px)
   ============================================ */
@media screen and (max-width: 840px) {
  /* Header */
  .header--thankyou .header__inner {
    height: 96px;
  }

  .header--thankyou .header__logo img {
    width: 180px;
  }

  /* Thank You */
  .thankyou {
    padding: 144px var(--spacing-5xl);
  }

  .thankyou__title {
    max-width: 630px;
  }
}

/* ============================================
   Responsive - Mobile (max-width: 540px)
   ============================================ */
@media screen and (max-width: 540px) {
  /* Header */
  .header--thankyou {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .header--thankyou .header__inner {
    height: 63px;
    padding: 0 var(--spacing-2xl);
  }

  .header--thankyou .header__logo img {
    width: 100px;
  }

  /* Thank You */
  .thankyou {
    padding: var(--spacing-7xl) var(--spacing-2xl);
  }

  .thankyou__title {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-tight);
    max-width: 352px;
  }

  .thankyou__message {
    font-size: var(--font-size-base);
  }

  .thankyou__back span {
    font-size: 14px;
  }
}