/**
 * Application Process — Job openings page
 * Matches Figma node 369:977 (Application-Process file)
 */

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-neutral-25: #f7f7f7;
  --color-neutral-50: #f7f7f5;
  --color-neutral-200: #d9d9d7;
  --color-neutral-400: #b3b3b1;
  --color-neutral-600: #807f7e;
  --color-neutral-900: #333332;
  --color-hero-green: #0a7d42;
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.12);
  --font-dm: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-inter: "Inter", system-ui, -apple-system, sans-serif;
  --page-max: 1440px;
  --content-pad-x: 162px;
  --content-width: 1116px;
  --modern-caret-rotate-transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-dm);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

/* Page shell — 1440px artboard */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
}

.content-gutter {
  padding-left: var(--content-pad-x);
  padding-right: var(--content-pad-x);
  padding-bottom: 16px;
}

/* Scroll clearance for the fixed cookie banner only when it is in the DOM.
   --modern-cookie-clearance is set from modernApplicantCookie.js to the measured
   bar height; fallbacks cover the brief moment before JS runs. */
body:has(.cookies-banner:not(.is-hidden)) .content-gutter {
  padding-bottom: var(--modern-cookie-clearance, 100px);
}

@media (max-width: 768px) {
  body:has(.cookies-banner:not(.is-hidden)) .content-gutter {
    padding-bottom: var(--modern-cookie-clearance, 160px);
  }
}

.content-col {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* ----- Notification banner (60px) ----- */
.notification-banner {
  height: 60px;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  gap: 8px;
}

.notification-banner__inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.notification-banner__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.notification-banner__rating-num {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-white);
  white-space: nowrap;
}

.notification-banner__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Set colour + size on the row so BOTH filled (<i class="ph-fill ph-star">)
     and outline (<i class="ph ph-star">) Phosphor icons inherit correctly.
     The previous `.notification-banner__stars .ph` rule only matched the
     outline variant, leaving filled stars to inherit the body default
     (black) — which rendered them invisible on the now-pure-black bar. */
  color: var(--color-white);
  font-size: 18px;
  line-height: 1;
}

.notification-banner__text {
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-white);
  white-space: nowrap;
}

.notification-banner__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-banner__close .ph {
  font-size: 24px;
}

/* ----- Hero (262px, 8px radius, 16px below banner) ----- */
.hero-spacer {
  padding-top: 16px;
}

.hero-banner {
  position: relative;
  height: 262px;
  border-radius: 8px;
  background: var(--color-hero-green);
  overflow: hidden;
}

.hero-banner__sprinkles {
  position: absolute;
  left: -0.36%;
  right: 37.1%;
  top: -21px;
  aspect-ratio: 580 / 580;
  pointer-events: none;
}

.hero-banner__sprinkles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-banner__logo {
  position: absolute;
  width: 344px;
  height: 121px;
  left: 715px;
  top: 71px;
  pointer-events: none;
}

.hero-banner__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Customer logo strip from modernApplicant_render_customer_logos(): hide on
 * narrow viewports (hero is primary); matches homeModern mobile breakpoint. */
@media (max-width: 767.98px) {
  .modernApplicant-customer-logo {
    display: none !important;
  }
}

/* ----- Job openings row (62px after hero) ----- */
.section-job-title {
  margin-top: 62px;
}

.job-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.job-title-row h1 {
  margin: 0;
  font-family: var(--font-dm);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

.job-title-row__links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
}

.job-title-row__links a {
  color: var(--color-black);
  text-decoration: none;
}

.job-title-row__links a:hover {
  text-decoration: underline;
}

/* ----- Filters (74px below job title row) ----- */
.section-filters {
  margin-top: 74px;
}

.filters-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Search + dropdown row */
.filters-stack__inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 14px 16px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  background: var(--color-white);
}

.search-field .ph {
  font-size: 20px;
  color: var(--color-neutral-900);
  flex-shrink: 0;
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
  background: transparent;
}

.search-field input::placeholder {
  color: var(--color-neutral-400);
}

.filters-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-select {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 46px;
  padding: 14px 16px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  background: var(--color-white);
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-neutral-400);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.filter-select .ph {
  font-size: 24px;
  color: var(--color-neutral-900);
  flex-shrink: 0;
}

/* Shared dropdown chevron motion: same --modern-caret-rotate-transition as
 * native <select> ::after carets in jobApplicationModern.css. Add class
 * modern-dropdown-chevron to the Phosphor <i> (e.g. ph-caret-down). */
.modern-dropdown-chevron {
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: var(--modern-caret-rotate-transition);
  backface-visibility: hidden;
}

.filter-dropdown.is-open .modern-dropdown-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --modern-caret-rotate-transition: transform 0.01ms linear;
  }
}

/* Modern native <select>: wrap long labels (closed field + open list where
 * the UA allows). Phone dial-code prefix stays single-line. */
.application-input__select select option,
.modern-native-select-shell select option,
.application-page select option,
.login-modern__form-wrap select option,
.videoResponseModern__recorder select option {
  white-space: normal;
}

