body {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.input_certificate {
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  transition: border-color .3s, box-shadow .3s;
}

.btn-verify {
  background-color: #066ccb !important;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.btn-verify:hover {
  background-color: #fff !important;
  border: 1px solid #066ccb !important;
  color: #066ccb !important;
}

.input_certificate_code {
  width: 100%;
  background-color: white;
}

.input_certificate_code:focus {
  outline: none;
  border-color: #06539c !important;
  box-shadow: 0 0 0 3px rgba(6, 108, 203, .12);
}

.input_certificate_code.error {
  border: 1px solid red;
}

#verfiy_certificate_form {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .25s ease, box-shadow .25s ease;
}

.input_container_input {
  width: 80%;
}

.input_verify_container {
  width: 20%
}

@media (max-width: 768px) {
  .input_container {
    flex-direction: column;
    gap: 10px !important;
  }

  .input_container_input {
    width: 100%;
  }

  .input_verify_container {
    width: 100%
  }
}

@media (max-width:500px) {
  .cert-badge-icon {
    display: none !important;
  }

  .cert-card-header {
    padding: 15px !important;
  }

  .cert-detail-item {
    padding: 10px 0 !important;
  }
}

/* ── Loading Spinner ── */
.loading-spinner {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.loading-spinner.active {
  display: block;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #066ccb;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: #066ccb;
  font-weight: 600;
  margin-top: 10px;
}

.display_result.show {
  display: block !important;
}

.display_result.hide {
  display: none !important;
}

.certificate_display {
  display: none;
}

.certificate_display.show {
  display: block;
}

.error-message {
  display: none;
}

.error-message.show {
  display: block;
}

.error-message.revoked {
  background-color: #fef2f2;
  border-color: #fecaca !important;
}

.contact_error_message.show {
  display: block
}

/* ── Review prompt (P212) ──
 *
 * The fifth result panel, shown instead of the certificate until the visitor rates
 * or skips. Buttons rather than radios: arrow keys on a radio group select as they
 * move, and selecting 4 opens Google — a keyboard user stepping 1→4 would open it
 * by accident. A button only acts on click, Enter or Space.
 */
.review-prompt {
  display: none;
}

.review-prompt.show {
  display: block;
}

.star-rating {
  display: flex;
  justify-content: center;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
}

.star-rating button {
  background: none;
  border: 0;
  padding: 4px;
  font-size: 2.5rem;
  line-height: 1;
  /* gray-500: 4.6:1 on the panel's bg-main-25. gray-300 was 1.4:1 — the only control on
     the panel, barely there. */
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease;
}

/* Lit = filled amber, unlit = outline grey: the state is carried by shape as well as colour.
   Both glyphs are in the markup; these rules show one of them. */
.star-rating .star-on {
  display: none;
}

.star-rating button:not(:disabled):hover,
.star-rating button.is-on {
  color: #f59e0b;
}

.star-rating button:not(:disabled):hover .star-off,
.star-rating button.is-on .star-off {
  display: none;
}

.star-rating button:not(:disabled):hover .star-on,
.star-rating button.is-on .star-on {
  display: inline;
}

/* Paint every star up to the one under the pointer. `:has()` is evergreen since late 2023;
   a browser that cannot parse it drops the whole rule it appears in — so it lives in its own
   rules, and the rules above (hover on the one star, the chosen `.is-on` set) survive there. */
.star-rating button:has(~ button:not(:disabled):hover) {
  color: #f59e0b;
}

.star-rating button:has(~ button:not(:disabled):hover) .star-off {
  display: none;
}

.star-rating button:has(~ button:not(:disabled):hover) .star-on {
  display: inline;
}

.star-rating button:focus-visible {
  outline: 3px solid #066ccb;
  outline-offset: 2px;
  border-radius: 8px;
}

.star-rating button:disabled {
  cursor: default;
}

.review-feedback {
  max-width: 560px;
}

/* The prompt is text-center; typed feedback should not be. */
.review-feedback textarea {
  text-align: start;
}

/* `.btn` in the frozen build is block-level flex, so text-align cannot centre it. */
.review-feedback .btn {
  margin-inline: auto;
}

/* ── Forgot Certificate Number ── */
.forgot-input.error {
  border: 1px solid oklch(57.7% 0.245 27.325);
}

/* ── Course select ──
 *
 * A native <select>. It replaced a div-soup replica (trigger div, options div,
 * one div per option) that was unreachable by keyboard and silent to screen
 * readers. The open/close behaviour, the option highlight, the dropdown
 * positioning and the mobile wheel picker are all the browser's now, which is
 * the entire point of using the real control.
 *
 * The arrow is the one thing that has to be drawn back: `.form-control` in the
 * frozen app.min.css sets `appearance: none`, which strips the native one — so
 * without this the field looks exactly like the text input above it and nothing
 * says it opens. Inline SVG rather than a font icon: no extra request, and it
 * cannot arrive late the way the Phosphor chevron the replica used did.
 */
#forgotCourse {
  transition: border-color 0.2s ease;
  border: 1px solid #e5e7eb;
  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%239ca3af'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px 14px;
  /* Logical, so long course titles never run under the arrow in either direction. The start value
     matches the `px-20` the email field above uses; that utility is deliberately NOT on the select,
     because it is `padding-inline: … !important` and would flatten the end padding back to 20px. */
  padding-inline-start: 20px;
  padding-inline-end: 48px;
}

