/* =========================================================
   HAPUS INFOTECH LEAD MAGNET
   DRUPAL FLOW INTEGRATION
   Bootstrap 5 / Drupal Form API
========================================================= */

.hapus-assessment-landing {
  --hapus-navy: #001337;
  --hapus-orange: #ff6500;
  --hapus-green: #16a34a;
  --hapus-line: #dce5f3;
}

/* =========================================================
   1. RESULTS AND REPORT SPACING
========================================================= */

.hapus-assessment-landing .hapus-results-screen .results-hero,
.hapus-assessment-landing .hapus-report-screen .report-top {
  padding-top: 30px;
}

/* =========================================================
   2. DRUPAL RADIO ANSWER LAYOUT
   IMPORTANT: Target container only
========================================================= */

.hapus-assessment-landing .question-panel .form-radios {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;

  gap: 16px !important;

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

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

/* Two equal-width answer cards */

.hapus-assessment-landing .question-panel .form-radios>.form-check {
  position: relative !important;

  flex: 0 0 calc(50% - 8px) !important;

  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Drupal form-item spacing */

.hapus-assessment-landing .question-panel .form-radios>.form-item {
  margin: 0 !important;
}

/* Preserve question.css answer-card styling */

.hapus-assessment-landing .question-panel .form-radios>.form-check>label.option {
  width: 100% !important;
  max-width: none !important;
}

/* =========================================================
   3. PREVENT GRID STYLES ON RADIO INPUTS
========================================================= */

.hapus-assessment-landing .question-panel .form-radios input.hapus-quiz-answers[type="radio"] {
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: initial !important;
}

/* =========================================================
   4. QUESTION NAVIGATION ACTIONS
========================================================= */

.hapus-assessment-landing .question-panel .form-actions {
  position: relative;

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

  gap: 16px !important;

  min-height: 54px;

  margin-top: 24px !important;
  padding-top: 20px !important;

  border-top: 1px solid #e5eaf2 !important;
}

/* Primary action */

.hapus-assessment-landing .question-panel .form-actions .button:last-child {
  background: var(--hapus-orange) !important;
  color: #ffffff !important;
  border-color: var(--hapus-orange) !important;
}

.hapus-assessment-landing .question-panel .form-actions .button:last-child:hover {
  background: #e65a00 !important;
  border-color: #e65a00 !important;
}

/* =========================================================
   5. DRUPAL AJAX PROGRESS
========================================================= */

.hapus-assessment-landing .question-panel .form-actions .ajax-progress {
  position: absolute;
  right: 0;
  top: -30px;

  margin: 0;
  pointer-events: none;
}

.hapus-assessment-landing .question-panel .form-actions .ajax-progress .throbber {
  display: inline-block;
  vertical-align: middle;
}

/* =========================================================
   6. CLIENT DETAILS FORM
========================================================= */

.hapus-assessment-landing .lead-card .form-item {
  margin-bottom: 16px;
}

.hapus-assessment-landing .lead-card input,
.hapus-assessment-landing .lead-card select {
  max-width: 100%;
}

.hapus-assessment-landing .lead-card .form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hapus-assessment-landing .lead-card .form-actions .button:last-child {
  background: var(--hapus-orange) !important;
  border-color: var(--hapus-orange) !important;
  color: #ffffff !important;
}

/* =========================================================
   7. WORKFLOW VISIBILITY
========================================================= */

/* Hide old static score panel */

.hapus-assessment-landing .assessment-step-two {
  display: none !important;
}

/* Hide marketing CTA during Questions step */

.hapus-assessment-landing:has(.premium-step:nth-child(2).is-current) .assessment-final-cta {
  display: none !important;
}

/* =========================================================
   8. RESULTS BREAKDOWN
========================================================= */

.hapus-assessment-landing .hapus-score-breakdown {
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;

  scrollbar-width: thin;
  scrollbar-color: #c7d7ee transparent;
}

.hapus-assessment-landing .hapus-score-breakdown::-webkit-scrollbar {
  width: 5px;
}

.hapus-assessment-landing .hapus-score-breakdown::-webkit-scrollbar-thumb {
  background: #c7d7ee;
  border-radius: 10px;
}

/* Individual result rows */

.hapus-assessment-landing .hapus-score-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 1.5fr) 48px;

  align-items: center;
  gap: 14px;

  margin: 0 0 16px;
}

