/*Saved to Visual studios 18/2/2026 15:16
==========================================================================
ASFA Theme Modern - Table of Contents
==========================================================================
0. Custom CSS stored within webpages or other areas
1. Core Variables & Settings
2. Base Typography
   2.1 Body styles
   2.2 Header styles
   2.3 link Styles
   2.4 button styles
   2.5 icons
   2.6 alert styles
3. Top header navigation
   3.1 Header Container   
   3.2 Header links and icons
4. Main Navigation
   4.1 Navbar Container
   4.2 Desktop positioning
   4.3 Mobile collapsed state
   4.4 Header Links and Icons
   4.5 Mobile Menu
   4.6 Buttons
5. Hero Section
6. Responsive Styles
	6.1 Desktop logo positioning
	6.2 Navigation Links
	6.3 Full Screen Mobile Menu
	6.4 mobile nav links
	6.5 Mobile dropdown items
	6.6 Desktop nav links
	6.7 Dropdown Menus
	6.8 Desktop dropdown
	6.9 Profile button 
	6.10 Nav Buttons
	6.11 Dropdown arrow styles
	6.12 Responsive Styles
7. Utility Classes
8. Footer Styles
9. Info Popup
10. Link styles
11. Entity list filters and actions
12 Bread crumbs
13 section layout
14 Page specific overrides
    14.1 Online registration
	14.2 My invoices
	14.3 Corporate CPD overview 
15. Spinner (loading)
========================================================================== */



/*
==========================================================================
1. Core Variables & Settings
==========================================================================
*/

/* Core Variables */
:root {
    /* Colours */
    --asfa-primary: #02C1D3;
    --asfa-primary-hover: #01A9B9;
    --asfa-danger: #FF2B2B;
    --asfa-danger-hover: #E6002E;
    --asfa-consumer: #9E713C;
    --asfa-consumer-hover: #86602F;
    --asfa-text: #212529;
    --asfa-white: #ffffff;
    --asfa-black: #000000;
    --asfa-navy: #03173E;
    --asfa-link: #02c1d3;
    --asfa-silver: #bccad0;
    --asfa-link-hover: rgba(0, 134, 168, 1);
    --color-overlay: rgba(0, 0, 0, 0.43);
    --color-border: rgba(0, 0, 0, 0.1);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-primary-light: rgba(2, 193, 211, 0.05);
    /* Spacing */
    --navbar-padding: 2rem 1rem;
    --navbar-mobile-padding: 0.5rem 1rem;
    --header-height: 62px;
    --navbar-height: calc(70px + var(--spacing-xl) * 2);
    --logo-height: 70px;
    --logo-height-mobile: 65px;
    --logo-height-hero: 82px;
    --icon-size-base: 20px;
    --icon-size-large: 42px;
    --icon-size-social: 35px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-base: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 2rem;
    /* Layout */
    --border-radius-sm: 0.25rem;
    --border-radius-base: 5px;
    --border-radius-circle: 50%;
    --container-max-width: 1344px;
    --dropdown-min-width: 200px;
    --mobile-min-width: 150px;
    --hero-height: 400px;
    /* Effects */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-specific: 0.3s ease-in-out;
    --blur-overlay: blur(10px);
    /* Z-index */
    --z-header: 1031;
    --z-navbar: 1030;
    --z-dropdown: 1040;
    /* Typography */
    --font-family-base: "Inter", Sans-serif;
    --font-size-base: 20px;
    --font-size-button: 16px;
    --font-weight-normal: 400;
    --line-height-base: 26px;
    /* Breakpoints - Using Bootstrap 5 standard breakpoints */
    --breakpoint-sm: 576px; /* Small devices */
    --breakpoint-md: 768px; /* Medium devices */
    --breakpoint-lg: 1200px; /* Large devices */
    --breakpoint-xl: 1200px; /* Extra large devices */
    --breakpoint-xxl: 1400px; /* Extra extra large devices */
}

/*
==========================================================================
2. Base Typography
==========================================================================
*/

/* 2.1 BODY */

body {
    font-family: var(--font-family-base);
    font-size: 140%;
    color: #333;
}

body, p, .form-control {
    font-family: "Inter", Sans-serif !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-base) !important;
}
/*
    2.2 HEADING STYLES
*/
h1:not(#HeroTitle), .h1,
h2, .h2,
h3, .h3 {
    margin-top: 0 !important;
    padding-top: 21px !important;
}

h1, h1#HeroTitle {
    font-family: "Inter", Sans-serif !important;
    font-size: 70px !important;
    font-weight: 400 !important;
    line-height: 80px !important;
    letter-spacing: -2px !important;
    color: #FFFFFF !important;
}



    h1.modal-title {
        font-family: "Inter", Sans-serif !important;
        font-size: 32px !important;
        line-height: 34px !important;
        color: black !important;
        font-weight: 400 !important;
        letter-spacing: -1px !important;
        margin-top: 0 !important;
        padding: 16px !important;
    }

h2 {
    font-family: "Inter", Sans-serif !important;
    font-size: 46px !important;
    font-weight: 400 !important;
    line-height: 50px !important;
    letter-spacing: -0.46px !important;
}

h3, .crmEntityFormView .section-title {
    font-family: "Inter", Sans-serif !important;
    font-size: 32px !important;
    line-height: 34px !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
}

