/* ============================================================
   BigPanda University certificate
   Paste into Custom CSS Rules (Theming > Custom Code).
   Needs the new background image (3600 x 2496) and the BigPanda Education
   logo uploaded in Settings > Certifications. The background carries the
   panda seal, soft blue corners, dot grid, signature and signer lines.
   ============================================================ */

/* Page: white, no top bar; the background image fills the whole certificate */
.CertWrapper .TopBlueBar { display: none !important; }
/* The content below is positioned absolutely, so the page needs its own height: the same 1800 x 1248 shape as the background */
.CertWrapper .CertBodyWrapper {
  position: relative !important; width: 100% !important; height: auto !important;
  aspect-ratio: 1800 / 1248 !important; background: #fff !important; overflow: hidden !important;
}
.CertWrapper .CertBodyWrapper > img:not(.CertLogo) {
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* Text block: centered column under the seal */
.CertWrapper .CertContentWrapper {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
}
.CertWrapper .CertContentInnerWrapper {
  position: absolute !important; top: 172px !important; left: 90px !important; right: 90px !important;
  width: auto !important; height: calc(100% - 268px) !important; min-height: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  text-align: center !important;
}

/* "Certificate of achievement" label. English hides WorkRamp's
   "BigPanda University Certified" and shows the new label from a pseudo-element;
   other languages keep WorkRamp's text in the same style.
   (The Download button redraws the page as an image and ignores font-size: 0,
   so text is hidden with display: none or a transparent colour instead.) */
.CertWrapper .CertCertifiedText,
.CertWrapper.Language_en-US .CertContentInnerWrapper::before {
  margin: 0 !important; padding: 0 !important;
  font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: .2em !important; text-transform: uppercase !important; color: #0041F5 !important;
}
.CertWrapper.Language_en-US .CertContentInnerWrapper::before { content: "Certificate of achievement"; display: block; }
.CertWrapper.Language_en-US .CertCertifiedText { display: none !important; }

/* Learner name */
.CertWrapper .CertLearnerName {
  margin: 22px 0 0 !important; max-width: 700px;
  font-size: 48px !important; font-weight: 500 !important; line-height: 1.06 !important;
  letter-spacing: -.025em !important; color: #060B1E !important;
}

/* Certification name: WorkRamp's sentence is made invisible (transparent, zero
   line height) and the name inside it is promoted to the headline. "has earned"
   shows in English only. */
.CertWrapper .CertHasCompletedText {
  margin: 14px 0 0 !important; max-width: 640px;
  color: transparent !important; line-height: 0 !important;
}
.CertWrapper .CertHasCompletedText > span {
  display: block; font-size: 30px; font-weight: 500; line-height: 1.14;
  letter-spacing: -.02em; color: #0041F5;
}
.CertWrapper .CertHasCompletedText .ContentType { display: none; }
.CertWrapper.Language_en-US .CertHasCompletedText > span::before {
  content: "has earned"; display: block; margin-bottom: 8px;
  font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; color: #566079;
}

/* Signer: the name and title live in the background image, so these stay empty */
.CertWrapper .CertAwardedByName,
.CertWrapper .CertAwardedByTitle { display: none !important; }

/* Date, bottom right. English replaces "Earned on" with "Date earned" (pseudo-element). */
.CertWrapper .CertEarnedOn {
  position: absolute !important; right: 0; bottom: 0; width: 360px; margin: 0 !important;
  text-align: center; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important;
  color: #060B1E !important;
}
.CertWrapper .CertEarnedOn .Label,
.CertWrapper.Language_en-US .CertEarnedOn::before {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 400; line-height: 1; color: #566079;
}
.CertWrapper.Language_en-US .CertEarnedOn::before { content: "Date earned"; }
.CertWrapper.Language_en-US .CertEarnedOn .Label { display: none; }

/* Logo, bottom centre */
.CertWrapper .CertLogo {
  position: absolute !important; top: auto !important; right: auto !important;
  left: 50% !important; bottom: 22px !important; transform: translateX(-50%) !important;
  width: auto !important; height: 46px !important; max-width: none !important; margin: 0 !important;
}

/* ============================================================
   Learner badge size (certification page) and "Your badges" strip (My Trainings)
   ============================================================ */
body .AL_Custom_PCSummaryBox .AL_Custom_PCSummaryImage { width: 128px !important; height: auto !important; flex: 0 0 auto !important; }
body .AL_Custom_PCSummaryBox .AL_Custom_PCSummaryImage img[class] {
  width: 128px !important; height: 128px !important; min-height: 128px !important;
  max-width: none !important; max-height: none !important; object-fit: contain !important;
}
@media (max-width: 640px) {
  body .AL_Custom_PCSummaryBox .AL_Custom_PCSummaryImage { width: 96px !important; }
  body .AL_Custom_PCSummaryBox .AL_Custom_PCSummaryImage img[class] { width: 96px !important; height: 96px !important; min-height: 96px !important; }
}

.BPBadges { padding: 8px 0 28px; }
.BPBadges-in {
  width: calc(100% - 48px); max-width: 1150px; margin: 0 auto; padding: 30px 40px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  border: 1px solid #D9E2FB; border-radius: 24px;
  background: radial-gradient(circle, rgba(0,65,245,.14) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
              linear-gradient(120deg, #F4F7FF 0%, #E8EEFF 55%, #DCE6FF 100%);
}
.BPBadges-title { flex: 0 1 300px; }
.BPBadges-title b { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #0041F5; }
.BPBadges-title strong { display: block; font-size: 30px; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; color: #060B1E; }
.BPBadges-title span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: #566079; }
.BPBadges-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.BPBadges-item { display: flex; flex-direction: column; align-items: center; width: 156px; text-align: center; text-decoration: none; }
.BPBadges-item img { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,65,245,.28)); transition: transform .2s; }
.BPBadges-item:hover img { transform: translateY(-5px) scale(1.04); }
.BPBadges-item span { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.25; color: #060B1E; }
.BPBadges-item small { margin-top: 3px; font-size: 12px; color: #566079; }
@media (max-width: 760px) {
  .BPBadges-in { flex-direction: column; align-items: flex-start; gap: 22px; padding: 24px 20px; }
  .BPBadges-title { flex: 0 0 auto; }
  .BPBadges-list { justify-content: flex-start; gap: 12px 8px; }
  .BPBadges-item { width: 128px; }
  .BPBadges-item img { width: 112px; height: 112px; }
  .BPBadges-title strong { font-size: 26px; }
}