/* Social proof popup (real enrollments, reviews, popular courses). */
.djp {
	--djp-ink: #0E1430; --djp-ink-2: #4B5475; --djp-line: #E6E9F2; --djp-blue: #0A6BD6;
	position: fixed; z-index: 9980; left: 20px; bottom: 20px; width: 360px; max-width: calc(100vw - 112px);
	font-family: "Inter", "Hind", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.011em; color: var(--djp-ink);
	opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); pointer-events: none;
	transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
}
.djp.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.djp-link {
	display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 12px; border-radius: 18px;
	background: rgba(255,255,255,.96); border: 1px solid var(--djp-line);
	box-shadow: 0 1px 2px rgba(14,20,48,.06), 0 24px 48px -20px rgba(14,20,48,.35);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	color: inherit !important; text-decoration: none !important;
}
.djp-link:hover { border-color: #BFD7F5; }
.djp-img { position: relative; flex: none; width: 54px; height: 54px; border-radius: 12px; background: #E8F2FD center / cover no-repeat; }
.djp-badge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1FAF5A; color: #fff; box-shadow: 0 0 0 2px #fff; }
.djp-badge svg { width: 11px; height: 11px; }
.djp-tx { display: grid; gap: 2px; min-width: 0; }
.djp-head { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 500; color: var(--djp-ink-2); }
.djp-body { font-size: .88rem; line-height: 1.35; color: var(--djp-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.djp-body strong { font-weight: 600; }
.djp-body q { font-style: italic; quotes: "\201C" "\201D"; }
.djp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; font-size: .72rem; color: #7A82A0; min-width: 0; }
.djp-meta > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.djp-ok { display: inline-flex; align-items: center; gap: 4px; color: #0B8F6B; font-weight: 600; }
.djp-ok svg { width: 11px; height: 11px; }
.djp-stars { display: inline-flex; gap: 1px; }
.djp-stars svg { width: 12px; height: 12px; fill: #F5A623; }
.djp-hot { display: inline-flex; align-items: center; gap: 5px; color: #D9480F; font-weight: 600; }
.djp-hot svg { width: 13px; height: 13px; }
.djp-x {
	position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px; padding: 0;
	background: transparent; color: #9AA2BC; font: 400 20px/1 system-ui, sans-serif; cursor: pointer;
}
.djp-x:hover { background: #F0F2F8; color: var(--djp-ink); }

/* Phones: full width at the bottom, clear of the WhatsApp button on the right. */
@media (max-width: 600px) {
	.djp { left: 12px; bottom: 12px; width: auto; right: 84px; max-width: none; }
	.djp-link { padding: 10px 30px 10px 10px; border-radius: 16px; gap: 10px; }
	.djp-img { width: 44px; height: 44px; border-radius: 10px; }
	.djp-body { font-size: .82rem; }
	.djp-head { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
	.djp, .djp.is-on { transition: opacity .2s; transform: none; }
}

/* Dark mode (site toggle). */
:root[data-theme="dark"] .djp { --djp-ink: #EEF1FA; --djp-ink-2: #B4BCD6; --djp-line: #2A3352; }
:root[data-theme="dark"] .djp-link { background: rgba(19,25,46,.96); box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
:root[data-theme="dark"] .djp-badge { box-shadow: 0 0 0 2px #131A2E; }
:root[data-theme="dark"] .djp-x:hover { background: #222B48; }
:root[data-theme="dark"] .djp-ok { color: #3DD6A0; }

/* Hide the "student enrolled" popup while the counselling card is open */
body:has(#pvLead:not([hidden])) .djp { display: none !important; }