.application-input__phone-prefix select {
  min-height: 46px;
  height: 46px;
  line-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

body.homeModern-body .filter-dropdown__panel label {
  white-space: normal;
  overflow-wrap: anywhere;
  align-items: center;
}

/* Custom <select> list (modernCustomSelect.js) -- wrapping options; native
 * select stays for submit/validation but is visually hidden. */
.modern-custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.modern-custom-select__trigger {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 44px 10px 16px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  background: var(--color-white);
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.modern-custom-select__trigger.is-placeholder {
  color: var(--color-neutral-400);
}

.modern-custom-select__trigger:focus {
  outline: none;
  border-color: var(--color-neutral-400);
}

.modern-custom-select__trigger.error {
  border-color: #c1272d;
}

.modern-custom-select__trigger:disabled {
  background-color: #f1f3f5;
  color: #868e96;
  cursor: not-allowed;
  opacity: 0.7;
}

.modern-custom-select__panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 0;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.modern-custom-select.is-open .modern-custom-select__panel {
  display: block;
}

.modern-custom-select.is-open::after {
  transform: translate3d(0, -50%, 0) rotate(180deg);
}

.modern-custom-select__option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.modern-custom-select__option:hover,
.modern-custom-select__option:focus {
  background: var(--color-neutral-50);
  outline: none;
}

.modern-custom-select__option.is-selected {
  background: var(--color-neutral-50);
  font-weight: 700;
}

/* Active filter pills + clear */
.filters-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 16px 8px 24px;
  border-radius: 20px;
  background: var(--color-neutral-50);
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
}

.filter-pill .ph {
  font-size: 18px;
  cursor: pointer;
}

.btn-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: var(--color-neutral-50);
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
  cursor: pointer;
}

.btn-clear-filters .ph {
  font-size: 20px;
}

/* ----- Job listings (27px gap after filters block to match 665px) ----- */
.section-listings {
  margin-top: 27px;
}

.office-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.office-group + .office-group {
  padding-top: 24px;
}

.office-group:first-of-type .office-group__heading {
  padding-top: 16px;
}

.office-group__heading {
  margin: 0;
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

/* Job card (Figma Application-Process node 1177:2607) */
.job-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
  border: 2px solid var(--color-neutral-200);
  border-radius: 8px;
  background: var(--color-white);
  transition: border-color 0.18s ease;
}

@media (hover: hover) {
  .job-card:hover {
    border-color: var(--color-black);
  }
}

.job-card:focus-within {
  border-color: var(--color-black);
}

.job-card__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.job-card__date {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.job-card__date .ph {
  font-size: 24px;
  color: var(--color-black);
  flex-shrink: 0;
}

.job-card__date span {
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
  white-space: nowrap;
}

.job-card__share {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
}

.job-card__share .ph {
  font-size: 24px;
}

.job-card__body h3 {
  margin: 0 0 12px;
  font-family: var(--font-dm);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

.job-card__body p {
  margin: 0;
  font-family: var(--font-dm);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.036px;
  color: var(--color-neutral-600);
}

.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-neutral-50);
  font-family: var(--font-dm);
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: var(--color-black);
}

/* ----- Cookie banner ----- */
.cookies-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 942px;
  z-index: 1000;
  padding: 0 16px;
  pointer-events: none;
}

.cookies-banner__inner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  padding: 16px 24px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

.cookies-banner__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-dm);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
}

.cookies-banner__text strong {
  font-weight: 600;
}

.cookies-banner__text a {
  color: inherit;
  text-decoration: underline;
}

.btn-okay {
  flex-shrink: 0;
  padding: 16px 24px;
  border: none;
  border-radius: 6px;
  background: var(--color-black);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-white);
  cursor: pointer;
  white-space: nowrap;
}

