/*
 * "Is JAKAFI XR Right for Me" / possible-candidate checklist component.
 * Figma: 12474790 - JAK-DTC-MPN-PV-Web-Update (node 2581:27463 / 2581:27878).
 */

.is-jakafi-xr-right-for-me.clearfix {
  font-family: "Barlow-Regular", Arial, sans-serif;
}

.is-jakafi-xr-right-for-me .section-head-txt {
  margin: 0 0 28px;
  color: #492F92;
  font-family: "Barlow-Regular", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.3;
}

.is-jakafi-xr-right-for-me p {
  margin: 0 0 16px;
  color: #444;
  font-family: "Barlow-Regular", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
}

.is-jakafi-xr-right-for-me p:last-child {
  margin-bottom: 40px;
}

.is-jakafi-xr-right-for-me p.font-bold {
  font-family: "Barlow-Bold", Arial, sans-serif;
  font-weight: 700;
}

.is-jakafi-xr-right-for-me p .purple-txt {
  color: #492F92;
  font-family: "Barlow-Bold", Arial, sans-serif;
  font-weight: 700;
}

.is-jakafi-xr-right-for-me hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid #ccc;
}

.is-jakafi-xr-right-for-me a.link-txt {
  color: #492F92;
  font-family: "Barlow-Bold", Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.is-jakafi-xr-right-for-me a.link-txt:hover,
.is-jakafi-xr-right-for-me a.link-txt:focus {
  text-decoration: underline;
}

.is-jakafi-xr-right-for-me a.link-txt .fa-chevron-right {
  margin-left: 4px;
  font-size: 12px;
  color: #492F92;
}

/* Checklist */
.is-jakafi-xr-right-for-me ul.custom-checkbox.healthcare-professional-checkbox {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.is-jakafi-xr-right-for-me ul.custom-checkbox.healthcare-professional-checkbox li {
  margin-bottom: 12px;
}

.is-jakafi-xr-right-for-me ul.custom-checkbox.healthcare-professional-checkbox li:last-child {
  margin-bottom: 0;
}

.is-jakafi-xr-right-for-me label.label-custom {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding-left: 35px;
  color: #333;
  font-family: "Barlow-Regular", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
}

.is-jakafi-xr-right-for-me label.label-custom input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.is-jakafi-xr-right-for-me label.label-custom .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #92278F;
  border-radius: 50%;
  background: #fff;
}

.is-jakafi-xr-right-for-me label.label-custom input[type="checkbox"]:checked ~ .checkmark {
  background: #92278F;
  box-shadow: inset 0 0 0 3px #fff;
}

.is-jakafi-xr-right-for-me label.label-custom input[type="checkbox"]:focus-visible ~ .checkmark {
  outline: 2px solid #492F92;
  outline-offset: 2px;
}

/* Pill buttons (Download Checklist / Print Checklist) */
.is-jakafi-xr-right-for-me a.btn-link.btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid #492F92;
  border-radius: 38px;
  background: #492F92;
  color: #fff;
  font-family: "Barlow-Bold", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}

.is-jakafi-xr-right-for-me a.btn-link.btn:hover,
.is-jakafi-xr-right-for-me a.btn-link.btn:focus {
  background: #3a2473;
  border-color: #3a2473;
  color: #fff;
}

.is-jakafi-xr-right-for-me a.btn-link.btn .fa-chevron-right {
  /* font-size: 12px;
  color: #fff; */
  display: none;
}

.is-jakafi-xr-right-for-me a.btn-link.btn.btn-margin-top {
  margin-top: 12px;
}

/* Sidebar patient image */
.is-jakafi-xr-right-for-me .img_Grandpa_Jim {
  display: flex;
  justify-content: center;
}

.is-jakafi-xr-right-for-me .img_Grandpa_Jim drupal-media,
.is-jakafi-xr-right-for-me .img_Grandpa_Jim img {
  display: block;
  width: 100%;
  max-width: 331px;
  border-top-right-radius: 30px;
}

/**
 * Scrollable styling for the video transcript content.
 */
.nick-story-page .ns-transcript__content {
  max-height: 260px;
  overflow-y: auto;
  padding: 20px;
  color: #ffffff;
  font-family: var(--font-barlow);
}

.nick-story-page .ns-transcript__content::-webkit-scrollbar {
  width: 6px;
}

.nick-story-page .ns-transcript__content::-webkit-scrollbar-track {
  background: rgb(205 255 179 / 15%);
}

.nick-story-page .ns-transcript__content::-webkit-scrollbar-thumb {
  background-color: #cdffb3;
  border-radius: 3px;
}

@media (max-width: 991px) {
  /* .is-jakafi-xr-right-for-me .section-head-txt {
    font-size: 18px;
  } */

  .is-jakafi-xr-right-for-me label.label-custom {
    padding-left: 32px;
  }
}

@media (max-width: 767px) {
  .is-jakafi-xr-right-for-me a.btn-link.btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
  }
}

/* Print: browsers drop background/border colors by default ("economy" color
   adjust), which hides the checkmark fill that represents the checked state. */
