/* =============================================================================
   CERTIFICATE — certificate verification + certificate display
   Applied: templates/certificate-valid/ | verify-certificate page
   Key selectors: .c-name | .c-course | .c-date | .c-id
                  #certificateVarify → (shared with footer, see _footer.css)
   ============================================================================= */

/* ---- Certificate text overlays on certificate image ---- */
.c-name {
  top: 23% !important;
  font-size: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.c-course {
  top: 32% !important;
  font-size: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.c-date {
  top: 43% !important;
  font-size: 7px !important;
  left: 14% !important;
}
.c-id {
  top: 33% !important;
  font-size: 7px !important;
  left: 62% !important;
}

/* ---- Responsive certificate overlays (640px) ---- */
@media only screen and (max-width: 640px) {
  .modal-max-w {
    max-width: 475px;
    margin: 0 auto;
  }
  .c-name {
    top: 30.5% !important;
    font-size: 0.7rem !important;
  }
  .c-course {
    top: 39% !important;
    font-size: 0.5rem !important;
  }
  .c-date {
    width: 100%;
    top: 40.4% !important;
    font-size: 0.3rem !important;
    left: 108% !important;
  }
  .c-id {
    width: 100%;
    top: 44% !important;
    font-size: 0.3rem !important;
    left: 102% !important;
  }
}

/* ---- Responsive certificate overlays (475px) ---- */
@media only screen and (max-width: 475px) {
  .modal-max-w {
    max-width: 320px;
    margin: 0 auto;
  }
  .c-name {
    top: 17.5% !important;
    font-size: 0.5rem !important;
  }
  .c-course {
    top: 22.5% !important;
    font-size: 0.4rem !important;
  }
  .c-date {
    width: 100%;
    top: 21% !important;
    font-size: 0.3rem !important;
    left: 108% !important;
  }
  .c-id {
    width: 100%;
    top: 23% !important;
    font-size: 0.3rem !important;
    left: 102% !important;
  }
}