@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* =======================================================
 * AURORA CAROUSEL MODULE
 * Glassmorphism cards with animated gradient background
 * Only loads on Advanced Search page
 *========================================================*/
@import url('/images/aurora-carousel.css');

/* =======================================================
 * Spotlight cards MODULE
 *========================================================*/
@import url('/images/spotlight-card.css');

/* =======================================================
 * Instructors cards MODULE
 *========================================================*/
@import url('/images/instructor-cards.css');



/*-----------Header1, topheader.jsp, ((logo, cart, login))-----------------*/

/* =======================================================
 * MOBILE FIXED HEADER (CSS ONLY LAYOUT)
 * Combines Logo, Cart, and Menu into a single sticky bar.
 * Includes "Nuclear" fixes for background colors.
 *========================================================*/

@media (max-width: 767px) {

    /* 1. BODY PADDING (Prevent Content Hiding) */
    /* Pushes content down so the fixed bar doesn't cover it */
    body {
        padding-top: 70px !important;
    }

    /* 2. THE BAR (Header 3 Wrapper) */
    /* Transforms the menu container into the main fixed white bar */
    /* Selector 'body #' used to win specificity wars */
    body #header3Wrapper {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;

        /* --- NUCLEAR BACKGROUND FIX --- */
        /* 1. Shorthand 'background' resets image/color/repeat at once */
        background: #f0f0f0 !important;
        /* 2. Explicitly remove any background image */
        background-image: none !important;

        /* 3. Remove default red border */
        border-top: 0 none !important;

        /* --- Mobile Styling --- */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        /* Stronger shadow for visibility */
        z-index: 1000;
        padding: 0 !important;
        border-bottom: 5px solid #8e2736;
        /* Maroon bottom border */

        /* Font settings (if text appears here) */
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        letter-spacing: -0.002rem;
    }

    /* 2b. INNER CONTAINER FIX (The Maroon Box Reset) */
    /* Forces the inner container to be transparent to show the white wrapper */
    #header3Wrapper #header3Container {
        /* --- COLOR FIX --- */
        background-color: transparent !important;
        background: none !important;

        /* --- LAYOUT RESET --- */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
    }

    /* 2c. GLOBAL NAV BAR FIX (The Overlay Reset) */
    /* Chained selectors to force transparency on the nav element */
    body #header3Wrapper #header3Container nav#globalNavigationBar {
        /* --- FORCE TRANSPARENCY --- */
        background-color: transparent !important;
        background: none !important;

        /* --- RESET PROPERTIES --- */
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        min-height: 60px !important;
    }

    /* 3. THE LOGO (Moved from Header 1) */
    /* Pulls the logo link out of its normal place and fixes it to top-left */
    #schoolHeaderLogoWrapperLink {
        /* --- POSITIONING --- */
        position: fixed !important;
        top: 5px !important;
        /* Vertically centered in 60px bar */
        left: 15px !important;
        /* Left margin */
        z-index: 2001 !important;
        /* HIGHER than the white bar (1000) to be clickable */

        /* --- CLICKABLE AREA & SIZE --- */
        display: block !important;
        width: 40px !important;
        /* Adjust width based on your SVG aspect ratio */
        height: 40px !important;
        /* Adjust height */

        /* --- VISUAL STYLE (SVG Background) --- */
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important;

        cursor: pointer !important;
    }

    /* Hide the original <img> tag (we use background-image) */
    #schoolHeaderLogoWrapperLink img {
        display: none !important;
    }

    /* Reset parent wrapper so it doesn't hide the fixed child */
    #schoolHeaderLogoWrapper {
        display: block !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    /* =======================================================
     * 4. THE CART (Positioned next to "MENU" text)
     * User adjusted 'right' to -25% for specific alignment.
     *========================================================*/

    /* We pull the cart icon out of its normal place */
    #cartInfo {
        position: fixed !important;
        top: 0;

        /* YOUR ADJUSTMENTS: -25% */
        /* Note: Verify this on very wide screens just in case */
        left: 65% !important;

        z-index: 1002;
        /* Above the white bar */
        height: 60px;
        /* Match bar height */

        display: flex !important;
        align-items: center;
        justify-content: center;

        /* Ensure no unexpected inherited widths */
        width: auto !important;
    }

    /* Styling the Cart Link/Icon */
    #cartInfo a#shoppingCartLink {
        font-size: 1.4rem !important;
        color: #34111a !important;
        /* Maroon Color */
        position: relative;
        display: block;
        padding: 10px;
        text-decoration: none !important;
    }

    /* Styling the Badge (The number count) */
    #cartCount {
        position: absolute;
        top: 5px;
        right: -5px;
        background-color: #8e2736 !important;
        font-size: 0.7rem !important;
        padding: 3px 5px;
        border: 2px solid #fff !important;
    }

    /* =======================================================
     * 5. THE BURGER MENU (Fixed "MENU" + Stable Icon)
     * Fixed width on icon prevents text jumping during animation.
     *========================================================*/

    /* 1. Position and Layout Container */
    .navbar-toggler {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 15px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        z-index: 1003;
        border: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;

        transition: all 0.3s ease;
    }

    /* 2. Hide Default SVG */
    .navbar-toggler .navbar-toggler-icon {
        display: none !important;
    }

    /* 3. THE TEXT (::before) - Always "MENU" */
    .navbar-toggler::before {
        content: "MENU";

        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        color: #34111A !important;
        letter-spacing: 0.05rem !important;

        margin-right: 8px !important;
        margin-top: 2px !important;
        min-width: 40px;
        text-align: right;

        transition: color 0.3s ease;
    }

    /* 4. THE ICON (::after) - Burger/X */
    .navbar-toggler::after {
        content: "\f0c9";
        /* fa-bars */

        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
        font-weight: 900;

        color: #34111A !important;
        font-size: 1.6rem !important;
        line-height: 1 !important;

        /* --- STABILIZER (The Jump Fix) --- */
        display: block !important;
        width: 30px !important;
        /* Fixed width so it doesn't change */
        text-align: center !important;
        /* Centers icon in its fixed box */
        /* ---------------------------------------- */

        /* Animation Setup */
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.3s ease;
        transform-origin: center;
    }

    /* =======================================================
     * 5b. OPEN STATE (Animation)
     * Triggered when aria-expanded="true"
     *========================================================*/

    /* A. Change Text Color (Text stays immovable) */
    .navbar-toggler[aria-expanded="true"]::before {
        color: #8b2331 !important;
        /* MacEwan Red */
    }

    /* B. Swap Icon to "X" and Rotate */
    .navbar-toggler[aria-expanded="true"]::after {
        content: "\f00d";
        /* fa-times (The X) */
        color: #8b2331 !important;
        transform: rotate(90deg);
    }

    /* C. Hover State */
    .navbar-toggler:hover::before,
    .navbar-toggler:hover::after {
        color: #8b2331 !important;
    }

    /* =======================================================
     * 6. THE DROPDOWN MENU (When opened)
     * Needs to drop DOWN below the fixed bar (60px)
     *========================================================*/
    .navbar-collapse {
        position: fixed !important;
        top: 60px;
        /* Starts exactly where the bar ends */
        left: 0;
        width: 100%;
        background-color: #fff !important;
        border-top: 0px solid #eee;
        max-height: calc(100vh - 60px);
        /* Full height minus bar */
        overflow-y: auto;
        /* Scrollable */
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    /* =======================================================
     * 7. MOBILE MENU LINKS (Styling & Typography)
     * Customizes the appearance of dropdown items.
     *========================================================*/

    /* A. General Link Style (High Specificity Fix) */
    /* Target: body + ID + class chain to override desktop styles */
    body #mainNavBarCollapsable .navbar-nav .nav-link {
        /* --- Typography & Color --- */
        color: #34111A !important;
        /* Dark Grey */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        text-transform: none !important;
        /* Default state */

        /* --- Layout --- */
        padding: 12px 15px !important;
        /* Touch-friendly target */
        border-bottom: 1px solid #f0f0f0 !important;
        /* Subtle separator */
        position: relative !important;
    }

    /* B. Clean Hover State (No White Box, No Red Line) */
    body #mainNavBarCollapsable .navbar-nav .nav-link:hover,
    body #mainNavBarCollapsable .navbar-nav .nav-link:focus {
        color: #8b2331 !important;
        /* Text turns Red */

        /* Ensure transparency */
        background: transparent !important;
        background-color: transparent !important;

        /* Remove decorations */
        text-decoration: none !important;
        box-shadow: none !important;

        /* Keep the original gray border (prevents jumping) */
        border-bottom: 1px solid #f0f0f0 !important;
        border-top: none !important;
    }

    /* C. RED LINE KILLER (The ::after Fix) */
    /* Hides the desktop red underline animation */
    body #mainNavBarCollapsable .navbar-nav .nav-link::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
    }

    /* D. Divider Line Style */
    #mainNavBarCollapsable .divider {
        border-top: 1px solid #e9ecef !important;
        margin: 5px 0 !important;
        width: 100%;
        display: block;
    }

    /* =======================================================
     * 7b. MENU ITEM SPECIFIC TYPOGRAPHY
     * Differentiates Logins vs Main Links using IDs.
     *========================================================*/

    /* GROUP 1: Logins (Normal Weight) */
    /* IDs: #nav1 (Student), #nav2 (Instructor), #nav3 (Family) */
    body #mainNavBarCollapsable .navbar-nav #nav1,
    body #mainNavBarCollapsable .navbar-nav #nav2,
    body #mainNavBarCollapsable .navbar-nav #nav3 {
        font-weight: 400 !important;
        text-transform: none !important;
        font-size: 0.95rem !important;
    }

    /* GROUP 2: Main Links (Uppercase & Bold) */
    /* IDs: #nav4 (Courses), #nav6 (Programs) */
    body #mainNavBarCollapsable .navbar-nav #nav4,
    body #mainNavBarCollapsable .navbar-nav #nav6 {
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.05rem !important;
        font-size: 1.2rem !important;
    }
}

/* =======================================================
     * 8. MOBILE MENU LAYOUT (Reordering)
     * Uses Flexbox order to move Courses to top, Logins to bottom.
     *========================================================*/

/* 1. Enable Flex Column Layout */
body #mainNavBarCollapsable .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. ORDER 1: Main Links (Courses, Programs) -> Top */
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav4),
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) {
    order: 1 !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* 3. ORDER 2: The Divider -> Middle */
body #mainNavBarCollapsable .navbar-nav .divider {
    order: 2 !important;
}

/* 4. ORDER 3: Logins -> Bottom */
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav1),
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav2),
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav3) {
    order: 3 !important;
    border-bottom: none !important;
    /* No border on last items */
}


/* =======================================================
     * 9. FIX DOUBLE BORDER (Programs Item)
     * Removes the border from the last item of the top group
     * so it doesn't clash with the divider line.
     *========================================================*/

/* Target the List Item containing Programs */
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) {
    border-bottom: none !important;
}

/* Target the Link inside Programs */
body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) .nav-link {
    border-bottom: none !important;
}

/* 10. CLEANUP */
/* Hide desktop login info if it overlaps */
#loginInfo {
    display: none !important;
}


/* ==========================================================================
   MY CAMPUS DROPDOWN - FINAL PRODUCTION VERSION (v4.6.0)
   Project: MacEwan SCE - Shopping Cart Redesign
   Author: Ricardo Alfonso Sanchez (Francotirador Method)
   Framework: Modern Campus (Destiny One) / Font Awesome 5
   ========================================================================== */

/* === 1. BASE DROPDOWN CONTAINER === */
.portalMenuDropDownContainer .dropdown-menu {
    border: none !important;
    border-top: 4px solid #8B2331 !important;
    /* MacEwan Primary Maroon */
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 8px 0 !important;
    margin-top: 0 !important;
    min-width: 300px !important;
    background: #f0f0f0 !important;
    overflow: hidden !important;
}

/* Entrance animation for modern feel */
.portalMenuDropDownContainer .dropdown-menu.show {
    animation: myCampusDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes myCampusDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === 2. MENU ITEMS BASE === */
.portalMenuDropDownContainer .dropdown-item {
    padding: 12px 16px 12px 48px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #171717 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 3px solid transparent !important;
    position: relative !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* === 3. FONT AWESOME 5 ICON BASE === */
.portalMenuDropDownContainer .dropdown-item::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    /* Solid variant required for most icons */
    font-size: 15px !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #171717 !important;
    transition: all 0.2s ease !important;
    width: 18px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* === 4. HOVER & ACTIVE STATES === */
.portalMenuDropDownContainer .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-left-color: #8b2331 !important;
    color: #171717 !important;
}

.portalMenuDropDownContainer .dropdown-item:hover::before {
    color: #8b2331 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Active Page Indicator */
.portalMenuDropDownContainer .dropdown-item.active,
.portalMenuDropDownContainer li.active>.dropdown-item {
    background: #8b2331 !important;
    border-left-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.portalMenuDropDownContainer .dropdown-item.active::before,
.portalMenuDropDownContainer li.active>.dropdown-item::before {
    color: #ffffff !important;
}

/* White dot indicator for the active item */
.portalMenuDropDownContainer .dropdown-item.active::after,
.portalMenuDropDownContainer li.active>.dropdown-item::after {
    content: '' !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

/* === 5. THE GHOST LINK RESURRECTOR (Fix for "My Profile" & "Certificates") === */
/* This section overrides the .disabled-on-click class forced by Modern Campus */
.portalMenuDropDownContainer .dropdown-item.disabled-on-click {
    opacity: 1 !important;
    /* Overriding core 0.5 opacity */
    cursor: pointer !important;
    /* Restoring interaction cursor */
    color: #171717 !important;
    /* Overriding core #95a5a6 grey */
    pointer-events: auto !important;
    /* Ensuring click triggers */
    background: transparent !important;
}

.portalMenuDropDownContainer .dropdown-item.disabled-on-click::before {
    opacity: 1 !important;
    color: #171717 !important;
}

/* Force hover behavior even if the class is present */
.portalMenuDropDownContainer .dropdown-item.disabled-on-click:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    border-left-color: #8B2331 !important;
}

/* === 6. VISUAL GROUPING (Dividers) === */
.portalMenuDropDownContainer .dropdown-item[href*="studentAcademicHistory.do"],
.portalMenuDropDownContainer .dropdown-item[href*="studentCertificates.do"],
.portalMenuDropDownContainer .dropdown-item[href*="taxReceipt.do"] {
    margin-bottom: 6px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(23, 23, 23, 0.12) !important;
}

/* === 7. ICON MAPPING (FA5 Unicode) === */
.portalMenuDropDownContainer .dropdown-item[href*="studentHome.do"]::before {
    content: '\f015' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentProfile.do"]::before {
    content: '\f2bd' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentAcademicHistory.do"]::before {
    content: '\f518' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentCalendar.do"]::before,
.portalMenuDropDownContainer .dropdown-item[href*="studentTimetable.do"]::before {
    content: '\f073' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="applicationInstanceSearch.do"]::before {
    content: '\f15c' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentCertificates.do"]::before {
    content: '\f559' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentAccountInfo.do"]::before {
    content: '\f555' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="publicCourseBasket.do"]::before {
    content: '\f02e' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="taxReceipt.do"]::before {
    content: '\f571' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentStudentServices.do"]::before {
    content: '\f46d' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="publicSpecialRequest.do"]::before {
    content: '\f1d8' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentNews.do"]::before {
    content: '\f0a1' !important;
}

.portalMenuDropDownContainer .dropdown-item[href*="studentViewHelp.do"]::before {
    content: '\f059' !important;
}

/* === 8. TRIGGER BUTTON (Header link) === */
.portalMenuDropDownContainer>.nav-link.dropdown-toggle {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
}

.portalMenuDropDownContainer.show>.nav-link.dropdown-toggle {
    background: rgba(139, 35, 49, 0.12) !important;
    color: #8b2331 !important;
}

.portalMenuDropDownContainer.show>.nav-link.dropdown-toggle::after {
    transform: rotate(180deg) !important;
}

/* === 9. RESPONSIVE & PRINT === */
@media (max-width: 991px) {
    .portalMenuDropDownContainer .dropdown-menu {
        min-width: 100% !important;
        max-width: 340px !important;
    }
}

@media print {
    .portalMenuDropDownContainer .dropdown-menu {
        display: none !important;
    }
}



/* =======================================================
 * DESKTOP RESTORE & STYLING (Min-Width 768px)
 * 1. Structural Restore: Resets mobile fixed positions & backgrounds.
 * 2. Layout: Centers menu items horizontally.
 * 3. Styling: Corporate typography + Red Line Animation.
 * 4. Clean Up: Hides mobile-specific elements.
 *========================================================*/

@media (min-width: 768px) {

    /* ==================================================
     * 1. STRUCTURAL RESTORE & VISUAL CLEANUP
     * Restores the Maroon Header background and 
     * un-hides desktop elements (Logo, Cart, Login).
     * ================================================== */

    /* A. HEADER WRAPPER (The Maroon Background) */
    /* We apply the background ONLY here to avoid cut-off strips */
    body #header3Wrapper {}

    /* B. INNER CONTAINERS*/
    #header3Wrapper .container,
    #header3Wrapper .row,
    #header3Wrapper .col-lg-12,
    #header3Wrapper #header3Container {
        /* Your maroon color */
        background-color: #34111A !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    /* C. RESTORE THE LOGO (Header 1) */
    /* Un-fix the logo and let it sit in its natural place */
    #schoolHeaderLogoWrapperLink {
        position: static !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        z-index: auto !important;
    }

    /* Ensure image tag is visible */
    #schoolHeaderLogoWrapperLink img {
        display: block !important;
        width: auto !important;
        height: auto !important;
    }

    #schoolHeaderLogoWrapper {
        display: block !important;
    }

    /* D. RESTORE THE CART (Header 1) */
    /* Un-fix the cart from top-right */
    #cartInfo {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        z-index: auto !important;
    }

    #cartInfo a#shoppingCartLink {
        font-size: 1rem !important;
        color: inherit !important;
        padding: 0 !important;
    }

    #cartCount {
        position: static !important;
        display: inline-block !important;
    }

    /* E. RESTORE LOGIN DROPDOWN (Top Right) */
    /* Ensure the top-right login menu appears */
    #loginInfo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* F. RESTORE NAVBAR CONTAINER */
    .navbar-collapse,
    #mainNavBarCollapsable {
        position: static !important;
        display: block !important;
        background: transparent !important;
        /* Transparent to show maroon bg */
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        border: none !important;
        margin-top: -25px !important;
    }

    /* Reset the inner nav tag */
    body #header3Wrapper #header3Container nav#globalNavigationBar {
        background: transparent !important;
        min-height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* Hide Hamburger Button (Mobile Only) */
    .navbar-toggler {
        display: none !important;
    }


    /* ==================================================
     * 2. MENU LAYOUT (Horizontal & Centered)
     * ================================================== */

    /* Horizontal Row for Courses/Programs */
    body #mainNavBarCollapsable .navbar-nav {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        /* Centered Alignment */
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide Mobile-Specific Logins & Divider from the Maroon Bar */
    body #mainNavBarCollapsable .nav-item.d-md-none,
    body #mainNavBarCollapsable .divider {
        display: none !important;
    }

    /* Reset Item Spacing */
    body #mainNavBarCollapsable .navbar-nav .nav-item {
        width: auto !important;
        border: none !important;
        order: 0 !important;
        margin-left: 30px !important;
        margin-right: 30px !important;
    }

    /* ==================================================
     * 3. LINK STYLING (Typography & Animation)
     * ================================================== */

    /* A. Default Link Style */
    body #mainNavBarCollapsable .navbar-nav .nav-link {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05rem !important;
        font-style: normal !important;

        color: #ffffff !important;
        /* White Text */
        padding: 0.8rem 0 !important;
        position: relative !important;

        border: none !important;
        background: transparent !important;

        transition: color 0.3s ease !important;
    }

    /* B. Hover / Active Styling */
    body #mainNavBarCollapsable .navbar-nav .nav-link:hover,
    body #mainNavBarCollapsable .navbar-nav .nav-link.active {
        color: #D41F37 !important;
        /* Optional Text Color Change */
        background: transparent !important;
        text-decoration: none !important;
    }

    /* C. Red Line Animation (::after) */
    body #mainNavBarCollapsable .navbar-nav .nav-link::after {
        content: '' !important;
        position: absolute !important;
        display: block !important;

        bottom: 0.4rem !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #D41F37 !important;

        opacity: 0 !important;
        transition: opacity 0.6s ease !important;
    }

    /* D. Trigger Animation */
    body #mainNavBarCollapsable .navbar-nav .nav-link:hover::after,
    body #mainNavBarCollapsable .navbar-nav .nav-link.active::after {
        opacity: 1 !important;
    }

    /* ==================================================
     * 4. MOBILE OVERRIDES (Specificity Fixes)
     * Critical to stop mobile styles leaking to desktop.
     * ================================================== */

    /* Override the :has() selector from mobile */
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav4),
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) {
        border-bottom: none !important;
        order: 0 !important;
        width: auto !important;
        margin-left: 30px !important;
        margin-right: 30px !important;
    }
}

/* ======================================================= */
/* 1. BASE STYLES (MOBILE-FIRST) */
/* ======================================================= */

.custom-nav-wrapper {
    display: flex;
    flex-direction: column;
    /* Stacked on mobile */
    width: 100%;
}

.custom-nav-wrapper ul.navbar-nav {
    display: flex;
    flex-direction: column;
    /* List items stack on mobile */
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
    /* Take full width on mobile */
}

/* --- Bar Styles (colors, fonts, etc.) --- */
#top-tools-nav {
    background: linear-gradient(to right, #fff, #f0f0f0 40%) !important;
    font-size: 80% !important;
}

/* FIX: Smooth transition for light-colored links 
  - '!important' is removed from 'color' to allow animation.
  - 'transition' is defined only on the base state.
*/
#top-tools-nav .nav-link {
    color: #6d6d6d;
    /* Base color WITHOUT !important */
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    outline-offset: -5px !important;
    border: 0;
    transition: color 0.3s ease;
    /* Transition defined ONLY here */
}

#top-tools-nav .nav-link:hover {
    color: #8b2331;
    /* Hover color WITHOUT !important */
    text-decoration: underline !important;
}

/* FIX: Smooth transition for dark links (CTA) 
  - 'transition' is added to the base state.
  - A :hover state is added.
*/
#top-cta-nav .nav-link {
    background-color: #343434;
    color: #fff !important;
    text-align: center;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease;
    font-size: 0.8rem !important;
}

#top-cta-nav .nav-link:hover {
    background-color: #8e2736 !important;
    /* Lighter background color on hover */
}

#top-cta-nav .nav-item {
    flex-grow: 1;
    /* Grow to fill space on mobile */
}

/* ======================================================= */
/* 2. GLOBAL FIXES (SPACING & SCROLLBAR) */
/* ======================================================= */

/* 1. HORIZONTAL SCROLLBAR FIX */
/* Hides the overflow caused by '100vw' on the body,
   not on a child container.
*/
body {
    overflow-x: hidden;
}

/* Global resets to remove unwanted spacing */
#customHeaderLinks {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#header1 {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

/* Removes vertical space between the two nav bars */
#top-tools-nav {
    margin-bottom: 0 !important;
}

#top-cta-nav {
    margin-top: 0 !important;
}


/* ======================================================= */
/* 3. DESKTOP STYLES (WITH "FULL-WIDTH BREAKOUT") */
/* ======================================================= */

@media (min-width: 768px) {

    /* 1. "FULL-WIDTH BREAKOUT" TECHNIQUE */
    /* Forces this element to be 100% of the viewport width (vw)
       and uses calc() to pull it to the left edge,
       "breaking" it out of its parent container.
    */
    #customHeaderLinks {
        position: static !important;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
    }

    /* 2. BOOTSTRAP PADDING FIX */
    /* Removes the default padding from the .col-12
       inside our full-width header.
    */
    #customHeaderLinks .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. REMOVE SPACER */
    /* Resets the padding that was used
       for the old 'position: fixed' solution.
    */
    #header1ContentWrapper {
        padding-top: 0 !important;
    }

    /* 4. INTERNAL ALIGNMENT */
    /* Aligns the content (the two nav lists)
       to the far right of the full-width container.
    */
    .custom-nav-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        /* Aligns all content to the right! */
        align-items: center;
        padding-right: 0px;
    }

    /* --- Other desktop layout styles --- */

    .custom-nav-wrapper ul.navbar-nav {
        flex-direction: row;
        width: auto;
    }

    #top-tools-nav {
        flex-grow: 0;
        justify-content: flex-end;
    }

    /* Removes horizontal space between the two lists */
    #top-cta-nav {
        margin-left: 0 !important;
    }

    /* Sets desktop-specific padding for the links */
    #top-tools-nav .nav-link {
        padding: 15px !important;
    }

    #top-cta-nav .nav-item .nav-link {
        padding: 15px 20px;
    }
}

/* ======================================================= */
/* 4. RESPONSIVE - HIDE ON TABLETS AND MOBILE */
/* ======================================================= */

/*
 * This media query targets all screens 1024px wide or narrower.
 * It hides the entire custom header links bar.
 * Using !important ensures this rule overrides any other
 * 'display' properties defined in the base or desktop styles.
*/
@media (max-width: 1024px) {

    /*
     * Hides the entire custom header links bar
     * on screens 1024px wide or narrower.
    */
    #customHeaderLinks {
        display: none !important;
    }

    /*
     * Resets the negative margin on the main header row.
     * This annuls the 'margin-top: -20px;' used on desktop,
     * preventing layout issues on mobile.
    */
    #header1ContentWrapper {
        margin-top: 0 !important;
    }
}

/* ======================================================= */
/* 5. HEADER LOGO - DESKTOP */
/* ======================================================= */

#schoolHeaderLogoWrapper img {
    /* Set the desired width */
    width: 450px !important;
    /* Ensure the height scales automatically to maintain aspect ratio */
    height: auto !important;
}

/* ======================================================= */
/* 6. RESPONSIVE - MOBILE LOGO SWAP & FIXES (Final Version) */
/* ======================================================= */

@media (max-width: 767px) {

    /* A. Hide the large desktop <img> tag */
    #schoolHeaderLogoWrapper img {
        display: none !important;
    }

    /* B. Configure the Link as the new Fixed Logo */
    #schoolHeaderLogoWrapperLink {
        /* --- Fixed Positioning (In the white header) --- */
        position: fixed !important;
        top: 5px !important;
        /* Centered vertically */
        left: 15px !important;
        /* Left margin */
        z-index: 2001 !important;
        /* On top of the bar */

        /* --- Sizing (Small Icon) --- */
        display: block !important;
        width: 40px !important;
        height: 40px !important;

        /* --- Background Image (The Symbol) --- */
        background-image: url('https://macewantestpv.destinyone.moderncampus.net/images/logosymbol-macewan-sce.svg') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important;

        cursor: pointer !important;
    }

    /* C. LIGHTBOX CONFLICT FIX (Z-Index) */
    /* When a modal opens, push fixed elements to the back */
    body.modal-open #schoolHeaderLogoWrapperLink,
    body.modal-open #cartInfo {
        z-index: 0 !important;
    }
}

/* ======================================================= */
/* 7. HEADER STYLES - GENERAL */
/* ======================================================= */

#header1Container {
    background-color: #FFFFFF;
    width: 100%;
    color: #F0F0F0 !important;
}

/* Middle of the languagebar.jsp ((logo, cart, login))*/

#header1Wrapper {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* sides of languagebar.jsp ((logo, cart, login))*/

#cartInfo .glyphicon-shopping-cart {
    color: #8e2736 !important;
    /* cart color*/
}

#cartCount {
    background-color: #8e2736 !important;
    color: #ffffff;
    border: 2px solid #ffffff;
}

/* 1. Target the main row container (#header1ContentWrapper) */
/* We need to use Flexbox to gain full control over horizontal positioning */
#header1ContentWrapper {
    display: flex !important;
    align-items: center !important;
    /* Centers items vertically within the row */
    width: 100% !important;
    /* Ensure it spans the full width of the container */
    margin-top: -20px;
}

/* 2. Target the specific column that holds the cart */
/* This is the key: we use margin-left: auto on the cart's column */
/* to push it away from all preceding elements (logo, empty space). */
#header1ContentWrapper>.col-lg-2 {
    /* Identify the cart column by its content or order */
    /* We will use the offset for the Login block instead to provide space */
    margin-left: auto !important;
    /* Pushes this element and everything after it to the right */

    /* Note: Since the login column is next in the HTML, this margin-left: auto should push both the cart column and the login column to the right, placing them side-by-side at the far right. */
}

/* 3. Ensure the content inside the cart column is right-aligned */
.cartInfo {
    text-align: right !important;
    width: 100% !important;
}

/* 4. Small adjustment to the Login block to ensure no offset interference */
/* If Login has an offset, ensure it doesn't break the flow */
/* Find Login class: .col-lg-3.offset-lg-2 and set its left margin to 0 */
.offset-lg-2 {
    /* This overrides the left margin pushing the Login */
    margin-left: 0 !important;
}

/* =======================================================
 * MODULE: LOGIN/LOGOUT HEADER (SAFE DESKTOP VERSION)
 * Scope: Desktop Only (min-width: 768px)
 * Fixes: Restores structure removed by previous update
 * Features: Adds User Icon + Flex Alignment safely
 * =======================================================*/

@media (min-width: 768px) {

    /* 1. STRUCTURAL RESTORATION (Crucial for Layout) */
    /* Forces visibility on desktop, preventing it from disappearing */
    #loginInfo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Global Font Settings */
        font-family: 'Montserrat', sans-serif !important;
        text-align: right !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
    }

    /* =======================================================
     * STATE A: LOGGED IN (Welcome Text + Logout)
     * =======================================================*/

    #loginNameWrapper {
        color: #34111A !important;
        /* Dark Grey */
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        font-family: 'Montserrat', sans-serif !important;
    }

    .headerProfileLink,
    .headerStudentLoginLogoutLink {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #8b2331 !important;
        /* Base Red */
        text-decoration: underline !important;
        text-decoration-color: rgba(139, 35, 49, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .headerProfileLink:hover,
    .headerStudentLoginLogoutLink:hover {
        color: #34111A !important;
        /* Dark Brown */
        text-decoration-color: #34111A !important;
    }

    #logoutLinkWrapper {
        margin-top: 2px !important;
        font-size: 0.8rem !important;
    }

    /* =======================================================
     * STATE B: LOGGED OUT (Login Link + UX ICON)
     * Enhancements: Flexbox alignment + FontAwesome Icon
     * =======================================================*/

    #loginDropdownMenuLink {
        /* Typography */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;

        /* Color Pattern */
        color: #34111A !important;
        /* Corporate Dark Brown */
        background-color: transparent !important;

        /* --- UPGRADE: FLEXBOX ALIGNMENT --- */
        /* Replaces inline-block to align icon perfectly */
        display: inline-flex !important;
        align-items: center !important;

        text-decoration: none !important;
        transition: color 0.3s ease !important;
        cursor: pointer !important;
    }

    /* --- UPGRADE: ICON INJECTION --- */
    #loginDropdownMenuLink::before {
        content: "\f007" !important;
        /* fa-user */

        /* Bulletproof Font Family */
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;

        /* Spacing & Size */
        margin-right: 8px !important;
        font-size: 1.1em !important;
        line-height: 1 !important;

        /* Interaction */
        color: inherit !important;
        /* Turns red on hover automatically */
        text-decoration: none !important;
    }

    /* Hover State */
    #loginDropdownMenuLink:hover {
        color: #8b2331 !important;
        /* Red on Hover */
        text-decoration: underline !important;
    }

    /* Legacy Arrow Support (if present) */
    #loginDropdownMenuLink .fa,
    #loginDropdownMenuLink .glyphicon {
        color: inherit !important;
        margin-left: 5px !important;
    }
}

/*----------------------------------------------------------------------------*/

/*-------------------------Global nav, globalNavigationEmbeddable.jsp ------------------------------*/
/* * 1. Global Wrapper and Container Background and Alignment 
 * Targets the outer elements to ensure the background color covers the full width.
 */
#header3Wrapper {
    background-image: url(https://www.macewan.ca/framework/images/rows/banner/banner_grey.jpg) !important;
    /* 1. KEY CHANGE: Repeats the image only horizontally */
    background-repeat: repeat-x !important;
    /* 2. KEY CHANGE: Ensures the image displays at its native size */
    background-size: auto !important;
    border-top: 5.5px solid #d51f37 !important;
    background-position-y: bottom !important;
}

#header3Container {
    /* Center the content horizontally */
    display: flex;
    justify-content: center;
    /* Set background color for the container area */
    background-color: #34111A !important;
}

/* * 2. Navigation Bar Component Styling
 * Targets the main navigation element with the specific ID.
 */
#globalNavigationBar {
    /* Set the background color for the main <nav> element */
    background-color: #34111A !important;
    /* Ensure the nav element uses the full width available within its container */
    width: 100%;
}

/* * 3. Navigation Link Styling (Font, Color, and Size)
 */
.nav-item {
    /* Global nav item font size */
    font-size: 1.0625rem !important;
    /* ~17px using rem for accessibility */
    font-weight: 500 !important;
    /* Increased weight for better legibility */
    /* Preferred MacEwan-like font: Montserrat */
    font-family: 'Montserrat', sans-serif !important;
}

.navbar-light .navbar-nav .nav-link {
    /* Color of navbar items/links */
    color: #FFFFFF !important;
    /* Use the designated font family */
    font-family: 'Montserrat', sans-serif !important;
    /* Add padding for better spacing between links */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    /* Remove default underline on hover (optional) */
    text-decoration: none !important;
}

/* * 4. Mobile Divider Styling (Optional, for aesthetic cleanup)
 */
.divider.d-md-none {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* * 5. Hover Effect (Added for user experience)
 */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    /* Change color slightly on hover for visual feedback (e.g., MacEwan Red) */
    color: #9a1426 !important;
    transition: color 0.3s ease;
    /* Smooth transition */
}

/* =======================================================
 * MAIN NAVIGATION STYLING
 * Targets the primary links like 'Courses' and 'Programs'
 *========================================================*/

/* --- 1. Main Nav Link Typography --- */
#mainNavBarCollapsable .navbar-nav .nav-link {
    /* Text styling */
    font-optical-sizing: auto !important;
    font-style: normal !important;
    letter-spacing: -.002rem !important;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    /* Default color */

    /* Remove the default underline */
    text-decoration: none;

    /* Spacing for the links */
    padding: 0.5rem 1rem;

    /* This is required for the underline animation */
    position: relative;

    /* Transition for the text color change */
    transition: color 0.3s ease;
}

/* --- 2. Text Color on Hover/Active --- */
#mainNavBarCollapsable .navbar-nav .nav-link:hover,
#mainNavBarCollapsable .navbar-nav .nav-link.active {
    color: #D41F37 !important;
    /* Your requested hover/active color */
}

/* --- 3. Underline Effect (::after element) --- */
#mainNavBarCollapsable .navbar-nav .nav-link::after {
    content: '';
    position: absolute;

    /* !! FIX 1: Move line closer to text !! */
    /* Increased value to reduce the gap shown in the screenshot */
    bottom: 0.45rem;

    left: 0;

    /* Size and color */
    width: 100%;
    height: 2px;
    background-color: #D41F37 !important;

    /* !! FIX 2: Fade-in/out animation (starts invisible) !! */
    opacity: 0;

    /* This transition handles BOTH fade-in and fade-out */
    transition: opacity 0.6s ease;
}

/* --- 4. Animation Trigger --- */
/* Show the underline on hover or when the link is active */
#mainNavBarCollapsable .navbar-nav .nav-link:hover::after,
#mainNavBarCollapsable .navbar-nav .nav-link.active::after {
    /* Animate to full opacity (visible) */
    opacity: 1;
}

/*----------------------------------------------------------------------------------*/

/*----------------------Footer, bottomNavigation.jsp------------------------------------------------------*/


/* ==========================================================
 * FOOTER LAYOUT FIX (4-Column Alignment)
 * NUCLEAR SOLUTION: Maximum specificity vs Bootstrap
 ========================================================== */

/* Remove padding from footer, add it to container instead */
footer {
    background-color: #34111a;
    color: #FFFFFF !important;
    padding: 0 !important;
    /* ← Remove padding */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#footer1Container.container {
    padding: 20px !important;
    /* ← Add padding here */
}

/* Hide Modern Campus logo */
#footer2Sub3 {
    display: none !important;
}

#footer1Wrapper {
    position: relative;
    z-index: 2;
}

/* ==========================================================
 * GRID LAYOUT - NUCLEAR SPECIFICITY AGAINST BOOTSTRAP
 ========================================================== */

@media (min-width: 992px) {

    /* 1. Grid Container - MAXIMUM SPECIFICITY */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row {
        display: grid !important;
        grid-template-columns: 35% 15% 15% 35% !important;
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        min-height: 250px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 2. Reset Bootstrap Flex - ALL columns */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3 {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 35px 15px !important;
        box-sizing: border-box !important;
        flex: none !important;
        -ms-flex: none !important;
        flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
        z-index: 1 !important;
    }

    /* 3. Column 1 - Treaty */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
    }

    /* 4. Column 2 - Quick Links */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
    }

    /* 5. Column 3 - Social Media */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(3) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
    }

    /* 6. Column 4 - Contact Info - USING :last-child */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:last-child,
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(4),
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-of-type(4) {
        grid-column: 4 / 5 !important;
        grid-row: 1 / 2 !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        clear: none !important;
        display: block !important;
        flex: none !important;
        -ms-flex: none !important;
        flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
    }

    /* 7. Reset internal column 4 containers - TRIPLE SELECTOR */
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:last-child div.footerConnect,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:last-child div#footer-right,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(4) div.footerConnect,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(4) div#footer-right,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-of-type(4) div.footerConnect,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-of-type(4) div#footer-right {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
 * FOOTER BACKGROUND GRADIENT - RESPONSIVE BREAKPOINTS
 * Container-based positioning with viewport extension
 * Calibrated for top screen resolutions worldwide
 ========================================================== */

/* Default: 992px - 1279px */
@media (min-width: 992px) and (max-width: 1279px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: -20px !important;
        /* ← Extend above container padding */
        bottom: -20px !important;
        /* ← Extend below container padding */
        left: 62% !important;
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}

/* 1280px - 1365px (1280×720 HD Ready) */
@media (min-width: 1280px) and (max-width: 1365px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 61% !important;
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}

/* 1366px - 1535px (1366×768 - Most common laptop worldwide) */
@media (min-width: 1366px) and (max-width: 1535px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 61% !important;
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}

/* 1536px - 1919px (1536×864 - HD+ / 15" laptops) */
@media (min-width: 1536px) and (max-width: 1919px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: -20px !important;
        bottom: -20px !important;
        left: 58% !important;
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}

/* 1920px - 2199px (Standard Large Desktop) */
@media (min-width: 1920px) and (max-width: 2199px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: -20px !important;
        bottom: -20px !important;
        left: 57% !important;
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}

/* 2200px - 2559px (Ultra Wide) */
@media (min-width: 2200px) and (max-width: 2559px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: -20px !important;
        bottom: -20px !important;
        left: 56% !important;
        /* ← Adjusted for ultra wide */
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}

/* 2560px+ (4K and Beyond) */
@media (min-width: 2560px) {
    footer#footer div#footer1Container.container::after {
        content: "" !important;
        position: absolute !important;
        top: -20px !important;
        bottom: -20px !important;
        left: 55% !important;
        /* ← Maximum offset for 4K */
        width: 200vw !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}


/* ==========================================================
 * GRID LAYOUT - NUCLEAR SPECIFICITY AGAINST BOOTSTRAP
 ========================================================== */

@media (min-width: 992px) {

    /* 1. Grid Container - MAXIMUM SPECIFICITY */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row {
        display: grid !important;
        grid-template-columns: 35% 15% 15% 35% !important;
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        min-height: 250px !important;
        align-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 2. Reset Bootstrap Flex - ALL columns */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3 {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 35px 15px !important;
        box-sizing: border-box !important;
        flex: none !important;
        -ms-flex: none !important;
        flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
        z-index: 1 !important;
    }

    /* 3. Column 1 - Treaty */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
    }

    /* 4. Column 2 - Quick Links */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
    }

    /* 5. Column 3 - Social Media */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(3) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
    }

    /* 6. Column 4 - Contact Info - USING :last-child */
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:last-child,
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(4),
    footer#footer div#footer1Wrapper div#footer1Container.container div#footer1.footer1 div.row div.col-lg-12 div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-of-type(4) {
        grid-column: 4 / 5 !important;
        grid-row: 1 / 2 !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        clear: none !important;
        display: block !important;
        flex: none !important;
        -ms-flex: none !important;
        flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
    }

    /* 7. Reset internal column 4 containers - TRIPLE SELECTOR */
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:last-child div.footerConnect,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:last-child div#footer-right,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(4) div.footerConnect,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-child(4) div#footer-right,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-of-type(4) div.footerConnect,
    footer#footer div#footerNav.footerNav>div.row>div.col-md-6.col-lg-3:nth-of-type(4) div#footer-right {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
 * MOBILE: Stack Vertical - SPACING FIXES
 ========================================================== */

@media (max-width: 991px) {

    footer#footer {
        background-color: #34111a !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        /* ← Prevent horizontal scroll */
    }

    #footer1Container.container {
        padding: 30px 20px 0 20px !important;
        /* ← Remove bottom padding */
        background-color: #34111a !important;
        max-width: none !important;
        /* ← Allow full width */
    }

    footer#footer div#footer1Container.container::after {
        display: none !important;
    }

    #footerNav .row {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* BASE: All columns */
    #footerNav .row>.col-md-6,
    #footerNav .row>.col-lg-3,
    #footerNav>.col-md-6,
    #footerNav>.col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        position: static !important;
        float: none !important;
        text-align: center !important;
        order: 0 !important;
        background: transparent !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Treaty column */
    #footerNav [class*="col-"]:has(#footer-message) {
        order: 1 !important;
    }

    /* Quick Links column */
    #footerNav [class*="col-"]:has(#footer-qlinks) {
        order: 2 !important;
    }

    /* Social Media column */
    #footerNav [class*="col-"]:has(#footer-socialmedia) {
        order: 3 !important;
        background: transparent !important;
        margin: 0 !important;
        width: 100% !important;
        padding-bottom: 30px !important;
        /* ← Add space before red section */
    }

    /* CONTACT COLUMN - RED GRADIENT (FULL WIDTH EDGE-TO-EDGE) */
    #footerNav [class*="col-"]:has(.footerConnect),
    #footerNav .col-md-6:has(.footerConnect),
    #footerNav .col-lg-3:has(.footerConnect),
    #footerNav [class*="col-"]:has(#footer-right),
    #footerNav [class*="col-"]:has(#footer-contact) {
        order: 4 !important;
        background: linear-gradient(to bottom, #d51f37, #9a1426) !important;
        margin: 0 !important;
        /* ← Remove all margins */
        padding: 30px 20px !important;

        /* FULL WIDTH BREAKOUT - Updated calculation */
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }

    /* Content centering */
    #footerNav .footerAbout,
    #footerNav .footerContact,
    #footerNav .footerSiteMap,
    #footerNav .footerConnect {
        text-align: center !important;
        margin: 0 auto !important;
    }

    #footer-message .title,
    #footer-qlinks .title,
    #footer-socialmedia .title {
        text-align: center !important;
    }

    #footer-message .text,
    #footer-qlinks .text {
        text-align: center !important;
    }

    #footer-socialmedia .footer-socialmedia-rows {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #footer-socialmedia .footer-socialmedia-row {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    #footer-right,
    #footer-contact {
        text-align: center !important;
    }

    #footer-contact-image {
        display: block !important;
        margin: 0 auto 20px auto !important;
        max-width: 250px !important;
    }

    #footer-right .text,
    #footer-contact .text {
        text-align: center !important;
    }

    #footer-right,
    #footer-contact,
    .footerConnect {
        position: static !important;
        transform: none !important;
    }
}

/* ==========================================================
 * FONT STYLES
 ========================================================== */

#footer-message .title,
#footer-qlinks .title {
    font-weight: 700;
    color: #FFFFFF !important;
    font-size: .99rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    text-decoration: none !important;
}

/* ==========================================================
 * FOOTER - FORCE SINGLE LINE FOR "QUICK LINKS" TITLE
 ========================================================== */

#footer-qlinks .title {
    white-space: nowrap !important;
}

.footerContact p,
.footerContact p a {
    color: #fff9 !important;
    font-size: .84rem;
    font-weight: 420;
    font-family: Montserrat, sans-serif !important;
    line-height: 1.4;
    letter-spacing: normal;
    margin-bottom: 0.25rem;
}

.footerContact p a {
    text-decoration: underline;
    text-decoration-color: #fff6;
}

.footerAbout p,
.footerConnect p {
    color: #fff9;
    font-family: Montserrat, sans-serif !important;
    font-size: .85rem;
    letter-spacing: -.002rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.footerAbout a,
.footerConnect a {
    color: white;
    font-family: Montserrat, sans-serif !important;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: -.002rem;
    line-height: 1.4;
    text-decoration: underline;
    margin-bottom: 0.25rem;
}

.footerContact .variable-content-item p {
    margin-left: 0 !important;
}

.footerContact .variable-content-item a {
    padding-left: 0px;
    display: block;
}

/* ==========================================================
 * ICONOS SOCIALES - BASE STRUCTURE
 ========================================================== */

#footer-socialmedia .fa-stack {
    position: relative !important;
    display: inline-block !important;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

#footer-socialmedia .fa-stack .fa-stack-1x,
#footer-socialmedia .fa-stack .fa-stack-2x {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

#footer-socialmedia .fa-stack .fa-stack-1x {
    font-size: 1em;
    line-height: inherit;
}

#footer-socialmedia .fa-stack .fa-stack-2x {
    font-size: 2em;
}

/* ==========================================================
 * BACKGROUND CIRCLE (Red Circle)
 ========================================================== */

#footer-socialmedia .fa-stack .icon-bg {
    color: transparent !important;
}

#footer-socialmedia .fa-stack .icon-bg::before {
    content: "\f111" !important;
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Solid", "Font Awesome 5 Pro", "Font Awesome 5 Solid", "Font Awesome 5 Free", sans-serif !important;
    font-weight: 900 !important;
    color: #8b2331 !important;
    transition: color 0.3s ease !important;
    display: inline-block;
    line-height: 1;
}

#footer-socialmedia .fa-stack:hover .icon-bg::before {
    color: #CF002F !important;
}

/* ==========================================================
 * FOREGROUND ICONS - DEFAULT (Facebook, YouTube, LinkedIn, Instagram)
 ========================================================== */

#footer-socialmedia .fa-stack .icon-fg {
    color: transparent !important;
}

#footer-socialmedia .fa-stack .icon-fg::before {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", sans-serif !important;
    font-weight: 400 !important;
    color: #34111A !important;
    transition: color 0.3s ease !important;
    display: inline-block;
    line-height: 1;
}

#footer-socialmedia .fa-stack:hover .icon-fg::before {
    color: #34111A !important;
}

/* ==========================================================
 * TIKTOK - SVG INJECTION WITH WHITE ICON
 ========================================================== */

html body #footer-socialmedia a.fa-stack[title="TikTok"] .icon-fg {
    position: relative !important;
    display: block !important;
    height: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
}

html body #footer-socialmedia a.fa-stack[title="TikTok"] .icon-fg::before {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2334111A' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 60% !important;
    z-index: 10 !important;
    display: block !important;
    line-height: 1 !important;
}

html body #footer-socialmedia a.fa-stack[title="TikTok"]:hover .icon-fg::before {
    filter: brightness(1.2) !important;
    transition: filter 0.3s ease !important;
}

/* ==========================================================
 * X (TWITTER) - SVG INJECTION WITH WHITE ICON
 ========================================================== */

html body #footer-socialmedia a.fa-stack[title="X"] .icon-fg {
    position: relative !important;
    display: block !important;
    height: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
}

html body #footer-socialmedia a.fa-stack[title="X"] .icon-fg::before {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2334111A' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 50% !important;
    z-index: 10 !important;
    display: block !important;
    line-height: 1 !important;
}

html body #footer-socialmedia a.fa-stack[title="X"]:hover .icon-fg::before {
    filter: brightness(1.2) !important;
    transition: filter 0.3s ease !important;
}

/* ==========================================================
 * TYPOGRAPHY
 ========================================================== */

#footer-socialmedia p.title {
    font-family: Montserrat, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02rem;
    padding-bottom: 0;
    padding-left: 0.4rem;
    text-transform: lowercase;
}


/* ==========================================================
 * FOOTER LOGO
 ========================================================== */

#footer-contact-image {
    width: 100% !important;
    height: auto;
    max-width: 100%;
    margin-bottom: 20px;
}

/* ==========================================================
 * ESTILOS ADICIONALES
 ========================================================== */

#sidebar1Module1,
.nav-pills,
footer a,
footer>a {
    color: white !important;
}

#sidebar1Wrapper {
    background-color: white;
}

#variableContentBlockPG0156 {
    color: #34111A !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding-top: 35px !important;
    padding-bottom: 20px !important;
    display: flex;
    -ms-flex-align: center;
}




/*******************************************************
 * GLOBAL MAIN CONTENT PADDING
 * Applies vertical padding to the main content area of the page 
 * to create separation from global elements (like the site header/footer).
 *******************************************************/
#mainContent {
    /* 40px of space top and bottom */
    padding-top: 10px;
    padding-bottom: 40px;

    /* Retains the original horizontal padding (if any) */
    /* If you want to eliminate any side padding: padding-left: 0; padding-right: 0; */
}

/* One-line alternative, if you don't want to modify the horizontal padding: */
/* #mainContent { padding: 40px 0; } */

/*******************************************************
 * CONTENT TYPOGRAPHY BASE (Montserrat Font)
 * Applies Montserrat to ALL text elements within the main content area for consistency.
 *******************************************************/
#mainContent h1,
#mainContent h2,
#mainContent h3,
#mainContent h4,
#mainContent h5,
#mainContent h6,
#mainContent p,
#mainContent div,
#mainContent li,
#mainContent blockquote {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- */

/*******************************************************
 * HEADING STANDARDIZATION: COLOR, SIZE, AND SPACING
 * Applies brand colors and consistent typography hierarchy.
 * Cleans up redundant CSS properties.
 *******************************************************/

/* Universal Heading Styles (Applies color, consistent spacing, and standard weight) */
#mainContent h1,
#mainContent h2,
#mainContent h3,
#mainContent h4,
#mainContent h5,
#mainContent h6 {
    /* Base color for most headings */
    color: #171717 !important;

    /* BEST PRACTICE ADJUSTMENT: Use 700 for clear "Bold" effect. */
    font-weight: 400 !important;

    /* Consistent Spacing (using REM for scalability) */
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;

    /* Clean up: Removed font-optical-sizing as it was redundant/unnecessary */
}

/* Standardized Font Sizes and Specific Styles (based on Cascade CMS values) */

/* H1: Largest heading (Primary Title) */
#mainContent h1 {
    font-size: 3.125rem !important;
    letter-spacing: normal !important;
    /* BEST PRACTICE ADJUSTMENT: Increased from 1 to 1.1 to prevent text clipping. */
    line-height: 1.1 !important;
    font-style: normal !important;
}

/* H2: Secondary heading */
#mainContent h2 {
    font-size: 2.1756rem !important;
    letter-spacing: -.002rem !important;
    line-height: 1.142 !important;
    font-style: normal !important;
}

/* H3: Tertiary heading (Uses specific brand color) */
#mainContent h3 {
    font-size: 1.7rem !important;
    line-height: 1.089 !important;
}

/* H4: Smaller heading */
#mainContent h4 {
    font-size: 1.2838rem !important;
    line-height: 1.24 !important;
}

/* H5 and H6: Smallest headings */
#mainContent h5 {
    font-size: 1.1025rem !important;
    font-style: normal !important;
}

#mainContent h6 {
    font-size: 1rem !important;
}

/* =======================================================
 * MOBILE TYPOGRAPHY OPTIMIZATION (Max-Width 767px)
 * Reduces heading sizes by approx 20-25% for better
 * readability on small screens without affecting desktop.
 *========================================================*/

@media (max-width: 767px) {

    /* H1: Primary Title
     * Desktop: 3.125rem (~50px) -> Mobile: 2.25rem (~36px)
     * Increased line-height slightly for multi-line readability.
     */
    #mainContent h1 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02rem !important;
        /* Tighter spacing for mobile */
    }

    /* H2: Secondary Heading
     * Desktop: 2.17rem (~35px) -> Mobile: 1.75rem (~28px)
     */
    #mainContent h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    /* H3: Tertiary Heading
     * Desktop: 1.7rem (~27px) -> Mobile: 1.4rem (~22px)
     */
    #mainContent h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    /* H4: Quaternary Heading
     * Desktop: 1.28rem (~20px) -> Mobile: 1.15rem (~18px)
     * Keeping it slightly larger than body text (16px)
     */
    #mainContent h4 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    /* H5 & H6: Smallest Headings
     * These are already close to body text size, so we maintain 
     * readability by not shrinking them below 1rem (16px).
     */
    #mainContent h5 {
        font-size: 1.05rem !important;
    }

    #mainContent h6 {
        font-size: 1rem !important;
        /* Keep readable minimum */
        font-weight: 700 !important;
        /* Add weight to distinguish from p */
    }

    /* Optional: Adjust margins for tighter mobile layouts */
    #mainContent h1,
    #mainContent h2,
    #mainContent h3,
    #mainContent h4,
    #mainContent h5,
    #mainContent h6 {
        margin-top: 1.2rem !important;
        /* Slightly less vertical space */
        margin-bottom: 0.5rem !important;
    }
}

/* 2. Specific adjustments for links and table cells */
/* Links (<a>) often inherit or are explicitly styled by Bootstrap, so they need a dedicated rule */
#mainContent a {
    font-family: 'Montserrat', sans-serif !important;
}

/* 3. Specific adjustments for table cells */
/* Table data (<td>) and table headers (<th>) might need this explicit rule */
#mainContent td,
#mainContent th {
    font-family: 'Montserrat', sans-serif !important;
}

/* 4. Ensuring the text inside the Accordion Headers is Montserrat */
/* Targets the text inside the panel header and the program link */
#programAreasAccordion .card-title,
#programAreasAccordion .programArea a {
    font-family: 'Montserrat', sans-serif !important;
}

/* 5. Ensuring the button uses Montserrat */
#mainContent .btn {
    font-family: 'Montserrat', sans-serif !important;
}

#certificateOfficalDescription a {
    /* Base Link Color */
    color: #8b2331 !important;

    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;

    /* Optional: Make the text slightly bolder for emphasis */
    font-weight: 700 !important;

    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

#certificateOfficalDescription a:hover {
    /* Hover Link Color (Darker SCE shade) */
    color: #34111a !important;

    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

#certificateOfficalDescription a:visited {
    /* Optional: Style for visited links (can be the same as base color or a different shade) */
    color: #8b2331;
}


/* =======================================================
 * COURSE DESCRIPTION TABLE STYLING
 * Target: Tables inside the official course description
 * Context: "Delivery", "Course hours", "Fees" tables
 * =======================================================*/

/* 1. General Table Layout */
#courseProfileOfficialCourseDescription table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5rem !important;
    border: none !important;
    /* Remove default legacy borders */
}

/* 2. Rows: Zebra Striping (MacEwan Standard) */
#courseProfileOfficialCourseDescription table tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
    /* Light Grey */
}

#courseProfileOfficialCourseDescription table tr:nth-of-type(even) {
    background-color: #ffffff !important;
    /* White */
}

/* 3. Common Cell Styles (Padding & Font) */
#courseProfileOfficialCourseDescription table td,
#courseProfileOfficialCourseDescription table th {
    padding: 12px 15px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    border: 1px solid #e9ecef !important;
    /* Subtle border */
}

/* 4. HEADERS (Left Column - "Delivery:", "Hours:", etc.) */
#courseProfileOfficialCourseDescription table th {
    /* Style: Maroon Text, Bold */
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-align: left !important;

    /* Width control to keep labels aligned */
    width: 30% !important;
    min-width: 150px !important;
}

/* 5. DATA (Right Column) */
#courseProfileOfficialCourseDescription table td {
    color: #34111A !important;
    font-weight: 400 !important;
}

/* 6. Clean up any <b> tags inside cells to inherit font correctly */
#courseProfileOfficialCourseDescription table td b,
#courseProfileOfficialCourseDescription table td strong {
    font-weight: 700 !important;
    color: inherit !important;
}



/* =======================================================
 * PROGRAM DESCRIPTION TABLE STYLES (FINAL VERSION)
 * Scoped specifically to #programAreaDescription
 * Includes: Layout, Custom Header, and Zebra Striping
 *========================================================*/

/* 1. General Table Style */
#programAreaDescription table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 1.5rem;

    /* Base Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* 2. Header (Thead) - Maroon/White Style */
#programAreaDescription table thead th {
    background-color: rgb(52, 17, 26) !important;
    /* Dark Maroon */
    color: rgb(255, 255, 255) !important;
    /* Blanco */

    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Header borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Separador gris */
}

/* Remove right border from last header */
#programAreaDescription table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. Body (Tbody) - Zebra Striping */

/* FILAS IMPARES (1, 3, 5...) -> Gris Claro */
#programAreaDescription table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* FILAS PARES (2, 4, 6...) -> Blanco */
#programAreaDescription table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* Individual cell style */
#programAreaDescription table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important;
    /* Soft gray border between cells */
    color: rgb(23, 23, 23) !important;
}

/* =======================================================
 * DESCRIPTION TABLES STYLING (Unified)
 * Targets tables in both Program Areas AND Program Streams
 * ID 1: #programAreaDescription (Professional Health Ed)
 * ID 2: #programStreamDescription (Emergency Nursing - NUEVO)
 *========================================================*/

/* 1. General Table Configuration */
#programAreaDescription table,
#programStreamDescription table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 1.5rem;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;
    line-height: 1.5 !important;
    text-align: left !important;

    /* Remove default Bootstrap borders */
    border: none !important;
}

/* 2. Header (Thead) - Maroon Style */
#programAreaDescription table thead th,
#programStreamDescription table thead th {
    background-color: rgb(52, 17, 26) !important;
    /* Corporate Maroon */
    color: white !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Bordes Personalizados */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Separador Gris */
    border-bottom: none !important;
}

/* Remove right border from last header */
#programAreaDescription table thead th:last-child,
#programStreamDescription table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. Body (Tbody) - Zebra Effect */

/* Filas Impares (Gris Claro) */
#programAreaDescription table tbody tr:nth-of-type(odd),
#programStreamDescription table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Filas Pares (Blanco) */
#programAreaDescription table tbody tr:nth-of-type(even),
#programStreamDescription table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. Celdas (Td) */
#programAreaDescription table tbody td,
#programStreamDescription table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;

    /* Bordes suaves entre celdas */
    border: 1px solid #dee2e6 !important;
    border-top: none !important;

    color: rgb(23, 23, 23) !important;
}

/* 5. Bold text inside table */
#programAreaDescription table tbody td strong,
#programStreamDescription table tbody td strong {
    font-weight: 700 !important;
    color: inherit !important;
}

/* =======================================================
 * PAGE: PROGRAM AREA (Program Streams List)
 * Adapts the 'white card' look & feel to the #programAreaCourses section
 * (Comments are in English)
 *========================================================*/

/* 1. Container Styling (Grey Background) */
#programAreaCoursesAndCertificates {
    background-color: #E9E5E5 !important;
    padding: 20px;
    border-radius: 4px;
}

/* Remove default card styles from the inner panel */
#programAreaCourses {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Style the Rows (<tr>) as "White Cards" */
#programAreaCourses table.table tr {
    display: block;
    margin-bottom: 15px;
    /* Space between cards */

    background-color: white !important;
    border-radius: 4px;
    overflow: hidden;
    /* Clips the corners */

    /* Positioning for hover effects */
    position: relative;
    z-index: 1;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Clean up cell borders */
#programAreaCourses table.table td {
    border-top: none !important;
    padding: 0 !important;
    border: none !important;
}

/* 3. Style the Links (<a>) - The Flex Container */
#programAreaCourses table.table a {
    display: flex;
    justify-content: flex-start;
    /* Align text to left */
    align-items: center;
    /* Vertically center text */
    width: 100%;

    /* Padding: Top/Bottom=12px, Right=40px (for arrow), Left=45px (for icon) */
    padding: 12px 40px 12px 45px;

    /* Typography */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #34111a !important;
    /* MacEwan Dark Brown */
    text-decoration: none !important;

    position: relative;
    background-color: transparent !important;
}

/* ==========================================================
 * PROGRAM STREAMS TABLE - STYLING WITH SUB-PROGRAM SUPPORT
 ========================================================== */

/* 1. The Icon Box (::before) - Default for all program streams */
#programAreaCourses table.table a::before {
    /* Icon: Book representing program streams */
    content: "\f02d";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Robust positioning fix */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 35px;

    background-color: #34111A;
    color: white;
    border-radius: 4px 0 0 4px;

    /* Center the icon inside the bar */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

/* 2. Override icon for nested/sub-programs (aria-level="2") */
#programAreaCourses table.table tr td[aria-level="2"] a::before {
    content: "↳" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    background-color: transparent !important;
    background-image: none !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    color: #34111A !important;
    font-size: 1.5rem !important;
    border-radius: 0 !important;
    margin-right: 5px !important;
    display: inline-block !important;
}

/* 3. Adjust padding for nested program links */
#programAreaCourses table.table tr td[aria-level="2"] a {
    padding-left: 10px !important;
}

/* 4. Optional: Different background for nested rows */
#programAreaCourses table.table tr td[aria-level="2"] {
    background-color: transparent !important;
}

/* 5. The Arrow Icon (::after) */
#programAreaCourses table.table a::after {
    content: "\f054";
    /* fa-chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Absolute positioning on the right */
    position: absolute;
    right: 15px;
    top: 50%;

    font-size: 1rem;
    color: #34111a;

    /* Animation setup */
    opacity: 0;
    transform: translateY(-50%) translateX(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 6. Hover Effects */
#programAreaCourses table.table tr:hover {
    transform: scale(1.02);
    z-index: 10;
    overflow: visible;
}

#programAreaCourses table.table tr:hover a::after {
    opacity: 1;
    /* Slide arrow in */
    transform: translateY(-50%) translateX(0);
}

/* 7. Header Styling */
#programAreaCourses .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding-left: 0;
}

#programAreaCourses .card-header h2 {
    color: #34111A !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

/* =======================================================
 * 8. FULL WIDTH OVERRIDE (Fixes the 50% Bootstrap issue)
 * Forces the .col-lg-6 inside this container to take 
 * 100% width instead of half.
 *========================================================*/

#programAreaCoursesAndCertificates .row>.col-lg-6 {
    /* Override Bootstrap's flex basis */
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;

    /* Override Bootstrap's max-width */
    max-width: 100% !important;
}

/* =======================================================
 * 9. SCROLLBAR FIX & TABLE WIDTH
 * Prevents horizontal scrollbar caused by hover scaling
 *========================================================*/

#programAreaCourses .table-responsive {
    /* 1. Force hide scrollbar */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Allow vertical shadow to be visible */

    /* 2. Ensure container occupies full space */
    width: 100% !important;

    /* 3. Extra bottom padding to prevent shadow clipping */
    padding-bottom: 15px !important;
}

/* Optional internal table adjustment for side margin */
#programAreaCourses table.table {
    /* * Give it 98% width instead of 100%
     * para dejar 1% de espacio a cada lado para el efecto zoom.
     */
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =======================================================
 * MOBILE FIX: TEXT WRAPPING
 * Allows long titles to flow into two lines on mobile
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Target the flex link */
    #programAreaCourses table.table a {
        /* Allow text to wrap to next line */
        white-space: normal !important;

        /* Let height be automatic (grow) */
        height: auto !important;

        /* Adjust line height for block readability */
        line-height: 1.4 !important;

        /* (Optional) If text feels too close to top/bottom edges */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* 2. Ensure container row also grows */
    #programAreaCourses table.table tr {
        height: auto !important;
        overflow: visible !important;
        /* So nothing extra is cut off */
    }
}



/*******************************************************
 * HEADING STANDARDIZATION: FONT, COLOR, SIZE, AND SPACING
 * Applies CMS-defined styles (Montserrat, Color, Exact REM Sizes, 
 * Letter Spacing, etc.) to the specific content profile areas.
 *******************************************************/

/* 1. Universal Styles (Color, Font, and Spacing) */
/* Targets all headings in the course profile and certificate profile areas. */
#courseProfile h1,
#courseProfile h2,
#courseProfile h3,
#courseProfile h4,
#courseProfile h5,
#courseProfile h6,
#certProfile h1,
#certProfile h2,
#certProfile h3,
#certProfile h4,
#certProfile h5,
#certProfile h6 {
    /* Base Color */
    color: #171717 !important;
    font-family: 'Crimson Text', serif !important;
    font-weight: 400 !important;
    /* Standardized Bold Weight */

    /* Consistent Spacing */
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

/* 2. Standardized Font Sizes and Specific Styles (based on CMS values from #mainContent) */

/* H1: Largest heading (Primary Title) */
#courseProfile h1,
#certProfile h1 {
    font-size: 3.125rem !important;
    letter-spacing: .05rem !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    /* Adjusted for safety */
    font-style: normal !important;
}

/* H2: Secondary heading */
#courseProfile h2,
#certProfile h2 {
    font-size: 2.1756rem !important;
    letter-spacing: -.002rem !important;
    line-height: 1.142 !important;
    font-style: normal !important;
}

/* H3: Tertiary heading (Uses specific brand color) */
#courseProfile h3,
#certProfile h3 {
    font-size: 1.7rem !important;
    font-weight: 400 !important;
    line-height: 1.089 !important;
}

/* H4: Smaller heading */
#courseProfile h4,
#certProfile h4 {
    font-size: 1.2838rem !important;
    line-height: 1.24 !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

/* H5 and H6: Smallest headings */
#courseProfile h5,
#certProfile h5 {
    font-size: 1.1025rem !important;
    font-weight: 600 !important;
}

#courseProfile h6,
#certProfile h6 {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

#courseProfile p,
#certProfile p {
    font-size: 1rem !important;
}

/* =======================================================
 * MOBILE TYPOGRAPHY: COURSE & CERTIFICATE PROFILES
 * Applies responsive font sizing (approx 25% smaller) 
 * to specific profile IDs to prevent text wrapping issues.
 * Scoped to max-width 767px.
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Universal Spacing Adjustment */
    /* Reduce top margin slightly to save vertical space on mobile */
    #courseProfile h1,
    #courseProfile h2,
    #courseProfile h3,
    #courseProfile h4,
    #courseProfile h5,
    #courseProfile h6,
    #certProfile h1,
    #certProfile h2,
    #certProfile h3,
    #certProfile h4,
    #certProfile h5,
    #certProfile h6 {
        margin-top: 1.2rem !important;
    }

    /* 2. H1: Primary Title (Course Name) */
    /* Desktop: 3.125rem -> Mobile: 2.25rem */
    #courseProfile h1,
    #certProfile h1 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        /* Increased line-height for wrapping */
        letter-spacing: 0.02rem !important;
        /* Tighter spacing */
    }

    /* 3. H2: Secondary Heading */
    /* Desktop: 2.17rem -> Mobile: 1.75rem */
    #courseProfile h2,
    #certProfile h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    /* 4. H3: Tertiary Heading */
    /* Desktop: 1.7rem -> Mobile: 1.4rem */
    #courseProfile h3,
    #certProfile h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    /* 5. H4: Quaternary Heading (Uppercase) */
    /* Desktop: 1.28rem -> Mobile: 1.15rem */
    #courseProfile h4,
    #certProfile h4 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    /* 6. H5: Smallest Heading */
    /* Desktop: 1.10rem -> Mobile: 1.05rem */
    #courseProfile h5,
    #certProfile h5 {
        font-size: 1.05rem !important;
    }

    /* 7. H6: Label / Disclaimer */
    /* Kept at 1rem to ensure readability (don't go smaller than body text) */
    #courseProfile h6,
    #certProfile h6 {
        font-size: 1rem !important;
    }
}

/* 2. Add Margin to Paragraphs and List Items */
/* This ensures paragraphs and list items maintain separation between them. */
#courseProfile p,
#courseProfile ul,
#courseProfile ol,
#courseProfile blockquote {
    /* Brand Color (NOTE: Adjust #171717 if your primary color is different) */
    color: #171717 !important;
    /* 1em or 1.5em ensures good spacing between blocks of text. */
    margin-bottom: 1.5em !important;
}

/* OPTIONAL: Specific correction for <h2> followed immediately by generic text (like in your example) */
/* The general rule above usually fixes this, but if the H2 needs extra separation: */
#courseProfile h2+div,
#courseProfile h2+p {
    /* Brand Color (NOTE: Adjust #171717 if your primary color is different) */
    color: #171717 !important;
    margin-top: 0.5em !important;
}

/* =======================================================
 * SCE DESCRIPTION LINKS: NUCLEAR ISOLATION V3
 * TARGET: Course & Certificate Descriptions ONLY
 * ANCHOR: #pageCourseProfile (High Specificity)
 * ======================================================= */

/* 1. Selector de Triple ID para dominar el CSS Global */
#pageCourseProfile #courseProfileCatalogCourseDescription a,
#pageCourseProfile #courseProfileOfficialCourseDescription a,
#pageCourseProfile .courseDescriptionCollapsibleWrapper a,
#pageCertProfile #certProfileCatalogCourseDescription a {

    /* ADN de Marca: MacEwan Maroon */
    color: #8b2331 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;

    /* Visibilidad: Subrayado sutil e inconfundible */
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.4) !important;
    text-underline-offset: 3px !important;

    /* Reseteo de herencia del sistema */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
}

/* 2. Estado Hover: Feedback Interactivo */
#pageCourseProfile #courseProfileCatalogCourseDescription a:hover,
#pageCourseProfile #courseProfileOfficialCourseDescription a:hover {
    color: #34111a !important;
    /* Maroon Profundo */
    text-decoration-color: #34111a !important;
}

/* =======================================================
 * MOBILE READ MORE LINK & ANIMATION
 * Styles the toggle link and animates the content reveal.
 * Scoped to mobile only (max-width 767px).
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Link Styling (Corporate Look) */
    a.morelink,
    .readMore {
        /* Typography & Color */
        color: #8b2331 !important;
        /* MacEwan Red */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        /* Bold */
        font-size: 0.9rem !important;

        /* Decoration */
        text-decoration: underline !important;
        text-decoration-color: #8b2331 !important;

        /* Transition */
        transition: color 0.3s ease, text-decoration-color 0.3s ease !important;

        /* Layout */
        display: inline-block !important;
        margin-top: 10px !important;
        cursor: pointer !important;
    }

    /* 2. Hover/Active State */
    a.morelink:hover,
    a.morelink:hover .readMore,
    .readMore:hover {
        color: #34111a !important;
        /* Dark Brown */
        text-decoration-color: #34111a !important;
    }

    /* 3. Smooth Reveal Animation */
    /* This triggers when the element changes from display:none to block */
    .allcontent {
        animation: fadeInContent 0.6s ease-in-out;
    }

    /* Define the Keyframes */
    @keyframes fadeInContent {
        from {
            opacity: 0;
            transform: translateY(-10px);
            /* Starts slightly above */
        }

        to {
            opacity: 1;
            transform: translateY(0);
            /* Settles in place */
        }
    }
}


/*******************************************************
 * COURSE LIST LINKS STYLES (Targeted Customization)
 * Applies custom SCE link styling only to course titles 
 * within the '.certificateStreamItems' list to prevent 
 * global link interference.
 *******************************************************/

.certificateStreamItems .certificateStreamItemHeader {
    /* Base Link Color */
    color: #8b2331 !important;

    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;

    /* Optional: Make the text slightly bolder for emphasis */

    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

.certificateStreamItems .certificateStreamItemHeader:hover {
    /* Hover Link Color (Darker SCE shade) */
    color: #34111a !important;

    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

/* Optional: Styling for the course code span within the link */
.certificateStreamItems .certificateStreamItemHeader .courseCode {
    /* Makes the course code bold */
    font-weight: 700 !important;
    /* color: #171717333;  <-- Uncomment and adjust if a specific color is needed for the code */
}

/*******************************************************
 * CERTIFICATES APPLYING TOWARDS LINKS
 * Ensures links within the list of related certificates 
 * use the SCE branding color, isolated by the container ID.
 *******************************************************/

#courseProfileCertificates a {
    /* Base Link Color (SCE Primary Color: #8b2331) */
    /* Base Link Color */
    color: #8b2331 !important;

    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;

    /* Optional: Make the text slightly bolder for emphasis */

    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;

    /* Optional: Font weight adjustment */
    font-weight: 700 !important;
}

#courseProfileCertificates a:hover {
    /* Hover Link Color (Darker SCE shade) */
    color: #34111a !important;

    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

/*******************************************************
 * GENERIC COURSE SECTION LINKS (Applies to all sections)
 * Targets text links inside the collapsible section details panel.
 *******************************************************/

/* Targets any anchor tag (a) that is NOT a button inside a panel-collapse */
.panel-collapse a:not(.btn) {
    /* Base Link Color (SCE Primary Color: #8b2331) */
    color: #8b2331 !important;

    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;

    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;

    /* Font weight adjustment for visibility */
    font-weight: 700 !important;
}

.panel-collapse a:not(.btn):hover {
    /* Hover Link Color (Darker SCE shade: #34111a) */
    color: #34111a !important;

    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

/*******************************************************
 * GENERIC COURSE SECTION LABELS
 * Applies a bold font weight to labels within the course 
 * section details (e.g., "Section Title", "Course Fee(s)", etc.).
 *******************************************************/
.courseSectionDescription .labelSpanStyle {
    /* Use 700 for a clear bold effect */
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}

/* =======================================================
 * ACCORDION CONTENT PERSONALIZATION - MASTER FIX V2
 * Scope: .courseSectionDescription (Inside accordion panels)
 * Strategy: Role-based selectors for 100% coverage
 * Validation: Fixed 18 missing elements from JS Audit (VM164682)
 * =======================================================*/

/* --- 1. UNIVERSAL LABELS & HEADERS (Left Column) --- */
/* Targets ALL titles: Type, Days, Time, Instructors, Deadlines, Location Label */
.courseSectionDescription .header,
.courseSectionDescription .labelSpanStyle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    /* Standard Label Size */
    color: #171717 !important;
    font-weight: 700 !important;
    /* Bold Hierarchy */
    line-height: 1.4 !important;
}

/* --- 2. UNIVERSAL DATA CONTENT (Right Column) --- */
/* Targets ALL data: Discussion, M/T/W, 9:00AM, Instructor Names, etc. */
.courseSectionDescription .content,
.courseSectionDescription .content span,
.courseSectionDescription .content div,
.courseSectionDescription .sectionInstructors ul li,
/* Catch Instructors List */
.courseSectionDescription .sectionLocation ul li,
/* Catch Location List */
.courseSectionDescription .instructorName,
/* Specific Instructor Tag */
.courseSectionDescription table td {
    /* Tables (Fees) */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    /* Standard Body Size */
    color: #171717 !important;
    font-weight: 500 !important;
    /* Medium Weight */
    line-height: 1.5 !important;
}

/* --- 3. SPECIAL EXCEPTIONS (Overrides) --- */

/* A. Section Title (Make it bigger & darker) */
/* "Bookkeeping Basics" stands out from the rest */
.courseSectionDescription .sectionTitle .content span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    /* Almost Black */
}

/* B. Interactive Links (Maroon Branding) */
/* "View Details", "Online", "Classroom", "Tuition" links */
.courseSectionDescription a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #8b2331 !important;
    /* MacEwan Maroon */
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.courseSectionDescription a:hover {
    color: #34111A !important;
    /* Darker Maroon */
    text-decoration: underline !important;
}

/* C. Pricing (Visual Emphasis) */
.courseSectionDescription .sectionTuitionProfiles .tuitionProfileFees {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #171717 !important;
}

/* D. Status Messages (TBA / System Messages) */
.courseSectionDescription .notFoundMessage,
.courseSectionDescription .noSchedule {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    color: #171717 !important;
    font-weight: 400 !important;
}

/*******************************************************
 * BUTTON ACTION BLOCK SPACING
 * Applies consistent vertical padding to the container holding 
 * the course enrollment action buttons for clear separation.
 *******************************************************/
.courseSectionEnrollmentActions {
    /* Uses !important to ensure this overwrites the inline style 
       and any low-specificity styles applied by the CMS/Bootstrap. */
    padding: 50px 0 !important;

    /* Good practice: ensure default margins are reset if necessary */
    margin: 0 !important;
}

/*******************************************************
 * SOLUTION 1: PADDING ON #breadcrumb (Most Reliable Container)
 * Adds internal vertical padding to the entire navigation block.
 *******************************************************/
#breadcrumb {
    /* Add internal space above and below the content */
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/*******************************************************
 * SEARCH BREADCRUMB CUSTOMIZATION
 * Styles for the "Search Results" and "Search Again" links 
 * and their separator to match SCE branding.
 *******************************************************/

/* 1. Link Color and Size */
#searchBreadcrumb a {
    color: #171717 !important;
    /* Apply SCE branding color */
    display: inline;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .77rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: -.002rem !important;
    padding: 0 .6rem 0 .7rem !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    transition: color .4s, -webkit-text-decoration .3s;
    transition: color .4s, text-decoration .3s;
    transition: color .4s, text-decoration .3s, -webkit-text-decoration .3s;
}

#searchBreadcrumb a:hover {
    color: #8b2331 !important;
    -webkit-text-decoration: undertine !important;
    text-decoration: underline !important;
}

/* 2. Back Icon Color */
#searchBreadcrumb #searchBreadcrumbBackIcon {
    color: #171717 !important;
    /* Match the icon color to the link color */
    font-size: 1rem !important;
    margin-right: -3px !important;
    /* Add slight spacing after the icon */
}

/* =======================================================
 * MODULE: EMAIL COURSE FORM (STRICT MIRROR)
 * Reference: Request Information Form Style
 * Target: #formEmailCourseInfo
 * =======================================================*/

/* 1. CONTAINER (White Card - Exact Replica) */
#formEmailCourseInfo {
    background-color: #fff !important;
    padding: 40px 30px 40px 30px !important;
    /* Exact padding from reference */
    border-radius: 8px !important;
    margin: 40px auto !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    max-width: 100% !important;
    display: block !important;
}

/* First row adjustment (From Reference) */
#formEmailCourseInfo>.row:first-child {
    padding-top: 15px !important;
}

/* 2. SECTION HEADERS (.labelSpanStyle) */
/* Adapting to match the Label Typography but larger */
#formEmailCourseInfo .labelSpanStyle {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #171717 !important;
    /* Matches Labels */
    margin-bottom: 15px !important;
    margin-top: 10px !important;
    display: block !important;
    border-bottom: 2px solid #f0f0f0 !important;
    /* Visual separation */
    padding-bottom: 5px !important;
}

/* 3. THE LABELS (Exact Typography) */
#formEmailCourseInfo label,
#formEmailCourseInfo .requiredFieldLabel {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    /* Exact size */
    color: #171717 !important;
    /* Exact Dark Maroon/Black */
    margin-bottom: 8px !important;
    display: block !important;
}

/* 4. INPUTS (Exact Replica) */
#formEmailCourseInfo .form-control {
    /* Dimensions and Spacing */
    height: auto !important;
    padding: 12px 15px !important;
    /* Exact padding */

    /* Border and Background */
    background-color: #f8f9fa !important;
    /* Exact Light Gray */
    border: 1px solid #ced4da !important;
    /* Exact Soft Gray */
    border-radius: 4px !important;

    /* Internal Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #171717 !important;

    /* Smooth transition */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* 5. FOCUS STATE (Brand Key) */
#formEmailCourseInfo .form-control:focus {
    border-color: #8b2331 !important;
    /* Maroon Border */
    box-shadow: 0 0 0 0.2rem rgba(139, 35, 49, 0.25) !important;
    /* Halo Maroon */
    outline: 0 !important;
    background-color: #fff !important;
}

/* 6. BUTTONS CONTAINER */
#formEmailCourseInfo .buttons {
    margin-top: 20px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 15px !important;
}

/* 7. SEND BUTTON (Primary - Matching 'Submit Request' styles) */
#formEmailCourseInfo #buttonSend {
    /* Dimensions & Spacing */
    padding: 12px 30px !important;
    /* Exact padding */
    min-width: 150px !important;

    /* Colors */
    background-color: #D41F37 !important;
    border: 2px solid #D41F37 !important;
    color: #ffffff !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 0px !important;
    transition: all 0.3s ease !important;
}

#formEmailCourseInfo #buttonSend:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* 8. CANCEL BUTTON (Secondary - Visual Consistency) */
#formEmailCourseInfo #buttonCancel {
    /* Dimensions & Spacing (Same as Send) */
    padding: 12px 30px !important;
    min-width: 150px !important;

    /* Colors (Secondary) */
    background-color: #ffffff !important;
    border: 1px solid #D41F37 !important;
    /* Matches Input Border */
    color: #D41F37 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Consistent weight */
    text-transform: uppercase !important;
    border-radius: 0px !important;
    transition: all 0.3s ease !important;
}

#formEmailCourseInfo #buttonCancel:hover {
    border-color: #D41F37 !important;
    color: #D41F37 !important;
    background-color: #fff !important;
}

/* =======================================================
 * MODULE: REMIND ME FORM (FINAL GOLDEN EDITION)
 * Target: #formRemindOfCourse
 * Context: "Remind me at a later date"
 * =======================================================*/

/* 1. CONTAINER (White Card System) */
#formRemindOfCourse {
    background-color: #fff !important;
    padding: 40px 30px 40px 30px !important;
    border-radius: 8px !important;
    margin: 40px auto !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    max-width: 100% !important;
    display: block !important;
}

/* 2. GOLDEN RULE: TABLES (Corporate Maroon) */
/* Reset wrapper styling */
#formRemindOfCourse .table-responsive {
    border: none !important;
    margin-bottom: 20px !important;
    overflow-x: auto !important;
}

#formRemindOfCourse table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;
    border: none !important;
}

/* Header Styling (Thead) - Dark Maroon */
#formRemindOfCourse table thead th {
    background-color: rgb(52, 17, 26) !important;
    /* Corporate Maroon */
    color: white !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Custom Borders (Golden Rule) */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Grey Separator */
    border-bottom: none !important;
}

/* Remove right border from the last header cell */
#formRemindOfCourse table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* Fix for the internal span inside TH (Force White) */
#formRemindOfCourse table thead th .labelSpanStyle {
    color: white !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Body Styling (Tbody) - Zebra Striping */
/* Odd Rows -> Light Grey */
#formRemindOfCourse table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows -> White */
#formRemindOfCourse table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* Cell Styling */
#formRemindOfCourse table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important;
    /* Soft borders */
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
    font-size: 0.9rem !important;
}

/* Radio Button Vertical Align Fix */
#formRemindOfCourse .custom-control {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* 3. INPUTS & SELECTS (White Card System) */
#formRemindOfCourse label,
#formRemindOfCourse .requiredFieldLabel {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #171717 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#formRemindOfCourse .form-control {
    height: 50px !important;
    padding: 10px 15px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    /* Inputs keep radius */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #171717 !important;
    transition: all 0.3s ease !important;
}

#formRemindOfCourse .form-control:focus {
    border-color: #8b2331 !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 35, 49, 0.25) !important;
    outline: 0 !important;
    background-color: #fff !important;
}

/* Select Arrow Fix */
#formRemindOfCourse select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2334111A%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px top 50% !important;
    background-size: 12px auto !important;
    padding-right: 30px !important;
}

/* 4. BUTTONS CONTAINER */
#formRemindOfCourse .buttons {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 15px !important;
}

/* 5. GOLDEN RULE: CANCEL BUTTON (Secondary Red Outline) */
#formRemindOfCourse #buttonCancel {
    /* Dimensions & Spacing */
    padding: 12px 30px !important;
    min-width: 150px !important;

    /* Colors */
    background-color: #ffffff !important;
    border: 1px solid #D41F37 !important;
    /* Red Border */
    color: #D41F37 !important;
    /* Red Text */

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;

    /* Shape (Golden Rule) */
    border-radius: 0px !important;
    transition: all 0.3s ease !important;
}

#formRemindOfCourse #buttonCancel:hover {
    border-color: #D41F37 !important;
    color: #D41F37 !important;
    background-color: #fff !important;
}

/* 6. GOLDEN RULE: SEND BUTTON (Primary) */
/* Square corners, solid fill */
#formRemindOfCourse #buttonSend {
    padding: 12px 30px !important;
    min-width: 150px !important;

    background-color: #8b2331 !important;
    border: 1px solid #8b2331 !important;
    color: #ffffff !important;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;

    /* Shape (Golden Rule) */
    border-radius: 0px !important;
    transition: all 0.3s ease !important;
}

#formRemindOfCourse #buttonSend:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;

}


/* =======================================================
 * PAGE: CERTIFICATE PROFILE (Stream Details)
 * Styles the accordion and course lists on the certificate page.
 * Selectors are unique to this page to avoid conflicts.
 *========================================================*/

#certificateNumRequired {
    /* * MUST DO: 'inline-block' allows the <span> to have
  * padding, margins, and a background color properly.
  */
    display: inline-block;

    /* Background & Text Styling */
    background-color: #E9E5E5;
    /* Light grey background */
    color: #34111A;
    /* Dark text color */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Bold text */
    font-size: 0.9rem;

    /* Spacing and shape */
    padding: 8px 12px 8px 10px;
    /* Top, Right, Bottom, Left */
    margin-bottom: 20px;
    /* Space below the badge */
    margin-top: 15px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 4px;
}


/* =======================================================
 * PAGE: CERTIFICATE PROFILE (Stream Details) - v2
 * Styles the accordion and course lists on the certificate page.
 * (v2: Fixes background conflict and H2 specificity)
 *========================================================*/

/* 1. Main Container (NEW)
 * This is where the grey background and padding go.
 *******************************************************/
#certificateStreams {
    background-color: #f0f0f0;
    padding: 15px 15px 5px 15px;
    /* Added top padding for the H2 */
    border-radius: 4px;
    margin-top: 0px !important;
}

/* 2. Main Title Style ("Courses")
 * H2 Container (remains transparent)
 *******************************************************/
#certificateStreams .sectionHeader {
    padding: 0 !important;
    margin-bottom: 1rem;
    background-color: transparent !important;
    /* Correct: lets the grey show through */
    border: none !important;
}

/* The H2 (MODIFIED to win specificity) */
#certificateStreams h2 {
    /* --- Vertical Bar --- */
    border-left: 3px solid #8b2331;
    padding-left: 0.5rem !important;
    display: inline-block;

    /* --- Font Styles (Now win) --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    margin-top: 1.5rem !important;
    /* Remove default margins */
}

/* 3. Accordion Panel Style (Shadow and Background)
 * (No changes)
 *******************************************************/
#certificateStreamsContainer .certificateStreamContainer {
    border: none !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #fff !important;
}

#certificateStreamsContainer .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
}

/* =======================================================
 * 3b. ACCORDION CONTENT STYLE (MODIFIED)
 * Targets the .card-body INSIDE the collapsible panel
 *========================================================*/
#certificateStreamsContainer .panel-collapse .card-body {
    /* We force the content area background to be GREY */
    background-color: transparent !important;

    /* We give padding so the boxes don't touch the edges */
    padding: 15px !important;

    /* 'border: none' was moved to rule 3c */
}

/* =======================================================
 * 3c. BOOTSTRAP BORDER FIX (NEW RULE!)
 * Targets the .card that is the collapsible panel
 *========================================================*/
#certificateStreamsContainer .panel-collapse.card {
    /*
   * This overrides Bootstrap's 'border: 1px solid ...'
   * by targeting the 'div' that has BOTH classes.
   */
    border: none !important;
}


/* 4. Accordion Icons (Global)
 * (No changes - if you already have it, don't repeat it)
 *******************************************************/
.panelHeaderIcon.glyphicon-plus::before {
    content: "\f078" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

.panelHeaderIcon.glyphicon-minus::before {
    content: "\f077" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* 5. Course Style (White Boxes)
 * (Switched to robust 'position: absolute' logic)
 *******************************************************/
#certificateStreamsContainer .certificateStreamItem {
    display: block;
    margin-bottom: 10px;
    background-color: white !important;
    border-radius: 4px;
    overflow: hidden;
    /* This is key */
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #E9E5E5;
}

#certificateStreamsContainer .certificateStreamItems {
    padding-left: 0;
    margin-top: 10px;
}

/* === MODIFIED RULE (The <a> tag) === */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader {
    /* * We use 'display: block' instead of 'flex'.
     * This makes the <a> a simple block container.
     */
    display: block !important;

    /* * 'position: relative' is the anchor for
     * the ::before and ::after elements.
     */
    position: relative !important;

    /* * The padding defines the height AND makes room.
     * 12px top/bottom = height
     * 45px left = room for the maroon bar
     * 40px right = room for the chevron arrow
     */
    padding: 12px 40px 12px 45px !important;

    font-weight: 500 !important;
    font-size: 0.8rem !important;
    color: #34111a !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

/* === MODIFIED RULE (The ::before element) === */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader::before {
    content: "\f02d";
    /* fa-book */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* --- THIS IS THE FIX --- */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    /* * This forces the bar to be 100% of the <a> tag's
     * height, no matter how tall the <a> gets.
     */
    height: 100% !important;

    width: 35px !important;
    background-color: #E9E5E5 !important;
    color: #34111A !important;
    border-radius: 4px 0 0 4px !important;

    /* * We use flexbox here just to center the icon
     * INSIDE the maroon bar.
     */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1rem !important;
}

/* === NEW RULE (Spacing for Text) === */
/* * This adds a small gap between the course code
 * and the course title, since they are both inline.
 */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader .courseCode {
    margin-right: 0.5em;
}


/* === MODIFIED RULE (The ::after arrow) === */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader::after {
    content: "\f054";
    /* fa-chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    font-size: 1rem;
    color: #34111a;

    /* * Position the arrow on the right side
     * and center it vertically.
     */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) translateX(5px);

    /* Fade-in animation */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* (Hover rules modified) */
#certificateStreamsContainer .certificateStreamItem:hover {
    transform: scale(1.02);
    /* box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.14); */
    /* <-- DELETED OR COMMENTED LINE */
    z-index: 10;
    overflow: visible;
    border: 1px solid #E9E5E5;
}

#certificateStreamsContainer .certificateStreamItem:hover a.certificateStreamItemHeader::after {
    opacity: 1;
    /* Animate arrow, but keep vertical centering */
    transform: translateY(-50%) translateX(0);
}

/*
 * 6. CERTIFICATE ACCORDION - HEADER TITLE
 * Styles the <h3> title inside each accordion panel
 *******************************************************/

#certificateStreamsContainer h3.certificateStreamHeader {

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    color: #34111A;
    /* Dark color */

    /* Remove any Bootstrap 'card-title' style */
    margin-bottom: 0 !important;
}

/* =======================================================
 * 7. ACCORDION ALIGNMENT FIX (Flexbox) - v2
 * Vertically centers the title and icon
 *========================================================*/

/* 1. Target the .row inside the header */
/* This .row is ALREADY a flex container (from Bootstrap) */
#certificateStreamsContainer .card-header .row {

    /*
     * This is the magic rule: It tells the flex row
     * to vertically center its children (the .col-10 and .col-2)
     */
    align-items: center !important;
}

/* 2. (Recommended) Clean up margins */
/* This removes any default margins that offset the centering */

#certificateStreamsContainer .card-header h3 {

    margin: 0.5rem 15px 0 15px !important;
}

#certificateStreamsContainer .panelHeaderIcon {
    /* This removes your 'magic number' hack */
    margin-top: 0 !important;
}

/* =======================================================
 * 8. CERTIFICATE "MINIMUM REQUIRED" STYLE
 * Makes the "Minimum Required" label bold.
 * (Comments are in English)
 *========================================================*/

/*
 * By targeting .minRequiredLabel INSIDE #certificateStreamsContainer,
 * we ensure this rule only applies to this specific page
 * and won't conflict with other pages.
 */
#certificateStreamsContainer .minRequiredLabel {
    font-weight: 700 !important;
}

/*
 * This adds the icon to the LEFT side.
 * (You asked for ::after, but ::before is for the left)
 */
#certificateNumRequired::before {
    /* Icon: Using fa-book (a book) */
    content: "\f02d";

    /* Font Awesome family */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    /* Solid icon */

    /* Spacing and color */
    margin-right: 8px;
    /* Space between icon and text */
    color: #8e2736;
    /* MacEwan red for the icon */
}


/* If the separator is applied via content (common practice): */
.searchBreadcrumbSeparator:after {
    content: "/";
    /* Assuming the separator character is '|' */
    color: #171717 !important;
    /* Use the SCE color for the separator */
    font-size: .77rem !important;
    opacity: 0.8 !important;
    /* Make it slightly transparent for subtlety */
}

/* =======================================================
 * CERTIFICATE BUNDLES STYLING (Final Master Version)
 * Target: #certificateBundleInfo & #certificateBundlesContainer
 * Goal: Match Course Sections style + Centered Cart Button
 * =======================================================*/

/* 1. Main Container (Grey Background Box) */
#certificateBundleInfo {
    background-color: #f0f0f0 !important;
    padding: 20px 15px 5px 15px !important;
    border-radius: 4px !important;
    margin-top: 20px !important;
}

/* 2. Section Header (Enroll Now...) */
#certificateBundleInfo .sectionHeader {
    background-color: transparent !important;
    border: none !important;
    padding: 15px 0 10px 0 !important;
    margin-bottom: 0 !important;
}

/* 3. The Title (H2) Styling */
#certificateBundleInfo .sectionHeader h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    color: #171717 !important;

    /* Vertical Bar Accent */
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* 4. The Card (Accordion Item) - White Card */
#certificateBundlesContainer .certificateBundleContainer.card,
#certificateBundlesContainer .card {
    /* Kill the Bootstrap border */
    border: none !important;
    border-radius: 8px !important;

    /* Ensure White Background */
    background-color: #ffffff !important;
    background-clip: border-box !important;

    /* Replace border with modern shadow */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;

    /* Reset margins */
    margin-bottom: 1rem !important;
    overflow: hidden !important;

    /* Ensure display block to avoid weird flex conflicts */
    display: block !important;
}

/* 5. Card Header (Transparent to inherit white) */
#certificateBundlesContainer .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 15px 20px !important;
    cursor: pointer !important;
}

/* Remove bottom border if collapsed */
#certificateBundlesContainer .card-header.collapsed {
    border-bottom: none !important;
}

/* 6. Bundle Title (H3 inside header) */
#certificateBundlesContainer h3.certificateBundleHeader {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #171717 !important;
    margin: 0 !important;
    padding-top: 5px !important;
}

/* 7. Icons (+ / -) */
#certificateBundlesContainer .panelHeaderIcon.glyphicon-plus::before {
    content: "\f078" !important;
    /* Chevron Down */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

#certificateBundlesContainer .panelHeaderIcon.glyphicon-minus::before {
    content: "\f077" !important;
    /* Chevron Up */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* 8. Content Body (Transparent) */
#certificateBundlesContainer .card-body {
    background-color: transparent !important;
    padding: 20px !important;
}

/* 9. ADD TO CART BUTTON (Centered + Icon) */

/* A. Container Layout: Center Alignment */
.certBundleApplyContainer.buttons {
    display: flex !important;
    justify-content: center !important;
    /* CENTERED */
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* B. Icon Injection (Shopping Cart) */
/* Targets specific button ID and generic class for safety */
#buttonAddToCart_0::before,
.certBundleApplyContainer.buttons .btn-primary::before {
    content: "\f217";
    /* fa-cart-plus */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 10px !important;
    font-size: 1.1em !important;
    color: inherit !important;
}

/* C. Button Styling */
#buttonAddToCart_0 {
    background-color: #d51f37 !important;
    border-color: #d51f37 !important;
    border-radius: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover Effect */
#buttonAddToCart_0:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* 10. Data Rows (Description, Price) */
.certBundleInfo {
    margin-bottom: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 10px !important;
}

.certBundleInfo:last-child {
    border-bottom: none !important;
}

/* Labels: Maroon to match Design System */
.certBundleInfo .labelSpanStyle {
    font-weight: 700 !important;
    color: #171717 !important;
    /* Maroon Labels */
    font-family: 'Montserrat', sans-serif !important;
}

/* Values: Dark Grey */
.certBundleInfo .col-8 {
    color: #34111A !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* =======================================================
 * PAGE: BUNDLE SECTION SELECTION (Scoped Styling)
 * Target: body#pageBundleSectionSelection
 * Goal: Transform accordion into "Grey Background / White Card" style
 * WITHOUT affecting other pages.
 * =======================================================*/

/* 1. MAIN CONTAINER (The Grey Box Wrapper) */
#pageBundleSectionSelection #bundleCoursesContainer {
    background-color: #f0f0f0 !important;
    /* Grey Background */
    padding: 20px !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
}

/* 2. SECTION TITLES (H2 - "Management Supervision Requirements") */
/* These are outside the cards, sitting on the grey background */
#pageBundleSectionSelection .certificateStreamHeaderSpan h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #34111A !important;

    /* The Maroon Vertical Bar */
    border-left: 4px solid #8b2331 !important;
    padding-left: 10px !important;

    margin-top: 10px !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
}

/* 3. DESCRIPTION TEXT (Between Title and Cards) */
#pageBundleSectionSelection .certificateStreamHeaderSpan h3,
#pageBundleSectionSelection .certificateStreamHeaderSpan p {
    color: #343434 !important;
    font-family: 'Montserrat', sans-serif !important;
    padding-left: 5px !important;
}

/* 4. THE CARD (The Accordion Item - White Box) */
/* NUCLEAR FIX: High specificity to override Bootstrap's default .card border */
#pageBundleSectionSelection .certificateStreamItemContainer.card,
#pageBundleSectionSelection .certificateStreamItemContainer {
    background-color: #ffffff !important;
    /* White Card */
    background-clip: border-box !important;

    /* Remove default Bootstrap borders */
    border: none !important;
    border-radius: 8px !important;

    /* Modern Styling */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    /* Soft Shadow */
    margin-bottom: 15px !important;
    /* Space between cards */
    overflow: hidden !important;

    /* Fix potential Flexbox layout issues */
    display: block !important;
}

/* =======================================================
 * FIX: REMOVE INNER BOOTSTRAP BORDER
 * Target: The collapsible container which has class .card
 * =======================================================*/

#pageBundleSectionSelection .panel-collapse.card {
    border: none !important;
    /* Kills the 1px solid rgba... border */
    box-shadow: none !important;
    /* Removes inner shadows if any */
    background-color: transparent !important;
    /* Avoids extra white patches */
    border-radius: 0 !important;
}

/* 5. CARD HEADER (The Clickable Bar) */
#pageBundleSectionSelection .certificateStreamItemContainer .card-header {
    background-color: transparent !important;
    /* Inherits White */
    border-bottom: 1px solid #f0f0f0 !important;
    /* Subtle Separator */
    padding: 15px 20px !important;
    cursor: pointer !important;
}

/* 6. COURSE TITLE INSIDE CARD (H3) */
#pageBundleSectionSelection .certificateStreamItemContainer h3.card-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #34111A !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Style the Course Code (e.g., 0751) differently */
#pageBundleSectionSelection .certificateStreamItemContainer .courseCode {
    color: #8b2331 !important;
    /* Maroon Code */
    font-weight: 700 !important;
    margin-right: 10px !important;
}

/* 7. CARD BODY (Content Area) */
#pageBundleSectionSelection .certificateStreamItemContainer .card-body {
    background-color: transparent !important;
    padding: 20px !important;
}

/* 8. ICONS (+ / -) */
/* Force FontAwesome styling for consistency */
#pageBundleSectionSelection .panelHeaderIcon {
    color: #34111A !important;
    font-size: 1rem !important;
}

#pageBundleSectionSelection .panelHeaderIcon.glyphicon-plus::before {
    content: "\f078" !important;
    /* Chevron Down */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

#pageBundleSectionSelection .panelHeaderIcon.glyphicon-minus::before {
    content: "\f077" !important;
    /* Chevron Up */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* 9. RADIO BUTTON AREA (Selection Styling) */
/* Make the section selection look cleaner */
#pageBundleSectionSelection .custom-radio .custom-control-label {
    font-family: 'Montserrat', sans-serif !important;
    color: #343434 !important;
    font-size: 0.95rem !important;
    padding-top: 2px !important;
}

#pageBundleSectionSelection .sectionBlock {
    display: block !important;
    padding: 10px !important;
    background-color: #f9f9f9 !important;
    /* Light grey block for section */
    border-radius: 4px !important;
    margin-top: 5px !important;
    border: 1px solid #eee !important;
}

#pageBundleSectionSelection .bundleSectionLabel {
    font-weight: 700 !important;
    color: #8b2331 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
}


/* =======================================================
 * CERTIFICATE BUNDLES - VISUAL REFINEMENT
 * Scope: #certificateBundleInfo container
 * Goal: Align typography with Course Accordion standards
 * =======================================================*/

/* 1. BUNDLE HEADER TITLE ("Management and Supervision") */
#certificateBundleInfo .certificateBundleHeader {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    /* Stand out as a header */
    font-weight: 700 !important;
    color: #8b2331 !important;
    /* Maroon Brand Color */
    margin-bottom: 0 !important;
}

/* 2. LABELS ("Description", "Certificate Price", "Deadline") */
#certificateBundleInfo .labelSpanStyle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    /* Elegant Label Size */
    color: #171717 !important;
    /* Soft Grey */
    font-weight: 700 !important;
    /* Bold */
}

/* 3. CONTENT TEXT ("Buy all your courses...", "365 Days") */
#certificateBundleInfo .col-8 span:not(.labelSpanStyle) {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    /* Standard Body Size */
    color: #171717 !important;
    /* Readable Dark Grey */
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* 4. PRICE VALUE ("$1,000.00") */
#certificateBundleInfo span[id^="bundlePrice_"] {
    font-size: 1rem !important;
    /* Slightly larger */
    font-weight: 700 !important;
    /* Emphasize Value */
    color: #171717 !important;
    /* Black for Price */
}

/* 5. LINKS ("Bundle Price") */
#certificateBundleInfo a {
    color: #8b2331 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

#certificateBundleInfo a:hover {
    text-decoration: underline !important;
    color: #34111A !important;
}


/* =======================================================
 * MODULE: CERTIFICATE STREAMS (Required & Elective Lists)
 * Scope: .certificateStreamContainer (Handles both blocks)
 * Goal: Consistent typography, link colors, and spacing
 * =======================================================*/

/* 1. STREAM MAIN HEADER ("Management Supervision Requirements") */
/* Applies to the clickable accordion header */
.certificateStreamContainer .certificateStreamHeader {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #8b2331 !important;
    /* Maroon */
    margin-bottom: 0 !important;
}

/* 2. LABELS ("Minimum Required") */
.certificateStreamContainer .minRequiredLabel {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    color: #171717 !important;
    font-weight: 700 !important;
}

/* 3. DATA VALUES ("6 Course(s)", "1 Course(s)") */
.certificateStreamContainer .form-control-plaintext {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #171717 !important;
    padding-top: 0 !important;
    /* Align with label */
}

/* 4. INTERNAL DESCRIPTION ("Elective Courses", Paragraphs) */
/* Fixes the h3 being too large and paragraphs being too light */
.certificateStreamContainer .certicateStreamDesc h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #171717 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

.certificateStreamContainer .certicateStreamDesc p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    color: #171717 !important;
    line-height: 1.5 !important;
}

/* 5. COURSE LIST ITEMS (The Links) */
/* e.g. "0755 Managing Projects" */
.certificateStreamContainer .certificateStreamItemHeader {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #8b2331 !important;
    /* Maroon Links */
    text-decoration: underline !important;
    display: block !important;
    padding: 8px 0 !important;
    /* Better touch targets */
    border-bottom: 1px dotted #eee !important;
    /* Subtle separator */
}

.certificateStreamContainer .certificateStreamItemHeader:hover {
    color: #34111A !important;
    /* Darker Maroon */
    text-decoration: underline !important;
    background-color: #f9f9f9 !important;
    /* Subtle hover effect */
}

/* 6. COURSE CODE Styling ("0755") */
/* Makes the code slightly distinct from the title */
.certificateStreamContainer .courseCode {
    color: #171717 !important;
    font-weight: 400 !important;
    margin-right: 8px !important;
}


/* =======================================================
 * CUSTOM TAB STYLING (for Program Streams)
 * (Revised to style the new JavaScript sliding indicator)
 *========================================================*/

/* 1. The Tab Bar Container (the <ul>)
 * This adds the full-width, 1px dividing line.
 * !! MUST be position: relative for the indicator !!
 */
.sce-tabs {
    /* Positioning */
    position: relative;
    /* This is the anchor for the indicator */

    /* Layout: Center the tabs */
    justify-content: center;

    /* The 1px full-width bottom border */
    border-bottom: 0px solid #8E8F90;

    /* Remove default Bootstrap bottom border */
    border-top: none;
    border-left: none;
    border-right: none;

    /* Space below the tab bar */
    margin-bottom: 2rem;
}

/* 2. The Tab Links (the <a>)
 * Defines the new font styles.
 */
.sce-tabs .nav-link {
    /* Remove all default Bootstrap borders */
    border: none !important;
    border-radius: 0 !important;

    /* New Font Styles */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #171717;
    /* Dark text color */

    /* Sizing and Spacing */
    padding: 0.75rem 1.5rem;

    /* KEY: Pull the tab down to sit *on* the 1px line */
    margin-bottom: -1px;

    transition: color 0.3s ease;
}

/* 3. The Hover State (for INACTIVE tabs only) */
.sce-tabs .nav-link:not(.active):hover {
    color: #171717;
    background-color: transparent;
}

/* 4. The Active Tab */
.sce-tabs .nav-link.active {
    color: #8b2331;
    /* Active text color */
    background-color: transparent;
}

/* 5. THE NEW SLIDING INDICATOR 
 * This is the <div> added by the JavaScript.
 */
.sce-tab-indicator {
    /* Sizing and Color */
    height: 5px;
    background-color: #8b2331;

    /* Positioning */
    position: absolute;
    bottom: -1px;
    /* Sits on top of the grey 1px line */

    /* !! THE ANIMATION !! */
    /* Animate 'left' and 'width' changes smoothly */
    transition: left 0.4s cubic-bezier(0.19, 1, 0.22, 1),
        width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* FILE: isolated-pages.css
   PROJECT: MacEwan University - School of Continuing Education (SCE)
   ARCHITECTURE: Scoped Isolation (Island Mode) + Absolute Centering
   FIX: 0.8rem Certificate Font-Size & High-Specificity Anchor
   LAST UPDATED: January 27, 2026
*/

/* =======================================================
 * STYLING FOR "COURSES" AND "CERTIFICATES" TABLES
 * (TOTAL ISOLATION: Scoped strictly to SCE IDs)
 * ======================================================= */

/* 0. Style the Tab Content Area (Parent) */
#programStreamCoursesAndCertificates {
    background-color: #E9E5E5;
    padding: 20px;
    border-radius: 4px;
    overflow: visible;
}

/* 1. Target BOTH table containers */
#programStreamCourses,
#programStreamCertificates {
    background-color: #E9E5E5 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 4px;
    overflow: visible !important;
}

/* 2. Scroll Container Fix: Prevents shadow clipping */
#programStreamCourses .table-responsive,
#programStreamCertificates .table-responsive {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: visible !important;
}

/* 3. Table Rows (<tr>) as "Boxes" */
#programStreamCourses table.table tr,
#programStreamCertificates table.table tr {
    display: block !important;
    margin-bottom: 15px !important;
    background-color: white !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, overflow 0s 0.2s !important;
}

/* 4. Cells & Links Reset */
#programStreamCourses table.table td,
#programStreamCertificates table.table td {
    border: none !important;
    padding: 0 !important;
}

#programStreamCourses table.table a,
#programStreamCertificates table.table a {
    display: block !important;
    width: 100% !important;
    padding: 12px 40px 12px 45px !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    color: #34111a !important;
    text-decoration: none !important;
    position: relative !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

/* --- 4.1. Specific Typography for Course Codes --- */
#programStreamCourses table.table a .courseCode,
#programStreamCertificates table.table a .courseCode {
    font-weight: 700 !important;
    margin-right: 4px !important;
    color: inherit !important;
    white-space: nowrap !important;
}

/* 5. The Icon Box (::before) */
#programStreamCourses table.table a::before,
#programStreamCertificates table.table a::before {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 35px !important;
    background-color: #34111A !important;
    color: white !important;
    border-radius: 4px 0 0 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1rem !important;
    z-index: 2 !important;
}

#programStreamCourses table.table a::before {
    content: "\f02d" !important;
}

#programStreamCertificates table.table a::before {
    content: "\f559" !important;
}

/* 6. The Arrow Icon (::after) - Absolute Centering */
#programStreamCourses table.table a::after,
#programStreamCertificates table.table a::after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    color: #34111A !important;
    position: absolute !important;
    right: 25px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(5px) !important;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* 7. Hover Interaction: Master Stability */
#programStreamCourses table.table tr:hover,
#programStreamCertificates table.table tr:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
    overflow: visible !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, overflow 0s 0s !important;
}

#programStreamCourses table.table tr:hover a::after,
#programStreamCertificates table.table tr:hover a::after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(15px) !important;
}

/* 8. MEDIA QUERY: MOBILE REFINEMENT (The Final Fix) */
@media (max-width: 767px) {

    #programStreamCourses table.table a,
    #programStreamCertificates table.table a {
        padding-left: 40px !important;
        padding-right: 35px !important;
    }

    /* ESPECIFICIDAD TRIPLE: Forzamos el 0.8rem para Certificados */
    /* Usamos toda la cadena de herencia para ganar a las reglas globales */
    div#programStreamCertificates table.table tbody tr td a {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    /* Ajuste fino para los códigos de curso en mobile */
    #programStreamCourses table.table a {
        font-size: 0.9rem !important;
    }
}

/* =======================================================
 * PROGRAM STREAM - FULL-WIDTH OVERRIDE
 * Overrides Bootstrap's .col-lg-6 to force 100% width
 * on non-tabbed program pages.
 *========================================================*/

/*
 * By using .programStream as a parent, this selector
 * (0,2,0) becomes stronger than Bootstrap's .col-lg-6 (0,1,0).
 * This forces both 'Courses' and 'Certificates' columns
 * to be 100% wide, stacking them vertically.
 */
.programStream .col-lg-6 {
    /* Annul Bootstrap's 50% width restrictions */
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* =======================================================
 * MOBILE OPTIMIZATION: Programs & Streams Tables
 * Forces 100% width and fixes text wrapping/clipping
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Force Table Width to 100% */
    #programStreamCourses table.table,
    #programAreaCourses table.table {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Allow Text Wrapping (Multi-line) & Dynamic Height */
    #programStreamCourses table.table a,
    #programAreaCourses table.table a {
        font-size: 0.8rem !important;
        /* Allow text to wrap to next line */
        white-space: normal !important;

        /* Allow container to grow vertically */
        height: auto !important;

        /* Adjust readability */
        line-height: 1.4 !important;

        /* Add padding to let text breathe */
        padding-top: 15px !important;
        padding-bottom: 15px !important;

        /* Ensure text doesn't overlap the arrow on the right */
        padding-right: 40px !important;
    }

    /* 3. Fix Chevron Position (Absolute Center) */
    /* Keeps the arrow vertically centered even if text is 3 lines tall */
    #programStreamCourses table.table a::after,
    #programAreaCourses table.table a::after {
        top: 50% !important;
        transform: translateY(-50%) !important;
        /* Perfect vertical center */
        right: 30px !important;
        /* Fixed distance from right edge */
        position: absolute !important;
        /* Keep it absolute for stability */
    }

    /* 4. Ensure Row Grows & Doesn't Clip */
    #programStreamCourses table.table tr,
    #programAreaCourses table.table tr {
        height: auto !important;
        /* Important: Allows shadows and content to show fully */
        overflow: visible !important;
    }
}


/* =======================================================
 * PROGRAM STREAM HEADER REDESIGN (COURSES)
 * Replaces the static 'Courses' title with "Explore all →".
 *========================================================*/

/* 1. Style the Header Container (the <div>) */
#programStreamCourses .card-header {
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    margin-bottom: 1rem;
}

/* 2. Target the Original H2 Element */
#programStreamCourses .card-header h2 {
    /* "Hides" the original "Courses" text */
    font-size: 0 !important;
    color: transparent;
}

/* 3. Create the New Text (using ::after) */
#programStreamCourses .card-header h2::after {
    /* This creates the new text */
    content: "Explore courses →";

    /* Apply your requested font styles */
    color: #34111A !important;
    font-size: 1.2838rem !important;
    line-height: 1.24 !important;

    /* Add back standard font settings */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Bold */

    /* Ensure it renders correctly */
    display: inline-block;
}

/* =======================================================
 * PROGRAM STREAM HEADER REDESIGN (CERTIFICATES)
 * Replaces the static 'Certificates' title.
 *========================================================*/

/* 1. Style the Header Container (the <div>) */
#programStreamCertificates .card-header {
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    margin-bottom: 1rem;
}

/* 2. Target the Original H2 Element */
#programStreamCertificates .card-header h2 {
    /* "Hides" the original "Certificates" text */
    font-size: 0 !important;
    color: transparent;
}

/* 3. Create the New Text (using ::after) */
#programStreamCertificates .card-header h2::after {
    /* This creates the new text */
    content: "Prepare for an industry certification";

    /* Apply your requested font styles */
    color: #34111A !important;
    font-size: 1.2838rem !important;
    line-height: 1.24 !important;

    /* Add back standard font settings */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Bold */

    /* Ensure it renders correctly */
    display: inline-block;
}

/*******************************************************
 * ICON REPLACEMENT: CHEVRON LEFT to HOME (Specific)
 * Forces the 'Home' icon (Unicode \f015) using the 
 * unique ID to prevent global alteration of other icons.
 *******************************************************/

#searchBreadcrumbBackIcon {
    /* 1. Ensure the correct Font Family is used (Font Awesome) */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    /* Home is usually a solid/bold icon */
    /* 2. Force the content to be the HOME icon Unicode */
    content: "\f015" !important;
    /* 3. Ensure the icon inherits the link color */
    color: #171717 !important;
    font-size: 1.1em !important;
}

/* If the element is still using the glyphicon class, this is the most defensive CSS: */
#searchBreadcrumbBackIcon.glyphicon.glyphicon-chevron-left::before {
    content: "\f015" !important;
}

/* ==========================================================
   FORM BUTTONS OVERRIDES 
   ========================================================== */

/* 1. Main Action Buttons (Bootstrap class) */
/* Applies SCE maroon to buttons with 'btn-primary' class */
/* =======================================================
 * PRIMARY BUTTON WITH CART ICON
 * Adds shopping cart icon to all primary buttons
 * =======================================================*/

.btn-primary {
    background-color: #d51f37 !important;
    border: #d51f37 solid 1px !important;
    border-radius: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;

    /* Prepare for icon */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button Hover State */
.btn-primary:hover {
    background-color: #34111A !important;
    border: #34111A solid 1px !important;
    /* Dark Maroon */
}

/* =======================================================
 * MOBILE: ADD TO CART BUTTON SPACING
 * Adds breathing room below the button on mobile
 * =======================================================*/

@media (max-width: 767px) {

    .courseSectionEnrollmentActions .btn-primary,
    button[id^="buttonAddToBasket"] {
        margin-bottom: 20px !important;
        /* Space below button */
        width: 100% !important;
        /* Optional: Full-width button on mobile */
    }

}

/* 2. Native Form Buttons (<input type="submit/button">) */
/* Applies SCE maroon to native action buttons */
/* If .btn or .btn-primary class is applied, they inherit previous style.  
   If not, it's good practice to cover them as well: */
input[type="submit"],
input[type="button"] {
    /* You might need additional rules here if they don't use .btn classes */
    /* But if they have .btn-primary class, rules above apply */
}

/* Neutralize background color for icon buttons inside .btn-group */
.btn-group .btn {
    /* Transparent background and transparent border */
    background-color: transparent !important;
    border-color: transparent !important;

    /* Icon/text color. Use gray or default text color */
    color: #171717333;
}

/* Optional: Hover style for icons */
.btn-group .btn:hover {
    background-color: #EEEEEE !important;
    /* Very light background on hover */
    border-color: #EEEEEE !important;
    color: #000000;
}

/*******************************************************
 * SECONDARY BUTTON CUSTOMIZATION (Global override for .btn-secondary)
 * This will affect ALL buttons with the .btn-secondary class.
 *******************************************************/

.btn-secondary {
    background-color: #8b2331 !important;
    /* SCE Maroon (ex.) */
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
}

.btn-secondary:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* Only for "Add to Cart" buttons */
.courseSectionEnrollmentActions .btn-primary::before,
button[id^="buttonAddToBasket"]::before {
    content: "\f217";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 10px !important;
    font-size: 1.1em !important;
    color: inherit !important;
}

/* =======================================================
 * NOTIFY ME BUTTON - BELL ICON OVERRIDE
 * Target: Only buttons with ID starting with "buttonNotify"
 * Replaces cart icon with notification bell
 * =======================================================*/

/* Icon override ONLY for Notify buttons */
button[id^="buttonNotify"]::before {
    content: "\f0f3" !important;
    /* fa-bell (campana) */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    /* Solid style */

    margin-right: 10px !important;
    font-size: 1.1em !important;
    color: inherit !important;
}

/* Optional: Subtle hover animation for Notify button */
button[id^="buttonNotify"]:hover::before {
    animation: bellRing 0.5s ease-in-out !important;
}

/* Bell animation (optional but cool) */
@keyframes bellRing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

/* =======================================================
 * COMPONENT: REQUEST INFO BUTTON (Open Envelope Effect)
 * Target: Buttons inside the Course Section Accordion ONLY
 * Action: Swaps Closed Envelope for Open Envelope on Hover
 * =======================================================*/

/* 1. INITIAL STATE: Closed Envelope */
#courseSectionsAccordion .courseSectionEnrollmentActions .buttonReqInfo::before {
    content: "\f0e0";
    /* fa-envelope (Closed) */

    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

    margin-right: 8px !important;
    font-size: 1.1em !important;
    color: inherit !important;
    vertical-align: middle !important;

    display: inline-block !important;
    /* We animate the transform (size/position), not the content swap */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 2. HOVER STATE: Open Envelope + Pop Effect */
#courseSectionsAccordion .courseSectionEnrollmentActions .buttonReqInfo:hover::before {
    /* SWAP ICON: fa-envelope-open */
    content: "\f2b6" !important;

    /* Small zoom and lift to simulate opening action */
    transform: scale(1.15) translateY(-1px) !important;
}

/* 3. Layout Fix (Standard) */
#courseSectionsAccordion .courseSectionEnrollmentActions .buttonReqInfo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =======================================================
 * COMPONENT: COURSE INQUIRY BUTTON (Alert Context ONLY)
 * Target: #buttonCourseInquiry inside the "Not Open" Warning
 * Action: White Border + Envelope Animation on Hover
 * Scope: Restricted to #courseProfileSections .alert-warning
 * =======================================================*/

/* 1. BUTTON HOVER STATE (Estilo del Botón) */
#courseProfileSections .alert.alert-warning #buttonCourseInquiry:hover {
    border: 1px solid #8b2331 !important;

    background-color: #34111A !important;
    color: #ffffff !important;
}

/* 2. INITIAL STATE: Closed Envelope Icon (Icono) */
#courseProfileSections .alert.alert-warning #buttonCourseInquiry::before {
    content: "\f0e0";
    /* fa-envelope (Closed) */

    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    /* Solid */

    margin-right: 10px !important;
    font-size: 1.1em !important;
    color: inherit !important;
    vertical-align: middle !important;

    /* Animation Setup */
    display: inline-block !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 3. HOVER STATE: Open Envelope + Pop Effect (Animación Icono) */
#courseProfileSections .alert.alert-warning #buttonCourseInquiry:hover::before {
    /* SWAP ICON: fa-envelope-open */
    content: "\f2b6" !important;

    /* Pop Animation */
    transform: scale(1.15) translateY(-1px) !important;
}

/* 4. Layout Alignment Fix */
#courseProfileSections .alert.alert-warning #buttonCourseInquiry {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/*******************************************************
 * MODAL TYPOGRAPHY BASE (Montserrat Font) 
 * Applies Montserrat globally but excludes the close icon and button.
 *******************************************************/

/* Targets the main content wrapper and general text containers. */
.modal-content,
.modal-content div,
/* Modified: Excludes any 'span' descendant of '.close' button */
.modal-content span:not(.close span) {
    font-family: 'Montserrat', sans-serif !important;
}

/* Specific exclusion for the button itself if it contains text */
.modal-content .close {
    font-family: inherit !important;
}

/* Explicitly targets the modal title for safety. */
.modal-title {
    font-family: 'Montserrat', sans-serif !important;
}

/*******************************************************
 * MODAL SPACING AND SPECIFIC STYLES CORRECTIONS
 * Corrects tight spacing and applies specific formatting.
 *******************************************************/

/* A. Headings Spacing (Separates heading from subsequent content) */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
    /* Uses 'em' for dynamic spacing based on the heading size */
    margin-bottom: 0.5em !important;
    margin-top: 1em !important;
}

/* B. Paragraph and List Spacing (Separates content blocks from each other) */
.modal-content p,
.modal-content ul,
.modal-content ol {
    /* Ensures sufficient vertical separation between text blocks */
    margin-bottom: 1em !important;
}

/* C. Specific Label Style (as established in previous steps) */
/* Ensures the 'Number of Sessions' and similar labels are bold */
.modal-content .labelSpanStyle {
    font-weight: 700 !important;
}

/* D. Table Header Text Styling (Ensures bold text and alignment for readability) */
.modal-content table th {
    text-align: left !important;
    font-weight: 700 !important;
}

/* E. Table Cell Styling (Ensures standard spacing and top alignment for multi-line content) */
.modal-content table td {
    padding: .75rem !important;
    vertical-align: top !important;
}

/*******************************************************
 * COOKIE CONSENT BANNER STYLING
 * Applies the application's global font, background, and button styles.
 *******************************************************/

/* 1. Global Font and Background */
.cc-window {
    /* Set the background color to match your application's theme. 
       (e.g., if your main brand color is blue: #007bff) */
    background-color: #34111a !important;
    /* <--- CHANGE THIS */
    /* Apply the Montserrat font to the entire banner */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8em !important;
    /* Ensure text color is readable against the new background */
    color: #fff !important;
    /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    box-shadow: 2px 2px 19px 0px rgba(0, 0, 0, 0.43);
    -webkit-box-shadow: 2px 2px 19px 0px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 2px 2px 19px 0px rgba(0, 0, 0, 0.43);
}

/* 2. Link Styling inside the banner */
.cc-window .cc-message a {
    /* Style links to match your app's link color */
    /* Base Link Color */
    color: #8b2331 !important;
    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;
    /* Optional: Make the text slightly bolder for emphasis */
    font-weight: 700 !important;
    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

.cc-window .cc-message a:hover {
    /* Style links to match your app's link color */
    /* Base Link Color */
    color: #fff !important;
    /* Ensure the link is underlined for clear visibility */
    text-decoration: none !important;
}

.cc-window .cc-message a:visited {
    /* Optional: Style for visited links (can be the same as base color or a different shade) */
    color: #fff !important;
}

/* 3. Button Styling (Deny and Accept) */
.cc-window .cc-btn {
    /* Uniform font and button styling */
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    color: #fff !important;
    /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    text-decoration: none !important;
}

.cc-window .cc-btn:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* 4. Accept Button (Primary/Highlight style) */
.cc-window .cc-allow {
    /* Use your application's primary button color for 'Accept' */
    /* Uniform font and button styling */
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    color: #fff !important;
    /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    text-decoration: none !important;
}

.cc-window .cc-allow:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* 5. Deny Button (Secondary/Outline style) */
.cc-window .cc-deny {
    /* Use a secondary, subtle, or outline style for 'Deny' */
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    color: #fff !important;
    /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    text-decoration: none !important;
}

.cc-window .cc-deny:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/*******************************************************
* PAGE: COURSE PROFILE (Section Details)
 * Component: .sectionHeader Padding Override
 * Reduces Bootstrap's '.card-body' (1.25rem) padding
 * to bring the <h2> title closer to the container edge.
 *******************************************************/

/*
 * Apply background to the main course accordion container
 */
#courseProfileSections {
    background-color: #f0f0f0;
    padding: 15px 15px 5px 15px;
    border-radius: 4px;
    margin-top: 20px;
}

/* 1. Reduce the padding on the .card-body container itself */
/* We target elements with BOTH classes for high specificity */
.card-body.sectionHeader {
    /* Reduce vertical padding (top/bottom) */
    padding-top: 0px !important;
    padding-bottom: 0px !important;

    /* Keep horizontal padding for alignment */
    padding-left: 5px;
    padding-right: 5px;

    /* Ensure the container adapts to the new tight padding */
    line-height: 1.3 !important;
}

/*
 * Overrides the default Bootstrap '.card' styles
 * for the 'Enroll Now' section header.
 */
#sectionEnrollmentHeader {
    /* Removes the white card background to let the parent bg show through */
    background-color: transparent;

    /* Removes the card border for a seamless look */
    border: none;

    /* Optional: Removes the shadow if Bootstrap adds one */
    box-shadow: none;
}

/* =======================================================
 * MODAL TABLE: SCHEDULE DATES
 * Standardizes the pop-up schedule table to match the
 * corporate look (Maroon Header + Zebra Striping).
 * Scoped to #sectionSchedulePopupDatesTable
 *========================================================*/

/* 1. General Table Layout */
#sectionSchedulePopupDatesTable {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    /* Slightly smaller for modals */
    color: rgb(23, 23, 23) !important;
    border: none !important;
}

/* 2. Header Styling (Maroon) */
#sectionSchedulePopupDatesTable thead th {
    background-color: rgb(52, 17, 26) !important;
    /* Maroon */
    color: white !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    /* Compact header */
    font-weight: 700 !important;
    text-transform: uppercase !important;

    padding: 12px 15px !important;
    vertical-align: middle !important;

    /* Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-bottom: none !important;
}

/* Remove right border from last header cell */
#sectionSchedulePopupDatesTable thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. Zebra Striping (Odd/Even Rows) */
#sectionSchedulePopupDatesTable tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
    /* Light Grey */
}

#sectionSchedulePopupDatesTable tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
    /* White */
}

/* 4. Cell Styling */
#sectionSchedulePopupDatesTable tbody td {
    padding: 10px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important;
    color: rgb(23, 23, 23) !important;
}

/* 5. Specific Column Tweaks (Optional) */
/* Center the Date and Time for better readability */
.sectionSchedulePopupDate,
.sectionSchedulePopupTime {
    white-space: nowrap !important;
    /* Prevent ugly wrapping */
}

/* =======================================================
 * SECTION: TOTAL SESSIONS BADGE
 * Wraps label and value in a grey pill with calendar icon.
 * Includes manual optical alignment fix.
 *========================================================*/

/* 1. Parent Container (The Pill Shape) */
.sectionTotalSessions {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Appearance */
    background-color: #E9E5E5 !important;
    color: #34111A !important;

    /* Shape */
    /* Reduced top/bottom padding slightly to compensate for the text padding */
    padding: 6px 15px !important;
    margin-bottom: 10px !important;

    /* Border Radius */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* 2. The Icon (Calendar) */
.sectionTotalSessions::before {
    content: "\f073";
    /* fa-calendar-alt */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;

    margin-right: 8px !important;
    color: #8e2736 !important;
    font-size: 1rem !important;
}

/* 3. The Label ("Number of Sessions") - YOUR FIX INCLUDED */
.sectionTotalSessions .labelSpanStyle {
    font-weight: 700 !important;
    margin-right: 5px !important;
    background: transparent !important;

    /* Optical Alignment Fix */
    margin-top: 0 !important;
    padding-top: 4px !important;
    /* Pushes text down to align visually */
    line-height: 1 !important;
}

/* =======================================================
 * APPLICATION HEADER STYLING
 * Applies the maroon vertical bar and custom font
 * to the "Application" header (scoped to #courseApplication).
 *========================================================*/

/* 1. Reset the default card/section header styles */
#courseApplication .sectionHeader {
    background-color: transparent !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1rem;
}

/* 2. Apply the Custom Style to the H2 element */
#courseApplication .sectionHeader h2 {
    /* --- Layout/Design (Vertical Bar) --- */
    border-left: 3px solid #8b2331;
    /* The maroon vertical bar */
    padding-left: 0.5rem !important;
    /* Space between bar and text */
    display: inline-block;
    /* Allows the background/border to wrap the text */

    /* --- Typography (User Requirements) --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;

    /* Ensure the text color is correct (assuming dark color) */
    color: #34111a !important;

    /* Remove default H2 margins that interfere with vertical bar */
    margin: 25px 0px 0px 0px !important;
}

/* =======================================================
 * COURSE APPLICATION CARD STYLING
 * Applies background and border to the application card
 * without affecting other cards on the page.
 *========================================================*/

/* Target the specific card inside the Application container */
#courseApplication .card.panel-default {
    /* Background and bottom border (user requirements) */
    background-color: #FFFFFF !important;
    border: none !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* =======================================================
 * APPLICATION INFO LABEL STYLING
 * Makes the "Name" label bold without affecting the value.
 *========================================================*/

/* Target the specific label span inside the application info row */
.courseApplicationInformationContainer .courseApplicationInfo .labelSpanStyle {
    font-weight: 700 !important;
}

/*******************************************************
 * ACCORDION STYLING (COURSE SECTIONS)
 * Overrides default Bootstrap .card styles for headers
 * and adds a modern shadow to each panel.
 *******************************************************/

/* 1. Accordion Panel Shadow & Spacing */
/* We target the individual .card elements inside the main accordion
   to give each section its own shadow, rather than one shadow on the group. */
#courseSectionsAccordion .card {
    border: none !important;
    /* Remove the default border to rely on the shadow */
    margin-bottom: 1rem !important;
    /* Add space between accordion items */

    /* This shadow is a standard, clean Bootstrap shadow */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 8px !important;
    /* Optional: adds rounded corners */
    overflow: hidden;
    /* Ensures content respects the rounded corners */
}

/* 2. Accordion Header Background */
/* Targets the header div (which has both .card-header and .panelHeadingToggle) */
#courseSectionsAccordion .card-header {
    background-color: #FFFFFF !important;
    /* Set background to white */
    border-bottom: 1px solid #e9ecef !important;
    /* Add a subtle bottom border */
}

/* 3. (OPTIONAL) Ensure header text color remains dark on white background */
#courseSectionsAccordion .card-header .courseSectionTitle {
    color: #a6a6a6 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .79rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .01rem !important;
    text-transform: uppercase !important;
}

/* Remove all margins from the H2 tag */
/* This is often the main cause of excessive space */
.sectionHeader h2 {
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Overrides the default section header title styles
 * This selector (#id .class) is stronger than the platform's (.class .class)
 */
#sectionEnrollmentHeader .sectionHeaderTitle {

    /* --- Vertical Border --- */
    /* Adds the 3px brown vertical line */
    /* (Using the project's established #8b2331) */
    border-left: 3px solid #8b2331;

    /* Adds spacing between the new line and the text */
    padding-left: 0.5rem;

    /* Ensures the border/padding apply correctly as a block */
    display: inline-block;

    /* --- Font Overrides --- */
    /* We MUST use !important here to win against the platform's !important rules */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;

    /* Resetting other properties from the original rule */
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    /* A sensible line-height for multi-line text */
}

/* =======================================================
 * COURSE AVAILABILITY STATUS (Icon, Text, and Styled Background)
 * Enhances the "Available" status with a checkmark icon,
 * custom-shaped green background, and specific font size,
 * while also adding a calendar icon to "Future Offering".
 *========================================================*/

/* 1. Base styling for all availability statuses */
/* This ensures the text and icon are styled together */
.courseProfileSectionAvailability {
    /* Use flexbox to align icon and text */
    display: inline-flex;
    align-items: center;

    /* Set base font size for the text content */
    font-size: 0.7rem;
    /* Adjusted text size */
    font-family: 'Montserrat', sans-serif;
    /* Recommended font */
    font-weight: 600;
    /* Medium bold */
    text-transform: uppercase;
    /* Add some horizontal padding to the overall container */
    padding: 4px 12px;

    /* Smooth transition for background color changes */
    transition: background-color 0.2s ease, color 0.2s ease;
}


/* 2. Styling for the "Available" status (Icon, Text, and Green Background) */
.courseProfileSectionAvailability_available {
    /* Green Background */
    background-color: #3EC3A4;
    /* Standard green */
    color: white;
    /* White text for contrast */
    /* Custom Border Radius */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 4px;
}

/* 3. Add the Checkmark Icon for "Available" */
.courseProfileSectionAvailability_available::before {
    /* Font Awesome Unicode for 'check-circle' */
    content: "\f058";

    /* Ensure it uses the Font Awesome font family */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    /* Use 'solid' weight */

    /* Style the icon */
    font-size: 1em;
    /* Icon size relative to parent font-size */
    margin-right: 0.5em;
    /* Space between icon and text */
    vertical-align: middle;
    /* Align icon vertically */
    color: #fff;
    /* White icon to match text */
}


/* 4. Styling for "Future Offering" (Adds Calendar Icon, keeps original text) */
.courseProfileSectionAvailability_future_offering {

    background-color: #971A2F;
    /* Standard green */
    color: #E9E5E5;
    /* White text for contrast */
    /* Custom Border Radius */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 4px;
}

/* 5. Add the Calendar Icon for "Future Offering" */
.courseProfileSectionAvailability_future_offering::before {
    /* Font Awesome Unicode for 'calendar-alt' */
    content: "\f073";

    /* Ensure it uses the Font Awesome font family */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

    /* Style the icon */
    font-size: 1.2em;
    /* Icon size relative to parent font-size */
    color: #E9E5E5;
    /* Neutral grey color for the icon */
    margin-right: 0.5em;
    /* Space between icon and text */
    vertical-align: middle;
}

/* =======================================================
 * COMPONENT: SEATS & AVAILABILITY (FINAL VERSION - ADJUSTED)
 * Includes: Styling, Animation, Reordering & Positioning
 * Scoped to: Course Section Header (.sectionHeader)
 * =======================================================*/

/* --- PART 1: REORDERING LOGIC (Flexbox) --- */
/* Target the specific column that holds both badges inside the section header */
.sectionHeader .row>div[class*="col-"]:has(.courseProfileSectionSeatsLeft) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Force Availability Badge to Top */
.courseProfileSectionAvailability {
    order: 1 !important;
    /* We keep a small bottom margin so they don't overlap too much */
    margin-bottom: 5px !important;
    margin-top: 0 !important;
}

/* Force Seats Left to Bottom & Raise it up */
.courseProfileSectionSeatsLeft {
    order: 2 !important;

    /* --- POSITIONING FIX (SUBIR 10PX) --- */
    margin-top: -8px !important;
    /* <--- AQUÍ ESTÁ EL CAMBIO */

    /* Layout Reset */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}


/* --- PART 2: YOUR EXISTING STYLING (Preserved Intact) --- */

/* 1b. Column Reset (Optional but recommended) */
.courseProfileSectionSeatsLeft>.col-lg-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. THE BADGE STYLING (The "Pill") */
.courseProfileSectionSeatsLeft .badge,
.courseProfileSectionSeatsLeft .badge-warning {
    /* --- Layout & Shape --- */
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 0.05rem !important;
    border: 1px dotted #3EC3A4 !important;
    /* Full Pill Shape */

    /* --- Colors (Urgency Theme - Amber/Gold) --- */
    background-color: #fff !important;
    color: #3EC3A4 !important;

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;

    /* Animation Trigger: Increased duration to 4s for a pause effect */
    animation: sce-badge-pulse 2s infinite ease-out;
}

/* 3. ICON INJECTION (Exclamation Circle) */
.courseProfileSectionSeatsLeft .badge::before {
    content: "\f501";
    /* fa-exclamation-circle / student */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

    margin-right: 6px !important;
    font-size: 0.9rem !important;
    color: #00A57F !important;
}

/* 4. ANIMATION: PULSE WITH DELAY (Heartbeat) */
@keyframes sce-badge-pulse {

    /* Phase 1: Start (Solid Green Shadow) */
    0% {
        box-shadow: 0 0 0 0 rgba(62, 195, 164, 0.7);
    }

    /* Phase 2: Expand & Fade Out (Action ends at 40% of the time) */
    40% {
        box-shadow: 0 0 0 10px rgba(62, 195, 164, 0);
        /* Corrected: Fades to Transparent Green */
    }

    /* Phase 3: The Pause (40% to 100% is silence) */
    100% {
        box-shadow: 0 0 0 0 rgba(62, 195, 164, 0);
    }
}

/* =======================================================
 * DYNAMIC DELIVERY ICONS
 * Requires the JS snippet to add .mode-online, etc.
 *========================================================*/

/* 1. Base Icon Style */
.courseSectionDelivery::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    font-size: 1rem;
    width: 20px;
    /* Fixed width for alignment */
    display: inline-block;
    text-align: center;
}

/* 2. Icon for ONLINE (Laptop) */
.courseSectionDelivery.mode-online::before {
    content: "\f109";
    /* fa-laptop */
    color: #171717;
}

/* 3. Icon for HYBRID (Exchange/Arrows) */
.courseSectionDelivery.mode-hybrid::before {
    content: "\f362";
    /* fa-exchange-alt */
    color: #171717;
}

/* 4. Icon for IN PERSON (Map Marker) */
.courseSectionDelivery.mode-inperson::before {
    content: "\f3c5";
    /* fa-map-marker-alt */
    color: #171717;
    /* Red */
}

/*******************************************************
 * ACCORDION ICON OVERRIDE (Plus to Chevron-Down)
 * Changes the default Bootstrap 'plus' icon to a 'chevron-down'
 * icon for expandable panel headers.
 *******************************************************/

/* 1. Target the icon when the panel is COLLAPSED (shows chevron-down) */
.panelHeaderIcon.glyphicon-plus::before {
    content: "\f078" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

}

/* 2. Target the icon when the panel is EXPANDED (shows chevron-up) */
.panelHeaderIcon.glyphicon-minus::before {
    content: "\f077" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

}

/* =======================================================
 * ACCORDION ICON HOVER (Tooltip and Background)
 * (FINAL VERSION with text size, no-wrap, and fade-in)
 *========================================================*/

/* 1. Style the hoverable link (the <a> tag) */
/* This defines the "hitbox" (hover area) */
.sectionHeaderChevronContainer a {
    /* Sizing and Shape: Make the hover area big */
    padding: 5px 10px;
    border-radius: 100px;

    /* Behavior */
    display: inline-block;
    /* Makes padding work */
    vertical-align: middle;
    text-decoration: none;

    /* Make the background transparent by default */
    background-color: transparent;

    /* Smooth transition for the background */
    transition: background-color 0.2s ease;
}

/* 2. Style the icon itself */
.sectionHeaderChevronContainer a .panelHeaderIcon {
    vertical-align: middle;
    margin-top: 4px;
}

/* 3. Create the hover text using ::after */
.sectionHeaderChevronContainer a::after {
    /* Use the site's main font, NOT Font Awesome */
    font-family: 'Montserrat', sans-serif;

    /* !! NEW: Smaller font size !! */
    font-size: 0.7rem;
    font-weight: 600;
    color: #58565A;
    /* Dark brown text */
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;

    /* !! NEW: Prevent text from wrapping !! */
    white-space: nowrap;

    /* !! NEW: Smooth fade-in effect !! */
    content: "";
    opacity: 0;
    transition: opacity 0.2s ease;
}


/* =======================================================
 * DESKTOP HEADER LAYOUT FIX
 * (Restores date layout AND fixes chevron jump/layering)
 *========================================================*/

@media (min-width: 992px) {

    /* --- 1. Repositioning the Date (Restored) --- */

    /* Make the card-title the anchor */
    .card-header .card-title {
        position: relative;
        width: 100%;
    }

    /* Stack items vertically (This was missing) */
    .card-header .form-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* --- 2. Fix Date Text Wrapping (Restored) --- */

    /* Force vertical items to take full width (This was missing) */
    .card-header .form-row>[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* --- 3. Stacking & Order --- */

    /* Force all re-ordered items into a stacking context */
    .sectionHeaderSemesterContainer,
    .sectionHeaderCourseCodeContainer,
    .sectionHeaderDeliveryContainer,
    .sectionHeaderChevronContainer {
        position: relative;
    }

    /* Use 'order' to change the visual sequence */
    .sectionHeaderSemesterContainer {
        order: 1;
        /* Date goes first */
    }

    .sectionHeaderCourseCodeContainer {
        order: 2;
        /* Title goes second */
    }

    .sectionHeaderDeliveryContainer {
        order: 3;
        /* Delivery method goes third */
    }

    .sectionHeaderChevronContainer {
        order: 4;
        /* Chevron goes last */

        /* Position the chevron without 'jumping' */
        position: absolute;
        top: 35px;
        right: 15px;

        /* Bring this container to the front layer */
        z-index: 10;
    }

    /* --- 4. Styling the Date Text --- */

    .courseSectionSemester {
        color: #171717 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-optical-sizing: auto !important;
        font-size: 1.2838rem !important;
        font-weight: 700 !important;
        line-height: 1.24 !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }

    /* --- 5. DESKTOP-ONLY HOVER EFFECTS --- */
    /* These rules are now INSIDE the media query */

    /* When the user hovers the ENTIRE header (on desktop)... */
    .card-header.panelHeadingToggle:hover .sectionHeaderChevronContainer a {
        /* ...apply the background frame to the <a> tag */
        background-color: #f0f0f0;
        text-decoration: none;
    }

    /* When the header is COLLAPSED and hovered (on desktop)... */
    .card-header.collapsed:hover .sectionHeaderChevronContainer a::after {
        /* ...show "Open" text */
        content: "Open";
        opacity: 1;
        /* Fade in */
    }

    /* When the header is EXPANDED and hovered (on desktop)... */
    .card-header:not(.collapsed):hover .sectionHeaderChevronContainer a::after {
        /* ...show "Close" text */
        content: "Close";
        opacity: 1;
        /* Fade in */
    }
}

/* =======================================================
 * MOBILE CHEVRON ALIGNMENT
 * Vertically centers the chevron icon on tablet and
 * mobile views where the header is taller.
 *========================================================*/

/*
 * Targets all screens *below* the 992px desktop breakpoint
 */
@media (max-width: 991.98px) {

    /*
 * 1. Tell the parent row to vertically center ALL its children
 * (the title block and the chevron block).
 * We add !important to ensure it wins.
 */
    .card-header .form-row {
        vertical-align: middle !important;
    }

    /*
 * 2. We MUST override the .float-right class,
 * as 'float' conflicts with 'align-items: center'.
 */
    .sectionHeaderChevronContainer {
        float: none !important;
    }
}

/************************************************************/
/* LANDING PAGE PROGRAMS - CARDS MAIN SECTION
(https://codepen.io/creativemanner/pen/NWrNWrd) */
/************************************************************/

/* --- Style Variables --- */
:root {
    --macewan-blue-dark: #34111A;
    /* Maroon used in your test */
    --macewan-accent-red: #D41F37;
    /* Accent red for the badge */
    --card-min-height: 450px;
    /* Cubic transitions for smooth movement */
    --fast-transition: 500ms cubic-bezier(0.19, 1, 0.22, 1);
    --slow-transition: 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- Base Card Styles (.sce-bg-card) --- */
.sce-bg-card {
    border: none;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    min-height: var(--card-min-height);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);

    /* Transition animation for the main card (zoom) */
    transition: var(--fast-transition);

    /* Background Image Styles */
    background-size: cover;
    background-repeat: no-repeat;
    /* Solution: Prioritize the top part of the image */
    background-position: center top;
}

/* Standard Media Queries (Mobile Adaptation) */
@media (max-width: 768px) {
    .sce-bg-card {
        min-height: 350px;
    }
}

@media (max-width: 420px) {
    .sce-bg-card {
        min-height: 300px;
    }
}

/* --- Image Layer (Grayscale and Initial Overlay) --- */
/* :before will handle the Grayscale and the initial dark overlay */
.sce-bg-card:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;

    /* Grayscale Effect */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: var(--slow-transition);
    /* Transition for Grayscale */

    /* Base Dark Overlay (Your initial dark gradient) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
    /* Full opacity for this overlay */
    z-index: 1;
    border-radius: 4px;
}

/* --- NEW LAYER: Color Overlay (for smooth transition) --- */
.sce-bg-card:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Desired Gradient Color (FINAL State) */
    background: linear-gradient(0deg, var(--macewan-blue-dark) 0%, rgba(84, 20, 29, 0.9) 70%, rgba(84, 20, 29, 0) 100%);

    /* KEY: Starts invisible, opacity transition is smooth */
    opacity: 0;
    transition: opacity var(--slow-transition);

    z-index: 1;
    border-radius: 4px;
}


/* --- Content Containers --- */
.sce-bg-card .card-img-overlay {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: var(--slow-transition);
    padding: 1rem;
    /* Padding is key here. */
}

/* Text Containers: Will animate on hover */
.sce-bg-card .card-body {
    margin-top: 0;
    transition: var(--slow-transition);
}

/* Footer: Doesn't need a transform, it will be pushed by the body's margin */
.sce-bg-card .card-footer {
    background: none;
    border-top: none;
    padding: 0;
    margin-bottom: 0;
    transition: var(--slow-transition);
}


/* --- Hover Effects --- */
.sce-bg-card:hover {
    /* 1. Card Zoom Out (5% smaller) */
    transform: scale(0.96);
    box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);

    /* 2. Background Image Zoom In (130%) */
    background-size: cover;
    /* Enlarged size */
    background-position: center top;
    transition: var(--fast-transition);
    cursor: pointer;
}

/* 3. Disable Grayscale and Change Overlay on Hover */
.sce-bg-card:hover:before {
    -webkit-filter: grayscale(0%);
    /* Full color image */
    filter: grayscale(0%);
    opacity: 1;

    /* Disable initial gradient so :after takes control */
    background: none;
}

/* 4. KEY: Make Color Overlay Visible on Hover (Smooth Transition) */
.sce-bg-card:hover:after {
    opacity: 1;
}

/* 5. KEY: "Downward" Content Movement Effect for Card Body */
.sce-bg-card:hover .card-body {
    /* Shifts the content downwards (or towards the center) */
    margin-top: 60px;
}

/* 6. The footer moves implicitly due to the body's margin-top */
/* No additional style needed here */


/* --- Typography and Final Details (Red Badge) --- */

.sce-bg-card .card-title {
    font-weight: 700;
}

.sce-bg-card .card-title a {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.sce-bg-card .card-meta {
    /* Red badge color */
    background-color: var(--macewan-accent-red);
    /* #D41F37 */
    color: white !important;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px !important;
    transition: background-color 0.3s ease;
}

.sce-bg-card:hover .card-meta {
    background-color: #D41F37;
    /* Slightly lighter red */
}


/* ==========================================================
 * ADVANCED COURSE SEARCH BUTTON - NUCLEAR SPECIFICITY
 * Selector score: 2-2-2 (nearly impossible to override)
 * Uses ID + parent class + element + classes + attribute
 ========================================================== */

/* Default state - MAXIMUM SPECIFICITY */
div.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[href*="publicCourseAdvancedSearch"],
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary {
    /* Colors */
    color: #ffffff !important;
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;

    /* Typography */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: 0.942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    /* Layout */
    padding: 1.25rem 1.9rem !important;
    border-radius: 0 !important;
    display: inline-block !important;

    /* Effects */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;

    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover state - MAXIMUM SPECIFICITY */
div.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[href*="publicCourseAdvancedSearch"]:hover,
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary:hover {
    color: #ffffff !important;
    background-color: #6d1d26 !important;
    border-color: #6d1d26 !important;
    text-decoration: none !important;
}

/* Focus state - MAXIMUM SPECIFICITY + Accessibility */
div.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[href*="publicCourseAdvancedSearch"]:focus,
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary:focus {
    color: #ffffff !important;
    background-color: #6d1d26 !important;
    /*border-color: #6d1d26 !important;
    outline: 2px solid #d51f37 !important;
    outline-offset: 2px !important;*/
    box-shadow: 0 0 0 0.2rem rgba(139, 35, 49, 0.5) !important;
}

/* Active state - MAXIMUM SPECIFICITY */
div.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[href*="publicCourseAdvancedSearch"]:active,
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary:active {
    color: #ffffff !important;
    background-color: #4a1319 !important;
    border-color: #4a1319 !important;
}

/* Visited state */
div.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[href*="publicCourseAdvancedSearch"]:visited,
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary:visited {
    color: #ffffff !important;
}

/* Disabled state (if ever needed) */
div.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[href*="publicCourseAdvancedSearch"][disabled],
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary[disabled],
.buttons>a#buttonAdvancedCourseSearch.btn.btn-secondary.disabled {
    color: #ffffff !important;
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}



/* ====================================
   ADVANCED COURSE SEARCH - CUSTOM BLOCK
   Final Production Version
   ==================================== */

/* SVG Icon with white background */
.catalog.programs>.row:nth-child(2)::before {
    content: "" !important;
    position: absolute !important;
    top: -70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 6.5rem !important;
    height: 6.5rem !important;
    background: url('/images/cap-books-icon.svg') center/contain no-repeat #fff !important;
    padding: 10px !important;
    box-sizing: content-box !important;
    border: 8px solid #fff !important;
    z-index: 10 !important;
    display: block !important;
}

/* Main container */
#mainContent .catalog.programs>div.row:nth-child(2),
#mainContent .catalog.programs>.row:nth-child(2).row {
    background: #ffffff !important;

    /* Forzamos el marco con el ID como respaldo */
    border: 8px solid #e2e2e2 !important;

    padding: 70px 24px 32px !important;
    margin: 60px 0 60px !important;
    position: relative !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;

    /* Aseguramos que el borde sea visible y no se colapse */
    box-sizing: border-box !important;
}

/* Title "EXPLORE" */
.catalog.programs>.row:nth-child(2)>.col-12::before {
    content: "Find Your Course" !important;
    display: block !important;
    width: 100% !important;
    font: 700 32px/1 'Montserrat', sans-serif !important;
    color: #171717 !important;
    letter-spacing: 1px !important;
    margin: 20px 0 16px !important;
    order: -2 !important;
}

/* Description */
.catalog.programs>.row:nth-child(2)>.col-12::after {
    content: "Search our courses by topic, format, schedule or instructor to start your professional development journey." !important;
    display: block !important;
    max-width: 55% !important;
    width: auto !important;
    /* Propiedades individuales - NO sobrescribe font-family */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #171717 !important;
    padding: 0 10px !important;
    margin: 0 0 24px !important;
    order: -1 !important;
}

/* Center column */
.catalog.programs>.row:nth-child(2)>.col-12 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
}

/* Button wrapper - positioned below border */
.catalog.programs>.row:nth-child(2) .buttons {
    position: absolute !important;
    bottom: -60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    background: #fff !important;
    z-index: 20 !important;
}

/* Button styling */
.catalog.programs>.row:nth-child(2) .buttons>#buttonAdvancedCourseSearch.btn.btn-secondary {
    background: #8B2331 !important;
    color: #FFF !important;
    font: 700 15.07px/1 'Montserrat', sans-serif !important;
    letter-spacing: 0.75px !important;
    text-transform: uppercase !important;
    padding: 20px 30px !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: 400px !important;
    margin: 0 !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

.catalog.programs>.row:nth-child(2) .buttons>#buttonAdvancedCourseSearch.btn.btn-secondary:hover {
    background: #6D1B26 !important;
}

.catalog.programs>.row:nth-child(2) .buttons>#buttonAdvancedCourseSearch.btn.btn-secondary:active {
    background: #4A1319 !important;
}

.catalog.programs>.row:nth-child(2) .buttons>#buttonAdvancedCourseSearch.btn.btn-secondary:focus {
    background: #6D1B26 !important;
    outline: none !important;
}

/* Tablet */
@media (max-width: 768px) {
    .catalog.programs>.row:nth-child(2) {
        padding: 60px 20px 28px !important;
        border-width: 6px !important;
        margin: 72px 0 120px !important;
    }

    .catalog.programs>.row:nth-child(2)::before {
        width: 80px !important;
        height: 80px !important;
        top: -40px !important;
        border-width: 6px !important;
    }

    .catalog.programs>.row:nth-child(2)>.col-12::before {
        font-size: 24px !important;
        margin: 15px 0 12px !important;
    }

    .catalog.programs>.row:nth-child(2)>.col-12::after {
        font-size: 14px !important;
        max-width: 500px !important;
        margin: 0 0 20px !important;
    }

    .catalog.programs>.row:nth-child(2) .buttons {
        bottom: -70px !important;
    }

    .catalog.programs>.row:nth-child(2) .buttons>#buttonAdvancedCourseSearch.btn.btn-secondary {
        font-size: 14px !important;
        padding: 18px 25px !important;
        min-width: 260px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .catalog.programs>.row:nth-child(2) {
        padding: 50px 16px 24px !important;
        border-width: 4px !important;
        margin: 62px 0 100px !important;
    }

    .catalog.programs>.row:nth-child(2)::before {
        width: 60px !important;
        height: 60px !important;
        top: -30px !important;
        border-width: 4px !important;
        padding: 8px !important;
    }

    .catalog.programs>.row:nth-child(2)>.col-12::before {
        font-size: 20px !important;
        margin: 12px 0 10px !important;
    }

    .catalog.programs>.row:nth-child(2)>.col-12::after {
        font-size: 13px !important;
        padding: 0 5px !important;
        margin: 0 0 18px !important;
    }

    .catalog.programs>.row:nth-child(2) .buttons {
        bottom: -60px !important;
        padding: 0 8px !important;
    }

    .catalog.programs>.row:nth-child(2) .buttons>#buttonAdvancedCourseSearch.btn.btn-secondary {
        font-size: 13px !important;
        padding: 16px 20px !important;
        min-width: 240px !important;
    }
}




/**
 * ================================================
 * COURSERA-STYLE CARDS - COMPLETE CSS SOLUTION
 * ================================================
 * 
 * SCOPE: #programAreasAccordion ONLY
 * FEATURES: 
 * - Hero cards with background images (Business & Operations)
 * - Circular icon badges with glassmorphism
 * - Descriptive subtitles
 * - Thumbnail icons for other streams
 * - Full responsive design
 * 
 * MacEwan University School of Continuing Education
 * UX Lead: Ricardo Alfonso Sanchez
 * Version: 2.0 - Complete Implementation
 * Date: January 21, 2026
 */

/* ================================================
   PHASE 1: RESET ACCORDION BEHAVIOR
   ================================================ */

/* 1.1 Force all panels visible (disable collapse) */
#programAreasAccordion .panel-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* 1.2 Hide toggle icons/controls */
#programAreasAccordion .glyphicon,
#programAreasAccordion [data-toggle="collapse"],
#programAreasAccordion .col-2,
#programAreasAccordion .col-sm-2 {
    display: none !important;
}

/* 1.3 Remove pointer cursor from headers */
#programAreasAccordion .card-header {
    cursor: default !important;
}

/* ================================================
   PHASE 2: GRID LAYOUT (Coursera Style)
   ================================================ */

/* 2.1 Main container grid */
#programAreasAccordion {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
}

/* 2.2 Desktop: Force 3 columns */
@media (min-width: 992px) {
    #programAreasAccordion {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 2.3 Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    #programAreasAccordion {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 2.4 Mobile: 1 column */
@media (max-width: 767px) {
    #programAreasAccordion {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 20px 16px !important;
    }
}

/* ================================================
   PHASE 3: CARD CONTAINERS
   ================================================ */

/* 3.1 Base card styling */
#programAreasAccordion .card.panel-default {
    background: rgba(233, 229, 229, 0.35) !important;
    /* #E9E5E5 at 35% opacity */
    border: none !important;
    border-radius: 3px !important;
    padding: 24px !important;
    animation: none !important;
    background-image: none !important;
    transition: all 0.3s ease !important;
    /* Smooth transition */
}

/* 3.1.1 Remove wrapper styles from Business & Operations (Hero Cards) */
#programAreasAccordion .card.panel-default:nth-child(1) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 3.2 Card hover effect (skip Business & Operations) */
#programAreasAccordion .card.panel-default:hover {
    background: rgba(233, 229, 229, 1) !important;
    /* #E9E5E5 at 100% opacity */
}

/* 3.2.1 Disable hover for Business & Operations wrapper */
#programAreasAccordion .card.panel-default:nth-child(1):hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ================================================
   PHASE 4: CARD HEADERS (Category Titles)
   ================================================ */

/* 4.1 Header container */
#programAreasAccordion .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid rgba(139, 35, 49, 0.2) !important;
}

/* 4.2 Category title link */
#programAreasAccordion .card-header .programArea a {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* 4.3 Category title hover */
#programAreasAccordion .card-header .programArea a:hover {
    color: #8b2331 !important;
}

/* 4.4 Remove arrow icon from category title */
#programAreasAccordion .card-header .programArea a::after {
    display: none !important;
}

/* 4.5 Simplify header row layout */
#programAreasAccordion .card-header .row {
    display: block !important;
}

#programAreasAccordion .card-header .col-10,
#programAreasAccordion .card-header .col-sm-10 {
    width: 100% !important;
    flex: none !important;
    max-width: none !important;
}

/* ================================================
   PHASE 5: STREAM CARDS (Content)
   ================================================ */

/* 5.1 Reset table to flex container */
#programAreasAccordion .panel-collapse table {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 5.2 Reset tbody */
#programAreasAccordion .panel-collapse table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* 5.3 Row as card */
#programAreasAccordion .panel-collapse table tr {
    display: block !important;
    background: white !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    transform: none !important;
}

/* 5.4 Row hover effect */
#programAreasAccordion .panel-collapse table tr:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 5.5 Cell styling */
#programAreasAccordion .panel-collapse table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ================================================
   PHASE 6: STREAM LINKS (Standard cards)
   ================================================ */

/* 6.1 Base link style - MODIFIED FOR THUMBNAILS */
#programAreasAccordion .panel-collapse table .programStream a {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    position: relative !important;
}

/* 6.2 Link hover */
#programAreasAccordion .panel-collapse table .programStream a:hover {
    color: #6b1a26 !important;
}

/* 6.3 Base thumbnail style for ALL streams */
#programAreasAccordion .panel-collapse table .programStream a::before {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

/* 6.3.1 Thumbnail hover effect */
#programAreasAccordion .panel-collapse table tr:hover .programStream a::before {
    transform: scale(1.05) !important;
}

/* 6.4 Reset indent classes */
#programAreasAccordion .panel-collapse table .programStream a.indent,
#programAreasAccordion .panel-collapse table .programStream a.indent0 {
    padding-left: 16px !important;
    margin-left: 0 !important;
}

/* ================================================
   PHASE 7: CATEGORY COLOR ACCENTS + ARROW LINKS
   Production Version - All Fixes Applied
   Total Lines: 254 (Arrows section only)
   Fixes Applied:
   - Display block override for global display:none
   - Optimized padding-right (0.5rem for Cards 1-3)
   - Multiline text fix for Card 4 (nowrap)
   ================================================ */

/* ═══════════════════════════════════════════════
   7.0 GLOBAL ARROW STYLES (All Program Areas)
   PRODUCTION VERSION - Nuclear Isolation Method
   Audit Status: ✅ All fixes applied
   ═══════════════════════════════════════════════ */

/* Remove border from ALL category headers */
#programAreasAccordion .card-header {
    border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD 1: Business & Operations
   Features:
   - Arrow positioned immediately after text (calculated: 196px)
   - Subtitle with CTA
   - Arrow does NOT get underlined on hover
   ═══════════════════════════════════════════════════════════════ */

/* Link base - NO underline */
#programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea a {
    display: inline !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    padding-right: 0 !important;
    order: 1 !important;
}

/* Hover: Text gets underline */
#programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea a:hover {
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    text-underline-offset: 3px !important;
}

/* Arrow - positioned immediately after text */
#programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea a::after {
    content: ' →' !important;
    display: inline-block !important;
    position: absolute !important;
    top: 0 !important;
    left: 196px !important;
    /* Calculated from text width */
    font-size: 1rem !important;
    color: #8b2331 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: left 0.2s ease !important;
    /* Nuclear underline prevention */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    -webkit-text-decoration-line: none !important;
    -webkit-text-decoration-style: none !important;
}

/* Hover: Arrow moves right slightly (NO underline) */
#programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea a:hover::after {
    left: 201px !important;
    /* 5px movement */
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Subtitle container */
#programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea {
    display: flex !important;
    flex-direction: column !important;
}

/* Subtitle text */
#programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea::before {
    content: "Take the next step in your professional journey and gain expert-led skills through industry-aligned programs." !important;
    display: block !important;
    font-size: 0.9rem !important;
    color: #171717 !important;
    line-height: 1.3 !important;
    margin-top: 0.25rem !important;
    order: 2 !important;
}

/* Responsive: Shorten subtitle on mobile */
@media (max-width: 767px) {
    #programAreasAccordion .card.panel-default:nth-child(1) .card-header .card-title .row .col-10 .programArea::before {
        content: "Explore 15+ certificates" !important;
        font-size: 0.75rem !important;
    }
}

/* ───────────────────────────────────────────────
   DIGITAL ARTS & DESIGN (Card 2)
   ─────────────────────────────────────────────── */

/* Base link styling */
#programAreasAccordion .card.panel-default:nth-child(2) .card-header .card-title .row .col-10 .programArea a {
    display: inline !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    padding-right: 0.5rem !important;
}

/* Arrow - ABSOLUTE positioning */
#programAreasAccordion .card.panel-default:nth-child(2) .card-header .card-title .row .col-10 .programArea a::after {
    content: '→' !important;
    display: block !important;
    /* 🔥 CRITICAL FIX: Override global display: none */
    position: absolute !important;
    top: 0 !important;
    right: -1.2rem !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.2s ease, right 0.2s ease !important;
    /* ─── NUCLEAR UNDERLINE ISOLATION ─── */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    /* ─── RESET ALL INHERITED PROPERTIES ─── */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Hover state */
#programAreasAccordion .card.panel-default:nth-child(2) .card-header .card-title .row .col-10 .programArea a:hover {
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    text-underline-offset: 3px !important;
}

/* Arrow animation on hover */
#programAreasAccordion .card.panel-default:nth-child(2) .card-header .card-title .row .col-10 .programArea a:hover::after {
    right: -1.5rem !important;
    transform: translateZ(0) translateX(0) !important;
    /* ─── REINFORCE: No underline inheritance ─── */
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* ───────────────────────────────────────────────
   HEALTH & COMMUNITY (Card 3)
   ─────────────────────────────────────────────── */

/* Base link styling */
#programAreasAccordion .card.panel-default:nth-child(3) .card-header .card-title .row .col-10 .programArea a {
    display: inline !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    padding-right: 0.5rem !important;
}

/* Arrow - ABSOLUTE positioning */
#programAreasAccordion .card.panel-default:nth-child(3) .card-header .card-title .row .col-10 .programArea a::after {
    content: '→' !important;
    display: block !important;
    /* 🔥 CRITICAL FIX: Override global display: none */
    position: absolute !important;
    top: 0 !important;
    right: -1.2rem !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.2s ease, right 0.2s ease !important;
    /* ─── NUCLEAR UNDERLINE ISOLATION ─── */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    /* ─── RESET ALL INHERITED PROPERTIES ─── */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Hover state */
#programAreasAccordion .card.panel-default:nth-child(3) .card-header .card-title .row .col-10 .programArea a:hover {
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    text-underline-offset: 3px !important;
}

/* Arrow animation on hover */
#programAreasAccordion .card.panel-default:nth-child(3) .card-header .card-title .row .col-10 .programArea a:hover::after {
    right: -1.5rem !important;
    transform: translateZ(0) translateX(0) !important;
    /* ─── REINFORCE: No underline inheritance ─── */
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* ───────────────────────────────────────────────
   PERSONAL GROWTH & FUTURE SKILLS (Card 4)
   🔥 FIX: Prevent text wrapping to keep arrow aligned
   ─────────────────────────────────────────────── */

/* Base link styling + NOWRAP FIX */
#programAreasAccordion .card.panel-default:nth-child(4) .card-header .card-title .row .col-10 .programArea a {
    display: inline !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    padding-right: 0.5rem !important;
    /* 🔥 MULTILINE FIX */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Arrow - ABSOLUTE positioning */
#programAreasAccordion .card.panel-default:nth-child(4) .card-header .card-title .row .col-10 .programArea a::after {
    content: '→' !important;
    display: block !important;
    /* 🔥 CRITICAL FIX: Override global display: none */
    position: absolute !important;
    top: 0 !important;
    right: -1.2rem !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.2s ease, right 0.2s ease !important;
    /* ─── NUCLEAR UNDERLINE ISOLATION ─── */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    /* ─── RESET ALL INHERITED PROPERTIES ─── */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Hover state */
#programAreasAccordion .card.panel-default:nth-child(4) .card-header .card-title .row .col-10 .programArea a:hover {
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    text-underline-offset: 3px !important;
}

/* Arrow animation on hover */
#programAreasAccordion .card.panel-default:nth-child(4) .card-header .card-title .row .col-10 .programArea a:hover::after {
    right: -1.5rem !important;
    transform: translateZ(0) translateX(0) !important;
    /* ─── REINFORCE: No underline inheritance ─── */
    text-decoration: none !important;
    text-decoration-line: none !important;
}


/* ═══════════════════════════════════════════════
   7.1 BUSINESS & OPERATIONS - sce-bg-card STYLE
   100% match to reference example
   No gray wrapper - transparent background
   ═══════════════════════════════════════════════ */

/* CSS Variables for sce-bg-card */
:root {
    --macewan-blue-dark: #34111A;
    --macewan-accent-red: #D41F37;
    --card-min-height: 450px;
    --fast-transition: 500ms cubic-bezier(0.19, 1, 0.22, 1);
    --slow-transition: 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* Full width container (no wrapper styles applied) */
#programAreasAccordion .card.panel-default:nth-child(1) {
    grid-column: 1 / -1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Disable hover for Business & Operations wrapper */
#programAreasAccordion .card.panel-default:nth-child(1):hover {
    box-shadow: none !important;
    transform: none !important;
}

/* Grid layout for hero cards */
#programAreasAccordion .card.panel-default:nth-child(1) .panel-collapse table tbody {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* ───────────────────────────────────────────────
   BASE CARD STYLE (TR as .sce-bg-card)
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 4px !important;
    min-height: var(--card-min-height) !important;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    transition: var(--fast-transition) !important;
}

/* ───────────────────────────────────────────────
   ::BEFORE - Grayscale Layer + Initial Dark Overlay
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: inherit !important;
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
    opacity: 1 !important;
    z-index: 1 !important;
    border-radius: 4px !important;
    transition: var(--slow-transition) !important;
}

/* ───────────────────────────────────────────────
   ::AFTER - Color Overlay (Maroon Gradient)
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: linear-gradient(0deg, var(--macewan-blue-dark) 0%, rgba(52, 17, 26, 0.9) 70%, rgba(52, 17, 26, 0) 100%) !important;
    opacity: 0 !important;
    transition: opacity var(--slow-transition) !important;
    z-index: 1 !important;
    border-radius: 4px !important;
}

/* ───────────────────────────────────────────────
   TD - Content Overlay Container
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr td {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 1.5rem !important;
    min-height: var(--card-min-height) !important;
    background: transparent !important;
    border: none !important;
    pointer-events: none !important;
}

/* Re-enable pointer events on content elements */
#programAreasAccordion .card:nth-child(1) tbody tr td::before,
#programAreasAccordion .card:nth-child(1) tbody tr td::after,
#programAreasAccordion .card:nth-child(1) tbody tr .programStream a {
    pointer-events: auto !important;
}

/* Flatten programStream wrapper */
#programAreasAccordion .card:nth-child(1) tbody tr td .programStream {
    display: contents !important;
}

/* ───────────────────────────────────────────────
   TD::BEFORE - Badge Meta (Red Badge)
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr td::before {
    content: "Certification" !important;
    background-color: var(--macewan-accent-red) !important;
    color: white !important;
    display: inline-block !important;
    align-self: flex-start !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 4px !important;
    transition: background-color 0.3s ease, transform 800ms cubic-bezier(0.19, 1, 0.22, 1) !important;
    order: -2 !important;
}

/* Individual badge text per card */
#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(1) td::before {
    content: "Future-Ready Skills" !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(2) td::before {
    content: "Industry Accredited" !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(3) td::before {
    content: "Strategic Delivery" !important;
}

/* ───────────────────────────────────────────────
   A - Title Link
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr .programStream a {
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) !important;
    order: -1 !important;
}

/* Remove previous icon and subtitle implementations */
#programAreasAccordion .card:nth-child(1) tbody tr .programStream a::before,
#programAreasAccordion .card:nth-child(1) tbody tr .programStream a::after {
    display: none !important;
    content: none !important;
}

/* ───────────────────────────────────────────────
   STRETCHED LINK - Make Entire Card Clickable
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr .programStream a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

/* Ensure badge and footer are above stretched link overlay */
#programAreasAccordion .card:nth-child(1) tbody tr td::before,
#programAreasAccordion .card:nth-child(1) tbody tr td::after {
    position: relative !important;
    z-index: 2 !important;
}

/* ───────────────────────────────────────────────
   TD::AFTER - Footer Text
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr td::after {
    content: "Explore Programs →" !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    margin-top: auto !important;
    padding-top: 0.5rem !important;
    transition: none !important;
    order: 999 !important;
    align-self: stretch !important;
}

/* Individual footer text per card */
#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(1) td::after {
    content: "7+ Digital Transformation Certificates" !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(2) td::after {
    content: "Professional Accounting & Analysis Credentials" !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(3) td::after {
    content: "Strategic Project Delivery & Execution" !important;
}

/* ───────────────────────────────────────────────
   HOVER EFFECTS (sce-bg-card Style)
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr:hover {
    transform: scale(0.96) !important;
    box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3) !important;
    background-size: cover !important;
    background-position: center top !important;
    cursor: pointer !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:hover::before {
    -webkit-filter: grayscale(0%) !important;
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    background: none !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:hover::after {
    opacity: 1 !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:hover td::before,
#programAreasAccordion .card:nth-child(1) tbody tr:hover .programStream a {
    transform: translateY(60px) !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:hover td::after {
    transform: none !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:hover td::before {
    background-color: #ff2a47 !important;
}

/* ───────────────────────────────────────────────
   BACKGROUND IMAGES
   ─────────────────────────────────────────────── */

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(1) {
    background-image: url('/srs/upload/ai-innovation.jpg') !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(2) {
    background-image: url('/srs/upload/business-financial.jpg') !important;
}

#programAreasAccordion .card:nth-child(1) tbody tr:nth-child(3) {
    background-image: url('/srs/upload/management-strategy.jpg') !important;
}

/* ───────────────────────────────────────────────
   RESPONSIVE: TABLET
   ─────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 991px) {
    #programAreasAccordion .card.panel-default:nth-child(1) .panel-collapse table tbody {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr {
        min-height: 350px !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr td {
        min-height: 350px !important;
        padding: 1.25rem !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr .programStream a {
        font-size: 1.35rem !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr td::before {
        font-size: 0.7rem !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr td::after {
        font-size: 0.8rem !important;
    }
}

/* ───────────────────────────────────────────────
   RESPONSIVE: MOBILE
   ─────────────────────────────────────────────── */

@media (max-width: 767px) {
    #programAreasAccordion .card.panel-default:nth-child(1) .panel-collapse table tbody {
        grid-template-columns: 1fr !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr {
        min-height: 300px !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr td {
        min-height: 300px !important;
        padding: 1rem !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr .programStream a {
        font-size: 1.25rem !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr td::before {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr td::after {
        font-size: 0.75rem !important;
    }

    #programAreasAccordion .card:nth-child(1) tbody tr:hover td::before,
    #programAreasAccordion .card:nth-child(1) tbody tr:hover .programStream a {
        transform: translateY(40px) !important;
    }
}

/* ═══════════════════════════════════════════════
   7.2 DIGITAL ARTS & DESIGN
   ═══════════════════════════════════════════════ */

#programAreasAccordion .card:nth-child(2) tbody tr:nth-child(1) .programStream a::before {
    background-image: url('/srs/upload/technology.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

#programAreasAccordion .card:nth-child(2) tbody tr:nth-child(2) .programStream a::before {
    background-image: url('/srs/upload/visual-arts.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ═══════════════════════════════════════════════
   7.3 HEALTH & COMMUNITY
   ═══════════════════════════════════════════════ */

#programAreasAccordion .card:nth-child(3) tbody tr:nth-child(1) .programStream a::before {
    background-image: url('/srs/upload/nursing-acute-care.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ═══════════════════════════════════════════════
   7.4 PERSONAL GROWTH & FUTURE SKILLS
   ═══════════════════════════════════════════════ */

#programAreasAccordion .card:nth-child(4) tbody tr:nth-child(1) .programStream a::before {
    background-image: url('/srs/upload/career-essentials.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

#programAreasAccordion .card:nth-child(4) tbody tr:nth-child(2) .programStream a::before {
    background-image: url('/srs/upload/leadership.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}



/* ================================================
   PHASE 8: STREAM THUMBNAILS (Individual)
   ================================================
   
   All thumbnails now use REAL IMAGES (Unsplash mockups)
   
   TO REPLACE WITH YOUR OWN IMAGES:
   1. Upload images to Modern Campus (/images/ folder)
   2. Replace Unsplash URLs with your image paths
   3. Recommended size: 400x400px minimum
   4. Format: WebP or JPG optimized
   
   CURRENT IMAGES (Mockups):
   
   DIGITAL ARTS & DESIGN:
   - Technology: https://images.unsplash.com/photo-1498050108023-c5249f4df085
   - Visual Arts: https://images.unsplash.com/photo-1513542789411-b6a5d4f31634
   
   HEALTH & COMMUNITY:
   - Nursing: https://images.unsplash.com/photo-1576091160399-112ba8d25d1d
   
   PERSONAL GROWTH:
   - Career Essentials: https://images.unsplash.com/photo-1454165804606-c3d57bc86b40
   - Leadership: https://images.unsplash.com/photo-1552664730-d307ca884978
   
   REPLACEMENT EXAMPLE:
   background-image: url('/images/your-custom-image.jpg') !important;
   
   ================================================ */

/* ================================================
   PROGRAM STREAM SUBTITLES + STAR RATINGS
   Injected via JavaScript (Script 15)
   ================================================ */

/* Thumbnail cards layout (cards 2, 3, 4 only) */
#programAreasAccordion .card:nth-child(n+2) .programStream {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    background: white !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#programAreasAccordion .card:nth-child(n+2) .programStream:hover {
    border-color: #8b2331 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Link as horizontal flex (image + title) */
#programAreasAccordion .card:nth-child(n+2) .programStream a {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 15px !important;
    color: #8b2331 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

/* Thumbnail image (::before) */
#programAreasAccordion .card:nth-child(n+2) .programStream a::before {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* Subtitle (injected by JS) */
.stream-subtitle {
    color: #666666 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin-left: 95px !important;
}

/* Star rating container (injected by JS) */
.stream-rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 95px !important;
}

/* Stars (yellow) */
.stream-stars {
    color: #fbbf24 !important;
    font-size: 0.875rem !important;
    letter-spacing: 2px !important;
}

/* Rating score (gray) */
.stream-score {
    font-weight: 600 !important;
    color: #666666 !important;
    font-size: 0.875rem !important;
}

/* ================================================
   PHASE 9: ACCESSIBILITY ENHANCEMENTS
   ================================================ */

/* 9.1 Focus states for keyboard navigation */
#programAreasAccordion a:focus {
    outline: 0px solid #3EC3A4 !important;
    outline-offset: 0px !important;
}

/* 9.2 Screen reader only content */
#programAreasAccordion .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ================================================
   PHASE 10: MOBILE REFINEMENTS
   ================================================ */

@media (max-width: 767px) {
    #programAreasAccordion .card.panel-default {
        padding: 20px !important;
    }

    #programAreasAccordion .card-header .programArea a {
        font-size: 1.25rem !important;
    }

    #programAreasAccordion .panel-collapse table .programStream a {
        font-size: 0.95rem !important;
        padding: 12px !important;
    }
}

/* ================================================
   PHASE 11: REDUCED MOTION SUPPORT
   ================================================ */

@media (prefers-reduced-motion: reduce) {

    #programAreasAccordion *,
    #programAreasAccordion *::before,
    #programAreasAccordion *::after {
        animation: none !important;
        transition: none !important;
    }

    #programAreasAccordion .card.panel-default:hover,
    #programAreasAccordion .panel-collapse table tr:hover {
        transform: none !important;
    }
}

/* ================================================
   PHASE 12: PRINT STYLES
   ================================================ */

@media print {
    #programAreasAccordion {
        display: block !important;
    }

    #programAreasAccordion .card.panel-default {
        page-break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ================================================
   ICON & SUBTITLE CUSTOMIZATION GUIDE
   ================================================
   
   CIRCULAR ICON BADGES:
   Each hero card displays a circular icon badge using Font Awesome.
   
   AVAILABLE FONT AWESOME ICONS:
   - \f135 : fa-rocket (AI, Innovation, Tech)
   - \f201 : fa-chart-line (Business, Analytics)
   - \f439 : fa-chess (Strategy, Management)
   - \f0eb : fa-lightbulb (Innovation, Ideas)
   - \f5dc : fa-brain (AI, Learning)
   - \f0b1 : fa-briefcase (Business, Professional)
   - \f155 : fa-dollar-sign (Finance, Money)
   - \f0c0 : fa-users (Management, Team)
   - \f5fc : fa-laptop-code (Tech, Development)
   - \f080 : fa-chart-bar (Analytics, Data)
   
   TO CHANGE ICONS:
   Find the stream's ::before rule and update the content:
   
   #programAreasAccordion .card:nth-child(1) tbody tr:nth-child(1) .programStream a::before {
       content: "\f135" !important; 
   }
   
   SUBTITLE TEXT:
   Each card has a descriptive subtitle below the title.
   
   GUIDELINES:
   - Keep under 50 characters for best readability
   - Use action-oriented language
   - Focus on benefits/outcomes
   
   TO CHANGE SUBTITLES:
   Find the stream's ::after rule and update the content:
   
   #programAreasAccordion .card:nth-child(1) tbody tr:nth-child(1) .programStream a::after {
       content: "Your custom subtitle here" !important;
   }
   
   EMOJI FALLBACK (Alternative):
   If Font Awesome is unavailable, use emoji Unicode:
   
   content: "🚀" !important;
   font-family: system-ui !important;
   
   ================================================ */

/* ================================================
   HERO IMAGES REQUIREMENTS & GUIDELINES
   ================================================
   
   BUSINESS & OPERATIONS HERO CARDS:
   Three large background images are needed for the hero cards.
   
   IMAGE SPECIFICATIONS:
   - Dimensions: 1200x800px minimum (landscape orientation)
   - Aspect Ratio: 3:2 (landscape)
   - Format: WebP (primary) + JPG (fallback)
   - File Size: < 150KB per image (after optimization)
   - Quality: 80% compression recommended
   - Color: High contrast recommended (text overlay is white)
   
   SUGGESTED SUBJECTS:
   1. AI & Innovation:
      - Neural networks, AI technology, futuristic tech
      - Example: Circuit boards, AI visualization, robotics
      
   2. Business & Financial:
      - Finance, analytics, business meetings
      - Example: Charts, calculator, professional workspace
      
   3. Management & Strategy:
      - Leadership, team collaboration, planning
      - Example: Team meeting, strategy session, whiteboard
   
   COMPOSITION TIPS:
   - Avoid busy/cluttered images (text needs to be readable)
   - Dark or medium-toned images work best (white text overlay)
   - Leave negative space in bottom-left for text
   - Test with grayscale filter (images will appear desaturated)
   
   FILE STRUCTURE:
   /images/hero/
   ├── ai-innovation.webp (1200x800px, <150KB)
   ├── ai-innovation.jpg (fallback)
   ├── business-financial.webp
   ├── business-financial.jpg
   ├── management-strategy.webp
   └── management-strategy.jpg
   
   REPLACING PLACEHOLDER IMAGES:
   Find these lines in the CSS:
   
   background-image: url('https://images.unsplash.com/...')
   
   Replace with:
   
   background-image: url('/images/hero/ai-innovation.webp')
   
   Or with fallback:
   
   background-image: 
       url('/images/hero/ai-innovation.webp'),
       url('/images/hero/ai-innovation.jpg')
   
   ================================================ */

/* ================================================
   BUSINESS & OPERATIONS - sce-bg-card IMPLEMENTATION
   ================================================
   
   DESIGN SYSTEM: 100% Match to sce-bg-card Reference
   
   KEY FEATURES:
   1. Red badge meta (TD::before) - "AI & Innovation", etc.
   2. Footer text (TD::after) - "15+ AI Certifications Available"
   3. Grayscale to color on hover
   4. Dual-layer overlay system (dark + maroon)
   5. Badge + Title shift down on hover (60px)
   6. Card zoom out effect (scale 0.96)
   7. Footer stays anchored at bottom with border
   
   STRUCTURE MAPPING:
   - TR = .sce-bg-card container
   - TR::before = Grayscale layer + dark overlay
   - TR::after = Color overlay (maroon gradient)
   - TD = .card-img-overlay (flex container)
   - TD::before = Badge (order: -2, first)
   - A = Title link (order: -1, second)
   - TD::after = Footer (order: 999, last with margin-top: auto)
   
   CRITICAL LAYOUT FIX:
   - justify-content: flex-start (content starts at top)
   - Negative orders for badge (-2) and title (-1)
   - Footer order: 999 with margin-top: auto (pushes to bottom)
   - .programStream: display: contents (flattens wrapper)
   
   VERTICAL LAYOUT:
   ┌─────────────────────┐
   │ [Badge] order: -2   │ ← At top
   │ Title   order: -1   │ ← 4px below badge
   │                     │
   │ (flexible space)    │ ← flex-start allows this
   │                     │
   │ ─────────── border  │
   │ Footer  order: 999  │ ← margin-top: auto
   └─────────────────────┘
   
   REMOVED FEATURES (vs previous version):
   - ✗ Icon circles (glassmorphism)
   - ✗ Subtitle text below title
   - ✗ justify-content: space-between (caused centering)
   
   ADDED FEATURES:
   - ✓ Red badge meta labels
   - ✓ Footer text with border-top
   - ✓ Exact hover animation match
   - ✓ Dual-layer overlay system
   - ✓ Proper vertical alignment (flex-start)
   
   CUSTOMIZATION:
   - Badge text: Edit TD::before content per card
   - Footer text: Edit TD::after content per card
   - Badge color: --macewan-accent-red variable
   - Overlay color: --macewan-blue-dark variable
   
   JAVASCRIPT ENHANCEMENT:
   - Include business-operations-clickable-cards.js for full card clickability
   - Makes entire TR area clickable (not just link text)
   - Reduces friction and improves UX
   - Supports Ctrl+Click for new tab
   
   CSS-ONLY CLICKABLE CARD:
   - Uses "stretched link" technique via A::after pseudo-element
   - A::after creates invisible overlay (position: absolute, inset: 0)
   - Overlay has z-index: 1 (above background, below content)
   - Content (badge, title, footer) has z-index: 2 (visible)
   - TD has pointer-events: none (allows clicks to pass through)
   - Content elements have pointer-events: auto (re-enable interaction)
   - Result: 100% of card area is clickable without JavaScript
   
   POINTER-EVENTS STRATEGY:
   - TD: pointer-events: none (doesn't block clicks)
   - Badge (::before): pointer-events: auto (clickable)
   - Title (A): pointer-events: auto (clickable)
   - Footer (::after): pointer-events: auto (clickable)
   - A::after stretched overlay captures all clicks
   
   Z-INDEX LAYERS:
   - Layer 0: Background image
   - Layer 1: Stretched link overlay (A::after) - clickable
   - Layer 2: Content (badge, title, footer) - visible
   
   ================================================ */

/* ================================================
   IMPORTANT NOTES - BUSINESS & OPERATIONS DESIGN
   ================================================
   
   WRAPPER REMOVAL:
   Business & Operations card does NOT have the gray wrapper
   that other program areas have. This is intentional to allow
   the hero cards to display with full visual impact.
   
   Other program areas (Digital Arts, Health, Personal Growth)
   maintain the gray wrapper for consistency and hierarchy.
   
   STRUCTURE:
   - Business & Operations: Transparent wrapper → sce-bg-card hero cards
   - Other areas: Gray wrapper → Small thumbnail cards
   
   This creates visual hierarchy where Business & Operations
   (15 certificates) stands out as the primary offering.
   
   ================================================ */

/* ================================================
   END OF COURSERA-STYLE CARDS CSS
   ================================================ */

/* ================================================
   THUMBNAIL CARDS (Cards 2, 3, 4)
   JavaScript builds structure, CSS only styles
   Script 15 required for functionality
   ================================================ */

/* Hide original ::before images */
#programAreasAccordion .card:nth-child(n+2) .programStream a::before {
    display: none !important;
}

/* Remove TD borders and padding */
#programAreasAccordion .card:nth-child(n+2) .programStream {
    border: none !important;
    padding: 0 !important;
}

/* Remove link padding */
#programAreasAccordion .panel-collapse table .programStream a {
    padding: 0px !important;
}

/* Thumbnail card container (built by JS) */
.sce-thumbnail-card {
    display: flex !important;
    gap: 10px !important;
    padding: 8px !important;
    background: white !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.sce-thumbnail-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Image (left side) */
.sce-thumb-img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 4px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* Content column (right side) */
.sce-thumb-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

/* Title link */
.sce-thumb-title {
    color: #8b2331 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.sce-thumb-title:hover {
    text-decoration: underline !important;
}

/* Subtitle */
.sce-thumb-subtitle {
    color: #171717 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* Rating container */
.sce-thumb-rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Stars (yellow) */
.sce-thumb-stars {
    color: #D9D3C5 !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
}

/* Rating score (gray) */
.sce-thumb-score {
    color: #8E8F90 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}


/* ============================================
   CERTIFICATE SEARCH - OPTIMIZED VERSION
   Removed duplicates and conflicts
   ============================================ */

/* ============================================
   MAIN CONTAINER
   ============================================ */

#publicCertificateSearchForm {
    background: #f0f0f0 !important;
    border-radius: 4px !important;
    padding: 40px !important;
    max-width: 65% !important;
    margin: 10vh auto !important;
}

/* Tight spacing between elements */
form#publicCertificateSearchForm>.row,
form#publicCertificateSearchForm .row {
    margin-bottom: 6px !important;
}

form#publicCertificateSearchForm>.row:first-child {
    margin-bottom: 12px !important;
}

form#publicCertificateSearchForm>.row:last-child {
    margin-bottom: 0 !important;
    margin-top: 16px !important;
}

/* ============================================
   SEARCH INPUT - CLEAN VERSION
   Maximum specificity, no conflicts
   ============================================ */

#publicCertificateSearchForm #certificateSearchKeyword .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Normal state - icon on left, proper padding */
body:has(#advancedSearchControl) #publicCertificateSearchForm #keyword {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%238b2331" viewBox="0 0 16 16"%3e%3cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3e%3c/svg%3e') !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 18px 18px !important;
    padding-left: 42px !important;
    padding-right: 15px !important;
    height: 50px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #34111A !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Focus state - keep icon visible, proper padding */
body:has(#advancedSearchControl) #publicCertificateSearchForm #keyword:focus {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%238b2331" viewBox="0 0 16 16"%3e%3cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3e%3c/svg%3e') !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 18px 18px !important;
    padding-left: 42px !important;
    border-color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
    outline: none !important;
}

/* Backup selectors for extra safety */
#publicCertificateSearchForm #certificateSearchKeyword #keyword {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%238b2331" viewBox="0 0 16 16"%3e%3cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3e%3c/svg%3e') !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 18px 18px !important;
    padding-left: 42px !important;
    height: 50px !important;
    border-color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
    outline: none !important;
}

#publicCertificateSearchForm #certificateSearchKeyword #keyword:focus {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%238b2331" viewBox="0 0 16 16"%3e%3cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3e%3c/svg%3e') !important;
    padding-left: 42px !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 18px 18px !important;
    padding-right: 15px !important;
    height: 50px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #34111A !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   SEARCH INPUT PLACEHOLDER
   ============================================ */

/* Placeholder text styling */
#publicCertificateSearchForm #keyword::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
    font-style: italic !important;
    font-size: 0.95rem !important;
}

/* Fade out placeholder on focus */
#publicCertificateSearchForm #keyword:focus::placeholder {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* Browser-specific fallbacks */
#publicCertificateSearchForm #keyword::-webkit-input-placeholder {
    color: #999999 !important;
    font-style: italic !important;
    opacity: 1 !important;
}

#publicCertificateSearchForm #keyword::-moz-placeholder {
    color: #999999 !important;
    font-style: italic !important;
    opacity: 1 !important;
}

#publicCertificateSearchForm #keyword:-ms-input-placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

/* Override existing body:has() rule */
body:has(#advancedSearchControl) #publicCertificateSearchForm #keyword::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* ============================================
   ADVANCED SEARCH LINK
   ============================================ */

/* Card: transparent background */
form#publicCertificateSearchForm>.card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Alternative selector for safety */
form#publicCertificateSearchForm>div.card {
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Header positioning */
form#publicCertificateSearchForm #advancedSearchPanel.card-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: -35px 10px 0px 0px !important;
}

/* Button: MacEwan link style */
form#publicCertificateSearchForm #advancedSearchPanel .btn {
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color .3s !important;
}

/* Span: flex container aligned right */
form#publicCertificateSearchForm #advancedSearchPanel .btn>span {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

/* Hover state */
form#publicCertificateSearchForm #advancedSearchPanel .btn:hover,
form#publicCertificateSearchForm #advancedSearchPanel .btn:focus {
    color: #34111a !important;
    background: transparent !important;
}

/* ============================================
   FONT AWESOME ICON (after text)
   ============================================ */

/* Hide glyphicon ::before */
#publicCertificateSearchForm .searchCriteriaPanelIconContainer::before {
    content: none !important;
    display: none !important;
}

/* Remove float */
#publicCertificateSearchForm .searchCriteriaPanelIconContainer {
    float: none !important;
    display: inline-block !important;
}

/* Add Font Awesome icon with ::after */
#publicCertificateSearchForm .searchCriteriaPanelIconContainer::after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f1de" !important;
    /* fa-sliders-h */
    display: inline-block !important;
    margin-left: 8px !important;
    color: #58565A !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   CARD BODY - WHITE BACKGROUND
   ============================================ */

/* Target card-body when expanded */
form#publicCertificateSearchForm #courseSearchCriteriaBody.show>.card-body {
    background: white !important;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 20px !important;
}

/* Also target without .show */
form#publicCertificateSearchForm #courseSearchCriteriaBody>.card-body {
    background: white !important;
    background-color: #ffffff !important;
}

/* Neutralize nested cards */
form#publicCertificateSearchForm #courseSearchCriteriaBody .card-body .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   HELP TEXT
   ============================================ */

form#publicCertificateSearchForm .pageHelpText {
    margin-bottom: 0 !important;
    color: #171717 !important;
    margin: 0px 0px 0px 16px !important;
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

form#publicCertificateSearchForm label,
form#publicCertificateSearchForm .labelSpanStyle {
    font-weight: 400 !important;
    color: #171717 !important;
    font-size: 0.85rem !important;
}

form#publicCertificateSearchForm .card-body .form-control {
    border: 2px solid #e0e4e8 !important;
    border-radius: 8px !important;
    padding: 0px 16px !important;
    transition: all 0.3s ease !important;
}

form#publicCertificateSearchForm .card-body .form-control:focus {
    border-color: #0066cc !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1) !important;
    outline: none !important;
}

/* ============================================
   BUTTONS
   ============================================ */

form#publicCertificateSearchForm .buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

/* Reset button */
form#publicCertificateSearchForm #buttonReset {
    background-color: #ffffff !important;
    color: #D41F37 !important;
    border: 1px solid #D41F37 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

form#publicCertificateSearchForm #buttonReset:hover {
    background-color: #D41F37 !important;
    border-color: #D41F37 !important;
    color: #ffffff !important;
}

/* Search button */
form#publicCertificateSearchForm #buttonSearch {
    color: white !important;
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
}

form#publicCertificateSearchForm #buttonSearch:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    #publicCertificateSearchForm {
        max-width: 80% !important;
    }
}

@media (max-width: 768px) {
    #publicCertificateSearchForm {
        max-width: 95% !important;
        padding: 24px 16px !important;
    }

    form#publicCertificateSearchForm .buttons {
        flex-direction: column !important;
    }

    form#publicCertificateSearchForm #buttonReset,
    form#publicCertificateSearchForm #buttonSearch {
        width: 100% !important;
    }
}


/* FILE: isolated-certificates-tabs.css
   PROJECT: MacEwan University - School of Continuing Education (SCE)
   ARCHITECTURE: Scoped Isolation (Island Mode)
   VERIFIED: 100% Match via MRI Look & Feel Audit
   LAST UPDATED: January 29, 2026
*/

/* 1. Base Tab Styling (Inactive State) */
#certificateSearchResult_container .nav-tabs .nav-link {
    background-color: #f0f0f0 !important;
    /* rgb(240, 240, 240) */
    color: #555555 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.58 !important;
    text-transform: uppercase !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    margin-right: 2px !important;
    padding: 8px 15px !important;
    padding-left: 0.6rem !important;
    border-top: 3px solid transparent !important;
    padding-top: 6px !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-top-color 0.3s ease !important;
}

/* 2. Active Tab Styling (Selected State - The Red Line Fix) */
#certificateSearchResult_container .nav-tabs .nav-link.active {
    background-color: #FFFFFF !important;
    color: #171717 !important;
    border-top-color: #8b2331 !important;
    /* rgb(139, 35, 49) - Corporate Maroon */
    border-bottom: 1px solid #ffffff !important;
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
    font-weight: 700 !important;
}

/* 3. Tab Container Layout Cleanup */
#certificateSearchResult_container .nav-tabs {
    border-bottom: 1px solid #dee2e6 !important;
    margin-bottom: 15px !important;
    justify-content: flex-end !important;
    /* Align to right like Courses */
}


/* =======================================================
 * 1. GENERAL TABLE & CONTAINER STYLE (SCOPED)
 * ======================================================= */

#certificateSearchResult_container {
    background-color: #fff !important;
    padding: 20px !important;
    border-radius: 4px !important;
}

#certificateSearchResult_list table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    color: rgb(23, 23, 23) !important;
    border: none !important;
}

/* =======================================================
 * 2. HEADER STYLING (INSTRUCTOR PORTAL DNA)
 * ======================================================= */

#certificateSearchResult_list table.table thead th {
    background: #34111A !important;
    /* MacEwan Maroon */
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    /* High-precision small caps */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 13px 18px !important;
    vertical-align: middle !important;
    border: 1px solid #34111A !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-bottom: none !important;
}

/* Specific styling for sortable links in headers */
#certificateSearchResult_list table.table thead th.sortable a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
    /* The MRI Fix: From inline to Flex */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    transition: all 0.2s ease-in-out !important;
}

#certificateSearchResult_list table.table thead th.sortable a:hover {
    color: #D41F37 !important;
    text-decoration: underline !important;
    text-decoration-color: #D41F37 !important;
}

/* Sort Icon Injection (\f0dc) */
#certificateSearchResult_list table.table thead th.sortable a::after {
    content: "\f0dc" !important;
    /* fa-sort */
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    margin-left: 8px !important;
    opacity: 0.6 !important;
    color: inherit !important;
}

/* Active Sorting States (Optional Visual Feedback) */
#certificateSearchResult_list table.table thead th.sorted a::after {
    opacity: 1 !important;
}

/* Remove border from last header cell */
#certificateSearchResult_list table.table thead th:last-child {
    border-right: 1px solid #34111A !important;
}

/* =======================================================
 * 3. ZEBRA STRIPING & BOX ARCHITECTURE
 * ======================================================= */

#certificateSearchResult_list table.table tbody tr.odd {
    background-color: #f0f0f0 !important;
}

#certificateSearchResult_list table.table tbody tr.even {
    background-color: #ffffff !important;
}

#certificateSearchResult_list table.table tbody tr:hover {
    background-color: #f8f8f8 !important;
}

/* =======================================================
 * 4. CELL ALIGNMENT
 * ======================================================= */

#certificateSearchResult_list table.table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
}

#certificateSearchResult_list table.table tbody td:nth-child(1) {
    display: flex !important;
    align-items: center !important;
    border: none !important;
}

/* =======================================================
 * 5. TYPOGRAPHY & LINKS
 * ======================================================= */

#certificateSearchResult_list .certificateName,
#certificateSearchResult_list table.table tbody td a {
    color: #34111a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 8px !important;
}

#certificateSearchResult_list .certificateCategory {
    color: #a6a6a6 !important;
    font-weight: 700 !important;
    font-size: 0.79rem !important;
    text-transform: uppercase !important;
}

/* =======================================================
 * 6. IMAGE PLACEHOLDER
 * ======================================================= */

#certificateSearchResult_list img.featuredImage {
    width: 100px !important;
    height: 60px !important;
    object-fit: contain !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
}

/* =======================================================
 * 7. MOBILE REFINEMENT
 * ======================================================= */

@media (max-width: 767px) {

    div#certificateSearchResult_list table#certificateSearchResult tbody tr td a,
    div#certificateSearchResult_list table#certificateSearchResult tbody tr td a span.certificateName {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    #certificateSearchResult_list table.table thead {
        display: none !important;
        /* Hide professional headers on mobile */
    }

    #certificateSearchResult_list table.table tbody tr {
        display: block !important;
        margin-bottom: 20px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 4px !important;
    }

    #certificateSearchResult_list table.table tbody td {
        display: block !important;
        border: none !important;
    }
}


/* =======================================================
 * 1. IMAGE PLACEHOLDER & ICON INJECTION (THE MIRROR)
 * ======================================================= */

/* Hide the original broken image from Modern Campus */
#certificateSearchResult_list img.noImage {
    display: none !important;
}

/* Style the Anchor as the Placeholder Box */
#certificateSearchResult_list table.table a:has(img.noImage) {
    display: block !important;
    position: relative !important;
    width: 100px !important;
    height: 60px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    /* Prevents squashing in flex containers */
    text-decoration: none !important;
}

/* Inject the Font Awesome Icon (fa-award: \f559) */
#certificateSearchResult_list table.table a:has(img.noImage)::before {
    content: "\f559" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Perfect Centering Logic */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* Visual Styling */
    font-size: 1.8rem !important;
    color: #ced4da !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* Icon Hover Effect: MacEwan Red + Scale */
#certificateSearchResult_list table.table a:has(img.noImage):hover::before {
    color: #8b2331 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* =======================================================
 * 2. LINK & TYPOGRAPHY MIRROR
 * ======================================================= */

/* Target both the span and the direct link for consistency */
#certificateSearchResult_list table.table tbody td a,
#certificateSearchResult_list .certificateName {
    color: #8b2331 !important;
    /* MacEwan Red */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.3) !important;
    transition: color 0.3s, text-decoration-color 0.3s, opacity 0.3s !important;
}

/* Master Hover State for Links */
#certificateSearchResult_list table.table tbody td a:hover,
#certificateSearchResult_list .certificateName:hover {
    color: #34111a !important;
    /* Dark Maroon Hover */
    text-decoration: underline !important;
    text-decoration-color: #34111a !important;
}

/* Ensure the second column (Category) matches the DNA */
#certificateSearchResult_list .certificateCategory {
    color: #171717 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}

/* FILE: final-certificates-grid-complete.css
   PROJECT: MacEwan University - School of Continuing Education (SCE)
   ARCHITECTURE: Scoped Isolation (Island Mode) + Absolute Badge Layering
   FIX: 191px Height Kill + 80px Optimized Image + Top-Right Blue Badge
   LAST UPDATED: January 29, 2026
*/

/* FILE: isolated-certificates-grid-final.css
   PROJECT: MacEwan University - School of Continuing Education (SCE)
   ARCHITECTURE: Scoped Isolation (Island Mode) + Nuclear Override
   FIX: CMS Hidden Class Bypass + Top-Right Blue Badge + 80px Optimized Image
   LAST UPDATED: January 29, 2026
*/

/* =======================================================
 * 1. CONTENEDOR DE REJILLA (GRID)
 * ======================================================= */
#certificateSearchResult_grid ul.grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    list-style: none !important;
}

/* =======================================================
 * 2. ESTRUCTURA DE LA CARD (LI)
 * ======================================================= */
#certificateSearchResult_grid ul.grid li {
    /* Matamos el estilo inline de 191px y el float */
    height: auto !important;
    float: none !important;
    width: auto !important;
    position: relative !important;
    /* Ancla para el Badge Absoluto */

    background-color: #FFFFFF !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;

    /* Stacking Interno */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#certificateSearchResult_grid ul.grid li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
    z-index: 10 !important;
}

/* =======================================================
 * 3. BADGE AZUL PREMIUM (Bypass .hiddenOnTabPaneGrid)
 * ======================================================= */
#certificateSearchResult_grid .certificateCategory.hiddenOnTabPaneGrid {
    /* Nuclear Force: Anulamos el display:none del sistema */
    display: block !important;
    visibility: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;

    /* Posicionamiento Flotante */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 40 !important;

    background-color: #1B3768 !important;
    /* Azul profundo MacEwan */
    padding: 12px !important;
    text-align: center !important;

    /* ADN de Forma SCE */
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 15px !important;

    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1) !important;
    height: auto !important;
}

/* Icono del Badge (Award \f559) */
#certificateSearchResult_grid .certificateCategory::before {
    content: "\f559" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    color: #00A0DD !important;
    margin-right: 6px !important;
    visibility: visible !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Texto del Badge */
#certificateSearchResult_grid .certificateCategory::after {
    content: "CERTIFICATE" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #00A0DD !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* =======================================================
 * 4. OPTIMIZACIÓN DE IMAGEN (80px)
 * ======================================================= */
#certificateSearchResult_grid ul.grid li a:first-child {
    display: block !important;
    position: relative !important;
    width: 90% !important;
    height: 80px !important;
    /* Altura optimizada detectada por MRI */
    background-color: #f9f9f9 !important;
    text-decoration: none !important;
    z-index: 5 !important;
    padding-top: 10px !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

#certificateSearchResult_grid ul.grid li a:first-child img.noImage {
    display: none !important;
}

/* Icono de Placeholder (Birrete \f19d) */
#certificateSearchResult_grid ul.grid li a:first-child:has(img.noImage)::before {
    content: "\f19d" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 2.2rem !important;
    color: #ced4da !important;
    transition: all 0.3s ease !important;
}

/* =======================================================
 * 5. TÍTULO CON BARRA DE IDENTIDAD (MAROON)
 * ======================================================= */
#certificateSearchResult_grid .certificateName {
    display: block !important;
    color: #34111a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    /* Barra de Acento Roja */
    border-left: 3px solid #8b2331 !important;
    padding: 2px 10px !important;
    margin: 15px 15px 20px 15px !important;
}

#certificateSearchResult_grid ul.grid li a:nth-child(2) {
    text-decoration: none !important;
}

/* =======================================================
 * 6. RESPONSIVE SHIELD (0.8rem)
 * ======================================================= */
@media (max-width: 767px) {
    div#certificateSearchResult_grid ul.grid li a .certificateName {
        font-size: 0.8rem !important;
        padding: 2px 8px !important;
    }
}



/*******************************************************
* You might also like - Fully Responsive System *
 * Transforms the default Bootstrap list into a modern,
 * sticky sidebar using MacEwan corporate colors.
 *******************************************************/


/* Section Header */
#contentModule8 .sce-section-header {
    margin-bottom: 2rem !important;
    padding: 0 20px !important;
}

#contentModule8 .sce-section-title {
    color: #171717 !important;
    font-family: 'Crimson Text', serif !important;
    font-weight: 400 !important;
    font-size: 2rem !important;
    line-height: 1.3 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

#contentModule8 .sce-title-divider {
    width: 60px !important;
    height: 1px !important;
    background-color: #d1d1d1 !important;
    margin: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    #contentModule8 .sce-section-header {
        padding: 0 15px !important;
        margin-bottom: 1.5rem !important;
    }

    #contentModule8 .sce-section-title {
        font-size: 1.75rem !important;
        margin-top: 1rem !important;
    }
}

/* CRITICAL: Break Bootstrap grid constraint */
#contentModule8 .row>.col-lg-6:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

#contentModule8 .row>.col-lg-6:last-child {
    display: none !important;
}

/* Neutralize Modern Campus container */
#contentModule8 .vcb-recommendation,
#contentModule8 .variable-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Link wrapper - BLOCK for Bootstrap grid compatibility */
#contentModule8 a.sce-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    pointer-events: auto !important;
    height: 100% !important;
}

#contentModule8 a.sce-card-link:focus {
    outline-offset: 4px;
}

/* Card architecture - consistent height, NO max-width */
#contentModule8 .sce-white-card {
    background: #FFF !important;
    border: 1px solid #ebedf0 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
    min-height: 52vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform-origin: center center !important;
    pointer-events: none !important;
}

/* Disable pointer events on card children */
#contentModule8 .sce-white-card * {
    pointer-events: none !important;
}

#contentModule8 a.sce-card-link:hover .sce-white-card {
    transform: scale(1.04) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08) !important;
}

/* Image area */
#contentModule8 .card-image-area {
    position: relative !important;
    height: 160px !important;
    background: #f8f9fa !important;
    overflow: hidden !important;
}

#contentModule8 .card-image-area img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#contentModule8 .card-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: white !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font: 800 11px/1 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    color: #171717 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15) !important;
}

/* Card body */
#contentModule8 .card-body {
    padding: 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#contentModule8 .card-title {
    border-left: 3px solid #8b2331 !important;
    padding-left: .5rem !important;
    font: 700 1rem/1.4 'Montserrat', sans-serif !important;
    color: #171717 !important;
    text-transform: none !important;
    margin: 0 0 12px !important;
}

#contentModule8 .card-metadata {
    *display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
}

#contentModule8 .star-rating {
    color: #D9D3C5 !important;
    font-size: .85rem !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

#contentModule8 .rating-number {
    color: #666 !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
}

#contentModule8 .card-tagline {
    font-size: .75rem !important;
    color: #171717 !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
    flex: 1 !important;
    max-height: 4.5em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

/* Separator line - pushed to bottom */
#contentModule8 .imagelr-separator {
    padding-bottom: 0 !important;
    margin-top: auto !important;
    margin-bottom: .85rem !important;
    width: 3.5rem !important;
    border-top: solid 1px #d51f37 !important;
}

/* Link-style CTA */
#contentModule8 .card-link-text {
    color: #d51f37 !important;
    font-weight: 700 !important;
    font-size: .875rem !important;
    display: inline-block !important;
    text-transform: uppercase !important;
}

/* Animated arrow */
#contentModule8 .card-link-text::after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    display: inline-block !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    margin-left: .25rem !important;
    transition: transform .2s ease !important;
}

#contentModule8 a.sce-card-link:hover .card-link-text::after {
    transform: translateX(4px) !important;
}

/* CAROUSEL SPECIFIC STYLES */

/* Carousel container - REDUCED padding for wider cards */
#contentModule8 .carousel {
    position: relative !important;
    padding: 60px 20px !important;
}

/* Carousel-inner prevents jumping */
#contentModule8 .carousel-inner {
    min-height: 470px !important;
    padding: 0.8rem !important;
}


/* Row inside slides */
#contentModule8 .carousel-item .row {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Bootstrap columns - proper spacing and flex */
#contentModule8 .carousel-item [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Link fills entire column */
#contentModule8 .carousel-item [class*="col-"]>a.sce-card-link {
    flex: 1 !important;
    width: 100% !important;
}

/* Carousel controls - positioned outside */
#contentModule8 .carousel-control-prev,
#contentModule8 .carousel-control-next {
    width: 50px !important;
    height: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    background-color: rgba(139, 35, 49, 0.9) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

#contentModule8 .carousel-control-prev {
    left: -60px !important;
}

#contentModule8 .carousel-control-next {
    right: -60px !important;
}

#contentModule8 .carousel-control-prev:hover,
#contentModule8 .carousel-control-next:hover {
    background-color: rgba(139, 35, 49, 1) !important;
}

/* Control icons */
#contentModule8 .carousel-control-prev-icon,
#contentModule8 .carousel-control-next-icon {
    background-size: 20px 20px !important;
}

/* Indicators */
#contentModule8 .carousel-indicators {
    bottom: 10px !important;
    margin: 0 !important;
}

#contentModule8 .carousel-indicators li {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 5px !important;
}

#contentModule8 .carousel-indicators .active {
    background-color: #8b2331 !important;
}

/* Disabled control styles */
#contentModule8 .carousel-control-prev.disabled,
#contentModule8 .carousel-control-next.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ============================================
   HIDE CONTROLS WHEN ONLY 1 SLIDE
   Applied when carousel has .single-slide class
   ============================================ */

/* Nuclear specificity to override Bootstrap */
#contentModule8 .variable-content .carousel.single-slide .carousel-control-prev,
#contentModule8 .variable-content .carousel.single-slide .carousel-control-next,
#contentModule8 .variable-content .carousel.single-slide .carousel-indicators,
#contentModule8 #sce-recommendations-carousel.single-slide .carousel-control-prev,
#contentModule8 #sce-recommendations-carousel.single-slide .carousel-control-next,
#contentModule8 #sce-recommendations-carousel.single-slide .carousel-indicators {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ============================================
   RESPONSIVE: MOBILE LAYOUT (< 1080px)
   Cards stacked vertically, no carousel
   ============================================ */

@media (max-width: 1079px) {

    /* Hide carousel navigation completely */
    #contentModule8 .carousel-control-prev,
    #contentModule8 .carousel-control-next,
    #contentModule8 .carousel-indicators {
        display: none !important;
    }

    /* Remove carousel constraints */
    #contentModule8 .carousel {
        padding: 20px 15px !important;
        overflow: visible !important;
    }

    /* Carousel-inner in normal flow */
    #contentModule8 .carousel-inner {
        min-height: auto !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
    }

    /* NUCLEAR: Maximum specificity to override Bootstrap */
    #contentModule8 .variable-content .carousel.slide .carousel-inner .carousel-item,
    #contentModule8 #sce-recommendations-carousel .carousel-item {
        float: none !important;
        clear: both !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 40px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* Stack cards vertically */
    #contentModule8 .carousel-item .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    /* Full width columns */
    #contentModule8 .carousel-item [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 500px !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Cards adapt to mobile */
    #contentModule8 .sce-white-card {
        min-height: auto !important;
        max-width: 500px !important;
        width: 100% !important;
    }

    /* Larger image on mobile */
    #contentModule8 .card-image-area {
        height: 200px !important;
    }

    /* Comfortable padding */
    #contentModule8 .card-body {
        padding: 20px !important;
    }

    /* Readable title size */
    #contentModule8 .card-title {
        font-size: 1.125rem !important;
    }
}

/* Tablet refinement (768px - 1079px) */
@media (min-width: 768px) and (max-width: 1079px) {
    #contentModule8 .carousel {
        padding: 30px 20px !important;
    }

    #contentModule8 .carousel-item [class*="col-"] {
        max-width: 600px !important;
    }

    #contentModule8 .sce-white-card {
        max-width: 600px !important;
    }
}

/* Small mobile (< 375px) */
@media (max-width: 374px) {
    #contentModule8 .card-image-area {
        height: 180px !important;
    }

    #contentModule8 .card-body {
        padding: 16px !important;
    }

    #contentModule8 .card-title {
        font-size: 1rem !important;
    }
}




/*******************************************************
 * MODERN MACEWAN SIDEBAR (CSS-ONLY ENHANCEMENT)
 * Transforms the default Bootstrap list into a modern,
 * sticky sidebar using MacEwan corporate colors.
 *******************************************************/

/* 1. Sidebar Container Styling */
#studentMenu {
    width: 100% !important;
    background-color: #1B3768 !important;
    /* MacEwan Dark Blue */
    border-radius: 3px !important;
    padding: 15px 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 100 !important;
    /* ADDED: Bottom spacing to prevent menu from touching footer when scrolling ends */
    margin-bottom: 20px !important;
}

/* 2. Base Link Styling (Inactive State) */
#studentMenu .nav-pills .nav-link,
#studentMenu .nav-link {
    /* Added generic .nav-link selector for better coverage */
    color: #EAEAEA !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 0.7rem !important;
    /* Slight bump for readability if needed, originally 0.7rem */
    padding: 10px 15px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    border-left: 5px solid transparent !important;
    /* Pre-allocate space for border to prevent jumps */
}

/* 3. Hover State */
#studentMenu .nav-pills .nav-link:hover,
#studentMenu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

/* 4. Active State (Generic & Parent Items) */
#studentMenu .nav-pills .nav-item.active>.nav-link,
#studentMenu .nav-link.active,
#studentMenu .nav-link[aria-current="page"] {
    background-color: #FFFFFF !important;
    color: #1B3768 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* 4.1 SPECIFIC ACTIVE BORDER FIX (Replaces Red Border) */
/* Targets links that are active either via class or aria attribute */
#studentMenu .nav-pills .nav-item.active>.nav-link,
#studentMenu .nav-link.active,
#studentMenu .nav-link[aria-current="page"] {
    border-left: 5px solid #00A0DD !important;
    /* MacEwan Light Blue instead of Red */
}

/* 5. Submenu Styling */
#studentMenu .subMenu {
    margin-left: 10px !important;
    margin-top: 5px !important;
    border-radius: 6px !important;
    padding: 5px !important;
}

#studentMenu .subMenu .nav-link {
    font-size: 0.8rem !important;
    /* Slightly smaller than main links */
    padding: 8px 4px !important;
    color: #fff !important;
    border-left: 0px !important;
    border-bottom: 1px dotted #00091b !important;
    border-radius: 0px !important;
}

#studentMenu .subMenu .nav-link.active,
#studentMenu .subMenu .nav-link[aria-current="page"] {
    background-color: transparent !important;
    color: #8B2331 !important;
    /* Keep Burgundy for active sub-items if desired, or change to #00A0DD too */
    font-weight: 700 !important;
    border-left: 3px solid #8B2331 !important;
    /* Burgundy accent for sub-items */
    border-radius: 0px 6px 6px 0px !important;
    /* Squared off left side for border */
}

/* ==========================================================================
   MACEWAN OVERRIDES - STUDENT PORTAL
   ========================================================================== */

/**
 * MODULE 1 LINKS (Standardized to SCE Burgundy)
 */
#contentModule1 .variable-content a {
    background-color: var(--button-color-dark-bg);
    border-radius: 0 !important;
    color: var(--button-color-fg) !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 0.942rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
}

#contentModule1 .variable-content a:hover {
    background-color: #34111a;
}

#contentModule1 a:visited {
    /* Visited State - Keeps base color to maintain visual consistency */
    color: #8b2331 !important;
}


/* ============================================================
   SCE ANNOUNCEMENTS - TOTAL ISOLATION ENGINE (V143)
   Target Page: Announcements List View only
   Scope: #pageStudentNews
   Prevents leaks to: Help & Support, My Profile, etc.
   ============================================================ */

/* 1. LAYOUT & ALIGNMENT (The 15px Axis) */
#pageStudentNews #contentModule1 .col-lg-12 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. HEADLINES & ISOLATED ICON 
   This rule is now invisible to the Help page */
#pageStudentNews #contentModule1 h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: #171717 !important;
    margin-top: 40px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    display: block !important;
}

#pageStudentNews #contentModule1 h3::before {
    content: "\f1ea" !important;
    /* Newspaper Icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
    color: #8b2331 !important;
    font-size: 1.2rem !important;
    display: inline-block !important;
}

/* 3. SYNOPSIS (The Body Text) */
#pageStudentNews #contentModule1 .newsItemSynopsis {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #444444 !important;
    text-align: justify !important;
    margin-bottom: 15px !important;
}

/* 4. EDITORIAL DIVIDERS 
   Separates stories with a clean horizontal rule */
#pageStudentNews #contentModule1 .fullStoryLinkContainer {
    border-bottom: 1.5px solid #e2e2e2 !important;
    padding-bottom: 35px !important;
    margin-bottom: 35px !important;
    display: block !important;
    height: auto !important;
}

/* 5. DIVIDER EXCEPTION
   Stops the line from appearing after the very last item */
#pageStudentNews #contentModule1 .fullStoryLinkContainer:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 6. DESIGN SYSTEM LINKS */
#pageStudentNews #contentModule1 .fullStoryLinkContainer a {
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    font-size: 1rem !important;
}

#pageStudentNews #contentModule1 .fullStoryLinkContainer a:hover {
    color: #171717 !important;
    text-decoration: none !important;
}


/* =======================================================
 * NEWS & MEDIA - BACK TO HEADLINES BUTTON
 * Context: Inside publicNewsForm
 * Style: Pill Shape + Icon + MacEwan Maroon
 * =======================================================*/


form[name="publicNewsForm"] #buttonBacktoHeadlines {
    color: #555 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    border-radius: 50px !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    box-shadow: none !important;
    background-image: none !important;
    padding: 6px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}



/* 3. Inject the ICON + NEW TEXT using ::before */
form[name="publicNewsForm"] #buttonBacktoHeadlines::before {
    /* \f060 is the simple arrow (fa-arrow-left) - Cleaner than the circular one */
    /* Followed by the new text "Back to News" */
    content: "\f03a   All News" !important;

    /* Restore font size for the new content */
    font-size: 0.7rem !important;
    font-family: "Font Awesome 5 Free", 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Weight for icon and text */
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    /* Prevents breaking into 2 lines */
}

/* 4. Hover State */
form[name="publicNewsForm"] #buttonBacktoHeadlines:hover {
    background-color: #8b2331 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}


/* ============================================================
   SCE ANNOUNCEMENTS - TOTAL INDEPENDENCE (V135)
   Target: #pageStudentNewsDetail
   ============================================================ */

/* 1. Estandarización del Chasis (Eje de 15px) */
#pageStudentNewsDetail .row>[class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. Jerarquía del Titular */
#pageStudentNewsDetail .newsStoryHeadline {
    font-family: 'Crimson Text', serif !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    padding-right: 1rem !important;
    /* El respiro calculado */
    font-size: 2.1756rem !important;
    font-weight: 700 !important;
    color: #171717 !important;
    line-height: 1.142 !important;
    letter-spacing: -.002rem !important;
}

/* 3. El Cuerpo "Rescatado" (Párrafos Huérfanos) */
#pageStudentNewsDetail .newsStoryBody~p {
    text-align: justify !important;
    line-height: 1.8 !important;
    /* Ratio áureo de lectura */
    margin-bottom: 1.6rem !important;
    font-size: 1.05rem !important;
    color: #333333 !important;
}

/* 4. El Sello del Design System (Links) */
#pageStudentNewsDetail .newsStoryBody~p a {
    color: #8b2331 !important;
    /* Maroon Institucional */
    font-weight: 700 !important;
    text-decoration: underline !important;
    display: inline !important;
    background: transparent !important;
}

#pageStudentNewsDetail .newsStoryBody~p a:hover {
    color: #171717 !important;
    text-decoration: none !important;
}

/* 5. Simetría de Imágenes */
#pageStudentNewsDetail .newsStoryBody~p img {
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    margin: 2rem 0 !important;
}


/* =======================================================
 * RESET: PROFILE PAGE BUTTONS
 * Target: .buttons inside Student Profile Form
 * Goal: Remove unwanted gray background from search styling.
 * =======================================================*/

form[name="portalStudentProfileForm"] .buttons,
form[name="portalStudentProfileForm"] .row>.col-lg-12>.buttons {
    /* Reset Background */
    background-color: transparent !important;
    background: none !important;

    /* Reset Borders/Radius */
    border-radius: 0 !important;
    border: none !important;

    /* Reset Spacing */
    padding: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;

    /* Layout */
    display: block !important;
    justify-content: flex-start !important;
}


#buttonSaveStudentProfile {
    margin-left: 0 !important;
}

/* =======================================================
 * STUDENT HOME DASHBOARD - MacEwan University
 * LinkedIn-style Course Cards with repositioned titles
 * 100% CSS - PRODUCTION-SAFE
 *========================================================*/

/* =====================================================
 * 1. WELCOME BANNER (Liquid Flow Effect) - BLINDADO
 * ===================================================== */


/* Main Container */
#contentModule1>.row>.col-lg-12>.variable-content:not(:has(.sce-spotlight-wrapper)) {
    position: relative !important;
    border-radius: 0.25rem !important;
    padding: 2rem 2.5rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 4px 15px rgba(139, 35, 49, 0.15) !important;
    overflow: hidden !important;
    background: #34111A !important;
}

/* Liquid Flow Background (pseudo-element) */
#contentModule1>.row>.col-lg-12>.variable-content:not(:has(.sce-spotlight-wrapper))::before {
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: radial-gradient(circle at center,
            rgba(139, 35, 49, 0) 30%,
            rgba(139, 35, 49, 0.5) 60%,
            #8B2331 85%,
            #34111A 100%),
        linear-gradient(-45deg,
            #D41F37, #8B2331, #FF6B35, #4A153B) !important;
    background-size: 400% 100% !important;
    animation: sceLiquidFlow 30s ease infinite !important;
    background-blend-mode: overlay, normal !important;
    opacity: 1 !important;
    z-index: 0 !important;
}

/* Ensure content is on top */
#contentModule1>.row>.col-lg-12>.variable-content:not(:has(.sce-spotlight-wrapper))>* {
    position: relative !important;
    z-index: 1 !important;
}

/* Animation keyframes (Sin cambios) */
@keyframes sceLiquidFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Welcome text styling */
#contentModule1>.row>.col-lg-12>.variable-content:not(:has(.sce-spotlight-wrapper)) .variable-content-item p {
    font-family: 'Crimson Text', serif !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Animated icon (THE MEGAPHONE THAT CAUSED THE PROBLEM) */
#contentModule1>.row>.col-lg-12>.variable-content:not(:has(.sce-spotlight-wrapper)) .variable-content-item p::before {
    content: "\f0a1" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    display: inline-block !important;
    margin-right: 12px !important;
    font-size: 1.5rem !important;
    color: #D41F37 !important;
    animation: iconPulse 2s ease-in-out infinite !important;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Exclude Enrollment History help text (We keep your previous exclusion for safety) */
#contentModule1 .pageHelpText .variable-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}

/* =====================================================
 * 2. STUDENT INFO HEADER - COMPACT MODE
 * Goal: Minimum height, maximum information density.
 * ===================================================== */

/* Student Header - ONLY in Student Dashboard */
form[name="portalStudentHomeForm"] #pageHeaderActions {
    padding: 10px 15px !important;
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%) !important;
    border-radius: 0.25rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Or even more specific */
form[name="portalStudentHomeForm"] .col-lg-4#pageHeaderActions {
    padding: 10px 15px !important;
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%) !important;
    border-radius: 0.25rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 1. STUDENT NAME */
.portalHeaderRow1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    /* Slightly smaller to save height */
    font-weight: 700 !important;
    color: #171717 !important;

    /* Spacing */
    margin-bottom: 0 !important;
    /* Zero bottom margin */
    padding-left: 24px !important;
    /* Reduce icon space */
    position: relative !important;
    line-height: 1.2 !important;
}

/* User Icon */
.portalHeaderRow1::before {
    content: "\f007" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    /* Optical top alignment */
    transform: none !important;
    /* Remove center transform to align with text top */
    font-size: 1rem !important;
    color: #8b2331 !important;
}

/* 2. EMAIL & ID (Second line) */
.portalHeaderRow2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.65rem !important;
    /* Compact secondary text */
    color: #666 !important;
    margin-bottom: 6px !important;
    /* Small separation before balance */
    padding-left: 24px !important;
    /* Align with name */
    line-height: 1.2 !important;
}

/* 3. ACCOUNT BALANCE (Badge) */
.portalHeaderRow3 {
    margin-bottom: 0 !important;
    padding-left: 24px !important;
    /* Align with everything else */
}

#portalAccountBalanceZero {
    display: inline-flex !important;
    align-items: center !important;

    background-color: #fff9e6 !important;
    border: 1px solid #f5c518 !important;
    /* Thinner border (1px) */
    border-radius: 50px !important;

    /* COMPACT PADDING */
    padding: 2px 10px !important;
    /* Very thin vertically */

    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    /* Small text */
    font-weight: 700 !important;
    color: #9e7f0e !important;
    line-height: 1 !important;
    /* Force minimum height */

    transition: transform 0.3s ease !important;
}

#portalAccountBalanceZero:hover {
    transform: scale(1.02) !important;
}

/* Hide or subtilize the "Account:" label to save horizontal space */
.accountBalanceStatusLabel {
    font-weight: 500 !important;
    margin-right: 4px !important;
    color: #bfa12f !important;
}

/* =====================================================
 * 3. COURSE CARDS - LEFT ALIGN FIX
 * ===================================================== */
form[name="portalStudentHomeForm"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    margin-top: 2rem !important;
}

form[name="portalStudentHomeForm"] .card.panel-default {
    flex: 1 1 100% !important;
    max-width: 320px !important;
    border: none !important;
    border-radius: 0.25rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background: #ffffff !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

form[name="portalStudentHomeForm"] .card.panel-default:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 12px 24px rgba(23, 23, 23, 0.2) !important;
}

/* Responsive grid */
@media (min-width: 576px) {
    form[name="portalStudentHomeForm"] .card.panel-default {
        flex: 1 1 calc(50% - 15px) !important;
    }
}

@media (min-width: 992px) {
    form[name="portalStudentHomeForm"] .card.panel-default {
        flex: 1 1 calc(33.333% - 20px) !important;
    }
}

/* MOBILE & TABLET - Full width cards */
@media (max-width: 991px) {
    form[name="portalStudentHomeForm"] .card.panel-default {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Card Header - Gradient Cover */
form[name="portalStudentHomeForm"] .card-header {
    background: linear-gradient(135deg, rgba(139, 35, 49, 0.1) 0%, rgba(52, 17, 26, 0.1) 100%) !important;
    border-bottom: none !important;
    padding: 0 !important;
    height: 80px !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

form[name="portalStudentHomeForm"] .card-header::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 35, 49, 0.03) 10px, rgba(139, 35, 49, 0.03) 20px) !important;
}

/* Icon positioning - LEFT ALIGNMENT FIX */
form[name="portalStudentHomeForm"] .card-header .row {
    position: relative !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;

    /* CHANGE 1: Align to left (start) instead of center */
    justify-content: flex-start !important;

    /* CHANGE 2: Left padding to separate icon from border */
    padding-left: 1.5rem !important;
}

form[name="portalStudentHomeForm"] .card-header .col-lg-6:first-child {
    display: flex !important;
    /* CHANGE 3: Align column content to left */
    justify-content: flex-start !important;
    position: static !important;
    padding: 0 !important;
}

/* Icon circle */
form[name="portalStudentHomeForm"] .card-title {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8b2331 0%, #34111A 100%) !important;
    border: 4px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-bottom: -50px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 2 !important;
}

form[name="portalStudentHomeForm"] .card-title::before {
    content: "\f19d" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    font-size: 2.5rem !important;
    color: #ffffff !important;
}

/* Status Badge - Attached to Icon */
form[name="portalStudentHomeForm"] .card-title::after {
    content: "ACTIVE" !important;
    position: absolute !important;
    bottom: -8px !important;

    /* CHANGE 4: Move badge to right of circle to balance */
    right: -15px !important;

    background-color: #3EC3A4 !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    border: 2px solid #ffffff !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Dynamic status */
form[name="portalStudentHomeForm"] .sectionDeliveryMethod:empty~.col-lg-6 .card-title::after {
    content: "INACTIVE" !important;
    background-color: #9E9E9E !important;
}

/* =====================================================
 * COURSE TITLE REPOSITIONING - FULL WIDTH FIX
 * ===================================================== */

/* Reposition courseTitle visually to card-body area */
form[name="portalStudentHomeForm"] .card-title .courseTitle {
    position: absolute !important;

    /* CHANGE 5: Vertical adjustment to give space */
    top: 140px !important;

    /* CHANGE 6: Absolute left alignment (relative to icon) */
    left: 0 !important;

    /* CHANGE 7: Remove centering transformations */
    transform: none !important;

    /* CHANGE 8: Extended width (300px is wider than card to ensure it fills) */
    width: 280px !important;

    /* CHANGE 9: Align text to left */
    text-align: left !important;

    font-family: 'Montserrat', sans-serif !important;
    color: #34111A !important;
    line-height: 1.4 !important;
    z-index: 1 !important;
}

/* Course code styling (ACCT 0202) */
form[name="portalStudentHomeForm"] .courseCode {
    display: block !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #8b2331 !important;
    margin-bottom: 0.3rem !important;
    /* Ensure it doesn't cut off */
    white-space: nowrap !important;
}

/* Course title styling */
form[name="portalStudentHomeForm"] .title {
    display: block !important;
    font-size: 1rem !important;
    /* Slightly larger */
    font-weight: 600 !important;
    color: #34111A !important;

    /* Allow it to flow in a single line if it fits, or two if necessary */
    white-space: normal !important;
    line-height: 1.3 !important;
}

/* Hide separator and section code */
form[name="portalStudentHomeForm"] .nameAndCodeSeparator,
form[name="portalStudentHomeForm"] .sectionCode {
    display: none !important;
}

/* Delivery badge - top right */
form[name="portalStudentHomeForm"] .col-lg-6.sectionDeliveryMethodContainer {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 3 !important;
}

form[name="portalStudentHomeForm"] .sectionDeliveryMethod {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #fff !important;
    color: #171717 !important;
    padding: 6px 12px !important;
    border-radius: 0.25rem !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
}

form[name="portalStudentHomeForm"] .sectionDeliveryMethod::before {
    content: "\f109" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 5px !important;
}

form[name="portalStudentHomeForm"] .sectionDeliveryMethod:empty {
    display: none !important;
}

/* Card body - space for repositioned title */
form[name="portalStudentHomeForm"] .card-body {
    padding: 1.5rem !important;
    padding-top: 5.5rem !important;
    min-height: 160px !important;
    /* A bit taller to ensure space */
}

form[name="portalStudentHomeForm"] .card-body .notFoundMessage {
    display: none !important;
}

/* =====================================================
 * 4. UPCOMING EVENTS SIDEBAR
 * ===================================================== */
#studentHomeUpcomingEvents {
    border-radius: 0.25rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#studentHomeUpcomingEvents .card-header {
    background: #f0f0f0 !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
}

#studentHomeUpcomingEvents .card-title {
    color: #171717 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding-left: 0.5rem !important;
    position: relative !important;
    border-left: 3px solid #8b2331;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    margin: 0px !important;
}


/* MOBILE & TABLET - Upcoming Events spacing */
@media (max-width: 991px) {
    #studentHomeUpcomingEvents.card.panel-default {
        margin-top: 1rem !important;
    }
}

/* =====================================================
 * UPCOMING EVENTS - Link Styling
 * ===================================================== */

/* Card body container */
.card-body {
    border-bottom: 1px solid #d1d5db !important;
    /* Gray border */
    padding: 16px 20px !important;
}

/* Last item without border */
.card-body:last-child {
    border-bottom: none !important;
}

/* Link headline */
.card-body .upcomingItemHeadline {
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

/* Link style */
.card-body .upcomingItemHeadline a {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #8b2331 !important;
    /* MacEwan Maroon */
    text-decoration: none !important;
    text-transform: none !important;
    /* No uppercase */
    transition: color 0.2s ease !important;
    display: block !important;
}

/* Hover state */
.card-body .upcomingItemHeadline a:hover {
    color: #34111A !important;
    /* Dark Maroon */
    text-decoration: underline !important;
}

/* Date (if exists) */
.card-body .upcomingItemDate {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    /* Gray text */
    margin: 0 !important;
    font-weight: 400 !important;
}

/* =====================================================
 * 5. SECTION HEADERS
 * ===================================================== */
form[name="portalStudentHomeForm"]>h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    color: #34111A !important;
    margin-bottom: 1.5rem !important;
    border-left: 5px solid #8b2331 !important;
    padding-left: 15px !important;
}

form[name="portalStudentHomeForm"]>h2::before {
    content: "\f19d" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    /*font-weight: 900;*/
    margin-right: 10px !important;
    color: #8b2331 !important;
}

/* =====================================================
 * 6. RESPONSIVE
 * ===================================================== */
@media (max-width: 991px) {
    #contentModule1>.row>.col-lg-12>.variable-content .variable-content-item p {
        font-size: 1.1rem !important;
    }

    .portalHeaderRow1 {
        font-size: 1.2rem !important;
    }
}

/* TABLET - Text Truncation Fix */
@media (max-width: 1080px) {
    form[name="portalStudentHomeForm"] .card .card-header .row .col-lg-6 .card-title .courseTitle .title {
        /* Truncamiento forzado */
        display: block !important;
        width: 180px !important;
        /* Increased from 220px */
        max-width: 180px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-wrap: normal !important;
        overflow-wrap: normal !important;

        /* Maintain positioning */
        position: absolute !important;
        top: 140px !important;
        left: 0 !important;
    }
}

/* DESKTOP - No truncation */
@media (min-width: 1081px) {
    form[name="portalStudentHomeForm"] .card .card-header .row .col-lg-6 .card-title .courseTitle .title {
        width: 260px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}


/* =======================================================
 * MY PROFILE - BACKGROUND CONTAINER
 * Target: Main profile content wrapper
 * Page: My Profile (Student Portal)
 * Location: /student/myProfile or similar
 * Style: Light grey background, rounded corners, padding
 * =======================================================*/

/* Primary Selector (Maximum Specificity) */
#student_portal_update_container.profileTemplateLocationContainer {
    /* Background */
    background-color: #f0f0f0 !important;
    background: #f0f0f0 !important;
    /* Override inline style */

    /* Spacing */
    padding: 30px 15px 15px 15px !important;
    margin-bottom: 1.5rem !important;

    /* Shape */
    border-radius: 4px !important;
}

/* Fallback Selector (Class Only) */
.profileTemplateLocationContainer {
    background-color: #f0f0f0 !important;
    padding: 30px 15px 15px 15px !important;
    border-radius: 4px !important;
    margin-bottom: 1.5rem !important;
}

/* Remove any conflicting inline styles */
#student_portal_update_container[style] {
    background: #f0f0f0 !important;
    padding: 30px 15px 15px 15px !important;
}

/* =======================================================
 * CHANGE MY CREDENTIALS - NUCLEAR OVERRIDE
 * Target: Username/Password change form container
 * Strategy: Maximum specificity + attribute selectors
 * =======================================================*/

/* NUCLEAR OPTION 1: Multiple selector strategies */
#studentProfileUsernamePassword,
div#studentProfileUsernamePassword,
div[id="studentProfileUsernamePassword"],
#studentProfileUsernamePassword.row,
body #studentProfileUsernamePassword {
    /* Background - Force override */
    background: #fff !important;

    /* Spacing - Force override */
    padding: 30px 15px 15px 15px !important;
    padding-top: 30px !important;
    padding-right: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 15px !important;

    margin-bottom: 1.5rem !important;
    margin-bottom: 24px !important;

    /* Shape */
    border-radius: 4px !important;

    /* Shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* NUCLEAR OPTION 2: Override any conflicting .row styles */
#studentProfileUsernamePassword.row,
.row#studentProfileUsernamePassword {
    background-color: #f0f0f0 !important;
    padding: 30px 15px 15px 15px !important;
}

/* NUCLEAR OPTION 3: Inline style attribute override */
#studentProfileUsernamePassword[style] {
    background-color: #f0f0f0 !important;
    padding: 30px 15px 15px 15px !important;
}


/* =======================================================
 * CHANGE MY CREDENTIALS - CORRECTED STYLING
 * Form container: White card with grey background
 * Buttons: Normal, NO grey background
 * Updated: 2024-12-24 - Fixed buttons catastrophe
 * =======================================================*/

/* ===== FORM CONTAINER (White card with grey background) ===== */

#studentProfileUsernamePassword {
    background-color: #ffffff !important;
    padding: 30px 15px 15px 15px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin: 30px !important;
    position: relative !important;
}

#studentProfileUsernamePassword::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -30px !important;
    left: -30px !important;
    right: -30px !important;
    bottom: -30px !important;
    background-color: #f0f0f0 !important;
    border-radius: 4px !important;
    z-index: -1 !important;
}

#studentProfileUsernamePassword>.row,
#studentProfileUsernamePassword>div {
    position: relative !important;
    z-index: 1 !important;
}

#studentProfileUsernamePassword>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ===== BUTTONS CONTAINER (NO BACKGROUND - CORRECTED) ===== */

/* REMOVE grey background from buttons row */
#studentProfileUsernamePassword>.row:last-of-type,
#studentProfileUsernamePassword .col-lg-12.buttons {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Button spacing only */
#studentProfileUsernamePassword .buttons .btn {
    margin-right: 10px !important;
}

#studentProfileUsernamePassword .buttons .btn:last-child {
    margin-right: 0 !important;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 767px) {
    #studentProfileUsernamePassword .buttons .btn {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    #studentProfileUsernamePassword .buttons .btn:last-child {
        margin-bottom: 0 !important;
    }
}


/* =======================================================
 * CHANGE MY CREDENTIALS - SIMULATE MY PROFILE LOOK
 * Goal: Create white card effect inside grey background
 * Strategy: Use ::before pseudo-element for grey background
 * =======================================================*/

/* Create grey background container effect */
#studentProfileUsernamePassword {
    /* White card background */
    background-color: #ffffff !important;

    /* Card styling */
    padding: 30px 15px 15px 15px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;

    /* Position for pseudo-element */
    position: relative !important;

    /* Space for outer grey background */
    margin: 30px !important;
}

/* Create grey background using ::before */
#studentProfileUsernamePassword::before {
    content: "" !important;
    position: absolute !important;
    top: -30px !important;
    left: -30px !important;
    right: -30px !important;
    bottom: -30px !important;
    background-color: #f0f0f0 !important;
    border-radius: 4px !important;
    z-index: -1 !important;
}

/* Ensure content stays on top */
#studentProfileUsernamePassword>* {
    position: relative !important;
    z-index: 1 !important;
}

/* Inner row adjustments */
#studentProfileUsernamePassword>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}




/* =======================================================
 * CHANGE MY CREDENTIALS - BUTTONS GREY BACKGROUND
 * Target: Buttons row (sibling of #studentProfileUsernamePassword)
 * Location: Outside the main form container
 * Style: Grey background matching design
 * =======================================================*/

/* Target buttons row in customizableForm */
form.customizableForm>.row:has(.buttons),
form.customizableForm .row .col-lg-12.buttons {
    background-color: #f0f0f0 !important;
    padding: 0px 15px !important;
    border-radius: 4px !important;
    margin-top: 0rem !important;
}

/* Alternative: Target by position (last row in form) */
form.customizableForm>.row:last-of-type {
    background-color: #f0f0f0 !important;
    padding: 0px 15px !important;
    border-radius: 4px !important;
    margin-top: 0rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Button spacing */
form.customizableForm .buttons .btn {
    margin-right: 10px !important;
}

form.customizableForm .buttons .btn:last-child {
    margin-right: 0 !important;
}

/* =======================================================
 * PAGE: DROP COURSE REQUEST (Withdrawal Form)
 * Scope: form[name="portalStudentRequestWithdrawalForm"]
 * Style: Grey Card Container + Typography Fixes
 * =======================================================*/

/* 1. THE CONTAINER (Grey Box) */
form[name="portalStudentRequestWithdrawalForm"] {
    /* --- Your Requested Styles --- */
    background-color: #f0f0f0 !important;
    padding: 30px 25px !important;
    /* Increased slightly for better breathing room */
    border-radius: 4px !important;
    margin-top: 20px !important;
    /* Subtle definition */
    max-width: 100% !important;
    /* Prevent stretching on huge screens */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. CONFIRMATION TEXT ("You have requested to drop...") */
/* Target the first paragraph to make it stand out */
form[name="portalStudentRequestWithdrawalForm"]>p.pageHelpText:first-of-type {
    font-family: 'Montserrat', sans-serif !important;
    color: #171717 !important;
    font-size: 1.1rem !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

/* 3. COURSE HIGHLIGHT (The Course Name) */
/* Make the course code and title POP in Maroon */
form[name="portalStudentRequestWithdrawalForm"] .courseName {
    /* 1. LAYOUT PRESERVATION (Surgical Protocol) */
    --original-padding: 10px 15px;
    /* REFACTORED BY DESIGN SYSTEM */
    --original-margin: 10px 0 0 0;
    /* REFACTORED BY DESIGN SYSTEM */

    display: block !important;
    padding: var(--original-padding) !important;
    margin-top: 10px !important;
    border-radius: 0px !important;

    /* 2. VISUAL OVERRIDE (Light Highlight Skin) */
    /* background-color: #ffffff !important; */
    /* OLD STYLE */
    background-color: #fff !important;
    /* REFACTORED BY DESIGN SYSTEM */

    /* border-left: 4px solid #8b2331 !important; */
    border: none !important;
    border-left: 0.4rem solid #8b2331 !important;
    /* Standardized thick maroon border */

    /* 3. TYPOGRAPHY & CONTRAST */
    color: #171717 !important;
    /* Maximum readability on light gray */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;

    /* Clean up shadow for a flatter, modern look */
    box-shadow: none !important;
}

/* 3.1 INTERNAL SPACING FIX */
form[name="portalStudentRequestWithdrawalForm"] .courseName .courseCode {
    color: #8b2331 !important;
    /* Highlight the code in Maroon */
    margin-right: 5px;
}

/* 4. INSTRUCTION TEXT (Variable Content) */
/* Style the text below the course name */
form[name="portalStudentRequestWithdrawalForm"] .variable-content-item {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    color: #555 !important;
    margin-bottom: 25px !important;
    line-height: 1.6 !important;
}

/* 5. FORM INPUTS (Dropdown & Text) */
form[name="portalStudentRequestWithdrawalForm"] .form-control {
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    height: 45px !important;
    /* Taller touch target */
    background-color: #ffffff !important;
}

form[name="portalStudentRequestWithdrawalForm"] label {
    font-weight: 700 !important;
    color: #34111A !important;
    font-size: 0.9rem !important;
    padding-top: 10px !important;
    /* Align with input */
}

/* 6. BUTTONS CONTAINER */
form[name="portalStudentRequestWithdrawalForm"] .buttons {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #dcdcdc !important;
    /* Separator line */

    display: flex !important;
    justify-content: flex-end !important;
    /* Align right */
    gap: 15px !important;
}

/* 7. RESPONSIVE (Mobile) */
@media (max-width: 767px) {
    form[name="portalStudentRequestWithdrawalForm"] .buttons {
        flex-direction: column-reverse !important;
        /* Submit on top */
    }

    form[name="portalStudentRequestWithdrawalForm"] .buttons .btn {
        width: 100% !important;
    }
}


/* =======================================================
 * COMPLETED & DROPPED COURSES TABLES
 * Target: #academicHistoryCompletedCourses, #academicHistoryWithdrawnCourses
 * Goal: Match Enrolled styling (without touching it)
 * =======================================================*/

/* 1. GENERAL TABLE STYLE */
#academicHistoryCompletedCourses,
#academicHistoryWithdrawnCourses {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Remove default borders */
    border: none !important;
}

/* 2. HEADER STYLING (Corporate Maroon) */
#academicHistoryCompletedCourses thead th,
#academicHistoryWithdrawnCourses thead th {
    background-color: rgb(52, 17, 26) !important;
    color: white !important;

    /* Font styling */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Custom Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-bottom: none !important;
}

#academicHistoryCompletedCourses thead th:last-child,
#academicHistoryWithdrawnCourses thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. BODY STYLING (Zebra Striping) */
/* Odd Rows (1, 3...) -> Light Grey */
#academicHistoryCompletedCourses tbody tr:nth-of-type(odd),
#academicHistoryWithdrawnCourses tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows (2, 4...) -> White */
#academicHistoryCompletedCourses tbody tr:nth-of-type(even),
#academicHistoryWithdrawnCourses tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. CELL STYLING */
#academicHistoryCompletedCourses tbody td,
#academicHistoryWithdrawnCourses tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    font-size: 0.75rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
}

/* =======================================================
 * ACADEMIC HISTORY - IMAGE PLACEHOLDER SYSTEM
 * Design System v2026.1 | Final Master Version
 * Target: Enrolled, Completed, and Withdrawn Tables
 * Logic: ::before = Frame Box | ::after = Graduation Cap Icon
 * =======================================================*/

/* 1. HIDE DEFAULT SYSTEM IMAGES */
#academicHistoryEnrolledCourses .featuredImage,
#academicHistoryCompletedCourses .featuredImage,
#academicHistoryWithdrawnCourses .featuredImage {
    display: none !important;
}

/* 2. TABLE CELL CONTAINER */
#academicHistoryEnrolledCourses td.courseTitleImage,
#academicHistoryCompletedCourses td.courseTitleImage,
#academicHistoryWithdrawnCourses td.courseTitleImage {
    position: relative !important;
    padding-left: 120px !important;
    /* Safety space for 100px box */
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    min-height: 100px !important;
}

/* 3. THE BOX FRAME (::before)
 * SURGICAL FIX: content is empty to avoid icon collision.
 * =======================================================*/
#academicHistoryEnrolledCourses td.courseTitleImage::before,
#academicHistoryCompletedCourses td.courseTitleImage::before,
#academicHistoryWithdrawnCourses td.courseTitleImage::before {
    content: "" !important;
    /* REFACTORED BY DESIGN SYSTEM - Frame only */
    display: block !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* Box Dimensions */
    width: 100px !important;
    height: 60px !important;

    /* Box Visuals */
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    z-index: 1;
    /* Layer: Background */
}

/* 4. THE VISUAL ICON (::after)
 * SURGICAL FIX: Dedicated layer for FontAwesome Graduation Cap.
 * =======================================================*/
#academicHistoryEnrolledCourses td.courseTitleImage::after,
#academicHistoryCompletedCourses td.courseTitleImage::after,
#academicHistoryWithdrawnCourses td.courseTitleImage::after {
    content: "\f19d" !important;
    /* fa-graduation-cap */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;

    /* Dynamic Centering Logic inside Frame */
    left: 15px !important;
    /* Matches Frame Left */
    width: 100px !important;
    /* Matches Frame Width */
    height: 60px !important;
    /* Matches Frame Height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    top: 50% !important;
    transform: translateY(-50%) !important;

    /* Icon Visuals */
    font-size: 1.8rem !important;
    color: #ced4da !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
    z-index: 2;
    /* Layer: Foreground */
}

/* 5. INTERACTIVE HOVER (Row Triggered)
 * Unified feedback for both the box and the icon.
 * =======================================================*/
#academicHistoryEnrolledCourses tbody tr:hover td.courseTitleImage::before,
#academicHistoryCompletedCourses tbody tr:hover td.courseTitleImage::before,
#academicHistoryWithdrawnCourses tbody tr:hover td.courseTitleImage::before {
    background-color: #ffffff !important;
    border-color: #8b2331 !important;
    /* MacEwan Maroon */
}

#academicHistoryEnrolledCourses tbody tr:hover td.courseTitleImage::after,
#academicHistoryCompletedCourses tbody tr:hover td.courseTitleImage::after,
#academicHistoryWithdrawnCourses tbody tr:hover td.courseTitleImage::after {
    color: #8b2331 !important;
    transform: translateY(-50%) scale(1.1) !important;
    /* Icon pop effect */
}


/* ============================================================
   EL ESCUDO (SHIELD): RESET PARA PÁGINAS DE SISTEMA
   Usamos los IDs de Body que detectamos en el MRI
   ============================================================ */
#pageStudentAcademicHistory .variable-content a,
#personProfileMainContent .variable-content a,
#personProfileMainContent .form-text a {
    display: inline !important;
    /* Vuelve al párrafo */
    background-color: transparent !important;
    /* Quita el bloque maroon */
    color: #8b2331 !important;
    /* Solo color de texto */
    padding: 0 !important;
    /* Quita el padding de 20px */
    width: auto !important;
    /* Quita los 920px de ancho */
    text-decoration: underline !important;
    /* Vuelve a ser un link */
    text-transform: none !important;
    /* Quita las mayúsculas */
    font-weight: 700 !important;
}

/* =======================================================
 * COURSE TITLE STYLING
 * =======================================================*/

#academicHistoryCompletedCourses .courseCode,
#academicHistoryWithdrawnCourses .courseCode {
    font-weight: 700 !important;
    color: #8b2331 !important;
}

#academicHistoryCompletedCourses .title,
#academicHistoryWithdrawnCourses .title {
    color: #171717 !important;
    font-weight: 400 !important;
}

/* =======================================================
 * ACTION BUTTONS (Pill Style) - Completed Table
 * =======================================================*/

#academicHistoryCompletedCourses .btn {
    /* Pill Shape */
    border-radius: 50px !important;
    padding: 2px 10px !important;

    /* Colors (Base State) */
    background-color: transparent !important;
    border: 1px solid #ced4da !important;
    color: #171717 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;

    /* Flex for Icon Alignment */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-bottom: 5px !important;
    transition: all 0.3s ease !important;
}

/* Hover State */
#academicHistoryCompletedCourses .btn:hover {
    background-color: transparent !important;
    border-color: #8b2331 !important;
    color: #8b2331 !important;
}

/* =======================================================
 * BUTTON ICONS - Completed Table
 * =======================================================*/

/* Print Button (Completed) */
button[name="linkprintCompletedCourseReportModal"]::before,
button[id*="linkprintCompletedCourseReportModal"]::before {
    content: "\f02f";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #555 !important;
}

/* Force icon to match text color on hover */
#academicHistoryCompletedCourses .btn:hover::before {
    color: #8b2331 !important;
}

/* =======================================================
 * PRINT TRANSCRIPT BUTTON (Completed Tab - Primary Action)
 * =======================================================*/

#buttonPrintTranscript {
    /* Pill Shape */
    border-radius: 50px !important;
    padding: 6px 20px !important;

    /* Primary State (Maroon Background) */
    background-color: #8b2331 !important;
    border: 1px solid #8b2331 !important;
    color: #ffffff !important;
    box-shadow: none !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: all 0.3s ease !important;
}

/* Icon Injection */
#buttonPrintTranscript::before {
    content: "\f1c1";
    /* fa-file-pdf */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #ffffff !important;
}

/* Hover State */
#buttonPrintTranscript:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
    color: #ffffff !important;
}

/* Container Alignment */
.printTranscript {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* =======================================================
 * GRADE COLUMN (Completed Table)
 * =======================================================*/

#academicHistoryCompletedCourses td.grade {
    font-weight: 700 !important;
    color: #8b2331 !important;
    font-size: 0.75rem !important;
}

/* =======================================================
 * DROPPED STATUS (Dropped Table)
 * =======================================================*/

#academicHistoryWithdrawnCourses .actions span {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: #f0f0f0 !important;
    border-left: 4px solid #8b2331 !important;
    border-radius: 4px !important;
    color: #171717 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* =======================================================
 * EMPTY CELLS (Dash "-") - Completed Table
 * =======================================================*/

#academicHistoryCompletedCourses td.academicUnits,
#academicHistoryCompletedCourses td.ceUnits,
#academicHistoryCompletedCourses td.contactHours {
    text-align: center !important;
    color: #999999 !important;
}

/* =======================================================
 * CLEANUP (Hide Empty Elements)
 * =======================================================*/

#academicHistoryCompletedCourses .form-group.reviews:empty {
    display: none !important;
}

/* =======================================================
 * RESPONSIVE ADJUSTMENTS (Mobile Optimization)
 * =======================================================*/

@media (max-width: 768px) {

    /* Full-width buttons on mobile */
    #academicHistoryCompletedCourses .btn,
    #buttonPrintTranscript {
        width: 100% !important;
        display: flex !important;
        margin-bottom: 8px !important;
        padding: 10px 20px !important;
    }

    /* Adjust icon box size */
    #academicHistoryCompletedCourses td.courseTitleImage::before,
    #academicHistoryWithdrawnCourses td.courseTitleImage::before {
        width: 80px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
        left: 10px !important;
    }

    /* Reduce padding compensation */
    #academicHistoryCompletedCourses td.courseTitleImage,
    #academicHistoryWithdrawnCourses td.courseTitleImage {
        padding-left: 100px !important;
    }

    /* Center Print Transcript button */
    .printTranscript {
        justify-content: center !important;
    }
}

/* =======================================================
 * ACADEMIC HISTORY: HELP TEXT LINKS FIX
 * Problem: #contentModule1 .variable-content a makes links white
 * Solution: Ultra-specific selector for Academic History help texts
 * Design System: Maroon underlined links
 *========================================================*/

/* Target ONLY links inside Academic History help texts */
#studentEnrollmentHistory .pageHelpText .variable-content a,
#studentEnrollmentHistory .pageHelpText .variable-content-item a,
#studentEnrollmentHistory .card-body .pageHelpText a {
    /* --- Design System Link Color --- */
    color: #8b2331 !important;

    /* --- Underline --- */
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;

    /* --- Smooth Transitions --- */
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;

    /* --- Ensure visibility --- */
    opacity: 1 !important;
}

/* Hover State */
#studentEnrollmentHistory .pageHelpText .variable-content a:hover,
#studentEnrollmentHistory .pageHelpText .variable-content-item a:hover,
#studentEnrollmentHistory .card-body .pageHelpText a:hover {
    /* --- Dark Maroon on Hover --- */
    color: #34111A !important;
    text-decoration-color: #34111A !important;
}

/* Focus State (Accessibility) */
#studentEnrollmentHistory .pageHelpText .variable-content a:focus,
#studentEnrollmentHistory .pageHelpText .variable-content-item a:focus,
#studentEnrollmentHistory .card-body .pageHelpText a:focus {
    /* --- Visible focus ring --- */
    outline: 2px solid #8b2331 !important;
    outline-offset: 2px !important;
}

/* Visited State (Optional - keep same color) */
#studentEnrollmentHistory .pageHelpText .variable-content a:visited,
#studentEnrollmentHistory .pageHelpText .variable-content-item a:visited,
#studentEnrollmentHistory .card-body .pageHelpText a:visited {
    color: #8b2331 !important;
}

/* =======================================================
 * ACADEMIC HISTORY TABS (Enrolled / Completed / Dropped)
 * Design System: MacEwan Maroon + Grey
 * Pattern: Smooth transitions, Top Border accent
 * Scope: ONLY the navigation tabs, NOT the content inside
 * CRITICAL: Ultra-specific selectors to avoid overwriting table styles
 *========================================================*/

/* 1. Base Tab Style (Inactive State) - ONLY the nav links */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link {
    /* --- Background Grey for inactive --- */
    background-color: #f0f0f0 !important;

    /* --- Text Color (Grey for hierarchy) --- */
    color: #666666 !important;

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;

    /* --- Borders and Spacing --- */
    border: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    margin-right: 2px !important;
    padding: 12px 20px !important;

    /* --- Top Border (Transparent in inactive) --- */
    border-top: 3px solid transparent !important;
    padding-top: 10px !important;

    /* --- Smooth Transitions --- */
    transition: background-color 0.3s ease, color 0.3s ease, border-top-color 0.3s ease !important;

    /* --- Cursor --- */
    cursor: pointer !important;
}

/* 2. Active Tab Style (Selected State) - ONLY the active nav link */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link.active {
    /* --- White Background --- */
    background-color: #ffffff !important;

    /* --- Dark Text --- */
    color: #171717 !important;

    /* --- Maroon Top Border (Brand Color) --- */
    border-top-color: #8b2331 !important;

    /* --- Hide bottom border for seamless connection --- */
    border-bottom: 1px solid #ffffff !important;
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;

    /* --- Ensure font consistency --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* 3. Hover State (Inactive Tabs Only) - ONLY the nav links */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link:not(.active):hover {
    /* --- Lighten background slightly --- */
    background-color: #e8e8e8 !important;
}

/* 4. Tab Container - ONLY the ul.nav-tabs */
#studentEnrollmentHistory>.nav-tabs {
    /* --- Bottom border for tab bar --- */
    border-bottom: 1px solid #dee2e6 !important;
    margin-bottom: 20px !important;

    /* --- Remove default margins --- */
    padding-left: 0 !important;
}

/* 5. Mobile Optimization - ONLY the nav links */
@media (max-width: 767px) {
    #studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link {
        /* --- Smaller padding on mobile --- */
        padding: 10px 15px !important;
        font-size: 0.9rem !important;

        /* --- Stack tabs if needed --- */
        margin-right: 1px !important;
    }
}

/* 6. Focus State (Accessibility) - ONLY the nav links */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link:focus {
    /* --- Visible focus ring --- */
    /*outline: 2px solid #8b2331 !important;
    outline-offset: 2px !important;*/
}

/* 7. Tab Heading - ONLY h2.tabHeading inside studentEnrollmentHistory */
#studentEnrollmentHistory .tabHeading {
    /* --- Match brand typography --- */
    font-family: 'Montserrat', sans-serif !important;
    color: #171717 !important;
    margin-bottom: 20px !important;
}

/* ==========================================================
 * STUDENT ACADEMIC HISTORY - Email Link (NUCLEAR VERSION)
 * Maximum specificity to override any conflicting styles
 ========================================================== */

body#pageStudentAcademicHistory .pageHelpText a[href^="mailto:"] {
    color: #8b2331 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease, border-bottom 0.2s ease !important;
}

body#pageStudentAcademicHistory .pageHelpText a[href^="mailto:"]:hover,
body#pageStudentAcademicHistory .pageHelpText a[href^="mailto:"]:focus-visible {
    color: #34111a !important;
    text-decoration: underline !important;
}

body#pageStudentAcademicHistory .pageHelpText a[href^="mailto:"]:focus {

    color: #34111a !important;
}

body#pageStudentAcademicHistory .pageHelpText a[href^="mailto:"]:active {
    color: #8b2331 !important;
}


/* =======================================================
 * TAB ICONS (Font Awesome)
 * Enrolled: Book Open | Completed: Graduation Cap | Dropped: Times Circle
 *========================================================*/

/* Base styling for all tab icons */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    display: inline-block !important;
    margin-right: 8px !important;
    font-size: 1rem !important;
    vertical-align: middle !important;

    /* Inherit color from parent */
    color: inherit !important;

    /* Smooth transition */
    transition: transform 0.3s ease !important;
}

/* ENROLLED TAB - Book Open Icon */
#studentEnrollmentHistory #linkAcademicHistoryCurrent::before {
    content: "\f46d" !important;
    /* fa-book-open */
}

/* COMPLETED TAB - Graduation Cap Icon */
#studentEnrollmentHistory #linkAacademicHistoryCompleted::before {
    content: "\f058" !important;
    /* fa-graduation-cap */
}

/* DROPPED TAB - Times Circle Icon */
#studentEnrollmentHistory #linkAacademicHistoryDropped::before {
    content: "\f057" !important;
    /* fa-times-circle */
}

/* Hover effect: Slight bounce */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link:hover::before {
    transform: scale(1.1) !important;
}

/* Active state: Ensure icon inherits maroon on mobile if needed */
#studentEnrollmentHistory>.nav-tabs>.nav-item>.nav-link.active::before {
    color: inherit !important;
}

/* DO NOT TOUCH: .tab-content, .tab-pane, tables, buttons inside tabs */
/* All table styling remains untouched */


/* =======================================================
 * UNIFIED STYLING - ENROLLED, COMPLETED & DROPPED COURSES
 * Target: All three academic history tables
 * Date: Dec 2024
 * =======================================================*/

/* 1. GENERAL TABLE STYLE */
#academicHistoryEnrolledCourses,
#academicHistoryCompletedCourses,
#academicHistoryWithdrawnCourses {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Remove default borders */
    border: none !important;
}

/* 2. HEADER STYLING (Corporate Maroon) */
#academicHistoryEnrolledCourses thead th,
#academicHistoryCompletedCourses thead th,
#academicHistoryWithdrawnCourses thead th {
    background-color: rgb(52, 17, 26) !important;
    color: white !important;

    /* Font styling */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Custom Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-bottom: none !important;
}

#academicHistoryEnrolledCourses thead th:last-child,
#academicHistoryCompletedCourses thead th:last-child,
#academicHistoryWithdrawnCourses thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. BODY STYLING (Zebra Striping) */
/* Odd Rows (1, 3...) -> Light Grey */
#academicHistoryEnrolledCourses tbody tr:nth-of-type(odd),
#academicHistoryCompletedCourses tbody tr:nth-of-type(odd),
#academicHistoryWithdrawnCourses tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows (2, 4...) -> White */
#academicHistoryEnrolledCourses tbody tr:nth-of-type(even),
#academicHistoryCompletedCourses tbody tr:nth-of-type(even),
#academicHistoryWithdrawnCourses tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. CELL STYLING */
#academicHistoryEnrolledCourses tbody td,
#academicHistoryCompletedCourses tbody td,
#academicHistoryWithdrawnCourses tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    font-size: 0.75rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
}

/* =======================================================
 * IMAGE REPLACEMENT (Box + Graduation Cap Icon)
 * =======================================================*/

/* 1. Hide the original broken image */
#academicHistoryEnrolledCourses .featuredImage,
#academicHistoryCompletedCourses .featuredImage,
#academicHistoryWithdrawnCourses .featuredImage {
    display: none !important;
}

/* 2. Style the Cell to act as the container */
#academicHistoryEnrolledCourses td.courseTitleImage,
#academicHistoryCompletedCourses td.courseTitleImage,
#academicHistoryWithdrawnCourses td.courseTitleImage {
    position: relative !important;
    padding-left: 120px !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    min-height: 100px !important;
}

/* 3. Create the "Box" with the Icon using ::before */
#academicHistoryEnrolledCourses td.courseTitleImage::before,
#academicHistoryCompletedCourses td.courseTitleImage::before,
#academicHistoryWithdrawnCourses td.courseTitleImage::before {
    /* Icon (Graduation Cap) */
    content: "\f19d";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Box Styling */
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100px !important;
    height: 60px !important;

    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;

    /* Positioning */
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* Icon Style */
    font-size: 1.8rem !important;
    color: #ced4da !important;

    transition: all 0.3s ease !important;
}

/* 4. Hover Effect on the Row */
#academicHistoryEnrolledCourses tbody tr:hover td.courseTitleImage::before,
#academicHistoryCompletedCourses tbody tr:hover td.courseTitleImage::before,
#academicHistoryWithdrawnCourses tbody tr:hover td.courseTitleImage::before {
    color: #8b2331 !important;
    background-color: #fff !important;
}

/* =======================================================
 * IN PROGRESS BADGE (Completed Table)
 * Hide text with font-size:0, show badge in ::before
 * =======================================================*/

/* Keep standard cell behavior */
#academicHistoryCompletedCourses td.grade {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    font-size: 0.75rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
    text-align: center !important;
}

/* Hide the original "In Progress" text with font-size */
#academicHistoryCompletedCourses td.grade:not(:has(span)) {
    font-size: 0 !important;
    /* Makes text invisible but keeps structure */
}

/* Create the complete badge in ::before (icon + text) */
#academicHistoryCompletedCourses td.grade:not(:has(span))::before {
    /* Icon + Text */
    content: "\f252  In Progress";
    /* fa-hourglass-half */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", 'Montserrat', sans-serif;
    font-weight: 600;

    /* Badge Background */
    background-color: #3EC3A4 !important;
    color: white !important;

    /* Border Radius (Pill with one square corner) */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;

    /* Layout - SAME AS BUTTONS */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 15px 6px 12px !important;
    white-space: nowrap !important;

    /* Typography */
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    line-height: 1 !important;

    /* Vertical centering */
    vertical-align: middle !important;
}

/* Keep grade numbers styled differently */
#academicHistoryCompletedCourses td.grade:has(span) {
    font-size: 0.75rem !important;
    /* Restore font size */
}

#academicHistoryCompletedCourses td.grade span {
    font-weight: 700 !important;
    color: #8b2331 !important;
}


/* =======================================================
 * DROPPED STATUS BADGE (Dropped Table)
 * Hide redundant date, show ONLY badge
 * =======================================================*/

/* Standard cell styling */
#academicHistoryWithdrawnCourses td.actions {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    text-align: center !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
}

/* CRITICAL: Hide ALL text inside span */
#academicHistoryWithdrawnCourses td.actions span {
    font-size: 0 !important;
    color: transparent !important;

    /* Remove any old styling */
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline-block !important;
    vertical-align: middle !important;
}

/* Create badge with ONLY icon + "DROPPED" (no date) */
#academicHistoryWithdrawnCourses td.actions span::before {
    /* Icon + Text (NO DATE) */
    content: "\f057  Dropped";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", 'Montserrat', sans-serif;
    font-weight: 600;

    /* Badge Background (Red Alert) */
    background-color: #dc3545 !important;
    color: white !important;

    /* Border Radius (Pill with square corner) */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 15px 6px 12px !important;
    white-space: nowrap !important;

    /* Typography */
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    line-height: 1 !important;

    /* Vertical centering */
    vertical-align: middle !important;
}


/* =======================================================
 * SCE: CERTIFICATES COMPONENT - MASTER SHIELD (V45)
 * AUTHOR: Ricardo (Front-end Design Senior)
 * UPDATES: Asymmetric Pill, Left-Alignment, Date Integrity.
 * FIX: Parent Offset & CMS White-space Collision.
 * ======================================================= */

/* 1. PARENT NEUTRALIZATION (Alignment Fix)
   Elimina los 20px del header y los 15px de Bootstrap para alineación 0px */
#studentCertificatesContainer.card,
#studentCertificatesContainer .card-header,
#contentModule1 .col-lg-12,
#contentModule1 .row,
.table-responsive {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    background-color: transparent !important;
    overflow: visible !important;
    /* Permite que el badge flote */
}

/* 2. HEADER: Brand DNA */
#studentCertificatesHeader {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    padding-left: 12px !important;
    margin: 0 0 25px 0 !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* 3. TABLE FRAMEWORK: Zebra & Professional Spacing */
#studentCertificatesTable {
    width: 100% !important;
    margin-bottom: 2rem !important;
    border-collapse: collapse !important;
    /* Cambiado a collapse para mayor control de alineación */
}

#studentCertificatesTable thead th {
    background-color: #34111A !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 13px 18px !important;
    text-align: left !important;
}

/* 4. SORTABLE INTERACTION (Respetando tu código original) */
#studentCertificatesTable thead th.sortable a {
    color: #ffffff !important;
    text-decoration: underline !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#studentCertificatesTable thead th.sortable a::after {
    content: "\f0dc" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    opacity: 0.6 !important;
    margin-left: 8px !important;
}

#studentCertificatesTable thead th.sortable a:hover {
    color: #D41F37 !important;
    text-decoration: underline !important;
    transition: all 0.3s ease !important;
}

/* 5. THE ASYMMETRIC STATUS BADGE (V45 Evolution)
   Solución definitiva: Flotante, alineada a la izquierda y con fecha visible */
.studentCertificateStatus {
    position: relative !important;
    /* FIX: Pre-line obliga a los saltos de línea del CMS a existir */
    white-space: pre-line !important;
    padding-top: 50px !important;
    /* Aire para el badge */
    padding-left: 18px !important;
    /* Eje vertical de lectura */
    padding-bottom: 12px !important;
    text-align: left !important;
    vertical-align: top !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.72rem !important;
    color: #666666 !important;
    /* La fecha se ve clara en gris */
    line-height: 1.3 !important;
}

/* El Badge: Tu fórmula asimétrica con sombra sutil */
.studentCertificateStatus::before {
    content: "\f058  ISSUED" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", 'Montserrat' !important;
    font-weight: 900 !important;

    background-color: #3EC3A4 !important;
    color: white !important;
    border-radius: 50px 50px 50px 4px !important;

    position: absolute !important;
    top: 10px !important;
    left: 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    white-space: nowrap !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
}

/* TRUCO DE INTEGRIDAD: Borramos la palabra 'Issued' repetida pero dejamos la fecha */
.studentCertificateStatus::first-line {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 6. DATA LINKS & CELLS */
#studentCertificatesTable tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

#studentCertificatesTable tbody td:not(.studentCertificateStatus) {
    padding: 12px 18px !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    color: #171717 !important;
    vertical-align: middle !important;
}

#studentCertificatesTable tbody td a {
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}


/* =======================================================
 * SCE: MASTER PRODUCTION SHIELD (V63)
 * AUTHOR: Ricardo (Senior UI/UX Architect)
 * TECHNIQUE: The Eclipse (Transparent Text + Shadow Projection)
 * FIX: 62 Spaces, Duplicate Text, & Vertical Date Clipping.
 * ======================================================= */

/* 1. PARENT ALIGNMENT (The 0px Axis & Jailbreak)
   Aniquila el offset de 35px y libera el overflow para que nada se corte */
.certificateStreamContainer .card-header,
.certificateStreamContainer .col-12.col-sm-12,
#studentCertificatesContainer.card,
#studentCertificatesContainer .card-header,
.table-responsive {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
}

/* 2. HEADER: Brand Identity (MacEwan Maroon) */
.certificateStreamHeader,
#studentCertificatesHeader {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    padding-left: 12px !important;
    margin-bottom: 25px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* 3. STATUS COLUMN: THE ECLIPSE SURGERY
   Ocultamos la maleza y proyectamos la fecha pura */
.streamItemStatus,
.studentCertificateStatus {
    position: relative !important;
    white-space: normal !important;
    /* Colapsa los 62 espacios a 1 solo */
    padding-top: 20px !important;
    /* Espacio para el badge flotante */
    padding-left: 18px !important;
    /* Alineación 1:1 con el eje de lectura */
    padding-bottom: 15px !important;
    text-align: left !important;
    vertical-align: top !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;

    /* LA CIRUGÍA: El texto real es invisible para matar la duplicidad,
       pero la sombra proyecta la fecha limpia 18px abajo. */
    color: transparent !important;
    text-shadow: 0 18px 0 #666666 !important;
}

/* 4. EL BADGE ASIMÉTRICO (The Signature Piece) */

/* Base común del diseño asimétrico de Ricardo */
.streamItemStatus::before,
.studentCertificateStatus::before {
    font-family: "Font Awesome 5 Free", "FontAwesome", 'Montserrat' !important;
    font-weight: 700 !important;
    background-color: #28a745 !important;
    /* Verde Ricardo Premium */
    color: white !important;
    border-radius: 50px !important;
    position: absolute !important;
    top: 10px !important;
    left: 15px !important;
    /* Alineado al eje visual */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    white-space: nowrap !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    z-index: 20 !important;
    text-shadow: none !important;
    /* Evita que el badge se duplique */
}

/* Contenido inteligente por tabla */
.streamItemStatus::before {
    content: "\f058  COMPLETED" !important;
}

.studentCertificateStatus::before {
    content: "\f058  ISSUED" !important;
}

/* 5. TABLE STRUCTURE: Zebra & Sortable Icons */
#certificateStreamItemsTable_0,
#studentCertificatesTable {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
}

thead th {
    background-color: #34111A !important;
    color: #ffffff !important;
    text-align: left !important;
    padding: 14px 18px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Mantener los iconos de ordenamiento que ya funcionan */
thead th.sortable a {
    color: #ffffff !important;
    text-decoration: underline !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

thead th.sortable a::after {
    content: "\f0dc" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    opacity: 0.6 !important;
    margin-left: 8px !important;
}

tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}

/* 6. DATA LINKS & TYPOGRAPHY */


.streamItemCourse .title {
    font-weight: 500 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* 1. Código del Curso: El "Look" Institucional */
#mainContent #certificateStreamItemsTable_0 .courseCode {
    color: #8b2331 !important;
    /* Maroon MacEwan */
    font-weight: 700 !important;
    /* Negrita absoluta */
    margin-right: 5px !important;
    font-size: 0.75rem !important;
    display: inline !important;
}

/* 2. Separador y Título: Contraste y Limpieza */
#mainContent #certificateStreamItemsTable_0 .nameAndCodeSeparator {
    color: #171717 !important;
    font-weight: 400 !important;
}

#mainContent #certificateStreamItemsTable_0 .title {
    color: #171717 !important;
    /* Gris oscuro */
    font-weight: 500 !important;
    /* Peso medio para el nombre */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    text-transform: none !important;
}

/* 3. Estructura de la Fila (Densidad SCE) */
#certificateStreamItemsTable_0 tbody tr td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #dee2e6 !important;
    background-color: transparent !important;
    /* Mantiene el rayado original */
}

/* 4. Hover: Mejora de Experiencia (Opcional) */
#certificateStreamItemsTable_0 tbody tr:hover {
    background-color: rgba(139, 35, 49, 0.05) !important;
    /* Sutil rastro Maroon */
    transition: background-color 0.2s ease !important;
}

/* 3. COLUMNA 2: JERARQUÍA DE FECHAS Y SECCIÓN */
#certificateStreamItemsTable_0 .enrolledDate {
    display: block !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: #171717 !important;
    font-size: 0.75rem !important;
}

#certificateStreamItemsTable_0 .inEnrolledSection {
    display: block !important;
    margin: 0 !important;
    font-size: 0.7rem !important;
    color: #6c757d !important;
    font-style: italic !important;
}

/* Resalte maroon para el código de sección dentro de la fecha */
#certificateStreamItemsTable_0 .inEnrolledSection .courseTitle {
    color: #8b2331 !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* 4. AJUSTES DE DENSIDAD DE CELDA */
#certificateStreamItemsTable_0 td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 0.75rem !important;
}

/* 1. EFECTO CEBRA (RITMO VISUAL) */
#certificateStreamItemsTable_0 tbody tr:nth-child(odd) {
    background-color: #F0F0F0 !important;
    /* Gris institucional detectado */
}

#certificateStreamItemsTable_0 tbody tr:nth-child(even) {
    background-color: #FFFFFF !important;
}

/* =======================================================
 * TRANSACTIONS TABLE (Unified Design System)
 * Target: #studentAccountHistoryTable
 * Match: Academic History tables styling
 * =======================================================*/

/* 1. GENERAL TABLE STYLE */
#studentAccountHistoryTable {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Remove default borders */
    border: none !important;
}

/* 2. HEADER STYLING (Corporate Maroon) */
#studentAccountHistoryTable thead th {
    background-color: rgb(52, 17, 26) !important;
    color: white !important;

    /* Font styling */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Custom Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-bottom: none !important;
}

#studentAccountHistoryTable thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. BODY STYLING (Zebra Striping) */
/* Odd Rows (1, 3...) -> Light Grey */
#studentAccountHistoryTable tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows (2, 4...) -> White */
#studentAccountHistoryTable tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. CELL STYLING */
#studentAccountHistoryTable tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    font-size: 0.75rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
}

/* 5. LINKS (Transaction Numbers) */
#studentAccountHistoryTable tbody td a {
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    transition: color 0.3s, text-decoration-color 0.3s !important;
}

#studentAccountHistoryTable tbody td a:hover {
    color: #34111a !important;
    text-decoration-color: #34111a !important;
}

/* =======================================================
 * PRINT RECEIPT BUTTONS (Pill Style Match)
 * =======================================================*/

#studentAccountHistoryTable button[name^="buttonPrintReceipt"] {
    /* Pill Shape */
    border-radius: 50px !important;
    padding: 2px 10px !important;

    /* Colors (Base State) */
    background-color: transparent !important;
    border: 1px solid #ced4da !important;
    color: #171717 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;

    transition: all 0.3s ease !important;
}

/* Icon Injection (Printer) */
#studentAccountHistoryTable button[name^="buttonPrintReceipt"]::before {
    content: "\f02f";
    /* fa-print */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #555 !important;
}

/* Hover State (Maroon Brand) */
#studentAccountHistoryTable button[name^="buttonPrintReceipt"]:hover {
    background-color: transparent !important;
    border-color: #8b2331 !important;
    color: #8b2331 !important;
}

/* Icon changes color on hover */
#studentAccountHistoryTable button[name^="buttonPrintReceipt"]:hover::before {
    color: #8b2331 !important;
}

/* =======================================================
 * CARD HEADER (Transactions Title)
 * =======================================================*/

#studentAccountHistoryContainer .card-header {
    background-color: #fff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 20px !important;
}

#studentAccountHistoryContainer .card-title {
    font-family: 'Montserrat', sans-serif !important;
    color: #34111A !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
}

/* =======================================================
 * HELP TEXT (Light Highlight Standard)
 * =======================================================*/

#studentAccountHistoryContainer .pageHelpText {
    /* Light Highlight Background */
    background-color: #f0f0f0 !important;

    /* Thick Left Border (Maroon) */
    border-left: 0.4rem solid #8b2331 !important;

    /* Remove other borders/radius */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #171717 !important;
}

/* =======================================================
 * RESPONSIVE ADJUSTMENTS (Mobile)
 * =======================================================*/

@media (max-width: 768px) {

    /* Full-width buttons on mobile */
    #studentAccountHistoryTable button[name^="buttonPrintReceipt"] {
        width: 100% !important;
        display: flex !important;
        padding: 10px 20px !important;
    }
}

/* =======================================================
 * TRANSACTION NUMBER LINKS WITH ICON
 * Add invoice icon before transaction number
 * =======================================================*/

/* Transaction number links (already styled above) */
#studentAccountHistoryTable .studentAccountHistoryBasketNo a {
    /* Inherit link styles from section 5 */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Inject invoice icon before transaction number */
#studentAccountHistoryTable .studentAccountHistoryBasketNo a::before {
    content: "\f570";
    /* fa-file-invoice */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    font-size: 0.85rem !important;
    color: #8b2331 !important;
    transition: color 0.3s ease !important;
}

/* Icon color on hover */
#studentAccountHistoryTable .studentAccountHistoryBasketNo a:hover::before {
    color: #34111a !important;
}

/* =======================================================
 * MOBILE OPTIMIZATION - Show Critical Columns
 * Override d-none d-lg-table-cell for essential data
 * =======================================================*/

@media (max-width: 991px) {

    /* Force show Amount column (column 3) - CRITICAL */
    #studentAccountHistoryTable thead th:nth-child(3),
    #studentAccountHistoryTable tbody td:nth-child(3) {
        display: table-cell !important;
    }

    /* Force show Balance Due column (column 6) - CRITICAL */
    #studentAccountHistoryTable thead th:nth-child(6),
    #studentAccountHistoryTable tbody td:nth-child(6) {
        display: table-cell !important;
    }

    /* Force show Print Receipt column (column 7) - ACTION */
    #studentAccountHistoryTable thead th:nth-child(7),
    #studentAccountHistoryTable tbody td:nth-child(7) {
        display: table-cell !important;
    }

    /* Adjust header font for mobile readability */
    #studentAccountHistoryTable thead th {
        font-size: 0.55rem !important;
        padding: 10px 8px !important;
    }

    /* Adjust cell padding for mobile */
    #studentAccountHistoryTable tbody td {
        padding: 10px 8px !important;
        font-size: 0.7rem !important;
    }

    /* Make transaction numbers more prominent */
    #studentAccountHistoryTable .studentAccountHistoryBasketNo a {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }

    /* Full-width Print Receipt buttons */
    #studentAccountHistoryTable button[name^="buttonPrintReceipt"] {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 0.65rem !important;
    }
}

/* Extra small screens - Stack more aggressively */
@media (max-width: 576px) {
    #studentAccountHistoryTable thead th {
        font-size: 0.5rem !important;
        padding: 8px 5px !important;
    }

    #studentAccountHistoryTable tbody td {
        padding: 8px 5px !important;
        font-size: 0.65rem !important;
    }

    /* Reduce icon size */
    #studentAccountHistoryTable .studentAccountHistoryBasketNo a::before {
        font-size: 0.7rem !important;
    }
}


/* =======================================================
 * COURSE TITLE STYLING
 * =======================================================*/

#academicHistoryEnrolledCourses .courseCode,
#academicHistoryCompletedCourses .courseCode,
#academicHistoryWithdrawnCourses .courseCode {
    font-weight: 700 !important;
    color: #8b2331 !important;
}

#academicHistoryEnrolledCourses .title,
#academicHistoryCompletedCourses .title,
#academicHistoryWithdrawnCourses .title {
    color: #171717 !important;
    font-weight: 400 !important;
}

/* =======================================================
 * ACTION BUTTONS (Pill Style) - All Tables
 * =======================================================*/

#academicHistoryEnrolledCourses .btn,
#academicHistoryCompletedCourses .btn,
#academicHistoryWithdrawnCourses .btn {
    /* Pill Shape */
    border-radius: 50px !important;
    padding: 2px 10px !important;

    /* Colors (Base State) */
    background-color: transparent !important;
    border: 1px solid #ced4da !important;
    color: #171717 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;

    /* Flex for Icon Alignment */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-bottom: 5px !important;
    transition: all 0.3s ease !important;
}

/* Hover State */
#academicHistoryEnrolledCourses .btn:hover,
#academicHistoryCompletedCourses .btn:hover,
#academicHistoryWithdrawnCourses .btn:hover {
    background-color: transparent !important;
    border-color: #8b2331 !important;
    color: #8b2331 !important;
}

/* =======================================================
 * BUTTON ICONS
 * =======================================================*/

/* Request Drop Button (Enrolled) */
button[name="buttonRequestDrop"]::before {
    content: "\f057";
    /* fa-times-circle */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #171717 !important;
}

/* Request Transfer Button (Enrolled) */
button[name="buttonRequestTransfer"]::before {
    content: "\f362";
    /* fa-exchange-alt */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #555 !important;
}

/* Print Button (Enrolled) */
button[name="linkprintCurrentCourseReportModal"]::before {
    content: "\f02f";
    /* fa-print */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #555 !important;
}

/* Print Button (Completed) */
button[name="linkprintCompletedCourseReportModal"]::before,
button[id*="linkprintCompletedCourseReportModal"]::before {
    content: "\f02f";
    /* fa-print */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #555 !important;
}

/* Force icon to match text color on hover */
#academicHistoryEnrolledCourses .btn:hover::before,
#academicHistoryCompletedCourses .btn:hover::before,
#academicHistoryWithdrawnCourses .btn:hover::before {
    color: #8b2331 !important;
}

/* =======================================================
 * PRINT TRANSCRIPT BUTTON (Completed Tab - Primary Action)
 * =======================================================*/

#buttonPrintTranscript {
    /* Pill Shape */
    border-radius: 50px !important;
    padding: 6px 20px !important;

    /* Primary State (Maroon Background) */
    background-color: #8b2331 !important;
    border: 1px solid #8b2331 !important;
    color: #ffffff !important;
    box-shadow: none !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: all 0.3s ease !important;
}

/* Icon Injection */
#buttonPrintTranscript::before {
    content: "\f1c1";
    /* fa-file-pdf */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: #ffffff !important;
}

/* Hover State */
#buttonPrintTranscript:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
    color: #ffffff !important;
}

/* Container Alignment */
.printTranscript {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* =======================================================
 * GRADE COLUMN (Completed Table)
 * =======================================================*/

#academicHistoryCompletedCourses td.grade {
    font-weight: 700 !important;
    color: #8b2331 !important;
    font-size: 0.75rem !important;
}

/* =======================================================
 * DROPPED STATUS (Dropped Table)
 * =======================================================*/

#academicHistoryWithdrawnCourses .actions span {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: #f0f0f0 !important;
    border-left: 4px solid #8b2331 !important;
    border-radius: 4px !important;
    color: #171717 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* =======================================================
 * DEADLINE INFO ICON (Dropped Table)
 * =======================================================*/

#academicHistoryWithdrawnCourses .actions i.fa-info-circle {
    color: #8b2331 !important;
    margin-left: 8px !important;
    cursor: help !important;
    transition: transform 0.2s ease !important;
}

#academicHistoryWithdrawnCourses .actions i.fa-info-circle:hover {
    transform: scale(1.15) !important;
}

/* =======================================================
 * EMPTY CELLS (Dash "-") - Completed Table
 * =======================================================*/

#academicHistoryCompletedCourses td.academicUnits,
#academicHistoryCompletedCourses td.ceUnits,
#academicHistoryCompletedCourses td.contactHours {
    text-align: center !important;
    color: #999999 !important;
}

/* =======================================================
 * HELP TEXT BLOCKS
 * =======================================================
 * Purpose: Style variable content blocks in Academic History
 * Target: My Enrollment History page tabs
 * Updated: 2026-01-14 - Added empty state handling
 * =======================================================*/

/* =======================================================
 * EMPTY STATE HANDLING (CRITICAL - MUST BE FIRST)
 * Hide empty pageHelpText containers before styling
 * =======================================================*/

/* Method 1: CSS :empty pseudo-class */
#studentEnrolledCoursesContainer .pageHelpText:empty,
#studentCompletedCoursesContainer .pageHelpText:empty,
#studentDroppedCoursesContainer .pageHelpText:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    background: none !important;
    visibility: hidden !important;
}

/* Method 2: Modern browsers - Hide if no .variable-content-item exists */
#studentEnrolledCoursesContainer .pageHelpText:not(:has(.variable-content-item)),
#studentCompletedCoursesContainer .pageHelpText:not(:has(.variable-content-item)),
#studentDroppedCoursesContainer .pageHelpText:not(:has(.variable-content-item)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    background: none !important;
    visibility: hidden !important;
}

/* Method 3: Hide if only contains empty JSP tags */
#studentEnrolledCoursesContainer .pageHelpText:has(> srs\:variablecontentbyitemcodes:only-child):not(:has(.variable-content-item)),
#studentCompletedCoursesContainer .pageHelpText:has(> srs\:variablecontentbyitemcodes:only-child):not(:has(.variable-content-item)),
#studentDroppedCoursesContainer .pageHelpText:has(> srs\:variablecontentbyitemcodes:only-child):not(:has(.variable-content-item)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    background: none !important;
    visibility: hidden !important;
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
    .pageHelpText:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }
}

/* =======================================================
 * HELP TEXT BLOCKS (Light Highlight Standard)
 * ONLY APPLIED WHEN CONTENT EXISTS
 * Match: .highlight-light design system
 * =======================================================*/

/* Base styling - Only applies when content is present */
#studentEnrolledCoursesContainer .pageHelpText:has(.variable-content-item),
#studentCompletedCoursesContainer .pageHelpText:has(.variable-content-item),
#studentDroppedCoursesContainer .pageHelpText:has(.variable-content-item) {
    /* Light Highlight Background */
    background-color: #f0f0f0 !important;

    /* Thick Left Border (Maroon) */
    border-left: 0.4rem solid #8b2331 !important;

    /* Remove other borders/radius */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #171717 !important;

    /* Ensure visibility */
    display: block !important;
    visibility: visible !important;
}

/* Fallback for browsers without :has() - Apply to non-empty only */
@supports not (selector(:has(*))) {

    #studentEnrolledCoursesContainer .pageHelpText:not(:empty),
    #studentCompletedCoursesContainer .pageHelpText:not(:empty),
    #studentDroppedCoursesContainer .pageHelpText:not(:empty) {
        background-color: #f0f0f0 !important;
        border-left: 0.4rem solid #8b2331 !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        padding: 2.1rem 2rem !important;
        margin: 1.5rem 0 2rem 0 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        color: #171717 !important;
        display: block !important;
    }
}

/* =======================================================
 * TITLE STYLING
 * Applied when CMS adds <p class="highlight-title">
 * =======================================================*/

#studentEnrolledCoursesContainer .pageHelpText .highlight-title,
#studentCompletedCoursesContainer .pageHelpText .highlight-title,
#studentDroppedCoursesContainer .pageHelpText .highlight-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
    color: #8b2331 !important;
    margin: 0 0 1rem 0 !important;
    margin-top: -0.2rem !important;
}

/* =======================================================
 * PARAGRAPH STYLING
 * =======================================================*/

/* Paragraphs inside help text */
#studentEnrolledCoursesContainer .pageHelpText p,
#studentCompletedCoursesContainer .pageHelpText p,
#studentDroppedCoursesContainer .pageHelpText p {
    margin-bottom: 1rem !important;
}

/* Remove bottom margin from last paragraph */
#studentEnrolledCoursesContainer .pageHelpText p:last-child,
#studentCompletedCoursesContainer .pageHelpText p:last-child,
#studentDroppedCoursesContainer .pageHelpText p:last-child {
    margin-bottom: 0 !important;
}

/* =======================================================
 * BOLD TEXT STYLING
 * =======================================================*/

#studentEnrolledCoursesContainer .pageHelpText b,
#studentEnrolledCoursesContainer .pageHelpText strong,
#studentCompletedCoursesContainer .pageHelpText b,
#studentCompletedCoursesContainer .pageHelpText strong,
#studentDroppedCoursesContainer .pageHelpText b,
#studentDroppedCoursesContainer .pageHelpText strong {
    color: #8b2331 !important;
    font-weight: 600 !important;
}

/* =======================================================
 * ACCESSIBILITY ENHANCEMENTS
 * Ensure screen readers skip empty containers
 * =======================================================*/

#studentEnrolledCoursesContainer .pageHelpText:empty,
#studentCompletedCoursesContainer .pageHelpText:empty,
#studentDroppedCoursesContainer .pageHelpText:empty,
#studentEnrolledCoursesContainer .pageHelpText:not(:has(.variable-content-item)),
#studentCompletedCoursesContainer .pageHelpText:not(:has(.variable-content-item)),
#studentDroppedCoursesContainer .pageHelpText:not(:has(.variable-content-item)) {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* =======================================================
 * ADDITIONAL CLEANUP
 * Hide other empty elements in Academic History
 * =======================================================*/

/* Hide empty review containers */
#academicHistoryEnrolledCourses .form-group.reviews:empty,
#academicHistoryCompletedCourses .form-group.reviews:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =======================================================
 * FUTURE-PROOFING
 * Generic protection for variable content blocks sitewide
 * =======================================================*/

/* Hide any pageHelpText with only JSP tags */
.pageHelpText:has(srs\:variablecontentbyitemcodes:only-child):not(:has(.variable-content-item)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Ensure dynamically loaded content becomes visible */
.pageHelpText[data-mc-hidden="false"] {
    display: block !important;
    visibility: visible !important;
}

/* =======================================================
 * END HELP TEXT BLOCKS
 * =======================================================*/

/* =======================================================
 * RESPONSIVE ADJUSTMENTS (Mobile Optimization)
 * Surgical Fix: Resolved Icon Collision (\f19d duplicity)
 * Path: Academic History - Mobile Grid View
 * =======================================================*/

@media (max-width: 768px) {

    /* 1. THE BOX (GRAY CONTAINER) */
    /* Force empty content so it acts strictly as a background frame */
    #academicHistoryEnrolledCourses td.courseTitleImage::before,
    #academicHistoryCompletedCourses td.courseTitleImage::before,
    #academicHistoryWithdrawnCourses td.courseTitleImage::before {
        content: "" !important;
        /* REFACTORED: Removes the duplicate icon */
        width: 80px !important;
        height: 50px !important;
        left: 10px !important;
        background-color: #f9f9f9 !important;
    }

    /* 2. THE ACTUAL ICON (GRADUATION CAP) */
    /* Adjust actual icon dimensions to fit precisely inside the new box */
    #academicHistoryEnrolledCourses td.courseTitleImage::after,
    #academicHistoryCompletedCourses td.courseTitleImage::after,
    #academicHistoryWithdrawnCourses td.courseTitleImage::after {
        content: "\f19d" !important;
        width: 80px !important;
        /* Must match box width */
        height: 50px !important;
        /* Must match box height */
        left: 10px !important;
        /* Alignment identical to the box */
        font-size: 1.4rem !important;
        /* Fine detail: proportional icon size */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. CELL ADJUSTMENT */
    #academicHistoryEnrolledCourses td.courseTitleImage,
    #academicHistoryCompletedCourses td.courseTitleImage,
    #academicHistoryWithdrawnCourses td.courseTitleImage {
        padding-left: 100px !important;
        /* Safety space for text to avoid overlap */
    }

    /* Maintain the rest of your button styles (btn, print, etc.) as they are... */
}

/* =======================================================
 * SAVED FOR LATER (Absolute Icon Fix)
 * Issue: Underline bleeding into the icon.
 * Fix: Use absolute positioning to remove icon from text flow.
 * =======================================================*/

/* 1. THE CONTAINER (Text "You also have") */
div.cartViewSavedForLater {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #34111A !important;

    margin-top: 15px !important;
    margin-bottom: 20px !important;

    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 2. THE LINK (The Bubble) */
div.cartViewSavedForLater a {
    /* POSITIONING (Vital for fix) */
    position: relative !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;

    /* Bubble Styles */
    background-color: #E9E5E5 !important;
    border: 1px solid #dcdcdc !important;

    /* Forma */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;

    /* CORRECTED SPACING */
    /* Give more left space (36px) to fit absolute icon */
    padding: 6px 15px 6px 36px !important;
    margin-left: 8px !important;

    /* Typography & Underline */
    font-weight: 700 !important;
    color: #8b2331 !important;

    /* Underline will live here, but icon will be "out" of reach */
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;

    transition: all 0.3s ease !important;
}

/* 3. THE ICON (Absolute Heart) */
div.cartViewSavedForLater a::before {
    content: "\f02e";
    /* fa-heart */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* ABSOLUTE POSITIONING (The Fix) */
    position: absolute !important;
    left: 12px !important;
    /* Placed in the gap created by padding */
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Perfect vertical centering */

    color: #8b2331 !important;
    font-size: 1rem !important;

    /* Ensure no decoration */
    text-decoration: none !important;
    border: none !important;
}

/* 4. HOVER STATE (Link Completo) */
div.cartViewSavedForLater a:hover {
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 35, 49, 0.2) !important;
}

/* 5. HOVER STATE (Specific Icon) */
/* Icon reacts to parent hover */
div.cartViewSavedForLater a:hover::before {
    color: #ffffff !important;
}

/* =======================================================
 * PROFILE EDIT/DELETE BUTTONS (Pill Style Match)
 * Target: Edit/Delete buttons in Profile Summary form.
 * Goal: Match appearance of Shopping Cart "Remove" pills.
 * Updated: 2026-01-15 - FIXED ::before icons in mobile
 * =======================================================*/

/* =====================================================
 * PILL BASE STYLE - ALL CONTEXTS
 * =====================================================*/

.buttonEditEmail,
.buttonDeleteEmail,
.buttonEditAddress,
.buttonDeleteAddress,
.buttonEditTelephone,
.buttonDeleteTelephone {
    /* Layout Flexible */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* RESET BOOTSTRAP */
    background-color: #ffffff !important;
    box-shadow: none !important;
    background-image: none !important;

    /* PILL SHAPE */
    border-radius: 2rem !important;
    padding: 2px 12px !important;

    /* VISUAL STYLE */
    border: 1px solid #ced4da !important;
    color: #555 !important;

    /* TYPOGRAPHY */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: none !important;
    text-decoration: none !important;

    /* Spacing */
    margin-left: 8px !important;
    margin-bottom: 5px !important;

    /* Prevent collapse */
    min-width: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;

    /* Transition */
    transition: all 0.3s ease !important;
}

/* =====================================================
 * ICONS (FontAwesome) - CRITICAL FIX
 * Must override even in .custom-control-label context
 * =====================================================*/

/* Edit buttons - Pencil Icon */
.buttonEditEmail::before,
.buttonEditAddress::before,
.buttonEditTelephone::before,
.custom-control-label .buttonEditEmail::before,
.custom-control-label .buttonEditAddress::before,
.custom-control-label .buttonEditTelephone::before {
    content: "\f303" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
    font-size: 0.9rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* Delete buttons - Trash Icon */
.buttonDeleteEmail::before,
.buttonDeleteAddress::before,
.buttonDeleteTelephone::before,
.custom-control-label .buttonDeleteEmail::before,
.custom-control-label .buttonDeleteAddress::before,
.custom-control-label .buttonDeleteTelephone::before {
    content: "\f2ed" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
    font-size: 0.9rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* =====================================================
 * HOVER STATES
 * =====================================================*/

.buttonEditEmail:hover,
.buttonEditAddress:hover,
.buttonEditTelephone:hover {
    background-color: #fff !important;
    border-color: #34111A !important;
    color: #34111A !important;
}

.buttonDeleteEmail:hover,
.buttonDeleteAddress:hover,
.buttonDeleteTelephone:hover {
    background-color: #fff !important;
    border-color: #8b2331 !important;
    color: #8b2331 !important;
}

/* =======================================================
 * ADD / SAVE ACTION BUTTONS (Pill Style)
 * Target: #buttonAddEmail, #buttonAddTelephone, etc.
 * Updated: 2026-01-15 - Fixed mobile collapse + responsive
 * =======================================================*/

/* =====================================================
 * BASE STYLES - ALL VIEWPORTS
 * ===================================================== */

#buttonAddEmail,
#buttonAddTelephone,
#buttonAddAddress,
#buttonChangeCredentials {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Visual Reset */
    background-color: #ffffff !important;
    box-shadow: none !important;
    background-image: none !important;

    /* Pill Shape */
    border-radius: 50px !important;
    border: 1px solid #ced4da !important;

    /* Colors */
    color: #555 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.4 !important;

    /* Spacing - Desktop default */
    padding: 14px 20px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;

    /* Prevent collapse */
    min-height: 44px !important;
    white-space: nowrap !important;
    overflow: visible !important;

    /* Interaction */
    transition: all 0.3s ease !important;
    cursor: pointer !important;

    /* Ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================================================
 * ICONS (FontAwesome)
 * ===================================================== */

/* Plus icon for Add buttons */
#buttonAddEmail::before,
#buttonAddTelephone::before,
#buttonAddAddress::before {
    content: "\f067" !important;
    /* fa-plus */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* Key icon for Change Credentials */
#buttonChangeCredentials::before {
    content: "\f084" !important;
    /* fa-key */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* =====================================================
 * HOVER & ACTIVE STATES
 * ===================================================== */

/* Hover - MacEwan Red */
#buttonAddEmail:hover,
#buttonAddTelephone:hover,
#buttonAddAddress:hover,
#buttonChangeCredentials:hover {
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Active/Click - Press effect */
#buttonAddEmail:active,
#buttonAddTelephone:active,
#buttonAddAddress:active,
#buttonChangeCredentials:active {
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    color: #fff !important;
    transform: translateY(1px) !important;
    box-shadow: none !important;
}

/* Focus - Accessibility */
#buttonAddEmail:focus,
#buttonAddTelephone:focus,
#buttonAddAddress:focus,
#buttonChangeCredentials:focus {
    border: 1px solid #555 !important;
    outline-offset: 2px !important;
    z-index: 1 !important;
}

/* =====================================================
 * RESPONSIVE DESIGN
 * ===================================================== */

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {

    #buttonAddEmail,
    #buttonAddTelephone,
    #buttonAddAddress,
    #buttonChangeCredentials {
        padding: 12px 18px !important;
        font-size: 0.8rem !important;
        min-height: 44px !important;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {

    #buttonAddEmail,
    #buttonAddTelephone,
    #buttonAddAddress,
    #buttonChangeCredentials {
        padding: 12px 16px !important;
        font-size: 0.8rem !important;
        width: 100% !important;
        max-width: 350px !important;
        min-height: 44px !important;
    }
}

/* Mobile Portrait (< 576px) - CRITICAL FIX */
@media (max-width: 575px) {

    #buttonAddEmail,
    #buttonAddTelephone,
    #buttonAddAddress,
    #buttonChangeCredentials {
        /* Full width on mobile */
        width: 100% !important;
        max-width: 100% !important;

        /* Force proper dimensions */
        min-height: 48px !important;
        height: auto !important;

        /* Comfortable padding */
        padding: 14px 16px !important;

        /* Ensure content displays */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* Typography */
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;

        /* Force visibility */
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Ensure background */
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
    }

    /* Force icon visibility on mobile */
    #buttonAddEmail::before,
    #buttonAddTelephone::before,
    #buttonAddAddress::before,
    #buttonChangeCredentials::before {
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin-right: 6px !important;
        font-size: 0.85rem !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Extra small devices (< 400px) */
@media (max-width: 399px) {

    #buttonAddEmail,
    #buttonAddTelephone,
    #buttonAddAddress,
    #buttonChangeCredentials {
        padding: 12px 14px !important;
        font-size: 0.75rem !important;
        min-height: 48px !important;
    }

    #buttonAddEmail::before,
    #buttonAddTelephone::before,
    #buttonAddAddress::before,
    #buttonChangeCredentials::before {
        font-size: 0.8rem !important;
        margin-right: 5px !important;
    }
}



/* =====================================================
 * BUTTON CONTAINER LAYOUT
 * =====================================================*/

.custom-control-label {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.custom-control-label .email,
.custom-control-label .address,
.custom-control-label .telephone {
    display: inline-block !important;
    margin-right: 0.75rem !important;
    flex: 0 1 auto !important;
    word-break: break-word !important;
}

/* Context-specific overrides */
.custom-control-label .buttonEditEmail,
.custom-control-label .buttonDeleteEmail,
.custom-control-label .buttonEditAddress,
.custom-control-label .buttonDeleteAddress,
.custom-control-label .buttonEditTelephone,
.custom-control-label .buttonDeleteTelephone {
    /* PRESERVE WHITE PILLS */
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #555 !important;
    border-radius: 2rem !important;
    padding: 2px 12px !important;

    /* Layout */
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;

    /* Spacing */
    margin-left: 8px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;

    /* Touch target */
    min-width: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
}

/* First button - no left margin */
.custom-control-label .buttonEditEmail,
.custom-control-label .buttonEditAddress,
.custom-control-label .buttonEditTelephone {
    margin-left: 0 !important;
}

/* =====================================================
 * MOBILE: FULL WIDTH PILLS
 * =====================================================*/

@media (max-width: 575px) {
    .custom-control-label {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .custom-control-label .email,
    .custom-control-label .address,
    .custom-control-label .telephone {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
        transition: all 0.3s ease !important;
    }

    .custom-control-label .buttonEditEmail,
    .custom-control-label .buttonDeleteEmail,
    .custom-control-label .buttonEditAddress,
    .custom-control-label .buttonDeleteAddress,
    .custom-control-label .buttonEditTelephone,
    .custom-control-label .buttonDeleteTelephone {
        /* PRESERVE WHITE PILLS */
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #555 !important;
        border-radius: 50px !important;

        /* Full width */
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;

        /* Reset spacing */
        margin: 0 !important;

        /* Center */
        justify-content: center !important;

        /* Larger touch target */
        min-height: 48px !important;
        padding: 6px 20px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }
}

/* =====================================================
 * TABLET
 * =====================================================*/

@media (min-width: 576px) and (max-width: 991px) {
    .custom-control-label {
        gap: 0.75rem !important;
    }

    .custom-control-label .buttonDeleteEmail,
    .custom-control-label .buttonDeleteAddress,
    .custom-control-label .buttonDeleteTelephone {
        margin-left: 12px !important;
    }
}

/* =====================================================
 * ACCESSIBILITY
 * =====================================================*/

.custom-control-label .buttonEditEmail:focus,
.custom-control-label .buttonDeleteEmail:focus,
.custom-control-label .buttonEditAddress:focus,
.custom-control-label .buttonDeleteAddress:focus,
.custom-control-label .buttonEditTelephone:focus,
.custom-control-label .buttonDeleteTelephone:focus {
    color: #8B2331 !important;
    border: 2px solid #8B2331 !important;
    z-index: 1 !important;
}

.custom-control-label .buttonEditEmail:hover,
.custom-control-label .buttonDeleteEmail:hover,
.custom-control-label .buttonEditAddress:hover,
.custom-control-label .buttonDeleteAddress:hover,
.custom-control-label .buttonEditTelephone:hover,
.custom-control-label .buttonDeleteTelephone:hover {
    color: #8B2331 !important;
    border: 1px solid #8B2331 !important;
    transform: translateY(-1px) !important;
}

/* =====================================================
 * PREVENT OVERWRITES - MAXIMUM SPECIFICITY
 * =====================================================*/

label.custom-control-label>span>.buttonEditEmail,
label.custom-control-label>span>.buttonDeleteEmail,
label.custom-control-label>span>.buttonEditAddress,
label.custom-control-label>span>.buttonDeleteAddress,
label.custom-control-label>span>.buttonEditTelephone,
label.custom-control-label>span>.buttonDeleteTelephone {
    background-color: #ffffff !important;
    display: inline-flex !important;
}

@media (max-width: 575px) {

    label.custom-control-label>span>.buttonEditEmail,
    label.custom-control-label>span>.buttonDeleteEmail,
    label.custom-control-label>span>.buttonEditAddress,
    label.custom-control-label>span>.buttonDeleteAddress,
    label.custom-control-label>span>.buttonEditTelephone,
    label.custom-control-label>span>.buttonDeleteTelephone {
        display: flex !important;
        width: 100% !important;
    }
}

/* =====================================================
 * END BUTTON STYLING
 * =====================================================*/

/* ================================================
   SCE HELP & SUPPORT - CSS-ONLY ACCORDION
   Design System: IconText Layout + Equal Heights
   NUCLEAR SPECIFICITY - Overrides #mainContent
   Zero JavaScript Required
   ================================================ */

/* CSS Variables */
:root {
    --icontext-color-border: #e9ecef;
    --site-color-bg: #ffffff;
    --button-color-dark-bg: #8b2331;
    --button-color-fg: #ffffff;
}

/* Wrapper */
#mainContent .sce-help-support-wrapper {
    padding: 48px 20px !important;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 20%) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* ===== HEADER SECTION ===== */
#mainContent .sce-help-support-wrapper .sce-help-header {
    text-align: center !important;
    margin-bottom: 48px !important;
}

/* H2 - Help & Support */
#mainContent .sce-help-support-wrapper .sce-help-header h2.sce-help-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #171717 !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

/* Subtitle Paragraph */
#mainContent .sce-help-support-wrapper .sce-help-header p.sce-help-subtitle {
    font-size: 1.125rem !important;
    color: #171717 !important;
    margin-bottom: 32px !important;
    line-height: 1.6 !important;
}

/* H3 - What do you need help with today? */
#mainContent .sce-help-support-wrapper .sce-help-header h3.sce-help-question {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin-bottom: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

/* ===== CARDS GRID - EQUAL HEIGHTS ===== */
#mainContent .sce-help-support-wrapper .sce-cards-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 64px !important;
    align-items: stretch !important;
}

@media (min-width: 768px) {
    #mainContent .sce-help-support-wrapper .sce-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== ICONTEXT CARD ===== */
#mainContent .sce-help-support-wrapper .sce-icontext-card {
    width: 100% !important;
    margin-top: 50px !important;
    display: flex !important;
    flex-direction: column !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-card .sce-icontext-block {
    border: solid 0.5rem #f0f0f0 !important;
    padding: 3rem 1.5rem 1.5rem 1.5rem !important;
    background-color: #ffffff !important;
    position: relative !important;
    text-align: center !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Icon Holder */
#mainContent .sce-help-support-wrapper .sce-icontext-icon-holder {
    position: absolute !important;
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    background-color: #ffffff !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-icon-wrapper img,
#mainContent .sce-help-support-wrapper .sce-icontext-icon {
    height: 6.5rem !important;
    width: auto !important;
    min-height: 4rem !important;
    max-height: 8rem !important;
    display: block !important;
}

/* ===== TITLE - NUCLEAR SPECIFICITY ===== */
#mainContent .sce-help-support-wrapper .sce-icontext-block h4.sce-icontext-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin: 1rem 0 1.5rem 0 !important;
    text-align: center !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

/* Text Content */
#mainContent .sce-help-support-wrapper .sce-icontext-text {
    text-align: center !important;
    margin-bottom: 2rem !important;
    flex: 1 !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-text p.sce-icontext-intro {
    font-weight: 600 !important;
    color: #171717 !important;
    margin-bottom: 1rem !important;
    font-size: 1rem !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-text ul.sce-icontext-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: inline-block !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-text ul.sce-icontext-list li {
    padding-left: 20px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    line-height: 1.5 !important;
    color: #171717 !important;
    font-size: 1rem !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-text ul.sce-icontext-list li:before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    color: #8b2331 !important;
    font-weight: bold !important;
}

/* Alert Banner */
#mainContent .sce-help-support-wrapper .sce-icontext-block .sce-alert-warning {
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;
    background-color: #34111a !important;
    border-left: 0.4rem solid #d51f37 !important;
    padding: 1.25rem 1rem !important;
    margin: 1.5rem 0 1.5rem 0 !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

#mainContent .sce-help-support-wrapper .sce-alert-warning strong {
    color: #fff !important;
}

.sce-icontext-button-holder {
    position: relative !important;
    padding-bottom: 32.5px !important;
    margin-top: auto !important;
    display: block !important;
}

.sce-button-anchor {
    position: absolute !important;
    top: 18px !important;
    /* + 10px padding = 28px de desfase */
    left: 0 !important;
    width: 100% !important;
    padding: 10px !important;
    z-index: 5 !important;
    background: #fff;
}


/* Button Holder (Main Cards Only) */
#mainContent .sce-help-support-wrapper .sce-icontext-button-holder {
    position: relative !important;
    padding-bottom: 32.5px !important;
    width: 100% !important;
    margin-top: auto !important;
    display: block !important;
}

/* Capa 2: El Anchor (Evasión de Bloqueo CMS) 
   Calculado: 18px (Top) + 10px (Padding) = 28px Visual Offset */
#mainContent .sce-help-support-wrapper .sce-button-anchor {
    position: absolute !important;
    top: 18px !important;
    left: 0 !important;
    width: 100% !important;
    padding: 10px !important;
    z-index: 5 !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-button-wrapper {
    position: absolute !important;
    top: 18px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
    padding: 10px !important;
    background-color: transparent !important;
}

/* Capa 3: El Botón Sólido */
#mainContent .sce-help-support-wrapper .sce-button-anchor a.sce-icontext-button {
    display: block !important;
    width: 100% !important;
    background-color: #8B2331 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 20px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    border: none !important;
}


#mainContent .sce-help-support-wrapper .sce-icontext-button-wrapper a.sce-icontext-button.btn.dark {
    background-color: #8B2331 !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15.07px !important;
    letter-spacing: 0.75px !important;
    text-transform: uppercase !important;
    padding: 20px 30px !important;
    border-radius: 0px !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
}

#mainContent .sce-help-support-wrapper .sce-icontext-button-wrapper a.sce-icontext-button.btn.dark:hover {
    background-color: #34111a !important;
    color: #ffffff !important;
}

/* ===== BUTTON - NUCLEAR SPECIFICITY (Main Cards Only) ===== */
#mainContent #contentModule1 .sce-help-support-wrapper .sce-icontext-button-wrapper a.sce-icontext-button.btn.dark {
    background-color: var(--button-color-dark-bg) !important;
    border-radius: 0 !important;
    color: var(--button-color-fg) !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 0.942rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
}

#mainContent #contentModule1 .sce-help-support-wrapper .sce-icontext-button-wrapper a.sce-icontext-button.btn.dark:hover {
    background-color: #34111a !important;
}

/* ===== FAQ SECTION ===== */
#mainContent .sce-help-support-wrapper .sce-faq-section {
    max-width: 900px !important;
    margin: 0 auto 64px auto !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-section h3.sce-faq-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #212529 !important;
    margin-bottom: 32px !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-item {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-toggle {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-item label.sce-faq-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #8c2332 !important;
    border: 1px solid #751c29 !important;
    font-size: 1rem !important;
    padding: 1.25rem 1.5rem !important;
    text-transform: none !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.3s ease !important;
    margin: 0 !important;
    color: #ffffff !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-item label.sce-faq-label span.sce-faq-question {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    flex: 1 !important;
    margin: 0 !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-item label.sce-faq-label::after {
    content: "\f078" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    color: #ffffff !important;
    margin-left: 12px !important;
    font-size: 0.875rem !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-toggle:checked+label.sce-faq-label::after {
    transform: rotate(180deg) !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-toggle:checked+label.sce-faq-label {
    background-color: #751c29 !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-toggle:checked~.sce-faq-content {
    max-height: 500px !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-content .sce-faq-answer {
    padding: 1.5rem 1.5rem !important;
    background: #fff !important;
    line-height: 1.6 !important;
    color: #171717 !important;
    font-size: 1rem !important;
}

/* ===== ACCORDION FEATURE LINKS - OMEGA SPECIFICITY V89 ===== */
/* Reset total del estilo de bloque para convertirlo en Feature Link sutil */
#mainContent .sce-help-support-wrapper .sce-faq-container .sce-faq-item .sce-faq-content .sce-faq-answer a.sce-icontext-button.btn.dark {
    display: inline-flex !important;
    align-items: center !important;
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
    font-size: 1.05rem !important;
    gap: 0.5rem !important;

    /* RESET DE BLOQUE */
    background-color: transparent !important;
    background-image: linear-gradient(#8b2331, #8b2331) !important;
    background-size: calc(100% - 1.5rem) 1px !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
    padding: 0 0 2px 0 !important;
    margin-top: 0px !important;
    width: fit-content !important;
    min-width: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

/* Hover State - Underline & Color Transition */
#mainContent .sce-help-support-wrapper .sce-faq-container .sce-faq-item .sce-faq-content .sce-faq-answer a.sce-icontext-button.btn.dark:hover {
    color: #34111a !important;
    background-image: linear-gradient(#34111a, #34111a) !important;
    background-color: transparent !important;
    transform: none !important;
}

/* Chevron Icon (After) */
#mainContent .sce-help-support-wrapper .sce-faq-container .sce-faq-item .sce-faq-content .sce-faq-answer a.sce-icontext-button.btn.dark::after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.875rem !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
    margin-left: 0.5rem !important;
}

#mainContent .sce-help-support-wrapper .sce-faq-container .sce-faq-item .sce-faq-content .sce-faq-answer a.sce-icontext-button.btn.dark:hover::after {
    transform: translateX(3px) !important;
}

/* Kill previous PDF icons if any */
#mainContent .sce-help-support-wrapper .sce-faq-container .sce-faq-item .sce-faq-content .sce-faq-answer a.sce-icontext-button.btn.dark::before {
    display: none !important;
}

/* ===== ADDITIONAL CONTENT SECTION ===== */
#mainContent .sce-help-support-wrapper .sce-additional-content {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 32px 0 !important;
}

#mainContent .sce-help-support-wrapper .sce-additional-content p.sce-content-intro {
    font-family: 'Crimson Text', serif !important;
    color: #171717 !important;
    font-size: 1.8287rem !important;
    letter-spacing: -0.01rem !important;
    line-height: 1.25 !important;
    margin-bottom: 1.5rem !important;
}

#mainContent .sce-help-support-wrapper .sce-content-body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #171717 !important;
    margin-bottom: 1.5rem !important;
}


#mainContent .sce-help-support-wrapper .sce-content-body a:not(.btn) {
    display: inline !important;
    /* Mantiene el link en la frase */
    background-color: transparent !important;
    /* Quita el fondo maroon */
    color: #8b2331 !important;
    /* Solo color de texto */
    padding: 0 !important;
    /* Quita el padding de botón */
    width: auto !important;
    /* Evita que se estire al 100% */
    font-weight: 700 !important;
    text-decoration: underline !important;
    /* Estilo clásico de link */
    text-transform: none !important;
    /* Evita las mayúsculas */
}

#mainContent .sce-help-support-wrapper .sce-content-body a:not(.btn):not(.feature-glyph) {
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

#mainContent .sce-help-support-wrapper .sce-content-body a.feature-glyph {
    display: inline-flex !important;
    align-items: center !important;
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background-image: linear-gradient(#8b2331, #8b2331) !important;
    background-size: calc(100% - 1.5rem) 1px !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
    padding-bottom: 2px !important;
}

#mainContent .sce-help-support-wrapper .sce-content-body a.feature-glyph::after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-left: 0.5rem !important;
}

/* ===== RESPONSIVE: MOBILE (<768px) ===== */
@media (max-width: 767px) {
    #mainContent .sce-help-support-wrapper {
        padding: 32px 16px !important;
    }

    #mainContent .sce-help-support-wrapper .sce-help-header h2.sce-help-title {
        font-size: 2rem !important;
    }
}

/* ===== ACCESSIBILITY ===== */
#mainContent #contentModule1 .sce-help-support-wrapper .sce-icontext-button-wrapper a.sce-icontext-button:focus-visible {
    outline: 3px solid #34111a !important;
    outline-offset: 2px !important;
}

/* ============================================================
   1. ESTILO DE BOTÓN (EXCLUSIVO PARA HELP & SUPPORT)
   Solo se aplica si el link está DENTRO de tu wrapper de SCE
   ============================================================ */
#mainContent .sce-help-support-wrapper .variable-content a {
    background-color: var(--button-color-dark-bg) !important;
    color: var(--button-color-fg) !important;
    display: block !important;
    /* Formato Botón */
    text-align: center !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    width: 100% !important;
    transition: background-color 0.3s !important;
}

/* ============================================================
   2. ESTILO DE LINK (PROTECCIÓN PARA "MY PROFILE")
   Reset preventivo usando el ID único del Perfil
   ============================================================ */
#personProfileMainContent .variable-content a,
#personProfileMainContent .form-text a {
    display: inline !important;
    /* Vuelve al flujo de texto */
    background-color: transparent !important;
    /* Sin fondo maroon */
    color: #8b2331 !important;
    /* Color maroon solo en el texto */
    text-decoration: underline !important;
    /* Tradicional link */
    padding: 0 !important;
    width: auto !important;
    font-weight: 700 !important;
    text-transform: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
}

#personProfileMainContent .variable-content a,
#personProfileMainContent .form-text a:hover {
    color: #34111a !important;
    text-decoration: underline !important;
}


/* =======================================================
 * MODULE: INSTRUCTOR SIDEBAR MENU (FINAL MASTER)
 * Target: #instructorMenu
 * Theme: Burgundy Primary (#8B2331)
 * Features: Sticky Layout, Sub-menus, Hover Effects
 * =======================================================*/

/* 1. CONTAINER THEME */
#instructorMenu {
    background-color: #8B2331 !important;
    /* Burgundy Background */
    border-radius: 3px !important;
    padding: 15px 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

    /* Layout & Positioning */
    width: auto !important;
    max-width: 100% !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    margin-bottom: 20px !important;
    z-index: 100 !important;
}

/* 2. LINK COLORS (Base/Inactive) */
#instructorMenu .nav-link {
    color: #EAEAEA !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 0.7rem !important;
    /* Standard Size */

    /* Layout */
    padding: 10px 15px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    /* Pushes arrow icon to right */
    white-space: normal !important;

    /* Transition & Border Prep */
    transition: all 0.3s ease !important;
    border-left: 5px solid transparent !important;
}

/* 3. HOVER THEME */
#instructorMenu .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
    /* Slight darken */
    color: #FFFFFF !important;
    transform: translateX(5px);
}

/* 4. ACTIVE THEME (Main Items) */
/* Applies to top-level items (like "My Profile") */
#instructorMenu .nav-item.active>.nav-link,
#instructorMenu>.nav-pills>.nav-link.active,
#instructorMenu>.nav>.nav-item>.nav-link.active {
    background-color: #FFFFFF !important;
    color: #34111A !important;
    /* Burgundy Text */
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    /* Slight bump for active main */

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border-left: 5px solid #D41F37 !important;
    /* Dark Blue Accent */
}

/* 5. SUB-MENU CONTAINER (The List inside the List) */
#instructorMenu .subMenu {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    padding-left: 0 !important;
    /* Darker background area */
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* 6. SUB-MENU LINKS */
#instructorMenu .subMenu .nav-link {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    padding: 8px 10px 8px 4px !important;
    /* Indented left */
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-left: 0px !important;
    border-bottom: 1px dotted #34111A !important;
    /* Thinner border */
    color: #e0e0e0 !important;
}

/* Sub-menu Hover */
#instructorMenu .subMenu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    transform: none !important;
    /* Disable slide effect for sub-items */
}

/* 7. SUB-MENU ACTIVE THEME */
/* Specific styling for active sub-items (like "User Information") */
#instructorMenu .subMenu .nav-link.active,
#instructorMenu .subMenu .nav-link[href^="#"].active {
    background-color: #FFFFFF !important;
    /* White BG */
    color: #333 !important;
    /* Dark Text for contrast */
    font-weight: 700 !important;
    box-shadow: none !important;

    border-left: 5px solid #4A153B !important;
    /* Plum/Light Blue Accent */
}

/* 8. ARROW ICON HANDLING */
/* Hide by default to keep clean */
#instructorMenu .arrow-icon {
    display: none !important;
    font-size: 0.8em !important;
}

/* Show only on active items if you want visual indicator */
#instructorMenu .nav-link.active .arrow-icon {
    display: inline-block !important;
    color: inherit !important;
}

/* =======================================================
 * MODULE: INSTRUCTOR HOME DASHBOARD (FINAL MASTER)
 * Scope: body#pageInstructorHome
 * Design: Liquid Banner + Compact Header + Sidebar Style Announcements
 * =======================================================*/

/* 1. GLOBAL TYPOGRAPHY RESET (Within Scope) */
body#pageInstructorHome {
    font-family: 'Montserrat', sans-serif !important;
}

body#pageInstructorHome h1,
body#pageInstructorHome h2,
body#pageInstructorHome h3,
body#pageInstructorHome p,
body#pageInstructorHome span {
    font-family: 'Montserrat', sans-serif !important;
}


/* =====================================================
 * 2. WELCOME BANNER (THE LIQUID FLOW EFFECT)
 * Target: #contentModule3 .variable-content
 * Note: Mirrors Student Dashboard Welcome Banner
 * ===================================================== */

/* Container Styling */
body#pageInstructorHome #contentModule3 .variable-content {
    position: relative !important;
    border-radius: 0.25rem !important;
    padding: 2rem 2.5rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 4px 15px rgba(139, 35, 49, 0.15) !important;
    overflow: hidden !important;
    background: #34111A !important;
    /* Dark Maroon Base */
    border: none !important;
}

/* The Liquid Animation Pseudo-element */
body#pageInstructorHome #contentModule3 .variable-content::before {
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: radial-gradient(circle at center,
            rgba(139, 35, 49, 0) 30%,
            rgba(139, 35, 49, 0.5) 60%,
            #8B2331 65%,
            #34111A 100%),
        linear-gradient(-45deg,
            #D41F37, #8B2331, #FF6B35, #4A153B) !important;
    background-size: 400% 100% !important;
    animation: sceLiquidFlow 30s ease infinite !important;
    background-blend-mode: overlay, normal !important;
    opacity: 1 !important;
    z-index: 0 !important;
}

/* Ensure content sits on top of animation */
body#pageInstructorHome #contentModule3 .variable-content>* {
    position: relative !important;
    z-index: 1 !important;
}

/* Typography inside Banner */
body#pageInstructorHome #contentModule3 .variable-content p {
    font-family: 'Crimson Text', serif !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
}

/* Icon Injection (The Megaphone/Teacher) */
body#pageInstructorHome #contentModule3 .variable-content p::before {
    content: "\f51c" !important;
    /* fa-chalkboard-teacher */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 15px !important;
    font-size: 1.8rem !important;
    color: #D41F37 !important;
    opacity: 0.9 !important;
    animation: iconPulse 2s ease-in-out infinite !important;
}


/* =====================================================
 * 3. COMPACT HEADER INFO (MIRROR OF STUDENT VIEW)
 * Target: #pageHeaderActions (Right Column)
 * Scope: body#pageInstructorHome
 * ===================================================== */

/* 1. CONTAINER BOX (Gradient & Shape) */
/* Replicates: Student Header Container */
body#pageInstructorHome #pageHeaderActions {
    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    /* Visuals */
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%) !important;
    border-radius: 0.25rem !important;
    border: 1px solid #eee !important;
    /* Added subtle border for definition */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;

    /* Spacing */
    padding: 10px 15px !important;
    margin-bottom: 1.5rem !important;
    min-height: 80px !important;
    /* Ensure consistency */
}

/* 2. INSTRUCTOR NAME (Row 1) */
/* Replicates: .portalHeaderRow1 */
body#pageInstructorHome .portalHeaderRow1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    /* Match Student Size */
    font-weight: 700 !important;
    color: #171717 !important;

    /* Spacing & Alignment */
    margin-bottom: 0 !important;
    padding-left: 24px !important;
    /* Space for Icon */
    position: relative !important;
    line-height: 1.2 !important;
}

/* User Icon Injection (::before) */
body#pageInstructorHome .portalHeaderRow1::before {
    content: "\f007" !important;
    /* fa-user */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;

    /* Positioning */
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    /* Optical Alignment */

    /* Visuals */
    font-size: 1rem !important;
    color: #8b2331 !important;
    /* Maroon */
}

/* 3. INSTRUCTOR ID (Row 2) */
/* Replicates: .portalHeaderRow2 */
body#pageInstructorHome .portalHeaderRow2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.65rem !important;
    /* Compact Size */
    color: #666 !important;
    /* Muted Grey */

    /* Spacing */
    margin-bottom: 6px !important;
    padding-left: 24px !important;
    /* Aligned with Name */
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

/* 4. LAYOUT CLEANUP (CRITICAL FIX) */
/* The Instructor HTML has nested .row and .col inside the header.
   We must neutralize Bootstrap's default margins/paddings to prevent misalignment. */

body#pageInstructorHome #pageHeaderActions .row {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    /* Remove flex behavior from inner rows */
}

body#pageInstructorHome #pageHeaderActions .col-lg-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide specific instructor header ID span if it causes layout shift */
body#pageInstructorHome #instructorPortalHomeHeaderId {
    display: inline-block !important;
}


/* =====================================================
 * 4. ANNOUNCEMENTS CARD (SIDEBAR STYLE FIX)
 * Target: #instructorHomeAnnouncements
 * Design: Matches Student's "Upcoming Events" Sidebar
 * ===================================================== */

/* Main Card Container */
body#pageInstructorHome #instructorHomeAnnouncements {
    border-radius: 0.25rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background-color: #ffffff !important;
    margin-bottom: 20px !important;
    transform: none !important;
    /* Reset transform from previous style */
}

body#pageInstructorHome #instructorHomeAnnouncements:hover {
    transform: none !important;
    /* No hover lift for sidebar style */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Card Header (Light Grey - No Gradient) */
body#pageInstructorHome #instructorHomeAnnouncements .card-header {
    background: #f0f0f0 !important;
    /* Specific Light Grey */
    border: none !important;
    padding: 1rem 1.5rem !important;
    position: static !important;
}

/* Reset patterns */
body#pageInstructorHome #instructorHomeAnnouncements .card-header::before {
    display: none !important;
}

/* Card Title (Left Maroon Border) */
body#pageInstructorHome #instructorHomeAnnouncements .card-title {
    color: #171717 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;

    /* The Sidebar Signature Style */
    margin: 0 !important;
    padding-left: 0.5rem !important;
    position: relative !important;
    border-left: 3px solid #8b2331 !important;
    /* Maroon Accent */

    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Reset Icons from previous style */
body#pageInstructorHome #instructorHomeAnnouncements .card-title::before {
    display: none !important;
}

/* Card Body */
body#pageInstructorHome #instructorHomeAnnouncements .card-body {
    padding: 16px 20px !important;
    border-bottom: 1px solid #d1d5db !important;
    background: #ffffff !important;
    min-height: auto !important;
}

/* Remove border from last element */
body#pageInstructorHome #instructorHomeAnnouncements .card-body:last-child {
    border-bottom: none !important;
}

/* "Not Found" Message Styling */
body#pageInstructorHome #instructorHomeAnnouncements .notFoundMessage {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Responsive (Mobile Spacing) */
@media (max-width: 991px) {
    body#pageInstructorHome #instructorHomeAnnouncements {
        margin-top: 1rem !important;
    }
}

/* =======================================================
 * MODULE: INSTRUCTOR VIEW - ANNOUNCEMENTS CARD
 * Target: #instructorHomeAnnouncements
 * Style: Crimson Text (Titles) & Montserrat (Body)
 * =======================================================*/

/* 1. ANNOUNCEMENT TITLE (The Hyperlink) */
#instructorHomeAnnouncements .newsItemHeader a {
    /* TYPOGRAPHY */
    font-family: 'Crimson Text', serif !important;
    font-size: 1.2838rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;

    /* COLORS & BEHAVIOR */
    color: #8b2331 !important;
    /* Maroon MacEwan */
    display: block !important;
    transition: color 0.2s ease !important;

    /* SPACING */
    margin-bottom: 5px !important;
}

/* Hover Effect for Title */
#instructorHomeAnnouncements .newsItemHeader a:hover {
    color: #34111A !important;
    /* Darker Maroon */
    text-decoration: underline !important;
}

/* 2. ANNOUNCEMENT BODY (Summary Text) */
#instructorHomeAnnouncements .newsItemSummary {
    /* TYPOGRAPHY */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #333333 !important;

    /* SPACING */
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
}

/* 3. "VIEW ALL" LINK (Bottom footer link) */
/* Optional: Styles the 'View All Announcements' link to match branding */
#instructorHomeAnnouncements p a[id^="linkShowAll"] {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}


/* ============================================================
   SCE INSTRUCTOR ANNOUNCEMENTS - MASTER LIST (V145)
   Isolation Anchor: #pageInstructorNews
   Design: Editorial List with 15px alignment and dividers
   ============================================================ */

/* 1. LAYOUT ALIGNMENT 
   Locks the content to the 15px design axis */
#pageInstructorNews #contentModule1 .col-lg-12 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. HEADLINES & ICONOGRAPHY
   Montserrat 700 with high-contrast text and maroon accent */
#pageInstructorNews #contentModule1 h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: #171717 !important;
    margin-top: 40px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

#pageInstructorNews #contentModule1 h3::before {
    content: "\f1ea" !important;
    /* FontAwesome Newspaper */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
    color: #8b2331 !important;
    font-size: 1.2rem !important;
    display: inline-block !important;
}

/* 3. SYNOPSIS
   Clean justified text for an editorial magazine feel */
#pageInstructorNews #contentModule1 .newsItemSynopsis {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #444444 !important;
    text-align: justify !important;
    margin-bottom: 20px !important;
}

/* 4. THE EDITORIAL DIVIDER
   Creates clear separation between different announcements */
#pageInstructorNews #contentModule1 .fullStoryLinkContainer {
    border-bottom: 1.5px solid #e2e2e2 !important;
    padding-bottom: 35px !important;
    margin-bottom: 35px !important;
    display: block !important;
    height: auto !important;
}

/* 5. DIVIDER CLEANUP
   Prevents an orphaned line at the bottom of the list */
#pageInstructorNews #contentModule1 .fullStoryLinkContainer:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 6. INTERACTIVE LINKS
   Design System: Maroon + Bold + Underline */
#pageInstructorNews #contentModule1 .fullStoryLinkContainer a {
    color: #8b2331 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    font-size: 1rem !important;
}

#pageInstructorNews #contentModule1 .fullStoryLinkContainer a:hover {
    color: #171717 !important;
    text-decoration: none !important;
}


/* =======================================================
 * INSTRUCTOR PROFILE (ISOLATED MODE - FINAL MASTER v2)
 * Scope: Strict IDs matching 'instructorProfile...'
 * Includes: Layout, Buttons, and ISOLATED Radio Fix
 * =======================================================*/

/* 1. GREY GLOBAL WRAPPER (Conditional) */
/* Only applies if the panel-group contains the Instructor Username block */
#personProfileMainContent .panel-group:has(#instructorProfileUsernamePasswordContainer) {
    background-color: #f0f0f0 !important;
    padding: 30px 15px 15px 15px !important;
    border-radius: 4px !important;
    margin-bottom: 2rem !important;
    border: none !important;
}

/* 2. NUCLEAR RESET OF OUTER CARDS (Transparent) */
/* Prevent "Double Card" border effect specifically for Instructor containers */
#personProfileMainContent .card.panel-default:has(#instructorProfileUsernamePasswordContainer),
#personProfileMainContent .card.panel-default:has(#instructorProfileBasicInformationContainer),
#personProfileMainContent .card.panel-default:has(#instructorProfileEmailInfoContainer),
#personProfileMainContent .card.panel-default:has(#instructorProfileTelephoneInfoContainer),
#personProfileMainContent .card.panel-default:has(#instructorProfileAddressInfoContainer),
#personProfileMainContent .card.panel-default:has(#instructorProfileBiographyContainer1),
#personProfileMainContent .card.panel-default:has(#instructorProfileEmployerInfoContainer) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide mobile headers on desktop for these specific cards */
#personProfileMainContent .card.panel-default:has(#instructorProfileUsernamePasswordContainer) .card-header.d-lg-none,
#personProfileMainContent .card.panel-default:has(#instructorProfileBasicInformationContainer) .card-header.d-lg-none,
#personProfileMainContent .card.panel-default:has(#instructorProfileEmailInfoContainer) .card-header.d-lg-none,
#personProfileMainContent .card.panel-default:has(#instructorProfileTelephoneInfoContainer) .card-header.d-lg-none,
#personProfileMainContent .card.panel-default:has(#instructorProfileAddressInfoContainer) .card-header.d-lg-none,
#personProfileMainContent .card.panel-default:has(#instructorProfileBiographyContainer1) .card-header.d-lg-none,
#personProfileMainContent .card.panel-default:has(#instructorProfileEmployerInfoContainer) .card-header.d-lg-none {
    background-color: transparent !important;
    border: none !important;
}

/* 3. WHITE DATA CARDS (The Content) */
/* Targets specific Instructor containers */
#instructorProfileUsernamePasswordContainer,
#instructorProfileBasicInformationContainer,
#instructorProfileEmailInfoContainer,
#instructorProfileTelephoneInfoContainer,
#instructorProfileAddressInfoContainer,
#instructorProfileBiographyContainer1,
#instructorProfileEmployerInfoContainer {
    /* White Card Look */
    background-color: #FFFFFF !important;
    border: 1px solid #d1d5db !important;
    /* Soft grey border */
    border-radius: 4px !important;

    /* Spacing */
    padding: 25px !important;
    margin-bottom: 20px !important;

    /* Display Fixes */
    display: block !important;
    overflow: visible !important;
}

/* 4. BUTTONS & ACTIONS (Scoped to Instructor View) */
/* We check if the panel-group contains the specific instructor ID */
.panel-group:has(#instructorProfileUsernamePasswordContainer) .btn,
.panel-group:has(#instructorProfileUsernamePasswordContainer) button[type="button"] {
    border-radius: 50px !important;
    padding: 6px 20px !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #555 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

/* Hover State */
.panel-group:has(#instructorProfileUsernamePasswordContainer) .btn:hover,
.panel-group:has(#instructorProfileUsernamePasswordContainer) button[type="button"]:hover {
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    color: #ffffff !important;
}

/* =======================================================
 * 5. INSTRUCTOR-ONLY RADIO ALIGNMENT (ISOLATED)
 * Target: #personProfileMainContent ONLY if it has #instructor...
 * =======================================================*/

/* Parent Container Spacing */
#personProfileMainContent:has(#instructorProfileUsernamePasswordContainer) .custom-control.custom-radio {
    padding-left: 2.25rem !important;
    min-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 5px !important;
}

/* The Radio Circle (::before) - Centered */
#personProfileMainContent:has(#instructorProfileUsernamePasswordContainer) .custom-control-label::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Center Vertically */
    width: 1.2rem !important;
    height: 1.2rem !important;
    left: -2.25rem !important;
    background-color: #ffffff !important;
    border: 2px solid #ced4da !important;
}

/* The Checkmark Dot (::after) - Centered */
#personProfileMainContent:has(#instructorProfileUsernamePasswordContainer) .custom-control-label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Center Vertically */
    width: 1.2rem !important;
    height: 1.2rem !important;
    left: -2.25rem !important;
    background-size: 50% !important;
}

/* Active State (Maroon) */
#personProfileMainContent:has(#instructorProfileUsernamePasswordContainer) .custom-control-input:checked~.custom-control-label::before {
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
}

/* Content Alignment (Text + Buttons) */
#personProfileMainContent:has(#instructorProfileUsernamePasswordContainer) .custom-control-label {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-top: 0 !important;
    line-height: 1.5 !important;
}

/* Content Inner Span */
#personProfileMainContent:has(#instructorProfileUsernamePasswordContainer) .custom-control-label>span {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* =======================================================
 * INSTRUCTOR CREDENTIALS - ROBUST LAYOUT STRATEGY
 * Logic: 
 * 1. Parent ID = Grey Background (The Frame)
 * 2. Child Row = White Background (The Card)
 * 3. Sibling Row = Grey Background (The Footer)
 * =======================================================*/


/* 1. THE CONTAINER (Acts as the Grey Frame) */
#instructorProfileUsernamePassword {
    /* --- The Grey Background --- */
    background-color: #f0f0f0 !important;

    /* --- The Frame Thickness (Padding) --- */
    /* 30px Top/Left/Right. 0px Bottom (to connect with buttons) */
    padding: 30px 30px 0 30px !important;

    /* --- Shape --- */
    border-radius: 4px 4px 0 0 !important;
    /* Round top corners only */

    /* --- Layout Fixes --- */
    margin: 30px 0 0 0 !important;
    /* Removed bottom margin to touch buttons */
    overflow: visible !important;
    border: none !important;
}

/* Remove the pseudo-element hack (Cleanup) */
#instructorProfileUsernamePassword::before {
    display: none !important;
    content: none !important;
}

/* 2. THE CONTENT (The White Card inside) */
#instructorProfileUsernamePassword>.row {
    /* --- The White Surface --- */
    background-color: #ffffff !important;

    /* --- Spacing --- */
    padding: 30px 15px !important;

    /* --- Reset Bootstrap Margins --- */
    margin: 0 !important;
    width: 100% !important;

    /* --- Styling --- */
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 3. THE BUTTONS ROW (The Grey Footer - FIXED) */
/* Selector (+) targets the .row immediately after the main ID */
#instructorProfileUsernamePassword+.row {
    /* --- GREY BACKGROUND (Key Fix) --- */
    background-color: #f0f0f0 !important;

    /* --- Connection --- */
    margin-top: 0 !important;
    /* No gap between top and bottom */
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* --- Spacing --- */
    /* Sides match top block (30px). Bottom gives breathing room. */
    padding: 20px 30px 30px 30px !important;

    /* --- Shape --- */
    border-radius: 0 0 4px 4px !important;
    /* Round bottom corners only */
}

/* 4. BUTTONS POSITIONING */
/* Target internal container to align right */
#instructorProfileUsernamePassword+.row .col-lg-12,
#instructorProfileUsernamePassword+.row .buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    /* Prevent double painting */
}

/* 5. TYPOGRAPHY CLEANUP (Inside the White Card) */
#instructorProfileUsernamePassword>.row label,
#instructorProfileUsernamePassword>.row .labelSpanStyle {
    font-weight: 700 !important;
    color: #171717 !important;
    margin-bottom: 5px !important;
}

#instructorProfileUsernamePassword>.row .form-text {
    margin-top: 15px !important;
    color: #555 !important;
    font-size: 0.85rem !important;
}

/* 6. MOBILE RESPONSIVE */
@media (max-width: 767px) {

    /* Reduce frame thickness on mobile */
    #instructorProfileUsernamePassword {
        padding: 20px 15px 0 15px !important;
    }

    #instructorProfileUsernamePassword+.row {
        padding: 0 15px 20px 15px !important;
    }

    /* Stack buttons */
    #instructorProfileUsernamePassword+.row .btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* =======================================================
 * MODULE: INSTRUCTOR COURSES LIST (NUCLEAR SPECIFICITY)
 * Target: Open/In-Progress & Completed Courses Tables
 * Scope: #contentModule1 > form[name="portalInstructorCoursesListForm"]
 * Includes: Maroon Headers, Zebra Striping, Sortable UX
 * =======================================================*/

/* 1. GENERAL TABLE LAYOUT */
form[name="portalInstructorCoursesListForm"] table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Borders */
    border: none !important;
}

/* 2. TABLE HEADERS (Container Styling) - NUCLEAR SELECTOR */
/* Added #contentModule1 to force the Maroon background over global styles */
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th,
form[name="portalInstructorCoursesListForm"] thead th {
    background: #34111A !important;
    /* Dark Maroon */
    color: #ffffff !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Spacing & Layout */
    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Borders */
    border: 1px solid #34111A !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Separator */
    border-bottom: none !important;
}

/* Remove border from last column */
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th:last-child,
form[name="portalInstructorCoursesListForm"] thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* =======================================================
 * 2.1 SORTABLE HEADERS UX (Interactive Links)
 * Features: Sort Icons, White Links, Red Hover
 * FIX: High Specificity to keep links White even if visited
 * =======================================================*/

/* Make the cell clickable area relative for positioning */
form[name="portalInstructorCoursesListForm"] thead th.sortable {
    cursor: pointer !important;
    padding: 13px 18px !important;
}

/* The Link Styling (Text) - Initial & Visited State */
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th.sortable a,
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th.sortable a:visited,
form[name="portalInstructorCoursesListForm"] thead th.sortable a {
    /* Colors & Decoration */
    color: #ffffff !important;
    /* FORCE WHITE ALWAYS */
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100% !important;

    transition: all 0.2s ease-in-out !important;
}

/* The Sort Icon (Font Awesome Injection) */
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th.sortable a::after,
form[name="portalInstructorCoursesListForm"] thead th.sortable a::after {
    content: "\f0dc";
    /* fa-sort */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    margin-left: 8px !important;
    opacity: 0.6 !important;
    color: inherit !important;
}

/* Hover State - Interaction (Turns Red) */
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th.sortable:hover a,
#contentModule1 form[name="portalInstructorCoursesListForm"] thead th.sortable:hover a:visited,
form[name="portalInstructorCoursesListForm"] thead th.sortable:hover a {
    color: #D41F37 !important;
    /* Bright Red */
    text-decoration: underline !important;
    text-decoration-color: #D41F37 !important;
}

#contentModule1 form[name="portalInstructorCoursesListForm"] thead th.sortable:hover a::after,
form[name="portalInstructorCoursesListForm"] thead th.sortable:hover a::after {
    opacity: 1 !important;
    color: #D41F37 !important;
    transform: scale(1.1);
}

/* =======================================================
 * 3. TABLE BODY STYLING
 * =======================================================*/

/* Zebra Striping: Odd Rows -> Light Grey */
form[name="portalInstructorCoursesListForm"] tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Zebra Striping: Even Rows -> White */
form[name="portalInstructorCoursesListForm"] tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* Cell Content Styling */
form[name="portalInstructorCoursesListForm"] tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    font-size: 0.85rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
}

/* =======================================================
 * 4. DATA LINKS (Course Titles inside Body)
 * =======================================================*/

form[name="portalInstructorCoursesListForm"] tbody td a {
    color: #8b2331 !important;
    /* Maroon */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.3) !important;
    transition: all 0.3s ease !important;
}

form[name="portalInstructorCoursesListForm"] tbody td a:hover {
    color: #34111A !important;
    /* Darker Maroon */
    text-decoration-color: #34111A !important;
}

/* =======================================================
 * INSTRUCTOR SECTION HEADERS (H2 Titles)
 * Matches "Contact Information" style within this form
 * =======================================================*/

/* 1. Header Container */
form[name="portalInstructorCoursesListForm"] .card.panel-default>.card-header {
    background-color: transparent !important;
    border: none !important;
    padding: 20px 0 10px 0 !important;
    border-bottom: 0px solid #e9ecef !important;
    margin-bottom: 15px !important;
}

/* 2. Main Title (H2) */
form[name="portalInstructorCoursesListForm"] h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    color: #34111A !important;

    /* Design System Accent */
    border-left: 0 solid #8b2331 !important;
    padding-left: 0.5rem !important;
    display: inline-block !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* 3. Subtitle / Helper Text inside H2 */
form[name="portalInstructorCoursesListForm"] h2 .content {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-transform: none !important;
    margin-top: 5px !important;
    display: block !important;
    border: none !important;
}


/* =======================================================
 * MODULE: INSTRUCTOR CLASS LIST (STRICT ISOLATION)
 * Target: Table #classListItemVO
 * Scope: #contentModule1 > form[name="sectionClassListForm"]
 * SAFETY: Rules apply ONLY if this specific form exists.
 * =======================================================*/

/* 1. TABLE LAYOUT & CONTAINER */
/* Isolation: Only targets table inside the Class List Form */
#contentModule1 form[name="sectionClassListForm"] table#classListItemVO {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Visuals */
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* 2. TABLE HEADERS (Nuclear Maroon Override) */
/* Specificity Strategy: ID (#contentModule1) + Attribute ([name]) + Element (th) */
#contentModule1 form[name="sectionClassListForm"] thead th {
    background: #34111A !important;
    /* Dark Maroon */
    color: #ffffff !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Spacing & Borders */
    padding: 13px 18px !important;
    vertical-align: middle !important;
    border: 1px solid #34111A !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Separator */
    border-bottom: none !important;
}

/* Remove border from last column */
#contentModule1 form[name="sectionClassListForm"] thead th:last-child {
    border-right: 1px solid #34111A !important;
}

/* =======================================================
 * 2.1 SORTABLE HEADERS UX (Links & Icons)
 * Isolation: Only affects links inside this specific table header
 * =======================================================*/

/* Clickable Area */
#contentModule1 form[name="sectionClassListForm"] thead th.sortable {
    cursor: pointer !important;
    padding: 13px 18px !important;
}

/* Link Text - Force White (Initial & Visited) */
#contentModule1 form[name="sectionClassListForm"] thead th.sortable a,
#contentModule1 form[name="sectionClassListForm"] thead th.sortable a:visited {
    color: #ffffff !important;
    /* FORCE WHITE */
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;

    /* Flex layout for Icon alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100% !important;
    transition: all 0.2s ease-in-out !important;
}

/* Inject Sort Icon (Font Awesome) */
#contentModule1 form[name="sectionClassListForm"] thead th.sortable a::after {
    content: "\f0dc";
    /* fa-sort */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    margin-left: 8px !important;
    opacity: 0.6 !important;
    color: inherit !important;
}

/* Hover State (Turns Red) */
#contentModule1 form[name="sectionClassListForm"] thead th.sortable:hover a,
#contentModule1 form[name="sectionClassListForm"] thead th.sortable:hover a:visited {
    color: #D41F37 !important;
    /* Bright Red */
    text-decoration-color: #D41F37 !important;
}

#contentModule1 form[name="sectionClassListForm"] thead th.sortable:hover a::after {
    opacity: 1 !important;
    color: #D41F37 !important;
    transform: scale(1.1);
}

/* =======================================================
 * 3. TABLE BODY (Zebra Striping)
 * Isolation: Scoped to #classListItemVO rows
 * =======================================================*/

/* Odd Rows */
#contentModule1 form[name="sectionClassListForm"] tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows */
#contentModule1 form[name="sectionClassListForm"] tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* Cell Styling */
#contentModule1 form[name="sectionClassListForm"] tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    font-size: 0.85rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;
}

/* =======================================================
 * 4. SPECIFIC COLUMN FIXES
 * Isolation: Only affects columns in this specific form
 * =======================================================*/

/* Fix for Column 0 (Checkbox Column) */
#contentModule1 form[name="sectionClassListForm"] tbody td:first-child {
    text-align: center !important;
    width: 50px !important;
    vertical-align: middle !important;
}

/* Fix alignment of checkbox container */
#contentModule1 form[name="sectionClassListForm"] .custom-checkbox {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}


/* =======================================================
 * MODULE: CLASS LIST BUTTON BAR (UX SENSEI EDITION)
 * Scope: #contentModule1 > form[name="sectionClassListForm"]
 * Strategy: Flexbox + Smart Tooltips (attr-value)
 * =======================================================*/

/* APLICAR SOLO EN ESCRITORIO (Mobile se mantiene nativo) */
@media (min-width: 1080px) {

    /* 1. CONTAINER LAYOUT (Single Line Flex) */
    #contentModule1 form[name="sectionClassListForm"] .buttons {
        margin-top: 30px !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        /* Force Single Line */
        gap: 8px !important;
        /* Efficient spacing */
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        /* Anchor for potential tips */
    }

    /* Kill legacy clearfix */
    #contentModule1 form[name="sectionClassListForm"] .buttons::before,
    #contentModule1 form[name="sectionClassListForm"] .buttons::after {
        display: none !important;
    }

    /* 2. BASE BUTTON STYLE (Static Pill) */
    #contentModule1 form[name="sectionClassListForm"] .buttons .btn {
        /* Layout & Box Model */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        /* Anchor for Tooltip */

        /* Dimensions */
        padding: 8px 18px !important;
        margin: 0 !important;

        /* Visuals (Golden Rule) */
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
        border: 2px solid #ced4da !important;
        border-radius: 2rem !important;

        /* HIDE ORIGINAL HTML TEXT */
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;

        /* Reset Interactions (No Movement) */
        transition: border-color 0.3s ease, background-color 0.3s ease !important;
        transform: none !important;
    }

    /* 3. HOVER STATE (Color Change Only) */
    #contentModule1 form[name="sectionClassListForm"] .buttons .btn:hover {
        color: #8b2331 !important;
        background-color: #fff !important;
        border-color: #8b2331 !important;
        z-index: 10 !important;
        /* Bring to front for Tooltip */
    }


    /* =======================================================
     * 4. VISIBLE CONTENT (Icon + Short Text) -> ::before
     * Strategy: We declare FontAwesome AND Montserrat together.
     * The Icon code (\f...) uses FA, the text uses Montserrat.
     * =======================================================*/

    #contentModule1 form[name="sectionClassListForm"] .buttons .btn::before {
        /* Font Stack Trick: Icon Font + Brand Font */
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        /* Required for FA Solid */

        /* Typography */
        font-size: 0.75rem !important;
        color: #555 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* Hover Color for Icon/Text */
    #contentModule1 form[name="sectionClassListForm"] .buttons .btn:hover::before {
        color: #34111A !important;
    }


    /* =======================================================
     * 5. SMART TOOLTIP (Original Text) -> ::after
     * Strategy: Read 'value' attribute and float it above
     * =======================================================*/

    #contentModule1 form[name="sectionClassListForm"] .buttons .btn::after {
        /* Content: Read the original value="Print Class List" */
        content: attr(value) !important;

        /* Initial State: Hidden */
        opacity: 0 !important;
        visibility: hidden !important;

        /* Position: Floating Above */
        position: absolute !important;
        bottom: 125% !important;
        /* Push up */
        left: 50% !important;
        transform: translateX(-50%) !important;

        /* Design: Dark Tooltip */
        background-color: #34111A !important;
        /* Dark Maroon */
        color: #ffffff !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;

        /* Typography */
        font-family: 'Montserrat', sans-serif !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        /* Don't block clicks */

        /* Animation */
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    /* Arrow Pointer for Tooltip (Optional visual flare) */
    /* Note: Since we only have ::after, we stick to a simple box */

    /* Show Tooltip on Hover */
    #contentModule1 form[name="sectionClassListForm"] .buttons .btn:hover::after {
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =======================================================
     * 6. CONTENT MAPPING (Icon + Short Label in one string)
     * Format: "\ICON_CODE   SHORT_TEXT"
     * =======================================================*/

    /* A. CLASS LIST */
    #contentModule1 form[name="sectionClassListForm"] #buttonPrintClassList::before {
        content: "\f02f   CLASS LIST";
    }

    /* B. ATTENDANCE */
    #contentModule1 form[name="sectionClassListForm"] #buttonPrintAttendanceSheet::before {
        content: "\f0ca   ATTENDANCE";
    }

    /* C. EMERGENCY INFO */
    #contentModule1 form[name="sectionClassListForm"] #buttonEmergencyContactReport::before {
        content: "\f0f9   EMERGENCY INFO";
    }

    /* D. EMAIL SELECTED */
    #contentModule1 form[name="sectionClassListForm"] #buttonEmailSelected::before {
        content: "\f0e0   EMAIL SELECTED";
    }

    /* E. EMAIL ALL */
    #contentModule1 form[name="sectionClassListForm"] #buttonEmailAll::before {
        content: "\f0a1   EMAIL ALL";
        /* fa-bullhorn/megaphone for ALL */
    }
}

/* =======================================================
 * MODULE: INSTRUCTOR CURRENT SCHEDULE (STRICT ISOLATION)
 * Target: table.studentCourseSchedule
 * Scope: body#pageInstructorTimetable > #contentModule1
 * SAFETY: Styles only activate on the Instructor Timetable Page.
 * =======================================================*/

/* 1. GENERAL TABLE LAYOUT */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Visuals */
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* 2. TABLE HEADERS (Maroon Override) */
/* Specificity: ID (#pageInstructorTimetable) + ID (#contentModule1) + Class */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule thead th {
    background: #34111A !important;
    /* Dark Maroon */
    color: #ffffff !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Spacing & Borders */
    padding: 13px 18px !important;
    vertical-align: middle !important;
    border: 1px solid #34111A !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Separator */
    border-bottom: none !important;
}

/* Remove border from last column */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule thead th:last-child {
    border-right: 1px solid #34111A !important;
}

/* 3. TABLE BODY (Zebra Striping) */

/* Odd Rows */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. CELL STYLING */
/* Targets both standard 'td' and the 'th' used for Dates */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule tbody td,
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule tbody th {
    padding: 12px 15px !important;
    vertical-align: top !important;
    font-size: 0.75rem !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    color: rgb(23, 23, 23) !important;

    /* Ensure the 'th' date column looks like regular text */
    font-weight: 400 !important;
    text-align: left !important;
}

/* 5. DATA SPANS (Inner Content Typography) */
/* Styling specifically for the spans inside cells (Date, Time, Course) */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule .date,
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule .time,
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule .type,
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule .courseName,
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule .location {
    display: block !important;
    line-height: 1.4 !important;
}

/* Bold the Course Code for readability */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule .courseCode {
    font-weight: 700 !important;
    color: #34111A !important;
}

/* =======================================================
 * 6. DATA LINKS STYLING (Popups, Locations, etc.)
 * Target: Links inside the table body (Excludes Header links)
 * Scope: body#pageInstructorTimetable
 * =======================================================*/

body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule tbody a {
    color: #8b2331 !important;
    /* Primary Maroon */
    font-weight: 700 !important;
    /* Slight bold for readability */

    /* User Definition */
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.3) !important;
    /* Subtle underline */
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

/* Hover State */
body#pageInstructorTimetable #contentModule1 table.studentCourseSchedule tbody a:hover {
    color: #34111a !important;
    /* Dark Maroon */
    text-decoration-color: #34111a !important;
    /* Solid underline */
}


/* =======================================================
 * INSTRUCTOR GRADING SHEET - PRODUCTION MASTER v5.2
 * MacEwan SCE | Modern Campus Migration | Instructor Portal
 * =======================================================
 * 
 * SCOPE: form[name="portalInstructorGradingSheetForm"]
 * STRATEGY: Mobile Native → Tablet Hybrid → Desktop Dashboard
 * DESIGN SYSTEM: Maroon/Silver/Montserrat (2026.1)
 * 
 * MODULES INCLUDED:
 * ✓ Dashboard Overview (KPIs, Stats, Accordions, Buttons)
 * ✓ Student Grade Entry Cards (Individual student forms)
 * 
 * FEATURES v5.2:
 * - KPI Cards: Horizontal split layout
 * - Stats Tables: Grey border containers
 * - Accordion Content: Compact 10px font-size
 * - Accordions: Open by default, equal height
 * - Student Cards: Maroon headers, two-column layout
 * - Button polish: Clean hovers, maroon focus states
 * - Save button: Bootstrap blue mobile, Maroon pill desktop
 * =======================================================*/


/* =======================================================
 * SECTION 1: GLOBAL STYLES (All Breakpoints)
 * =======================================================*/

/* 1.1 Base Container */
form[name="portalInstructorGradingSheetForm"] {
    background-color: transparent !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* 1.2 NOT FOUND MESSAGE (Light Highlight Component) */
#contentModule1 form[name="portalInstructorGradingSheetForm"] .notFoundMessage {
    background-color: #f0f0f0 !important;
    border: none !important;
    border-left: 6px solid #8b2331 !important;
    border-radius: 0px !important;
    color: #171717 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] .notFoundMessage::before {
    content: "\f05a" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 15px !important;
    font-size: 1.5rem !important;
    color: #8b2331 !important;
    display: inline-block !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] .notFoundMessage a {
    color: #8b2331 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* 1.3 PRIMARY ACTION BUTTON (Save Button) */
/* Mobile: Explicit Bootstrap .btn-primary styles */
/* Desktop: Custom maroon pill (overridden at ≥1200px) */

#contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonSave {
    /* Bootstrap .btn-primary defaults */
    border-radius: 0px !important;
    padding: 10px 35px !important;
    background-color: #8b2331 !important;
    border: 2px solid #8b2331 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonSave:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonSave:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important;
}

/* 1.4 SECTION HEADERS (Class List) */
#contentModule1 form[name="portalInstructorGradingSheetForm"] .sectionHeader {
    background: linear-gradient(135deg, #34111A 0%, #8b2331 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] .sectionHeader h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
}

/* 1.5 ACCORDIONS - FORCE OPEN BY DEFAULT */
#contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .panel-collapse,
#contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .panel-collapse,
#contentModule1 form[name="portalInstructorGradingSheetForm"] #classFilterCriteria,
#contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdateCriteria {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .card-header,
#contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .card-header {
    cursor: default !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .card-header .glyphicon,
#contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .card-header .glyphicon {
    display: none !important;
}


/* =======================================================
 * SECTION 2: TABLET HYBRID (992px - 1199px)
 * Enhanced cards, stacked accordions
 * =======================================================*/
@media (min-width: 992px) and (max-width: 1199px) {

    /* KPI Cards */
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData {
        display: flex !important;
        gap: 15px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .form-group {
        background: #f0f0f0 !important;
        border-radius: 0px !important;
        border-left: 6px solid #8b2331 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        padding: 20px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .labelSpanStyle {
        margin-bottom: 0 !important;
        flex: 1 !important;
        padding-right: 10px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .form-control-plaintext {
        text-align: right !important;
        font-size: 1.8rem !important;
        flex-shrink: 0 !important;
    }

    /* Accordions */
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Student Cards */
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header {
        background-color: #34111A !important;
        color: #ffffff !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header label {
        color: #ffffff !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .col-lg-6.grades {
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }
}


/* =======================================================
 * SECTION 3: DESKTOP DASHBOARD (≥1200px)
 * Full dashboard layout with all enhancements
 * =======================================================*/
@media (min-width: 1200px) {

    /* ─────────────────────────────────────────────────
     * 3.1 SAVE BUTTON - DESKTOP CUSTOM MAROON PILL
     * Overrides Bootstrap blue with maroon brand
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonSave {
        border-radius: 2rem !important;
        padding: 10px 35px !important;
        background-color: #8b2331 !important;
        border: 2px solid #8b2331 !important;
        color: #ffffff !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonSave:hover {
        background-color: #6a1b25 !important;
        border-color: #6a1b25 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.2 KPI CARDS - HORIZONTAL SPLIT LAYOUT
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .form-group {
        background: #f0f0f0 !important;
        border-radius: 0px !important;
        border-left: 6px solid #8b2331 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        padding: 20px 25px !important;
        margin: 0 !important;
        flex: 1 !important;
        min-width: 240px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .labelSpanStyle {
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        color: #666 !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        display: block !important;
        text-align: left !important;
        letter-spacing: 0.5px !important;
        flex: 1 !important;
        padding-right: 15px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .form-control-plaintext {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        color: #171717 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: right !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .col-lg-4,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .readOnlyFormData .col-lg-8 {
        flex: initial !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.3 STATS WIDGETS (Tables with Grey Borders)
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats {
        display: flex !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats>div {
        flex: 1 !important;
        border: 1px solid #d0d0d0 !important;
        border-radius: 4px !important;
        padding: 15px !important;
        background: #fff !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats table {
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats caption {
        caption-side: top !important;
        padding: 0 0 12px 0 !important;
        background: transparent !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats caption h4 {
        color: #34111A !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-left: 4px solid #8b2331 !important;
        padding-left: 12px !important;
        margin: 0 !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.5px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats table th,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #stats table td {
        padding: 10px 12px !important;
        border: none !important;
        font-size: 0.85rem !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.4 SIDE-BY-SIDE ACCORDIONS (Filter & Batch)
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate {
        display: inline-flex !important;
        flex-direction: column !important;
        width: calc(49.5% - 10px) !important;
        max-width: calc(49.5% - 10px) !important;
        vertical-align: top !important;
        margin-bottom: 20px !important;
        background: #fff !important;
        border-radius: 0px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        border: none !important;
        float: none !important;
        min-height: 480px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter {
        margin-right: 1% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .card-header,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .card-header {
        background-color: #34111A !important;
        color: #ffffff !important;
        padding: 15px 20px !important;
        border: none !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .card-header h4.card-title {
        color: #ffffff !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 0.95rem !important;
        margin: 0 !important;
        letter-spacing: 0.5px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .card-body,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .card-body {
        padding: 15px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.5 ACCORDION CONTENT - COMPACT (10px)
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .card-body *,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .card-body * {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .labelSpanStyle,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .labelSpanStyle,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter label,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate label {
        font-size: 10px !important;
        font-weight: 600 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .custom-control-label,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .custom-control-label {
        font-size: 10px !important;
        padding-left: 5px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .form-control,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .form-control {
        font-size: 10px !important;
        padding: 5px 10px !important;
        height: auto !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter select,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate select {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .form-group,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .form-group {
        margin-bottom: 8px !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.6 ACCORDION INTERNAL LAYOUT (Column Balance)
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .form-group.row .col-lg-2,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .form-group.row .col-lg-2 {
        flex: 0 0 22% !important;
        max-width: 22% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .form-group.row>.col-lg-5:first-of-type,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .form-group.row>.col-lg-5:first-of-type {
        flex: 0 0 39% !important;
        max-width: 39% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .form-group.row>.col-lg-5:last-of-type,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .form-group.row>.col-lg-5:last-of-type {
        flex: 0 0 39% !important;
        max-width: 39% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .btn-secondary,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .btn-secondary {
        padding: 6px 15px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 95px !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.7 GOLDEN RULE BUTTONS (Secondary Actions)
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .buttons button:not(#buttonSave),
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .btn-secondary,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .btn-secondary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        background-image: none !important;
        border-radius: 2rem !important;
        border: 2px solid #ced4da !important;
        color: #555 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .buttons button:not(#buttonSave) {
        padding: 8px 22px !important;
        font-size: 0.8rem !important;
        margin-left: 8px !important;
        margin-bottom: 8px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .buttons button:not(#buttonSave):hover,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #filter .btn-secondary:hover,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #batchUpdate .btn-secondary:hover {
        background-color: #fff !important;
        border-color: #8b2331 !important;
        color: #8b2331 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .buttons {
        display: flex !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        margin-top: 30px !important;
        border-top: 2px solid #f0f0f0 !important;
        padding-top: 25px !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.8 ICON INJECTION (Font Awesome)
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonPrintGrades::before,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonPrintBlankGrades::before {
        content: "\f02f" !important;
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        margin-right: 8px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] #buttonExportGrades::before {
        content: "\f56e" !important;
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        margin-right: 8px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .btn-secondary[value="Go"]::before {
        content: "\f0a9" !important;
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        margin-right: 6px !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.9 STUDENT GRADE ENTRY CARDS
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card {
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 20px !important;
        overflow: hidden !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header {
        background-color: #34111A !important;
        color: #ffffff !important;
        padding: 12px 20px !important;
        border-bottom: none !important;
        border-radius: 0px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header label {
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        margin-bottom: 0 !important;
        text-transform: none !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header .custom-control-input:checked~.custom-control-label::before {
        background-color: #8b2331 !important;
        border-color: #8b2331 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header .backToTop {
        color: #ffffff !important;
        font-size: 0.8rem !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
        transition: opacity 0.3s ease !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header .backToTop:hover {
        opacity: 0.8 !important;
        text-decoration: none !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-body {
        padding: 20px !important;
        background: #ffffff !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-body .row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .col-lg-6.grades {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-right: 20px !important;
        border-right: 2px solid #f0f0f0 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .col-lg-6.auditInfo {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 20px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .form-group.row {
        margin-bottom: 10px !important;
        align-items: center !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry label,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .labelSpanStyle {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #555 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 0 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-header label {
        text-transform: none !important;
        font-size: 0.95rem !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry input.form-control,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry select.form-control {
        font-size: 14px !important;
        padding: 6px 10px !important;
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        line-height: 1.4 !important;
        transition: border-color 0.2s ease !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry input.form-control:focus,
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry select.form-control:focus {
        border-color: #8b2331 !important;
        box-shadow: 0 0 0 0.2rem rgba(139, 35, 49, 0.15) !important;
        outline: none !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .input-group.date {
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .input-group.date input {
        border: none !important;
        font-size: 14px !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .input-group.date .input-group-text {
        background-color: #f8f9fa !important;
        border: none !important;
        border-left: 1px solid #ced4da !important;
        color: #8b2331 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .input-group.date:focus-within {
        border-color: #8b2331 !important;
        box-shadow: 0 0 0 0.2rem rgba(139, 35, 49, 0.15) !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .custom-control-input:checked~.custom-control-label::before {
        background-color: #8b2331 !important;
        border-color: #8b2331 !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .custom-control-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #555 !important;
        text-transform: uppercase !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .form-group.row .col-lg-4 {
        flex: 0 0 33% !important;
        max-width: 33% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .form-group.row .col-lg-8 {
        flex: 0 0 67% !important;
        max-width: 67% !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry input[disabled],
    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry select[disabled] {
        background-color: #f8f9fa !important;
        color: #6c757d !important;
        cursor: not-allowed !important;
    }

    #contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry .card-body>.form-horizontal>.row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* ─────────────────────────────────────────────────
     * 3.10 LAYOUT CLEARFIX
     * ─────────────────────────────────────────────────*/
    #contentModule1 form[name="portalInstructorGradingSheetForm"] #students {
        clear: both !important;
        padding-top: 20px !important;
    }
}


/* =======================================================
 * SECTION 4: ACCESSIBILITY (All Breakpoints)
 * WCAG compliance for keyboard navigation
 * =======================================================*/
#contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry *:focus {
    outline: 2px solid #8b2331 !important;
    outline-offset: 2px !important;
}

#contentModule1 form[name="portalInstructorGradingSheetForm"] .studentGradeEntry *:focus:not(:focus-visible) {
    outline: none !important;
}


/* =======================================================
 * END OF STYLESHEET v5.2
 * =======================================================*/

/* =======================================================
 * SEARCH RESULTS: LIST VIEW (Table Styling)
 * Includes Table Layout, Typography, and Image Placeholder
 * Scoped to #courseSearchResult_list
 *========================================================*/

/* 1. General Table Style */
#courseSearchResult_list table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;

    /* Remove default borders */
    border: none !important;
}

/* 2. Header Styling (Thead) - Dark Maroon */
#courseSearchResult_list table.table thead th {
    background-color: rgb(52, 17, 26) !important;
    /* Corporate Maroon */
    color: white !important;

    /* Font styling for headers */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;

    padding: 13px 18px !important;
    vertical-align: middle !important;

    /* Custom Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    /* Grey Separator */
    border-bottom: none !important;
}

/* Remove right border from the last header cell */
#courseSearchResult_list table.table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* Style links inside header (sorting arrows) */
#courseSearchResult_list table.table thead th a {
    color: white !important;
    text-decoration: none !important;
}

/* 3. Body Styling (Tbody) - Zebra Striping */

/* Odd Rows (1, 3...) -> Light Grey */
#courseSearchResult_list table.table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows (2, 4...) -> White */
#courseSearchResult_list table.table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. Cell Styling (Td) */
#courseSearchResult_list table.table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;

    /* Soft borders between cells */
    border: 1px solid #dee2e6 !important;
    border-top: none !important;

    color: rgb(23, 23, 23) !important;
}

/* 5. Specific column fixes */
/* Ensure the first column (Image/Title) aligns correctly */
#courseSearchResult_list table.table tbody td.firstColumn {
    display: flex;
    align-items: center;
    border: none !important;
    background-color: inherit !important;
    /* Maintain row background color */
}

/* Style the course title link inside the table */
#courseSearchResult_list .courseName a {
    color: #34111a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 8px !important;
    /* Spacing from image */
}

/* =======================================================
 * LIST VIEW: AVAILABILITY STATUS (Green Pill)
 * Styles the 'Available' badge with icon and custom shape
 * Scoped to #courseSearchResult_list
 *========================================================*/

/* 1. The Badge Container (Green Shape) */
#courseSearchResult_list .courseAvailability_available {
    /* --- Background & Color --- */
    background-color: #3EC3A4 !important;
    /* Green */
    color: white !important;

    /* --- Custom Border Radius (The Shape) --- */
    /* Top-Left, Top-Right, Bottom-Right, Bottom-Left */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;

    /* --- Layout & Spacing --- */
    display: inline-block !important;
    /* Essential for padding to work */
    padding: 6px 15px 6px 12px !important;
    /* Gives the text room to breathe */
    white-space: nowrap !important;
    /* Prevents breaking on small screens */

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    /* Bold */
    font-size: 0.7rem !important;
    /* Adjusted size for table context */
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* 2. The Icon (Check Circle) */
#courseSearchResult_list .courseAvailability_available::before {
    /* --- Font Awesome Icon --- */
    content: "\f058";
    /* check-circle */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    /* Solid style */

    /* --- Sizing & Alignment --- */
    font-size: 1em !important;
    /* Slightly larger than text */
    margin-right: 6px !important;
    /* Space between icon and text */
    vertical-align: -1px !important;
    /* Optical alignment fix */
    color: #fff !important;
}

/* =======================================================
 * COMPONENT: UNAVAILABLE BADGE (FINAL WIDTH FIX)
 * Target: .courseAvailability_not_yet_available
 * Fixes: Collapses width of hidden text & Font conflicts
 * Optimized for: Modern Campus PV 2025.2
 * =======================================================*/

/* 1. Base Container (The Pill Shape) */
#courseSearchResult_list .courseAvailability_not_yet_available {
    /* --- CRITICAL FIX: COLLAPSE ORIGINAL TEXT WIDTH --- */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;

    /* --- Shape & Layout --- */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;

    /* --- Spacing --- */
    padding: 6px 15px 6px 12px !important;
    height: auto !important;

    /* --- Neutral Styling --- */
    background-color: #F5F5F5 !important;
    /* Light Grey */
    border: 1px solid #E0E0E0 !important;
    /* Subtle Border */
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* 2. THE ICON (Using ::before) */
/* Calendar (\f073) is Solid (900) - Safe for Destiny One */
#courseSearchResult_list .courseAvailability_not_yet_available::before {
    content: "\f073";
    /* fa-calendar-alt */

    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: lighter !important;

    /* --- RESTORE SIZE HERE --- */
    font-size: 0.7rem !important;
    line-height: 1 !important;

    color: #757575 !important;
    margin-right: 6px !important;

    /* Ensure visibility since parent is font-size: 0 */
    visibility: visible !important;
}

/* 3. THE NEW TEXT (Using ::after) */
/* "Check Back" text using Brand Font */
#courseSearchResult_list .courseAvailability_not_yet_available::after {
    content: "Check Back";

    font-family: 'Montserrat', sans-serif !important;

    /* --- RESTORE SIZE HERE --- */
    font-size: 0.7rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #616161 !important;

    /* Ensure visibility since parent is font-size: 0 */
    visibility: visible !important;
}

/* 4. Hover Effect (User Feedback) */
#courseSearchResult_list .courseAvailability_not_yet_available:hover {
    background-color: #EEEEEE !important;
    border-color: #BDBDBD !important;
}

/* 5. Hover Effect on Text/Icon */
#courseSearchResult_list .courseAvailability_not_yet_available:hover::before,
#courseSearchResult_list .courseAvailability_not_yet_available:hover::after {
    color: #424242 !important;
}


/* =======================================================
 * SEARCH RESULTS LIST: PERFECT ALIGNMENT FIX (MASTER)
 * Scope: #courseSearchResult_list (List View Only)
 * Includes: Flexbox Layout, Typography, and Image Icons
 * =======================================================*/

/* --- 1. LAYOUT SURGERY (The Indentation Fix) --- */

/* A. The Cell Container (Align Image | Text Block) */
#courseSearchResult_list table.table tbody td.firstColumn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* Vertically center image and text block */
    justify-content: flex-start !important;
    border-top: none !important;
    padding: 15px !important;
}

/* B. The Text Block Wrapper (Generic div inside cell) */
/* This creates the structural column for text next to the image */
#courseSearchResult_list table.table tbody td.firstColumn>div {
    display: flex !important;
    flex-direction: column !important;
    /* Stack Title on top of Code */
    align-items: flex-start !important;
    /* Left align text */
    justify-content: center !important;

    /* THE KEY: Structural padding instead of margins on elements */
    padding-left: 20px !important;
    flex: 1 !important;
    /* Take up remaining space */
}

/* --- 2. TYPOGRAPHY & LINKS --- */

/* Course Title Specifics (Dark Brown + Block Behavior) */
#courseSearchResult_list .courseName a {
    color: #34111a !important;
    /* MacEwan Dark Brown */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    /* Better reading for multi-line */
    text-decoration: none !important;

    /* Layout Reset */
    display: block !important;
    margin-left: 0 !important;
    /* Margin handled by parent div padding */
}

/* Generic Link Fallback (Red) */
#courseSearchResult_list table.table tbody td a {
    color: #8b2331 !important;
    /* MacEwan Red */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

/* Hover States */
#courseSearchResult_list table.table tbody td a:hover,
#courseSearchResult_list .courseName a:hover {
    color: #8b2331 !important;
    /* Red on hover */
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
}

/* Course Code Typography */
#courseSearchResult_list .courseCode {
    color: #a6a6a6 !important;
    /* Light Grey */
    font-family: 'Montserrat', sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .79rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .01rem !important;
    text-transform: uppercase !important;

    /* Layout Reset */
    display: block !important;
    margin-left: 0 !important;
    /* Reset old margin */
    margin-top: 4px !important;
    /* Spacing between Title and Code */
}

/* --- 3. IMAGE PLACEHOLDER & ICONS --- */

/* Hide original broken image */
#courseSearchResult_list img.noImage {
    display: none !important;
}

/* Fix for Image Links Wrapper */
#courseSearchResult_list table.table a:has(img) {
    text-decoration: none !important;
    border: none !important;
    flex-shrink: 0 !important;
    /* Prevent image box from squashing */
}

/* Style the Placeholder Container (The Box) */
#courseSearchResult_list table.table a:has(img.noImage) {
    display: block !important;
    position: relative !important;
    width: 100px !important;
    /* Fixed Size */
    height: 60px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* Inject the Icon */
#courseSearchResult_list table.table a:has(img.noImage)::before {
    content: "\f19d";
    /* Graduation Cap */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Absolute Centering */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* Styling */
    font-size: 1.8rem !important;
    color: #ced4da !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* Icon Hover Effect */
#courseSearchResult_list table.table a:has(img.noImage):hover::before {
    color: #8b2331 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* =======================================================
 * SEARCH RESULTS VIEW TABS (List / Grid)
 * Custom styling for the toggle tabs (v3 - Smooth Fix)
 *========================================================*/

/* 1. Base Style (Inactive State) */
#courseSearchResult_container .nav-tabs .nav-link {
    /* --- Background Grey for inactive --- */
    background-color: #f0f0f0 !important;

    /* --- Text (Inactive keeps grey for hierarchy) --- */
    color: #555555 !important;

    /* --- Typography (Uppercase) --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.58 !important;
    text-transform: uppercase !important;

    /* --- Borders and Spacing --- */
    border: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    margin-right: 2px !important;
    padding: 8px 15px !important;
    padding-left: 0.6rem !important;

    /* --- Border Top (Invisible in inactive state) --- */
    /* We set a transparent border first so the transition has a starting point */
    border-top: 3px solid transparent !important;
    /* Adjust padding to match the active state's height logic */
    padding-top: 6px !important;

    /* --- SMOOTH TRANSITION --- */
    /* We animate specific properties. Note: removed '!important' from inside transition syntax */
    transition: background-color 0.3s ease, color 0.3s ease, border-top-color 0.3s ease !important;
}

/* 2. Active Style (Selected State) */
#courseSearchResult_container .nav-tabs .nav-link.active {
    /* --- White Background --- */
    background-color: #FFFFFF !important;

    /* --- Text Color #171717 --- */
    color: #171717 !important;

    /* --- Maroon Top Bar (3px) --- */
    border-top-color: #8b2331 !important;
    /* We change color, not width, for smoother effect */

    /* --- Other Borders --- */
    border-bottom: 1px solid #ffffff !important;
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;

    /* Typography consistency */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* 3. Icons inside Tabs */
#courseSearchResult_container .nav-link .glyphicon {
    margin-right: 5px;
    font-size: 0.9em;
}

/* 4. Tab Container Cleanup */
#courseSearchResult_container .nav-tabs {
    border-bottom: 1px solid #dee2e6 !important;
    margin-bottom: 15px !important;
}

/* =======================================================
 * SEARCH RESULTS: GRID VIEW COMPLETE STYLING
 * Structure: Modern Cards (White Box, Shadow, Hover)
 * Typography: Corporate Fonts, Colors, and Layout
 * Scoped to #courseSearchResult_grid
 *========================================================*/

/* 1. Grid Container Setup */
#courseSearchResult_grid ul.grid {
    display: grid !important;
    /* Responsive columns: As many as fit (min 280px wide) */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. The Card Item (The White Box) */
#courseSearchResult_grid ul.grid li {
    /* --- RESET BOOTSTRAP/SYSTEM STYLES (The Fix) --- */
    float: none !important;
    /* Disable float */
    width: auto !important;
    /* Let CSS Grid control the width */
    padding: 0 !important;
    /* Remove the 15px padding */
    margin: 0 !important;
    /* Remove bottom margins (Gap handles this) */
    border: none !important;
    /* Reset potential borders */

    /* --- Appearance --- */
    background-color: #FFFFFF !important;
    border: 1px solid #dee2e6 !important;
    /* Re-apply our border */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 4px !important;

    /* --- Layout (Flex Column) --- */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;

    /* --- Animation --- */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover Effect: Lift and Deep Shadow */
#courseSearchResult_grid ul.grid li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

/* 3. The Card Image */
#courseSearchResult_grid ul.grid li img {
    width: 100% !important;
    height: 180px !important;
    /* Fixed height for uniformity */
    object-fit: cover !important;
    /* Crop center, don't stretch */
    border-bottom: 1px solid #eee !important;
}

/* 4. Typography: Course Title (with Maroon Bar) */
#courseSearchResult_grid .courseName {
    display: block !important;
    padding: 15px 15px 5px 15px !important;
    /* Spacing around title */
}

#courseSearchResult_grid .courseName a {
    /* --- Layout (Vertical Bar) --- */
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    display: inline-block !important;

    /* --- Font Styling --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;

    /* --- Color --- */
    color: #34111a !important;
    text-decoration: none !important;

    margin-bottom: 5px !important;
}

/* 5. Typography: Course Code (Grey Uppercase) */
#courseSearchResult_grid .courseCode {
    display: block !important;
    padding: 0 15px 10px 15px !important;
    /* Spacing */

    /* --- Font Styling --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.79rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01rem !important;

    /* --- Color --- */
    color: #a6a6a6 !important;
}

/* 6. Typography: Links (Location / Delivery) */
/* Targets links inside .courseCampuses or .courseDelivery */
#courseSearchResult_grid .courseCampuses,
#courseSearchResult_grid .courseDelivery {
    padding: 0 15px 15px 15px !important;
    font-size: 0.9rem !important;
    color: #171717 !important;

    /* Pushes the footer to the bottom if content is short */
    flex-grow: 1 !important;
}

#courseSearchResult_grid .courseCampuses a,
#courseSearchResult_grid .courseDelivery a,
#courseSearchResult_grid a[id^="linkinstructionMethod"] {
    color: #8b2331 !important;
    /* Red Link */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    transition: color .3s, text-decoration-color .3s !important;
}

/* Link Hover State */
#courseSearchResult_grid .courseCampuses a:hover,
#courseSearchResult_grid .courseDelivery a:hover,
#courseSearchResult_grid a[id^="linkinstructionMethod"]:hover {
    color: #34111a !important;
    /* Dark Brown Hover */
    text-decoration-color: #34111a !important;
}

/* 7. Availability Footer (Sticky Bottom) */
#courseSearchResult_grid .courseAvailability {
    display: block !important;
    margin-top: auto !important;
    /* Sticks to bottom */
    padding: 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    border-top: 1px solid #eee !important;
    background-color: #f9f9f9 !important;
    /* Light footer bg */
}

/* Specific State Colors (Optional enhancement) */
#courseSearchResult_grid .courseAvailability_available {
    color: #3EC3A4 !important;
    /* Green text for available */
    background-color: #fff !important;
    /* Light green bg */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 15px;
    font-size: 0.7rem !important;
}

/* =======================================================
 * GRID VIEW: UNAVAILABLE BADGE ("Check Back")
 * Target: .courseAvailability_not_yet_available inside #courseSearchResult_grid
 * Logic: Hides original text, replaces with Icon + "Check Back"
 * =======================================================*/

/* 1. Base Container (The Card Footer) */
#courseSearchResult_grid .courseAvailability_not_yet_available {
    /* --- HIDE ORIGINAL TEXT --- */
    font-size: 0 !important;
    color: transparent !important;

    /* --- Grid Footer Styling (Matches .courseAvailability_available structure) --- */
    display: block !important;
    /* Block to fill the footer width */
    background-color: #fff !important;
    /* Light Gray background for "inactive" look */
    padding: 12px !important;
    text-align: center !important;
    border-top: 1px solid #eee !important;

    /* --- Specific Radius from your provided code --- */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 4px;
    /* Standard card corner */
    border-bottom-left-radius: 15px;
    /* Your custom flair */

    /* --- Layout --- */
    line-height: 1 !important;
    height: auto !important;
    text-decoration: none !important;
}

/* 2. THE ICON (Calendar - Solid) */
#courseSearchResult_grid .courseAvailability_not_yet_available::before {
    content: "\f073";
    /* fa-calendar-alt */

    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    /* Solid */

    font-size: 0.8rem !important;
    /* Matches Grid scale */
    color: #9E9E9E !important;
    /* Neutral Grey Icon */
    margin-right: 6px !important;

    visibility: visible !important;
    vertical-align: middle !important;
}

/* 3. THE TEXT ("CHECK BACK") */
#courseSearchResult_grid .courseAvailability_not_yet_available::after {
    content: "Check Back";

    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #757575 !important;
    /* Darker Grey Text */

    visibility: visible !important;
    vertical-align: middle !important;
}

/* 4. Hover Effect */
#courseSearchResult_grid .courseAvailability_not_yet_available:hover {
    background-color: #e0e0e0 !important;
    /* Darkens slightly */
}

#courseSearchResult_grid .courseAvailability_not_yet_available:hover::after,
#courseSearchResult_grid .courseAvailability_not_yet_available:hover::before {
    color: #424242 !important;
    /* Text gets darker */
}

/* =======================================================
 * OPTION B: REPLACE MISSING IMAGE WITH ICON
 * Style: Centered Thumbnail (90% width, 80px height)
 * uses absolute positioning for icon alignment.
 *========================================================*/

/* 1. Hide the original "Not Available" image */
#courseSearchResult_grid ul.grid li img.noImage {
    display: none !important;
}

/* 2. Style the container (the <a> tag) */
#courseSearchResult_grid ul.grid li a:has(img.noImage) {
    /* Use block display, but position relative is vital for the child */
    display: block !important;
    position: relative !important;

    /* --- Sizing (Thumbnail Look) --- */
    width: 90% !important;
    height: 80px !important;

    /* --- Decoration --- */
    background-color: #f9f9f9 !important;
    /* border-bottom: 1px solid #eee !important; */
    /* Optional: Removed for cleaner thumbnail look */
    border-radius: 8px !important;

    /* --- Positioning within the card --- */
    margin-top: 15px !important;
    /* Push down from top */
    margin-left: auto !important;
    /* Auto margin centers the 90% width */
    margin-right: auto !important;
    /* Auto margin centers the 90% width */
    margin-bottom: 0 !important;

    /* --- Cursor --- */
    cursor: pointer !important;
    text-decoration: none !important;
}

/* 3. Inject the Font Awesome Icon (The Fix) */
#courseSearchResult_grid ul.grid li a:has(img.noImage)::before {
    content: "\f19d";
    /* Graduation Cap */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* --- ABSOLUTE CENTERING TRICK --- */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* This moves the icon back by 50% of its own width/height to center it perfectly */
    transform: translate(-50%, -50%) !important;

    /* --- Styling (Adjusted for 80px height) --- */
    font-size: 2.5rem !important;
    /* Reduced from 4rem to fit nicer */
    color: #ced4da !important;

    /* Transition needs to handle transform too */
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* 4. Hover Effect (Updated for Absolute Position) */
#courseSearchResult_grid ul.grid li:hover a:has(img.noImage)::before {
    color: #8b2331 !important;

    /* !! IMPORTANT !! */
    /* We must keep the translate(-50%, -50%) and ADD the scale */
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* =======================================================
 * MOBILE FIX: LIST VIEW ALIGNMENT
 * Fixes the "hanging indent" issue on long titles.
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Target the DIV that wraps Course Name & Code */
    /* This is the second child of the first column (after the image) */
    #courseSearchResult_list table.table tbody td.firstColumn>div {
        /* Force the text block to fill the remaining width */
        flex: 1 !important;

        /* Apply the spacing HERE instead of on the text itself */
        padding-left: 15px !important;

        /* Ensure strict left alignment */
        text-align: left !important;

        /* Prevent the box from collapsing */
        min-width: 0 !important;
    }

    /* 2. RESET margins on the individual text elements */
    /* We remove the old margin so it doesn't double up or indent wrongly */
    #courseSearchResult_list .courseName a {
        margin-left: 0 !important;
        display: block !important;
        /* Ensures it behaves as a block */
    }

    #courseSearchResult_list .courseCode {
        margin-left: 0 !important;
        text-align: left !important;
    }
}


/* ============================================
   CHECKOUT PROGRESS TRACKER - FINAL VERSION
   All steps show checkmarks (completed, active, and future)
   ============================================ */
@media (min-width: 769px) {

    /* Base Layout */
    #checkoutBreadcrumb .breadcrumb {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 25px 0 !important;
        background-color: #f0f0f0 !important;
    }

    #checkoutBreadcrumb .breadcrumb-item {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 10px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    /* Base circle for ALL items */
    #checkoutBreadcrumb .breadcrumb .breadcrumb-item::before {
        content: "✓" !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        margin-right: 8px !important;
        border-radius: 50% !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
    }

    /* ============================================
   COMPLETED STEPS (before .active)
   ============================================ */
    #checkoutBreadcrumb .breadcrumb .breadcrumb-item:has(~ .active)::before {
        content: "✓" !important;
        background-color: #8b2331 !important;
        color: #fff !important;
        border: 2px solid #8b2331 !important;
    }

    #checkoutBreadcrumb .breadcrumb .breadcrumb-item:has(~ .active) {
        color: #8b2331 !important;
    }

    /* ============================================
   CURRENT STEP (.active) - CHECKMARK WITH HALO
   ============================================ */
    #checkoutBreadcrumb .breadcrumb .breadcrumb-item.active::before {
        content: "✓" !important;
        background-color: #8b2331 !important;
        color: #fff !important;
        border: 2px solid #8b2331 !important;
        transform: scale(1.3) !important;
        box-shadow: 0 0 0 4px rgba(139, 35, 49, 0.2) !important;
        margin-right: 14px !important;
    }

    #checkoutBreadcrumb .breadcrumb .breadcrumb-item.active {
        color: #8b2331 !important;
        font-weight: 900 !important;
    }

    /* ============================================
   FUTURE STEPS (after .active) - GREY CHECKMARK
   ============================================ */
    #checkoutBreadcrumb .breadcrumb .active~.breadcrumb-item::before {
        content: "✓" !important;
        background-color: #f8f9fa !important;
        border: 2px solid #ccc !important;
        color: #ccc !important;
    }

    #checkoutBreadcrumb .breadcrumb .active~.breadcrumb-item {
        color: #999 !important;
    }

    /* ============================================
   CONNECTING LINES
   ============================================ */
    #checkoutBreadcrumb .breadcrumb .breadcrumb-item:not(:last-child)::after {
        content: "" !important;
        display: block !important;
        position: relative !important;
        width: 40px !important;
        height: 4px !important;
        background-color: #8b2331 !important;
        margin: 0 8px !important;
        border-radius: 2px !important;
        flex-shrink: 0 !important;
    }

    /* Grey lines for active step and future steps */
    #checkoutBreadcrumb .breadcrumb .breadcrumb-item.active::after {
        background-color: #a6a6a6 !important;
    }

    #checkoutBreadcrumb .breadcrumb .active~.breadcrumb-item::after {
        background-color: #a6a6a6 !important;
    }
}

/* =======================================================
 * PROFILE BUTTON - PILL STYLE (Ultra Specific - No Conflicts)
 * Target: ONLY #buttonProfileUpdate (Specific ID)
 * DOES NOT affect global .btn-secondary or other elements
 * =======================================================*/

/* 1. PILL BASE STYLE - ID ONLY */
#buttonProfileUpdate {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Pill Shape */
    border-radius: 2rem !important;
    padding: 8px 20px !important;

    /* Visual Style */
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #555 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0 !important;
    /* ← HIDE ORIGINAL TEXT */
    text-decoration: none !important;
    text-transform: none !important;

    /* Smooth Transition */
    transition: all 0.3s ease !important;

    /* Remove float for better control */
    float: none !important;
}

/* 2. ICON INJECTION (Edit/Pencil) */
#buttonProfileUpdate::before {
    content: "\f044";
    /* fa-edit (pencil) */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    /* Solid */

    margin-right: 8px !important;
    font-size: 1rem !important;
    color: inherit !important;
}

/* 3. NEW OPTIMIZED TEXT */
#buttonProfileUpdate::after {
    content: "Edit Profile";
    /* ← NEW UX-OPTIMIZED COPY */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    color: inherit !important;
}

/* 4. HOVER STATE */
#buttonProfileUpdate:hover {
    background-color: #fff !important;
    border-color: #8b2331 !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* 5. FOCUS STATE */
#buttonProfileUpdate:focus {
    box-shadow: 0 0 0 3px rgba(139, 35, 49, 0.1) !important;
}

/* 6. MOBILE RESPONSIVE */
@media (max-width: 767px) {

    #buttonProfileUpdate {
        width: 100% !important;
        margin-bottom: 15px !important;
        padding: 12px 20px !important;
    }

    #buttonProfileUpdate::after {
        font-size: 0.9rem !important;
    }

    #buttonProfileUpdate.float-right {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =======================================================
 * CART HEADER STYLING (Fixed Layout)
 * Uses Flexbox 'stretch' for full-height borders.
 * Relies on Bootstrap classes for widths.
 *========================================================*/

/* 1. The Header Row Container (The Maroon Bar) */
.cartContainerColumnHeaders {
    /* --- Appearance --- */
    background-color: rgb(52, 17, 26) !important;
    /* Maroon */
    color: white !important;
    border: 1px solid rgb(52, 17, 26) !important;
    /* Outer border */
    border-bottom: none !important;

    /* --- Layout Engine --- */
    display: flex !important;
    flex-wrap: nowrap !important;
    /* Prevents columns from dropping */

    /* !! CRITICAL FIX FOR BORDERS !! */
    /* Forces all columns to be exactly the same height */
    align-items: stretch !important;

    /* Reset Bootstrap margins/paddings to prevent overflow */
    margin-bottom: 10px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 2. The Columns (Direct divs inside the header) */
.cartContainerColumnHeaders>div {
    /* --- RESET WIDTHS (Let Bootstrap Decide) --- */
    /* We do NOT set width here. We let .col-lg-5, etc. work */
    flex-basis: auto !important;

    /* --- Content Alignment --- */
    display: flex !important;
    align-items: center !important;
    /* Centers text vertically */
    padding: 13px 18px !important;
    /* Padding inside the cell */

    /* --- The Right Border (Separator) --- */
    /* Applied to the DIV, so it stretches full height */
    border-right: 1px solid rgb(221, 221, 221) !important;

    /* Ensure no other borders interfere */
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* 3. Remove border from the last column (Subtotal) */
.cartContainerColumnHeaders>div:last-child {
    border-right: none !important;
}

/* 4. Typography Styling (Spans) */
/* Ensures the text inside matches your font specs */
.cartContainerColumnHeaders .cartHeader,
.cartContainerColumnHeaders span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: white !important;
}



/* =======================================================
 * CART ITEM STYLING
 * Typography and Links styling to match Search Results.
 *========================================================*/

/* 1. Main Link Styling (Course Title) */
.cartItemDescriptionContainer .cartItemName a {
    /* --- Typography & Color --- */
    color: #8b2331 !important;
    /* MacEwan Red */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    /* Bold */
    font-size: 0.9rem !important;
    /* Slightly larger for importance */

    /* --- Decoration --- */
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;

    /* --- Transition --- */
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
}

/* Hover State */
.cartItemDescriptionContainer .cartItemName a:hover {
    color: #34111a !important;
    /* Dark Brown */
    text-decoration-color: #34111a !important;
}

/* 2. "Remove" Link Styling */
.cartItemUpdateLinksContainerItemColumn .cartRemoveItem a {
    color: #8b2331 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    /* Semi-bold */
    font-size: 0.9rem !important;

    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;

    transition: color 0.3s ease !important;
}

/* Remove Link Hover */
.cartItemUpdateLinksContainerItemColumn .cartRemoveItem a:hover {
    color: #34111a !important;
    text-decoration-color: #34111a !important;
}

/* 3. Course Code Styling (Grey & Uppercase) */
/* Matches the style from the Grid View */
.cartItemDescriptionContainer .cartItemCode {
    color: #a6a6a6 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .79rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .01rem !important;
    text-transform: uppercase !important;
    margin-top: 5px !important;
}

/* 4. Badge Styling (Optional - "Course" Label) */
.cartItemDescriptionContainer .label-courseBadge {
    background-color: #E9E5E5;
    color: #34111A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 4px 10px 4px 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 50px;
}

.cartItemDescriptionContainer .label-courseBadge::before {
    content: "\f02d";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px;
    color: #8e2736;
}

/* ====================================================
 * MACEWAN SCE - CART BUTTONS REDESIGN
 * Author: Ricardo Alfonso Sanchez (Francotirador Method)
 * Date: 2026-01-16
 * Version: PRODUCTION MASTER v4.0 (Universal Fix)
 * Includes: Mobile Layout Fix, Touch Targets, Icon Injection
 * =======================================================*/

/* =======================================================
 * MOBILE CART - VIEWPORT < 768px
 * Strategy: Vertical Stack, 50px Touch Targets
 * =======================================================*/
@media (max-width: 767px) {

    /* 1. UNIVERSAL CONTAINER LAYOUT (Fixes Standard & Bundles) */
    /* Target BOTH the 'ul' (Standard) AND the '.cartItemUpdateLinksSection' (Bundles) */
    .cartItemUpdateLinksContainerMobile ul.list-inline,
    .cartItemUpdateLinksContainerMobile .cartItemUpdateLinksSection {
        display: flex !important;
        flex-direction: column !important;
        /* Force Vertical Stack */
        gap: 15px !important;
        /* Space between buttons */
        padding-left: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* 1.1 GHOST BUSTER (Crucial for Bundles) */
    /* Makes the browser ignore the span wrappers so flexbox works */
    .cartItemUpdateLinksContainerMobile .cartItemUpdateLinksSection>span {
        display: contents !important;
    }

    /* 1.2 RESET LIST ITEMS */
    .cartItemUpdateLinksContainerMobile li.list-inline-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 2. BUTTON BASE STYLE (Golden Rule: 50px White Pill) */
    /* Applies to .btn inside EITHER container */
    .cartItemUpdateLinksContainerMobile .btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;

        /* FORCE HEIGHT (Touch Friendly) */
        min-height: 50px !important;
        height: auto !important;

        /* TYPOGRAPHY */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        text-decoration: none !important;
        white-space: normal !important;

        /* SKIN */
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #555555 !important;
        border-radius: 50px !important;
        padding: 0 15px !important;
        transition: all 0.3s ease !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }

    /* 3. HOVER STATE (Maroon) */
    .cartItemUpdateLinksContainerMobile .btn:hover {
        background-color: #fff !important;
        border-color: #8b2331 !important;
        color: #8b2331 !important;
        transform: translateY(-2px) !important;
    }

    /* 4. ICON PROTECTION & CONFIGURATION */
    .cartItemUpdateLinksContainerMobile .btn i,
    .cartItemUpdateLinksContainerMobile .btn .fa,
    .cartItemUpdateLinksContainerMobile .btn .fas,
    .cartItemUpdateLinksContainerMobile .btn .fa-icon-injected,
    .cartItemUpdateLinksContainerMobile .btn::before {
        /* Include pseudo-elements */
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        margin-right: 10px !important;
        font-size: 1.1em !important;
        line-height: 1 !important;
        color: inherit !important;
        display: inline-block !important;
        font-style: normal !important;
    }

    /* 5. ICON INJECTION (THE MISSING PIECE) */
    /* Standard Items were "Naked". We inject icons here via CSS */

    /* Trash Icon for Remove */
    .cartItemUpdateLinksContainerMobile .cartRemoveItem .btn::before {
        content: "\f2ed" !important;
    }

    /* Bookmark Icon for Save */
    .cartItemUpdateLinksContainerMobile .cartSaveForLater .btn::before {
        content: "\f02e" !important;
    }

    /* Cart Icon for Add (Safety fallback) */
    .cartItemUpdateLinksContainerMobile .cartAddSavedItem .btn::before {
        content: "\f217" !important;
    }

}

/* END Mobile */


/* =======================================================
 * DESKTOP CART - VIEWPORT >= 992px
 * Strategy: Compact 32px Pills & Checkout Layout
 * =======================================================*/
@media (min-width: 992px) {

    /* 1. CONTAINER LAYOUT (Checkout Buttons) */
    body div#shoppingCartContent form div.shoppingCartButtonsTop div.col-12,
    body div#shoppingCartContent form div.shoppingCartButtonsBottom div.col-12,
    body .shoppingCartButtonsTop .col-12,
    body .shoppingCartButtonsBottom .col-12,
    body .form-row.buttons .col-12 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
    }

    /* 2. PRIMARY BUTTONS (Checkout & Keep Shopping) */
    body button#buttonCheckoutTop.btn.btn-primary.cartCheckoutButton,
    body button#buttonCheckoutBottom.btn.btn-primary.cartCheckoutButton,
    body button#buttonKeepShopping.btn.btn-secondary {
        /* Shared Styles */
        background-image: none !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        width: auto !important;
        min-width: 180px !important;
        max-width: 250px !important;
        height: auto !important;
        padding: 1.25rem 1.9rem !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.942rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        transition: background-color 0.3s ease !important;
    }

    /* Specific Colors */
    body button#buttonCheckoutTop.btn.btn-primary.cartCheckoutButton,
    body button#buttonCheckoutBottom.btn.btn-primary.cartCheckoutButton {
        background-color: #d51f37 !important;
        border: 1px solid #d51f37 !important;
    }

    body button#buttonKeepShopping.btn.btn-secondary {
        background-color: #8b2331 !important;
        border: 1px solid #8b2331 !important;
    }

    /* Hover States */
    body button#buttonCheckoutTop.btn.btn-primary.cartCheckoutButton:hover,
    body button#buttonCheckoutBottom.btn.btn-primary.cartCheckoutButton:hover,
    body button#buttonKeepShopping.btn.btn-secondary:hover {
        background-color: #34111A !important;
        border-color: #34111A !important;
    }

    /* 3. SECONDARY ACTION PILLS (Standard & Bundles) */
    /* Target Standard Items (li) AND Bundle Links (onclick) */
    #mainContent li.cartRemoveItem a,
    #mainContent li.cartSaveForLater a,
    a[onclick*="changeSectionSelection"],
    a[onclick*="doRemoveBundleFromTransactionBasket"],
    a[onclick*="saveBundleForLater"] {

        /* Shape: Compact 32px Pill */
        background-color: #ffffff !important;
        background-image: none !important;
        border: 1px solid #ced4da !important;
        border-radius: 2rem !important;
        color: #555555 !important;
        padding: 6px 16px !important;
        min-height: 32px !important;
        /* Fixed Desktop Height */

        /* Layout */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: auto !important;
        margin: 0 5px 0 0 !important;

        /* Typography */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        /* Smaller for Desktop */
        text-decoration: none !important;
        text-transform: none !important;
        transition: all 0.3s ease !important;
    }

    /* Hover States for Pills */
    #mainContent li.cartRemoveItem a:hover,
    #mainContent li.cartSaveForLater a:hover,
    a[onclick*="changeSectionSelection"]:hover,
    a[onclick*="doRemoveBundleFromTransactionBasket"]:hover,
    a[onclick*="saveBundleForLater"]:hover {
        border-color: #8b2331 !important;
        color: #8b2331 !important;
        text-decoration: none !important;
    }

    /* 4. ICON INJECTION (Desktop) */
    /* Standard & Bundles */

    /* Trash Icon */
    #mainContent li.cartRemoveItem a::before,
    a[onclick*="doRemoveBundleFromTransactionBasket"]::before {
        content: "\f2ed" !important;
    }

    /* Bookmark Icon */
    #mainContent li.cartSaveForLater a::before,
    a[onclick*="saveBundleForLater"]::before {
        content: "\f02e" !important;
    }

    /* Cubes Icon (Select Bundle) */
    a[onclick*="changeSectionSelection"]::before {
        content: "\f1b3" !important;
    }

    /* Add Cart Icon */
    a[onclick*="doAddSavedItemToCart"]::before {
        content: "\f217" !important;
    }

    /* Universal Icon Style */
    #mainContent li.cartRemoveItem a::before,
    #mainContent li.cartSaveForLater a::before,
    a[onclick*="changeSectionSelection"]::before,
    a[onclick*="doRemoveBundleFromTransactionBasket"]::before,
    a[onclick*="saveBundleForLater"]::before,
    body button.cartCheckoutButton::before {
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
        font-weight: 900 !important;
        margin-right: 8px !important;
        font-size: 1rem !important;
        color: inherit !important;
        display: inline-block !important;
    }

    /* Checkout Icon Specific */
    body button.cartCheckoutButton::before {
        content: "\f07a" !important;
        /* Shopping Cart */
        font-size: 1.1em !important;
    }

    /* 5. CLEANUP (Hide Duplicates) */
    #buttonCheckoutTop i,
    #buttonCheckoutBottom i,
    #buttonKeepShopping i,
    #mainContent li.cartRemoveItem a i,
    #mainContent li.cartSaveForLater a i,
    .cartItemUpdateLinksContainerItemColumn a i,
    #cartCheckoutLockIconTop,
    #cartCheckoutLockIconBottom,
    span.cartCheckoutLockIcon,
    .cartCheckoutLockIcon.glyphicon {
        display: none !important;
        visibility: hidden !important;
    }

}

/* =======================================================
 * 6. CONFLICT RESOLVER (NUCLEAR SPECIFICITY FIX)
 * Fixes: #mainContent ID overriding our .architect-pill class
 * Target: Resurrects JS Icons & Kills CSS Ghost Icons
 * =======================================================*/

/* A. KILL GHOST ICONS (The Anti-Ghost Gun) */

#mainContent li .architect-pill::before,
#mainContent li a.architect-pill::before,
#mainContent .architect-pill::before,
body .architect-pill::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
}

/* B. RESURRECT JS ICONS (The Defibrillator) */
#mainContent li .architect-pill i.architect-icon,
#mainContent li a.architect-pill i.architect-icon,
#mainContent .architect-pill i.architect-icon,
body .architect-pill i.architect-icon {
    display: inline-block !important;
    /* <--- AQUÍ ESTÁ LA CLAVE */
    visibility: visible !important;
    opacity: 1 !important;

    /* Restaurar estilo correcto */
    margin-right: 6px !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
    color: inherit !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
}

/* C. SAFETY NET FOR FONT AWESOME CLASSES */
.architect-pill .fas,
.architect-pill .fa {
    display: inline-block !important;
}

/* END Desktop */

/* =======================================================
 * MODULE: CART BUNDLE ACTIONS - V4.4 (FORCE 50PX MOBILE)
 * Strategy: Desktop = 32px Compact | Mobile = 50px Touch Friendly
 * =======================================================*/

/* 1. DESKTOP BASE STYLES (Default: 32px) */
body .cartItemUpdateLinksSection a[onclick*="changeSectionSelection"],
body .cartItemUpdateLinksSection a[onclick*="doRemoveBundleFromTransactionBasket"],
body .cartItemUpdateLinksSection a[onclick*="saveBundleForLater"] {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Desktop Dimensions */
    padding: 6px 16px !important;
    height: auto !important;
    min-height: 32px !important;

    /* Shape & Typography */
    border-radius: 2rem !important;
    border: 1px solid rgb(206, 212, 218) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgb(85, 85, 85) !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    margin: 5px 0 0 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* 2. ICONS (Desktop & Mobile) */
body a[onclick*="changeSectionSelection"]::before {
    content: "\f1b3" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #555 !important;
}

body a[onclick*="doRemoveBundleFromTransactionBasket"]::before {
    content: "\f2ed" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: inherit !important;
}

body a[onclick*="saveBundleForLater"]::before {
    content: "\f02e" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: inherit !important;
}

/* 3. HOVER STATES */
body .cartItemUpdateLinksSection a:hover {
    color: #8b2331 !important;
    border-color: #8b2331 !important;
}

body .cartItemUpdateLinksSection a:hover::before {
    color: #8b2331 !important;
}

/* =======================================================
 * 4. MOBILE OVERRIDE ENGINE (Max Width 991px)
 * FORCE 50px Height for Touch Accessibility
 * =======================================================*/

@media (max-width: 991px) {

    /* A. Layout: Flex Grid for Mobile Container */
    .cartItemUpdateLinksContainerMobile .cartItemUpdateLinksSection {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .cartItemUpdateLinksContainerMobile .cartItemUpdateLinksSection>span {
        display: contents !important;
    }

    /* B. BUTTONS: OVERRIDE DESKTOP STYLES -> FORCE 50px */
    body .cartItemUpdateLinksSection a[onclick*="changeSectionSelection"],
    body .cartItemUpdateLinksSection a[onclick*="doRemoveBundleFromTransactionBasket"],
    body .cartItemUpdateLinksSection a[onclick*="saveBundleForLater"] {
        text-transform: uppercase !important;
        min-height: 50px !important;
        /* FORCE HEIGHT */
        height: 50px !important;
        /* FORCE HEIGHT */
        font-size: 14px !important;
        /* LARGER TEXT */
        padding: 0 20px !important;
        /* ADJUST PADDING FOR CENTERING */
        flex-grow: 1 !important;
        /* FILL SPACE */
        margin: 0 !important;
    }
}


/* =======================================================
 * MODULE: SAVED FOR LATER SECTION (MASTER PACK)
 * Includes: Grey Container, Header Icon, & Dotted Separators
 * =======================================================*/

/* 1. THE GREY BOX CONTAINER */
#savedForLaterListContent {
    background-color: #fff !important;
    /* Fixed: Solid Grey */
    padding: 15px 15px 5px 15px !important;
    border-radius: 4px !important;
    margin-top: 20px !important;
    border: 1px dotted #e6e6e6 !important;
    /* Added: Subtle border definition */

    /* Layout Safety */
    display: block !important;
    box-sizing: border-box !important;
}

/* 2. THE HEADER ICON (Bookmark) */
/* Target: Only the header inside the Saved List */
#savedForLaterListHeader .shoppingCartSectionHeader::before {
    content: "\f02e" !important;
    /* fa-bookmark */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

    /* Branding */
    color: #171717 !important;
    /* MacEwan Maroon */
    font-size: 2rem !important;

    /* Alignment */
    margin-right: 10px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -2px !important;
    line-height: 1 !important;
}

/* 3. DOTTED SEPARATORS (Design System) */

/* A. The Top Empty Separator */
.savedForLaterListContainer>.form-row:empty {
    border-bottom: 1px dotted #cccccc !important;
    margin: 20px 8px !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    float: none !important;
}

/* B. The Saved Items (Courses) */
/* Forces items to match the dotted style */
#savedSections .form-row {
    border-bottom: 1px dotted #cccccc !important;
    /* Override Solid */
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
}


/* =======================================================
 * CART FEE ALIGNMENT: STACKED & LEFT ALIGNED
 * Stacks "Fee" on top of details, aligned to the left edge.
 *========================================================*/

/* 1. The Main Container (Fieldset) */
/* Controls the vertical stacking */
.cartItemFeeGroup fieldset {
    display: flex !important;
    flex-direction: column !important;
    /* Stack items vertically */
    align-items: flex-start !important;
    /* Align everything to the LEFT */
    width: 100% !important;
}

/* 2. The Header ("Fee") */
.cartItemFeeHeader {
    width: 100% !important;
    text-align: left !important;
    /* Force left alignment */
    margin-bottom: 2px !important;
    /* Minimal space between title and content */
    padding: 0 !important;
}

.cartItemFeeHeader legend {
    text-align: left !important;
    font-weight: 700 !important;
    /* Bold for "Fee" */
    margin-bottom: 0 !important;
}

/* 3. The Content Row ("Tuition and Fees $399.00") */
.cartItemFeeGroup .panelSection,
.cartItemFeeGroup .panelRow {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    /* Push content to the LEFT */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. The Description Text & Price Container */
.feeDescriptionContainer {
    display: flex !important;
    flex-direction: row !important;
    /* Keep text and price side-by-side */
    justify-content: flex-start !important;
    /* Left align */
    align-items: center !important;
    flex-wrap: wrap !important;
    /* Allow wrapping if screen is tiny */
}

/* 5. Spacing adjustments */
/* Remove left margin from the first item to align perfectly with "Fee" */
.feeDescriptionContainer>span:first-child {
    margin-left: 0 !important;
}

/* Add space between "Tuition..." and the Price */
.feeDescriptionContainer>span {
    margin-right: 5px !important;
}

/* =======================================================
 * CART IMAGE PLACEHOLDER (Reused Logic)
 * Replaces 'image_not_available' with the Graduation Cap Icon.
 * Scoped to .cartItemFeaturedImageContainer
 *========================================================*/

/* 1. Hide the original "Not Available" image */
/* We target the specific image class inside the container */
.cartItemFeaturedImageContainer img[src*="image_not_available"] {
    display: none !important;
}

/* 2. Style the Container (The Box) */
/* Using :has() to apply styles ONLY when the bad image is present */
.cartItemFeaturedImageContainer:has(img[src*="image_not_available"]) {
    display: block !important;
    position: relative !important;

    /* --- Sizing (Adjusted for Cart Column) --- */
    width: 100% !important;
    height: 100px !important;
    /* Fixed height creates the box shape */

    /* --- Decoration --- */
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;

    /* Ensure content doesn't spill out */
    overflow: hidden !important;
}

/* 3. Inject the Icon (Graduation Cap) */
.cartItemFeaturedImageContainer:has(img[src*="image_not_available"])::before {
    content: "\f19d";
    /* Graduation Cap Icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* --- ABSOLUTE CENTERING --- */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* --- Styling --- */
    font-size: 2.5rem !important;
    /* Good size for the cart */
    color: #ced4da !important;
    /* Subtle Grey */

    /* Smooth Transitions */
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* 4. Hover Effect (Zoom + Red Color) */
.cartItemFeaturedImageContainer:has(img[src*="image_not_available"]):hover::before {
    color: #8b2331 !important;
    /* MacEwan Red */

    /* Zoom effect (keeping centered) */
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* =======================================================
 * CHECKOUT BUTTON ICON SWAP
 * Replaces the default 'Lock' glyphicon with Font Awesome 'Cart'
 *========================================================*/

/* Target the specific span inside the checkout button */
.cartCheckoutButton .cartCheckoutLockIcon::before {
    /* 1. Change the icon Unicode (fa-shopping-cart) */
    content: "\f07a" !important;

    /* 2. Switch Font Family from Glyphicons to Font Awesome */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    /* Solid style */

    /* 3. Visual Tweaks */
    margin-right: 5px !important;
    /* Space between icon and text */
    font-size: 1.1em !important;
    /* Slightly larger for emphasis */
    vertical-align: middle !important;

    /* Optional: Ensure color matches text or is distinct */
    color: inherit !important;
}

/* =======================================================
 * DISCOUNT SYSTEM - COMPLETE v5.0 FINAL
 * Shopping Cart: Ticket card with notches + dotted border
 * Checkout/Payment: Mini badge with dotted border
 * Version: 5.0 Production | Date: 2026-02-11
 * =======================================================*/

/* =====================================================
 * PART 1: SHOPPING CART - TICKET CARD
 * ===================================================== */

/* 1. PARENT WRAPPER - Unified Gradient + Notches + Dotted Border */
.cartItemFeeGroupPriceAdjustment>fieldset {
    position: relative !important;
    background: linear-gradient(160deg, #ffacb7 0%, #8B2331 100%) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    transition: all 0.3s ease !important;
    /* Dotted border interior - NUEVO */
    outline: 2px dotted rgba(255, 255, 255, 0.5) !important;
    outline-offset: -6px !important;
}

.cartItemFeeGroupPriceAdjustment>fieldset:hover {
    transform: translateY(-2px) !important;
}

/* 2. TICKET NOTCHES - Left Side */
.cartItemFeeGroupPriceAdjustment>fieldset::before {
    content: '' !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    z-index: 10 !important;
}

/* 3. TICKET NOTCHES - Right Side */
.cartItemFeeGroupPriceAdjustment>fieldset::after {
    content: '' !important;
    position: absolute !important;
    right: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    z-index: 10 !important;
}

/* 4. HEADER (Top Section) */
.panelRow.cartItemFeeHeader:has([id$="_applyDiscount"]) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 5. CONTAINER (Bottom Section) */
.cartItemDiscountContainer {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 6. CHECKBOX CUSTOM */
.panelRow.cartItemFeeHeader .custom-control-input[id$="_applyDiscount"] {
    position: relative !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
}

.panelRow.cartItemFeeHeader .custom-control-input[id$="_applyDiscount"]:checked {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #fff !important;
}

.panelRow.cartItemFeeHeader .custom-control-input[id$="_applyDiscount"]:checked::after {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #8B2331 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

/* 7. LABEL */
.panelRow.cartItemFeeHeader .custom-control-label {
    font: 700 0.95rem 'Montserrat', sans-serif !important;
    color: #fff !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    user-select: none !important;
}

/* 8. FIX: Hide Bootstrap custom checkbox pseudo-elements (Ghost checkbox fix) */
.panelRow.cartItemFeeHeader .custom-control-label::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.panelRow.cartItemFeeHeader .custom-control-label::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 9. INFO ICON */
.panelRow.cartItemFeeHeader .desktopPopupDialog {
    margin-left: auto !important;
    z-index: 0 !important;
}

.panelRow.cartItemFeeHeader .desktopPopupDialog .glyphicon-question-sign {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 16px !important;
    cursor: help !important;
    transition: all 0.2s ease !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.panelRow.cartItemFeeHeader .desktopPopupDialog .glyphicon-question-sign:hover {
    color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.05) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* 10. HIDE LEGEND HEADER INSIDE CONTAINER */
.cartItemDiscountContainer .cartItemFeeHeader {
    display: none !important;
}

/* 11. SUBTITLE */
.cartItemDiscountContainer .form-check::before {
    content: "Enter your code here, then checkout to activate savings!" !important;
    display: block !important;
    font: 500 0.85rem 'Montserrat', sans-serif !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    line-height: 1.4 !important;
}

/* 12. INPUT BOX (White Card) */
.cartItemDiscountContainer .couponCode {
    display: flex !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

.cartItemDiscountContainer .couponCode input {
    flex: 1 !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 6px !important;
    font: 500 0.9rem 'Montserrat', sans-serif !important;
    background: #fff !important;
    color: #2c3e50 !important;
    transition: all 0.2s ease !important;
}

.cartItemDiscountContainer .couponCode input:focus {
    outline: none !important;
    border-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

.cartItemDiscountContainer .couponCode input::placeholder {
    color: rgba(44, 62, 80, 0.5) !important;
}

/* =====================================================
 * PART 2: CHECKOUT/PAYMENT PAGE - MINI BADGE
 * ===================================================== */

/* 13. DISCOUNT ROW CONTAINER (Checkout Page with gradient + dotted border) */
.cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions {
    background: transparent !important;
    color: #fff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 8px 0 !important;
    transition: all 0.3s ease !important;
    /* Dotted border interior - NUEVO */
    outline-offset: -8px !important;
}

/* 14. CHECKOUT BADGE HOVER */
.cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions:hover {
    transform: translateY(-2px) !important;
}

/* 15. CHECKOUT DISCOUNT CODE LABEL */
.cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions .noColonLabel {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    background: transparent;
    padding: 4px;
    border-radius: 4px;
    border: 1px #fff solid;
}

/* 16. CHECKOUT DISCOUNT AMOUNT */
.cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions .amountCol {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions .negativeAmount {
    color: #8B2331 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    background: #fff;
    padding: 4px;
    border-radius: 4px;
}

.cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions .negativeAmount::before {
    content: "\f02b" !important;
    /* fa-tag */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    /* Solid icons requieren 900 */
    color: #8B2331 !important;
    margin-right: 6px !important;
    display: inline-block !important;
}

/* =====================================================
 * PART 3: RESPONSIVE (Both Cart & Checkout)
 * ===================================================== */

@media (max-width: 767px) {

    /* Shopping Cart Responsive */
    .panelRow.cartItemFeeHeader:has([id$="_applyDiscount"]) {
        padding: 12px 16px !important;
    }

    .cartItemDiscountContainer {
        padding: 16px !important;
    }

    .cartItemDiscountContainer .form-check::before {
        font-size: 0.8rem !important;
        padding: 0 10px !important;
    }

    .cartItemDiscountContainer .couponCode {
        flex-direction: column !important;
    }

    .cartItemDiscountContainer .couponCode input {
        width: 100% !important;
        font-size: 0.85rem !important;
    }

    /* Smaller notches on mobile */
    .cartItemFeeGroupPriceAdjustment>fieldset::before,
    .cartItemFeeGroupPriceAdjustment>fieldset::after {
        width: 16px !important;
        height: 16px !important;
    }

    .cartItemFeeGroupPriceAdjustment>fieldset::before {
        left: -8px !important;
    }

    .cartItemFeeGroupPriceAdjustment>fieldset::after {
        right: -8px !important;
    }

    /* Checkout Badge Responsive */
    .cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        outline-offset: -6px !important;
    }

    .cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions .noColonLabel {
        font-size: 0.85rem !important;
    }

    .cartItemFeeGroupPriceAdjustment .panelRow.cartItemOptions .amountCol {
        font-size: 0.9rem !important;
    }
}


/* =======================================================
 * SHOPPING CART UNIFICATION (Optimized Master v2.1)
 * Cards, Standardized Placeholders, Badges & Product Links
 * Updated: 2024-12-24 - Added surgical product link fix
 * =======================================================*/

/* 1. ROW CARDS (Unified Container) */
/* Apply card style to all rows except headers */
.cartContainer>.form-row:not(.cartContainerColumnHeaders),
#cart-items {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 20px 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Hover Effect */
.cartContainer>.form-row:not(.cartContainerColumnHeaders):hover,
#cart-items:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: #ced4da;
}

/* 2. PLACEHOLDER UNIFICATION (The "AF" Fix) */
/* Transform the "AF" text box to be identical to an image */
.cartItemFeaturedImagePlaceholderText {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 0.25rem !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* Inject Icon (Money Bill for Fees) */
.cartItemFeaturedImagePlaceholderText::before {
    content: "\f3d1";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: #ced4da;
    transition: all 0.3s ease;
}

/* Hover on Placeholder */
.cartItemFeaturedImagePlaceholderText:hover::before {
    color: #8b2331;
    transform: translate(-50%, -50%) scale(1.1);
}

/* 3. TYPOGRAPHY (Titles & Links) */

/* 3A. Cart Item Name Container (Base) */
.cartItemName {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.2em !important;
    margin-bottom: 5px;
    display: block;
}

/* 3B. Product Link (SURGICAL FIX - High Specificity) */
.cartItemDescriptionContainer .cartItemName a[id^="courseProfile"] {
    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    /* Colors - Design System */
    color: #8b2331 !important;
    text-decoration: underline !important;

    /* Display */
    display: inline-block !important;
    padding-bottom: 2px !important;
    margin-bottom: 5px !important;

    /* Transition */
    transition: color 0.2s ease, border-bottom-color 0.2s ease !important;
}

/* Product Link Hover */
.cartItemDescriptionContainer .cartItemName a[id^="courseProfile"]:hover {
    color: #34111a !important;
    text-decoration: none !important;
}

/* Product Link Focus (Accessibility) */
.cartItemDescriptionContainer .cartItemName a[id^="courseProfile"]:focus {
    outline-offset: 2px !important;
    color: #8b2331 !important;
}

/* Normalize <strong> tag inside product link */
.cartItemDescriptionContainer .cartItemName a[id^="courseProfile"] strong {
    font-weight: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* 3C. Fallback for any other cart links (lower specificity) */
.cartItemName a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    line-height: 1.2em !important;
    color: #34111A !important;
    text-decoration: none !important;
    display: block;
}

.cartItemName a:hover {
    color: #8b2331 !important;
    text-decoration: underline !important;
}

/* 3D. Cart Item Code */
.cartItemCode {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    color: #a6a6a6 !important;
    margin-bottom: 10px;
    font-weight: 500 !important;
}

/* 4. BADGES (Unified Geometry) */
.badge.label-courseBadge,
.badge.label-otherFeeBadge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px !important;
    border-radius: 0.25rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    margin-bottom: 12px !important;
}

/* Badge Colors */
.badge.label-courseBadge {
    background-color: #E9E5E5 !important;
    color: #34111A !important;
}

.badge.label-otherFeeBadge {
    background-color: #fcece4 !important;
    color: #8b2331 !important;
}

/* Badge Icons */
.badge.label-courseBadge::before {
    content: "\f02d";
    margin-right: 6px;
    font-family: "Font Awesome 5 Free", sans-serif;
}

.badge.label-otherFeeBadge::before {
    content: "\f155";
    margin-right: 6px;
    font-family: "Font Awesome 5 Free", sans-serif;
}

/* 5. CERTIFICATE BADGE (if needed) */
.cartItemDescriptionContainer .label-certificateBadge {
    background-color: #E9E5E5 !important;
    color: #34111A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 0.25rem !important;
    margin-bottom: 12px !important;
    margin-top: 5px !important;
}

.cartItemDescriptionContainer .label-certificateBadge::before {
    content: "\f559";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #8e2736 !important;
    font-size: 0.9em !important;
}

/* =======================================================
 * MODULE: 5A - SAVED BUNDLE CERTIFICATE BADGE (MIRROR STYLE)
 * Target: Badge inside 'Saved Bundles' section
 * Transformation: Green (Default) -> Grey/Maroon (Custom)
 * =======================================================*/

/* A. CONTAINER STYLE (The Grey Pill) */
/* Selector potente para sobrescribir el verde por defecto */
#savedBundles .label-certificateBadge,
.savedForLaterListDetails .label-certificateBadge {
    background-color: #00A0DD !important;
    /* Override Green with Grey */
    color: #fff !important;
    /* Maroon Text */

    /* Typography Mirror */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Layout Mirror */
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 0.25rem !important;
    margin-bottom: 12px !important;
    margin-top: 5px !important;

    /* Reset defaults */
    border: none !important;
    line-height: normal !important;
}

/* B. ICON INJECTION (The Ribbon) */
/* Adds the FontAwesome Certificate icon */
#savedBundles .label-certificateBadge::before,
.savedForLaterListDetails .label-certificateBadge::before {
    content: "\f559" !important;
    /* fa-certificate */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

    /* Icon Style */
    margin-right: 8px !important;
    color: #1B3768 !important;
    /* Maroon Accent */
    font-size: 0.9em !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 6. METRICS & ACTIONS */
.shoppingCartAmount,
.cartItemFee {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #34111A !important;
    margin-bottom: 1rem;
}

.cartItemUpdateLink a {
    font-size: 0.85rem;
    color: #a6a6a6 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #999;
    transition: all 0.2s ease;
    font-weight: 500 !important;
}

.cartItemUpdateLink a:hover {
    color: #D41F37 !important;
    border-bottom: 1px solid #D41F37 !important;
}

/* =======================================================
 * RESPONSIVE ADJUSTMENTS
 * =======================================================*/

/* Mobile Product Link Adjustment */
@media (max-width: 767px) {
    .cartItemDescriptionContainer .cartItemName a[id^="courseProfile"] {
        font-size: 1rem !important;
    }
}


/* =======================================================
 * CERTIFICATE BADGE STYLING (Cart Item)
 * Target: .label-certificateBadge
 * Style: Grey background, Maroon text, Certificate Icon
 * =======================================================*/

/* 1. Badge Container Styling */
.cartItemDescriptionContainer .label-certificateBadge {
    /* --- Colors --- */
    background-color: #00A0DD !important;
    /* Light Grey Background */
    color: #fff !important;
    /* Dark Maroon Text */

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Bold */
    font-size: 0.7rem !important;
    /* Small but readable */
    text-transform: uppercase !important;
    /* All Caps */
    letter-spacing: 0.5px !important;

    /* --- Shape & Layout --- */
    display: inline-flex !important;
    /* Keeps icon and text aligned */
    align-items: center !important;
    padding: 6px 12px !important;
    /* Breathing room */
    border-radius: 0.25rem !important;
    /* Standard small radius */

    /* Spacing relative to surrounding elements */
    margin-bottom: 12px !important;
    margin-top: 5px !important;
    /* Space from top edge */
}

/* 2. Icon Injection (Certificate/Award) */
.cartItemDescriptionContainer .label-certificateBadge::before {
    /* Icon: fa-certificate (Starburst) or fa-file-certificate (Document) */
    /* Using fa-certificate (\f559) as it's very distinct */
    content: "\f559";

    /* Font Awesome Definitions */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    /* Solid style */

    /* Icon Styling */
    margin-right: 8px !important;
    /* Space between icon and text */
    color: #1B3768 !important;
    /* MacEwan Bright Red for Icon */
    font-size: 0.9em !important;
    /* Slightly smaller than text cap height */
}


/* 5. METRICS & ACTIONS */
.shoppingCartAmount,
.cartItemFee {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #34111A !important;
    margin-bottom: 1rem;
}

.cartItemUpdateLink a {
    font-size: 0.85rem;
    color: #a6a6a6 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #999;
    transition: all 0.2s ease;
    font-weight: 500 !important;
}

.cartItemUpdateLink a:hover {
    color: #D41F37 !important;
    border-bottom: 1px solid #D41F37 !important;
}

/* =======================================================
 * MODULE: MOBILE CART ACTIONS (GOLDEN PILL EDITION)
 * Fixes: 
 * 1. Thin buttons (Inline style override via min-height)
 * 2. Icon Font Family protection (FontAwesome 5)
 * 3. Style: White Pill (Default) -> Maroon (Hover)
 * =======================================================*/

@media (max-width: 767px) {

    /* 1. CONTAINER LAYOUT (Vertical Stack) */
    .cartItemUpdateLinksContainerMobile ul.list-inline {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .cartItemUpdateLinksContainerMobile li.list-inline-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 2. BUTTON BASE STYLE (The Nuclear Fix + Golden Rule) */
    .cartItemUpdateLinksContainerMobile .btn {
        /* --- LAYOUT FIXES --- */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;

        /* FORCE HEIGHT (Overrides inline padding: 2px) */
        min-height: 50px !important;
        height: auto !important;

        /* --- TYPOGRAPHY --- */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        text-decoration: none !important;
        white-space: normal !important;

        /* --- GOLDEN RULE STYLE (Initial State: White) --- */
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        /* Soft Grey Border */
        color: #555555 !important;
        /* Grey Text */
        border-radius: 50px !important;
        /* Pill Shape */

        /* --- SPACING --- */
        margin-bottom: 0 !important;
        padding: 0 15px !important;

        /* --- TRANSITION --- */
        transition: all 0.3s ease !important;
        box-shadow: none !important;
    }

    /* 3. ICON PROTECTION (Crucial Fix) */
    /* Forces the icon to use FontAwesome, ignoring parent font */
    .cartItemUpdateLinksContainerMobile .btn i,
    .cartItemUpdateLinksContainerMobile .btn .fa,
    .cartItemUpdateLinksContainerMobile .btn .fas,
    .cartItemUpdateLinksContainerMobile .btn .fa-icon-injected {

        /* Force correct font family */
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;

        /* Layout & Size */
        margin-right: 10px !important;
        font-size: 1.1em !important;
        line-height: 1 !important;

        /* Color Inheritance (Matches text color) */
        color: inherit !important;

        /* Safety resets */
        display: inline-block !important;
        vertical-align: middle !important;
        font-style: normal !important;
    }

    /* 4. HOVER STATE (Interaction -> Maroon) */
    .cartItemUpdateLinksContainerMobile .btn:hover {
        background-color: #fff !important;
        /* Maroon Fill */
        border-color: #8b2331 !important;
        color: #8b2331 !important;
        /* White Text */
        transform: translateY(-2px) !important;
    }

    /* 5. ACTIVE / FOCUS STATE (Press Effect) */
    .cartItemUpdateLinksContainerMobile .btn:active,
    .cartItemUpdateLinksContainerMobile .btn:focus {
        background-color: #fff !important;
        /* Darker Maroon */
        border-color: #8b2331 !important;
        color: #8b2331 !important;
        transform: translateY(1px) !important;
        outline: none !important;
    }
}



/* =======================================================
 * CHECKOUT BUTTONS SPACING FIX
 * Targets the specific nesting in the checkout flow
 * to ensure gap between Keep Shopping & Checkout.
 * =======================================================*/

/* Select internal column inside .buttons container */
.form-row.buttons .col-12 {
    display: flex !important;
    flex-direction: column !important;
    /* Apilar verticalmente */
    gap: 20px !important;
    /* THE SPACE YOU NEED */
}

/* UX OPTIONAL: Invert order */
/* (Checkout top because it's main action, Keep Shopping bottom) */
#buttonCheckoutBottom {
    order: 1 !important;
}

#buttonKeepShopping {
    order: 2 !important;
}

/* =======================================================
 * REGISTRATION POLICIES LINK (Final Clean Version)
 * Style: Left Aligned, Underlined Text.
 * Interaction: Ghost Chevron (No Underline) on Hover.
 * =======================================================*/

/* 1. THE CONTAINER (The Divider Line) */
.regPolicies {
    /* Strict left alignment */
    text-align: left !important;

    /* The separator line */
    border-top: 1px solid #e9ecef !important;

    /* Block spacing */
    margin-top: 20px !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    width: 100% !important;

    /* Ensure child absolute elements aren't cut */
    overflow: visible !important;
}

/* 2. THE LINK (Text) */
.regPolicies a {
    /* POSITIONING: Vital so arrow knows where to go */
    position: relative !important;
    display: inline-block !important;
    /* Do NOT use flex here to avoid conflicts */

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    /* Stabilizes line height */

    /* Colors and Decoration */
    color: #8b2331 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.3) !important;

    /* Invisible right margin so arrow has space when appearing */
    margin-right: 25px !important;

    transition: all 0.3s ease !important;
}

/* 3. HOVER STATE (Text darkens) */
.regPolicies a:hover {
    color: #34111a !important;
    text-decoration-color: #34111a !important;
}

/* 4. THE GHOST CHEVRON (Arrow) */
.regPolicies a::after {
    content: "\f054";
    /* fa-chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* --- SURGICAL POSITIONING --- */
    position: absolute !important;

    /* Mathematical Vertical Centering */
    top: 50% !important;
    transform: translateY(-50%);

    /* MANUAL OPTICAL ADJUSTMENT: */
    /* If too high, increase this number (e.g. 3px) */
    /* If too low, put negative numbers (e.g. -1px) */
    margin-top: 1px !important;

    /* Initial State (Hidden) */
    right: -10px;
    /* Starts a bit inside */
    opacity: 0;

    /* Visual Styles */
    font-size: 0.8em !important;
    color: inherit !important;
    /* Inherits text color */
    text-decoration: none !important;
    /* Ensure NO UNDERLINE */
    border: none !important;

    transition: all 0.3s ease !important;
}

/* 5. HOVER (Arrow Appearance) */
.regPolicies a:hover::after {
    opacity: 1;
    /* Aparece */
    right: -20px;
    /* Moves to its final position */
}

/* =======================================================
 * MOBILE ADJUSTMENT (Optional Center alignment for Mobile)
 * =======================================================*/
@media (max-width: 767px) {
    .regPolicies {
        text-align: center !important;
        /* On mobile looks better centered */
    }

    /* Increase touch area on mobile */
    .regPolicies a {
        padding: 10px !important;
    }
}

/* =======================================================
 * PAYMENT PAGE - PROFILE SUMMARY CONTAINER (Design System v2026.1)
 * Target: form[name="publicPaymentInfoForm"] > .card.panel-default
 * Pattern: LIGHT HIGHLIGHT (Organizational/Reference)
 * Reason: User profile metadata during checkout - informational context
 * Change: Added border-left to complete Light Highlight Pattern
 * Context: Inside publicPaymentInfoForm
 * =======================================================*/

/* Target: The "Profile Summary" card INSIDE the payment form */
form[name="publicPaymentInfoForm"]>.card.panel-default {
    /* Light Highlight Pattern */
    background-color: #f0f0f0 !important;
    /* Already correct */
    border-left: 0.4rem solid #8b2331 !important;
    /* ADDED: Maroon left border */

    /* Spacing - Preserved */
    padding: 30px 15px 15px 15px !important;
    margin-bottom: 1.5rem !important;
    border-radius: 4px !important;

    /* Remove other borders */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;

    /* Shadow */
    box-shadow: none !important;
}

/* Fine Tuning: The Card Header (where it says "Profile Summary") */
/* Sometimes the header has its own white background that covers the grey. This fixes it. */
form[name="publicPaymentInfoForm"]>.card.panel-default>.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #d1d5db !important;
    /* A subtle separator line */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 15px !important;
}

/* Fine Tuning: The title "Profile Summary" */
form[name="publicPaymentInfoForm"]>.card.panel-default .card-title {
    color: #34111A !important;
    /* MacEwan Dark Maroon */
    font-weight: 700 !important;
    font-size: 1.2rem !important;
}

/* =======================================================
 * PAYMENT PAGE - PROFILE DATA INNER CARD
 * Context: Inside publicPaymentInfoForm > PersonProfileWrapper
 * Style: White Surface with Shadow (Card-in-Card effect)
 * =======================================================*/

form[name="publicPaymentInfoForm"] #PersonProfileWrapper {
    background-color: #FFFFFF !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 8px !important;
    overflow: hidden !important;

    /* RECOMMENDATION: Add a bit of extra padding so 
       text doesn't hit the new border */
    padding: 20px !important;
}

/* =======================================================
 * PAYMENT PAGE - PROFILE LABELS TYPOGRAPHY
 * Context: Inside publicPaymentInfoForm > PersonProfileWrapper
 * Style: Bold Labels
 * =======================================================*/

form[name="publicPaymentInfoForm"] #PersonProfileWrapper .readonlyFieldLabel {
    font-weight: 700 !important;
    /* The bold you asked for */
    color: #333333 !important;
    /* Dark gray for maximum readability */
    font-family: 'Montserrat', sans-serif !important;
    /* We ensure brand font */
    display: block !important;
    /* Ensures they occupy their space correctly */
    margin-bottom: 2px !important;
    /* A small breather before the data */
}


/* =======================================================
 * PAYMENT PAGE - PRINT POLICIES LINK
 * Context: Inside #paymentPolicyConfirmationContainer
 * Style: MacEwan Utility Link (Maroon + Icon)
 * =======================================================*/

/* 1. Base Link Styling */
#paymentPolicyConfirmationContainer a#printPoliciesLink {
    color: #8b2331 !important;
    /* MacEwan Maroon */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    /* Semibold to make it pop */
    text-decoration: none !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    /* Flex to align the icon */
    align-items: center !important;
    margin-top: 1rem !important;
    /* Spacing to breathe from checkbox */
    transition: all 0.2s ease-in-out !important;
    border-bottom: 1px solid transparent !important;
    /* Prepares the hover */
}

/* 2. Hover State */
#paymentPolicyConfirmationContainer a#printPoliciesLink:hover {
    color: #34111A !important;
    /* Dark Maroon */
    text-decoration: none !important;
    /* We remove the default */
    border-bottom: 1px solid #34111A !important;
    /* Elegant underline */
}

/* 3. Printer Icon Injection (UI Delight) */
#paymentPolicyConfirmationContainer a#printPoliciesLink::before {
    content: "\f02f" !important;
    /* FontAwesome 'fa-print' */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    font-size: 1rem !important;
    color: #8b2331 !important;
    /* Inherits Maroon */
}

/* 4. Hover Icon Interaction */
#paymentPolicyConfirmationContainer a#printPoliciesLink:hover::before {
    color: #34111A !important;
    transform: scale(1.1);
    /* Small pop on hover */
}


/* =======================================================
 * ERROR MESSAGE TRANSFORMATION (Design System v2026.1)
 * Target: #errorMessageScheduleConflict (Bootstrap Alert)
 * Pattern: DARK HIGHLIGHT (Critical Attention/Urgency)
 * Change: COLORS ONLY - All other properties preserved
 * =======================================================*/

/* 1. OVERWRITE ALERT CONTAINER */
#errorMessageScheduleConflict {
    /* Bootstrap Alerts Reset */
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;

    /* APPLY HIGHLIGHT STYLE (Dark Theme) */
    background-color: #34111a !important;
    /* CHANGED: Dark maroon */

    /* Thick Left Border (Key to Highlight design) */
    border-left: 0.4rem solid #d51f37 !important;
    /* CHANGED: Bright red */

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;

    /* Base Typography */
    color: #ffffff !important;
    /* CHANGED: White text */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
}

/* 2. "WARNING" TITLE (H2) */
#errorMessageScheduleConflict h2 {
    /* Highlight Title Style */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    /* Elegant semi-bold */
    font-size: 1.85rem !important;
    line-height: 1.2 !important;

    /* Color White */
    color: #ffffff !important;
    /* CHANGED: White text */

    /* Margin adjustments */
    margin: 0 0 1rem 0 !important;
    margin-top: -0.2rem !important;
    /* Optical top alignment */
    border: none !important;
    /* Remove borders if global H2 has them */
    padding: 0 !important;
}

/* 3. SUBTITLE (H3 - "Within your current transaction") */
#errorMessageScheduleConflict h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    color: #ffffff !important;
    /* CHANGED: White text */
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* 4. CONFLICT LIST (UL/LI) */
#errorMessageScheduleConflict ul {
    margin-left: 20px !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem !important;
}

#errorMessageScheduleConflict li {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    /* CHANGED: White text */
    margin-bottom: 5px !important;
    list-style-type: disc !important;
    /* Ensure bullets */
}

/* 5. ALL PARAGRAPHS (WCAG Compliance) */
#errorMessageScheduleConflict p {
    color: #ffffff !important;
    /* CHANGED: White text - Explicit for all paragraphs */
}

/* 6. ACTION TEXT (Final P) */
#errorMessageScheduleConflict p:last-child {
    font-weight: 500 !important;
    margin-top: 1rem !important;
}

/* 7. Bold in paragraphs */
#errorMessageScheduleConflict p b,
#errorMessageScheduleConflict p strong {
    color: #ffffff !important;
    /* CHANGED: White text */
}

/* =======================================================
 * LOGIN & CART ERROR MESSAGE (Design System v2026.1)
 * Target: #errorMessage
 * Pattern: DARK HIGHLIGHT (Critical Attention/Urgency)
 * Logic: Integrated Fluid Icon + Flexbox Alignment
 * =======================================================*/

/* 1. MAIN CONTAINER */
#errorMessage {
    /* Reset & Clean Legacy Styles */
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;

    /* Theme: Dark Maroon & Left Red Bar */
    background-color: #34111a !important;
    border-left: 0.4rem solid #d51f37 !important;

    /* Layout & Spacing */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;

    /* Typography base */
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    position: relative !important;
}

/* 2. TITLE WITH FLUID ICON (The "Fina Coquetería" Fix) */
#errorMessage h2 {
    display: flex !important;
    align-items: center !important;
    /* Centrado vertical perfecto */
    gap: 15px;
    /* Espacio horizontal entre icono y texto */

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Injecting the Alert Icon into the Title Flow */
#errorMessage h2::before {
    content: "\f071" !important;
    /* fa-exclamation-triangle */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #d51f37 !important;
    /* Red Icon */
    font-size: 1.6rem !important;
    margin-top: -2px;
    /* Optical alignment adjustment */
}

/* 3. INTRODUCTORY PARAGRAPH */
#errorMessage p {
    margin-bottom: 1rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
}

/* 4. ERROR LIST STYLING */
#errorMessage ul,
#errorMessage .error-message-items {
    margin-left: 25px !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

#errorMessage li {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    list-style-type: disc !important;
    line-height: 1.5 !important;
}

/* 5. LINKS (Accessibility for Dark Background) */
#errorMessage a {
    color: #ff9999 !important;
    /* Light red for contrast */
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.3s ease !important;
}

#errorMessage a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}


/* =======================================================
 * TRANSACTION SUCCESS MESSAGE (Design System v2026.1)
 * Target: #successSaveAlert (Drop Transaction Complete)
 * Pattern: DARK HIGHLIGHT (Success Variant)
 * Logic: High Visual Gravity for Transaction Closure
 * =======================================================*/

#successSaveAlert {
    /* 1. LAYOUT PRESERVATION (Surgical Protocol) */
    --original-padding: .75rem 1.25rem;
    /* From Bootstrap .alert */
    --original-margin: 0 0 1rem 0;

    padding: var(--original-padding) !important;
    margin: var(--original-margin) !important;
    border-radius: 0px !important;

    /* 2. VISUAL OVERRIDE (Dark Success Skin) */
    background-image: none !important;
    background-color: #34111a !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border: none !important;
    border-left: 0.4rem solid #D41F37 !important;


    /* 3. TYPOGRAPHY & CONTRAST */
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    /* 4. ALIGNMENT & ICON */
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

/* Success Icon Injection */
#successSaveAlert::before {
    content: "\f058" !important;
    /* fa-check-circle */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #D41F37 !important;

    font-size: 1.3rem !important;
    display: inline-block !important;
}


/* =======================================================
 * COURSE ENROLLMENT WARNING (Design System v2026.1)
 * Target: .alert.alert-warning containing the inquiry button
 * Pattern: LIGHT HIGHLIGHT (Informative/Procedural)
 * Reason: Pre-approval requirement is informative, not critical error
 * Change: COLORS ONLY - All other properties preserved
 * =======================================================*/

/* 1. ALERT CONTAINER */
/* Use :has() to ensure it only affects this specific alert */
/* If browser doesn't support :has, change first line to only: .alert.alert-warning { */
.alert.alert-warning:has(#buttonCourseInquiry),
.alert.alert-warning {
    /* --- RESET BOOTSTRAP --- */
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;
    color: inherit !important;
    /* Remove ugly warning brown color */

    /* --- HIGHLIGHT STYLE (Light Theme) --- */
    background-color: #f0f0f0 !important;
    /* CHANGED: Light gray background */

    /* Visual Signature: Maroon Left Border */
    border-left: 0.4rem solid #8b2331 !important;
    /* CHANGED: Maroon border (not bright red) */

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;

    /* Base Typography */
    color: #171717 !important;
    /* CHANGED: Dark text */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
}

/* 2. MESSAGE TEXT */
/* We need to separate text from button */
.alert.alert-warning .variable-content-item {
    margin-bottom: 25px !important;
    /* Breathing space before button */
    line-height: 1.6 !important;
    font-weight: 500 !important;
    color: #171717 !important;
    /* CHANGED: Dark text */
}

/* 3. "REQUEST INFORMATION" BUTTON */
/* Ensure it inherits your solid button style */
#buttonCourseInquiry {
    background-color: #8b2331 !important;
    border: 1px solid #8b2331 !important;
    color: #fff !important;

    /* Button Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 30px !important;

    /* Transition */
    transition: all 0.3s ease !important;
    margin-top: 0 !important;
    /* Margin handled by text above */
}

/* Button Hover */
#buttonCourseInquiry:hover {
    background-color: #34111A !important;
    /* Dark Maroon */
    border-color: #34111A !important;
    transform: translateY(-2px);
    /* Small elevation */
}

/* =====================================================
 * DARK HIGHLIGHT - RESERVATION TIMER
 * Element: #confirmationMessageReservationToken
 * Intent: Critical Attention & Interruption
 * Design System: 2026.1
 * Author: Ricardo Sanchez
 * Date: 2026-01-15
 * ===================================================== */

#confirmationMessageReservationToken {
    /* Layout preservation */
    --original-padding: 1.5rem 1.25rem;
    --original-margin: 0 0 1.5rem 0;

    /* Dark Highlight Pattern */
    background-color: #34111a !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-left: 0.4rem solid #d51f37 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-top: none !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-right: none !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-bottom: none !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-radius: 0 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    color: #ffffff !important;
    /* REFACTORED BY DESIGN SYSTEM */

    /* Cleanup */
    background-image: none !important;
    /* REFACTORED BY DESIGN SYSTEM */
    box-shadow: none !important;
    /* REFACTORED BY DESIGN SYSTEM */

    /* Layout */
    padding: var(--original-padding) !important;
    margin: var(--original-margin) !important;
    font-family: 'Montserrat', sans-serif !important;
    /* REFACTORED BY DESIGN SYSTEM */
    line-height: 1.6 !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Headings - WHITE on dark background */
#confirmationMessageReservationToken h1,
#confirmationMessageReservationToken h2,
#confirmationMessageReservationToken h3,
#confirmationMessageReservationToken h4,
#confirmationMessageReservationToken h5,
#confirmationMessageReservationToken h6 {
    color: #ffffff !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-family: 'Montserrat', sans-serif !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-weight: 600 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-size: 2.1756rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
    margin: 0 0 0.75rem 0 !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Urgency icon (red, not pink) */
#confirmationMessageReservationToken h2::before {
    content: "\f071" !important;
    /* fa-exclamation-triangle */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-weight: 900 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    margin-right: 0.5rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
    color: #d51f37 !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Body text - WHITE */
#confirmationMessageReservationToken p,
#confirmationMessageReservationToken li,
#confirmationMessageReservationToken span,
#confirmationMessageReservationToken label {
    color: #ffffff !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-family: 'Montserrat', sans-serif !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

#confirmationMessageReservationToken p {
    margin-bottom: 0 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-size: 1rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Links - PINK (#ff9999) with underline */
#confirmationMessageReservationToken a {
    color: #ff9999 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    text-decoration: underline !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-weight: 600 !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

#confirmationMessageReservationToken a:hover {
    color: #ffcccc !important;
    /* REFACTORED BY DESIGN SYSTEM */
    opacity: 0.9 !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Bold text - WHITE (slightly brighter) */
#confirmationMessageReservationToken b,
#confirmationMessageReservationToken strong {
    color: #ffffff !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-weight: 700 !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* =====================================================
 * COUNTDOWN TIMER - MacEwan Asymmetric Brand Pattern
 * Matches: .courseProfileSectionAvailability pattern
 * ===================================================== */

#confirmationMessageReservationToken #countdownClockTimer {
    /* Typography - Monospace for clarity */
    font-family: 'Courier New', 'Consolas', monospace !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-weight: 700 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-size: 1.4rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
    line-height: 1.2 !important;
    /* REFACTORED BY DESIGN SYSTEM */

    /* Colors - Critical Red */
    color: #d51f37 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    background-color: rgba(213, 31, 55, 0.2) !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border: 1px solid rgba(213, 31, 55, 0.5) !important;
    /* REFACTORED BY DESIGN SYSTEM */

    /* MacEwan Asymmetric Border Radius Pattern */
    border-top-left-radius: 50px !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-top-right-radius: 50px !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-bottom-right-radius: 50px !important;
    /* REFACTORED BY DESIGN SYSTEM */
    border-bottom-left-radius: 4px !important;
    /* REFACTORED BY DESIGN SYSTEM - SIGNATURE */

    /* Layout */
    display: inline-flex !important;
    /* REFACTORED BY DESIGN SYSTEM */
    align-items: center !important;
    /* REFACTORED BY DESIGN SYSTEM */
    padding: 0.4rem 0.8rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
    margin: 0 0.3rem !important;
    /* REFACTORED BY DESIGN SYSTEM */

    /* Ensure visibility */
    vertical-align: middle !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Clock icon before timer */
#confirmationMessageReservationToken #countdownClockTimer::before {
    content: "\f017" !important;
    /* fa-clock - REFACTORED BY DESIGN SYSTEM */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-weight: 900 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    margin-right: 0.5rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
    color: #d51f37 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    font-size: 1.2rem !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Critical state animation (< 5 minutes) */
@keyframes pulse-critical {

    0%,
    100% {
        background-color: rgba(213, 31, 55, 0.2);
        transform: scale(1);
        border-color: rgba(213, 31, 55, 0.5);
    }

    50% {
        background-color: rgba(213, 31, 55, 0.4);
        transform: scale(1.03);
        border-color: rgba(213, 31, 55, 0.8);
    }
}

#confirmationMessageReservationToken.time-critical #countdownClockTimer {
    animation: pulse-critical 1.5s ease-in-out infinite !important;
    /* REFACTORED BY DESIGN SYSTEM */
    color: #ff1744 !important;
    /* REFACTORED BY DESIGN SYSTEM */
    background-color: rgba(255, 23, 68, 0.25) !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

/* Enhanced icon pulsing in critical state */
#confirmationMessageReservationToken.time-critical #countdownClockTimer::before {
    animation: pulse-icon 1s ease-in-out infinite !important;
    /* REFACTORED BY DESIGN SYSTEM */
}

@keyframes pulse-icon {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* =====================================================
 * END DARK HIGHLIGHT REFACTOR
 * ===================================================== */

/* =======================================================
 * COURSE INQUIRY RECEIVED - SUCCESS MESSAGE (Design System v2026.1)
 * Target: .variable-content (Course Inquiry confirmation)
 * Pattern: SUCCESS PATTERN (Confirmation/Completion)
 * Reason: Successful inquiry submission = positive confirmation
 * Change: COLORS ONLY - All other properties preserved
 * Technique: Exclusion Pattern (:not inside login form)
 * =======================================================*/

/* Target: .variable-content inside col-md-12 
   EXCLUDING: If inside portalLogonForm (Login) 
   EXCLUDING: If inside portalStudentHomeForm (Home)
*/
main.col-md-12 #contentModule1>.row>.col-lg-12>.variable-content:not(form .variable-content):not(.form-row .variable-content) {
    /* Success Pattern Design System */
    background-color: #d4edda !important;
    /* CHANGED: Light green success background */
    border-left: 0.4rem solid #3EC3A4 !important;
    /* Turquoise - Already correct ✅ */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    color: #155724 !important;
    /* CHANGED: Dark green text */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    position: relative !important;
    animation: none !important;
}

/* Remove inherited ::before (Liquid Flow) */
main.col-md-12 #contentModule1>.row>.col-lg-12>.variable-content:not(form .variable-content):not(.form-row .variable-content)::before {
    display: none !important;
    content: none !important;
}

/* Success Icon Injection */
main.col-md-12 #contentModule1>.row>.col-lg-12>.variable-content:not(form .variable-content):not(.form-row .variable-content) .variable-content-item::before {
    content: "\f058" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
    font-size: 1.3rem !important;
    color: #3EC3A4 !important;
    /* Turquoise - Already correct ✅ */
}

/* =======================================================
 * COURSE ALREADY IN CART ALERT (Design System v2026.1)
 * Target: #alertCourseProfile (Course Detail Page)
 * Pattern: LIGHT HIGHLIGHT (Informative/Organizational)
 * Reason: Informational alert about cart status, not an error
 * Context: When user tries to add duplicate course
 * Change: COLORS ONLY - All other properties preserved
 * Icon: Shopping cart with continuous pulse animation
 * =======================================================*/

/* 1. MAIN CONTAINER - Light Highlight Design */
#contentModule1 #alertCourseProfile.alert.alert-info,
div#contentModule1 div#alertCourseProfile.alert.alert-info {
    /* --- RESET BOOTSTRAP ALERT --- */
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: inherit !important;

    /* --- LIGHT HIGHLIGHT STYLE --- */
    background-color: #f0f0f0 !important;
    /* CHANGED: Light gray */

    /* Visual Signature: Maroon Left Border */
    border-left: 0.4rem solid #8b2331 !important;
    /* CHANGED: Maroon (not bright red) */

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 2rem 0 !important;

    /* Subtle shadow for depth */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;

    /* Base Typography */
    color: #171717 !important;
    /* CHANGED: Dark text */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;

    /* Remove Bootstrap alert icon if present */
    background-position: 0 0 !important;
    padding-left: 2rem !important;
}

/* 2. LINKS INSIDE ALERT (checkout / continue shopping) */
#contentModule1 #alertCourseProfile.alert.alert-info a,
div#contentModule1 div#alertCourseProfile.alert.alert-info a {
    /* Link Colors - Maroon on light background */
    color: #8b2331 !important;
    /* CHANGED: Maroon */
    text-decoration: underline !important;

    /* Typography */
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;

    /* Smooth transition */
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

/* Link Hover State */
#contentModule1 #alertCourseProfile.alert.alert-info a:hover,
div#contentModule1 div#alertCourseProfile.alert.alert-info a:hover {
    color: #34111a !important;
    /* CHANGED: Dark maroon on hover */
    text-decoration-color: #34111a !important;
}

/* 3. SHOPPING CART ICON with PULSE ANIMATION */
#contentModule1 #alertCourseProfile.alert.alert-info::before,
div#contentModule1 div#alertCourseProfile.alert.alert-info::before {
    content: "\f07a" !important;
    /* fa-shopping-cart */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;

    /* Icon Styling */
    margin-right: 12px !important;
    font-size: 1.3rem !important;
    color: #8b2331 !important;
    /* CHANGED: Maroon icon */

    /* Positioning */
    display: inline-block !important;
    vertical-align: middle !important;

    /* PULSE ANIMATION */
    animation: cart-pulse 2s infinite ease-out !important;
    transform-origin: center center !important;
}

/* 4. KEYFRAMES - Cart Pulse Animation */
@keyframes cart-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* =======================================================
 * LOGIN HELP LINK TRANSFORM (Highlight Card Style)
 * Target: "Why am I being asked to login again?" modal link
 * Page: ONLY Checkout/Login (body#pageCheckoutLogin)
 * Selector: Page-scoped attribute pattern
 * =======================================================*/

/* 1. TRANSFORM LINK INTO CARD (PAGE-SPECIFIC) */
body#pageCheckoutLogin a[id^="linkcontentBlock"][data-toggle="modal"][data-target^="#contentBlock"] {
    /* Card Layout */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* Background and Border */
    background-color: #f0f0f0 !important;
    border-left: 0.4rem solid #8b2331 !important;
    border-radius: 0 !important;

    /* Spacing */
    padding: 1.5rem 2rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;

    /* Text Style */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #8b2331 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.3) !important;

    /* Transition */
    transition: all 0.3s ease !important;

    /* Alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 2. HOVER STATE */
body#pageCheckoutLogin a[id^="linkcontentBlock"][data-toggle="modal"][data-target^="#contentBlock"]:hover {
    background-color: #e9ecef !important;
    color: #34111a !important;
    text-decoration-color: #34111a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 3. QUESTION ICON (::after) - FIXED */
/* NUCLEAR OPTION - Absolute positioning breaks inheritance */
body#pageCheckoutLogin a[id^="linkcontentBlock"][data-toggle="modal"][data-target^="#contentBlock"] {
    /* ... existing styles ... */
    position: relative !important;
    /* Add this */
    padding-right: 3rem !important;
    /* Make space for icon */
}

body#pageCheckoutLogin a[id^="linkcontentBlock"][data-toggle="modal"][data-target^="#contentBlock"]::after {
    content: "\f059" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: #8b2331 !important;

    /* ABSOLUTE POSITIONING - Removes from text flow */
    position: absolute !important;
    right: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* This WILL remove underline */
    text-decoration: none !important;

    /* Animation (adjust transform for hover) */
    transition: transform 0.3s ease, color 0.3s ease !important;
}

/* Hover with absolute positioning */
body#pageCheckoutLogin a[id^="linkcontentBlock"][data-toggle="modal"][data-target^="#contentBlock"]:hover::after {
    transform: translateY(-50%) rotate(15deg) scale(1.1) !important;
    color: #34111a !important;
}

/* FALLBACK */
@supports not (font-family: "Font Awesome 5 Free") {
    body#pageCheckoutLogin a[id^="linkcontentBlock"][data-toggle="modal"][data-target^="#contentBlock"]::after {
        content: "?" !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1.5rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        border: 2px solid #8b2331 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 15px !important;
    }
}




/* =======================================================
 * CONFIRMATION TIMER (Dark Highlight Style)
 * Style: Dark Maroon Background, Bright Red Border.
 * Text: White Transparent (#fff9) for body, Pure White for Title.
 * =======================================================*/

/* 1. THE CONTAINER (Dark Card) */
#confirmationMessage {
    /* --- RESET BOOTSTRAP --- */
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;

    /* --- DARK HIGHLIGHT STYLE --- */
    background-color: #34111a !important;
    /* Dark Maroon */

    /* Bright Left Border (Urgency) */
    border-left: 0.4rem solid #d51f37 !important;
    /* MacEwan Bright Red */

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 0.75rem 0 !important;

    /* Base Typography (Body) */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    /* 105% */

    /* Requested Text Color (#fff9 = White with transparency) */
    color: rgba(255, 255, 255, 0.9) !important;
    /* Note: Using rgba for max compatibility, equals #fff9 */
}

/* 2. "CONFIRMATION" TITLE (H2) */
#confirmationMessage h2 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.5rem !important;

    /* Pure White to stand out slightly on dark background */
    color: #ffffff !important;

    border: none !important;
    padding: 0 !important;
}

/* 3. INTERNAL PARAGRAPH */
#confirmationMessage p {
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
    /* Ensure it inherits transparent white color */
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 4. THE CLOCK (Remaining time) */
/* Make clock glow so it's not lost in dark */
#confirmationMessage b span#countdownClockTimer {
    color: #ffffff !important;
    /* Pure White */
    font-weight: 800 !important;
    font-size: 1.2em !important;

    /* Subtle Red Background to highlight urgency */
    background-color: #d51f37 !important;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


/* =======================================================
 * SERVER ERROR ALERT (Design System: Dark Highlight)
 * Target: .alert.alert-danger (Generic Server Errors)
 * Style: Dark Maroon #34111A + Bright Red Border + Icon
 * =======================================================*/

/* 1. CONTAINER STYLING */
.alert.alert-danger {
    /* --- RESET BOOTSTRAP --- */
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;
    /* Sharp edges */
    text-shadow: none !important;

    /* --- DARK THEME APPLICATION --- */
    background-color: #34111a !important;
    /* Dark Maroon */

    /* Bright Left Border (Urgency Accent) */
    border-left: 0.4rem solid #d51f37 !important;

    /* --- LAYOUT & SPACING --- */
    /* Added extra left padding (50px) to make room for the icon */
    padding: 1.5rem 1.5rem 1.5rem 3.5rem !important;
    margin: 1.5rem 0 1.5rem 0 !important;
    position: relative !important;
    /* Anchor for icon */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;

    /* --- TYPOGRAPHY --- */
    color: #ffffff !important;
    /* White Text */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    /* Improved readability */
    text-align: left !important;
}

/* 2. ICON INJECTION (Exclamation Triangle) */
.alert.alert-danger::before {
    /*content: "\f071";*/
    /* fa-exclamation-triangle */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    /* Solid */

    /* Positioning */
    position: absolute !important;
    left: 20px !important;
    top: 24px !important;
    /* Aligns with first line of text */

    /* Style */
    font-size: 1.2rem !important;
    color: #d51f37 !important;
    /* Match the red border */
}

/* 3. LINK STYLING (For Phone Numbers/Emails inside alert) */
.alert.alert-danger a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.alert.alert-danger a:hover {
    color: #d51f37 !important;
    /* Red on hover */
    text-decoration: none !important;
}


/* =======================================================
 * GLOBAL MOBILE BUTTON OPTIMIZATION
 * Standardizes ALL buttons (.btn) for small screens.
 * Reduces padding/size to prevent overlapping.
 * Does NOT affect desktop.
 *========================================================*/

/* =======================================================
 * MOBILE BUTTONS: GLOBAL OPTIMIZATION & LAYOUT
 * 1. Standardizes button size/text for small screens.
 * 2. Stacks buttons vertically with a gap.
 * 3. Reorders Search/Submit to top, Reset/Cancel to bottom.
 * Scoped to max-width 767px.
 *========================================================*/

@media (max-width: 767px) {

    /* -------------------------------------------------------
     * A. BUTTON APPEARANCE (The "Look")
     * Targets ALL buttons to be compact and full-width.
     * ------------------------------------------------------- */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-default,
    .cartCheckoutButton,
    button[type="submit"],
    input[type="button"] {
        /* 1. COMPACT SIZING */
        padding: 0.9rem !important;
        font-size: 0.85rem !important;

        /* 2. FULL WIDTH LAYOUT */
        width: 100% !important;
        max-width: 100% !important;

        /* 3. TEXT WRAPPING (Safety) */
        white-space: normal !important;
        height: auto !important;

        /* 4. ALIGNMENT */
        vertical-align: middle !important;
        line-height: 1.3 !important;

        /* 5. RESET MARGINS (Let container handle spacing) */
        margin: 0 !important;
    }

    /* Icon Sizing Fix */
    .btn .glyphicon,
    .btn .fa,
    .cartCheckoutButton span {
        margin-right: 5px !important;
        font-size: 1em !important;
    }

    /* -------------------------------------------------------
     * B. BUTTON CONTAINER LAYOUT (The "Stacking")
     * Transforms the button wrapper into a Flex Column.
     * ------------------------------------------------------- */
    .buttons,
    .searchForm .buttons {
        display: flex !important;
        flex-direction: column !important;
        /* Stack vertically */
        gap: 15px !important;
        /* 15px Space between buttons */
        width: 100% !important;
        padding: 0 !important;
        /* Reset container padding if any */
    }

    /* -------------------------------------------------------
     * C. REORDERING LOGIC (Search First, Reset Last)
     * ------------------------------------------------------- */

    /* PRIMARY ACTIONS (Go to Top) */
    /* Search, Submit, Continue, Checkout */
    .buttons .btn-primary,
    button[type="submit"],
    #buttonSearch,
    #buttonContinue,
    #buttonCheckoutTop {
        order: 1 !important;
    }

    /* SECONDARY ACTIONS (Go to Bottom) */
    /* Reset, Cancel, Back */
    .buttons .btn-secondary,
    .buttons .btn-default,
    #buttonReset,
    #buttonCancel,
    button[value="Reset"],
    button[value="Cancel"] {
        order: 2 !important;
    }
}


/* =======================================================
 * EMPTY CART MESSAGE LINK ("Log in")
 * Target: #emptyAnonymousCartMessage
 * Goal: Apply standard MacEwan styling + Login Icon.
 * =======================================================*/

/* 1. GENERAL PARAGRAPH TEXT (Context) */
#emptyAnonymousCartMessage p {
    font-family: 'Montserrat', sans-serif !important;
    color: #333333 !important;
    /* Readable dark grey */
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    /* Separation from bottom button */
}

/* 2. "LOG IN" LINK (Corporate Style) */
#emptyAnonymousCartMessage p a {
    /* Brand Identity */
    color: #8b2331 !important;
    /* MacEwan Maroon */
    font-weight: 700 !important;
    /* Bold to highlight action */

    /* Link Decoration */
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    /* Maroon Underline */

    /* Smooth Transition */
    transition: all 0.3s ease !important;
}

/* 3. ICON INJECTION (Sign In Alt) */
#emptyAnonymousCartMessage p a::before {
    content: "\f2f6";
    /* fa-sign-in-alt */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Spacing & Alignment */
    margin-right: 6px !important;
    font-size: 0.9em !important;
    /* Slightly smaller than text for balance */

    /* Color Inheritance (Matches the link text) */
    color: inherit !important;
    text-decoration: none !important;
    /* No underline for the icon */
    display: inline-block !important;
    /* Fixes underline issues in some browsers */
}

/* 4. HOVER STATE (Interaction) */
#emptyAnonymousCartMessage p a:hover {
    color: #34111A !important;
    /* Dark Maroon */
    text-decoration-color: #34111A !important;
    cursor: pointer !important;
}

/* Optional: Slight movement on hover for the icon */
#emptyAnonymousCartMessage p a:hover::before {
    transform: translateX(2px);
    /* Nudge icon to the right */
    transition: transform 0.3s ease;
}

/* =======================================================
 * MODULE: STUDENT LOGIN PAGE REDESIGN (Final Version)
 * - Left: Existing User (Dark Animated Mesh)
 * - Right: New User (Clean White)
 * - Buttons: Both use Primary Red Pattern per instruction.
 *========================================================*/

/* 1. THE CONTAINER (Wrapper) */
#studentLoginOptionsContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 900px !important;
    margin: 40px auto !important;

    /* Card Shape */
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* -------------------------------------------------------
 * 2. LEFT COLUMN: EXISTING USER (Dark Animated Mesh)
 * ------------------------------------------------------- */
#existingStudentDiv {
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    /* Appearance */
    background-color: #34111A !important;
    color: #ffffff !important;
    position: relative;
    z-index: 1;

    /* Animation Vars */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    --x-0: 20%;
    --y-0: 30%;
    --x-1: 80%;
    --y-1: 20%;
    --x-2: 60%;
    --y-2: 70%;
    --x-3: 30%;
    --y-3: 80%;

    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;
    animation: dark-mesh-flow 60s infinite ease-in-out alternate !important;
}

/* -------------------------------------------------------
 * 3. RIGHT COLUMN: NEW USER (Clean White)
 * ------------------------------------------------------- */
#newStudentDiv {
    padding: 40px !important;
    background-color: #ffffff !important;
    color: #34111A !important;
    position: relative;
    z-index: 2;

    /* Clear animations */
    background-image: none !important;
    animation: none !important;
}

/* =======================================================
 * TYPOGRAPHY
 *========================================================*/
/* Left Header (White on Dark) */
#existingStudentDiv h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 1.8rem !important;
    margin-bottom: 10px !important;
    border: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Right Header (Dark on White) */
#newStudentDiv h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    font-size: 1.8rem !important;
    margin-bottom: 20px !important;
    border: none !important;
    text-shadow: none !important;
}

/* Helper Text */
#variableContentBlockPG0014 {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 20px;
}

#newStudentDiv #variableContentBlockPG0015 {
    color: #555555 !important;
}

/* =======================================================
 * INPUTS
 *========================================================*/
/* Left (Glassmorphism) */
#existingStudentDiv .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    backdrop-filter: blur(5px);
    height: 50px !important;
    border-radius: 4px !important;
}

#existingStudentDiv label {
    color: white !important;
}

#existingStudentDiv .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Right (Standard) */
#newStudentDiv .form-control {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #171717 !important;
    height: 50px !important;
    border-radius: 4px !important;
}

#newStudentDiv label {
    color: #34111a !important;
}

/* =======================================================
 * BUTTONS (Both Red)
 *========================================================*/

/* 1. LEFT BUTTON: "Log In" (#buttonContinueCheckoutExisting) */
#buttonContinueCheckoutExisting {
    width: 100% !important;
    margin-top: 15px !important;

    /* Primary Red Style */
    background-color: #8b2331 !important;
    border: 2px solid #8b2331 !important;
    color: #FFFFFF !important;

    /* Typography & Size */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 1.25rem 1.9rem !important;
    /* Large Padding */

    transition: all 0.3s ease !important;
}

#buttonContinueCheckoutExisting:hover {
    background-color: #34111A !important;
    /* Dark Brown Hover */
    border-color: #34111A !important;
    color: #FFFFFF !important;
}

/* 2. RIGHT BUTTON: "Create Account" (#buttonContinueCheckout) */
#buttonContinueCheckout {
    width: 100% !important;
    margin-top: 20px !important;

    /* Primary Red Style */
    background-color: #8b2331 !important;
    border: 2px solid #8b2331 !important;
    color: #FFFFFF !important;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 1.25rem 1.9rem !important;

    transition: all 0.3s ease !important;
}

#buttonContinueCheckout:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
    color: #FFFFFF !important;
}

/* =======================================================
 * LINKS & UX
 *========================================================*/
.forgot-credential-container a {
    color: #ffffff !important;
    /* White links on Dark Left */
    text-decoration: underline !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: opacity 0.3s ease !important;
}

.forgot-credential-container a:hover {
    color: #D41F37 !important;
    opacity: 0.8 !important;
}

/* Flex Reorder for Left Column */
#portalNativeLoginPanel form {
    display: flex !important;
    flex-direction: column !important;
}

#portalNativeLoginPanel .form-group:has(#userName) {
    order: 1 !important;
    margin-bottom: 5px !important;
}

#portalNativeLoginPanel .forgot-credential-container:has(#forgotUserNameLink) {
    order: 2 !important;
    text-align: right !important;
    margin-bottom: 20px !important;
}

#portalNativeLoginPanel .form-group:has(#password) {
    order: 3 !important;
    margin-bottom: 5px !important;
}

#portalNativeLoginPanel .forgot-credential-container:has(#forgotPasswordLink) {
    order: 4 !important;
    text-align: right !important;
    margin-bottom: 20px !important;
}

#portalNativeLoginPanel .buttons {
    order: 5 !important;
}

#portalNativeLoginPanel>div:not(.form-group):not(.forgot-credential-container):not(.buttons) {
    order: 0 !important;
}

/* =======================================================
 * RESPONSIVE
 *========================================================*/
@media (max-width: 767px) {
    #studentLoginOptionsContainer {
        flex-direction: column !important;
        margin: 20px 10px !important;
    }

    #existingStudentDiv,
    #newStudentDiv {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px !important;
    }

    /* Reset border radius for stack */
    #existingStudentDiv {
        border-radius: 8px 8px 0 0 !important;
    }

    #newStudentDiv {
        border-radius: 0 0 8px 8px !important;
    }
}

/* =======================================================
 * LOGIN UX IMPROVEMENT: REORDER INPUTS & LINKS
 * Moves "Forgot..." links below their respective inputs.
 * Uses Flexbox Order + :has() selector.
 *========================================================*/

/* 1. Enable Reordering on the Form */
#portalNativeLoginPanel form {
    display: flex !important;
    flex-direction: column !important;
}

/* --- GROUP A: USERNAME --- */

/* Step 1: The Input (Visual Position 1) */
/* We find the div that contains the #userName input */
#portalNativeLoginPanel .form-group:has(#userName) {
    order: 1 !important;
    margin-bottom: 5px !important;
    /* Small gap between input and link */
}

/* Step 2: The Link (Visual Position 2) */
/* We find the div that contains the #forgotUserNameLink */
#portalNativeLoginPanel .forgot-credential-container:has(#forgotUserNameLink) {
    order: 2 !important;
    text-align: right !important;
    /* Align to right for standard pattern */
    margin-bottom: 20px !important;
    /* Space before next section */
    width: 100% !important;
}

/* --- GROUP B: PASSWORD --- */

/* Step 3: The Input (Visual Position 3) */
#portalNativeLoginPanel .form-group:has(#password) {
    order: 3 !important;
    margin-bottom: 5px !important;
}

/* Step 4: The Link (Visual Position 4) */
#portalNativeLoginPanel .forgot-credential-container:has(#forgotPasswordLink) {
    order: 4 !important;
    text-align: right !important;
    margin-bottom: 20px !important;
}

/* --- GROUP C: ACTION --- */

/* Step 5: The Login Button (Visual Position 5) */
#portalNativeLoginPanel .buttons {
    order: 5 !important;
}

/* Ensure any introductory text stays at the very top */
#portalNativeLoginPanel>div:not(.form-group):not(.forgot-credential-container):not(.buttons) {
    order: 0 !important;
}

/* ============================================================
   MODULE: STUDENT LOGIN - INDEPENDENT VAULT (V147)
   Isolation: Targeted via Body ID #pageStudentLogin
   Updates: 50px Radius, Auto-Centering, and Overflow Protection
   ============================================================ */

/* 1. MASTER WRAPPER (Centering Logic)
   Overrides the 'margin-left: 0' leak from other modules */
#pageStudentLogin #studentLoginOptionsContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 950px !important;
    /* Slightly wider for the 50px curves */

    /* THE CENTER AXIS: Forces the card to the middle */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 60px !important;
    margin-bottom: 60px !important;
    float: none !important;

    /* THE RADIUS: Your exact 50px requirement */
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12) !important;

    /* VITAL: Ensures internal background colors don't overlap the 50px curve */
    overflow: hidden !important;
    border: none !important;
}

/* 2. LEFT COLUMN (Existing User - Mesh)
   Inherits the top-left and bottom-left 50px curve */
#pageStudentLogin #existingStudentDiv {
    padding: 60px 50px !important;
    flex: 1 1 450px !important;
    /* Animation and gradients remain as defined in your previous block */
}

/* 3. RIGHT COLUMN (New User - White)
   Inherits the top-right and bottom-right 50px curve */
#pageStudentLogin #newStudentDiv {
    padding: 60px 50px !important;
    flex: 1 1 450px !important;
    background-color: #ffffff !important;
}

/* 4. RESPONSIVE ROUNDNESS
   Adjusting the radius for mobile devices to maintain proportions */
@media (max-width: 767px) {
    #pageStudentLogin #studentLoginOptionsContainer {
        margin: 20px 15px !important;
        border-radius: 30px !important;
    }

    #pageStudentLogin #existingStudentDiv {
        border-radius: 8px 8px 0 0 !important;
    }

    #pageStudentLogin #newStudentDiv {
        border-radius: 0 0 8px 8px !important;
    }
}

/* =======================================================
 * FORGOT USERNAME FORM STYLING
 * matches the "Log-In" white card aesthetic.
 * Scoped to #portalForgotUserNameForm
 *========================================================*/

/* 1. The Form Container (The Card) */
#portalForgotUserNameForm {
    /* --- Card Appearance --- */
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 8px !important;

    /* --- Shadow & Border --- */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e9ecef !important;

    /* --- Layout (Centered Box) --- */
    max-width: 600px !important;
    /* Constrain width for readability */
    margin: 40px auto !important;
    /* Center horizontally */
    display: block !important;
}

/* 2. Instructional Text */
#portalForgotUserNameForm .variable-content-item {
    font-family: 'Montserrat', sans-serif !important;
    color: #555555 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* 3. Labels (Email) */
#portalForgotUserNameForm label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Bold */
    color: #34111a !important;
    /* Dark Brown */
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
}

/* 4. Input Fields */
#portalForgotUserNameForm .form-control {
    height: 50px !important;
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    color: #34111A !important;
    padding-left: 15px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

/* Input Focus State */
#portalForgotUserNameForm .form-control:focus {
    border-color: #8b2331 !important;
    /* Red Border on focus */
    background-color: #fff !important;
}

/* 5. Buttons Container */
#portalForgotUserNameForm .buttons {
    display: flex !important;
    justify-content: flex-end !important;
    /* Align buttons to right */
    gap: 15px !important;
    /* Space between buttons */
    margin-top: 30px !important;
    border-top: none !important;
    /* Remove any default lines */
    padding-top: 0 !important;
}

/* 6. Primary Button (Continue) */
#portalForgotUserNameForm .btn-primary {
    background-color: #8b2331 !important;
    /* MacEwan Red */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 30px !important;
    /* Generous padding */
    min-width: 150px !important;
}

#portalForgotUserNameForm .btn-primary:hover {
    background-color: #34111a !important;
    /* Dark Brown Hover */
}

/* 7. Secondary Button (Cancel) */
#portalForgotUserNameForm .btn-secondary {
    background-color: #ffffff !important;
    color: #D41F37 !important;
    border: 1px solid #D41F37 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

#portalForgotUserNameForm .btn-secondary:hover {
    background-color: #D41F37 !important;
    color: #fff !important;
}

/* =======================================================
 * CENTER REQUIRED FIELDS INSTRUCTION (VISIBILITY FIX)
 * Styles the helper text above forms.
 * REMOVED 'display: block !important' so native 'd-none' works.
 *========================================================*/

#requiredFieldInstruction {
    /* --- Alignment --- */
    text-align: left !important;
    /* Matches the centered card layout */

    /* --- Layout --- */
    max-width: 600px !important;
    margin: 0 auto 15px auto !important;
    /* Center horizontally */

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    color: #a6a6a6666 !important;

    /* NOTE: We removed 'display: block !important' here to allow
       the system to hide this element when needed. */
}

/* Ensure inner columns don't fight the centering */
#requiredFieldInstruction .row,
#requiredFieldInstruction .col-lg-12 {
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;

    /* Removed 'display: block !important' here too */
}

/* =======================================================
 * UNIFIED FORGOT PASSWORD STYLING (Student & Instructor)
 * Matches the "Card Aesthetic" for both forms.
 * Scoped to #portalForgotPasswordForm AND #portalInstructorForgotPasswordForm
 *========================================================*/

/* 1. The Form Container (The Card) */
#portalForgotPasswordForm,
#portalInstructorForgotPasswordForm {
    /* --- Card Appearance --- */
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 8px !important;

    /* --- Shadow & Border --- */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e9ecef !important;

    /* --- Layout (Centered Box) --- */
    max-width: 600px !important;
    margin: 40px auto !important;
    display: block !important;
}

/* 2. Instructional Text */
#portalForgotPasswordForm .variable-content-item,
#portalInstructorForgotPasswordForm .variable-content-item {
    font-family: 'Montserrat', sans-serif !important;
    color: #555555 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* 3. Labels (User Name) */
#portalForgotPasswordForm label,
#portalInstructorForgotPasswordForm label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111a !important;
    /* Dark Brown */
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
}

/* 4. Input Fields */
#portalForgotPasswordForm .form-control,
#portalInstructorForgotPasswordForm .form-control {
    height: 50px !important;
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    color: #34111A !important;
    padding-left: 15px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

/* Input Focus State */
#portalForgotPasswordForm .form-control:focus,
#portalInstructorForgotPasswordForm .form-control:focus {
    border-color: #8b2331 !important;
    /* Red Border */
    background-color: #fff !important;
}

/* 5. Buttons Container (Alignment) */
#portalForgotPasswordForm .buttons,
#portalInstructorForgotPasswordForm .buttons {
    display: flex !important;
    justify-content: flex-end !important;
    /* Align right */
    gap: 15px !important;
    margin-top: 30px !important;
    border-top: none !important;
    padding-top: 0 !important;
}

/* 6. Primary Button ("Continue") -> Dark Style */
#portalForgotPasswordForm .btn-primary,
#portalInstructorForgotPasswordForm .btn-primary {
    background-color: #8b2331 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    min-width: 150px !important;
    transition: all 0.3s ease !important;
}

#portalForgotPasswordForm .btn-primary:hover,
#portalInstructorForgotPasswordForm .btn-primary:hover,
#portalForgotPasswordForm .btn-primary:focus,
#portalInstructorForgotPasswordForm .btn-primary:focus {
    /* Hover: Dark Brown */
    background-color: #34111A !important;
    color: #FFFFFF !important;
}

/* 7. Secondary Button ("Cancel") -> Light Style */
#portalForgotPasswordForm .btn-secondary,
#portalInstructorForgotPasswordForm .btn-secondary {
    /* Base State: White with Red Border */
    background-color: #FFFFFF !important;
    color: #D41F37 !important;
    /* Bright Red Text */
    border: 1px solid #D41F37 !important;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 12px 30px !important;
    min-width: 150px !important;
    transition: all 0.3s ease !important;
}

#portalForgotPasswordForm .btn-secondary:hover,
#portalInstructorForgotPasswordForm .btn-secondary:hover,
#portalForgotPasswordForm .btn-secondary:focus,
#portalInstructorForgotPasswordForm .btn-secondary:focus {
    /* Hover: Red Fill */
    background-color: #D41F37 !important;
    color: #FFFFFF !important;
    border-color: #D41F37 !important;
}

/* =======================================================
 * SCE: NEW PASSWORD - FINAL DESIGN SYSTEM CONSOLIDATION (V14)
 * TARGET: form[name="passwordResetForm"]
 * UPDATES: Reinstated Premium Input Styles & Hierarchy.
 * ======================================================= */

/* 1. MASTER ANCHOR: The White Card */
form[name="passwordResetForm"].customizableForm {
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #ebedf0 !important;
    max-width: 600px !important;
    margin: 40px auto !important;
    display: block !important;
}

/* 2. ALIGNMENT & EXPANSION: Killing the 288px offset */
form[name="passwordResetForm"] #userResetPassword,
form[name="passwordResetForm"] #userPassword,
form[name="passwordResetForm"] .col-lg-12,
form[name="passwordResetForm"] .col-lg-6,
form[name="passwordResetForm"] .row,
form[name="passwordResetForm"] .form-group {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
}

/* 3. FIELD LABELS: Strong Hierarchy (Bold 700) */
form[name="passwordResetForm"] label.requiredFieldLabel,
form[name="passwordResetForm"] .labelContent {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #171717 !important;
    /* MacEwan Maroon Accent */
    display: inline-flex !important;
    /* Evita que el asterisco salte */
    align-items: center !important;
    white-space: nowrap !important;
    margin-bottom: 12px !important;
}

/* 4. ASTERISK PRECISION: No drift */
form[name="passwordResetForm"] .requiredFieldLabel:after {
    content: " *" !important;
    display: inline-block !important;
    color: #B5231D !important;
    font-size: 14px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
}

/* 5. INSTRUCTIONAL TEXT: Subtle Guide (Regular 400) */
form[name="passwordResetForm"] #variableContentBlockPG0111,
form[name="passwordResetForm"] .variable-content-item {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    color: #555555 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    display: block !important;
}

/* 6. INPUT REFINEMENT: Reinstated Premium Design System Styles */
form[name="passwordResetForm"] .form-control {
    height: 50px !important;
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    color: #34111A !important;
    padding-left: 15px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* 7. BUTTON ROW: Gutter-Kill & Alignment */
form.customizableForm>.row:last-of-type,
form.customizableForm>.row:has(.buttons) {
    background-color: transparent !important;
    padding: 0 !important;
    margin-top: 25px !important;
    border: none !important;
}

form[name="passwordResetForm"] .buttons {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 8. ACTION BUTTON: High-Specificity Hover Fix */
form[name="passwordResetForm"] #buttonSave {
    background-color: #8b2331 !important;
    color: #ffffff !important;
    padding: 1.25rem 2.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

form[name="passwordResetForm"] #buttonSave:hover,
form[name="passwordResetForm"] #buttonSave:focus {
    background-color: #54141d !important;
    text-decoration: none !important;
}



/* =======================================================
 * MODULE: FAMILY LOGIN PAGE REDESIGN (Final Fix)
 * Fixes "Double Container" issue by resetting internal
 * Bootstrap card styles and removing column gutters.
 *========================================================*/

/* -------------------------------------------------------
 * 1. UNIFIED CARD WRAPPER (The Parent)
 * ------------------------------------------------------- */
/* We use the direct child combinator (>) inside :has() if supported,
   or just ensure we target the row that *immediately* contains the col. */

#contentModule1 .row:has(> #familyExistingProfileWrapper) {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 900px !important;
    margin: 40px auto !important;

    /* Card Appearance */
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;

    padding: 0 !important;
    border: none !important;
}

/* -------------------------------------------------------
 * 2. NUCLEAR RESET (Internal Cards & Gutters) - CRITICAL
 * Removes padding/bg from the inner HTML structure so
 * our main colors extend to the edge.
 * ------------------------------------------------------- */

/* Reset the Columns (col-md-6) */
#familyExistingProfileWrapper,
#familyNewProfileWrapper {
    min-height: 100% !important;
    border: none !important;
    margin: 0 !important;

    /* Force full bleed styling */
    /* Override Bootstrap gutter padding */
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Reset the Inner Cards (.card .card-body) */
/* This kills the "Double Container" effect inside */
#familyExistingProfileWrapper .card,
#familyExistingProfileWrapper .card-body,
#familyNewProfileWrapper .card,
#familyNewProfileWrapper .card-body,
.sectionHeader {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* -------------------------------------------------------
 * 3. LEFT COLUMN: EXISTING USER (Dark Mesh)
 * ------------------------------------------------------- */
#familyExistingProfileWrapper {
    background-color: #34111A !important;
    color: #ffffff !important;
    position: relative;
    z-index: 1;

    /* ANIMATION */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;
    animation: dark-mesh-flow 60s infinite ease-in-out alternate !important;
}

/* -------------------------------------------------------
 * 4. RIGHT COLUMN: NEW USER (White)
 * ------------------------------------------------------- */
#familyNewProfileWrapper {
    background-color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------
 * 5. TYPOGRAPHY (Headings & Text)
 * ------------------------------------------------------- */

/* Left Header (White on Dark) */
#familyExistingProfileWrapper h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Right Header (Dark on White) */
#familyNewProfileWrapper h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    font-size: 1.8rem !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Helper Text */
#variableContentBlockPG0171 .variable-content-item {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 25px;
}

#variableContentBlockPG0172 .variable-content-item {
    color: #555555 !important;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 25px;
}

/* -------------------------------------------------------
 * 6. INPUT STYLING & ALIGNMENT
 * ------------------------------------------------------- */

/* Spacing between inputs */
.form-group {
    margin-bottom: 15px !important;
}

/* Labels */
#familyExistingProfileWrapper label {
    color: white !important;
    font-weight: 700 !important;
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
}

#familyNewProfileWrapper label {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #171717 !important;
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
}

/* Left Inputs (Glass) */
#familyExistingProfileWrapper .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    backdrop-filter: blur(5px);
    height: 45px !important;
    border-radius: 4px !important;
}

#familyExistingProfileWrapper .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Right Inputs (Standard) */
#familyNewProfileWrapper .form-control {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #34111A !important;
    height: 45px !important;
    border-radius: 4px !important;
}

/* -------------------------------------------------------
 * 7. BUTTONS & LINKS (Consistent Style)
 * ------------------------------------------------------- */

/* 1. Base State (Normal) */
#buttonContinueExistingUser {
    /* --- Layout & Size --- */
    width: 100% !important;
    margin-top: 15px !important;
    padding: 1.25rem 1.9rem !important;
    /* Desktop Padding */

    /* --- Colors (Red Base) --- */
    background-color: #8b2331 !important;
    border: 2px solid #8b2331 !important;
    color: #FFFFFF !important;

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-style: normal !important;
    font-size: .942rem !important;
    font-optical-sizing: auto !important;

    /* --- Animation --- */
    transition: all 0.3s ease !important;
}

/* 2. Hover & Focus State */
#buttonContinueExistingUser:hover,
#buttonContinueExistingUser:focus {
    /* --- Colors (Dark Brown) --- */
    background-color: #34111A !important;
    border-color: #34111A !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}

/* Right Button (Create Account) - Red */
#buttonContinueNewUser {
    width: 100% !important;
    margin-top: 15px !important;
    background-color: #8b2331 !important;
    border: 2px solid #8b2331 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 1.25rem 1.9rem !important;
    transition: all 0.3s ease !important;
    letter-spacing: .05em !important;
    font-style: normal !important;
    font-size: .942rem !important;
    font-optical-sizing: auto !important;
}

#buttonContinueNewUser:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* Links */
#familyExistingProfileWrapper a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    display: inline-block;
    margin-bottom: 5px;
}

#familyExistingProfileWrapper a:hover {
    color: #D41F37 !important;
}

/* -------------------------------------------------------
 * 8. RESPONSIVE (Mobile)
 * ------------------------------------------------------- */
@media (max-width: 767px) {
    #contentModule1 .row:has(#familyExistingProfileWrapper) {
        flex-direction: column !important;
        margin: 20px 0px !important;
        max-width: 100% !important;
    }

    #familyExistingProfileWrapper,
    #familyNewProfileWrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px !important;
        /* Less padding on mobile */
    }
}

/* =======================================================
 * FAMILY LOGIN UX: REORDER INPUTS & LINKS
 * Moves "Forgot..." links BELOW the input fields.
 * Uses Flexbox Order.
 * Scoped to #familyExistingProfileForm
 *========================================================*/

/* 1. Enable Flex Column on the Input Groups */
#familyExistingProfileForm .form-group {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* 2. ORDER 1: The Label ("User Name") */
#familyExistingProfileForm .form-group label {
    order: 1 !important;
    width: 100% !important;
}

/* 3. ORDER 2: The Input Field (The Box) */
#familyExistingProfileForm .form-group input.form-control {
    order: 2 !important;
    width: 100% !important;
}

/* 4. ORDER 3: The Link ("Forgot User Name") */
#familyExistingProfileForm .form-group a {
    order: 3 !important;

    /* --- Visual Styling --- */
    text-align: right !important;
    /* Standard UX: align help to right */
    margin-top: 8px !important;
    /* Space between input and link */
    width: 100% !important;
    display: block !important;

    /* Make sure font matches our system */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* =======================================================
 * FAMILY LOGIN FIX: REMOVE BOOTSTRAP GUTTER
 * Removes the default 15px padding from the inner column
 * inside the Family New Profile form to align text correctly.
 *========================================================*/

/* 1. Target ANY column div inside the New User Wrapper */
#familyNewProfileWrapper div[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Force full width to ensure alignment */
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* 2. Target ANY column div inside the Existing User Wrapper */
#familyExistingProfileWrapper div[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* =======================================================
 * MODULE: INSTRUCTOR LOGIN (Corrected & Final)
 * - Background: Animated Dark Mesh (Futuristic Frame)
 * - UX: Links moved BELOW inputs (Order 3)
 * - UI: White Title & Red Primary Button Pattern
 *========================================================*/

/* 1. THE CONTAINER (Animated Dark Mesh Card) */
#instructorLoginOptionsContainer .instructorForm {
    /* --- Layout --- */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 70px 40px !important;
    margin: 40px auto !important;
    max-width: 550px !important;
    /* Compact Width */

    /* --- Shape --- */
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;

    /* --- ANIMATED BACKGROUND CONFIG --- */
    background-color: #34111A !important;
    /* Dark Base */
    color: #ffffff !important;
    /* White Text Base */

    /* Local Vars for Animation - Colors */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    /* ⬇️⬇️⬇️ ADD THESE 8 LINES ⬇️⬇️⬇️ */
    /* Local Vars for Animation - Positions */
    --x-0: 20%;
    --y-0: 30%;
    --x-1: 80%;
    --y-1: 20%;
    --x-2: 60%;
    --y-2: 70%;
    --x-3: 30%;
    --y-3: 80%;
    /* ⬆️⬆️⬆️ END OF NEW LINES ⬆️⬆️⬆️ */

    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;
    animation: dark-mesh-flow 60s infinite ease-in-out alternate !important;

    position: relative !important;
    z-index: 1;
}

/* =======================================================
 * LOGIN FORMS - MESH GRADIENT ANIMATION
 * =======================================================
 * Purpose: Separate animation from modal/lightbox animations
 * Used by: #existingStudentDiv, .instructorForm
 * Note: DO NOT use dark-mesh-flow (reserved for modals)
 * =======================================================*/

/* -------------------------------------------------------
 * 1. KEYFRAMES DEFINITION (New - Login Specific)
 * ------------------------------------------------------- */
@keyframes login-mesh-flow {

    /* Frame 0%: Starting positions */
    0% {
        --x-0: 20%;
        --y-0: 30%;
        --x-1: 80%;
        --y-1: 20%;
        --x-2: 60%;
        --y-2: 70%;
        --x-3: 30%;
        --y-3: 80%;
    }

    /* Frame 25%: First transformation */
    25% {
        --x-0: 70%;
        --y-0: 60%;
        --x-1: 30%;
        --y-1: 75%;
        --x-2: 85%;
        --y-2: 35%;
        --x-3: 50%;
        --y-3: 20%;
    }

    /* Frame 50%: Mid-point */
    50% {
        --x-0: 40%;
        --y-0: 85%;
        --x-1: 75%;
        --y-1: 45%;
        --x-2: 20%;
        --y-2: 60%;
        --x-3: 90%;
        --y-3: 70%;
    }

    /* Frame 75%: Third transformation */
    75% {
        --x-0: 85%;
        --y-0: 25%;
        --x-1: 25%;
        --y-1: 90%;
        --x-2: 65%;
        --y-2: 15%;
        --x-3: 15%;
        --y-3: 45%;
    }

    /* Frame 100%: Return to start */
    100% {
        --x-0: 20%;
        --y-0: 30%;
        --x-1: 80%;
        --y-1: 20%;
        --x-2: 60%;
        --y-2: 70%;
        --x-3: 30%;
        --y-3: 80%;
    }
}

/* -------------------------------------------------------
 * 2. STUDENT LOGIN FORM
 * ------------------------------------------------------- */
#existingStudentDiv {
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    /* Appearance */
    background-color: #34111A !important;
    color: #ffffff !important;
    position: relative;
    z-index: 1;

    /* Animation Vars - Colors */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    /* Animation Vars - Positions */
    --x-0: 20%;
    --y-0: 30%;
    --x-1: 80%;
    --y-1: 20%;
    --x-2: 60%;
    --y-2: 70%;
    --x-3: 30%;
    --y-3: 80%;

    /* Mesh Gradient */
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;

    /* ✅ UPDATED: Use login-specific animation */
    animation: login-mesh-flow 60s infinite ease-in-out alternate !important;
}

/* -------------------------------------------------------
 * 3. INSTRUCTOR LOGIN FORM
 * ------------------------------------------------------- */
#instructorLoginOptionsContainer .instructorForm {
    /* --- Layout --- */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 70px 40px !important;
    margin: 40px auto !important;
    max-width: 550px !important;

    /* --- Shape --- */
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;

    /* --- ANIMATED BACKGROUND CONFIG --- */
    background-color: #34111A !important;
    color: #ffffff !important;

    /* Local Vars for Animation - Colors */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    /* Local Vars for Animation - Positions */
    --x-0: 20%;
    --y-0: 30%;
    --x-1: 80%;
    --y-1: 20%;
    --x-2: 60%;
    --y-2: 70%;
    --x-3: 30%;
    --y-3: 80%;

    /* Mesh Gradient */
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;

    /* ✅ UPDATED: Use login-specific animation */
    animation: login-mesh-flow 60s infinite ease-in-out alternate !important;

    position: relative !important;
    z-index: 1;
}

/* -------------------------------------------------------
 * 4. KEEP ORIGINAL dark-mesh-flow FOR MODALS
 * ------------------------------------------------------- */
/* DO NOT MODIFY - Used by .modal-backdrop and #ajaxLoadingModal */
@keyframes dark-mesh-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* =======================================================
 * END OF LOGIN FORMS CSS
 * =======================================================*/

/* Center the wrapper itself */
#instructorLoginOptionsContainer {
    justify-content: center !important;
}


/* =======================================================
 * LOGIN FORMS - MESH GRADIENT ANIMATION (FINAL FIX)
 * =======================================================
 * Date: January 22, 2026
 * Issue: Variables not animating - Missing @property registration
 * Fix: Register all position variables with @property
 * =======================================================*/

/* -------------------------------------------------------
 * 1. @PROPERTY REGISTRATION (CRITICAL!)
 * ------------------------------------------------------- */
/* Without this, browsers cannot animate custom properties */

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30%;
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%;
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70%;
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30%;
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

/* -------------------------------------------------------
 * 2. KEYFRAMES DEFINITION (Login Specific)
 * ------------------------------------------------------- */
@keyframes login-mesh-flow {

    /* Frame 0%: Starting positions */
    0% {
        --x-0: 20%;
        --y-0: 30%;
        --x-1: 80%;
        --y-1: 20%;
        --x-2: 60%;
        --y-2: 70%;
        --x-3: 30%;
        --y-3: 80%;
    }

    /* Frame 25%: First transformation */
    25% {
        --x-0: 70%;
        --y-0: 60%;
        --x-1: 30%;
        --y-1: 75%;
        --x-2: 85%;
        --y-2: 35%;
        --x-3: 50%;
        --y-3: 20%;
    }

    /* Frame 50%: Mid-point */
    50% {
        --x-0: 40%;
        --y-0: 85%;
        --x-1: 75%;
        --y-1: 45%;
        --x-2: 20%;
        --y-2: 60%;
        --x-3: 90%;
        --y-3: 70%;
    }

    /* Frame 75%: Third transformation */
    75% {
        --x-0: 85%;
        --y-0: 25%;
        --x-1: 25%;
        --y-1: 90%;
        --x-2: 65%;
        --y-2: 15%;
        --x-3: 15%;
        --y-3: 45%;
    }

    /* Frame 100%: Return to start */
    100% {
        --x-0: 20%;
        --y-0: 30%;
        --x-1: 80%;
        --y-1: 20%;
        --x-2: 60%;
        --y-2: 70%;
        --x-3: 30%;
        --y-3: 80%;
    }
}

/* -------------------------------------------------------
 * 3. STUDENT LOGIN FORM
 * ------------------------------------------------------- */
#existingStudentDiv {
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    /* Appearance */
    background-color: #34111A !important;
    color: #ffffff !important;
    position: relative;
    z-index: 1;

    /* Animation Vars - Colors */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    /* Animation Vars - Positions */
    --x-0: 20%;
    --y-0: 30%;
    --x-1: 80%;
    --y-1: 20%;
    --x-2: 60%;
    --y-2: 70%;
    --x-3: 30%;
    --y-3: 80%;

    /* Mesh Gradient */
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;

    /* Animation with smooth interpolation */
    animation: login-mesh-flow 240s infinite ease-in-out alternate !important;

    /* Performance optimization */
    will-change: background-image;
    transform: translateZ(0);
    /* Force GPU acceleration */
}

/* -------------------------------------------------------
 * 4. INSTRUCTOR LOGIN FORM
 * ------------------------------------------------------- */
#instructorLoginOptionsContainer .instructorForm {
    /* --- Layout --- */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 70px 40px !important;
    margin: 40px auto !important;
    max-width: 550px !important;

    /* --- Shape --- */
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;

    /* --- ANIMATED BACKGROUND CONFIG --- */
    background-color: #34111A !important;
    color: #ffffff !important;

    /* Local Vars for Animation - Colors */
    --c-0: rgba(212, 31, 55, 0.5);
    --c-1: rgba(74, 21, 59, 0.7);
    --c-2: hsla(320, 90%, 60%, 0.3);
    --c-3: rgba(255, 255, 255, 0.05);

    /* Local Vars for Animation - Positions */
    --x-0: 20%;
    --y-0: 30%;
    --x-1: 80%;
    --y-1: 20%;
    --x-2: 60%;
    --y-2: 70%;
    --x-3: 30%;
    --y-3: 80%;

    /* Mesh Gradient */
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;

    /* Animation with smooth interpolation */
    animation: login-mesh-flow 60s infinite ease-in-out alternate !important;

    position: relative !important;
    z-index: 1;

    /* Performance optimization */
    will-change: background-image;
    transform: translateZ(0);
    /* Force GPU acceleration */
}

/* -------------------------------------------------------
 * 5. BROWSER COMPATIBILITY NOTES
 * ------------------------------------------------------- */
/*
 * @property support:
 * ✅ Chrome/Edge 85+
 * ✅ Safari 15.4+
 * ⚠️ Firefox 128+ (behind flag in older versions)
 * 
 * Fallback behavior without @property:
 * - Variables will be defined but won't animate smoothly
 * - Gradients will be visible but static
 * - No visual breakage, just no animation
 */

/* -------------------------------------------------------
 * 6. KEEP ORIGINAL dark-mesh-flow FOR MODALS
 * ------------------------------------------------------- */
/* DO NOT MODIFY - Used by .modal-backdrop and #ajaxLoadingModal */
@keyframes dark-mesh-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =======================================================
 * TYPOGRAPHY FIX (Specificity Override)
 * Uses #mainContent ID to beat the global H2 styles.
 *========================================================*/

#mainContent #instructorLoginOptionsContainer .instructorForm h2 {
    /* --- Override Color (White) --- */
    color: #ffffff !important;

    /* --- Override Layout --- */
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border: none !important;

    /* --- Override Font Style --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Force Bold over 400 */
    font-size: 1.8rem !important;
    font-style: normal !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* 3. INPUTS & LINKS REORDERING (The UX Fix) */
.instructorForm .form-group {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}

/* ORDER 1: Label */
.instructorForm label {
    order: 1 !important;
    color: white !important;
    font-weight: 700 !important;
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
}

/* ORDER 2: Input (Glassmorphism) */
.instructorForm .form-control {
    order: 2 !important;
    height: 50px !important;
    border-radius: 4px !important;

    /* Glass Style for readability on dark bg */
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    backdrop-filter: blur(5px);

    padding-left: 15px !important;
    font-size: 1rem !important;
}

.instructorForm .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.instructorForm .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
}

/* ORDER 3: Link (Moved Below Input) */
.instructorForm a {
    order: 3 !important;
    text-align: right !important;
    margin-top: 8px !important;
    display: block !important;

    /* Styling High Contrast Links */
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: opacity 0.3s ease !important;
}

.instructorForm a:hover {
    opacity: 0.8 !important;
    /* Subtle fade on hover */
}

/* 4. BUTTON (Primary Pattern: Red -> Brown) */
#buttonSubmitInstructorLogin {
    /* --- Layout --- */
    width: 100% !important;
    margin-top: 10px !important;
    padding: 1.25rem 1.9rem !important;

    /* --- Primary Colors (Requested Pattern) --- */
    background-color: #8b2331 !important;
    /* Base Red */
    border: 2px solid #8b2331 !important;
    color: #FFFFFF !important;

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-style: normal !important;
    font-size: .942rem !important;

    /* --- Shape --- */
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
}

#buttonSubmitInstructorLogin:hover,
#buttonSubmitInstructorLogin:focus {
    /* --- Hover Colors (Dark Brown) --- */
    background-color: #34111A !important;
    border-color: #34111A !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}

/* 5. CLEANUP */
.instructorForm .card,
.instructorForm .sectionHeader {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =======================================================
 * MOBILE FIX: INSTRUCTOR LOGIN MARGINS
 * Prevents the card from touching screen edges.
 * Matches the spacing of Student Login.
 * Scoped to max-width 767px.
 *========================================================*/

@media (max-width: 767px) {

    #instructorLoginOptionsContainer {
        /* 1. THE MAIN FIX: External margin */
        /* 20px Arriba/Abajo, 10px Izquierda/Derecha (Espacio blanco) */
        margin: 20px 10px !important;

        /* 2. Unlock width */
        /* Ensures container respects margins and doesn't overflow */
        width: auto !important;
        max-width: none !important;

        /* 3. Adjust internal frame padding (optional) */
        /* Reduced container padding to give more space to content */
        padding: 0 !important;
    }

    /* Fine tuning for internal card on mobile */
    #instructorLoginOptionsContainer .instructorForm {
        /* Reduce internal padding slightly for small screens */
        padding: 30px 20px !important;
    }
}


/* =======================================================
 * PAGE: PG0033 (Advanced Search)
 * Styles the new 2-column flex layout (v4)
 * (Comments are in English)
 *========================================================*/

/* =======================================================
 * SEARCH TRANSITION OVERLAY (The Magic Curtain)
 * Hides the "Advanced Search" form during auto-redirect.
 *========================================================*/

/* =======================================================
 * SEARCH TRANSITION OVERLAY (The Magic Curtain)
 * Now featuring the Full Screen Animated Dark Mesh.
 *========================================================*/

#sce-auto-search-overlay {
    /* --- Fixed Cover (Full Screen) --- */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    /* On top of everything */

    /* --- Flexbox Centering (For Loader & Text) --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* --- Initial Visibility State --- */
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    /* Smooth fade in */

    /* =======================================================
     * ANIMATED MESH CONFIGURATION
     * =======================================================*/

    /* 1. Base Color */
    background-color: #34111A;

    /* 2. Local Variables (MacEwan Palette) */
    --c-0: rgba(212, 31, 55, 0.5);
    /* Red */
    --c-1: rgba(74, 21, 59, 0.7);
    /* Plum */
    --c-2: hsla(320, 90%, 60%, 0.3);
    /* Pink Pop */
    --c-3: rgba(255, 255, 255, 0.05);
    /* Light */

    /* 3. The Gradients */
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%);

    /* 4. Blending & Animation */
    background-blend-mode: screen, normal, normal, normal;
    animation: dark-mesh-flow 60s infinite ease-in-out alternate;
}

/* --- The Spinner (Updated for visibility on Mesh) --- */
.sce-loader {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    /* Subtle track */
    border-top: 4px solid #ffffff;
    /* Pure white spinner for contrast */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 25px;

    /* Add a glow to the spinner */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* --- The Text --- */
.sce-loading-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
    /* Larger text */
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Shadow for readability */
}

/* Keyframes for Spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Visibility Trigger --- */
body.is-auto-searching #sce-auto-search-overlay {
    display: flex;
    /* Must match the flex definition above */
    opacity: 1;
}

/* =======================================================
 * ADVANCED HYBRID LOADER (CSS Ring + GIF Logo)
 * Creates a wrapper containing the spinning CSS ring
 * and the static (but internally animated) GIF logo centered inside.
 *========================================================*/

/* 1. The Wrapper (Holds everything together centered) */
.loader-wrapper {
    position: relative;

    /* --- CHANGE HERE --- */
    width: 68px !important;
    /* Reduced from 90px */
    height: 68px !important;
    /* Reduced from 90px */

    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. The Spinning Ring (CSS Animation) */
/* =======================================================
 * RESTORED SPINNER COLORS
 * Replaces the white ring with the MacEwan Red -> Maroon
 * gradient effect requested.
 *========================================================*/

.sce-spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* --- THE CORRECTION: --- */
    border-radius: 50%;
    /* This creates the perfect circle */

    /* 1. THE CONIC GRADIENT (The Comet Tail) */
    background: conic-gradient(from 0deg,
            transparent 0%,
            #4A153B 30%,
            /* Deep Plum */
            #ff3399 60%,
            /* Electric Pink */
            #D41F37 100%
            /* Bright Red */
        );

    /* 2. THE MASK (The Donut Hole) */
    /* This cuts out the center leaving only 5px of visible border */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));

    /* 3. ANIMATION */
    animation: spin 1s linear infinite;

    /* 4. GLOW */
    filter: drop-shadow(0 0 5px rgba(212, 31, 55, 0.6));

    z-index: 1;
    border: none !important;
}

/* Rotation animation (Make sure you have it) */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 3. The Center Logo Image (Animated GIF) */
.sce-loader-logo {
    width: 35px;
    /* Adjust size so it sits nicely inside the ring */
    height: auto;
    position: relative;
    z-index: 2;
    /* Sits visually on top of the ring background */
    /* No CSS animation needed here, the GIF animates itself */
}

/* The Spin Keyframes */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* (Keep the rest of #sce-auto-search-overlay and .sce-loading-text styles same as before) */
/* Class to trigger visibility */
body.is-auto-searching #sce-auto-search-overlay {
    display: flex;
    opacity: 1;
}

/* =======================================================
 * SEARCH BAR: NEON CROSS-FLOW (White Bg Optimized)
 * =======================================================*/

/* 0. Definition of Cross Animation */
@keyframes sceNeonCross {
    0% {
        background-position:
            0% 0%,
            /* Layer 1 (Pink) starts top left */
            100% 100%;
        /* Layer 2 (Cyan) starts bottom right */
    }

    50% {
        background-position:
            100% 100%,
            /* Layer 1 travels to bottom right */
            0% 0%;
        /* Layer 2 travels to top left */
    }

    100% {
        background-position:
            0% 0%,
            /* Returns to start (Smooth loop) */
            100% 100%;
    }
}

/* 1. Wrapper Base */
.custom-search-wrapper {
    position: relative;
    z-index: 1;
    border-radius: 8px !important;
    padding: 2px !important;
    /* Border Thickness */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 85%;
    margin: -80px auto 35px auto;
}

/* 2. THE SPARKLES (Layer ::before) */
.custom-search-wrapper::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;

    /* Base oscura (perfecto, no tocar) */
    background-color: #2A0D15;

    background-image:
        /* STREAK 1: MacEwan Fire (Warm) */
        linear-gradient(135deg,
            transparent 35%,
            #8B2332 42%,
            /* MacEwan Maroon */
            #D41F37 47%,
            /* MacEwan Red */
            #FFFFFF 50%,
            /* ✨ Shiny WHITE center */
            #D41F37 53%,
            #8B2332 58%,
            transparent 65%),

        /* STREAK 2: Magenta Energy (Hot Pink) */
        linear-gradient(135deg,
            transparent 35%,
            #D93D4A 42%,
            /* Rose Red */
            #FF66B2 47%,
            /* Hot Pink */
            #F72585 50%,
            /* ✨ NEON MAGENTA Center */
            #8C1B59 53%,
            /* Purple */
            #6A0DAD 58%,
            /* ✨ Deep Purple (cool hint) */
            transparent 65%);

    background-size: 220% 220%, 220% 220%;
    animation: sceNeonCross 20s ease-in-out infinite;
}

/* 3. DIFFUSE GLOW (Layer ::after) */
/* Creates the outer "Glow" */
/* 3. DIFFUSE GLOW + BLOB (MODIFIED ::after Layer) */
/* 3. DIFFUSE GLOW + BLOB - IMPROVED VERSION */
.custom-search-wrapper::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: -60px;
    left: -80px;
    right: -80px;
    bottom: -60px;
    border-radius: 8px;

    /* Fallback gradient with new scheme */
    background:
        url('/images/gradient_search_box.svg') no-repeat center center,
        radial-gradient(ellipse at 30% 50%,
            rgba(139, 35, 50, 0.4),
            /* MacEwan Maroon */
            rgba(212, 31, 55, 0.3),
            /* MacEwan Red */
            rgba(0, 180, 216, 0.3),
            /* Cyan */
            transparent 70%);

    background-size: 90% auto, cover;
    filter: blur(100px);
    /* Reduced from 120px for more definition */
    opacity: 0.65;
    /* Increased from 0.55 for more presence */
}

/* 4. Input Group (Search interior) */
.custom-search-wrapper .input-group {
    background: linear-gradient(90deg, #f9f9f9 0%, #ffffff 20%, #ffffff 80%, #f9f9f9 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 4px;

    /* DRAMATIC MULTI-LAYER SHADOW */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        /* Layer 1: Border definition */
        0 4px 8px rgba(0, 0, 0, 0.06),
        /* Layer 2: Near depth */
        0 16px 32px rgba(52, 17, 26, 0.12),
        /* Layer 3: Far depth */
        0 32px 64px rgba(52, 17, 26, 0.08),
        /* Layer 4: Ambient */
        inset 0 2px 6px rgba(0, 0, 0, 0.06);
    /* Internal embed */
}

/* When input has focus */
.custom-search-wrapper .input-group:focus-within {
    box-shadow:
        0 8px 24px rgba(52, 17, 26, 0.15),
        /* More pronounced */
        0 4px 8px rgba(139, 35, 49, 0.10),
        /* Tinte brand */
        0 0 0 3px rgba(212, 31, 55, 0.15),
        /* Red focus ring */
        inset 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 5. Input Field */
#injectedSearchInput {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 50px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #34111A !important;
    padding-left: 20px !important;
}

#injectedSearchInput::placeholder {
    color: #999 !important;
    font-style: normal;
    opacity: 0.7;
}

/* 6. Search Button */
#btnInjectedSearch {
    height: 44px !important;
    border-radius: 6px !important;
    background-color: #34111A !important;
    /* Dark Maroon */
    border: none !important;
    color: #ffffff !important;
    padding: 0 25px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem !important;
    margin-right: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease !important;
}

#btnInjectedSearch:hover {
    background-color: #54141d !important;
    /* Neon Red on hover */
    box-shadow: 0 0 15px rgba(52, 17, 26, 0.6);
    /* Glow on hover */
}

/* 7. Links & Cleanup */
.advanced-link-wrapper {
    position: absolute;
    bottom: -28px;
    right: 15px;
    text-align: right;
    width: 100%;
    margin-top: 0 !important;
}

.small-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #8b2331 !important;
    text-decoration: none;
    transition: color 0.3s ease !important;
    opacity: 0.8;
}

.small-link:hover {
    color: #34111a !important;
    text-decoration: underline;
    opacity: 1;
}

.custom-search-wrapper .search-label {
    display: none !important;
}

/* =======================================================
 * AI SEARCH ICON STYLING
 * =======================================================*/

.sce-search-icon {
    width: 20px;
    /* Icon size */
    height: 20px;
    margin-right: 8px;
    /* Space between icon and "Search" text */
    vertical-align: middle;
    position: relative;
    top: -2px;
    /* Visual adjustment to align with text */

    /* THE CSS MAGIC TRICK: */
    /* This forces any image (even black) to become WHITE */
    filter: brightness(0) invert(1);

    transition: transform 0.3s ease;
}

/* Button hover effect */
#btnInjectedSearch:hover .sce-search-icon {
    transform: scale(1.2);
    /* Icon grows slightly */
}

/* =======================================================
 * GLOBAL SECONDARY ACTIONS (Reset / Cancel)
 * Style: White bg with Red Border -> Red Fill on Hover
 * Targets: #buttonReset, #buttonCancel, and value="Reset"
 *========================================================*/

/* 1. Global Selectors for Reset and Cancel */
#buttonReset,
#buttonCancel,
button[value="Reset"],
button[value="Cancel"] {
    /* --- Base State (Outlined) --- */
    background-color: #ffffff !important;
    color: #D41F37 !important;
    /* MacEwan Red Text */
    border: 1px solid #D41F37 !important;
    /* Red Border */

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;


    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;

    /* --- Animation --- */
    transition: all 0.3s ease !important;
}

/* 2. Hover State (Filled) */
#buttonReset:hover,
#buttonCancel:hover,
button[value="Reset"]:hover,
button[value="Cancel"]:hover {
    /* --- Change to Solid Bright Red --- */
    background-color: #D41F37 !important;
    /* Lighter/Bright Red */
    border-color: #D41F37 !important;
    color: #ffffff !important;
    /* White Text */
    cursor: pointer !important;
}

/* =======================================================
 * MOBILE: SECONDARY ACTIONS (Reset / Cancel)
 * Overrides the large desktop padding with compact mobile sizing.
 * Scoped to max-width 767px.
 *========================================================*/

@media (max-width: 767px) {

    #buttonReset,
    #buttonCancel,
    button[value="Reset"],
    button[value="Cancel"] {
        /* --- 1. COMPACT SIZING (Matches Global Mobile Button Style) --- */
        /* Desktop was 1.25rem 1.9rem -> We shrink it here */
        padding: 0.9rem !important;

        /* --- 2. TYPOGRAPHY --- */
        /* Scale down font slightly for mobile context */
        font-size: 0.85rem !important;

        /* --- 3. LAYOUT (Mobile UX) --- */
        /* Optional: Make them 100% width for easier touch */
        width: 100% !important;


        white-space: normal !important;
        height: auto !important;
        vertical-align: middle !important;
        line-height: 1.3 !important;
    }
}

/* 1. The Flex Container */
#search-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* Allows stacking on mobile */
    align-items: flex-start;
    /* Aligns tops of columns */
    gap: 30px;
    /* Creates a gutter between columns */
}

/* 2. The Filter Column (Left) */
#search-layout-wrapper>.card.card-info {
    flex: 2;
    min-width: 450px;
}

/* 3. The Featured Column (Right) 
 * === THIS SELECTOR IS NOW UPDATED ===
 * It targets the <section> tag directly
 */
#search-layout-wrapper>.sce-cards-wrapper {
    flex: 1;
    min-width: 300px;

    /* 4. Padding reset for the <section> */
    /* This overrides the .py-5 class */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 5. Override the unwanted .container
 * === THIS SELECTOR IS ALSO UPDATED ===
 */
#search-layout-wrapper>.sce-cards-wrapper .container {
    width: 100% !important;
    max-width: none !important;
    /* Removes the max-width limit */
    padding: 0 !important;
    /* Removes Bootstrap padding */
    margin: 0 !important;
    /* Removes Bootstrap centering */
}

/* =======================================================
 * ADVANCED SEARCH PAGE: NATURAL LAYOUT (NO SCRIPT 3)
 * SCOPE: body:has(#advancedSearchControl)
 * PURPOSE: Natural vertical layout without JS manipulation
 *========================================================*/

/* 1. MAIN CONTAINER - Vertical stack */
body:has(#advancedSearchControl) #contentModule1>.row>.col-lg-12 {
    display: block !important;
    width: 100% !important;
}

/* 2. SEARCH CONTAINER - Full width, orden 1 */
body:has(#advancedSearchControl) .sce-search-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
    order: 1 !important;
}

/* 3. FORM - Full width, orden 2 */
body:has(#advancedSearchControl) #formCourseSearch {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
    order: 2 !important;

    /* CRITICAL: Ensure it is visible and functional */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
    pointer-events: auto !important;
}


body:has(#advancedSearchControl) .spotlight-grid.grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
}

/* 7. ACCORDION - Ensure it does NOT block clicks */
body:has(#advancedSearchControl) .card.panel-default {
    position: relative !important;
    z-index: auto !important;
    pointer-events: auto !important;
}

body:has(#advancedSearchControl) #courseSearchCriteriaBody {
    position: relative !important;
    z-index: auto !important;
    pointer-events: auto !important;
}

/* =======================================================
 * RESPONSIVE: TABLET & MOBILE
 *========================================================*/

@media (min-width: 768px) and (max-width: 991px) {

    body:has(#advancedSearchControl) .spotlight-grid.grid-3col,
    body:has(#advancedSearchControl) .spotlight-grid.grid-2col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {

    body:has(#advancedSearchControl) .spotlight-grid.grid-3col,
    body:has(#advancedSearchControl) .spotlight-grid.grid-2col {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    body:has(#advancedSearchControl) .spotlight-card {
        min-height: 200px !important;
        padding: 1.25rem !important;
    }
}

/* =======================================================
 * SECTION 3: WHY CHOOSE MACEWAN SCE (ENGAGEMENT CARDS)
 * Design Pattern: Red gradient background, white text
 * Link Style: MacEwan separator + uppercase link
 *========================================================*/

/* Engagement Card Container */
body:has(#advancedSearchControl) .engagement-card {
    position: relative !important;
    background-image: linear-gradient(to bottom, #d51f37, #9a1426) !important;
    border-radius: .25rem !important;
    padding: 1rem !important;
    min-height: auto !important;

    /* Remove default spotlight card styles */
    border: none !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

body:has(#advancedSearchControl) .engagement-card:hover {
    transform: translateY(-5px) !important;
    /*box-shadow: 0 12px 28px rgba(139, 35, 49, 0.35) !important;*/
}

/* Content Wrapper */
body:has(#advancedSearchControl) .engagement-card-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-align: left !important;
    /* Left-aligned */
}

/* Icon Styling */
body:has(#advancedSearchControl) .engagement-icon {
    /*width: 60px !important;
    height: 60px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;*/
    display: none !important;
}

body:has(#advancedSearchControl) .engagement-icon i {
    font-size: 1.75rem !important;
    color: #ffffff !important;
}

/* Title (H3) */
body:has(#advancedSearchControl) .engagement-card h3 {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

/* Paragraph */
body:has(#advancedSearchControl) .engagement-card p {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
    flex-grow: 1 !important;
}

/* =======================================================
 * MACEWAN LINK PATTERN: Separator + Uppercase Link
 *========================================================*/

/* Links Container */
body:has(#advancedSearchControl) .imagelr-links {
    padding-bottom: 0 !important;
    margin-top: auto !important;
    /* Push to bottom */
}

/* White Separator Line */
body:has(#advancedSearchControl) .imagelr-separator {
    margin-top: -0.35rem !important;
    margin-bottom: 0.85rem !important;
    width: 3.5rem !important;
    border-top: solid 2px #d51f37 !important;
    /* White separator on red bg */
}

/* Feature Link (Uppercase) */
body:has(#advancedSearchControl) .feature-glyph {
    display: block !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    transition: opacity 0.2s ease !important;
}

body:has(#advancedSearchControl) .feature-glyph:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.85 !important;
}

/* Remove underline on focus */
body:has(#advancedSearchControl) .feature-glyph:focus {
    text-decoration: none !important;
}

/* =======================================================
 * RESPONSIVE: ENGAGEMENT CARDS - TABLET
 *========================================================*/

@media (min-width: 768px) and (max-width: 991px) {
    body:has(#advancedSearchControl) .engagement-card {
        padding: 1.75rem !important;
        min-height: 300px !important;
    }

    body:has(#advancedSearchControl) .engagement-card h3 {
        font-size: 1.25rem !important;
    }

    body:has(#advancedSearchControl) .engagement-card p {
        font-size: 0.9rem !important;
    }

    body:has(#advancedSearchControl) .feature-glyph {
        font-size: 0.8rem !important;
    }
}

/* =======================================================
 * RESPONSIVE: ENGAGEMENT CARDS - MOBILE
 *========================================================*/

@media (max-width: 767px) {
    body:has(#advancedSearchControl) .engagement-card {
        padding: 1.5rem !important;
        min-height: 280px !important;
    }

    body:has(#advancedSearchControl) .engagement-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 1.25rem !important;
    }

    body:has(#advancedSearchControl) .engagement-icon i {
        font-size: 1.5rem !important;
    }

    body:has(#advancedSearchControl) .engagement-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.85rem !important;
    }

    body:has(#advancedSearchControl) .engagement-card p {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
    }

    body:has(#advancedSearchControl) .imagelr-separator {
        width: 3rem !important;
        margin-bottom: 0.75rem !important;
    }

    body:has(#advancedSearchControl) .feature-glyph {
        font-size: 0.75rem !important;
    }
}



/* =======================================================
 * ACCESSIBILITY: ENGAGEMENT CARDS
 *========================================================*/

/* Keyboard navigation focus states */
body:has(#advancedSearchControl) .engagement-card:focus-within {
    outline: 3px solid rgba(255, 255, 255, 0.6) !important;
    outline-offset: 3px !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    body:has(#advancedSearchControl) .engagement-card,
    body:has(#advancedSearchControl) .feature-glyph {
        transition: none !important;
    }

    body:has(#advancedSearchControl) .engagement-card:hover {
        transform: none !important;
    }
}

/* =======================================================
 * CRITICAL FIX: CAROUSEL OUTSIDE COLUMN LAYOUT
 * Ensures carousel is NOT affected by 30%/70% split
 *========================================================*/

/* Force carousel to be full-width and outside flex layout */
body:has(#advancedSearchControl) .sce-carousel-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    order: -1 !important;
    /* Ensure it comes first */
    margin-bottom: 0rem !important;
}

/* Ensure carousel is NOT treated as a flex child */
body:has(#advancedSearchControl) .sce-carousel-section {
    display: block !important;
    float: none !important;
}

/* Override any inherited flex properties */
body:has(#advancedSearchControl) .sce-carousel-section * {
    flex-basis: auto !important;
}



/* =======================================================
 * COMPONENT: Advanced Search Accordion Styling
 * SCOPE: Course Search Page (body:has(#advancedSearchControl))
 * PURPOSE: Override Bootstrap collapse inline styles and 
 *          maintain custom styling when accordion opens/closes
 * 
 * CRITICAL: Bootstrap Collapse injects inline styles that
 *           override CSS. We use !important and high specificity
 *           to ensure our styles persist through state changes.
 *========================================================*/


/* =======================================================
 * PROGRESSIVE SEARCH PATTERN
 * Quick Search inline + Advanced Modal
 * Industry best practice implementation
 *========================================================*/

/* Main Search Container */
.sce-search-container {
    width: 100% !important;
    margin-bottom: 3rem !important;
    padding: 2rem !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Search Title */
.sce-search-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    color: #34111A !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
}

/* Quick Search Box */
.sce-quick-search-box {
    position: relative !important;
}

/* Quick Search Input Styling */
#courseSearchKeyword {
    margin-bottom: 1rem !important;
}

#courseSearchKeyword .form-group {
    position: relative !important;
    margin-bottom: 0 !important;
}

#courseSearchKeyword label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #34111A !important;
    margin-bottom: 0.5rem !important;
}

#courseSearchKeyword #keyword {
    width: 100% !important;
    padding: 0.875rem 3.5rem 0.875rem 1rem !important;
    font-size: 1rem !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

#courseSearchKeyword #keyword:focus {
    border-color: #8b2331 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 35, 49, 0.1) !important;
}

/* Quick Submit Button (in input) */
.sce-quick-submit-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 40px !important;
    height: 40px !important;

    background: #8b2331 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.sce-quick-submit-btn:hover {
    background: #6d1c27 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.sce-quick-submit-btn i {
    font-size: 1rem !important;
}

/* Advanced Search Link */
.sce-advanced-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;

    padding: 0.5rem 0 !important;

    color: #8b2331 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;

    transition: all 0.2s ease !important;
}

.sce-advanced-link:hover {
    color: #6d1c27 !important;
    gap: 0.75rem !important;
}

.sce-advanced-link i {
    font-size: 0.9rem !important;
}

/* =======================================================
 * MODAL STYLING
 *========================================================*/

/* Modal Backdrop */
.search-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;

    z-index: 9998 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.search-modal-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Modal Container */
.search-modal-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;

    width: 90% !important;
    max-width: 700px !important;
    max-height: 90vh !important;

    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2) !important;

    z-index: 9999 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    display: flex !important;
    flex-direction: column !important;
}

.search-modal-container.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Modal Header */
.search-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    padding: 1.5rem 2rem !important;
    border-bottom: 1px solid #e9ecef !important;

    flex-shrink: 0 !important;
}

.search-modal-header h3 {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    color: #34111A !important;
    margin: 0 !important;
}

.search-modal-header h3 i {
    color: #8b2331 !important;
}

.search-modal-close {
    width: 40px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;

    color: #a6a6a6 !important;
    font-size: 1.25rem !important;

    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.search-modal-close:hover {
    background: #f5f5f5 !important;
    color: #8b2331 !important;
    transform: rotate(90deg) !important;
}

/* Modal Body */
.search-modal-body {
    padding: 2rem !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

/* Modal Footer */
.search-modal-footer {
    padding: 1.5rem 2rem !important;
    border-top: 1px solid #e9ecef !important;
    background: #f8f9fa !important;
    border-radius: 0 0 16px 16px !important;

    flex-shrink: 0 !important;
}

.search-modal-footer .buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    margin: 0 !important;
}

.search-modal-footer .btn {
    min-width: 120px !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

/* Prevent body scroll when modal open */
body.modal-open {
    overflow: hidden !important;
}

/* Scrollbar Styling */
.search-modal-body::-webkit-scrollbar {
    width: 8px !important;
}

.search-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.search-modal-body::-webkit-scrollbar-thumb {
    background: #8b2331 !important;
    border-radius: 10px !important;
}

.search-modal-body::-webkit-scrollbar-thumb:hover {
    background: #6d1c27 !important;
}

/* Hide accordion card header in modal (already have modal title) */
.search-modal-body .card-header {
    display: none !important;
}

.search-modal-body .card {
    border: none !important;
    box-shadow: none !important;
}

/* =======================================================
 * RESPONSIVE
 *========================================================*/

/* Tablet */
@media (max-width: 991px) {
    .sce-search-container {
        padding: 1.5rem !important;
    }

    .sce-search-title {
        font-size: 1.5rem !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .sce-search-container {
        padding: 1.25rem !important;
        margin-bottom: 2rem !important;
    }

    .sce-search-title {
        font-size: 1.35rem !important;
    }

    .search-modal-container {
        width: 95% !important;
        max-height: 95vh !important;
        border-radius: 12px !important;
    }

    .search-modal-header {
        padding: 1.25rem 1.5rem !important;
    }

    .search-modal-header h3 {
        font-size: 1.15rem !important;
    }

    .search-modal-body {
        padding: 1.5rem !important;
    }

    .search-modal-footer {
        padding: 1.25rem 1.5rem !important;
    }

    .search-modal-footer .buttons {
        flex-direction: column !important;
    }

    .search-modal-footer .btn {
        width: 100% !important;
    }
}

/* =======================================================
 * TARGET: Course Search Keyword Input - Enhanced Version
 * SCOPE: #courseSearchKeyword on Advanced Search page
 * PURPOSE: Override Bootstrap width + Add search icon + Styling
 * 
 * CONTEXT: Bootstrap limits input to 50% width (.col-md-6).
 *          We force 100% width ONLY on Advanced Search page
 *          to align with the accordion below. Additionally,
 *          we add a search icon inside the input (right side)
 *          for better visual affordance and discoverability.
 *========================================================*/

/* Override Bootstrap column width to 100% */
body:has(#advancedSearchControl) #courseSearchKeyword>.col-md-6,
body:has(#advancedSearchControl) #courseSearchKeyword>.col-sm-12,
body:has(#advancedSearchControl) #courseSearchKeyword>[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove row margins to prevent overflow */
body:has(#advancedSearchControl) #courseSearchKeyword.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Add light background to group visually */
body:has(#advancedSearchControl) #courseSearchKeyword {
    background-color: #f0f0f0 !important;
    padding: 30px 15px 15px 15px !important;
    border-radius: 4px !important;
    margin-bottom: 1.5rem !important;
}

/* Label styling for consistency */
body:has(#advancedSearchControl) #courseSearchKeyword label {
    color: #171717 !important;
    margin-bottom: 0.5rem !important;
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}

/* =======================================================
 * UPDATED: Search Icon Inside Input (Left Side)
 * PURPOSE: Visual affordance - shows input is searchable
 * TECHNIQUE: SVG background image positioned left
 *========================================================*/

/* Add search icon inside input - left side (default state) */
body:has(#advancedSearchControl) #keyword,
body:has(#advancedSearchControl) input[name="courseSearch.courseDescriptionKeyword"] {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%238b2331" viewBox="0 0 16 16"%3e%3cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3e%3c/svg%3e') !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 18px 18px !important;
    padding-left: 42px !important;
    padding-right: 15px !important;
    height: 50px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #171717 !important;
    box-shadow: none !important;
}

/* Placeholder styling - examples text */
body:has(#advancedSearchControl) #keyword::placeholder {
    color: #34111A !important;
    font-style: italic !important;
    opacity: 0.4 !important;
}

/* Focus state - MacEwan brand color + brighter icon */
body:has(#advancedSearchControl) #keyword:focus,
body:has(#advancedSearchControl) #courseSearchKeyword input.form-control:focus {
    border-color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
    outline: none !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%238e2736" viewBox="0 0 16 16"%3e%3cpath d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/%3e%3c/svg%3e') !important;
    background-position: left 12px center !important;
    padding-left: 42px !important;
}

/* Ensure icon doesn't interfere with text input */
body:has(#advancedSearchControl) #keyword {
    width: 100% !important;
    max-width: 100% !important;
}

/* =======================================================
 * TARGET: Advanced Search Panel Title (h4)
 * SCOPE: #advancedSearchPanelTitle within Advanced Search accordion
 * PURPOSE: Apply left border accent and Montserrat typography
 * 
 * HIERARCHY: This targets only the h4.card-title within the
 *            Advanced Search component to avoid conflicts with
 *            other page elements using .card-title class
 *========================================================*/

/* Advanced Search title with left accent border */
body:has(#advancedSearchControl) #advancedSearchPanelTitle.card-title,
body:has(#advancedSearchControl) h4#advancedSearchPanelTitle {
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

/* Ensure button inside h4 inherits font styling */
body:has(#advancedSearchControl) #advancedSearchPanelTitle .btn {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Optional: Ensure span inside button also inherits */
body:has(#advancedSearchControl) #advancedSearchPanelTitle .btn>span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #171717 !important;
}

/* =======================================================
 * TARGET: ALL Advanced Search Form Fields - Single Column
 * SCOPE: All .row elements within #courseSearchCriteriaBody
 * PURPOSE: Force all form fields to stack vertically
 *========================================================*/

/* Force ALL Bootstrap columns to 100% width in Advanced Search */
body:has(#advancedSearchControl) #courseSearchCriteriaBody .row>[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}

/* Remove row negative margins that could cause overflow */
body:has(#advancedSearchControl) #courseSearchCriteriaBody .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure proper spacing between form groups */
body:has(#advancedSearchControl) #courseSearchCriteriaBody .form-group {
    margin-bottom: 1rem !important;
}

/* Add visual separation between field groups */
body:has(#advancedSearchControl) #courseSearchCriteriaBody .row {
    border-bottom: 1px dotted #f0f0f0 !important;
    padding-bottom: 0.2rem !important;
    margin-bottom: 0.2rem !important;
}

body:has(#advancedSearchControl) #courseSearchCriteriaBody .row:last-child {
    border-bottom: none !important;
}



/* =======================================================
 * TARGET 1: .card.panel-default wrapper (outer gray container)
 * This is the main accordion wrapper that Bootstrap styles
 * with white background. We need gray (#f0f0f0).
 *========================================================*/

/* Main card.panel-default container - gray wrapper with shadow */
body:has(#advancedSearchControl) .card.panel-default,
body:has(#advancedSearchControl) .panel-default.card,
body:has(#advancedSearchControl) div.card.panel-default,
#formCourseSearch .card.panel-default {
    background-color: #f0f0f0 !important;
    padding: 0px 15px 5px 15px !important;
    border-radius: 4px !important;
    margin-top: 20px !important;
    border: none !important;
    margin-bottom: 0px !important;
    overflow: hidden !important;
    /* Override Bootstrap .card flex properties */
    display: block !important;
}

/* =======================================================
 * TARGET 1.1: SEARCH FORM ACTION BAR (Background Container Only)
 * Target: .buttons container
 * Goal: Gray background #f0f0f0 behind buttons (Card Footer style).
 * =======================================================*/

.row>.col-lg-12>.buttons {
    /* 1. THE BACKGROUND (Your reference) */
    background-color: #f0f0f0 !important;

    /* 2. BORDERS (Card Closure) */
    /* Square top (0), Round bottom (4px) */
    border-radius: 0 0 4px 4px !important;

    /* 3. INTERNAL SPACING */
    /* Add spacing top and bottom so buttons don't touch edges */
    padding: 15px 20px !important;

    /* 4. TOP MARGIN */
    /* Separation from form content (inputs) */
    margin-top: -15px !important;

    /* 5. ALIGNMENT (Layout) */
    display: flex !important;
    justify-content: flex-end !important;
    /* Buttons to the right */
    gap: 10px !important;
    /* Spacing between buttons */
}

/* =======================================================
 * TARGET 2: .card.card-info (if exists as alternative class)
 * Some pages may use .card-info instead of .panel-default
 *========================================================*/

body:has(#advancedSearchControl) .card.card-info,
body:has(#advancedSearchControl) .card-info.card {
    background-color: #f0f0f0 !important;
    padding: 0px 15px 5px 15px !important;
    border-radius: 4px !important;
    margin-top: 20px !important;
    border: none !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    overflow: hidden !important;
}

/* =======================================================
 * TARGET 3: Accordion header (#advancedSearchControl)
 *========================================================*/

/* Accordion header styling - transparent background */
body:has(#advancedSearchControl) .card.panel-default .card-header,
body:has(#advancedSearchControl) .card.card-info .card-header,
body:has(#advancedSearchControl) #advancedSearchControl {
    background-color: transparent !important;
    border: none !important;
    padding: 15px 0 !important;
}

/* =======================================================
 * TARGET 4: Accordion toggle button
 *========================================================*/

/* Accordion toggle button - remove Bootstrap button styles */
body:has(#advancedSearchControl) .card.panel-default .card-header .btn,
body:has(#advancedSearchControl) .card.card-info .card-header .btn,
body:has(#advancedSearchControl) #advancedSearchControl .btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 600 !important;
    color: #34111A !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Button hover state */
body:has(#advancedSearchControl) .card.panel-default .card-header .btn:hover,
body:has(#advancedSearchControl) .card.card-info .card-header .btn:hover,
body:has(#advancedSearchControl) #advancedSearchControl .btn:hover {
    color: #8b2331 !important;
    background: none !important;
}

/* =======================================================
 * TARGET 5: Accordion body (.card-body) - white content area
 * CRITICAL: Must target multiple collapse states (.show, .collapse)
 *           to override Bootstrap's inline style injection
 *========================================================*/

/* Accordion body - white background content area */
body:has(#advancedSearchControl) .card.panel-default .card-body,
body:has(#advancedSearchControl) .card.card-info .card-body,
body:has(#advancedSearchControl) #courseSearchCriteriaBody .card-body,
body:has(#advancedSearchControl) .panel-collapse .card-body,
body:has(#advancedSearchControl) .panel-collapse.show .card-body {
    background-color: #ffffff !important;
    padding: 20px !important;
    margin-top: 10px !important;
    display: block !important;
    visibility: visible !important;
    border: none !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    font-size: 0.85rem !important;
}

/* =======================================================
 * TARGET 6: Panel collapse wrapper (#courseSearchCriteriaBody)
 * Must be transparent to show parent gray background
 *========================================================*/

/* Panel collapse wrapper - transparent background */
body:has(#advancedSearchControl) #courseSearchCriteriaBody,
body:has(#advancedSearchControl) .panel-collapse,
body:has(#advancedSearchControl) .panel-collapse.collapse,
body:has(#advancedSearchControl) .panel-collapse.collapse.show {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* =======================================================
 * TARGET 7: Expand/collapse icon animation
 *========================================================*/

/* Icon transition effect */
body:has(#advancedSearchControl) .panelHeaderIcon {
    transition: transform 0.3s ease !important;
}

/* Rotate icon 180deg when accordion is expanded */
body:has(#advancedSearchControl) .card-header .btn[aria-expanded="true"] .panelHeaderIcon,
body:has(#advancedSearchControl) #advancedSearchControl button[aria-expanded="true"] .panelHeaderIcon {
    transform: rotate(180deg) !important;
}



/* =======================================================
 * FIX: TREE VIEW WIDTH (Program Stream Selector)
 * Override fixed width to adapt to container
 *========================================================*/

/* Desktop: Tree View must respect form width (35%) */
@media (min-width: 992px) {
    body:has(#advancedSearchControl) .treeViewInner {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(#advancedSearchControl) #programStreamTree {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure parent container also respects width */
    body:has(#advancedSearchControl) #programStream {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablet and Mobile: Also ensure 100% width */
@media (max-width: 991px) {
    .treeViewInner {
        width: 100% !important;
        max-width: 100% !important;
    }

    #programStreamTree {
        width: 100% !important;
        max-width: 100% !important;
    }

    #programStream {
        width: 100% !important;
        max-width: 100% !important;
    }
}



/* Additional fix: Avoid horizontal overflow in form */
body:has(#advancedSearchControl) #formCourseSearch {
    overflow-x: hidden !important;
}

body:has(#advancedSearchControl) .card-body {
    overflow-x: hidden !important;
}

/* =======================================================
 * LAYOUT: SIDE-BY-SIDE (Desktop)
 * Version: No Forced Scroll
 *========================================================*/

@media (min-width: 992px) {

    /* Main wrapper */
    body:has(#advancedSearchControl) #contentModule1>.row>.col-lg-12 {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 2rem !important;
        flex-wrap: nowrap !important;
    }

    /* Spotlight Cards: RIGHT (65%) - No forced scroll */
    body:has(#advancedSearchControl) .sce-spotlight-container {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        order: 2 !important;

        /* Smooth sticky behavior */
        position: sticky !important;
        top: 2rem !important;
        align-self: flex-start !important;

        /* Natural content height */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Form: LEFT (35%) */
    body:has(#advancedSearchControl) #formCourseSearch {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        order: 1 !important;
    }

    /* 2x3 Grid on Desktop */
    body:has(#advancedSearchControl) .spotlight-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =======================================================
 * RESPONSIVE: TABLET
 *========================================================*/

@media (min-width: 768px) and (max-width: 991px) {

    body:has(#advancedSearchControl) #contentModule1>.row>.col-lg-12 {
        display: block !important;
    }

    body:has(#advancedSearchControl) .sce-spotlight-container {
        margin-bottom: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        overflow: visible !important;
    }

    body:has(#advancedSearchControl) #formCourseSearch {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(#advancedSearchControl) .spotlight-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =======================================================
 * RESPONSIVE: MOBILE
 *========================================================*/

@media (max-width: 767px) {

    body:has(#advancedSearchControl) #contentModule1>.row>.col-lg-12 {
        display: block !important;
    }

    body:has(#advancedSearchControl) .sce-spotlight-container {
        padding: 2rem 1rem !important;
        margin-bottom: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        overflow: visible !important;
    }

    body:has(#advancedSearchControl) #formCourseSearch {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(#advancedSearchControl) .sce-spotlight-container h2 {
        font-size: 1.6rem !important;
    }

    body:has(#advancedSearchControl) .spotlight-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    body:has(#advancedSearchControl) .spotlight-card {
        min-height: 200px !important;
        padding: 1.25rem !important;
    }

    body:has(#advancedSearchControl) .spotlight-icon {
        width: 45px !important;
        height: 45px !important;
    }

    body:has(#advancedSearchControl) .spotlight-icon i {
        font-size: 1.3rem !important;
    }

    body:has(#advancedSearchControl) .spotlight-card h3 {
        font-size: 1rem !important;
    }

    body:has(#advancedSearchControl) .spotlight-card p {
        font-size: 0.8rem !important;
    }
}

/* =======================================================
 * COURSE SEARCH RESULTS FILTER STYLES
 * Scoped strictly to #searchResultsFilter to avoid conflicts
 * =======================================================*/

/* 1. General Container (Gray Box) */
#searchResultsFilter {
    /* Your requested styles */
    background-color: #f0f0f0 !important;
    padding: 0px 15px 15px 15px !important;
    /* Adjusted padding-bottom for breathing room */
    border-radius: 4px !important;
    margin-top: 20px !important;

    /* Bootstrap Cleanup (Vital for clean look) */
    border: none !important;
    box-shadow: none !important;
}

/* 2. Accordion Header (Cleanup) */
/* Make header transparent to show background gray */
#searchResultsFilter .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 15px 0 10px 0 !important;
    /* Spacing for title */
}

/* 3. "Narrow Your Results" Text (Typography and Red Border) */
/* Target SPAN inside button to apply side border */
#searchResultsFilter .card-title button>span {
    /* Your requested styles */
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    /* Bold */
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;

    /* Text color */
    color: #34111A !important;
}

/* Remove Bootstrap link button decoration */
#searchResultsFilter .card-title button {
    text-decoration: none !important;
    padding: 0 !important;
    width: 100%;
}

/* 4. Options Container (Internal White Box) */
#searchResultsFilteringOptions {
    /* Your requested styles */
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #e9ecef !important;

    /* Extras to polish design */
    border-radius: 4px !important;
    padding: 15px !important;
    /* Internal spacing so links don't touch border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for depth */
}

/* (Optional) Style for h3 titles inside filter to match */
#searchResultsFilteringOptions h3 {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #a6a6a6 !important;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* 1. Text and Icon Container inside the button */
#searchResultsFilter .card-title button>span {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    /* Push text to left and icon to right */
    align-items: center !important;
    /* Perfect vertical centering */
}

/* 2. Icon Adjustment */
#searchResultsFilter .panelHeaderIcon {
    float: none !important;
    /* Override Bootstrap float-right because we use Flexbox */
    margin-left: auto !important;
    /* Ensures it sticks to the right */
}

/* 3. Icon Customization (Chevron) */
/* Ensure it applies only here */
#searchResultsFilter .panelHeaderIcon.glyphicon-minus::before {
    content: "\f077" !important;
    /* Chevron Up (Open) */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    color: #58565A !important;
    /* MacEwan Red */
}

/* Optional: When closed (collapsed) face down */
#searchResultsFilter button.collapsed .panelHeaderIcon.glyphicon-minus::before {
    content: "\f078" !important;
    /* Chevron Down */
    transform: rotate(0deg) !important;
}

/* =======================================================
 * FILTER OPTIONS STYLING (Card Style)
 * Transforms simple links into interactive cards with icons.
 * Scope: #searchResultsFilteringOptions
 * =======================================================*/

/* 1. Title Styles (h3) */
#searchResultsFilteringOptions h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #8b2331 !important;
    /* Rojo Corporativo */
    margin-bottom: 12px !important;
    margin-top: 15px !important;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 5px;
}

/* 2. Card Container (LI) */
#searchResultsFilteringOptions ul.list-unstyled li {
    display: block;
    margin-bottom: 10px;
    background-color: white !important;
    border-radius: 4px;
    overflow: hidden;
    /* So rounded border cuts the icon */
    position: relative;
    z-index: 1;

    /* Soft lilac gray border */
    border: 1px solid #E9E5E5;

    /* Transiciones suaves */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover on full Card */
#searchResultsFilteringOptions ul.list-unstyled li:hover {
    transform: translateY(-2px);
    /* Lifts slightly */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border-color: #8b2331;
    /* Red border on hover */
}

/* 3. The Link (A) - Text and Layout */
#searchResultsFilteringOptions ul.list-unstyled li a {
    display: block !important;
    position: relative !important;

    /* Left space for icon (45px) and right for arrow (40px) */
    padding: 12px 40px 12px 50px !important;

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    /* Semi-bold */
    font-size: 0.85rem !important;
    color: #34111a !important;
    /* Maroon */
    text-decoration: none !important;
    background-color: transparent !important;
    line-height: 1.3 !important;
}

/* 4. LEFT ICON (::before) - The Book */
#searchResultsFilteringOptions ul.list-unstyled li a::before {
    content: "\f02d";
    /* FontAwesome Book Icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Absolute Positioning */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    /* Occupies full height */
    width: 40px !important;

    /* Visual Style */
    background-color: #E9E5E5 !important;
    /* Soft gray */
    color: #34111A !important;
    /* Maroon */

    /* Icon centering */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1rem !important;

    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover: Icon changes color */
#searchResultsFilteringOptions ul.list-unstyled li:hover a::before {
    background-color: #8b2331 !important;
    /* Red Background */
    color: #ffffff !important;
    /* White Icon */
}

/* 5. RIGHT ICON (::after) - The Arrow */
#searchResultsFilteringOptions ul.list-unstyled li a::after {
    content: "\f054";
    /* FontAwesome Chevron Right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    color: #8b2331;
    /* Rojo */

    /* Initial position */
    position: absolute;
    right: 15px;
    top: 50%;

    /* Initial state: Invisible and offset */
    transform: translateY(-50%) translateX(-10px);
    opacity: 0;

    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover: Arrow appears */
#searchResultsFilteringOptions ul.list-unstyled li:hover a::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0px);
    /* Slides into place */
}

/* 6. ACTIVE STATE (If a filter is selected) */
/* The 'active' class comes in your HTML when selected */
/* =======================================================

/* 1. Active Card (LI) changes to Solid Red */
#searchResultsFilteringOptions ul.list-unstyled li.active {
    background-color: #8b2331 !important;
    /* Rojo MacEwan */
    border-color: #8b2331 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Subtle inner shadow */
}

/* 2. Active Link Text (YOUR REQUEST: WHITE) */
#searchResultsFilteringOptions ul.list-unstyled li.active a {
    color: #ffffff !important;
    /* Pure White */
    font-weight: 700 !important;
    /* Slightly bolder */
}

/* 3. Book Icon (Left) in Active state */
/* Invert colors: White Background, Red Icon */
#searchResultsFilteringOptions ul.list-unstyled li.active a::before {
    background-color: #ffffff !important;
    color: #8b2331 !important;
    border-right: 1px solid #8b2331 !important;
}

/* 4. Arrow (Right) in Active state */
/* Turns white to stand out on red background */
#searchResultsFilteringOptions ul.list-unstyled li.active a::after {
    color: #ffffff !important;
    opacity: 1 !important;
    /* Always visible if active */
    transform: translateY(-50%) translateX(0px) !important;
}

/* =======================================================
 * SCRIPT 11 STYLES: ACTIVE FILTERS (Chips UI)
 * Replaces the legacy "selectedNavigator" list.
 * =======================================================*/

/* 1. Container Bar (Replaces form-group) */
.sce-active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    /* Subtle separator */
    width: 100%;
}

/* 2. The Chip (The Pill) */
.sce-filter-chip {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 50px;
    /* Completely round border */
    padding: 6px 14px;

    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: #34111A;
    /* Maroon Text */
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Hover Effect on Chip */
.sce-filter-chip:hover {
    border-color: #E9E5E5;
    /* Red border */
    background-color: #E9E5E5;
    /* Very pale reddish background */
}

/* 3. "FILTER:" Label inside chip */
.sce-chip-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 6px;
    letter-spacing: 0.5px;
}

/* 4. Close Button (X) */
.sce-chip-remove {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #555;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.sce-chip-remove i {
    font-size: 10px;
    /* Small icon */
}

.sce-chip-remove:hover {
    background-color: #8b2331;
    /* Red Background */
    color: white;
    /* White Icon */
}

/* 5. "Clear All" Link (Ghost Button) */
.sce-clear-all-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: #34111A;
    /* Initial neutral gray */
    text-decoration: none !important;
    margin-left: 5px;
    font-weight: 600;

    /* Prepare capsule shape (invisible for now) */
    padding: 6px 14px;
    /* Same padding as chips */
    border-radius: 50px;
    transition: all 0.2s ease;
    /* Smooth background color transition */
}

/* Hover Effect: Becomes Lilac/Gray Capsule */
.sce-clear-all-link:hover {
    background-color: #E9E5E5 !important;
    /* Your requested color */
    color: #8b2331 !important;
    /* Red text to indicate action */
    text-decoration: underline !important;
}


/* =======================================================
 * REQUEST INFORMATION FORM (Complete Style)
 * Scope: form[name="publicRequestInformationForm"]
 * Includes: Card Container, Inputs, Textareas, and Buttons.
 * =======================================================*/

/* 1. CONTAINER (YOUR CODE - White Card) */
form[name="publicRequestInformationForm"] #requestInformation {
    background-color: #fff !important;
    padding: 40px 30px 40px 30px !important;
    border-radius: 8px !important;
    margin: 40px auto !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

/* First row adjustment */
form[name="publicRequestInformationForm"] #requestInformation>.row:first-child {
    padding-top: 15px !important;
}

/* 2. THE LABELS (Text tags) */
form[name="publicRequestInformationForm"] label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Bold for readability */
    font-size: 0.85rem !important;
    color: #171717 !important;
    /* Dark Maroon */
    margin-bottom: 8px !important;
    display: block !important;
}

/* 3. INPUTS AND TEXTAREAS (Text Boxes) */
form[name="publicRequestInformationForm"] .form-control {
    /* Dimensions and Spacing */
    height: auto !important;
    /* Allow padding to define height */
    padding: 12px 15px !important;
    /* More internal spacing */

    /* Border and Background */
    background-color: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    /* Default soft gray */
    border-radius: 4px !important;

    /* Internal Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #171717 !important;

    /* Smooth transition */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* 4. FOCUS STATE (When user types) */
/* Brand key: Maroon Border and Soft Shadow */
form[name="publicRequestInformationForm"] .form-control:focus {
    border-color: #8b2331 !important;
    /* Maroon Border */
    box-shadow: 0 0 0 0.2rem rgba(139, 35, 49, 0.25) !important;
    /* Halo Maroon */
    outline: 0 !important;
}

/* 5. SPECIFIC TEXTAREA (Comments) */
/* Ensure it has sufficient height */
form[name="publicRequestInformationForm"] textarea.form-control {
    min-height: 120px !important;
}

/* 6. SUBMIT BUTTON (Consistency) */
form[name="publicRequestInformationForm"] #buttonSubmitRequestInformation {
    margin-top: 20px !important;
    /* A bit more breathing room */
    margin-bottom: 10px !important;
    width: 100% !important;
    /* Optional: Make full width on mobile */

    /* Ensure primary button styles if not inherited */
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

form[name="publicRequestInformationForm"] #buttonSubmitRequestInformation:hover {
    background-color: #34111A !important;
    border-color: #34111A !important;
}

/* =======================================================
 * STUDENT INQUIRY MENU (Webflow Minimalist Style)
 * Style: Clean List, Hairline Dividers, Right Arrows.
 * =======================================================*/

/* 1. ROW CONTAINER (The "Line") */
.studentInquirySelection {
    /* Total card style reset */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* DIVIDING LINE (Key to Webflow style) */
    border-bottom: 1px solid #e9ecef !important;

    /* Generous vertical spacing */
    padding: 25px 0 !important;
    margin-bottom: 0 !important;

    /* Layout to align Arrow to right */
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* Optional: Remove border from last element for total cleanliness */
.studentInquirySelection:last-child {
    border-bottom: none !important;
}

/* 2. TITLE (Main Link) */
.studentInquirySelection h5 {
    margin: 0 0 5px 0 !important;
    /* Close to description */
}

.studentInquirySelection h5 a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.15rem !important;
    /* Slightly larger and readable */
    font-weight: 500 !important;
    /* Semi-bold elegante, no tosco */
    color: #34111A !important;
    /* Dark Brand */
    text-decoration: none !important;
    display: block !important;
    padding-right: 40px !important;
    /* Space so it doesn't clash with arrow */
    transition: color 0.2s ease !important;
}

/* 3. DESCRIPTION (Secondary Text) */
.studentInquirySelection p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    color: #666 !important;
    /* Soft gray */
    margin: 0 !important;
    line-height: 1.4 !important;
    padding-right: 40px !important;
    /* Aligned with title */
}

/* 4. THE ARROW (Webflow Arrow ->) */
/* Use ::after on container to center vertically relative to entire block */
.studentInquirySelection::after {
    content: "\f061";
    /* fa-arrow-right (Simple and elegant arrow) */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Absolute Positioning to Right */
    position: absolute !important;
    right: 10px !important;
    /* Stuck to right edge */
    top: 50% !important;
    transform: translateY(-50%);
    /* Perfect vertical centering */

    font-size: 1rem !important;
    color: #34111A !important;
    /* Base dark color */
    transition: all 0.3s ease !important;
}

/* 5. INTERACTION (Hover Effect) */
/* On hover, text lights up and arrow moves */
.studentInquirySelection:hover {
    background-color: transparent !important;
    /* Maintain cleanliness */
}

/* Text turns Maroon */
.studentInquirySelection:hover h5 a {
    color: #8b2331 !important;
}

/* Arrow moves right and becomes Maroon */
.studentInquirySelection:hover::after {
    color: #8b2331 !important;
    transform: translateY(-50%) translateX(5px) !important;
    /* Subtle displacement */
}

/* ==========================================================
 * FOOTER FIX - FORCE WITH ATTRIBUTE SELECTOR
 ========================================================== */

@media (min-width: 992px) {

    /* Use attribute selector for maximum specificity */
    [id="footerNav"]>[class*="row"] {
        display: grid !important;
        grid-template-columns: 35% 15% 15% 35% !important;
        gap: 0 !important;
        min-height: 250px !important;
    }

    [id="footerNav"]>[class*="row"]>[class*="col-lg-3"] {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        -ms-flex: none !important;
        padding: 35px 15px !important;
        grid-row: 1 !important;
    }

    [id="footerNav"]>[class*="row"]>[class*="col-lg-3"]:nth-child(1) {
        grid-column: 1 !important;
    }

    [id="footerNav"]>[class*="row"]>[class*="col-lg-3"]:nth-child(2) {
        grid-column: 2 !important;
    }

    [id="footerNav"]>[class*="row"]>[class*="col-lg-3"]:nth-child(3) {
        grid-column: 3 !important;
    }

    [id="footerNav"]>[class*="row"]>[class*="col-lg-3"]:nth-child(4) {
        grid-column: 4 !important;
    }
}

/* =======================================================
 * RECEIPT PAGE TRANSFORMATION (MacEwan Card Style)
 * Goal: Professional receipt card with modern styling
 * Version: FINAL PRODUCTION - Zero variable IDs
 * Design System: v2026.1
 * Date: January 2026
 * =======================================================*/

/* 1. THE CANVAS (General background) */
/* Optional: Gray page background to make card stand out */
/* body { background-color: #f4f4f4; } */

/* 2. MAIN CARD (Receipt Container) */
form[name="publicPaymentReceiptForm"] {
    max-width: 800px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    padding: 0 !important;

    /* Card Style */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    overflow: hidden !important;

    /* Brand Top Border (Maroon) */
    border-top: 6px solid #8b2331 !important;
}

/* =======================================================
 * 3A. EMAIL RECEIPT MESSAGE (Plain Text Style)
 * Target: "You will also receive a receipt by email"
 * Pattern: No highlight - plain text
 * Structural Selector: .pageHelpText class (stable)
 * Position: 3 of 12 (verified in console)
 * =======================================================*/

/* Target: .variable-content inside .pageHelpText */
form[name="publicPaymentReceiptForm"] .pageHelpText {
    /* Spacing */
    padding: 1rem 2rem !important;
    margin: 1rem 0 !important;

    /* Plain background */
    background-color: transparent !important;
    border: none !important;
}

/* Plain text styling for email message */
form[name="publicPaymentReceiptForm"] .pageHelpText .variable-content {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
}

form[name="publicPaymentReceiptForm"] .pageHelpText .variable-content-item {
    /* Plain text */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Typography - Simple and understated */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    color: #666 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* NO icons for email message */
form[name="publicPaymentReceiptForm"] .pageHelpText .variable-content-item::before,
form[name="publicPaymentReceiptForm"] .pageHelpText .variable-content-item::after {
    display: none !important;
    content: none !important;
}

/* =======================================================
 * 3B. SUCCESS MESSAGE (Dark Highlight)
 * Target: "The transaction was successfully completed..."
 * Pattern: DARK HIGHLIGHT (Critical confirmation)
 * Structural Selector: #applications section (stable)
 * Position: 9 of 12 (verified in console)
 * =======================================================*/

/* PRIMARY SELECTOR - Most Robust */
/* Targets .variable-content in .row that comes after #applications */
form[name="publicPaymentReceiptForm"] #applications~.row .variable-content {
    /* Reset */
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;

    /* DARK HIGHLIGHT Pattern */
    background-color: #34111a !important;
    /* Dark maroon */
    border-left: 0.4rem solid #d51f37 !important;
    /* Bright red */

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 1.5rem 0 !important;

    /* Typography base */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    /* White text */

    /* Position context for icon */
    position: relative !important;
}

/* Success message text */
form[name="publicPaymentReceiptForm"] #applications~.row .variable-content-item {
    /* Layout for icon positioning */
    display: block !important;
    position: relative !important;

    /* Inherit dark styling */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    padding-right: 100px !important;
    /* Room for icon */
    margin: 0 !important;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* SUCCESS ICON - Check Circle with Zoom Animation */
form[name="publicPaymentReceiptForm"] #applications~.row .variable-content-item::after {
    content: "\f058";
    /* fa-check-circle */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;

    /* Icon Style */
    font-size: 3.5rem !important;
    color: #d51f37 !important;
    /* Bright red to match border */

    /* Position on right */
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* Layer order */
    z-index: 2 !important;

    /* ZOOM LOOP ANIMATION - Subtle pulsing */
    animation: successZoom 2s ease-in-out infinite !important;
}

/* Remove any ::before pseudo-elements */
form[name="publicPaymentReceiptForm"] #applications~.row .variable-content-item::before {
    display: none !important;
    content: none !important;
}

/* SUCCESS ZOOM ANIMATION - Gentle bounce to draw attention */
@keyframes successZoom {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

/* =======================================================
 * ALTERNATIVE SELECTOR for Success Message (Redundancy)
 * Uses #receiptClientInfoContainer as anchor
 * Adds extra layer of protection
 * =======================================================*/
form[name="publicPaymentReceiptForm"] #receiptClientInfoContainer~.row:not(:has(.pageHelpText)) .variable-content {
    /* Reset */
    background-image: none !important;
    border: none !important;
    border-radius: 0px !important;

    /* DARK HIGHLIGHT Pattern */
    background-color: #34111a !important;
    border-left: 0.4rem solid #d51f37 !important;

    /* Spacing and Layout */
    padding: 2.1rem 2rem !important;
    margin: 0 !important;

    /* Typography base */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.9) !important;

    /* Position context for icon */
    position: relative !important;
}

form[name="publicPaymentReceiptForm"] #receiptClientInfoContainer~.row:not(:has(.pageHelpText)) .variable-content-item {
    display: block !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    padding-right: 100px !important;
    margin: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

form[name="publicPaymentReceiptForm"] #receiptClientInfoContainer~.row:not(:has(.pageHelpText)) .variable-content-item::after {
    content: "\f058";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    font-size: 3.5rem !important;
    color: #d51f37 !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    z-index: 2 !important;
    animation: successZoom 2s ease-in-out infinite !important;
}

form[name="publicPaymentReceiptForm"] #receiptClientInfoContainer~.row:not(:has(.pageHelpText)) .variable-content-item::before {
    display: none !important;
    content: none !important;
}

/* =======================================================
 * PRODUCTION NOTES
 * =======================================================
 * 
 * ZERO VARIABLE IDs USED:
 * - Email message uses: .pageHelpText (class - stable)
 * - Success message uses: #applications (section ID - stable)
 * - Backup uses: #receiptClientInfoContainer (section ID - stable)
 * 
 * NO DEPENDENCIES ON:
 * - #variableContentBlockPG0029 ❌ (removed)
 * - #variableContentBlockPG0030 ❌ (removed)
 * 
 * VERIFIED WORKING IN STAGING:
 * - Console test confirmed structure
 * - Position 3: Email message (in .pageHelpText)
 * - Position 9: Success message (after #applications)
 * 
 * PRODUCTION READY: ✅
 * This CSS will survive staging → production deployment
 * 
 * =======================================================*/

/* =======================================================
 * 3C. ADD TO CALENDAR LINK (Design System)
 * Restored and enhanced
 * =======================================================*/

/* Calendar link container */
.calendarLinkContainer {
    text-align: center !important;
    padding: 1rem 0 !important;
}

/* Calendar link styling */
.calendarLinkText,
a.calendarLinkText {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    /* Link styling (Design System) */
    color: #8b2331 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;

    /* Transition */
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
    cursor: pointer !important;
}

/* Hover state */
.calendarLinkText:hover,
a.calendarLinkText:hover {
    color: #34111A !important;
    text-decoration-color: #34111A !important;
}

/* Calendar icon */
.calendarDownload,
.calendarLinkText .calendarDownload,
.calendarLinkText i {
    color: #8b2331 !important;
    font-size: 1.1rem !important;
    transition: color 0.3s ease !important;
}

/* Icon hover */
.calendarLinkText:hover .calendarDownload,
.calendarLinkText:hover i {
    color: #34111A !important;
}

/* =======================================================
 * 4. CUSTOMER INFO SECTION (Soft Gray)
 * Target: #receiptClientInfoContainer
 * Pattern: LIGHT HIGHLIGHT (Organizational/Reference)
 * Reason: Metadata section with customer/order info
 * Change: COLORS + BORDER - Spacing preserved
 * =======================================================*/

#receiptClientInfoContainer {
    /* Light Highlight Pattern */
    background-color: #f0f0f0 !important;
    /* CHANGED: Design System light gray */
    border-top: 0.2rem solid #8b2331 !important;
    /* ADDED: Maroon top border */

    /* Spacing - Preserved */
    padding: 30px 40px !important;
    margin: 0 !important;

    /* Remove bottom border (replaced by left border) */
    border-bottom: none !important;
    /* CHANGED: Removed */
}

/* Customer Text (Left) */
#receiptClientInfoContainer .col-lg-9 {
    font-family: 'Montserrat', sans-serif !important;
    color: #171717 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* Order Data (Right) */
#receiptClientInfoContainer .col-lg-3,
#receiptClientInfoContainer .col-lg-12 span {
    text-align: right !important;
    display: block !important;
}

/* Labels (Basket No., Date) */
.shoppingCartLabel {
    color: #fff !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    display: block !important;
    padding: 18px;
}

/* Values (37, Dec 5, etc.) */
#basketNumber,
#basketDate,
#studentNumber {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}


/* =======================================================
 * 5. ITEM LIST (Receipt Body)
 * =======================================================*/

#shoppingCartItemsContainer {
    padding: 20px 40px !important;
}

/* Section Headers */
.cartContainerHeader h3 {
    font-family: 'Montserrat', sans-serif !important;
    color: #8b2331 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #8b2331 !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
}

/* Individual Items */
.cartItemDescriptionContainer {
    margin-bottom: 15px !important;
}

.cartItemName strong {
    font-size: 1rem !important;
    color: #171717 !important;
}

.cartItemCode {
    font-size: 0.85rem !important;
    color: #777 !important;
}

/* Prices and Quantities */
.cartItemOptionOtherFeeAmount,
.cartItemQuantity,
.shoppingCartAmount {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: #171717 !important;
}

/* =======================================================
 * CART ITEM STYLING (Consolidated & Fixed)
 * Typography and Links styling for Cart Items.
 * UPDATED: Titles are now Dark (#171717) by default.
 * =======================================================*/

/* 1. Main Link & Text Styling (Course/Certificate Title) */
/* Targets the container, strong tag, and link to ensure uniformity */
.cartItemDescriptionContainer .cartItemName,
.cartItemDescriptionContainer .cartItemName strong,
.cartItemDescriptionContainer .cartItemName a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    /* Fixed size */
    font-weight: 700 !important;
    /* Bold */
    line-height: 1.4 !important;
    color: #171717 !important;
    /* Dark Grey (Standard) */
    text-decoration: none !important;
    /* No underline by default */
    margin-bottom: 5px !important;
    display: block !important;
    transition: color 0.3s ease, text-decoration 0.3s ease !important;
}

/* 2. Hover State (Interaction) */
/* Only the link should change color on hover */
.cartItemDescriptionContainer .cartItemName a:hover {
    color: #8b2331 !important;
    /* MacEwan Maroon */
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
}

/* 3. Course Code Styling (Grey & Uppercase) */
.cartItemDescriptionContainer .cartItemCode {
    color: #a6a6a6 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.79rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01rem !important;
    text-transform: uppercase !important;
    margin-top: 5px !important;
}

/* =======================================================
 * 6. TOTALS (Receipt Footer)
 * =======================================================*/

#shoppingCartTotalContainer {
    background-color: #f0f0f0 !important;
    padding: 20px 40px !important;
    margin-top: 20px !important;
}

/* Subtle Separator (Dotted line) */
#shoppingCartTotalContainer .cartSubtotalContainer {
    border-bottom: 1px dotted #171717 !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}

/* Subtotal and Total Labels */
.shoppingCartSubTotalLabel,
.shoppingCartGrandTotalLabel {
    color: #171717 !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    text-align: right !important;
    display: block !important;
}

/* Amounts */
.shoppingCartSubTotalAmount,
.shoppingCartGrandTotalAmount {
    color: #171717 !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    text-align: right !important;
    margin: 0 !important;
}

/* Grand Total (Larger) */
#shoppingCartTotal {
    font-size: 1.8rem !important;
    color: #171717 !important;
}

#shoppingCartTotalLabel {
    color: #171717 !important;
    font-weight: 700 !important;
}

/* =======================================================
 * 7. PAYMENT DETAIL (Paid by...)
 * =======================================================*/

#paymentMethodDisplay {
    padding: 20px 40px !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #666 !important;
    font-size: 0.9rem !important;
    border-top: 1px dashed #e0e0e0 !important;
    background-color: #fff !important;
}

/* =======================================================
 * 8. CLEANUP (Hide Empty Elements)
 * =======================================================*/

.pageHelpText:empty {
    display: none !important;
}

#applications {
    display: none !important;
}

/* =======================================================
 * TRANSACTION PRELOADER (The "MacEwan Mesh" Experience)
 * Target: #ajaxLoadingModal (Bootstrap)
 * Adaptation: Replicates #sce-auto-search-overlay visuals.
 * =======================================================*/

/* 1. BASE ANIMATION (Definition needed if not globally existing) */
@keyframes dark-mesh-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 2. BACKDROP (Animated Mesh) */
/* Transform boring backdrop into your Mesh Gradient */
.modal-backdrop.show {
    opacity: 1 !important;
    /* Full visibility to see colors */

    /* --- MESH CONFIG (Your original code adapted) --- */
    background-color: #34111A !important;

    /* Local variables for gradients */
    --c-0: rgba(212, 31, 55, 0.5);
    /* Red */
    --c-1: rgba(74, 21, 59, 0.7);
    /* Plum */
    --c-2: hsla(320, 90%, 60%, 0.3);
    /* Pink Pop */
    --c-3: rgba(255, 255, 255, 0.05);
    /* Light */

    /* Static positions by default (fallback if no JS moving them) */
    --x-0: 10%;
    --y-0: 20%;
    --x-1: 80%;
    --y-1: 10%;
    --x-2: 20%;
    --y-2: 80%;
    --x-3: 90%;
    --y-3: 90%;

    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) !important;

    background-blend-mode: screen, normal, normal, normal !important;

    /* Smooth background-position animation to simulate flow */
    background-size: 200% 200%;
    animation: dark-mesh-flow 15s ease infinite alternate !important;

    /* Extra Blur effect for depth */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 3. BOOTSTRAP CLEANUP */
/* Make modal "window" container invisible so only content floats */
#ajaxLoadingModal .modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Absolute vertical and horizontal centering */
#ajaxLoadingModal .modal-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Hide old glyphicon icon */
#loadingIndicator_ajaxLoadingModal .glyphicon {
    display: none !important;
}

/* 4. HYBRID LOADER (Container) */
#loadingIndicator_ajaxLoadingModal {
    position: relative !important;
    width: 90px !important;
    /* Container base size */
    height: 90px !important;
    margin: 0 auto 30px auto !important;
    /* Text separation */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 5. SPINNING RING (::before) - Your "Spinning Ring" code */
#loadingIndicator_ajaxLoadingModal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    /* CONIC GRADIENT (MacEwan Comet Tail) */
    background: conic-gradient(from 0deg,
            transparent 0%,
            #4A153B 30%,
            /* Deep Plum */
            #ff3399 60%,
            /* Electric Pink */
            #D41F37 100%
            /* Bright Red */
        );

    /* MASK (Donut hole) */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));

    /* ANIMATION */
    animation: spin 1s linear infinite;

    /* GLOW */
    filter: drop-shadow(0 0 8px rgba(212, 31, 55, 0.6));
    z-index: 1;
}

/* 6. CENTRAL LOGO (::after) - Injected as background image */
#loadingIndicator_ajaxLoadingModal::after {
    content: '';
    position: absolute;
    z-index: 2;
    /* Above the ring */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfect centering */

    /* LOGO DIMENSIONS */
    width: 45px;
    /* Adjusted to fit inside 90px ring */
    height: 45px;

    /* THE SVG IMAGE */
    background-image: url('/images/logo-symbol-spinner.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 7. THE TEXT ("PROCESSING...") */
#loadingIndicatorMessage_ajaxLoadingModal {
    /* Your adapted "sce-loading-text" style */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.1rem !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    margin-top: 15px !important;
}

/* =======================================================
 * PROFILE CONTENT - ALL LINKS STYLING
 * Includes: Variable content, form text, privacy links
 * =======================================================*/

/* Base Link Styles - All links inside profile content */
#personProfileMainContent .card-body a,
#personProfileMainContent .profileTemplateLocationContainer a,
#personProfileMainContent #studentProfileHelpText a,
#personProfileMainContent .variable-content a,
#personProfileMainContent .form-text a,
#personProfileMainContent #studentProfileJoinMailingListContainer a,
#personProfileMainContent #studentProfilePrivacyPolicyQuestionContainer a,
#personProfileMainContent .pageHelpText a {
    color: #8b2331 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

/* Hover State - All content links */
#personProfileMainContent .card-body a:hover,
#personProfileMainContent .profileTemplateLocationContainer a:hover,
#personProfileMainContent #studentProfileHelpText a:hover,
#personProfileMainContent .variable-content a:hover,
#personProfileMainContent .form-text a:hover,
#personProfileMainContent #studentProfileJoinMailingListContainer a:hover,
#personProfileMainContent #studentProfilePrivacyPolicyQuestionContainer a:hover,
#personProfileMainContent .pageHelpText a:hover {
    color: #34111a !important;
    text-decoration: underline !important;
}

/* Specific Privacy Policy Links (Both locations) */
#personProfileMainContent #linkcontentBlockPG0011_2,
#personProfileMainContent a#linkcontentBlockPG0011_2 {
    color: #8b2331 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

#personProfileMainContent #linkcontentBlockPG0011_2:hover,
#personProfileMainContent a#linkcontentBlockPG0011_2:hover {
    color: #34111a !important;
}

/* Focus State - Accessibility */
#personProfileMainContent .variable-content a:focus,
#personProfileMainContent .form-text a:focus {
    outline: 0px solid #8b2331 !important;
    outline-offset: 0px !important;
}


/* =======================================================
 * Override para Privacy Policy Modal - VERSIÓN CORREGIDA
 * =======================================================*/

.modal-dialog .sce-faq-toggle {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.modal-dialog .sce-faq-item {
    margin-bottom: 0;
}

.modal-dialog .sce-faq-item label.sce-faq-label {
    display: block !important;
    padding: 1rem 2.5rem 1rem 1rem !important;
    cursor: pointer !important;
    position: relative !important;
    background: #f9f9f9 !important;
    transition: background 0.2s ease !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #171717 !important;
}

.modal-dialog .sce-faq-item label.sce-faq-label:hover {
    background: #DDDDDD !important;
}

.modal-dialog .sce-faq-item label.sce-faq-label:focus {
    color: #fff !important;
    background: #8b2331 !important;
}

/* ============================================
   CHEVRON CORREGIDO: fa-chevron-down
   ============================================ */
.modal-dialog .sce-faq-item label.sce-faq-label::after {
    content: "\f078" !important;
    /* ← CAMBIO AQUÍ: fa-chevron-down */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    /* 0deg = ABAJO ▼ */
    transition: transform 0.3s ease !important;
    color: #171717 !important;
}

.modal-dialog .sce-faq-item label.sce-faq-label:focus::after {
    color: #fff !important;
}

/* Estado CHECKED - Rotación 180deg = ARRIBA ▲ */
.modal-dialog .sce-faq-toggle:checked+label.sce-faq-label::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.modal-dialog .sce-faq-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
}

.modal-dialog .sce-faq-toggle:checked~.sce-faq-content {
    max-height: 1000px !important;
}

.modal-dialog .sce-faq-content .sce-faq-answer {
    padding: 1rem !important;
    background: white !important;
}


/* =======================================================
 * PRIVACY POLICY LINK (BOTTOM) - Special with Arrow
 * Target: #linkcontentBlockPG00111
 * =======================================================*/

/* Base State */
#personProfileMainContent #linkcontentBlockPG00111,
#personProfileMainContent a#linkcontentBlockPG00111 {
    position: relative !important;
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #8b2331 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 35, 49, 0.3) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 2px !important;
    margin-right: 25px !important;
    padding-right: 18px !important;
    transition: all 0.3s ease !important;
}

/* Arrow Icon (Hidden by default) */
#personProfileMainContent #linkcontentBlockPG00111::after,
#personProfileMainContent a#linkcontentBlockPG00111::after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 1px !important;
    right: 8px !important;
    opacity: 0 !important;
    font-size: 0.8em !important;
    color: inherit !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* Hover State - Bottom Privacy Link */
#personProfileMainContent #linkcontentBlockPG00111:hover,
#personProfileMainContent a#linkcontentBlockPG00111:hover {
    color: #34111a !important;
    text-decoration-color: #34111a !important;
}

/* Hover State - Arrow appears */
#personProfileMainContent #linkcontentBlockPG00111:hover::after,
#personProfileMainContent a#linkcontentBlockPG00111:hover::after {
    opacity: 1 !important;
    right: 3px !important;
}

/* =======================================================
 * PRIVACY POLICY & MODAL CONTENT STYLING (Production Safe)
 * Target: .variable-content-item inside .modal-body
 * Goal: Apply corporate typography hierarchy (h1-h5) to ANY modal content.
 * Strategy: Avoids specific IDs (PGxxxx) to ensure stability across envs.
 * =======================================================*/

/* 1. CONTAINER & BASE TEXT */
/* We target the class structure, not the ID */
.modal-body .variable-content-item {
    font-family: 'Montserrat', sans-serif !important;
    color: #171717 !important;
    /* MacEwan Dark Grey */
    line-height: 1.6 !important;
    font-size: 1rem !important;
}

.modal-body .variable-content-item p {
    margin-bottom: 1.5rem !important;
}

/* 2. HEADING 1 (Main Title) */
.modal-body .variable-content-item h1 {
    color: #34111A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 3.125rem !important;
    /* 50px */
    text-transform: uppercase !important;
    letter-spacing: 0.05rem !important;
    line-height: 1.1 !important;

    margin-top: 1.3rem !important;
    margin-bottom: 1.2rem !important;
    border-bottom: 1px solid #e0e0e0 !important;
    /* Separator */
    padding-bottom: 1rem !important;
}

/* 3. HEADING 2 */
.modal-body .variable-content-item h2 {
    color: #171717 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 2.1756rem !important;
    /* ~35px */
    letter-spacing: -0.002rem !important;
    line-height: 1.142 !important;

    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    position: relative !important;
}

/* 4. HEADING 3 (Maroon Accent) */
.modal-body .variable-content-item h3 {
    color: #8b2331 !important;
    /* Maroon */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.7rem !important;
    /* ~27px */
    line-height: 1.089 !important;

    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* 5. HEADING 4 (Subtitle with Border) */
.modal-body .variable-content-item h4 {
    color: #171717 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1025rem !important;
    line-height: 1.3 !important;

    /* Visual Accent: Left Maroon Border */
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;

    margin-top: 1.5rem !important;
    margin-bottom: 0.7rem !important;
}

/* 6. LIST STYLING */
.modal-body .variable-content-item ul {
    margin-left: 20px !important;
    margin-bottom: 1.5rem !important;
}

.modal-body .variable-content-item ul li {
    font-family: 'Montserrat', sans-serif !important;
    margin-bottom: 0.5rem !important;
    list-style-type: disc !important;
    color: #171717 !important;
}

/* 7. LINKS INSIDE CONTENT */
.modal-body .variable-content-item a {
    color: #8b2331 !important;
    /* Maroon */
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.3s ease !important;
}

.modal-body .variable-content-item a:hover {
    color: #34111A !important;
    /* Darker Maroon */
    text-decoration: none !important;
}

/* 8. MODAL HEADER TITLE (Generic Targeting) */
/* Targets any h2 inside a modal-header */
.modal-header .modal-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    text-transform: uppercase !important;
    font-size: 1.5rem !important;
}

/* 9. MODAL FOOTER BUTTON (Close) */
/* Uses attribute selector 'value="Close"' to be safer than ID */
.modal-footer button[value="Close"] {
    background-color: #ffffff !important;
    color: #555 !important;
    border: 1px solid #ced4da !important;
    border-radius: 50px !important;
    /* Pill */
    padding: 6px 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
}

.modal-footer button[value="Close"]:hover {
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    color: #ffffff !important;
}

/* =======================================================
 * PROFILE CHECKOUT - CONTENT AREA STYLES
 * Target: #personProfileMainContent (Moneris Checkout)
 * Author: Ricardo
 * Date: 2025-12-05
 * =======================================================*/

/* =======================================================
 * CONTINUE CHECKOUT BUTTON - RESPONSIVE
 * Desktop: 300px width | Mobile: 100% width
 * =======================================================*/

/* DESKTOP & TABLET (Default) */
#personProfileMainContent #buttonContinueCheckout,
#personProfileMainContent #studentProfileHelpText #buttonContinueCheckout,
#personProfileMainContent #buttonContinueCheckoutBottom,
#personProfileMainContent #personProfilePageBottomButtons #buttonContinueCheckoutBottom {
    max-width: 300px !important;
    width: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    display: inline-block !important;
    margin-right: 10px !important;
}

/* TABLET - Slightly smaller (Optional) */
@media (max-width: 991.98px) {

    #personProfileMainContent #buttonContinueCheckout,
    #personProfileMainContent #buttonContinueCheckoutBottom {
        max-width: 250px !important;
    }
}

/* MOBILE - FULL WIDTH */
@media (max-width: 767.98px) {

    #personProfileMainContent #buttonContinueCheckout,
    #personProfileMainContent #studentProfileHelpText #buttonContinueCheckout,
    #personProfileMainContent #buttonContinueCheckoutBottom,
    #personProfileMainContent #personProfilePageBottomButtons #buttonContinueCheckoutBottom {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        /* Space if there are more buttons */
    }
}

/* EXTRA SMALL MOBILE (iPhone SE, etc.) */
@media (max-width: 575.98px) {

    #personProfileMainContent #buttonContinueCheckout,
    #personProfileMainContent #buttonContinueCheckoutBottom {
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 0.95rem !important;
        /* Slightly smaller */
    }
}

/* =======================================================
 * PAYMENT PAGE - BUTTONS STYLING (Moneris)
 * Target: Keep Shopping + Continue Checkout buttons
 * Page: Payment information / Checkout flow
 * =======================================================*/

/* DESKTOP - Keep Shopping + Continue Checkout */
.buttons #buttonKeepShopping,
.buttons #buttonContinueCheckout,
.col-lg-12.buttons #buttonKeepShopping,
.col-lg-12.buttons #buttonContinueCheckout {
    max-width: 300px !important;
    width: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    display: inline-block !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    /* Space if stacked */
}

/* Keep Shopping - Secondary button specific styles */
.buttons #buttonKeepShopping,
.col-lg-12.buttons #buttonKeepShopping {
    font-weight: 600 !important;
}

/* Continue Checkout - Primary button specific styles */
.buttons #buttonContinueCheckout,
.col-lg-12.buttons #buttonContinueCheckout {
    font-weight: 600 !important;
}

/* TABLET - Slightly smaller */
@media (max-width: 991.98px) {

    .buttons #buttonKeepShopping,
    .buttons #buttonContinueCheckout,
    .col-lg-12.buttons #buttonKeepShopping,
    .col-lg-12.buttons #buttonContinueCheckout {
        max-width: 250px !important;
    }
}

/* MOBILE - FULL WIDTH (Stacked vertically) */
@media (max-width: 767.98px) {

    .buttons #buttonKeepShopping,
    .buttons #buttonContinueCheckout,
    .col-lg-12.buttons #buttonKeepShopping,
    .col-lg-12.buttons #buttonContinueCheckout {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* EXTRA SMALL MOBILE */
@media (max-width: 575.98px) {

    .buttons #buttonKeepShopping,
    .buttons #buttonContinueCheckout {
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 0.95rem !important;
    }
}


/* =======================================================
 * PRIVACY POLICY LINK - Special Styling with Arrow
 * Target: #linkcontentBlockPG00111 (bottom of checkout)
 * Author: Ricardo | Date: 2025-12-05
 * =======================================================*/

/* Base State */
#personProfileMainContent #linkcontentBlockPG00111,
#personProfileMainContent a#linkcontentBlockPG00111 {
    position: relative !important;
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #8b2331 !important;
    text-decoration: underline !important;
    margin-right: 25px !important;
    padding-right: 18px !important;
    /* Reduced from 20px to 18px */
    transition: all 0.3s ease !important;
}

/* Arrow Icon (Hidden by default - NEAR text) */
#personProfileMainContent #linkcontentBlockPG00111::after,
#personProfileMainContent a#linkcontentBlockPG00111::after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 1px !important;
    right: 8px !important;
    /* Initial position: 8px inside padding */
    opacity: 0 !important;
    font-size: 0.8em !important;
    color: #8b2331 !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* Hover State - Link Color + Arrow Appears */
#personProfileMainContent #linkcontentBlockPG00111:hover,
#personProfileMainContent a#linkcontentBlockPG00111:hover {
    color: #34111a !important;
    text-decoration: underline !important;
}

/* Hover State - Arrow Animation (Fade in + Slide right) */
#personProfileMainContent #linkcontentBlockPG00111:hover::after,
#personProfileMainContent a#linkcontentBlockPG00111:hover::after {
    color: #34111a !important;
    opacity: 1 !important;
    right: 3px !important;
    /* Hover: 3px from border (moves 5px right) */
}

/* Focus State - Accessibility */
#personProfileMainContent #linkcontentBlockPG00111:focus,
#personProfileMainContent a#linkcontentBlockPG00111:focus {
    outline: 0px solid #8b2331 !important;
    outline-offset: 0px !important;
}

/* =======================================================
 * COMPONENT: MODERN PAGINATION STYLING (FINAL MASTER)
 * Target: .paginationContainer inside Search Results
 * Fixes: "Prev. page" selector mismatch & Mobile Icon
 * =======================================================*/

/* 1. Container Layout & Spacing */
.paginationContainer {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
    border-top: 1px solid #e9ecef !important;
    /* Subtle separator */
    padding-top: 2rem !important;
}

/* 2. Pagination Items (LI) Reset */
.paginationContainer .page-item {
    margin: 0 4px !important;
    /* Spacing between buttons */
}

/* 3. Base Link Styling (The Buttons) */
.paginationContainer .page-link {
    /* --- Shape & Size --- */
    border-radius: 50% !important;
    /* Circular buttons */
    width: 45px !important;
    /* Fixed width */
    height: 45px !important;
    /* Fixed height */

    /* --- Flex Alignment for Centering --- */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    color: #171717 !important;

    /* --- Visuals --- */
    background-color: transparent !important;
    border: 2px solid #e9ecef !important;
    /* Subtle border ring */
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 4. Hover State */
.paginationContainer .page-link:hover {
    border-color: #8b2331 !important;
    /* Maroon Border */
    color: #8b2331 !important;
    /* Maroon Text */
    background-color: #fff !important;
    transform: translateY(-2px);
    /* Small lift effect */
}

/* 5. Active State (Current Page) */
.paginationContainer .page-item.active .page-link {
    background-color: #8b2331 !important;
    /* Solid Maroon Fill */
    border-color: #8b2331 !important;
    color: #ffffff !important;
    /* White Text */
    box-shadow: 0 4px 10px rgba(139, 35, 49, 0.3) !important;
}

/* 6. "NEXT" Button Transformation (Text to Icon) */
.paginationContainer .page-link[title="Next page"] {
    font-size: 0 !important;
    /* Hide the text "Next" */
    border-radius: 50px !important;
    /* Pill shape for Next */
    width: auto !important;
    /* Auto width */
    padding: 0 20px !important;
    /* Horizontal padding */
}

/* Inject Chevron Icon (Right) */
.paginationContainer .page-link[title="Next page"]::before {
    content: "Next \f054";
    /* Text + Chevron Right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    /* Solid FontAwesome */
    font-size: 0.85rem !important;
    /* Restore font size */
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
}

/* 7. "PREVIOUS" Button Transformation (CORRECTED SELECTOR) */
/* Selector updated to match HTML: title="Prev. page" */
.paginationContainer .page-link[title="Prev. page"] {
    font-size: 0 !important;
    border-radius: 50px !important;
    width: auto !important;
    padding: 0 20px !important;
}

/* Inject Chevron Icon (Left) */
.paginationContainer .page-link[title="Prev. page"]::before {
    content: "\f053   Prev";
    /* Chevron Left + Text */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", 'Montserrat', sans-serif !important;
    /* Match Next button font weight */
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
}

/* 8. Mobile Optimization */
@media (max-width: 767px) {
    .paginationContainer .page-link {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }

    /* On mobile, remove the word Next/Prev to save space, keep icon */
    .paginationContainer .page-link[title="Next page"]::before {
        content: "\f054";
        /* Just the icon */
    }

    /* Corrected Mobile Selector for Prev */
    .paginationContainer .page-link[title="Prev. page"]::before {
        content: "\f053";
        /* Just the icon */
    }

    /* Corrected Mobile Selector for Prev */
    .paginationContainer .page-link[title="Next page"],
    .paginationContainer .page-link[title="Prev. page"] {
        width: 40px !important;
        /* Return to circle */
        padding: 0 !important;
    }
}


/* =======================================================
 * SCRIPT 17 COMPANION — Error Message Relocation
 * Course Search Page only (scoped via #errorMessage-relocated)
 * Width is set via JS getBoundingClientRect() to match
 * the Quick Search input column exactly.
 *
 * These styles only reset CMS overrides on the cloned element.
 * The original #errorPanel is untouched.
 *
 * MacEwan University School of Continuing Education
 * UX Lead: Ricardo Alfonso Sanchez
 * Go-live: March 5, 2026
 * =======================================================*/

/* Reset estilos agresivos del CMS heredados por el clon */
#errorMessage-relocated {

    color: #fff !important;
    padding: 1rem !important;
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

#errorMessage-relocated h2 {
    font-size: 1.85rem !important;
    font-weight: 500 !important;
    color: #fff !important;
    margin: 0 0 1rem 0 !important;
    background: none !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    gap: 15px;
    font-family: 'Montserrat', sans-serif !important;
    border: none !important;
}


#errorMessage-relocated h2::before {
    content: "\f071" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #d51f37 !important;
    font-size: 1.6rem !important;
    margin-top: -2px;
    margin-right: 10px;
}

#errorMessage-relocated p {
    margin-bottom: 0.25rem !important;
    font-size: 0.95rem !important;
    color: #fff !important;
}

#errorMessage-relocated ul.error-message-items {
    margin-bottom: 0 !important;
    padding-left: 1.25rem !important;
    color: #fff !important;
}

#errorMessage-relocated ul.error-message-items li {
    color: #fff !important;
    font-size: 0.95rem !important;
}