/* ═══════════════════════════════════════════════════════════════
   HDSR SHARED ENROLLMENT POPUP
   Design Manager path: /Harvard/HDSI/Shared/popup.css

   Single source of styling for the #pop-up enrollment popup across
   all course pages (landing + outline). Rules ported from the AGAI
   landing stylesheet (POP UP section + price-row/popup-price/
   popup-save), with three deliberate changes:

     1. Every rule is scoped under #pop-up — this file can never
        leak into a host page's typography or layout.
     2. Page-tunable values are CSS variables with the AGAI values
        as fallbacks, so a page with no overrides renders exact
        AGAI parity.
     3. The CTA is styled for BOTH <button class="red"> (AGAI
        markup) and <a class="brochure red"> (Build Your Agent /
        leadership markup) — the source sheet only styled <button>.

   PER-PAGE OVERRIDES — set on the host page's :root (all optional):
     --popup-accent          CTA / save-badge / progress fill  (#a22e37)
     --popup-border          card border colour                (#edd0d7)
     --popup-title-font      title face   (GeorgiaBold → Georgia serif)
     --popup-body-font       body face    (Arial stack)
     --popup-track           progress-bar track colour         (#f6f7f7)
     --popup-mobile-bottom   bottom offset of the mobile sheet (0px)
                             e.g. Build Your Agent sets 80px to
                             clear its .mobile-cta-bar
     --popup-z               stacking level                    (2000)

   DO NOT add page-specific rules here — override on the page.
   Popup copy resolves from the Enrollment Stage Wording table;
   values from Main Content. Fix content there, never here.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Fonts the popup title depends on (self-contained so a page
        that doesn't load the AGAI sheet still renders the title
        correctly). @font-face is name-registration only — it costs
        nothing and clashes with nothing if the AGAI sheet also
        declares it. ---- */
@font-face {
  font-family: "GeorgiaBold";
  src: url("https://146624063.fs1.hubspotusercontent-eu1.net/hubfs/146624063/HDSI/Fonts/georgiab.ttf")
    format("truetype");
}

/* ------------------------------- CARD ------------------------------- */
#pop-up {
  background: #fff;
  bottom: 32px;
  right: 32px;
  padding: 32px 24px;
  position: fixed;
  z-index: var(--popup-z, 2000);
  width: 500px;
  border: 4px solid var(--popup-border, #edd0d7);
  border-radius: 10px;
  opacity: 0;
  visibility: hidden; /* Completely hide the pop-up */
  pointer-events: none; /* Allow clicks to pass through */
  transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s; /* Delay visibility change */
  box-shadow: 3px 6px 15px 0px rgba(0, 0, 0, 0.09), 12px 24px 27px 0px rgba(0, 0, 0, 0.08),
    27px 55px 37px 0px rgba(0, 0, 0, 0.04), 49px 98px 44px 0px rgba(0, 0, 0, 0.01),
    76px 153px 48px 0px rgba(0, 0, 0, 0);
  font-family: var(--popup-body-font, Arial, Helvetica, sans-serif);
  color: #1e1e1e;
}

#pop-up.show {
  opacity: 1;
  visibility: visible; /* Make the pop-up visible */
  pointer-events: auto; /* Enable interactions */
  transition: opacity 0.2s ease-in-out; /* Remove delay for visibility */
}

/* ---- Base text inside the popup: explicit, so the popup does not
        depend on any host page's global h*/p rules. Sizes match how
        the popup renders on the AGAI page (its globals). ---- */
#pop-up p,
#pop-up li,
#pop-up h3 {
  font-family: inherit;
  margin: 0;
}

#pop-up h3.title {
  font-family: var(--popup-title-font, "GeorgiaBold", Georgia, "Times New Roman", serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 130%;
}

#pop-up p.small {
  font-size: 14px;
  font-style: normal;
  line-height: 150%;
}

#pop-up p.medium {
  font-size: 15px;
  line-height: 1.45;
}

#pop-up .grey {
  color: #7e8e9a;
}

#pop-up ul {
  margin: 0px;
}

#pop-up li {
  font-size: 16px;
  font-style: normal;
  line-height: 24px; /* 150% */
  letter-spacing: 0.32px;
  margin-bottom: 8px;
  text-align: left;
}

#pop-up li:last-child {
  margin-bottom: 0px;
}

/* ------------------------------- LAYOUT ------------------------------- */
#pop-up .pop-up-box {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}

#pop-up .pop-up-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  align-items: flex-start;
  text-align: left;
}

#pop-up .pop-up-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: column;
}

#pop-up .pop-up-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Close icon */
#pop-up .pop-up-box img {
  position: absolute;
  top: -20px;
  right: -10px;
  height: 16px;
  width: 16px;
}

#pop-up .pop-up-box img:hover {
  cursor: pointer;
}

#pop-up .pop-up-right {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: flex-start;
  flex-direction: column;
}

/* ------------------------------- CTA ------------------------------- */
/* <button class="red"> — AGAI markup */
#pop-up button.red {
  padding: 14px 32px;
  border-radius: 5px;
  background: var(--popup-accent, #a22e37);
  cursor: pointer;
  outline: none;
  border: none;
  font-size: 16px;
  color: #fff;
}

#pop-up .pop-up-right button {
  width: 100%;
}

/* <a class="brochure red"> — Build Your Agent / leadership markup.
   Anchor needs the block/width/centering a button gets for free. */
#pop-up a.brochure.red {
  display: block;
  width: 100%;
  padding: 14px 32px;
  border-radius: 5px;
  background: var(--popup-accent, #a22e37);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

#pop-up button.red:hover,
#pop-up a.brochure.red:hover,
#pop-up a.brochure.red:focus-visible {
  background: #fbd1d7;
  color: var(--popup-accent, #a22e37);
}

/* ------------------------------- PROGRESS BAR ------------------------------- */
#pop-up .progress-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  width: 100%;
}

#pop-up .progress-container {
  width: 100%;
  background-color: var(--popup-track, #f6f7f7);
  border-radius: 25px;
  overflow: hidden;
}

#pop-up .progress-bar {
  width: 63%; /* templates set the live width inline — this is the no-inline fallback */
  height: 10px;
  background: var(--popup-accent, #a22e37);
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 25px 25px;
}

/* ------------------------------- PRICE ROW ------------------------------- */
/* Scoped under #pop-up (unscoped in the source AGAI sheet). */
#pop-up .price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 12px 0;
}

#pop-up .popup-price {
  font-family: var(--popup-title-font, Georgia, "Times New Roman", serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #111;
}

#pop-up .popup-save {
  background: var(--popup-accent, #a22e37);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--popup-body-font, Arial, Helvetica, sans-serif);
}

/* ------------------------------- MOBILE (bottom sheet) ------------------------------- */
@media (max-width: 768px) {
  #pop-up {
    width: 100%;
    border-radius: 20px 20px 0px 0px;
    right: 0px;
    bottom: var(--popup-mobile-bottom, 0px);
    padding: 42px 24px;
  }

  #pop-up .pop-up-box img {
    top: -25px;
    right: -0px;
  }

  #pop-up .pop-up-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 24px;
  }

  #pop-up .pop-up-left {
    text-align: center;
    align-items: center;
  }

  #pop-up .pop-up-title {
    justify-content: center;
  }

  #pop-up .progress-box {
    text-align: center;
    align-items: center;
  }

  #pop-up h3.title {
    font-size: 24px;
  }

  #pop-up .popup-price {
    font-size: 36px;
  }
}

/* ------------------------------- ACCESSIBILITY ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #pop-up {
    transition: none;
  }
}