/* Background blur effect  */
 .blur-active {
     filter: blur(5px);
     pointer-events: none;
     user-select: none;
 }
 /* Slide-in transition */
 .slide-menu {
     transform: translateX(-100%);
     transition: transform 0.35s ease;
 }
 .slide-menu.open {
     transform: translateX(0);
 }
     @keyframes slide-scroll {
         0% {
             transform: translateX(0);
         }
         100% {
             transform: translateX(-50%);
         }
     }
     
     /* Active nav link (.nav-active) now defined once in base.html */
     /* Compact training material cards */
     .card-sm img {
         height: 8.5rem; /* a bit smaller than before */
     }
     .card-sm h3 {
         font-size: 0.9rem; /* smaller than text-lg */
     }
     .card-sm p,
     .card-sm span {
         font-size: 0.65rem; /* mobile: further reduced */
     }
     /* Tablet and desktop: larger fonts */
     @media (min-width: 640px) {
         .card-sm p,
         .card-sm span {
             font-size: 0.8rem;
         }
     }
     /* Material cards take their look from .tr-card (training-resources.css),
        whose pointer cursor implies the whole card is a link; only the image
        and the title are. Same as .trainer-card on Search Trainers. */
     .material-card {
         cursor: auto;
     }
     /* Filter sidebar smaller text (panel styles: .tr-panel; sticky / collapse:
        page-search.css) */
     .filter-sidebar span,
     .filter-sidebar label,
     .filter-sidebar button {
         font-size: 0.8rem;
     }
     /* E-Learning card (.elearning-slot, Elearning/_enquiry_section.html) in
        the filter column. Only company accounts get one; for anyone else the
        slot is empty and takes no room. */
     .elearning-slot:not(:has(*)) {
         display: none;
     }
     /* Below lg the aside is display: contents (page-search.css), so the slot
        and the panel are items of the page column: the card takes the top
        spot, and the panel follows at the column's own gap. */
     @media (max-width: 1023.98px) {
         .elearning-slot {
             order: -1;
             margin-top: 1.25rem;
         }
         .filter-aside:has(.elearning-slot > *) .filter-sidebar {
             margin-top: 0;
         }
     }
     /* From lg the whole aside sticks, panel and card together, instead of
        the panel alone. The panel's mt-5 moves to the aside, so it sits and
        sticks where it did; when both do not fit under the header, the panel
        gives way and its options scroll. */
     @media (min-width: 1024px) {
         .filter-aside {
             position: sticky;
             top: var(--filter-top);
             align-self: flex-start;
             display: flex;
             flex-direction: column;
             gap: 1.25rem;
             /* margin-top: 1.25rem; */
             max-height: calc(100vh - var(--filter-top) - 16px);
         }
         .filter-aside .filter-sidebar {
             margin-top: 0;
             min-height: 0;
         }
         .elearning-slot {
             flex-shrink: 0;
         }
     }
     /* Corner crown badge on cards */
     .corner-badge {
         position: absolute;
         top: 0;
         right: 0;
         width: 42px;
         height: 42px;
         background: linear-gradient(135deg, #FFDC21, #FB8C0A);
         border-bottom-left-radius: 999px;
         border-top-right-radius: 0.75rem;
         display: flex;
         align-items: center;
         justify-content: center;
     }
     .corner-badge i {
         color: #ffffff;
     }
     /* Filled style for selected footer social icons */
     .footer-social a.fill-icon .lucide {
         fill: currentColor;
         stroke-width: 0;
     }
 /* Sticky header & progress card styles */
 /* Sticky header: sits on top with slight translucency and blur */
     #mainPage {
         position: fixed;
         top: var(--promo-height, 0px);
         left: 0;
         right: 0;
         z-index: 30;
     background: rgba(255,255,255,0.95);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 1px 6px rgba(16,24,40,0.04);
 }