.unitypro-courses-archive .upp-wrap{max-width:1200px}
.unitypro-courses-archive .up-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:680px){.unitypro-courses-archive .up-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.unitypro-courses-archive .up-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.unitypro-courses-archive .up-card{background:#fff;border-radius:12px;box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 24px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column;position:relative;cursor:pointer}
.unitypro-courses-archive .up-hero{position:relative;height:175px;background:#ddd;background-size:cover;background-position:center}
/* Centered badge with icon above text */
.unitypro-courses-archive .up-lock{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;    /* <-- stack vertically */
  align-items:center;
  gap:6px;                  /* space between icon and text */
  padding:10px 12px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border-radius:12px;       /* softer rectangle since it’s taller now */
  font-weight:800;
  z-index:2;
  line-height:1.1;
  text-align:center;
}

.unitypro-courses-archive .up-lock{ gap: 2px !important; }
.unitypro-courses-archive .up-lock i{ font-size:28px; line-height:1; }
.unitypro-courses-archive .up-lock-label{ display:block; line-height:1; margin-top:8px; }



.unitypro-courses-archive .up-body{padding:18px;display:flex;flex-direction:column;min-height:150px}
.unitypro-courses-archive .up-title-sm{font-size:19px;font-weight:900;margin:6px 0 8px}
.unitypro-courses-archive .up-desc{font-size:16px;opacity:.95;margin:0 0 12px}


/* Progress pinned to bottom with % label */
.unitypro-courses-archive .up-progress{margin-top:auto;background:#edf0f3;border-radius:9999px;height:26px;position:relative;overflow:hidden}

.unitypro-courses-archive .up-progress .bar{display:block;height:100%;width:0;background:#2a8c44;border-radius:12px;}

/* label should not be italic even though it's an <em> element */
.unitypro-courses-archive .up-progress .label{
  font-style: normal !important;
  /* (keeping your left alignment from earlier) */
  left: 15px !important; top: 50% !important; transform: translateY(-50%) !important;
  text-align: left !important;
}

/* when there is no progress, make the % text black */
.unitypro-courses-archive .up-progress.is-zero .label{
  color: #333 !important;
}

/* optional (keeps the bar area neutral at 0%) */
.unitypro-courses-archive .up-progress.is-zero .bar{
  background: transparent !important;
}


/* Anchor overlay only for unlocked */
.unitypro-courses-archive .up-card .up-hit{position:absolute;inset:0;z-index:2}
.unitypro-courses-archive .up-card.is-locked .up-hit{display:none}
/* Modal */
#up-course-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:2147483647}
#up-course-modal[hidden]{display:none}
#up-course-modal .up-modal{background:#fff;color:#333;border-radius:16px;max-width:400px!important;width:52%;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.45)}
/* Match grid card hero exactly inside the modal */
#up-course-modal .up-hero{
  position: relative;
  height: 175px !important;         /* grid uses 200px */
  background: #ddd;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Make the top corners flush like the card */
#up-course-modal .up-modal{
  border-radius: 12px;
  overflow: hidden;                  /* clip hero corners */
}
#up-course-modal .up-inner{padding:22px;background:#fff;}
#up-course-modal .up-inner h3{font-size:22px;margin:0 0 4px;font-weight:600}
#up-course-modal .up-inner p{opacity:.9;margin:0 0 18px;color:#353535;}
#up-course-modal .up-actions{display:flex;gap:10px;flex-wrap:wrap}
#up-course-modal .up-actions a{background:#16a34a;color:#fff;border-color:#16a34a;border-radius:10px;padding:10px 12px;text-decoration:none;font-weight:800}

/* Red primary button */
#up-course-modal .unlockb {
  display:inline-flex;
  width:100%;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #911016!important;          /* dark red border */
  background:#911016 !important;                 /* red-600 */
  color:#fff;
  font-weight:600 !important;
  text-decoration:none;
  cursor:pointer;
  font-size:17px;
  letter-spacing: .06em; 
}

/* Hover */
#up-course-modal .unlockb:hover {
  background:#b91c1c;                 /* red-700 */
}

/* Active (pressed) */
#up-course-modal .unlockb:active {
  transform:translateY(1px) scale(.99);
  background:#991b1b;                 /* red-800 */
  box-shadow:0 2px 10px rgba(153,27,27,.35);
}

/* Keyboard focus */
#up-course-modal .unlockb:focus-visible {
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(248,113,113,.55); /* soft red focus ring */
}


/* === Lock progress bar to the card bottom, always === */

/* make the card the positioning context */
.unitypro-courses-archive .up-card{ position:relative !important; }

/* stop positioning to .up-body; just keep extra padding for the bar space */
.unitypro-courses-archive .up-body{
  position:static !important;              /* was relative; anchor to card instead */
  padding:18px 18px 42px !important;       /* 42 = bar(12) + bottom gap(18) + buffer */
  min-height:150px;
  display:flex;
  flex-direction:column;
}

/* place bar at the card's bottom, not the body's */
.unitypro-courses-archive .up-progress{
  position:absolute !important;
  left:18px; right:18px; bottom:18px;      /* same spacing on every card */
 margin:0 !important;
 border-radius:9999px; overflow:hidden;
}

/* keep grid items stretching and equal height */
.unitypro-courses-archive .up-grid > .up-card,
.unitypro-courses-archive .up-grid > article.up-card{ height:100% !important; }

/* bar + label unchanged */
.unitypro-courses-archive .up-progress .bar{height:100%;  display:block}
.unitypro-courses-archive .up-progress .label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25);
  pointer-events:none;
}