h4 {
    font-family: "Inter", Sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

label .crmEntityFormView .field-label {
    font-family: "Inter", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/*
    2.3 links 
*/

/*
    2.4 buttons
*/

/* Hard-enforce button typography on all button types */
.btn,
.navbar-custom .btn,
button,
input[type=button],
input[type=submit],
input[type=reset],
.btn-primary,
.btn-primary.dropdown-toggle,
.btn-primary.dropdown-toggle.show,
.btn-primary.dropdown-toggle:active,
.show > .btn-primary.dropdown-toggle,
.btn-outline-secondary,
.btn-danger,
.btn-default,
.btn-consumer,
.navbar-custom .mobile-buttons .button-row .btn {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-button) !important;
    font-weight: var(--font-weight-normal) !important;
    text-decoration: none !important;
    line-height: 20px !important;
    padding: 6px 20px !important;
    border-radius: 5px !important;
    justify-content: center;
    text-align: center;
}
    /* Hard-enforce button typography on interactive states as well */
    .btn:hover,
    .btn:focus,
    .btn:active,
    button:hover,
    button:focus,
    button:active,
    input[type=button]:hover,
    input[type=button]:focus,
    input[type=button]:active,
    input[type=submit]:hover,
    input[type=submit]:focus,
    input[type=submit]:active,
    input[type=reset]:hover,
    input[type=reset]:focus,
    input[type=reset]:active,
    .btn-primary:hover,
    .btn-primary.dropdown-toggle,
    .btn-primary.dropdown-toggle:hover,
    .btn-primary.dropdown-toggle:focus,
    .btn-primary.dropdown-toggle:active,
    .show > .btn-primary.dropdown-toggle:hover,
    .show > .btn-primary.dropdown-toggle.focus,
    .btn-primary:focus,
    .btn-primary:active,
    .navbar-custom .btn:hover,
    .navbar-custom .btn:focus,
    .navbar-custom .btn:active,
    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-danger:active,
    .btn-danger:focus,
    .btn-danger:hover,
    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-consumer:hover,
    .btn-consumer:focus,
    .btn-consumer:active,
    .navbar-custom .mobile-buttons .button-row .btn:hover,
    .navbar-custom .mobile-buttons .button-row .btn:focus,
    .navbar-custom .mobile-buttons .button-row .btn:active {
        font-family: var(--font-family-base) !important;
        font-size: var(--font-size-button) !important;
        font-weight: var(--font-weight-normal) !important;
        text-decoration: none !important;
        line-height: 20px !important;
        justify-content: center;
        text-align: center;
    }


/* primary button colours */
        .btn-primary,
        .btn-primary i,
        .btn-primary.dropdown-toggle,
        .btn-primary.dropdown-toggle.show,
        .btn-primary.dropdown-toggle:active,
        .show > .btn-primary.dropdown-toggle {
            background-color: var(--asfa-primary) !important;
            color: var(--asfa-white) !important;
            border-color: var(--asfa-primary) !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            outline: none !important;
            justify-content: center;
            text-align: center;
           
        }



    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:active:hover,
    .btn-primary:active:focus,
    .btn-primary.dropdown-toggle:hover,
    .btn-primary.dropdown-toggle:focus,
    .btn-primary.dropdown-toggle:active,
    .show > .btn-primary.dropdown-toggle:hover,
    .show > .btn-primary.dropdown-toggle.focus {
        background-color: var(--asfa-primary-hover) !important;
        color: var(--asfa-white) !important;
        border-color: var(--asfa-primary-hover) !important;
        border-radius: 5px !important;
        text-decoration: none !important;
        outline: none !important;
        justify-content: center;
        text-align: center;
    }




.btn-outline-secondary {
    background-color: #ffffff !important;
    color: var(--asfa-primary) !important;
    border-color: var(--asfa-primary) !important;

}
    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary:active:focus,
    .btn-outline-secondary:active:hover {
        border-color: var(--asfa-primary-hover) !important;
        color: var(--asfa-primary-hover) !important;
        background-color: white !important;
    }
/*Used to style the online registratoin checkout button when its disabled and make it not clickable */
.disabledbutton {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/*Used to style the order summary submit button for attention of the user for complimentary orders */

.btn-danger {
    background-color: var(--asfa-danger) !important;
    color: var(--asfa-white) !important;
    border-color: var(--asfa-danger) !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    outline: none !important;
    justify-content: center;
    text-align: center;
  
}
    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger:active:hover,
    .btn-danger:active:focus {
        background-color: var(--asfa-danger-hover) !important;
        color: var(--asfa-white) !important;
        border-color: var(--asfa-danger-hover) !important;
        box-shadow: none; /*removes glow */
    }


/*Used to style the order summary submit button for attention of the user for complimentary orders */

.glow-btn {
    box-shadow: 0 0 0.75rem rgba(220, 53, 69, 0.75);
    animation: glowPulse 1.2s infinite ease-in-out;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 0.5rem rgba(220, 53, 69, 0.4);
    }

    50% {
        box-shadow: 0 0 1.2rem rgba(220, 53, 69, 0.95);
    }

    100% {
        box-shadow: 0 0 0.5rem rgba(220, 53, 69, 0.4);
    }
}



/* 3.5  Icons             */
.fa-check {
    color: var(--asfa-primary) !important;
}




/* 3.6  alert styles */
.alert-warning {
    background-color: #ffffff !important;
    border: none !important;
    color: var(--asfa-text) !important;
}

/*
==========================================================================
3. Top header navigation
==========================================================================
*/
/* 3.1 Header Container */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: var(--z-header);
    background-color: #F2F2F2 !important;
}

    /* 3.2 Header Links & Icons */
    .header-container a {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-normal);
    }

    .header-container .social-icon-link {
        display: flex !important;
        align-items: center !important;
        color: var(--asfa-text) !important;
        transition: opacity var(--transition-base) !important;
    }

        .header-container .social-icon-link > svg {
            width: var(--icon-size-base) !important;
            height: var(--icon-size-base) !important;
        }

/* 3.2.2 Hover effects */
.text-dark.text-decoration-underline:hover {
    color: var(--asfa-text) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease;
    text-decoration: underline !important;
}

.text-dark.text-decoration-underline {
    text-decoration: underline !important;
    color: var(--asfa-text) !important;
    font-family: var(--font-family-base) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

table tbody tr th a:not(.btn) {
    font-weight: 500 !important;
}

/* 3.2.3 Icons */
.nav-item--search .search-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--asfa-white);
    transition: color 0.3s ease;
    background: transparent !important;
}

    .nav-item--search .search-icon-link:hover {
        color: var(--asfa-primary);
    }

.nav-item--search svg {
    width: 42px;
    height: 42px;
    display: block;
}

/* Global social icon button - black circle with white icon */
.social-icon-link,
.social-icon-link:hover,
.social-icon-link:focus,
.social-icon-link:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--icon-size-social) !important; /* 50px */
    height: var(--icon-size-social) !important; /* 50px */
    border-radius: 50% !important;
    background-color: var(--asfa-black) !important;
    color: var(--asfa-white) !important;
}

    .social-icon-link > svg {
        width: var(--icon-size-base) !important; /* 20px */
        height: var(--icon-size-base) !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

.profile-icon {
    font-size: 0.8em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: currentColor;
}

/*
==========================================================================
4. Main Navigation
==========================================================================
*/

/* 4.1 Navbar Container */
.navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    background-color: var(--color-overlay);
    backdrop-filter: var(--blur-overlay);
}

/* 4.2 Desktop positioning */
@media (min-width: 1200px) {
    .navbar-container {
        top: 62px;
        height: var(--navbar-height);
    }

    .navbar-custom {
        height: 100%;
    }
}

/* 4.3 Mobile collapsed state */
@media (max-width: 1199.98px) {
    .navbar-container {
        min-height: var(--navbar-height);
        height: auto;
    }

    .navbar-custom {
        min-height: var(--navbar-height);
        height: auto;
    }

    .mobile-controls {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }

        .mobile-controls .search-icon-link {
            padding: 0.5rem !important;
            color: var(--asfa-white) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

            .mobile-controls .search-icon-link svg {
                width: 42px !important;
                height: 42px !important;
                fill: currentColor !important;
            }
}

/* 4.4 Header Links and Icons */
.header-container a {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.header-container .social-icon-link {
    display: flex !important;
    align-items: center !important;
    color: white !important;
    transition: opacity 0.3s ease !important;
}

    .header-container .social-icon-link > svg {
        width: 20px !important;
        height: 20px !important;
    }

/* Hover effects */
/*.text-dark.text-decoration-underline:hover {
    color: var(--asfa-text) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease;
}*/

/* Hide header on mobile */
@media (max-width: 1199.98px) {
    .header-container {
        display: none !important;
    }
}

/* Top Navigation Links */
[data-id="topleftnav"] ul.navbar-nav > li.nav-item > a.nav-link,
[data-id="toprightnav"] ul.navbar-nav > li.nav-item > a.nav-link {
    display: block;
    padding: 9px 9px;
    text-decoration: underline;
    color: var(--asfa-black);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    background-color: var(--asfa-white);
}

/* Main Navigation */
:root {
    --navbar-height: calc(70px + 2rem + 2rem); /* logo height + top padding + bottom padding */
    --navbar-content-height: calc(70px + 2rem); /* logo height + bottom padding - for dropdown positioning */
    --nav-item-height: 38px; /* Height of nav items (adjust if needed) */
}

.navbar-custom {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-base) !important;
    display: flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--navbar-padding) !important;
    text-decoration: none !important;
    width: 100% !important;
    transition: height var(--transition-base);
}

    /* Hamburger Menu Icon */

    .navbar-custom .navbar-toggler,
    .navbar-dark .navbar-toggler,
    .navbar-custom .navbar-toggler:hover,
    .navbar-custom .navbar-toggler:focus,
    .navbar-custom .navbar-toggler:active {
        border: none !important;
        padding: 0.5rem !important;
        color: var(--asfa-white) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 0 !important;
        margin: 8px 0 8px 0 !important;
        display: block !important;
    }