/* Category label */

.hapus-assessment-landing .hapus-score-label {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Progress track */

.hapus-assessment-landing .hapus-score-row .progress {
  display: block;

  width: 100%;
  min-width: 0;

  height: 10px;
  min-height: 10px;

  margin: 0;
  padding: 0;

  background: #e9f1ff;
  border-radius: 20px;
  overflow: hidden;
}

/* Progress fill */

.hapus-assessment-landing .hapus-score-row .progress-bar {
  display: block;

  height: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  background: var(--hapus-orange) !important;
  border-radius: 20px;

  transition: width 0.35s ease;
}

/* Score value */

.hapus-assessment-landing .hapus-score-value {
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}

/* =========================================================
   9. RESULTS TABLE
========================================================= */

.hapus-assessment-landing .results-bottom .table {
  width: 100%;
}

/* =========================================================
   10. REPORT SCREEN
========================================================= */

.hapus-assessment-landing .hapus-report-screen .report-showcase {
  margin-bottom: 30px;
}

.hapus-assessment-landing .hapus-report-screen .report-image {
  max-width: 100%;
  height: auto;
}

/* Report buttons */

.hapus-assessment-landing .hapus-report-screen .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 12px;
  margin-top: 24px;
}

/* Default report button */

.hapus-assessment-landing .hapus-report-screen .form-actions .button {
  min-height: 44px;
  padding: 11px 22px;
  margin: 0;

  border-radius: 8px;

  font-size: 14px;
  font-weight: 600;

  transition: background-color 0.2s ease;
}

/* Primary report button */

.hapus-assessment-landing .hapus-report-screen .form-actions .button--primary {
  background: var(--hapus-orange) !important;
  border: 1px solid var(--hapus-orange) !important;
  color: #ffffff !important;
}

.hapus-assessment-landing .hapus-report-screen .form-actions .button--primary:hover {
  background: #e65a00 !important;
  border-color: #e65a00 !important;
}

/* =========================================================
   11. TABLET AND DESKTOP
========================================================= */