[dir="rtl"] #forgotCourse {
  background-position: left 20px center;
}

#forgotCourse:hover {
  border-color: #d1d5db;
}

#forgotCourse:focus {
  border-color: #066ccb;
}

/* Matches `.forgot-input.error` on the email field above it. */
#forgotCourse.error {
  border-color: oklch(57.7% 0.245 27.325);
}

/* ── Certificate Result Card ── */
.cert-result-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2eaf4;
  box-shadow: 0 4px 24px rgba(6, 83, 156, .08);
  overflow: hidden;
}

.cert-card-header {
  background: linear-gradient(135deg, #066ccb 0%, #06539c 100%);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cert-badge-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-badge-icon svg {
  width: 26px;
  height: 26px;
}

.cert-card-header-text h4 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 2px;
}

.cert-card-header-text span {
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  font-weight: 500;
}

.cert-status-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 20px;
  padding: 4px 13px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.cert-status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
}

.cert-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 28px;
}

@media (max-width: 576px) {
  .cert-details-grid {
    grid-template-columns: 1fr;
    padding: 0 18px;
  }
}

.cert-detail-item {
  padding: 17px 0;
  border-bottom: 1px solid #f0f4f9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cert-detail-item:nth-child(odd) {
  padding-right: 24px;
  border-right: 1px solid #f0f4f9;
}

.cert-detail-item:nth-child(even) {
  padding-left: 24px;
}

@media (max-width: 576px) {
  .cert-detail-item:nth-child(odd) {
    padding-right: 0;
    border-right: none;
  }

  .cert-detail-item:nth-child(even) {
    padding-left: 0;
  }
}

.cert-detail-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.cert-detail-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #8da3be;
}

.cert-detail-value {
  font-size: .95rem;
  font-weight: 600;
  color: #1a2e44;
}

/* ===================================================================
   Printable certificate template (components/certificate.php port)
   =================================================================== */
:root {
  --certi_blue: #1f4e9d;
  --certi_gold: #f0a90a;
  --certi_navy: #024E81;
  --certi_text: #14264D;
  --certi_bronze: #D0942A;
  --certi_lines: #9D732A;
  --certi_accent: #1859A8;
  --certi_bg_cream: #f1ead9;
  --certi_border_tan: #DFBE86;
  --certi_border_blue: #0054A3;
  --certi_corner_gold: #FCC42B;
  --certi_corner_blue: #356BAC;
  --certi_meta_dark: #423219;
  --certi_white: #ffffff;
}

.certi_viewport {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
}

.certi_wrap {
  position: relative;
  width: 1120px;
  height: 794px;
  flex-shrink: 0;
  transform-origin: top center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  background: var(--certi_white);
}

.certi_corner {
  position: absolute;
  width: 90mm;
  height: 45mm;
  z-index: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_corner-tr {
  top: 0;
  right: 0;
  background: var(--certi_corner_gold);
}

.certi_corner-bl {
  bottom: 0;
  left: 0;
  background: var(--certi_corner_blue);
}

.certi_cert {
  position: absolute;
  inset: 8mm;
  padding: 6mm;
  z-index: 1;
  border: 4px solid var(--certi_border_blue);
  background: var(--certi_white);
  color: var(--certi_meta_dark);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Was PatternBg.png, 634 KB. Re-encoded to WebP q90 at 33 KB — a flat cream pattern, so the
     measured difference is a mean of 1.07/255 per channel. This loads on /verify-certificate and
     in the Browsershot PDF; Chromium has decoded WebP since long before either. */
  background: url('/images/certificate/PatternBg.webp') center/cover no-repeat;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8mm;
}

.certi_meta {
  font-size: 11pt;
  color: var(--certi_meta_dark);
}

.certi_meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4mm;
  white-space: nowrap; /* a long certificate number must not push ":" or the ID onto a second line */
}