/* Mobile Controls Container */
.mobile-controls {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

@media (min-width: 1200px) {
    .mobile-controls {
        display: none !important;
    }
}

.navbar-custom .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
}

.navbar-custom .navbar-toggler:focus {
    box-shadow: none !important;
}

/* Brand/Logo */
.navbar-brand {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--asfa-white) !important;
}

.asfa-logo-wrapper {
    position: relative;
    display: inline-block;
    height: var(--logo-height);
    vertical-align: middle;
    line-height: var(--logo-height);
}

    .asfa-logo-wrapper svg {
        height: var(--logo-height-hero);
        width: auto;
        vertical-align: middle;
    }

/* ==============================================================================
    5  Hero Section
    ===================================================================

*/
.header-hero {
    position: relative;
    width: 100%;
    height: var(--hero-height);
    padding-top: calc(1 * var(--header-height));
    z-index: 1;
    background-image: url('https://www.superannuation.asn.au/wp-content/uploads/2025/03/AdobeStock_871290314-2-scaled.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .header-hero .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-overlay);
    }

    .header-hero .container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }

section.header-hero .card .card-body,
section.header-hero .card#HeroHeadingSection {
    background-color: transparent !important;
}

/*
    ===================================================================
    6 RESPONSIVE STYLES
    =====================================================================
*/
/* 6.1 Desktop logo positioning */
@media (min-width: 1200px) {
    .navbar-brand {
        display: flex;
        align-items: center;
    }
}

/* 6.2 Navigation Links */
@media (min-width: 1200px) {
    .navbar-collapse {
        justify-content: flex-end;
        overflow-x: visible;
        border-top: none !important;
        box-shadow: none !important;
    }
}

/* 6.3 Full Screen Mobile Menu */
@media (max-width: 1199.98px) {
    body.modal-open {
        overflow: hidden !important;
    }

    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: var(--asfa-white) !important;
        padding: var(--spacing-base) !important;
        overflow-y: auto !important;
        transition: right var(--transition-specific) !important;
        z-index: var(--z-navbar) !important;
    }

        .navbar-collapse.show {
            right: 0 !important;
        }

    .mobile-nav-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: var(--spacing-xl) var(--spacing-lg) 0 var(--spacing-lg) !important;
        margin: calc(-1 * var(--spacing-base)) calc(-1 * var(--spacing-base)) var(--spacing-base) calc(-1 * var(--spacing-base)) !important;
    }

        .mobile-nav-header .navbar-brand {
            margin: 0 !important;
        }

        .mobile-nav-header .navbar-brand-logo svg {
            fill: var(--asfa-primary) !important;
            color: var(--asfa-primary) !important;
        }

        .mobile-nav-header .navbar-brand-logo path {
            fill: var(--asfa-primary) !important;
        }

    .navbar-close {
        background: transparent !important;
        border: none !important;
        padding: var(--spacing-md) !important;
        color: var(--asfa-primary) !important;
        cursor: pointer !important;
    }

        .navbar-close svg {
            width: var(--icon-size-large) !important;
            height: var(--icon-size-large) !important;
        }

        .navbar-close:focus {
            outline: none !important;
        }

    /* 6.4 mobile nav links */
    /* Active/selected states - must come first to take precedence */
    .navbar-custom .navbar-nav .nav-item > .nav-link.active,
    .navbar-custom .navbar-nav .nav-item > .nav-link.dropdown-toggle.show,
    .navbar-custom .navbar-nav .nav-item > a.nav-link.active,
    .navbar-custom .navbar-nav .nav-item > a.nav-link.dropdown-toggle.show {
        color: var(--asfa-primary) !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* Mobile nav links colors */
    @media (max-width: 1199.98px) {
        /* Only apply borders to main navigation items */
        /* Apply borders to main navigation items and mobile My Account */
        .navbar-custom .navbar-nav > .nav-item:not(.nav-item--search):not(.mobile-buttons):not(.text-white):not(.mt-4),
        .navbar-custom .navbar-nav > .nav-item.dropdown.d-xl-none {
            border-bottom: 1px solid var(--color-border) !important;
        }

        .navbar-custom .navbar-nav > .nav-item:last-child:not(.d-xl-none):not(.nav-item--search):not(.mobile-buttons):not(.text-white):not(.mt-4) {
            border-bottom: none !important;
        }
    }

    .navbar-custom .navbar-nav .nav-item > .nav-link,
    .navbar-custom .navbar-nav .nav-item > a.nav-link,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link),
    .navbar-dark .navbar-nav > li > a,
    .navbar-dark .navbar-nav > li.dropdown > a {
        color: var(--asfa-text) !important;
        text-decoration: none !important;
        padding: var(--spacing-md) var(--spacing-base) !important; /* Increased padding for better touch targets */
        font-family: var(--font-family-base) !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 24px !important;
        background-color: transparent !important;
        white-space: nowrap !important;
        border: none !important;
        transition: color 0.3s ease !important;
    }

    /* Make room for chevron on mobile */
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn) {
        padding-right: 1.75rem !important;
        position: relative !important;
    }

    /* 6.4.2 Hover states */
    .navbar-custom .navbar-nav .nav-item > .nav-link:hover,
    .navbar-custom .navbar-nav .nav-item > .nav-link:focus,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:hover,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:focus,
    .navbar-custom .navbar-nav .nav-item .nav-link:hover,
    .navbar-custom .navbar-nav .nav-item .nav-link:focus,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):hover,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):focus {
        color: var(--asfa-text) !important;
        opacity: 1 !important;
        text-decoration: none !important;
        background-color: transparent !important;
    }

    /* 6.5 Mobile dropdown items */
    .navbar-custom .navbar-nav .dropdown-menu .dropdown-item,
    .navbar-custom .navbar-nav .show.dropdown-menu .dropdown-item,
    .navbar-custom .navbar-nav .dropdown-menu > li > a,
    .navbar-custom .navbar-nav .show.dropdown-menu > li > a {
        color: var(--asfa-text) !important;
        opacity: 0.7 !important;
        text-decoration: none !important;
        padding: var(--spacing-sm) var(--spacing-xl) !important;
        font-family: var(--font-family-base) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
        background-color: transparent !important;
        white-space: nowrap !important;
        border: none !important;
        transition: all var(--transition-base) !important;
    }

        .navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover,
        .navbar-custom .navbar-nav .show.dropdown-menu .dropdown-item:hover,
        .navbar-custom .navbar-nav .dropdown-menu .dropdown-item:focus,
        .navbar-custom .navbar-nav .show.dropdown-menu .dropdown-item:focus {
            color: var(--asfa-primary) !important;
            opacity: 1 !important;
            background-color: transparent !important;
            text-decoration: none !important;
        }

    .navbar-nav {
        padding-top: 2rem !important;
    }
}

.navbar-custom .navbar-nav .nav-item {
    margin: 0 0.25rem !important; /* slightly increase gap between items */
}

