/* Shared module-card flags: prerequisite lock + content-updated + popup.
   Used by the My Courses and Dashboard blocks. */

.module-item .card { position: relative; }

/* Prerequisite lock icon (top-left) */
.prereq-lock-icon {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 1px solid #e0e0e0;
    display: flex; align-items: center; justify-content: center; cursor: help;
}
.prereq-lock-icon img { width: 16px; height: 16px; }
.prereq-lock-icon .dashicons { color: #b26a00; font-size: 18px; width: 18px; height: 18px; }

/* Content-updated "New" pill (top-left, theme green) */
.cg-update-pill {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 24px; padding: 0 12px;
    /* background: #325B50;  */
        border: 2px solid #ffffff;
    color: #fff; border-radius: 12px;
    font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 700;
    line-height: 1; letter-spacing: .3px; cursor: help;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Shared tooltip for the corner indicators */
.prereq-lock-icon::after, .cg-update-pill::after {
    content: attr(data-tip);
    position: absolute; top: 115%; right: 0;
    background: #1d2327; color: #fff; font-size: 12px; line-height: 1.3;
    padding: 6px 10px; border-radius: 4px; width: 200px; white-space: normal;
    font-weight: 400; letter-spacing: 0; text-align: left;
    opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 10;
}
/* both indicators sit top-left, so anchor their tooltips to the left edge */
.prereq-lock-icon::after, .cg-update-pill::after { right: auto; left: 0; }
.prereq-lock-icon:hover::after, .prereq-lock-icon:focus::after,
.cg-update-pill:hover::after, .cg-update-pill:focus::after { opacity: 1; visibility: visible; }

/* Content-updated message */
.cg-update-msg {
    font-size: 13px; color: #b26a00; margin-top: 8px;
    background: #fff4e5; border-left: 3px solid #ffb84d; padding: 6px 8px; border-radius: 3px;
}

/* "Please complete previous module" popup (created by JS) */
#cmr-prereq-popup {
    position: fixed; inset: 0; z-index: 100000; display: none;
    align-items: center; justify-content: center;
}
#cmr-prereq-popup .cmr-pp-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#cmr-prereq-popup .cmr-pp-box {
    position: relative; background: #fff; max-width: 420px; width: calc(100% - 40px);
    border-radius: 6px; padding: 24px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
#cmr-prereq-popup .cmr-pp-box .dashicons { color: #b26a00; font-size: 34px; width: 34px; height: 34px; }
#cmr-prereq-popup .cmr-pp-msg { font-size: 16px; margin: 12px 0 20px; color: #1d2327; }

/* Gated in-progress Resume button: dimmed + not-allowed (still clickable to show popup) */
.cmr-locked-btn.cmr-locked-dim {
    opacity: .6;
    cursor: not-allowed;
}

/* Gated module rendered as fully locked (no progress): keep the top-right lock
   icon interactive so its tooltip still shows even though .card.locked disables
   pointer events on the rest of the card. */
.card.locked .prereq-lock-icon { pointer-events: auto; }

/* When the top-left prereq lock icon is present, shift the "New" pill right so
   the two sit side by side instead of overlapping. */
.card.has-prereq-lock .cg-update-pill { left: 46px; }