.certi_meta-line {
  flex: 1;
  border-bottom: 1px dashed var(--certi_lines);
  height: 1em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_meta-right {
  text-align: right;
}

.certi_meta-right div {
  margin-bottom: 4mm;
}

.certi_logo {
  height: 85px;
  text-align: center;
}

.certi_logo svg {
  width: 28mm;
  height: auto;
}

/* The logo <img> carried its sizing in `h-100 w-100 cover-img` — utilities that live in
   app.min.css. The PDF template does not load app.min.css, so in the generated certificate the
   image rendered at its natural size, overflowed the 85px header slot and dropped the wordmark
   straight on top of the CERTIFICATE title. Sized here so it does not depend on a stylesheet the
   PDF has never loaded. Values match what the utilities compute to on the web page: 164x85. */
.certi_logo img {
  height: 85px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  display: inline-block;
}

.certi_blue {
  color: var(--certi_blue);
}

.certi_gold {
  color: var(--certi_gold);
}

.certi_title {
  font-family: "Cinzel", serif;
  font-weight: 900;
  color: var(--certi_navy);
  text-align: center;
  font-size: 46pt;
  letter-spacing: 0.05em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.certi_subtitle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  position: relative;
  z-index: 1;
}

.certi_subtitle {
  font-family: "Cinzel", serif;
  color: var(--certi_bronze);
  letter-spacing: 1px;
  font-size: 14pt;
}

.certi_flourish-left {
  position: relative;
  height: 1px;
  width: 100px;
  background: var(--certi_lines);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_flourish-left::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: var(--certi_lines);
}

.certi_flourish-right {
  position: relative;
  height: 1px;
  width: 100px;
  background: var(--certi_lines);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_flourish-right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: var(--certi_lines);
}

.certi_flip {
  transform: scaleX(-1);
}

.certi_text {
  text-align: center;
  color: var(--certi_text);
  /* Montserrat Medium at 13.5pt, measured against the reference design (certificatemodal.webp) at
     its native 3508px: the reference's body lines are 1.14x taller with 1.4x thicker stems than
     the Regular 12pt this used to be. Same face, different cut. */
  font-size: 13.5pt;
  font-weight: 500;
  margin: 6mm 0 0;
  position: relative;
  z-index: 1;
}

.certi_name-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 0;
  width: 75%;
  position: relative;
  z-index: 1;
}

.certi_rule {
  flex: 1;
  height: 1px;
  width: 80%;
  background: var(--certi_lines);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_rule::before,
.certi_rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: var(--certi_lines);
}

.certi_rule::after {
  right: auto;
  left: 0;
}

.certi_course-line {
  margin: 0 auto 0;
  width: 49%;
  border-top: 1.5px dashed var(--certi_lines);
  position: relative;
  z-index: 1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_text-capitalize {
  text-transform: capitalize;
}

.certi_providedby {
  text-align: center;
  color: #14264d;
  font-size: 13.5pt; /* was 11.5pt; the reference measures 1.18x taller — see .certi_text */
  font-weight: 500;
  line-height: 1.7;
  margin: 6mm 0 0;
  position: relative;
  z-index: 1;
}

.certi_accent {
  color: var(--certi_accent);
}

.certi_verify {
  text-align: center;
  position: relative;
  z-index: 1;
}

.certi_qr {
  width: 22mm;
  height: 22mm;
  display: block;
  margin: 0 auto 1mm;
}

/* Beside the chairperson's signature, in normal flow. It was absolutely positioned at the centre
   of the footer, which put the company seal on top of the QR code — and needed a magic
   `left: -61%` in both the print stylesheet and verify-certificate.js to be dragged somewhere
   legible. Laying it out instead of positioning it removes all three. */
.certi_stamp {
  width: 30mm;
  height: 31mm;
  visibility: visible;
  flex-shrink: 0;
}

.certi_stamp_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.certi_footer-left {
  display: flex;
  align-items: flex-end;
  gap: 5mm;
}

.certi_verify-text {
  font-size: 9pt;
  color: var(--certi_text);
  margin: 0;
}

.certi_verify-link {
  font-size: 9pt;
  color: var(--certi_accent);
  margin: 0;
}

/* `1fr auto 1fr` — the same grid the header uses for the logo, so the QR block lands on exactly
   the certificate's vertical centre line and therefore directly below the logo.
   `justify-content: space-between` on a flex row cannot do this: it distributes leftover space
   between three items of unequal width, so the middle one drifts. Adding the company stamp beside
   the chairperson widened the left item and pushed the QR right, which is what surfaced it. */
.certi_footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  flex-shrink: 0;
  align-items: end;
  position: relative;
  z-index: 1;
}