/* 6.6 Desktop nav links */
@media (min-width: 1200px) {
    .navbar-custom .navbar-nav .nav-item > .nav-link,
    .navbar-dark .navbar-nav > li > a,
    .navbar-dark .navbar-nav > li.dropdown > a,
    .navbar-custom .navbar-nav .nav-item > a.nav-link,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link),
    .navbar-custom .navbar-nav .nav-item .nav-link {
        color: var(--asfa-white) !important;
        padding: 0.5rem 0.5rem !important;
        transition: color 0.3s ease !important;
        text-decoration: none !important;
        font-family: var(--font-family-base) !important;
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        background-color: transparent !important;
        white-space: nowrap !important;
        border: none !important;
    }

        /* 6.6.2 Link Hover and active states */
        .navbar-custom .navbar-nav .nav-item > .nav-link:hover,
        .navbar-custom .navbar-nav .nav-item > .nav-link:focus,
        .navbar-custom .navbar-nav .nav-item > .nav-link.active,
        .navbar-custom .navbar-nav .nav-item > a.nav-link:hover,
        .navbar-custom .navbar-nav .nav-item > a.nav-link:focus,
        .navbar-custom .navbar-nav .nav-item > a.nav-link.active,
        .navbar-custom .navbar-nav .nav-item .nav-link:hover,
        .navbar-custom .navbar-nav .nav-item .nav-link:focus,
        .navbar-custom .navbar-nav .nav-item .nav-link.active,
        .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):hover,
        .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):focus,
        .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline).active {
            color: var(--asfa-white) !important;
        }
}


/* 6.7 Dropdown Menus */
.navbar-custom .navbar-nav .dropdown-menu {
    display: none;
    background-color: var(--asfa-white);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: 0 2px 4px var(--color-shadow);
    padding: 0.5rem 0;
    margin: 0;
    float: none;
    position: absolute;
    text-decoration: none;
    z-index: var(--z-dropdown);
}

    .navbar-custom .navbar-nav .dropdown-menu.show {
        display: block;
    }

@media (max-width: 1199.98px) {
    .navbar-custom .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        background-color: transparent;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding: 0;
        max-height: none;
        overflow: visible;
    }

        .navbar-custom .navbar-nav .dropdown-menu > li > a,
        .navbar-custom .navbar-nav .dropdown-menu .dropdown-item {
            padding: 0.75rem 2rem;
            color: var(--asfa-text);
        }
}

.navbar-custom .navbar-nav .dropdown-menu .dropdown-item,
.navbar-custom .navbar-nav .show.dropdown-menu .dropdown-item,
.navbar-custom .navbar-nav .dropdown-menu > li > a,
.navbar-custom .navbar-nav .show.dropdown-menu > li > a,
.navbar-dark .navbar-nav .show.dropdown-menu > li > a,
.navbar-custom .nav-item .dropdown-menu .dropdown-item,
.navbar-custom .nav-item.show .dropdown-menu .dropdown-item,
.navbar-custom .dropdown-menu > li > a,
.navbar-custom .dropdown-menu a:not(.btn),
.navbar-custom .navbar-nav .dropdown-menu a:not(.btn) {
    color: #858f8d !important;
    opacity: 0.7 !important;
    padding: 6px 2rem !important;
    text-decoration: none !important;
    background-color: transparent !important;
    font-family: var(--font-family-base) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

    .navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar-custom .navbar-nav .show.dropdown-menu .dropdown-item:hover,
    .navbar-custom .navbar-nav .dropdown-menu .dropdown-item:focus,
    .navbar-custom .navbar-nav .show.dropdown-menu .dropdown-item:focus,
    .navbar-custom .navbar-nav .dropdown-menu > li > a:hover,
    .navbar-custom .navbar-nav .show.dropdown-menu > li > a:hover,
    .navbar-dark .navbar-nav .show.dropdown-menu > li > a:hover,
    .navbar-custom .nav-item .dropdown-menu .dropdown-item:hover,
    .navbar-custom .nav-item.show .dropdown-menu .dropdown-item:hover,
    .navbar-custom .nav-item .dropdown-menu .dropdown-item:focus,
    .navbar-custom .nav-item.show .dropdown-menu .dropdown-item:focus,
    .navbar-custom .dropdown-menu > li > a:hover,
    .navbar-custom .dropdown-menu > li > a:focus,
    .navbar-custom .dropdown-menu a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):not(.dropdown-item):hover,
    .navbar-custom .navbar-nav .dropdown-menu a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):not(.dropdown-item):hover {
        color: var(--asfa-text) !important;
        opacity: 1 !important;
        background-color: transparent !important;
        text-decoration: none !important;
    }

/* 6.8 Desktop dropdown 
    6.8.1 positioning */
@media (min-width: 1200px) {
    .navbar-custom .nav-item {
        position: relative !important;
    }

        .navbar-custom .nav-item .dropdown-menu {
            position: absolute !important;
            top: 237% !important;
            min-width: var(--dropdown-min-width) !important;
            left: 0 !important;
            z-index: var(--z-dropdown) !important;
        }

    .navbar-custom .btn-primary + .dropdown-menu {
        position: absolute !important;
        top: 160% !important;
        right: 0 !important;
        left: auto !important;
        z-index: var(--z-dropdown) !important;
    }
}

/* 6.8.2 Desktop dropdown items */
@media (min-width: 1200px) {
    .navbar-custom .navbar-nav .dropdown-menu > li > .dropdown-item,
    .navbar-custom .navbar-nav .show.dropdown-menu > li > .dropdown-item {
        color: var(--asfa-text) !important;
        padding: 0.5rem 1rem !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 20px !important;
        font-family: var(--font-family-base) !important;
        background-color: transparent !important;
        border: none !important;
        width: auto !important;
        white-space: nowrap !important;
        display: block !important;
    }
}

/* 6.8.3. 3Desktop dropdown hover styles */
@media (min-width: 1200px) {
    .navbar-custom .navbar-nav .dropdown-menu > li > .dropdown-item:hover,
    .navbar-custom .navbar-nav .dropdown-menu > li > .dropdown-item:focus,
    .navbar-custom .navbar-nav .show.dropdown-menu > li > .dropdown-item:hover,
    .navbar-custom .navbar-nav .show.dropdown-menu > li > .dropdown-item:focus,
    .navbar-custom .navbar-nav .show.dropdown-menu > .active > a,
    .navbar-custom .navbar-nav .show.dropdown-menu > .active > a:hover,
    .navbar-custom .navbar-nav .show.dropdown-menu > .active > a:focus {
        color: var(--asfa-primary) !important;
        background-color: white !important;
        text-decoration: none !important;
        border: none !important;
    }

    /* Extra spacing on right to accommodate chevron */
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        padding-right: 1.75rem !important; /* ensure text never overlaps chevron */
        color: var(--asfa-white) !important; /* ensure chevron (currentColor) is white */
    }

        /* Keep white color across interactive states */
        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn):hover,
        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn):focus,
        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn):active,
        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn).active,
        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn).dropdown-toggle.show {
            color: var(--asfa-white) !important;
        }

        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn)::after {
            top: 50% !important;
            transform: translateY(-50%) rotate(0deg) !important;
            width: 0.95em !important;
            height: 0.95em !important;
            /* Force white chevron on desktop menu items */
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' aria-hidden='true'><path fill='%23ffffff' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/></svg>") !important;
        }

        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn).show::after,
        .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn)[aria-expanded="true"]::after {
            transform: translateY(-50%) rotate(180deg) !important;
        }

    /* 6.9 Profile button 
        6.9.1 (My Account) chevron override for desktop */
    .navbar-custom .btn-primary.dropdown-toggle {
        position: relative !important;
        padding-right: 2.5rem !important; /* room for chevron inside the button */
        padding-left: 1.25rem !important; /* keep base left padding */
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        display: inline-flex !important;
        align-items: center !important;
        color: var(--asfa-white) !important; /* ensure text and chevron color base is white */
    }

        .navbar-custom .btn-primary.dropdown-toggle::after {
            right: 1.25rem !important; /* position chevron inside button */
            top: 50% !important;
            transform: translateY(-50%) rotate(0deg) !important;
            width: 0.9em !important;
            height: 0.9em !important;
            /* Force white chevron by embedding white fill directly (avoids currentColor issues) */
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' aria-hidden='true'><path fill='%23ffffff' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/></svg>") !important;
        }

        .navbar-custom .btn-primary.dropdown-toggle.show::after,
        .navbar-custom .btn-primary.dropdown-toggle[aria-expanded="true"]::after {
            transform: translateY(-50%) rotate(180deg) !important;
        }

        /* Keep padding consistent across interactive states for the profile button */
        .navbar-custom .btn-primary.dropdown-toggle:hover,
        .navbar-custom .btn-primary.dropdown-toggle:focus,
        .navbar-custom .btn-primary.dropdown-toggle:active,
        .navbar-custom .btn-primary.dropdown-toggle.active,
        .navbar-custom .btn-primary.dropdown-toggle.dropdown-toggle.show,
        .navbar-custom .show > .btn-primary.dropdown-toggle,
        .navbar-custom .btn-primary.dropdown-toggle:focus-visible,
        .navbar-custom .btn-primary.dropdown-toggle:active:focus,
        .navbar-custom .btn-primary.dropdown-toggle:active:focus-visible,
        .navbar-custom .show > .btn-primary.dropdown-toggle:focus,
        .navbar-custom .show > .btn-primary.dropdown-toggle:active {
            padding-right: 2.5rem !important;
            padding-left: 1.25rem !important;
            padding-top: 0.75rem !important;
            padding-bottom: 0.75rem !important;
            display: inline-flex !important;
            align-items: center !important;
            color: var(--asfa-white) !important;
        }
}

