/* Shared pop-up styles in The Pensions Report design (21.10.26).
   Linked from navbar.html, so every page that has the menu bar gets it.
   - .pr-modal on a Bootstrap .modal gives the standard CMP pop-up: logo header, teal top strip,
     off-white panel, square corners, no shadows.
   - Also restyles the shared bits that pop up over pages: info tooltips, chart info buttons,
     the Analysis tutorial tips, the "enter your fund values" notice and the cookie banner. */

:root {
  --pr-surface-100: #f6f4f0;
  --pr-surface-200: #ece7df;
  --pr-ink: #373839;
  --pr-ink-muted: #5f6162;
  --pr-teal: #056a6d;
  --pr-teal-bright: #0b7f82;
  --pr-coral: #fb785f;
  --pr-on-brand: #f6f4f0;
  --pr-line: #d8d2c8;
  --pr-font: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Standard pop-up ---------- */
.pr-modal .modal-content {
  background: var(--pr-surface-100); color: var(--pr-ink);
  border: 0; border-top: 8px solid var(--pr-teal); border-radius: 4px;
  box-shadow: none; overflow: hidden; font-family: var(--pr-font);
}
.pr-modal .pr-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--pr-line); flex-shrink: 0;
}
.pr-modal .pr-logo { display: inline-flex; align-items: flex-end; gap: 6px; }
.pr-modal .pr-wordmark {
  display: flex; flex-direction: column; font-size: 15px; line-height: 0.92; font-weight: 800;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--pr-ink);
}
.pr-modal .pr-wordmark .pr-my { color: var(--pr-teal); }
.pr-modal .btn-close { opacity: 0.75; }
.pr-modal .btn-close:hover { opacity: 1; }
.pr-modal .btn-close:disabled { opacity: 0.25; }
.pr-modal .pr-modal-body { padding: 28px; font-size: 17px; line-height: 27px; max-height: 75vh; overflow-y: auto; }
.pr-modal .pr-eyebrow {
  margin: 0 0 8px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pr-ink-muted);
}
.pr-modal .pr-title {
  margin: 0 0 18px; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--pr-ink);
}
.pr-modal .pr-modal-body p { margin: 0 0 14px; color: var(--pr-ink); }
.pr-modal .pr-modal-body p:last-child { margin-bottom: 0; }
.pr-modal .pr-muted { color: var(--pr-ink-muted) !important; }
.pr-modal a:not(.pr-btn):not(.pr-btn-outline) { color: var(--pr-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pr-modal a:not(.pr-btn):not(.pr-btn-outline):hover { color: var(--pr-ink); }
.pr-modal .pr-brand { font-weight: 800; }
.pr-modal .pr-brand .pr-my { color: var(--pr-teal); }

.pr-modal .pr-title .pr-my { color: var(--pr-teal); }
.pr-modal .alert { border-radius: 2px; font-size: 15px; }

/* Video player pop-up (videos page) */
.pr-modal .pr-video-title { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--pr-ink); }
.pr-modal .pr-video-body { max-height: none; }
.pr-modal .pr-video-body h6.pr-eyebrow { margin-bottom: 10px; }
.pr-modal .pr-video-summary { color: var(--pr-ink-muted); font-size: 16px; line-height: 25px; }
.pr-modal .ts-btn {
  background: transparent; color: var(--pr-teal); border: 1px solid var(--pr-line); border-radius: 2px;
  font-family: inherit; font-weight: 600; text-align: left;
}
.pr-modal .ts-btn:hover, .pr-modal .ts-btn:focus { background: #dcebea; border-color: var(--pr-teal); color: var(--pr-teal); box-shadow: none; }

/* Tick box row */
.pr-modal .pr-check {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 16px 18px;
  background: var(--pr-surface-200); border-radius: 4px; cursor: pointer;
}
.pr-modal .pr-check + .pr-check { margin-top: 10px; }
.pr-modal .pr-check .form-check-input {
  flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0; float: none;
  border: 1px solid #a9a399; border-radius: 2px; cursor: pointer;
}
.pr-modal .pr-check .form-check-input:checked { background-color: var(--pr-teal); border-color: var(--pr-teal); }
.pr-modal .pr-check .form-check-input:focus { box-shadow: 0 0 0 2px rgba(5, 106, 109, 0.35); border-color: var(--pr-teal); }
.pr-modal .pr-check span { font-size: 16px; line-height: 23px; font-weight: 500; color: var(--pr-ink); }

/* Footer and buttons */
.pr-modal .pr-modal-footer {
  padding: 18px 28px; border-top: 1px solid var(--pr-line);
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px;
}
.pr-modal .pr-modal-footer form { margin: 0; }
.pr-modal .pr-btn,
.pr-modal .pr-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  border: 2px solid var(--pr-teal); border-radius: 2px;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pr-modal .pr-btn { background: var(--pr-teal); color: var(--pr-on-brand); }
.pr-modal .pr-btn:hover { background: var(--pr-ink); border-color: var(--pr-ink); color: var(--pr-on-brand); }
.pr-modal .pr-btn-outline { background: transparent; color: var(--pr-ink); border-color: var(--pr-ink); }
.pr-modal .pr-btn-outline:hover { background: var(--pr-surface-200); color: var(--pr-ink); }
.pr-modal .pr-btn-coral { background: var(--pr-coral); border-color: var(--pr-coral); color: var(--pr-ink); font-size: 19px; }
.pr-modal .pr-btn-coral:hover { background: var(--pr-teal); border-color: var(--pr-teal); color: var(--pr-on-brand); }
.pr-modal .pr-btn:disabled,
.pr-modal .pr-btn[disabled] {
  background: var(--pr-surface-200); border-color: var(--pr-line); color: var(--pr-ink-muted); cursor: not-allowed; opacity: 1;
}
.pr-modal .pr-btn-block { width: 100%; }
.pr-modal .pr-btn:focus-visible,
.pr-modal .pr-btn-outline:focus-visible,
.pr-modal .btn-close:focus-visible,
.pr-modal a:focus-visible { outline: 2px solid var(--pr-teal); outline-offset: 2px; box-shadow: none; }

/* Progress bar (PDF export) */
.pr-modal .progress { height: 14px; background: var(--pr-surface-200); border-radius: 2px; }
.pr-modal .progress .progress-bar {
  background-color: var(--pr-teal) !important; color: var(--pr-on-brand);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500;
}
.pr-modal .progress .progress-bar.bg-danger { background-color: #b3261e !important; }
.pr-modal .pr-progress-stage { margin-top: 10px; font-size: 15px; color: var(--pr-ink-muted); }

@media (max-width: 575.98px) {
  .pr-modal .pr-modal-header, .pr-modal .pr-modal-body, .pr-modal .pr-modal-footer { padding-left: 20px; padding-right: 20px; }
  .pr-modal .pr-title { font-size: 26px; }
  .pr-modal .pr-modal-footer .pr-btn, .pr-modal .pr-modal-footer .pr-btn-outline,
  .pr-modal .pr-modal-footer form { width: 100%; }
}

/* ---------- Info tooltips (the small "i" pop-ups) and chart "Click for Info" ---------- */
.info-popup {
  background-color: var(--pr-ink); color: var(--pr-on-brand);
  border-top: 3px solid var(--pr-teal); border-radius: 2px; box-shadow: none;
  font-family: var(--pr-font); font-size: 0.9em; line-height: 1.45; padding: 10px 28px 10px 12px;
}
.info-popup a { color: #9fd3d2; }
.info-popup .close-btn { color: var(--pr-on-brand); opacity: 0.8; }
.info-popup .close-btn:hover { color: var(--pr-on-brand); opacity: 1; }
.chart-info-button {
  background-color: transparent; color: var(--pr-ink);
  border: 1px solid var(--pr-ink); border-radius: 2px;
  font-family: var(--pr-font); font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chart-info-button:hover,
.chart-info-button:focus { transform: none; box-shadow: none; background-color: var(--pr-teal); border-color: var(--pr-teal); color: var(--pr-on-brand); }
.chart-info-button:focus-visible { outline: 2px solid var(--pr-teal); outline-offset: 2px; }

/* "You will see a chart here once you have entered your fund values" */
.analysis-zero-popup {
  background: var(--pr-surface-100); color: var(--pr-ink);
  border: 1px solid var(--pr-line); border-top: 6px solid var(--pr-teal); border-radius: 4px;
  box-shadow: none; font-family: var(--pr-font); font-weight: 500;
}

/* ---------- Analysis tutorial tips ---------- */
.analysis-tutorial-tip {
  background: var(--pr-ink); color: var(--pr-on-brand);
  border-top: 6px solid var(--pr-teal); border-radius: 4px; box-shadow: none;
  font-family: var(--pr-font);
}
.analysis-tutorial-tip h5 { color: var(--pr-on-brand); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.15rem; }
.analysis-tutorial-tip p { color: var(--pr-on-brand); }
.analysis-tutorial-counter {
  color: #9fd3d2; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.analysis-tutorial-close { color: var(--pr-on-brand); }
.analysis-tutorial-close:hover { color: #9fd3d2; }
.analysis-tutorial-controls label,
.analysis-tutorial-optout { color: rgba(246, 244, 240, 0.85); }
.analysis-tutorial-optout input { accent-color: var(--pr-teal); }
.analysis-tutorial-controls .btn { border-radius: 2px !important; font-weight: 700; font-family: inherit; }
.analysis-tutorial-next {
  background-color: var(--pr-teal) !important; border-color: var(--pr-teal) !important; color: var(--pr-on-brand) !important;
}
.analysis-tutorial-next:hover,
.analysis-tutorial-next:focus,
.analysis-tutorial-next:active {
  background-color: var(--pr-teal-bright) !important; border-color: var(--pr-teal-bright) !important; color: var(--pr-on-brand) !important;
}
.analysis-tutorial-prev {
  background-color: transparent !important; border-color: rgba(246, 244, 240, 0.75) !important; color: var(--pr-on-brand) !important;
}
.analysis-tutorial-prev:hover,
.analysis-tutorial-prev:focus,
.analysis-tutorial-prev:active {
  background-color: rgba(246, 244, 240, 0.12) !important; border-color: var(--pr-on-brand) !important; color: var(--pr-on-brand) !important;
}

/* ---------- Cookie banner and its confirmation toast ---------- */
#cookie-banner.pr-cookie {
  position: fixed; left: 20px; right: 20px; bottom: 20px; margin: auto; max-width: 560px;
  background: var(--pr-surface-100); color: var(--pr-ink);
  border: 1px solid var(--pr-ink); border-top: 6px solid var(--pr-teal); border-radius: 4px; box-shadow: none;
  padding: 18px 20px; font-family: var(--pr-font); font-size: 15px; line-height: 22px; text-align: left;
  z-index: 10050;
}
#cookie-banner.pr-cookie .pr-cookie-title { margin: 0 0 4px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
#cookie-banner.pr-cookie p { margin: 0 0 14px; color: var(--pr-ink); }
#cookie-banner.pr-cookie .pr-cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#cookie-banner.pr-cookie .pr-cookie-actions a { margin-right: auto; color: var(--pr-teal); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
#cookie-banner.pr-cookie .pr-cookie-actions a:hover { color: var(--pr-ink); }
#cookie-banner.pr-cookie button {
  min-height: 40px; padding: 0 18px; border-radius: 2px; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; border: 2px solid var(--pr-teal); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#cookie-banner.pr-cookie #accept-cookies { background: var(--pr-teal); color: var(--pr-on-brand); }
#cookie-banner.pr-cookie #accept-cookies:hover { background: var(--pr-ink); border-color: var(--pr-ink); }
#cookie-banner.pr-cookie #reject-cookies { background: transparent; color: var(--pr-ink); border-color: var(--pr-ink); }
#cookie-banner.pr-cookie #reject-cookies:hover { background: var(--pr-surface-200); }
#cookie-banner.pr-cookie button:focus-visible,
#cookie-banner.pr-cookie a:focus-visible { outline: 2px solid var(--pr-teal); outline-offset: 2px; }
#cookie-toast.cookie-toast {
  background: var(--pr-ink); color: var(--pr-on-brand); border-top: 3px solid var(--pr-teal);
  border-radius: 2px; box-shadow: none; font-family: var(--pr-font);
}
#cookie-toast.cookie-toast a { color: #9fd3d2; }
@media (max-width: 575.98px) {
  #cookie-banner.pr-cookie { left: 12px; right: 12px; bottom: 12px; }
  #cookie-banner.pr-cookie .pr-cookie-actions a { flex-basis: 100%; }
  #cookie-banner.pr-cookie button { flex: 1; }
}