/* =========================================================
   HAPUS INFOTECH
   PREMIUM THANK YOU PAGE
   Drupal Form API + Bootstrap 5
========================================================= */

.hapus-assessment-landing .hapus-complete-screen {
  --thanks-navy: #001337;
  --thanks-orange: #ff6500;
  --thanks-muted: #687a98;
  --thanks-border: #dce5f3;

  width: 100% !important;
  min-width: 0 !important;

  padding: 45px 0 65px !important;
  margin: 0 auto !important;

  text-align: center !important;
  box-sizing: border-box !important;
}

/* =========================================================
   1. SUCCESS ILLUSTRATION
========================================================= */

.hapus-assessment-landing .hapus-complete-screen .thanks-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  margin: 0 auto 22px !important;
}

.hapus-assessment-landing .hapus-complete-screen .thanks-image img {
  display: block !important;

  width: min(300px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 auto !important;
  object-fit: contain !important;

  animation: hapusThanksEntrance 0.8s ease-out both;
}

@keyframes hapusThanksEntrance {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   2. MAIN HEADING
========================================================= */

.hapus-assessment-landing .hapus-complete-screen .hapus-complete-heading {
  max-width: 1100px !important;

  margin: 0 auto 20px !important;
  padding: 0 !important;

  color: var(--thanks-navy) !important;

  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1.13 !important;
  letter-spacing: -0.04em !important;

  overflow-wrap: break-word !important;
}

/* Orange highlighted text */

.hapus-assessment-landing .hapus-complete-screen .hapus-complete-heading .text-blue {
  color: var(--thanks-orange) !important;
}

/* =========================================================
   3. DESCRIPTION
========================================================= */

.hapus-assessment-landing .hapus-complete-screen>p.fs-5 {
  max-width: 760px !important;

  margin: 0 auto 34px !important;

  color: var(--thanks-muted) !important;

  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* =========================================================
   4. THREE INFORMATION CARDS
========================================================= */

.hapus-assessment-landing .hapus-complete-screen .row {
  align-items: stretch !important;
  margin-bottom: 28px !important;
}

.hapus-assessment-landing .hapus-complete-screen .row>[class*="col-"] {
  min-width: 0 !important;
}

.hapus-assessment-landing .hapus-complete-screen .thanks-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100% !important;
  min-height: 190px !important;

  padding: 26px !important;
  margin: 0 !important;

  background: #ffffff !important;
  border: 1px solid var(--thanks-border) !important;
  border-radius: 16px !important;

  text-align: left !important;

  box-shadow:
    0 8px 28px rgba(0, 19, 55, 0.035) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

/* Subtle premium hover effect */

@media (hover: hover) {
  .hapus-assessment-landing .hapus-complete-screen .thanks-card:hover {
    transform: translateY(-4px) !important;

    box-shadow:
      0 14px 35px rgba(0, 19, 55, 0.08) !important;
  }
}

/* Card headings */

.hapus-assessment-landing .hapus-complete-screen .thanks-card h3 {
  color: var(--thanks-navy) !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  margin: 0 0 9px !important;
}

/* Card descriptions */

.hapus-assessment-landing .hapus-complete-screen .thanks-card p {
  color: var(--thanks-muted) !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;

  margin: 0 !important;
}

/* =========================================================
   5. CARD ICONS
========================================================= */

.hapus-assessment-landing .hapus-complete-screen .thanks-card .icon-tile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 58px !important;

  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;

  margin: 0 0 20px !important;
  padding: 0 !important;

  color: #ff6500 !important;
  background: #fff0e6 !important;

  border-radius: 16px !important;
}

.hapus-assessment-landing .hapus-complete-screen .thanks-card .icon-tile i {
  color: inherit !important;
  font-size: 27px !important;
  line-height: 1 !important;
}

/* First card - Orange */

.hapus-assessment-landing .hapus-complete-screen .row>.col-md-4:nth-child(1) .icon-tile {
  color: #ff6500 !important;
  background: #fff0e6 !important;
}

/* Second card - Purple */

.hapus-assessment-landing .hapus-complete-screen .row>.col-md-4:nth-child(2) .icon-tile {
  color: #7045e8 !important;
  background: #f2edff !important;
}

/* Third card - Green */

.hapus-assessment-landing .hapus-complete-screen .row>.col-md-4:nth-child(3) .icon-tile {
  color: #16a34a !important;
  background: #e7f7ed !important;
}

/* =========================================================
   6. ACTION BUTTONS
========================================================= */

.hapus-assessment-landing .hapus-complete-screen .thanks-actions {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 16px !important;

  width: 100% !important;
  margin: 30px auto 0 !important;
  padding: 0 !important;
}

.hapus-assessment-landing .hapus-complete-screen .thanks-actions .button,
.hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 52px !important;
  min-width: 220px !important;

  padding: 13px 26px !important;
  margin: 0 !important;

  border-radius: 9px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  text-align: center !important;
  text-decoration: none !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Restart assessment - Outline */

.hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn-secondary {
  --bs-btn-bg: #ffffff !important;
  --bs-btn-color: #ff6500 !important;
  --bs-btn-border-color: #ff6500 !important;

  color: #ff6500 !important;
  background: #ffffff !important;
  border: 1px solid #ff6500 !important;
}

.hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn-secondary:hover {
  color: #ffffff !important;
  background: #ff6500 !important;
  border-color: #ff6500 !important;
}

/* Consultation button - Orange */

.hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn-orange {
  color: #ffffff !important;
  background: #ff6500 !important;
  border: 1px solid #ff6500 !important;
}

.hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn-orange:hover {
  color: #ffffff !important;
  background: #e65a00 !important;
  border-color: #e65a00 !important;
}

/* Disabled state */

.hapus-assessment-landing .hapus-complete-screen .thanks-actions .button:disabled {
  opacity: 0.8 !important;
  cursor: wait !important;
}

/* =========================================================
   7. DRUPAL AJAX LOADER
========================================================= */

.hapus-assessment-landing .hapus-complete-screen .ajax-progress {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-height: 36px !important;

  padding: 8px 14px !important;
  margin: 0 !important;

  background: #fff5ed !important;
  border: 1px solid #ffdcc5 !important;
  border-radius: 50px !important;

  color: #cc5100 !important;
  font-size: 13px !important;
  font-weight: 600 !important;

  pointer-events: none !important;
}

.hapus-assessment-landing .hapus-complete-screen .ajax-progress .throbber,
.hapus-assessment-landing .hapus-complete-screen .ajax-progress .spinner-border {
  width: 17px !important;
  height: 17px !important;

  border: 2px solid rgba(255, 101, 0, 0.2) !important;
  border-top-color: #ff6500 !important;
  border-radius: 50% !important;

  background: none !important;

  animation: hapusThanksSpinner 0.75s linear infinite !important;
}

@keyframes hapusThanksSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   8. TABLET
========================================================= */

@media (max-width: 991.98px) {
  .hapus-assessment-landing .hapus-complete-screen {
    padding: 32px 0 48px !important;
  }

  .hapus-assessment-landing .hapus-complete-screen .thanks-card {
    padding: 22px !important;
  }
}

/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .hapus-assessment-landing .hapus-complete-screen {
    padding: 26px 0 42px !important;
  }

  .hapus-assessment-landing .hapus-complete-screen .thanks-image img {
    width: min(300px, 100%) !important;
  }

  .hapus-assessment-landing .hapus-complete-screen .thanks-card {
    min-height: 0 !important;
    padding: 20px !important;
  }

  .hapus-assessment-landing .hapus-complete-screen .thanks-actions {
    gap: 12px !important;
  }

  .hapus-assessment-landing .hapus-complete-screen .hapus-complete-heading {

    font-size: 32px !important;
  }

  /* =========================================================
   10. SMALL MOBILE - 320px+
========================================================= */

  @media (max-width: 575.98px) {
    .hapus-assessment-landing .hapus-complete-screen {
      padding: 22px 0 35px !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .hapus-complete-heading {
      font-size: clamp(2rem, 9vw, 2.8rem) !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .thanks-image img {
      width: min(250px, 100%) !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .thanks-card {
      padding: 18px !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .thanks-actions {
      flex-direction: column !important;
      align-items: stretch !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .thanks-actions .button,
    .hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn {
      width: 100% !important;
      min-width: 0 !important;
    }
  }

  /* =========================================================
   11. ACCESSIBILITY
========================================================= */

  @media (prefers-reduced-motion: reduce) {
    .hapus-assessment-landing .hapus-complete-screen .thanks-image img {
      animation: none !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .thanks-card,
    .hapus-assessment-landing .hapus-complete-screen .thanks-actions .button,
    .hapus-assessment-landing .hapus-complete-screen .thanks-actions .btn {
      transition: none !important;
    }

    .hapus-assessment-landing .hapus-complete-screen .ajax-progress .throbber,
    .hapus-assessment-landing .hapus-complete-screen .ajax-progress .spinner-border {
      animation: none !important;
    }
  }