.is-jakafi-xr-right-for-me label.label-custom .checkmark {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

/* @page cannot be scoped to a selector. Paper size is left to the user's
   print settings (Letter/A4); the margin keeps content clear of the
   non-printable edge area of physical printers. */
@page {
  margin: 0.5in;
}
.wte-highlight__text a::after {
    content: '';
    display: inline-block;
    width: 6.929px;
    height: 10.795px;
    margin-left: 6px;
    background-image: url('../images/icons/cta-arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.is-jakafi-xr-right-for-me a::after {
    content: '';
    display: inline-block;
    width: 6.929px;
    height: 8.795px;
    background-image: url('../images/icons/cta-arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 4px;
}
.jakafi-for-me-page .jfm-how__image img {
  width: 100%;
}
/* Print: prints the whole page as on screen. Fixed/sticky UI (ISI tray,
   register widget, header) repeats on every printed page and overlaps
   content, and isi-tray.js sizes the ISI placeholder at the screen width
   (extra blank pages on phones), so those are put back into normal flow.
   !important is required to beat isi-tray.js inline styles. */
@media print {
  html,
  body.is-jakafi-right-for-me-page {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.is-jakafi-right-for-me-page {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.is-jakafi-right-for-me-page,
  .is-jakafi-right-for-me-page .dialog-off-canvas-main-canvas {
    height: auto !important;
    overflow: visible !important;
  }

  /* Undo bootstrap_barrio's print.css (fixed 640px body, hidden nav/footer). */
  body.is-jakafi-right-for-me-page {
    width: auto !important;
  }

  .is-jakafi-right-for-me-page .navigation {
    display: block !important;
  }

  .is-jakafi-right-for-me-page .site-footer {
    display: flex !important;
  }

  .is-jakafi-right-for-me-page .skip-link,
  .is-jakafi-right-for-me-page .register-now-float,
  .is-jakafi-right-for-me-page #isi,
  .is-jakafi-right-for-me-page .isi-placeholder,
  .is-jakafi-right-for-me-page .isi-tray__toggle,
  .is-jakafi-right-for-me-page .isi-accordion__icon,
  .is-jakafi-right-for-me-page button.isi-accordion__title,
  .is-jakafi-right-for-me-page .modal,
  .is-jakafi-right-for-me-page .modal-backdrop {
    display: none !important;
  }

  .is-jakafi-right-for-me-page .site-header {
    position: relative !important;
  }

  .is-jakafi-right-for-me-page .site-main img {
    max-width: 100%;
  }

  .is-jakafi-right-for-me-page h1,
  .is-jakafi-right-for-me-page h2,
  .is-jakafi-right-for-me-page h3 {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .is-jakafi-right-for-me-page p {
    orphans: 3;
    widows: 3;
  }

  .is-jakafi-right-for-me-page .feature-card,
  .is-jakafi-right-for-me-page .patient-taking-jakafi,
  .is-jakafi-right-for-me-page .cta-callout {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Paper is narrower than the 1180px breakpoint; keep the desktop 2-up
     cards instead of two full-width stacked cards with oversized photos. */
  .is-jakafi-right-for-me-page .cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .is-jakafi-right-for-me-page .feature-card__image {
    height: 200px !important;
    object-fit: cover;
  }

  .is-jakafi-xr-right-for-me ul.custom-checkbox.healthcare-professional-checkbox li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .is-jakafi-xr-right-for-me label.label-custom {
    min-height: 20px;
  }

  .is-jakafi-xr-right-for-me label.label-custom input[type="checkbox"]:checked ~ .checkmark {
    background: #92278F !important;
    box-shadow: inset 0 0 0 3px #fff !important;
  }

  .is-jakafi-xr-right-for-me label.label-custom .checkmark {
    border-color: #92278F !important;
  }

  /* ISI: render in document flow, fully expanded, in the mobile reading
     order (What is → Safety → rest of Safety). */
  .is-jakafi-right-for-me-page .isi-tray,
  .is-jakafi-right-for-me-page .isi-tray.is-preview,
  .is-jakafi-right-for-me-page .isi-tray.is-retracted,
  .is-jakafi-right-for-me-page .isi-tray.is-expanded,
  .is-jakafi-right-for-me-page .isi-tray.is-embedded {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 16pt 0 0 !important;
    padding: 12pt 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid #ccc !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .is-jakafi-right-for-me-page .isi-tray::before,
  .is-jakafi-right-for-me-page .isi-tray::after,
  .is-jakafi-right-for-me-page .isi-accordion::after,
  .is-jakafi-right-for-me-page .isi-accordion__title::after {
    content: none !important;
    display: none !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-container,
  .is-jakafi-right-for-me-page .isi-tray .isi-tray__inner,
  .is-jakafi-right-for-me-page .isi-tray .container {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-tray__content {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-accordion,
  .is-jakafi-right-for-me-page .isi-tray .isi-safety-more {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-accordion--what {
    order: 1 !important;
    margin-bottom: 10pt !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-accordion--safety {
    order: 2 !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-safety-more {
    order: 3 !important;
  }

  .is-jakafi-right-for-me-page .isi-tray div.isi-accordion__title {
    display: block !important;
    margin: 0 0 6pt !important;
    padding: 0 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-accordion__content {
    display: block !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .is-jakafi-right-for-me-page .isi-tray .isi-accordion__content p,
  .is-jakafi-right-for-me-page .isi-tray .isi-accordion__content ul,
  .is-jakafi-right-for-me-page .isi-tray .isi-safety-more p,
  .is-jakafi-right-for-me-page .isi-tray .isi-safety-more ul {
    display: block !important;
  }

  .is-jakafi-right-for-me-page .isi-tray li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .is-jakafi-right-for-me-page .site-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}