/* ----- Footer ----- */
.site-footer {
  /* Rendered via inc/modernApplicantFooter.inc.php OUTSIDE .page so it spans the
     full viewport width; .site-footer--fullbleed is kept as a marker class.
     Height is intrinsic — vertical padding (32px) per Application-Process Figma
     node 363:6649; horizontal padding sits on .site-footer__inner. */
  width: 100%;
  background: var(--color-neutral-25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  gap: 16px;
}

.site-footer__inner {
  max-width: var(--page-max);
  width: 100%;
  padding: 0 var(--content-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__copy {
  flex: 1;
  font-family: var(--font-dm);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.028px;
  color: var(--color-black);
}

.site-footer__copy p {
  /* No inter-paragraph margin — Figma node 363:6649 stacks the three lines at
     the natural 22px line-height (single <p> with <br>s in the design). */
  margin: 0;
}

.site-footer__copy a {
  color: var(--color-black);
  text-decoration: underline;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

.site-footer__sep {
  color: var(--color-black);
  text-decoration: none;
  user-select: none;
}

.site-footer__logo {
  flex-shrink: 0;
  width: 74px;
  height: 51px;
}

.site-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Mobile-only: centered stacked footer for modern applicant pages. */
@media (max-width: 767.98px) {
  .site-footer {
    background: var(--color-white);
    padding: 28px 0 32px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
  }

  .site-footer__contact {
    display: none;
  }

  .site-footer__copy {
    flex: none;
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .site-footer__copy p {
    text-align: center;
  }

  .site-footer__powered {
    font-weight: 500;
  }

  .site-footer__powered a {
    text-decoration: none;
  }

  .site-footer__powered a:hover {
    text-decoration: underline;
  }

  .site-footer__legal {
    justify-content: center;
  }

  .site-footer__legal a {
    text-decoration: none;
  }

  .site-footer__legal a:hover {
    text-decoration: underline;
  }

  .site-footer__logo {
    display: none;
  }
}

/* Bootstrap overrides — keep grid inside content */
.section-filters .container-fluid,
.section-job-title .container-fluid,
.section-listings .container-fluid,
.hero-spacer .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: var(--content-width);
}

@media (max-width: 1200px) {
  :root {
    --content-pad-x: 16px;
  }

  .hero-banner__logo {
    left: auto;
    right: 24px;
    width: min(344px, 45vw);
    height: auto;
    aspect-ratio: 344 / 121;
  }

  .notification-banner__text {
    white-space: normal;
    text-align: center;
  }

  .cookies-banner {
    bottom: 20px;
  }
}

@media (max-width: 768px) {
  /* Applicant feedback bar from inc/modernApplicantStarFeed.inc.php */
  [data-modern-star-feed] {
    display: none;
  }

  .filters-row .filter-select {
    flex: 1 1 100%;
  }

  .job-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookies-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =============================================================
 * Mobile (<=575.98px): Bootstrap modal tokens + legacy popups +
 * source panel + job sidebar modals (single breakpoint block).
 * ============================================================= */
@media (max-width: 575.98px) {
  body.homeModern-body .modal,
  body.jobDetailsModern-body .modal,
  body.application-page .modal,
  body.applicationEnd-body .modal,
  body.videoResponseModern-body .modal {
    --bs-modal-margin: 16px;
    --bs-modal-padding: 16px;
    --bs-modal-header-padding: 16px;
    --bs-modal-header-padding-x: 16px;
    --bs-modal-header-padding-y: 16px;
  }

  body.application-page #popupAlertOverlay,
  body.homeModern-body #popupAlertOverlay,
  body.jobDetailsModern-body #popupAlertOverlay,
  body.applicationEnd-body #popupAlertOverlay,
  body.videoResponseModern-body #popupAlertOverlay {
    padding: 16px !important;
  }

  body.application-page #popupAlertOverlay > .floatRight:first-child,
  body.homeModern-body #popupAlertOverlay > .floatRight:first-child,
  body.jobDetailsModern-body #popupAlertOverlay > .floatRight:first-child,
  body.applicationEnd-body #popupAlertOverlay > .floatRight:first-child,
  body.videoResponseModern-body #popupAlertOverlay > .floatRight:first-child {
    top: 16px;
    right: 16px;
  }

  body.application-page #popupPanelOverlay,
  body.homeModern-body #popupPanelOverlay,
  body.jobDetailsModern-body #popupPanelOverlay,
  body.applicationEnd-body #popupPanelOverlay,
  body.videoResponseModern-body #popupPanelOverlay {
    padding: 16px !important;
  }

  body.application-page #popupPanelOverlay #popupPanelCloseLink,
  body.homeModern-body #popupPanelOverlay #popupPanelCloseLink,
  body.jobDetailsModern-body #popupPanelOverlay #popupPanelCloseLink,
  body.applicationEnd-body #popupPanelOverlay #popupPanelCloseLink,
  body.videoResponseModern-body #popupPanelOverlay #popupPanelCloseLink {
    top: 16px;
    right: 16px;
  }

  .job-details-location-modal .modal-header,
  .job-details-location-modal .modal-body {
    padding: 16px;
  }

  .modern-source-panel__header,
  .modern-source-panel__footer {
    padding: 16px;
  }

  .modern-source-panel__row {
    padding: 14px 16px;
  }

  .checklist-submit-confirm-modal__header,
  .checklist-submit-confirm-modal__body,
  .checklist-submit-confirm-modal__footer {
    padding: 16px;
  }
}

/* =============================================================
 * "How did you hear about us?" — modern modal styling.
 * Matches Application-Process Figma node 93:3092. Renders the
 * source-panel options as a centred Bootstrap 5 modal with full-
 * width selectable rows (hover = soft grey, selected = inverted
 * black + white check icon). Scoped under .modern-source-panel
 * so it never affects any other modal on the page. Shared by
 * homeModern.php, jobDetailsModern.php and jobApplicationModern.php
 * (every modern applicant page that includes
 * inc/modernApplicantSourcePanel.inc.php).
 * ============================================================= */
.modern-source-panel-modal .modal-dialog {
	max-width: 520px;
}

.modern-source-panel {
	border: none;
	border-radius: 16px;
	box-shadow: 0 12px 60px rgba(0, 0, 0, 0.25);
	font-family: var(--font-dm);
	overflow: hidden;
}

.modern-source-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--color-neutral-200);
}

.modern-source-panel__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
}

.modern-source-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	color: var(--color-black);
}

.modern-source-panel__close:hover {
	background: var(--color-neutral-25);
}

.modern-source-panel__close .ph {
	font-size: 24px;
}

.modern-source-panel__body {
	padding: 8px 0;
	max-height: 60vh;
	overflow-y: auto;
}

.modern-source-panel__options {
	list-style: none;
	margin: 0;
	padding: 0;
}

.modern-source-panel__option {
	margin: 0;
	padding: 0;
}