/* 6.10 Nav Buttons */
.navbar-custom .btn,
.navbar-custom .btn:active,
.navbar-custom .btn.active,
.navbar-custom .btn:focus,
.navbar-custom .btn.focus,
.navbar-custom .btn:active:focus {
    padding: 0.75rem 1.25rem !important;
    height: 60px !important;
    border: none !important;
    border-radius: 5px !important;
    transition: background-color 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar-custom .nav-item .btn-consumer,
.navbar-custom .nav-item .btn-consumer:active,
.navbar-custom .nav-item .btn-consumer.active,
.navbar-custom .nav-item .btn-consumer:focus,
.navbar-custom .nav-item .btn-consumer.focus,
.navbar-custom .nav-item .btn-consumer:active:focus {
    background-color: var(--asfa-consumer) !important;
    color: var(--asfa-white) !important;
    border-color: var(--asfa-consumer) !important;
    min-width: 140px !important;
    white-space: nowrap !important;
}

/* Handle button visibility and nav alignment */
/* Desktop view (≥1200px) */
@media (min-width: 1200px) {
    .nav-item > .btn-consumer {
        display: inline-flex;
    }
}

/* Mobile/collapsed view (≤991.98px) */
@media (max-width: 1199.98px) {
    .nav-item > .btn-consumer {
        display: inline-flex;
    }
}

/* Ensure right alignment of nav items */
.navbar-nav {
    margin-left: auto;
}

.navbar-custom .btn-consumer:hover,
.navbar-custom .btn-consumer:focus,
.navbar-custom .btn-consumer:active {
    background-color: var(--asfa-consumer-hover) !important;
    color: var(--asfa-white) !important;
    border-color: var(--asfa-consumer-hover) !important;
}





/* 6.11 Dropdown arrow styles */
.dropdown-toggle::after {
    content: "" !important;
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    width: 0.75em !important;
    height: 0.75em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    /* FontAwesome-style chevron down using provided SVG path, color via currentColor */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' aria-hidden='true'><path fill='currentColor' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/></svg>") !important;
    border: none !important;
    pointer-events: none !important;
}

/* Rotate chevron when expanded */
.dropdown-toggle.show::after,
.dropdown-toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* 6.12 Responsive Styles */
/* Large devices (desktops, less than 992px) */
@media (max-width: 1199.98px) {
    .navbar-custom {
        padding: var(--navbar-mobile-padding);
        height: auto;
    }

    .navbar-collapse {
        padding: 1rem;
        transform: translateY(-10px);
        opacity: 0;
        transition: all 0.3s ease;
    }

        .navbar-collapse.show {
            transform: translateY(0);
            opacity: 1;
        }

    .navbar-nav {
        padding: 1rem 0;
        flex-direction: column;
    }

    .nav-item {
        width: 100%;
    }

    /* Mobile menu styles */
    .navbar-custom .btn {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Desktop Navigation */
    .navbar-custom .d-lg-flex.align-items-center {
        margin-left: auto !important;
    }

    /* Mobile menu structure */
    .navbar-custom .mobile-buttons {
        padding-top: 0.5rem !important;
        margin-top: 1rem !important;
    }

        .navbar-custom .mobile-buttons .button-row {
            display: flex !important;
            justify-content: center !important;
            gap: 0.5rem !important;
        }

            .navbar-custom .mobile-buttons .button-row .nav-item {
                flex: 1 !important;
                min-width: 150px !important;
            }

            .navbar-custom .mobile-buttons .button-row .btn {
                width: 100% !important;
                font-family: var(--font-family-base) !important;
                font-size: 14px !important;
                padding: 0.5rem 0.75rem !important;
            }

    @media (max-width: 375px) {
        .navbar-custom .mobile-buttons .button-row {
            flex-direction: column !important;
        }

            .navbar-custom .mobile-buttons .button-row .nav-item {
                width: 100% !important;
            }
    }

    /* Mobile My Account alignment */
    .navbar-custom .nav-item.d-xl-none .nav-link.dropdown-toggle {
        text-align: left !important;
    }

    /* Mobile social media and header links */
    .navbar-custom .nav-item.d-xl-none .nav-link {
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
    }

    /* Social media icon - match website styles */
    .social-icon-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--icon-size-social) !important;
        height: var(--icon-size-social) !important;
        background-color: var(--asfa-black) !important;
        border-radius: 50% !important;
        transition: opacity 0.3s ease !important;
    }

        .social-icon-link > svg {
            width: var(--icon-size-base) !important;
            height: var(--icon-size-base) !important;
            color: var(--asfa-white) !important;
        }

    /* Ensure nav link base styles do not override social icon sizing */
    .navbar-custom .navbar-nav .nav-item > a.social-icon-link {
        padding: 0 !important;
        line-height: 1 !important;
    }


    /* Welcome text */
    .navbar-custom .nav-item.d-xl-none.text-white {
        color: var(--asfa-text) !important;
        text-decoration: none !important;
    }

    /* Mobile menu links */
    .navbar-custom .nav-item.d-xl-none .nav-link,
    .navbar-custom .nav-item.d-xl-none .d-flex .nav-link,
    .navbar-custom .nav-item.d-lg-none .text-white {
        text-decoration: none !important;
    }

    /* Tap/click feedback on mobile: make nav-links ASFA blue when pressed */
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):active,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:active,
    .navbar-custom .navbar-nav .nav-item > .nav-link:active,
    .navbar-custom .navbar-nav .nav-item .nav-link:active {
        color: var(--asfa-primary) !important;
    }

    /* Keyboard focus on mobile: make nav-links ASFA blue */
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):focus,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:focus,
    .navbar-custom .navbar-nav .nav-item > .nav-link:focus,
    .navbar-custom .navbar-nav .nav-item .nav-link:focus,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):focus-visible,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:focus-visible,
    .navbar-custom .navbar-nav .nav-item > .nav-link:focus-visible,
    .navbar-custom .navbar-nav .nav-item .nav-link:focus-visible {
        color: var(--asfa-primary) !important;
    }

    /* Override generic hover/focus rules on mobile to ASFA blue */
    .navbar-custom .navbar-nav .nav-item > .nav-link:hover,
    .navbar-custom .navbar-nav .nav-item > .nav-link:focus,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:hover,
    .navbar-custom .navbar-nav .nav-item > a.nav-link:focus,
    .navbar-custom .navbar-nav .nav-item .nav-link:hover,
    .navbar-custom .navbar-nav .nav-item .nav-link:focus,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):hover,
    .navbar-custom .navbar-nav .nav-item > a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):focus {
        color: var(--asfa-primary) !important;
        opacity: 1 !important;
        text-decoration: none !important;
        background-color: transparent !important;
    }

    /* Header links (mobile): mimic .text-dark.text-decoration-underline:hover */
    .navbar-custom .nav-item.d-xl-none .d-flex .nav-link:hover {
        color: var(--asfa-text) !important;
        opacity: 0.7 !important;
        text-decoration: underline !important;
        background-color: transparent !important;
    }

    /* Make dropdown toggle and chevron ASFA blue when expanded on mobile */
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle[aria-expanded="true"],
    .navbar-custom .navbar-nav .nav-item > .nav-link.dropdown-toggle.show {
        color: var(--asfa-primary) !important;
    }

    /* Force chevron SVG to ASFA blue on mobile interactive states */
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn):hover::after,
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn):focus::after,
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn):active::after,
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn).show::after,
    .navbar-custom .navbar-nav .nav-item > a.dropdown-toggle:not(.btn)[aria-expanded="true"]::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' aria-hidden='true'><path fill='%2302C1D3' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/></svg>") !important;
    }

    /* Header links container */
    .navbar-custom .nav-item.d-xl-none .d-flex {
        margin: 0 -0.5rem !important;
    }

    /* Mobile buttons */
    .navbar-custom .mobile-buttons .btn,
    .navbar-custom .mobile-buttons .nav-item .btn {
        text-decoration: none !important;
    }

    .navbar-custom .nav-item.d-xl-none .d-flex .nav-link {
        font-weight: 400 !important;
        line-height: 26px !important;
        font-family: var(--font-family-base) !important;
        padding: 0.5rem !important;
        font-size: var(--font-size-base) !important;
        color: var(--asfa-black) !important;
        text-decoration: underline !important;
    }

    @media (max-width: 375px) {
        .navbar-custom .nav-item.d-xl-none .d-flex {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
        }

            .navbar-custom .nav-item.d-xl-none .d-flex .nav-link {
                font-size: 13px !important;
            }
    }

    /* Add dividers between sections */
    .navbar-custom .nav-item.d-xl-none.mt-4 {
        padding-top: 1rem !important;
    }

    .navbar-nav.align-items-center {
        gap: 0.5rem !important;
    }



    /* Move search to bottom in mobile */
    .nav-item--search {
        order: 999;
        width: 100% !important;
        border-bottom: none !important;
        margin-top: 1rem;
    }

        /* Center search icon link */
        .nav-item--search .search-icon-link {
            justify-content: center;
            width: 100%;
        }


    /* Hide top navigation on tablets and mobile */
    .navbartop {
        display: none !important;
    }

    /* Show specific links on mobile/tablet */
    li.weblink a[title="ASFA Learning Hub"],
    li.weblink a[title="Home"] {
        display: block !important;
    }
}