.certi_footer-left {
  justify-self: start;
}

.certi_verify {
  justify-self: center;
}

.certi_sign {
  text-align: center;
  min-width: 50mm;
}

.certi_sign-line {
  position: relative;
  width: 100%;
  height: 2px;
  margin-bottom: 3mm;
  overflow: visible;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.certi_sign-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--certi_navy);
}

.certi_instructor_sign,
.certi_chairperson_sign {
  position: absolute;
  bottom: 2px;
  right: 50%;
  transform: translateX(50%);
  max-height: 50px;
  width: auto;
}

.certi_sign-name {
  color: var(--certi_blue);
  font-size: 12pt;
}

.certi_sign-role {
  color: black;
  font-size: 10pt;
  margin-top: 1mm;
}

/* The instructor block occupies the footer grid's right column, mirroring the chairperson on the
   left. `max-width: 55%` was sized for the old flex row; in the grid the column already bounds it. */
.certi_instructors {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 4mm 6mm;
  justify-self: end;
  max-width: 100%;
}

.certi_sign-compact {
  min-width: 32mm;
  max-width: 40mm;
}

.certi_sign-compact .certi_instructor_sign {
  max-height: 40px;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  .cert-detail-item,
  #forgotCertificateSection,
  .getStarted,
  .footer {
    display: none;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 297mm !important;
    height: 210mm !important;
    background: #fff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .no-print {
    display: none !important;
  }

  .certi_viewport {
    display: block !important;
    width: 297mm !important;
    height: 210mm !important;
    position: absolute !important;
    box-sizing: border-box;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
  }

  .certi_wrap {
    width: 297mm !important;
    height: 210mm !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .certi_sign-line {
    overflow: visible !important;
  }

  .certi_instructor_sign,
  .certi_chairperson_sign {
    bottom: 2px !important;
    max-height: 50px !important;
    width: auto !important;
  }

  .certi_sign-compact .certi_instructor_sign {
    max-height: 40px !important;
  }
}

/* Spinner styles */
.certi_spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: certi_spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes certi_spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-loading .certi_spinner {
  display: inline-block;
}

.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}

@media (max-width:576px) {
  .btn-certifiate {
    padding: 10px 20px;
  }

  .btn-loading .certi_spinner,
  .btn-certifiate svg {
    height: 26px;
    width: 26px
  }
}

/* ===================================================================
   Utility fallbacks for the PDF render
   -------------------------------------------------------------------
   certificate-face.blade.php uses utility classes — text-center, fw-semibold,
   my-20, pb-20 and friends — that are defined in app.min.css. The public page
   loads app.min.css via the site layout, so they work there. The PDF template
   (resources/views/pdf/certificate.blade.php) loads only this file, so in the
   generated certificate every one of them was inert: the student's name and the
   course title fell to the left instead of centring, the meta rows lost their
   padding, and "Certificate No :" wrapped onto two lines.

   Adding app.min.css to the PDF template does NOT work — it is Tailwind v4 and
   its preflight reset collapses the certificate to a blank page. Tried and
   rejected.

   Every value below was read from getComputedStyle() on the live verification
   page, where app.min.css is in force, so the PDF now matches what the browser
   shows rather than what the class names suggest. Note `text-bold` computes to
   400 there — it is not a real utility in this build — so it is deliberately
   NOT given a weight here.

   Scoped to .certi_wrap so nothing leaks to the rest of the page, and so these
   win over app.min.css by specificity while carrying identical values.
   =================================================================== */
.certi_wrap .text-center { text-align: center; }
.certi_wrap .fw-normal   { font-weight: 400; }
.certi_wrap .fw-semibold { font-weight: 600; }
.certi_wrap .fw-bold     { font-weight: 700; }
.certi_wrap .text-xl     { font-size: 20px; }
.certi_wrap .text-black  { color: #000; }

.certi_wrap .mb-0  { margin-bottom: 0; }
.certi_wrap .mb-1  { margin-bottom: 1px; }
.certi_wrap .mt-20 { margin-top: 20px; }
.certi_wrap .mb-20 { margin-bottom: 20px; }
.certi_wrap .my-10 { margin-top: 10px; margin-bottom: 10px; }
.certi_wrap .my-20 { margin-top: 20px; margin-bottom: 20px; }

.certi_wrap .pb-20 { padding-bottom: 20px; }
.certi_wrap .ps-5  { padding-left: 5px; }
.certi_wrap .pe-10 { padding-right: 10px; }