.modern-source-panel__option-label {
	display: block;
	margin: 0;
	cursor: pointer;
	position: relative;
}

.modern-source-panel__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.modern-source-panel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 24px;
	background: var(--color-white);
	color: var(--color-black);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.modern-source-panel__row:hover {
	background: var(--color-neutral-25);
}

.modern-source-panel__radio:focus-visible + .modern-source-panel__row {
	outline: 2px solid var(--color-black);
	outline-offset: -2px;
}

.modern-source-panel__radio:checked + .modern-source-panel__row {
	background: var(--color-black);
	color: var(--color-white);
}

.modern-source-panel__text {
	flex: 1;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.modern-source-panel__check {
	font-size: 22px;
	flex-shrink: 0;
	opacity: 0;
}

.modern-source-panel__radio:checked + .modern-source-panel__row .modern-source-panel__check {
	opacity: 1;
}

.modern-source-panel__footer {
	display: flex;
	justify-content: flex-end;
	padding: 16px 24px;
	border-top: 1px solid var(--color-neutral-200);
	background: var(--color-white);
}

.modern-source-panel__done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 89px;
	height: 50px;
	padding: 0 24px;
	border: none;
	border-radius: 6px;
	background: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-dm);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.modern-source-panel__done:hover:not(:disabled) {
	background: #1a1a1a;
}

.modern-source-panel__done:disabled {
	background: var(--color-neutral-200);
	color: var(--color-neutral-400);
	cursor: not-allowed;
	opacity: 1;
}

/* =============================================================
 * Modern theme overrides for the legacy Popup.alertOpen() popup
 * (js/corePlus.lib.js → Popup.alertOpen / .alertClose). The legacy
 * markup writes #popupAlertOverlay + #dimOverlay which are styled
 * by css/microsite.css on legacy pages. Modern pages don't load
 * microsite.css so without these overrides the popup renders as
 * an unstyled block sitting at the bottom of the page (mascot
 * image visible, FontAwesome icons broken, no backdrop, no card
 * framing). Mirrors the loginModern.css pattern but scoped to
 * every modern applicant body class so validate(), submit-time
 * upload errors, deferResume warnings, and any other Popup.alertOpen
 * call on these pages renders as a centered modal card.
 *
 * Driven by the validate() call site in js/jobApplication.js
 * (Popup.alertOpen(msg) on validation failure) plus the
 * upload-error paths in jobApplicationModern.php's onSuccess
 * branches. ANY modern-page Popup.alertOpen invocation now
 * inherits this styling — no per-page tweaks required.
 * ============================================================= */
body.application-page #dimOverlay,
body.homeModern-body #dimOverlay,
body.jobDetailsModern-body #dimOverlay,
body.applicationEnd-body #dimOverlay,
body.videoResponseModern-body #dimOverlay {
	position: fixed;
	inset: 0;
	z-index: 1900;
	background: rgba(0, 0, 0, 0.45);
}

body.application-page #popupAlertOverlay,
body.homeModern-body #popupAlertOverlay,
body.jobDetailsModern-body #popupAlertOverlay,
body.applicationEnd-body #popupAlertOverlay,
body.videoResponseModern-body #popupAlertOverlay {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100% - 32px)) !important;
	max-height: calc(100vh - 64px);
	overflow: auto;
	z-index: 2000;
	padding: 28px 28px 20px !important;
	background: var(--color-white) !important;
	background-image: none !important;
	color: var(--color-black) !important;
	border: 1px solid var(--color-neutral-200);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	font-family: var(--font-dm) !important;
	font-size: 15px !important;
	line-height: 22px !important;
	cursor: pointer;
}

/* Hide the legacy mascot helloHead image (modern pages don't use it) */
body.application-page #popupAlertOverlay .helloHead,
body.homeModern-body #popupAlertOverlay .helloHead,
body.jobDetailsModern-body #popupAlertOverlay .helloHead,
body.applicationEnd-body #popupAlertOverlay .helloHead,
body.videoResponseModern-body #popupAlertOverlay .helloHead {
	display: none !important;
}

/* Empty container the helloHead used to live in — collapse the float */
body.application-page #popupAlertOverlay > .floatRight,
body.homeModern-body #popupAlertOverlay > .floatRight,
body.jobDetailsModern-body #popupAlertOverlay > .floatRight,
body.applicationEnd-body #popupAlertOverlay > .floatRight,
body.videoResponseModern-body #popupAlertOverlay > .floatRight {
	float: none;
}

/* Style the close X (legacy emits <i class='fa fa-times'>) — FontAwesome
 * isn't loaded on modern pages so the icon font is invisible. Render a
 * unicode "×" via ::before in a position-absolute corner instead. */
body.application-page #popupAlertOverlay > .floatRight:first-child,
body.homeModern-body #popupAlertOverlay > .floatRight:first-child,
body.jobDetailsModern-body #popupAlertOverlay > .floatRight:first-child,
body.applicationEnd-body #popupAlertOverlay > .floatRight:first-child,
body.videoResponseModern-body #popupAlertOverlay > .floatRight:first-child {
	position: absolute;
	top: 12px;
	right: 16px;
	margin: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--color-neutral-400);
}