@media (min-width: 768px) {
  .hapus-assessment-landing .question-panel .form-radios>.form-check {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}

/* =========================================================
   12. MOBILE - BELOW 768px
========================================================= */

@media (max-width: 767.98px) {
  /* One answer per row */

  .hapus-assessment-landing .question-panel .form-radios {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .hapus-assessment-landing .question-panel .form-radios>.form-check {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Client details layout */

  .hapus-assessment-landing .lead-layout>.col-lg-3 {
    margin-bottom: 12px;
  }

  /* Results breakdown */

  .hapus-assessment-landing .hapus-score-breakdown {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .hapus-assessment-landing .hapus-score-row {
    grid-template-columns:
      minmax(0, 1fr) 48px;

    gap: 7px 12px;
    margin-bottom: 18px;
  }

  .hapus-assessment-landing .hapus-score-label {
    grid-column: 1;
  }

  .hapus-assessment-landing .hapus-score-value {
    grid-column: 2;
    grid-row: 1;
  }

  .hapus-assessment-landing .hapus-score-row .progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* =========================================================
   13. SMALL MOBILE - BELOW 576px
========================================================= */

@media (max-width: 575.98px) {
  .hapus-assessment-landing .hapus-report-screen .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hapus-assessment-landing .hapus-report-screen .form-actions .button {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   14. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hapus-assessment-landing .hapus-score-row .progress-bar,
  .hapus-assessment-landing .hapus-report-screen .form-actions .button {
    transition: none;
  }
}


/* =========================================================
   HAPUS LEAD MAGNET
   PREMIUM DRUPAL AJAX LOADING INDICATOR
========================================================= */

/* Navigation container */

.hapus-assessment-landing .question-panel .form-actions {
  position: relative !important;
}

/* Loading indicator container */

.hapus-assessment-landing .question-panel .form-actions .ajax-progress {
  position: absolute !important;
  top: -44px !important;
  right: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 10px !important;

  min-height: 36px !important;
  width: max-content !important;
  max-width: 100% !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;
  line-height: 1.2 !important;

  box-shadow: 0 4px 14px rgba(255, 101, 0, 0.08) !important;

  pointer-events: none !important;
  z-index: 10 !important;

  animation: hapusLoaderAppear 0.25s ease-out both !important;
}

/* =========================================
   Animated Orange Spinner
========================================= */

.hapus-assessment-landing .question-panel .form-actions .ajax-progress .throbber {
  display: inline-block !important;

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

  margin: 0 !important;
  padding: 0 !important;

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

  background: none !important;
  background-image: none !important;

  vertical-align: middle !important;
  box-sizing: border-box !important;

  animation: hapusSpinnerRotate 0.75s linear infinite !important;
}

/* Drupal Bootstrap 5 spinner variant */

.hapus-assessment-landing .question-panel .form-actions .ajax-progress .spinner-border {
  width: 17px !important;
  height: 17px !important;

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

  color: #ff6500 !important;
}

/* Loading text */

.hapus-assessment-landing .question-panel .form-actions .ajax-progress .message {
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

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

  white-space: nowrap !important;
}

/* =========================================
   Animations
========================================= */

@keyframes hapusSpinnerRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes hapusLoaderAppear {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

/* =========================================
   Tablet and Mobile
========================================= */

@media (max-width: 767.98px) {
  .hapus-assessment-landing .question-panel .form-actions .ajax-progress {
    top: -42px !important;
    right: 0 !important;

    padding: 7px 12px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }

  .hapus-assessment-landing .question-panel .form-actions .ajax-progress .throbber {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
  }
}

/* =========================================
   Reduced Motion Accessibility
========================================= */

@media (prefers-reduced-motion: reduce) {
  .hapus-assessment-landing .question-panel .form-actions .ajax-progress {
    animation: none !important;
  }

  .hapus-assessment-landing .question-panel .form-actions .ajax-progress .throbber {
    animation: none !important;
  }
}

/* =========================================================
   HAPUS LEAD MAGNET - TYPOGRAPHY AND TEXT COLOURS ONLY
   Source: supplied Hapus Bootstrap 5 typography prompt.
   Loaded LAST in flow_design; no layout/behaviour changes.
   Main colours: #071333 / #26345d / #34405c; blue #0d6efd.
   Keep existing Lead Magnet orange #ff6500 for established accents.
========================================================= */

:is(.hapus-assessment-landing, .hapus-assessment-wizard) {
  --lm-type-ink: #071333;
  --lm-type-secondary: #26345d;
  --lm-type-muted: #34405c;
  --lm-type-blue: #0d6efd;
  --lm-type-orange: #ff6500;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  color: var(--lm-type-ink);
}

/* Stepper: UI heading and labels. Preserve progress sizing/layout. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-title {
  color: #071333 !important;
  font-size: 26px !important;
}

:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-eyebrow {
  color: #ff6500 !important;
  font-size: 16px !important;
}

:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-count,
:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-step-name {
  font-size: 14px !important;
}

/* Shared normal-inner page titles: 44 / 32 / 22 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) {
  font-size: 44px !important;
  color: #071333 !important;
}

:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) .text-blue {
  color: #ff6500 !important;
}

/* Normal-inner kickers: 16 / 14 / 12 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.results-hero .eyebrow, .report-top .eyebrow, .priority-card .eyebrow) {
  font-size: 16px !important;
  color: #ff6500 !important;
}

/* Intro copy: 18 / 15 / 16 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-intro, .results-hero > .row p.fs-5, .report-top p.fs-5, .hapus-complete-screen > p.fs-5) {
  font-size: 18px !important;
  color: #26345d !important;
}

/* Normal inner card headings: 22 / 17 (dense) / 18 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.tip-panel h2, .lead-card h2, .lead-side h2, .lead-side h3, .score-card h3, .results-bottom h3, .priority-card h3, .report-features-card h3, .report-download-intro h3, .report-side-card h3, .thanks-card h3) {
  font-size: 22px !important;
  color: #071333 !important;
}

/* Normal card paragraphs: 16 / 14 / 14 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .tip-panel, .lead-card, .lead-side, .score-card, .results-bottom .soft-card, .priority-card, .report-feature, .report-download-intro, .thanks-card) p:not(.form-item--error-message) {
  font-size: 16px !important;
  color: #34405c !important;
}

/* Form prompts, options, labels: 16 / 14 / 14. No changes to input sizing. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel label.option, .lead-card label:not(.form-check-label)) {
  font-size: 16px !important;
  color: #071333 !important;
}

/* Small reports/list labels: 15 / 14 / 14 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.report-feature strong, .hapus-score-label, .report-answers summary, .results-breakdown-scroll .hapus-score-label) {
  font-size: 15px !important;
  color: #071333 !important;
}

/* Buttons: 16 / 14 / 14. Preserve all button colours and states. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .lead-card, .hapus-results-screen, .hapus-report-screen, .hapus-complete-screen) :is(.btn, .button, input[type="submit"]) {
  font-size: 16px !important;
}

/* Dense supplementary content remains legible. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) .hapus-report-screen :is(.accordion-body .table, .report-answers .table) {
  font-size: 15px !important;
  color: #26345d !important;
}

@media (max-width: 1399.98px) {
  :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-eyebrow {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) {
    font-size: 32px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.results-hero .eyebrow, .report-top .eyebrow, .priority-card .eyebrow) {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-intro, .results-hero > .row p.fs-5, .report-top p.fs-5, .hapus-complete-screen > p.fs-5) {
    font-size: 15px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel h2, .tip-panel h2, .lead-card h2, .lead-side h2, .lead-side h3, .score-card h3, .results-bottom h3, .priority-card h3, .report-features-card h3, .report-download-intro h3, .report-side-card h3, .thanks-card h3) {
    font-size: 17px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .tip-panel, .lead-card, .lead-side, .score-card, .results-bottom .soft-card, .priority-card, .report-feature, .report-download-intro, .thanks-card) p:not(.form-item--error-message) {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel label.option, .lead-card label:not(.form-check-label), .report-feature strong, .hapus-score-label, .report-answers summary) {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .lead-card, .hapus-results-screen, .hapus-report-screen, .hapus-complete-screen) :is(.btn, .button, input[type="submit"]) {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) .hapus-report-screen :is(.accordion-body .table, .report-answers .table) {
    font-size: 14px !important;
  }
}

@media (max-width: 767.98px) {
  :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-eyebrow {
    font-size: 12px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-title {
    font-size: 18px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) {
    font-size: 22px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.results-hero .eyebrow, .report-top .eyebrow, .priority-card .eyebrow) {
    font-size: 12px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-intro, .results-hero > .row p.fs-5, .report-top p.fs-5, .hapus-complete-screen > p.fs-5) {
    font-size: 16px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel h2, .tip-panel h2, .lead-card h2, .lead-side h2, .lead-side h3, .score-card h3, .results-bottom h3, .priority-card h3, .report-features-card h3, .report-download-intro h3, .report-side-card h3, .thanks-card h3) {
    font-size: 18px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .tip-panel, .lead-card, .lead-side, .score-card, .results-bottom .soft-card, .priority-card, .report-feature, .report-download-intro, .thanks-card) p:not(.form-item--error-message) {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel label.option, .lead-card label:not(.form-check-label), .report-feature strong, .hapus-score-label, .report-answers summary) {
    font-size: 14px !important;
  }

  :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-step-name {
    font-size: 10px !important;
  }
}