/* ==========================================================
   CERTIFICATE
   ========================================================== */

/* Remove the orange bar across the top */
.TopBlueBar,
[class*="TopBlueBar"] {
  display: none !important;
}

.CertBodyWrapper {
  position: relative !important;
  overflow: hidden !important;
}

/* FIX 1: background fills the whole certificate (removes grey striped strip) */
[class*="CustomCertificationBackgroundImage"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* FIX 2: hide "Passed the requirements for the..." */
.CertHasCompletedText {
  display: none !important;
}

/* "Dext Certified" -> "Dext proudly certifies" */
.CertCertifiedText {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.CertCertifiedText::before {
  content: "Dext proudly certifies";
  display: block;
  margin-top: 40px; /* moves the three middle lines down: bigger number = lower */
  font-family: "Inter", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
}

/* Learner name in Dext orange (FIX 3: tight spacing) */
.CertLearnerName {
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #FF5A1F !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
}

/* Certification title under the name (FIX 3: tight spacing) */
.CertLearnerName::after {
  content: "Dext Certified Expert";
  display: block;
  margin-top: 6px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
}

/* FIX 4: position the date against the whole certificate, not the inner text column */
.CertBodyWrapper *:has(.CertEarnedOn) {
  position: static !important;
}

/* "Earned on" -> "Certified on", top right corner */
.CertBodyWrapper .CertEarnedOn {
  position: absolute !important;
  top: 4% !important;
  right: 3.5% !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: right !important;
  line-height: 1.2 !important;
  font-family: "Inter", Arial, sans-serif !important;
  z-index: 10 !important;
}

/* FIX 3: no gap between "Certified on" and the date */
.CertEarnedOn .Label {
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.CertEarnedOn .Label::before {
  content: "Certified on";
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  color: #555555;
}

.CertEarnedOn .Value {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #444444 !important;
}

/* FIX 5: small Dext U logo, bottom left */
.CertLogo,
.CertLogo img {
  width: 62px !important;
  max-width: 62px !important;
  height: auto !important;
}


/* ==========================================================
   ACADEMY TYPOGRAPHY
   ========================================================== */

.AL_Custom_BannerMainHeading {
  font-family: "Work_Sans", "Work Sans", Arial, sans-serif !important;
  color: #440801 !important;
}

.AL_Custom_BannerSubHead {
  font-family: "Inter", Arial, sans-serif !important;
  color: #440801 !important;
}

.AL_Custom_TabBarTab {
  font-family: "Work_Sans", "Work Sans", Arial, sans-serif !important;
}


/* ==========================================================
   COURSE TILES
   ========================================================== */

.AL_Custom_CardTitle {
  font-family: "Work_Sans", "Work Sans", Arial, sans-serif !important;
  color: #440801 !important;
}

.AL_Custom_CardDescription {
  font-family: "Inter", Arial, sans-serif !important;
}

.AL_Custom_ContentTypeLabel,
.AL_Custom_PCDuration,
.AL_Custom_CardCta {
  font-family: "Inter", Arial, sans-serif !important;
}


/* ==========================================================
   OTHER ACADEMY CUSTOMISATION
   ========================================================== */

.AL_Custom_TabBarTab[href*="/certifications"] {
  display: none !important;
}

.AL_Custom_Footer {
  display: none !important;
}


/* ==========================================================
   LEARNING PATH / MODULE CARD ACCENTS
   ========================================================== */

.AL_Custom_PathCard,
.AL_Custom_PathStepCard,
.AL_Custom_PCCard {
  border-top-color: #440801 !important;
}

.AL_Custom_PathCard::before,
.AL_Custom_PathStepCard::before,
.AL_Custom_PCCard::before {
  background-color: #440801 !important;
  border-color: #440801 !important;
}

.AL_Custom_PathConnector,
.AL_Custom_PathConnectorDot,
.AL_Custom_PathProgressLine,
.AL_Custom_PathProgressDot {
  background-color: #440801 !important;
  border-color: #440801 !important;
}

.AL_Custom_PCModuleBox {
  border-top-color: #440801 !important;
}

/* Keep the middle text above the background image */
.CertCertifiedText,
.CertLearnerName {
  position: relative !important;
  z-index: 5 !important;
}