body.application-page #popupAlertOverlay > .floatRight:first-child .fa.fa-times::before,
body.homeModern-body #popupAlertOverlay > .floatRight:first-child .fa.fa-times::before,
body.jobDetailsModern-body #popupAlertOverlay > .floatRight:first-child .fa.fa-times::before,
body.applicationEnd-body #popupAlertOverlay > .floatRight:first-child .fa.fa-times::before,
body.videoResponseModern-body #popupAlertOverlay > .floatRight:first-child .fa.fa-times::before {
	content: "\00d7";
	font-family: var(--font-dm), sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	display: inline-block;
}

body.application-page #popupAlertOverlay > .floatRight:first-child:hover,
body.homeModern-body #popupAlertOverlay > .floatRight:first-child:hover,
body.jobDetailsModern-body #popupAlertOverlay > .floatRight:first-child:hover,
body.applicationEnd-body #popupAlertOverlay > .floatRight:first-child:hover,
body.videoResponseModern-body #popupAlertOverlay > .floatRight:first-child:hover {
	color: var(--color-black);
}

/* Hide other broken FontAwesome icons inside the popup (e.g. the
 * exclamation-triangle in validate() error markup). These were
 * meant to be decorative; without FA they render as empty boxes. */
body.application-page #popupAlertOverlay i.fa:not(.fa-times),
body.homeModern-body #popupAlertOverlay i.fa:not(.fa-times),
body.jobDetailsModern-body #popupAlertOverlay i.fa:not(.fa-times),
body.applicationEnd-body #popupAlertOverlay i.fa:not(.fa-times),
body.videoResponseModern-body #popupAlertOverlay i.fa:not(.fa-times) {
	display: none !important;
}

/* Headings rendered inside the popup body */
body.application-page #popupAlertOverlay h2,
body.homeModern-body #popupAlertOverlay h2,
body.jobDetailsModern-body #popupAlertOverlay h2,
body.applicationEnd-body #popupAlertOverlay h2,
body.videoResponseModern-body #popupAlertOverlay h2 {
	margin: 0 0 12px;
	font-family: var(--font-dm);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-black);
}

body.application-page #popupAlertOverlay h3,
body.homeModern-body #popupAlertOverlay h3,
body.jobDetailsModern-body #popupAlertOverlay h3,
body.applicationEnd-body #popupAlertOverlay h3,
body.videoResponseModern-body #popupAlertOverlay h3 {
	margin: 0 0 12px;
	padding: 0;
	background: transparent;
	font-family: var(--font-dm);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-black);
}

body.application-page #popupAlertOverlay h4,
body.homeModern-body #popupAlertOverlay h4,
body.jobDetailsModern-body #popupAlertOverlay h4,
body.applicationEnd-body #popupAlertOverlay h4,
body.videoResponseModern-body #popupAlertOverlay h4 {
	margin: 6px 0;
	font-family: var(--font-dm);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-black);
}

body.application-page #popupAlertOverlay p,
body.homeModern-body #popupAlertOverlay p,
body.jobDetailsModern-body #popupAlertOverlay p,
body.applicationEnd-body #popupAlertOverlay p,
body.videoResponseModern-body #popupAlertOverlay p {
	margin: 8px 0;
	font-family: var(--font-dm);
	font-size: 15px;
	line-height: 22px;
	color: var(--color-black);
}

/* Coloured info panels rendered inside the popup body
 * (.ourOrangePanel = warning, .ourRedPanel = error, .ourGreenPanel = success) */
body.application-page #popupAlertOverlay .ourGreenPanel,
body.application-page #popupAlertOverlay .ourOrangePanel,
body.application-page #popupAlertOverlay .ourRedPanel,
body.homeModern-body #popupAlertOverlay .ourGreenPanel,
body.homeModern-body #popupAlertOverlay .ourOrangePanel,
body.homeModern-body #popupAlertOverlay .ourRedPanel,
body.jobDetailsModern-body #popupAlertOverlay .ourGreenPanel,
body.jobDetailsModern-body #popupAlertOverlay .ourOrangePanel,
body.jobDetailsModern-body #popupAlertOverlay .ourRedPanel,
body.applicationEnd-body #popupAlertOverlay .ourGreenPanel,
body.applicationEnd-body #popupAlertOverlay .ourOrangePanel,
body.applicationEnd-body #popupAlertOverlay .ourRedPanel,
body.videoResponseModern-body #popupAlertOverlay .ourGreenPanel,
body.videoResponseModern-body #popupAlertOverlay .ourOrangePanel,
body.videoResponseModern-body #popupAlertOverlay .ourRedPanel {
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: 8px;
	font-family: var(--font-dm);
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
	border: 1px solid transparent;
	color: var(--color-black);
	background-image: none;
}

body.application-page #popupAlertOverlay .ourOrangePanel,
body.homeModern-body #popupAlertOverlay .ourOrangePanel,
body.jobDetailsModern-body #popupAlertOverlay .ourOrangePanel,
body.applicationEnd-body #popupAlertOverlay .ourOrangePanel,
body.videoResponseModern-body #popupAlertOverlay .ourOrangePanel {
	background: #fff3ec;
	border-color: rgba(255, 108, 61, 0.32);
}