/* Container Widths - Fluid below xxl breakpoint */
@media (min-width: 576px) and (max-width: 1399px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: none;
        width: 100%;
    }

    .header-container .container {
        padding: 0 28px !important;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1320px; /* Bootstrap XXL default */
    }
}

/* =====================================================================
  7  Utility Classes
=====================================================================

*/
.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

/* =======================================================================
    8  Footer Styles
    ========================================================================
*/
#mainContent > div > div.container, .wrapper-body {
    min-height: calc(100vh - var(--hero-height) - (1 * 100px));
}

footer .footer-bottom {
    height: 100px !important;
    background-color: #03173E !important;
    color: #fff !important;
    border-top: 1px solid #015c71 !important;
    padding-top: 10px !important;
}

.footer-bottom p {
    color: #fff !important;
    font: arial,verdana,sans-serif !important;
    text-align: right !important;
    text-decoration: none !important;
    clear: both !important;
    font-size: 12px !important;
    margin-top: 20px !important;
}

/* =====================================================================
    9. Info Popup
    ===================================================================
*/
.info-popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* The actual popup */
    .info-popup .info-popuptext
     {
        visibility: hidden;
        width: 350px;
        background-color: #02c1d3 !important;
        color: #fff !important;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 99 !important;
        bottom: 125%;
        margin-left: -185px;
        font-size: 0.9rem !important;
        font-weight: 400 !important;
    }


        .info-popup .info-popuptext p,
        .info-popup .info-popuptext li {
            color: #fff !important;
            font-size: 0.9rem !important;
            font-weight: 400 !important;
        }

        .info-popup .info-popuptext strong {
            color: #fff !important;
            font-size: 0.9rem !important;
        }
        /*where a link to open the popup is used instead of icon*/
        .info-popup .infopopuplink {
            font-size: .7em !important;
        }
    /* Popup arrow */
    .info-popup .info-popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #02c1d3 transparent transparent transparent;
    }

    /* Toggle this class - hide and show the info-popup */
    .info-popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }
    .info-popup a {
            cursor: pointer;

    }

/* Add animation (fade in the info-popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================================
    10. Link styles 
    ========================================================
*/
a, .a {
    font-family: var(--font-family-base) !important;
    font-size: inherit !important;
}

    a:not(.btn) {
        text-decoration: none !important;
        color: var(--asfa-link) !important;
    }

        a:not(.btn):not(.social-icon-link):not(.text-decoration-underline):hover {
            text-decoration: none !important;
            color: var(--asfa-link-hover) !important;
            background-color: transparent !important;
        }

.input-group:not(.has-validation):not(.datetimepicker):not(.input-append) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation):not(.datetimepicker):not(.input-append) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation):not(.datetimepicker):not(.input-append) > .form-floating:not(:last-child) > .form-select,
.input-group:not(.has-validation):not(.datetimepicker):not(.input-append) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 
 ==============================================================================
    
  11 Entity list filter and action styles
=================================================================================

*/


/* Beat ASFA_Theme.css border rule by adding extra specificity 
In order from top:
    My Invoices 'invoice id' search
    corporate cpd  name search
    supercpd report name serach
    supercpd & corporate cpd  date search fields
    */

.entitylist-filter,
.entitylist .entitylist-filter-option-group-box-overflow .input-group
input.form-control.has-tooltip,
.entitylist
.entitylist-filter-option-group-box-overflow
.input-group.namefilter-wrap
input.namefilter.form-control

