/* Course card badge: premium glass pill on the card photo, accent per badge */
.product-img .course-flag{
    --cf-a: #2563eb;
    --cf-b: #60a5fa;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    backdrop-filter: blur(8px) saturate(1.15);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 10px 24px -10px rgba(2,6,23,.45),
                0 2px 6px rgba(2,6,23,.14),
                inset 0 1px 0 rgba(255,255,255,.95);
    font-family: 'Inter','Poppins',system-ui,-apple-system,sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #14213d;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.product-img .course-flag__dot{
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cf-a), var(--cf-b));
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--cf-a) 18%, transparent),
                0 1px 3px color-mix(in srgb, var(--cf-a) 45%, transparent);
    animation: courseFlagPulse 2.8s ease-in-out infinite;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
    .product-img .course-flag__dot{ box-shadow: 0 1px 3px rgba(2,6,23,.25); }
}
@keyframes courseFlagPulse{
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(.78); opacity: .82; }
}
@media (prefers-reduced-motion: reduce){
    .product-img .course-flag__dot{ animation: none; }
}
@media (max-width: 520px){
    .product-img .course-flag{
        top: 10px;
        right: 10px;
        gap: 7px;
        padding: 7px 12px 7px 10px;
        font-size: 14px;
        letter-spacing: .08em;
    }
    .product-img .course-flag__dot{ width: 8px; height: 8px; }
}
/* Left corner placement, chosen per course in the admin */
.course-flag.course-flag--left{ left: 14px; right: auto; }
@media (max-width: 520px){ .course-flag.course-flag--left{ left: 10px; } }
/* Size chosen per course in the admin */
.course-flag.course-flag--small{ padding: 6px 11px 6px 9px; font-size: 14px; gap: 6px; letter-spacing: .08em; }
.course-flag.course-flag--small .course-flag__dot{ width: 7px; height: 7px; }
.course-flag.course-flag--large{ padding: 10px 17px 10px 15px; font-size: 14px; gap: 9px; }
.course-flag.course-flag--large .course-flag__dot{ width: 11px; height: 11px; }
@media (max-width: 520px){
    .course-flag.course-flag--small{ padding: 5px 10px 5px 8px; font-size: 14px; }
    .course-flag.course-flag--large{ padding: 8px 14px 8px 12px; font-size: 14px; }
}
/* Colour fill style: gradient pill with white text */
.course-flag.course-flag--solid{
    background: linear-gradient(135deg, var(--cf-a), var(--cf-b));
    border-color: rgba(255,255,255,.35);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(2,6,23,.18);
}
.course-flag.course-flag--solid .course-flag__dot{
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 0 2.5px rgba(255,255,255,.28);
}
/* Premium design gallery: every style follows the badge accent colours */
.course-flag.course-flag--liquid{
    background: linear-gradient(135deg, color-mix(in srgb, var(--cf-a) 30%, rgba(255,255,255,.6)), color-mix(in srgb, var(--cf-b) 24%, rgba(255,255,255,.5)));
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-color: rgba(255,255,255,.6);
    color: #0b1324;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
                inset 0 -8px 14px -10px color-mix(in srgb, var(--cf-b) 45%, transparent),
                0 10px 26px -10px color-mix(in srgb, var(--cf-a) 60%, rgba(2,6,23,.4));
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
    .course-flag.course-flag--liquid{ background: rgba(255,255,255,.72); box-shadow: 0 10px 24px -10px rgba(2,6,23,.45); }
}
.course-flag.course-flag--noir{
    background: rgba(10,16,32,.72);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border-color: rgba(255,255,255,.25);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(2,6,23,.35);
}
.course-flag.course-flag--noir .course-flag__dot{
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--cf-b) 70%, transparent), 0 0 0 2px rgba(255,255,255,.18);
}
.course-flag.course-flag--outline{
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, var(--cf-a), var(--cf-b)) border-box;
    border: 2px solid transparent;
    color: #14213d;
}
.course-flag.course-flag--ink{
    background: #ffffff;
    border-color: rgba(15,23,42,.12);
}
.course-flag.course-flag--ink .course-flag__txt{
    background: linear-gradient(135deg, var(--cf-a), var(--cf-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.course-flag.course-flag--aurora{
    background: linear-gradient(120deg, var(--cf-a), var(--cf-b), var(--cf-a));
    background-size: 220% 220%;
    animation: courseFlagAurora 6s ease-in-out infinite;
    border-color: rgba(255,255,255,.4);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(2,6,23,.18);
}
.course-flag.course-flag--shimmer{
    background: linear-gradient(135deg, var(--cf-a), var(--cf-b));
    border-color: rgba(255,255,255,.4);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(2,6,23,.18);
    overflow: hidden;
}
.course-flag.course-flag--shimmer::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: courseFlagShine 3.4s ease-in-out infinite;
}
.course-flag.course-flag--noir .course-flag__dot,
.course-flag.course-flag--aurora .course-flag__dot,
.course-flag.course-flag--shimmer .course-flag__dot{
    background: rgba(255,255,255,.92);
}
@keyframes courseFlagAurora{ 0%, 100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
@keyframes courseFlagShine{ 0%, 55%{ transform: translateX(-120%); } 85%, 100%{ transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce){
    .course-flag.course-flag--aurora{ animation: none; }
    .course-flag.course-flag--shimmer::after{ animation: none; }
}