body.application-page #popupAlertOverlay .ourRedPanel,
body.homeModern-body #popupAlertOverlay .ourRedPanel,
body.jobDetailsModern-body #popupAlertOverlay .ourRedPanel,
body.applicationEnd-body #popupAlertOverlay .ourRedPanel,
body.videoResponseModern-body #popupAlertOverlay .ourRedPanel {
	background: #fdecea;
	border-color: rgba(193, 39, 45, 0.28);
}

body.application-page #popupAlertOverlay .ourGreenPanel,
body.homeModern-body #popupAlertOverlay .ourGreenPanel,
body.jobDetailsModern-body #popupAlertOverlay .ourGreenPanel,
body.applicationEnd-body #popupAlertOverlay .ourGreenPanel,
body.videoResponseModern-body #popupAlertOverlay .ourGreenPanel {
	background: rgba(10, 125, 66, 0.06);
	border-color: rgba(10, 125, 66, 0.18);
}

/* Coloured spans inside popup text (ourGreen/Orange/Red) */
body.application-page #popupAlertOverlay .ourGreen,
body.homeModern-body #popupAlertOverlay .ourGreen,
body.jobDetailsModern-body #popupAlertOverlay .ourGreen,
body.applicationEnd-body #popupAlertOverlay .ourGreen,
body.videoResponseModern-body #popupAlertOverlay .ourGreen {
	color: #0a7d42 !important;
}

body.application-page #popupAlertOverlay .ourOrange,
body.homeModern-body #popupAlertOverlay .ourOrange,
body.jobDetailsModern-body #popupAlertOverlay .ourOrange,
body.applicationEnd-body #popupAlertOverlay .ourOrange,
body.videoResponseModern-body #popupAlertOverlay .ourOrange {
	color: #d65127 !important;
}

body.application-page #popupAlertOverlay .ourRed,
body.homeModern-body #popupAlertOverlay .ourRed,
body.jobDetailsModern-body #popupAlertOverlay .ourRed,
body.applicationEnd-body #popupAlertOverlay .ourRed,
body.videoResponseModern-body #popupAlertOverlay .ourRed {
	color: #c1272d !important;
}

/* "Notice" class used in a couple of upload-error h4s */
body.application-page #popupAlertOverlay .notice,
body.homeModern-body #popupAlertOverlay .notice,
body.jobDetailsModern-body #popupAlertOverlay .notice,
body.applicationEnd-body #popupAlertOverlay .notice,
body.videoResponseModern-body #popupAlertOverlay .notice {
	background: transparent;
	color: var(--color-black);
	font-weight: 700;
	padding: 0;
}

/* Misc legacy text-tweaking classes that show up in validate() messages */
body.application-page #popupAlertOverlay .trim-right,
body.application-page #popupAlertOverlay .prettyIndent,
body.homeModern-body #popupAlertOverlay .trim-right,
body.homeModern-body #popupAlertOverlay .prettyIndent,
body.jobDetailsModern-body #popupAlertOverlay .trim-right,
body.jobDetailsModern-body #popupAlertOverlay .prettyIndent,
body.applicationEnd-body #popupAlertOverlay .trim-right,
body.applicationEnd-body #popupAlertOverlay .prettyIndent,
body.videoResponseModern-body #popupAlertOverlay .trim-right,
body.videoResponseModern-body #popupAlertOverlay .prettyIndent {
	margin-right: 0;
	padding-left: 0;
	background-image: none;
}

/* Footer "Please click anywhere within to close this message panel" */
body.application-page #popupAlertOverlay .center,
body.application-page #popupAlertOverlay small,
body.homeModern-body #popupAlertOverlay .center,
body.homeModern-body #popupAlertOverlay small,
body.jobDetailsModern-body #popupAlertOverlay .center,
body.jobDetailsModern-body #popupAlertOverlay small,
body.applicationEnd-body #popupAlertOverlay .center,
body.applicationEnd-body #popupAlertOverlay small,
body.videoResponseModern-body #popupAlertOverlay .center,
body.videoResponseModern-body #popupAlertOverlay small {
	display: block;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-neutral-400);
	margin-top: 16px;
}

/* "Reverse" variant — Popup.alertOpen(text, true) is called by linkMaker /
 * viewInvoices with inline style.color/style.backgroundColor overrides.
 * Restore the modern card look so those callers also render correctly on
 * any modern page that ever invokes them. */
body.application-page #popupAlertOverlay[style*="background-color"],
body.homeModern-body #popupAlertOverlay[style*="background-color"],
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"],
body.applicationEnd-body #popupAlertOverlay[style*="background-color"],
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
}