.entitylist
.entitylist-filter-option-group-box-overflow
.input-group.namefilter-wrap
input.namefilter.form-control,
.entitylist
.entitylist-filter-option-group-box-overflow
.input-group.datepicker
input.fake.form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

    .entitylist-filter .card-body {
        padding: 1.5rem 0 !important;
    }

    .entitylist-filter .card-body {
        display: flex !important;
        align-items: flex-end !important;
        gap: 1rem !important;
    }

        .entitylist-filter .card-body > ul {
            display: flex !important;
            flex: 1 !important;
            align-items: flex-end !important;
            gap: 1rem !important;
            margin-bottom: 0 !important;
            flex-wrap: nowrap !important;
            padding-left: 0 !important;
        }

    .entitylist-filter .list-inline-item {
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .entitylist-filter .float-end {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        height: 38px !important; /* Match input height */
    }

.entitylist-filter-option-group {
    display: inline-flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    min-width: 200px !important;
}

.entitylist-filter-option-group-label {
    font-size: 0.9rem !important;
    color: #6c757d !important;
    margin-bottom: 0.5rem !important;
    font-weight: normal !important;
}

.entitylist-filter .input-group {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    height: 38px !important;
}

    .entitylist-filter .input-group .input-group-addon {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 0.75rem !important;
        background: transparent !important;
        border: none !important;
        z-index: 4 !important;
    }

        .entitylist-filter .input-group .input-group-addon .fa-calendar {
            color: var(--asfa-primary) !important;
        }

    .entitylist-filter .input-group .form-control {
        border: none !important;
        background: transparent !important;
        padding-left: 2.5rem !important;
    }

/* 10.2 Position datepicker dropdown */
.datepicker.dropdown-menu {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 250px !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.entitylist-filter-option {
    height: 100% !important;
}

.entitylist-filter .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--asfa-primary) !important;
    padding-right: 0 !important;
    cursor: pointer !important;
}

.entitylist-filter .form-control {
    border: none !important;
    box-shadow: none !important;
}

.entitylist-filter .form-select {
    border: none !important;
    box-shadow: none !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2302C1D3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    color: var(--asfa-text) !important;
    transition: background-color 0.15s ease-in-out !important;
}

    .entitylist-filter .form-select:hover {
        background-color: #f8f9fa !important;
    }

    .entitylist-filter .form-select:focus {
        outline: none !important;
        background-color: #f8f9fa !important;
    }

.entitylist-filter .btn-entitylist-filter-submit {
    background-color: var(--asfa-primary) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.375rem !important;
    transition: background-color 0.2s ease !important;
    margin-bottom: 3px !important;
}

    .entitylist-filter .btn-entitylist-filter-submit:hover {
        background-color: var(--asfa-primary-hover) !important;
    }

@media (max-width: 768px) {
    .entitylist-filter .card-body {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

        .entitylist-filter .card-body > ul {
            flex-direction: column !important;
            gap: 1.5rem !important;
            width: 100% !important;
        }

    .entitylist-filter .list-inline-item {
        width: 100% !important;
    }

    .entitylist-filter .float-end {
        width: 100% !important;
        margin: 0 !important;
    }

    .entitylist-filter .btn-entitylist-filter-submit {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }

    .entitylist-filter-option-group {
        min-width: 100% !important;
    }
}

/* 10.3 Download Statement Button */
.entitylist-download.btn-info {
    background-color: var(--asfa-primary) !important;
    border-color: var(--asfa-primary) !important;
    color: #fff !important;
    margin-right: 10px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    border-radius: 0.375rem !important;
    transition: background-color 0.2s ease !important;
    margin-bottom: 0px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
}

    .entitylist-download.btn-info:hover {
        background-color: var(--asfa-primary-hover) !important;
    }

.toolbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

    .toolbar-actions .input-group {
        margin: 0 !important;
    }

/* 19 Jan 2026 18:50 commented out as don't appear to need this on myprofile 
    and its adding exra border on entity filter fields on my invoice, and CPD reports
input[type=date]:not(.entitylist-filter-option),
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text]:not(.msos-input):not(.entitylist-filter-option),
input[type=url],
select:not([readonly]):not([disabled]),
textarea {
    padding: .375rem .75rem !important;
    border-radius: .375rem !important;
      border: 1px solid #ced4da !important;
  
}
   
*/



input.form-control:not([readonly]):not([disabled]):not(.msos-input) {
    border: 1px solid #ced4da !important;
}

input[type=text].msos-input {
    padding: 0 !important;
    border-radius: .375rem !important;
    border: none !important;
}

.entitylist-filters input.form-control {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Readonly field text style (exclude lookup inputs) */
.crmEntityFormView input.form-control[readonly]:not(.lookup), .crmEntityFormView textarea.form-control[readonly]:not(.lookup) {
    font-family: "Inter", Sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    color: #2A2C2E !important;
    padding-left: 0 !important;
    border: none !important;
}

.msos-caret-container {
    margin-right: 12px !important;
    background-color: transparent !important;
    margin-right: 12px !important;
}

.msos-glyph:after {
    font-size: 11px !important;
    font-weight: bold !important;
}

.msos-selection {
    max-height: 500px !important;
}

.msos-label .msos-label-text {
    padding: 8px 0px 7px 12px !important;
    word-break: break-word;
}

.crmEntityFormView label.msos-label:hover, .crmEntityFormView label.msos-label:focus, .crmEntityFormView label.msos-label:active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
    /* Ensure item count text turns white when label is hovered/focused/active */
    .crmEntityFormView label:hover .msos-label .msos-label-text .msos-itemcount-text, .crmEntityFormView label:focus .msos-label .msos-label-text .msos-itemcount-text, .crmEntityFormView label:active .msos-label .msos-label-text .msos-itemcount-text, .crmEntityFormView label.msos-label:hover .msos-label-text .msos-itemcount-text, .crmEntityFormView label.msos-label:focus .msos-label-text .msos-itemcount-text, .crmEntityFormView label.msos-label:active .msos-label-text .msos-itemcount-text {
        color: #ffffff !important;
        border: none !important;
    }

.msos-label .msos-label-text .msos-itemcount-text {
    margin-right: 24px !important;
}

.msos-label .msos-checkbox + .msos-label-text:before {
    right: 0 !important;
    top: 5px !important;
    left: auto !important;
}

.msos-selection-container {
    margin-top: 5px !important;
    padding-top: 0 !important;
}

.msos-current-selection-normal {
    max-height: 38px !important;
    padding-top: 3px !important;
}

.msos-selecteditems-expanded .msos-current-selection-normal {
    max-height: 136px !important;
}

.msos-container:not(.msos-disabled), .msos-container:not(.msos-disabled) .msos-search, .msos-container:not(.msos-disabled) .msos-search:focus, .msos-container:not(.msos-disabled) .msos-search:active {
    border: 1px solid #ced4da !important;
    border-radius: .375rem !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-base) !important;
    color: var(--asfa-text) !important;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.clearlookupfield, .launchentitylookup {
    height: 39.93px !important;
}

.launchentitylookup {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.jquery-bootstrap-pagination {
    border: none !important;
}

    .jquery-bootstrap-pagination .page-item.active .page-link {
        background: var(--asfa-primary) !important;
        color: white !important;
    }

    .jquery-bootstrap-pagination .page-link:hover {
        color: var(--asfa-primary-hover) !important;
    }

.float-end .entitylist-search .btn.btn-default {
    height: 39.93px !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

button.cancel.btn.btn-default, button.btn.btn-default.float-end.remove-value {
    border-radius: 5px !important;
}

button .msos-selecteditems-toggle, button .msos-selecteditems-toggle:hover, button .msos-selecteditems-toggle:focus, button .msos-selecteditems-toggle:active, button .msos-caret-button, button .msos-caret-button:hover, button .msos-caret-button:focus, button .msos-caret-button:active {
    background-color: #f2f2f2 !important;
}





.badge, .badge.badgeColor {
    padding: 4px 8px;
}

#EventAmostSoldoutMessage {
    font-size: var(--font-size-base);
    padding: 12px;
}

button.form-close {
    font-family: "Inter", Sans-serif !important;
    position: relative !important;
    font-size: 32px !important;
    font-weight: 400 !important;
}

table td, table th {
    line-height: 1.5 !important;
    border: none !important;
}
/* Datetimepicker input/button layout without IDs */
.input-group.datetimepicker {
    position: relative !important;
}

    .input-group.datetimepicker > input.form-control {
        border-top-right-radius: .375rem !important;
        border-bottom-right-radius: .375rem !important;
        padding-right: 50px !important;
    }

    .input-group.datetimepicker > .input-group-addon.btn {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-top-right-radius: .375rem !important;
        border-bottom-right-radius: .375rem !important;
        border-color: var(--asfa-primary) !important;
        background-color: white !important;
        color: var(--asfa-primary) !important;
    }
    /* Remove inset borders/shadows on hover/focus for datetimepicker */
    .input-group.datetimepicker, .input-group.datetimepicker:hover, .input-group.datetimepicker:focus, .input-group.datetimepicker:focus-within {
        box-shadow: none !important;
    }

        .input-group.datetimepicker > input.form-control:hover, .input-group.datetimepicker > input.form-control:focus, .input-group.datetimepicker > input.form-control:active, .input-group.datetimepicker > .input-group-addon.btn:hover, .input-group.datetimepicker > .input-group-addon.btn:focus, .input-group.datetimepicker > .input-group-addon.btn:active {
            box-shadow: none !important;
            outline: none !important;
        }

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover, .bootstrap-datetimepicker-widget tr td.active button, .bootstrap-datetimepicker-widget table td.today:before {
    background-color: var(--asfa-primary) !important;
}

.button2:focus, .button2.focus, .button2:focus-visible, .btn-default:focus, .btn-default.focus, .btn-default:focus-visible {
    color: white !important;
}

table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th, table tbody > tr:hover > td, table tbody > tr:hover > th, table .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: white !important;
}

.columnBlockLayout {
    margin-top: 0 !important;
}
/* removes the table outside border, leaving only the row borders*/
.entitylist {
    border: none !important;
}
    /* Keep table respecting your width overrides */
    .entitylist table, [id^="EntityListControl"] table {
        table-layout: fixed;
        width: 100%;
    }
    /* Let ALL headers & cells wrap as needed */
    .entitylist th, .entitylist td {
        white-space: normal; /* allow wrapping */
        overflow-wrap: anywhere; /* break long tokens (IDs, emails) */
        word-break: break-word; /* cross-browser support */
        overflow: visible;
        text-overflow: clip;
    }
        /* Remove built-in min-width on the primary (linked) column so it can wrap */
        .entitylist th.primary-field, .entitylist td.primary-field {
            min-width: 0;
        }
        /* Ensure links don�t act like wide blocks */
        .entitylist td a, .entitylist th a {
            display: inline;
        }

.crmEntityFormView, .entitylist, .modal-content, .popover-content {
    border: none !important;
}
/* ===================================================
    12 bread crumbs 
    ======================================================
*/
.breadcrumb {
    color: #02c1d3 !important
}
/*  ==============================================
    
  13   section layouts
    ============================================

*/
/*primary color */
.sectionPrimaryColor {
    background-color: #02c1d3 !important;
    color: #ffffff !important;
}
/* =========================================================================
    
   14  PAGE SPECIFIC STYLE OVERRIDES
==========================================================
*/
/* -------------------------------------------
    14.1 ONLINE REGISTRATION PAGE
    ----------------------------------
*/
span#EventAvailabilityLabel {
    color: #FFFFFF !important;
}

button#apply-promo-btn {
    height: 39.33px !important;
}
/* used on online regisration page for the delete&.edit buttons on cart items*/
.table-btn {
    width: 60px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Modal overlay */
.terms-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

/* Modal container */

i.checkboxicon-silver,
.checkboxicon-silver {
color: var(--asfa-silver) !important;
}

.form-check-input.checkboxicon-silver {
    border-color: var(--asfa-silver);
}

    .form-check-input.checkboxicon-silver:checked {
        background-color: var(--asfa-silver);
        border-color: var(--asfa-silver);
    }



.terms-modal {
    position: relative;
    margin: 5vh auto;
    background: #ffffff;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

/* Header */
.terms-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
}

/* Body */
.terms-modal-body {
    padding: 16px 20px;
    overflow: auto;
}
/* Keep styles minimal and scoped */
#termsModal .btn {
    white-space: nowrap;
}