body.application-page #popupAlertOverlay[style*="background-color"] h2,
body.application-page #popupAlertOverlay[style*="background-color"] h3,
body.application-page #popupAlertOverlay[style*="background-color"] h4,
body.application-page #popupAlertOverlay[style*="background-color"] p,
body.application-page #popupAlertOverlay[style*="background-color"] .center,
body.application-page #popupAlertOverlay[style*="background-color"] small,
body.homeModern-body #popupAlertOverlay[style*="background-color"] h2,
body.homeModern-body #popupAlertOverlay[style*="background-color"] h3,
body.homeModern-body #popupAlertOverlay[style*="background-color"] h4,
body.homeModern-body #popupAlertOverlay[style*="background-color"] p,
body.homeModern-body #popupAlertOverlay[style*="background-color"] .center,
body.homeModern-body #popupAlertOverlay[style*="background-color"] small,
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"] h2,
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"] h3,
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"] h4,
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"] p,
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"] .center,
body.jobDetailsModern-body #popupAlertOverlay[style*="background-color"] small,
body.applicationEnd-body #popupAlertOverlay[style*="background-color"] h2,
body.applicationEnd-body #popupAlertOverlay[style*="background-color"] h3,
body.applicationEnd-body #popupAlertOverlay[style*="background-color"] h4,
body.applicationEnd-body #popupAlertOverlay[style*="background-color"] p,
body.applicationEnd-body #popupAlertOverlay[style*="background-color"] .center,
body.applicationEnd-body #popupAlertOverlay[style*="background-color"] small,
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] h2,
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] h3,
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] h4,
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] p,
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] .center,
body.videoResponseModern-body #popupAlertOverlay[style*="background-color"] small {
	color: var(--color-white) !important;
}

/* =============================================================
 * Modern theme overrides for the legacy Popup.panelOpen() popup
 * (js/corePlus.lib.js → Popup.panelOpen / .panelClose). The legacy
 * markup writes #popupPanelOverlay (note: different id from the
 * #popupAlertOverlay handled above) and is styled by
 * css/microsite.css on legacy pages. Modern pages don't load
 * microsite.css, so without these overrides the popup renders as
 * an unstyled block at the bottom of the page with no backdrop —
 * exactly what we hit on the inactivity-logout panel on
 * jobDetailsModern / homeModern / etc.
 *
 * The three live callers are (corePlus.lib.js):
 *   - checkActive_1     "you will be logged out in a few minutes"
 *   - checkActive_2     "you were logged out after a period of inactivity"
 *   - connectionLostAlert "Internet connectivity was interrupted"
 *
 * The #dimOverlay backdrop is already covered by the
 * #popupAlertOverlay block above (same element id is reused by
 * panelOpen), so we only need to style the panel itself.
 * ============================================================= */
body.application-page #popupPanelOverlay,
body.homeModern-body #popupPanelOverlay,
body.jobDetailsModern-body #popupPanelOverlay,
body.applicationEnd-body #popupPanelOverlay,
body.videoResponseModern-body #popupPanelOverlay {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100% - 32px)) !important;
	max-height: calc(100vh - 64px);
	overflow: auto;
	z-index: 2000;
	padding: 28px 28px 20px !important;
	background: var(--color-white) !important;
	background-image: none !important;
	color: var(--color-black) !important;
	border: 1px solid var(--color-neutral-200);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	font-family: var(--font-dm) !important;
	font-size: 15px !important;
	line-height: 22px !important;
}

/* Hide the legacy mascot helloHead image (modern pages don't use it) */
body.application-page #popupPanelOverlay .helloHead,
body.homeModern-body #popupPanelOverlay .helloHead,
body.jobDetailsModern-body #popupPanelOverlay .helloHead,
body.applicationEnd-body #popupPanelOverlay .helloHead,
body.videoResponseModern-body #popupPanelOverlay .helloHead {
	display: none !important;
}

/* Empty container the helloHead used to live in — collapse the float */
body.application-page #popupPanelOverlay > .floatRight,
body.homeModern-body #popupPanelOverlay > .floatRight,
body.jobDetailsModern-body #popupPanelOverlay > .floatRight,
body.applicationEnd-body #popupPanelOverlay > .floatRight,
body.videoResponseModern-body #popupPanelOverlay > .floatRight {
	float: none;
}

/* Style the close X — panelOpen uses #popupPanelCloseLink with
 * <i class='fa fa-times link'>. FontAwesome isn't loaded on modern
 * pages so render a unicode "×" via ::before in a fixed corner. */
body.application-page #popupPanelOverlay #popupPanelCloseLink,
body.homeModern-body #popupPanelOverlay #popupPanelCloseLink,
body.jobDetailsModern-body #popupPanelOverlay #popupPanelCloseLink,
body.applicationEnd-body #popupPanelOverlay #popupPanelCloseLink,
body.videoResponseModern-body #popupPanelOverlay #popupPanelCloseLink {
	position: absolute;
	top: 12px;
	right: 16px;
	margin: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--color-neutral-400);
	cursor: pointer;
}

body.application-page #popupPanelOverlay #popupPanelCloseLink .fa.fa-times::before,
body.homeModern-body #popupPanelOverlay #popupPanelCloseLink .fa.fa-times::before,
body.jobDetailsModern-body #popupPanelOverlay #popupPanelCloseLink .fa.fa-times::before,
body.applicationEnd-body #popupPanelOverlay #popupPanelCloseLink .fa.fa-times::before,
body.videoResponseModern-body #popupPanelOverlay #popupPanelCloseLink .fa.fa-times::before {
	content: "\00d7";
	font-family: var(--font-dm), sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	display: inline-block;
}

body.application-page #popupPanelOverlay #popupPanelCloseLink:hover,
body.homeModern-body #popupPanelOverlay #popupPanelCloseLink:hover,
body.jobDetailsModern-body #popupPanelOverlay #popupPanelCloseLink:hover,
body.applicationEnd-body #popupPanelOverlay #popupPanelCloseLink:hover,
body.videoResponseModern-body #popupPanelOverlay #popupPanelCloseLink:hover {
	color: var(--color-black);
}