#termsContent p {
    margin-bottom: 0.75rem;
}

/* Footer */
.terms-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
}

/* Scroll hint */
.terms-scroll-hint {
    min-width: 1px;
}

/* Lookup styles */

/* Select2 disabled options – scoped to pass lookup only */
#passLookup + .select2-container .select2-results__option--disabled {
    color: red !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* cart styles   */

/* Scoped width for dynamically injected contact selects */
.contact-inline {
    width: 100%;
}
/* Cart table: remove borders, hover, and striping */
#cartTable {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: inherit;
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: inherit;
    --bs-table-border-color: transparent;
}

    #cartTable thead th,
    #cartTable tbody th,
    #cartTable tbody td {
        border: 0 !important;
        background-image: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    #cartTable tbody tr:hover > * {
        --bs-table-accent-bg: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    #cartTable tbody tr:nth-of-type(odd) > *,
    #cartTable tbody tr:nth-of-type(even) > * {
        --bs-table-accent-bg: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }




/*--------------------------------------------------------------
   14.2  My invoices 
    -------------------------------------------------------------  
*/
.my-invoices-list {
    margin-top: 50px;
}

button[data-invoice-action] {
    margin: 5px;
}
/* set up the balance colum to reserve spaces for the send now and pay buttons*/
td[data-attribute='asfa_portaloutstandingbalance'] {
    position: relative;
    white-space: nowrap;
    padding-right: 144px; /* reserve ~ width of two buttons + gap */
}
    /* pin the actions to the right edge, vertically centered */
    td[data-attribute='asfa_portaloutstandingbalance'] .invoice-actions {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        gap: 6px;
    }
/*  ---------------------------------------
    
   14.3  CORPORATE CPD OVERVIEW REPORT
------------------------------------------------

*/
#cpd-summary {
    background: #f8f9fa;
    border-radius: 8px;
    gap: 1rem;
}
    /* Each summary column */
    #cpd-summary .cpd-block {
        border-right: 0;
        padding-bottom: 1rem;
    }

@media (min-width: 768px) {
    #cpd-summary .cpd-block {
        border-right: 1px solid #dee2e6;
        padding-bottom: 0;
    }

        /* Remove right border on last column */
        #cpd-summary .cpd-block:last-child {
            border-right: 0;
        }
}
/* Value styling */
#cpd-summary .cpd-value {
    color: #02c1d3;
    font-size: 1.5rem;
    font-weight: bold;
}
/* Style the host element */
gmp-place-autocomplete {
    display: block;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    box-shadow: none;
    background-color: #ffffff;
    color-scheme: light;
    font-family: "Inter", Sans-serif !important;
    font-size: 16px;
    border: 1px solid #ccc;
}
/* Use exposed CSS custom properties */
gmp-place-autocomplete {
    --gmp-mat-color-surface: #ffffff;
    --gmp-mat-color-on-surface: #333333;
    --gmp-mat-color-primary: #1a73e8;
    --gmp-mat-color-outline-decorative: #e0e0e0;
    --gmp-mat-font-family: "Inter", Sans-serif !important;
    --gmp-mat-font-body-medium: 16px;
    --gmp-mat-font-label-large: 14px;
}
    /* Optional: style exposed shadow parts if available */
    gmp-place-autocomplete::part(input) {
        font-size: 16px;
        padding: 10px 12px;
        border: none;
        box-shadow: none;
        background-color: transparent;
    }

    gmp-place-autocomplete::part(input-container) {
        background-color: #ffffff;
        border-radius: 8px;
    }
/*
==========================================================================
15. Spinner (loading)
==========================================================================
*/
#global-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8); /* Light overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it stays on top */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
/* ? Spinner animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #02c1d3; /* Customize color */
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}