/* Hide the other broken FontAwesome decorative icons (clock, info,
 * exclamation-triangle, check-square, refresh, cog spinner). These
 * render as empty squares without FA. */
body.application-page #popupPanelOverlay i.fa:not(.fa-times),
body.homeModern-body #popupPanelOverlay i.fa:not(.fa-times),
body.jobDetailsModern-body #popupPanelOverlay i.fa:not(.fa-times),
body.applicationEnd-body #popupPanelOverlay i.fa:not(.fa-times),
body.videoResponseModern-body #popupPanelOverlay i.fa:not(.fa-times) {
	display: none !important;
}

/* Phosphor heading icon shown on modern pages in place of the hidden
 * FontAwesome glyph. The .modern-panel-icon class is added to the
 * <i class='ph ph-X'> emitted by Popup.panelOpen() callers in
 * corePlus.lib.js. On legacy pages the .ph class is undefined (no
 * Phosphor font loaded) so the element renders empty and the original
 * FA icon shows instead — no legacy regression. */
body.application-page #popupPanelOverlay .modern-panel-icon,
body.homeModern-body #popupPanelOverlay .modern-panel-icon,
body.jobDetailsModern-body #popupPanelOverlay .modern-panel-icon,
body.applicationEnd-body #popupPanelOverlay .modern-panel-icon,
body.videoResponseModern-body #popupPanelOverlay .modern-panel-icon {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 8px;
	font-size: 24px;
	line-height: 1;
	color: var(--color-black);
}

/* Headings inside the panel body */
body.application-page #popupPanelOverlay h3,
body.homeModern-body #popupPanelOverlay h3,
body.jobDetailsModern-body #popupPanelOverlay h3,
body.applicationEnd-body #popupPanelOverlay h3,
body.videoResponseModern-body #popupPanelOverlay h3 {
	margin: 0 0 12px;
	padding: 0;
	background: transparent;
	font-family: var(--font-dm);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-black);
}

body.application-page #popupPanelOverlay h4,
body.homeModern-body #popupPanelOverlay h4,
body.jobDetailsModern-body #popupPanelOverlay h4,
body.applicationEnd-body #popupPanelOverlay h4,
body.videoResponseModern-body #popupPanelOverlay h4 {
	margin: 6px 0;
	font-family: var(--font-dm);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-black);
}

body.application-page #popupPanelOverlay p,
body.homeModern-body #popupPanelOverlay p,
body.jobDetailsModern-body #popupPanelOverlay p,
body.applicationEnd-body #popupPanelOverlay p,
body.videoResponseModern-body #popupPanelOverlay p {
	margin: 12px 0 0;
	font-family: var(--font-dm);
	font-size: 15px;
	line-height: 22px;
	color: var(--color-black);
}

/* Coloured info panels rendered inside the popup body
 * (.ourGreenPanel = success, .ourOrangePanel = warning) */
body.application-page #popupPanelOverlay .ourGreenPanel,
body.application-page #popupPanelOverlay .ourOrangePanel,
body.application-page #popupPanelOverlay .ourRedPanel,
body.homeModern-body #popupPanelOverlay .ourGreenPanel,
body.homeModern-body #popupPanelOverlay .ourOrangePanel,
body.homeModern-body #popupPanelOverlay .ourRedPanel,
body.jobDetailsModern-body #popupPanelOverlay .ourGreenPanel,
body.jobDetailsModern-body #popupPanelOverlay .ourOrangePanel,
body.jobDetailsModern-body #popupPanelOverlay .ourRedPanel,
body.applicationEnd-body #popupPanelOverlay .ourGreenPanel,
body.applicationEnd-body #popupPanelOverlay .ourOrangePanel,
body.applicationEnd-body #popupPanelOverlay .ourRedPanel,
body.videoResponseModern-body #popupPanelOverlay .ourGreenPanel,
body.videoResponseModern-body #popupPanelOverlay .ourOrangePanel,
body.videoResponseModern-body #popupPanelOverlay .ourRedPanel {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	background-image: none;
	border-radius: 0;
	font-family: var(--font-dm);
	color: var(--color-black);
}

/* Primary action button inside the panel — legacy <button class='new'>.
 * Style it to match the modern "Apply Now" black-pill button. */
body.application-page #popupPanelOverlay button.new,
body.homeModern-body #popupPanelOverlay button.new,
body.jobDetailsModern-body #popupPanelOverlay button.new,
body.applicationEnd-body #popupPanelOverlay button.new,
body.videoResponseModern-body #popupPanelOverlay button.new {
	display: inline-block;
	margin: 8px 0 0;
	padding: 10px 22px;
	background: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: 999px;
	font-family: var(--font-dm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.014em;
	cursor: pointer;
	text-decoration: none;
}

body.application-page #popupPanelOverlay button.new:hover,
body.homeModern-body #popupPanelOverlay button.new:hover,
body.jobDetailsModern-body #popupPanelOverlay button.new:hover,
body.applicationEnd-body #popupPanelOverlay button.new:hover,
body.videoResponseModern-body #popupPanelOverlay button.new:hover {
	background: var(--color-neutral-900);
	border-color: var(--color-neutral-900);
}