/* Accessibility - Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: calc(var(--spacing-unit) * 1);
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ===== HEADER STYLES (DevExtreme integrated) ===== */
.g2-header-container {
    height: 64px;
    padding: 12px 12px 12px 0;
}

.g2-menu-button {
    border-radius: 0 !important;
    height: 64px !important;
    width: 64px !important;
    z-index: 101;
    border: none;
    background: transparent;
}

.g2-menu-button .bi,
.g2-menu-button .dx-icon {
    font-size: 24px;
}

.navbar-brand {
    font-size: 14px;
    padding-bottom: 0;
    padding-top: 0;
}

.navbar-brand img {
    height: 90px;
    min-width: 86px;
}

.navbar-logo {
    height: 60px;
    object-fit: contain;
}

/* ===== DEVEXTREME DRAWER STYLES ===== */
#mainDrawer {
    height: 100%;
    width: 100%;
}

#mainDrawer.dx-drawer {
    height: 100%;
}

/* Main element must not exceed viewport minus header */
main.flex-grow-1 {
    min-height: 0;
}

/* Drawer wrapper needs to fill space */
.dx-drawer-wrapper {
    height: 100%;
}

/* Shrink mode specific - ensure panel wrapper gets full height */
.dx-drawer-shrink .dx-drawer-wrapper,
.dx-drawer-shrink .dx-drawer-panel-content-wrapper {
    height: 100%;
}

/* Drawer panel styling - matching PublicLayout.razor.css */
.dx-drawer-panel-content {
    background-color: var(--color-background-light) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.g2-drawer-panel {
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    
}

/* Nav container should take available space, pushing footer to bottom */
.g2-drawer-panel > nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0;
}

/* Collapse button styling */
.g2-menu-expand-button {
    height: 48px !important;
    justify-content: flex-start !important;
    overflow: hidden;
    padding-left: 15px !important;
    width: 100%;
    min-width: 48px !important;
    text-align: left !important;
    text-transform: none !important;
}

.g2-menu-expand-button .dx-button-content {
    justify-content: flex-start !important;
}

.g2-menu-expand-button .dx-button-text {
    text-transform: none !important;
}

/* Footer anchored to bottom */
.sidebar-footer {
    flex: 0 0 48px;
    border-top: 1px solid #ddd;
    padding: 0 8px;
    background-color: var(--color-background-light);
}

/* Content area should fill remaining space and resize with drawer */
.dx-drawer-content {
    height: 100%;
    overflow: hidden;
    transition: width 0.3s ease, margin 0.3s ease;
}

/* ===== NAVIGATION STYLES ===== */
#navMenu {
    padding: 10px;
}

/* Navigation Links - matching PublicNavMenu.razor.css */
#navMenu .nav-link {
    align-items: center;
    color: var(--color-text);
    display: flex;
    
    line-height: 20px;
    margin: 2px 0;
    white-space: nowrap;
    padding: 0.5rem 0;
     
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    justify-content: flex-start;

    position: relative;
    padding-left: 52px; /* icon anchor position */
    height: 48px;
}

#navMenu .nav-link.active {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--color-primary);
}

#navMenu .nav-link.active .nav-label {
    font-weight: 500;
}

#navMenu .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: var(--color-text);
}

#navMenu .nav-link i.bi {
    font-size: 1.1rem;
    width: 24px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Nav link content wrapper for proper centering */
#navMenu .nav-link .nav-label {
    margin-left: 0px;
}

/* Smooth transitions for nav labels */
#navMenu .nav-label,
.g2-menu-expand-button .dx-button-text {
    max-width: 200px;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0.2s ease, max-width 0.2s ease, margin 0.2s ease;
    white-space: nowrap;
}

/* Hide labels when drawer is collapsed (mini mode) - using native DevExtreme selector */
.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content #navMenu .nav-label,
.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content .g2-menu-expand-button .dx-button-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
}

/* Adjust nav links in collapsed state */
.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content #navMenu .nav-link {
    justify-content: center;
    padding-left: 0;
    margin: 2px 0;
}

/* Collapse button in mini mode - center the icon */
.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content .g2-menu-expand-button {
    justify-content: center !important;
    padding-left: 0 !important;
}

.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content .g2-menu-expand-button .dx-button-content {
    justify-content: center !important;
}

/* ===== COLLAPSE BUTTON ICON FLIP ===== */
/* Default: hide closed icon, show open icon */
.collapse-icon-open {
    display: inline-block;
}

.collapse-icon-closed {
    display: none;
}

/* When drawer is closed, swap icon visibility */
.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content .collapse-icon-open {
    display: none;
}

.dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content .collapse-icon-closed {
    display: inline-block;
}


/* Form Styles - DevExtreme compatible */
.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}

/* DevExtreme overrides for consistency */
.dx-button.dx-button-mode-text {
    background-color: transparent;
}

.dx-button.dx-button-mode-text:hover {
    background-color: var(--color-background);
}

/* Mobile responsive - overlay mode */
@media (max-width: 991.98px) {
    .dx-drawer-overlap .dx-drawer-panel-content {
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Hide collapse button on mobile */
    .sidebar-footer {
        display: none;
    }
}

/* Desktop - show full nav labels */
@media (min-width: 992px) {
    .sidebar-footer {
        display: block;
    }
}

/* ===== CARD STYLES - Matching G2.Web app.css ===== */
.card {
    background-color: #fff;
    border-radius: 8px !important;
    border-width: 0;
    filter: drop-shadow(2px 2px 4px #ccc);

}

.card-body { padding: 16px; }

/* ===== BREADCRUMB STYLES ===== */
.breadcrumb {
    font-weight: 400;
}

li.breadcrumb-item > a {
    text-decoration-line: none;
}

li.breadcrumb-item.active {
    color: var(--bs-body-color);
}

.min-w-0 {
    min-width: 0;
}

/* ===== DEVEXTREME DRAWER OVERRIDES - Matching G2.Web ===== */
.dx-drawer-panel, .dx-drawer-header, .dx-drawer-footer { 
    border: none !important; 
}

.dx-drawer > .dx-drawer-shading {
    background-color: #fff;
    border-top-left-radius: 8px;
}

.dx-drawer-left.dx-drawer-open.dx-drawer.dx-drawer-overlap > .dx-drawer-panel,
.dx-drawer-right.dx-drawer-open.dx-drawer.dx-drawer-overlap > .dx-drawer-panel { 
    box-shadow: none; 
}

/* =========================================================
   DRAWER MODES
   ========================================================= */

/* MINI = drawer open, icons only */
body[data-drawer-mode="mini"] .dx-drawer-panel-content {
    width: var(--sidebar-mini-width) !important;
}

/* Hide text in MINI mode only */
body[data-drawer-mode="mini"] #navMenu .nav-label,
body[data-drawer-mode="mini"] .g2-menu-expand-button .dx-button-text {
    max-width: 0 !important;
    opacity: 0 !important;
}

/* COMPACT = drawer closed, overlay shadow when opened */
body[data-drawer-mode="compact"] .dx-drawer-panel-content {
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    transition: width 0.25s ease;
}


/* =========================================================
   ICON & NAV ITEM LAYOUT (NO JUMPING EVER)
   ========================================================= */


    /* Icon is ABSOLUTELY positioned */
    #navMenu .nav-link i {
        position: absolute;
        left: 12px; /* never changes */
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        text-align: center;
    }


#navMenu .nav-label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.2s ease, max-width 0.2s ease;
}


/* Restore text visibility outside MINI mode */
body[data-drawer-mode="full"] #navMenu .nav-label,
body[data-drawer-mode="compact"] #navMenu .nav-label {
    max-width: 200px;
    opacity: 1;
}


/* =========================================================
   HAMBURGER VISIBILITY
   ========================================================= */

/* Hidden by default */
#mobileMenuButton {
    display: none;
}

/* Shown ONLY in compact mode */
body[data-drawer-mode="compact"] #mobileMenuButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* COMPACT = drawer fully hidden when closed */
body[data-drawer-mode="compact"] .dx-drawer:not(.dx-drawer-opened) .dx-drawer-panel-content {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

h1:focus {
    outline: none;
}

.bi {
    font-size: 16px;
    letter-spacing: normal !important;
}

.validation-message {
    color: var(--bs-danger);
}

.g2-card-container {
    background: url('/images/financial-wellness.png') repeat;
    background-size: cover;
    box-shadow: inset 0 0 32px 16px var(--bs-body-bg);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    color: white;
    padding: 1rem 1rem 1rem 3.7rem;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.g2-editor-form {
    /* Keep form a consistent width on larger screens */
    max-width: 800px;
}

.g2-editor-list {
    /* Keep form a consistent width on larger screens */
    max-width: 1800px;
}

.g2-grid {
    background-color: var(--bs-body-bg);
    border: none;
}

    .g2-grid > div {
        border: none;
    }

    .g2-grid > .dxbl-scroll-viewer {
        background-color: var(--bs-body-bg);
        border: 1px solid #ccc;
        border-radius: 8px !important;
        padding: 12px !important;
    }

    .g2-grid > .dxbl-grid-bottom-panel {
        border: none;
    }

    .g2-grid table {
        border: none !important;
    }

        .g2-grid table tbody tr:nth-child(odd) {
            background-color: #fff;
        }

        .g2-grid table thead th {
            background-color: var(--bs-body-bg) !important;
        }

        .g2-grid table td, .g2-grid table th {
            padding: 14px !important;
        }


/*
    TODO: These elements need to go into theme pack
*/


.dxbl-btn.dxbl-btn-text-none.dxbl-btn-standalone {
    min-width: 0;
}



.dxbl-btn-primary .dxbl-wait-indicator {
    --dxbl-wait-indicator-color: white;
}

/* --dxbl-text-edit-padding-y */

.dxbl-text-edit > .dxbl-text-edit-input {
    padding: 4px 10px 4px 10px;
}

/* --dxbl-text-edit-padding-y: and --dxbl-text-edit-padding-x:*/

.dxbl-text-edit.dxbl-memo-edit > textarea {
    padding: 10px 10px 10px 10px;
}

.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item .dxbl-btn-dropdown-item > .dxbl-btn {
    padding: 6px 6px 6px 6px;
}

.dxbl-btn.dxbl-btn-standalone.dxbl-btn-icon-only[data-has-popup] {
    min-width: 40px;
    width: auto;
}

/* --dxbl-dropdown-border-width */

.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item-separator {
    border-top-width: 1px;
    margin: 6px 0 6px 0;
}

/*--dxbl-drawer-content-shading-bg:*/

.dxbl-drawer > .dxbl-drawer-shading {
    background-color: #fff;
    border-top-left-radius: 8px;
}

/*    --dxbl-drawer-panel-box-shadow-left*/

.dxbl-drawer-left.dxbl-drawer-open.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-panel,
.dxbl-drawer-right.dxbl-drawer-open.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-panel {
    box-shadow: none;
}

body {
    font-family: "PwC Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

h1 {
    font-family: "PwC Helvetica Neue", Arial, sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

h2 {
    font-family: "PwC Helvetica Neue", Arial, sans-serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

h3 {
    font-family: "PwC Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

.dxbl-drawer-panel, .dxbl-drawer-header, .dxbl-drawer-footer {
    border: none !important;
}


/* Accent line beside text header */
.header-accent {
    width: 3px;
    height: 32px;
    background-color: var(--bs-primary);
    border-radius: 2px;
}

/* Rounded icon wrapper for all icons */
.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 25%;
    flex-shrink: 0;
}

/* site.css or custom.scss */
.bg-primary-slash {
    background: linear-gradient( 105deg, /* Rotation */
    #2A206F 0%, /* Main color */
    #2A206F 82%, /* Main color coverage */
    #AA050E 82%, /* Slash color starts */
    #AA050E 92%, /* Slash color ends */
    #2A206F 92% /* Back to main color */
    );
    color: white;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
}

.required::after {
    color: red;
    content: " *";
}

/* Soft textured background when placeholder is shown */
.placeholder-frame {
    background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03)) no-repeat, repeating-linear-gradient( 45deg, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 8px, rgba(0,0,0,0.04) 8px, rgba(0,0,0,0.04) 16px );
    min-height: 160px;
    max-height: 160px;
}

/* Slightly dim the placeholder image so the overlay text/icon stands out */
.placeholder-img {
    filter: grayscale(80%);
    opacity: 0.7;
}

/* Soft overlay with icon and hint text */
.placeholder-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d; /* Bootstrap text-muted color tone */
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    pointer-events: none; /* clicks fall through to card */
    backdrop-filter: blur(1px);
}

/* Remove article padding globally */
article {
    padding: 0 !important;
}

#contact-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

    /* Remove top margin/padding from footer when following contact section */
    #contact-section ~ footer,
    article:has(#contact-section) footer {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

        /* Alternative: Target Footer component specifically if it has a class */
        #contact-section ~ footer > *:first-child,
        article:has(#contact-section) footer > .main-footer {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Add padding to the last child of footer */
        #contact-section ~ footer > *:last-child,
        article:has(#contact-section) footer > *:last-child {
            padding-top: 0.5rem !important;
        }




/* Unified Footer Styles - Black Background & White Text */


/* Main Footer */
.main-footer {
    background-color: #1a1a1a;
    border-top: 2px solid #333333;
    color: #ffffff;
}

    .main-footer h5,
    .main-footer a,
    .main-footer p,
    .main-footer span {
        color: #ffffff;
    }

        .main-footer a:hover {
            color: #cccccc;
            text-decoration: underline;
        }

/* Copyright Footer */
.copyright-footer {
    background-color: #1a1a1a;
    border-top: 2px solid #333333;
    color: #ffffff;
}

    .copyright-footer span {
        color: #ffffff;
    }

/* Disclaimer Footer */
.disclaimer-footer {
    background-color: #1a1a1a;
    border-top: 2px solid #333333;
    padding: 2rem 0;
    margin-top: 0;
    font-size: 0.875rem;
    color: #ffffff;
}

    .disclaimer-footer .container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 0.75rem;
    }

.disclaimer-content {
    line-height: 1.6;
    padding: 0 0.75rem;
}

    .disclaimer-content p {
        margin: 0 0 0.75rem 0;
        text-align: left;
        color: #ffffff;
    }

        .disclaimer-content p:last-child {
            margin-bottom: 0;
        }

    .disclaimer-content ul {
        margin: 0.5rem 0 1rem 0;
        padding-left: 2.25rem;
        list-style-type: disc;
    }

        .disclaimer-content ul li {
            margin-bottom: 0.5rem;
            line-height: 1.5;
            color: #ffffff;
        }

            .disclaimer-content ul li:last-child {
                margin-bottom: 0;
            }

            .disclaimer-content ul li::marker {
                color: #cccccc;
            }

/* Responsive Design */
@media (max-width: 768px) {
    .disclaimer-footer {
        padding: 1.5rem 0;
        font-size: 0.8125rem;
    }

        .disclaimer-footer .container {
            padding: 0 0.75rem;
        }

    .disclaimer-content {
        padding: 0 0.75rem;
    }
}

@media (min-width: 1200px) {
    .disclaimer-footer .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .disclaimer-footer .container {
        max-width: 1320px;
    }
}

/* ========================================
   BRAND COLORS - GLOBAL STYLING
   ======================================== */

/* Primary Color: #2A206F (Purple) */
/* Secondary Colors: #151037 (Dark Purple), #823077 (Magenta) */
/* Accent Colors: #E30613 (Red), #AA050E (Dark Red), #FC9399 (Light Pink) */
/* Neutral Colors: #FFFFFF (White), #DDDDDD (Light Gray), #969696 (Medium Gray), #5F5F5F (Dark Gray), #000000 (Black) */
/* Additional: #B2CBE9 (Light Blue) */

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

body, html {
    font-family: Arial, sans-serif !important;
    line-height: 1.15 !important;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

*
:not(.dx-icon)
:not([class^="dx-icon-"])
:not(.dx-checkbox-icon)
:not(.dx-checkbox-checked)
:not(.dx-checkbox-checked::before)
:not(.dx-dropdowneditor-icon)
:not(.dx-gallery-nav-button-prev)
:not(.dx-gallery-nav-button-next)
:not(.dx-gallery-nav-button-prev::before)
:not(.dx-gallery-nav-button-next::before) {
    font-family: Arial, sans-serif !important;
    line-height: 1.15 !important;
}



/* Ensure DevExpress components also use Arial */
.dxbl-btn,
.dxbl-text-edit,
.dxbl-dropdown,
.dxbl-checkbox,
[class*="dxbl-"] {
    font-family: Arial, sans-serif !important;
    line-height: 1.15 !important;
}

/* ========================================
   HEADING STYLES
   ======================================== */

/* ========================================
   PRIMARY BUTTONS
   ======================================== */
.btn.btn-sm.btn-primary {
    background-color: #2A206F !important;
    border-color: #2A206F !important;
    color: #FFFFFF !important;
}

/* DevExpress Primary buttons - exclude dropdowns */
.dxbl-btn-primary:not([class*="dropdown"]) {
    background-color: #2A206F !important;
    border-color: #2A206F !important;
}

/* Exclude dropdown buttons from primary styling */
.dxbl-btn-primary[class*="dropdown"],
.dxbl-dropdown .dxbl-btn-primary {
    background-color: initial !important;
    border-color: initial !important;
}

/* ========================================
   HEADER ACCENT (Primary Color)
   ======================================== */

.header-accent.me-3 {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
}

/* ========================================
   NAVIGATION (Primary Color)
   ======================================== */

.nav-link.active {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
    border-color: #2A206F !important;
}

/* ========================================
   OUTLINE BUTTONS
   ======================================== */

/* Outline Primary Button (Primary Color) */
.btn.btn-sm.btn-outline-primary {
    border-color: #2A206F !important;
    color: #2A206F !important;
}

    .btn.btn-sm.btn-outline-primary:hover {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
    }

/* Outline Danger Button (Red Accent) */
.btn.btn-sm.btn-outline-danger {
    border-color: #E30613 !important;
    color: #E30613 !important;
}

    .btn.btn-sm.btn-outline-danger:hover {
        background-color: #E30613 !important;
        border-color: #E30613 !important;
        color: #FFFFFF !important;
    }

/* ========================================
   DEVEXPRESS BLAZOR BUTTONS
   ======================================== */

/* DevExpress Outline Primary Button (Magenta Secondary) */
.dxbl-btn.dxbl-btn-outline-primary.dxbl-btn-standalone.ms-2 {
    border-color: #AA050E !important;
    color: #AA050E !important;
}

    .dxbl-btn.dxbl-btn-outline-primary.dxbl-btn-standalone.ms-2:hover {
        background-color: #AA050E !important;
        border-color: #AA050E !important;
        color: #FFFFFF !important;
    }

/* ========================================
   DEVEXPRESS BLAZOR CHECKBOX
   ======================================== */

/* Override the CSS variable for checked checkbox background (Primary Color) */
.dxbl-checkbox.dxbl-checkbox-checked {
    --dxbl-checkbox-check-element-checked-bg: #2A206F !important;
    box-shadow: none !important;
}

/* Additional selector for all checkboxes to ensure consistency */
.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: #2A206F !important;
    box-shadow: none !important;
}

    /* Fallback for the check element itself */
    .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        box-shadow: none !important;
    }

/* Unchecked checkbox styling */
.dxbl-checkbox-check-element {
    box-shadow: none !important;
}

/* Focused checkbox styling */
.dxbl-checkbox:focus,
.dxbl-checkbox:focus-within,
.dxbl-checkbox.dxbl-focused {
    box-shadow: none !important;
    outline: none !important;
}

    .dxbl-checkbox.dxbl-focused .dxbl-checkbox-check-element {
        box-shadow: none !important;
    }
/* ========================================
   BOOTSTRAP FORM CHECKBOX
   ======================================== */
/* Checked checkbox styling - matches DevExpress Primary Purple */
.form-check-input:checked {
    background-color: #2A206F !important;
    border-color: #2A206F !important;
    box-shadow: none !important;
}

/* All form check inputs - remove box shadow */
.form-check-input {
    box-shadow: none !important;
}

    /* Focused checkbox styling */
    .form-check-input:focus {
        box-shadow: none !important;
        outline: none !important;
        border-color: #2A206F !important;
    }

    /* Hover state for checked checkbox */
    .form-check-input:checked:hover {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
    }

    /* Active state for checked checkbox */
    .form-check-input:checked:active {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
    }

/* ========================================
   BREADCRUMB (Primary Color)
   ======================================== */

.breadcrumb-item a {
    color: #2A206F !important;
}

    .breadcrumb-item a:hover {
        color: #151037 !important; /* Dark purple shade on hover */
        text-decoration: underline;
    }

/* ========================================
   SPINNER (Primary Color)
   ======================================== */

.spinner-border {
    border-color: #2A206F !important;
    border-right-color: transparent !important;
}

/* DevExpress Blazor Wait Indicator (Primary Color) */
.dxbl-wait-indicator {
    --dxbl-wait-indicator-color: #2A206F !important;
}

/* Additional selectors for DevExpress wait indicator */
.dxbl-wait-indicator-spin {
    --dxbl-wait-indicator-color: #2A206F !important;
}

/* ========================================
   TEXT INPUT FOCUS STATES
   ======================================== */

.dxbl-text-edit:focus,
.dxbl-text-edit:focus-within,
.dxbl-text-edit input:focus {
    border-color: #2A206F !important;
    box-shadow: none !important;
    outline: none !important;
}

.dxbl-text-edit.dxbl-focused {
    border-color: #2A206F !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ========================================
   SORT TOGGLE BUTTONS
   ======================================== */

.dxbl-btn.dxbl-btn-outline-secondary.sort-toggle-btn {
    border-color: #2A206F !important;
    color: #2A206F !important;
}

    .dxbl-btn.dxbl-btn-outline-secondary.sort-toggle-btn:hover {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
    }

    .dxbl-btn.dxbl-btn-outline-secondary.sort-toggle-btn:focus,
    .dxbl-btn.dxbl-btn-outline-secondary.sort-toggle-btn:active {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
        box-shadow: none !important;
    }

/* ========================================
   DROPDOWN EDIT BUTTONS
   ======================================== */

.dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown {
    border-color: #2A206F !important;
    color: #2A206F !important;
}

    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown:hover {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
    }

    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown:focus,
    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown:active {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
        box-shadow: none !important;
    }

/* ========================================
   TOOLBAR BUTTONS
   ======================================== */

/* Expanded toolbar button container */
.toolbar-button-container[data-expanded] {
    color: #2A206F !important;
}

/* DevExpress text secondary buttons in toolbar - expanded state only */
.dxbl-btn.dxbl-btn-text-secondary.dxbl-btn-icon-only.dxbl-btn-standalone.toolbar-button-container[data-expanded] {
    color: #2A206F !important;
}

/* ========================================
   USER INITIALS
   ======================================== */

/* User initials with Bootstrap classes */
.g2-user-initials.bg-primary {
    background-color: #2A206F !important;
}

.dxbl-btn.dxbl-btn-primary.dxbl-active.dxbl-btn-standalone.g2-user-initials {
    background-color: #2A206F !important;
    border-color: #2A206F !important;
}

/* User initials expanded state */
.g2-user-initials[data-expanded] {
    background-color: #2A206F !important;
}

/* ========================================
   BRAND COLOR PALETTE - UTILITY CLASSES
   ======================================== */

/* PRIMARY COLORS */

/* Primary Purple - #2A206F */
.text-primary-purple {
    color: #2A206F !important;
}

.bg-primary-purple {
    background-color: #2A206F !important;
}

.border-primary-purple {
    border-color: #2A206F !important;
}

/* Primary Red - #E30613 */
.text-primary-red {
    color: #E30613 !important;
}

.bg-primary-red {
    background-color: #E30613 !important;
}

.border-primary-red {
    border-color: #E30613 !important;
}

/* SECONDARY COLORS */

/* Dark Purple - #151037 */
.text-secondary-dark-purple {
    color: #151037 !important;
}

.bg-secondary-dark-purple {
    background-color: #151037 !important;
}

.border-secondary-dark-purple {
    border-color: #151037 !important;
}

/* Magenta - #823077 */
.text-secondary-magenta {
    color: #823077 !important;
}

.bg-secondary-magenta {
    background-color: #823077 !important;
}

.border-secondary-magenta {
    border-color: #823077 !important;
}

/* Light Blue - #B2CBE9 */
.text-secondary-light-blue {
    color: #B2CBE9 !important;
}

.bg-secondary-light-blue {
    background-color: #B2CBE9 !important;
}

.border-secondary-light-blue {
    border-color: #B2CBE9 !important;
}

/* Dark Red - #AA050E */
.text-secondary-dark-red {
    color: #AA050E !important;
}

.bg-secondary-dark-red {
    background-color: #AA050E !important;
}

.border-secondary-dark-red {
    border-color: #AA050E !important;
}

/* Light Pink - #FC9399 */
.text-secondary-light-pink {
    color: #FC9399 !important;
}

.bg-secondary-light-pink {
    background-color: #FC9399 !important;
}

.border-secondary-light-pink {
    border-color: #FC9399 !important;
}

/* NEUTRAL COLORS */

/* White - #FFFFFF */
.text-white {
    color: #FFFFFF !important;
}

.bg-white {
    background-color: #FFFFFF !important;
}

.border-white {
    border-color: #FFFFFF !important;
}

/* Light Gray - #DDDDDD */
.text-light-gray {
    color: #DDDDDD !important;
}

.bg-light-gray {
    background-color: #DDDDDD !important;
}

.border-light-gray {
    border-color: #DDDDDD !important;
}

/* Medium Gray - #969696 */
.text-medium-gray {
    color: #969696 !important;
}

.bg-medium-gray {
    background-color: #969696 !important;
}

.border-medium-gray {
    border-color: #969696 !important;
}

/* Dark Gray - #5F5F5F */
.text-dark-gray {
    color: #5F5F5F !important;
}

.bg-dark-gray {
    background-color: #5F5F5F !important;
}

.border-dark-gray {
    border-color: #5F5F5F !important;
}

/* Black - #000000 */
.text-black {
    color: #000000 !important;
}

.bg-black {
    background-color: #000000 !important;
}

.border-black {
    border-color: #000000 !important;
}

.bg-mid-blue {
    background-color: #3F7EC8 !important;
}
/* ========================================
   FORM LAYOUT STYLES
   ======================================== */

/* Form captions/labels - Black color */
.demo-form-layout .dxbl-fl-caption {
    color: #000000 !important;
}

/* Alternative selector for form item captions */
.demo-form-layout .dxbl-form-layout-item-caption {
    color: #000000 !important;
}

/* Specific DevExpress caption classes */
.demo-form-layout .dxbl-fl-cpt {
    color: #000000 !important;
}

    .demo-form-layout .dxbl-fl-cpt.dxbl-text {
        color: #000000 !important;
    }

.demo-form-layout .dxbl-fl-begin-row.dxbl-fl-cpt.dxbl-text {
    color: #000000 !important;
}

.demo-form-layout .dxbl-form-layout-item [class*="caption"] {
    color: #000000 !important;
}

.form-header {
    color: #000000;
}
/* ========================================
   DEVEXPRESS TAGS
   ======================================== */

.dxbl-tag {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
}

/* ========================================
   BADGES
   ======================================== */

.badge.bg-primary {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
}

    .badge.bg-primary.fs-6.me-3 {
        background-color: #2A206F !important;
        color: #FFFFFF !important;
    }
/* ========================================
   DEVEXPRESS GRID HEADER ACTIONS
   ======================================== */

.dxbl-grid-header.dxbl-grid-action {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
}

/* Additional selectors to ensure coverage */
.dxbl-grid-header .dxbl-grid-action {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
}

.dxbl-grid-action.dxbl-grid-header {
    background-color: #2A206F !important;
    color: #FFFFFF !important;
}
/* ========================================
   DEVEXPRESS GRID FILTER FUNNEL BUTTON
   ======================================== */

.dxbl-btn.dxbl-btn-outline-secondary.dxbl-grid-filter-menu-funnel-btn {
    background-color: #FFFFFF !important;
    color: #2A206F !important;
    border-color: #FFFFFF !important;
}

    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-grid-filter-menu-funnel-btn:hover {
        color: #2A206F !important;
        border-color: #FFFFFF !important;
    }

    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-grid-filter-menu-funnel-btn:focus,
    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-grid-filter-menu-funnel-btn:active {
        color: #2A206F !important;
        border-color: #FFFFFF !important;
        box-shadow: none !important;
    }
/* ========================================
   DEVEXPRESS CAROUSEL ARROW BUTTONS
   ======================================== */

.dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-right-arrow,
.dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-left-arrow {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #3F7EC8 !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

    .dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-right-arrow:hover,
    .dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-left-arrow:hover {
        background-color: #FFFFFF !important;
        border-color: #FFFFFF !important;
        color: #3F7EC8 !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }

    .dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-right-arrow:focus,
    .dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-right-arrow:active,
    .dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-left-arrow:focus,
    .dxbl-btn.dxbl-btn-secondary.dxbl-carousel-arrow-button.dxbl-left-arrow:active {
        background-color: #FFFFFF !important;
        border-color: #FFFFFF !important;
        color: #3F7EC8 !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }
/* ========================================
   DEVEXPRESS CAROUSEL ARROW BUTTON HOVER
   ======================================== */

.dxbl-carousel .dxbl-carousel-arrow-button:not([disabled]):hover .dxbl-image {
    color: #3F7EC8 !important;
}

/* Also target the icon directly for better coverage */
.dxbl-carousel .dxbl-carousel-arrow-button:not([disabled]):hover {
    color: #3F7EC8 !important;
}
/* ========================================
   KEY INFORMATION ICON COLORS
   ======================================== */

/* Sector - Primary Purple */
.icon-purple {
    background-color: rgba(42, 32, 111, 0.1) !important;
    color: #2A206F !important;
}

/* Training Level / Resource Type - Mid Blue */
.icon-midblue {
    background-color: rgba(63, 126, 200, 0.1) !important;
    color: #3F7EC8 !important;
}

/* Format / File Type - Magenta */
.icon-magenta {
    background-color: rgba(130, 48, 119, 0.1) !important;
    color: #823077 !important;
}

/* Duration - Light Blue */
.icon-lightblue {
    background-color: rgba(178, 203, 233, 0.1) !important;
    color: #3F7EC8 !important;
}

/* Country / Location - Primary Red */
.icon-red {
    background-color: rgba(227, 6, 19, 0.1) !important;
    color: #E30613 !important;
}

/* Author - Dark Purple */
.icon-darkpurple {
    background-color: rgba(21, 16, 55, 0.1) !important;
    color: #151037 !important;
}

/* Date Published - Dark Red */
.icon-darkred {
    background-color: rgba(170, 5, 14, 0.1) !important;
    color: #AA050E !important;
}
/* ========================================
   DEVEXPRESS PAGER ACTIVE PAGE BUTTON
   ======================================== */

.dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-page-btn.dxbl-pager-active-page-btn {
    background-color: #2A206F !important;
    border-color: #2A206F !important;
    color: #FFFFFF !important;
}

    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-page-btn.dxbl-pager-active-page-btn:hover {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
    }

    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-page-btn.dxbl-pager-active-page-btn:focus,
    .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-page-btn.dxbl-pager-active-page-btn:active {
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        color: #FFFFFF !important;
        box-shadow: none !important;
    }

/* Unified Insight Card Styles */
/* Unified Insight Card Styles */
.insight-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 365px;
    width: 100%;
}

    .insight-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

/* Image Section */
.insight-card-image {
    width: 100%;
    min-height: 160px;
    max-height: 160px;
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative;
}

    .insight-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Featured Badge - Top Right Corner */
.featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #AA050E; /* Secondary Dark Red */
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

    .featured-badge i {
        font-size: 12px;
    }

/* Card Body */
.insight-card-body {
    padding: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

/* Title/Headline */
.insight-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Description/Secondary Text */
.insight-card-description {
    font-size: 14px;
    color: #666;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    height: 22px;
}

.country-card-description {
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15 !important;
    /* 14px × 1.15 × 6 lines = 96.6px */
    max-height: 96.6px; /* 14px × 1.15 × 6 lines */
    min-height: 96.6px;
    white-space: normal;
    text-align: left;
    margin-bottom: 0 !important;
    word-break: break-word;
}

/* Meta Items (Author, Type, etc.) */
.insight-card-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    height: 22px;
}

    .insight-card-meta-item i {
        font-size: 16px;
        color: #888;  
    }

    .insight-card-meta-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Sector Pills - Touch Swipe Enabled, No Scrollbar */
.insight-card-sectors {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth touch scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
    
}
    /* Hide scrollbar in Chrome, Safari, Edge */
    .insight-card-sectors::-webkit-scrollbar {
        display: none;
    }

.sector-pill {
    display: inline-block;
    padding: 4px 12px;
    background-color: #3F7EC8;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent pills from shrinking */
}

/* Sector pill color variants */
.sector-pill-primary {
    background-color: #2A206F; /* Primary Purple */
    color: white;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sector-pill-success {
    background-color: #823077; /* Secondary Magenta */
    color: white;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sector-pill-warning {
    background-color: #FC9399; /* Light Pink */
    color: #000;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sector-pill-danger {
    background-color: #E30613; /* Primary Red */
    color: white;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sector-pill-light {
    background-color: #B2CBE9; /* Light Blue */
    color: white;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Footer Metadata */
.insight-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    flex-wrap: nowrap;
    min-width: 0;
}

.footer-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

    .footer-item i {
        font-size: 14px;
        flex-shrink: 0;
    }

    /* Location item - can shrink, text truncates */
    .footer-item:first-child {
        flex: 0 1 auto; /* Changed from flex: 1 1 auto */
        min-width: 0;
        max-width: 60%; /* Limit location to 60% of available space */
        overflow: hidden;
    }

        .footer-item:first-child span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* Date item - never shrinks, always visible */
    .footer-item:last-child {
        flex-shrink: 0;
        white-space: nowrap;
    }

.footer-separator {
    color: #ccc;
    flex-shrink: 0;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .insight-card-title {
        font-size: 16px;
    }

    .insight-card-description {
        font-size: 13px;
    }

    /* Featured badge on mobile */
    .featured-badge {
        top: 8px;
        right: 8px;
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Smaller pills on mobile */
    .sector-pill,
    .sector-pill-primary,
    .sector-pill-success,
    .sector-pill-warning,
    .sector-pill-danger {
        padding: 3px 10px;
        font-size: 11px;
    }
}

* {
    font-family: Arial, sans-serif !important;
    line-height: 1.15 !important;
}

.dx-dropdowneditor-icon,
.dx-icon,
[class^="dx-icon-"],
.dx-checkbox-icon,
.dx-checkbox-checked,
.dx-tag-remove-button,
.dx-checkbox-checked::before,
.dx-gallery-nav-button-prev::before,
.dx-gallery-nav-button-next::before,
.dx-numberbox-spin-up::before,
.dx-numberbox-spin-down::before,
.dx-numberbox-spin-up-icon,
.dx-numberbox-spin-down-icon {
    font-family: "DXIcons", Arial, sans-serif !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}


/* ============================================
   Carousel Styles
   ============================================ */

.related-carousel {
    background: transparent;
    border: none;
}

    .related-carousel .carousel-control-prev,
    .related-carousel .carousel-control-next {
        width: 40px;
        height: 40px;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        opacity: 0.8;
    }

    .related-carousel .carousel-control-prev {
        left: -20px;
    }

    .related-carousel .carousel-control-next {
        right: -20px;
    }

        .related-carousel .carousel-control-prev:hover,
        .related-carousel .carousel-control-next:hover {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.7);
        }

    .related-carousel .carousel-control-prev-icon,
    .related-carousel .carousel-control-next-icon {
        width: 1rem;
        height: 1rem;
    }

h1.fw-bold {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Ensure the left column content stays contained */
.col-12.col-md-6 {
    min-width: 0; /* Allows flex items to shrink below content size */
}
p.text-light.fs-5 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}
.nav-tabs {
    display: flex;
    width: 100%;
}

    .nav-tabs .nav-item {
        flex: 1;
        margin: 0 !important;
    }

    .nav-tabs .nav-link {
        width: 100%;
        text-align: center;
        background-color: #e9ecef;
        color: #6c757d;
        border: 1px solid #dee2e6;
        margin-right: 0;
    }

        /* Active tab styling - white background */
        .nav-tabs .nav-link.active {
            background-color: white !important;
            color: #000 !important;
            border-color: #dee2e6 #dee2e6 #fff !important;
        }

        /* Hover effect for inactive tabs */
        .nav-tabs .nav-link:hover:not(.active) {
            background-color: #dee2e6;
            color: #495057;
        }
/* Tab content styling */
.tab-content {
    background-color: white;
    min-height: 200px;
}
/* Desktop/Tablet side controls */
.carousel-control-side {
    width: 40px;
}

.carousel-control-prev.carousel-control-side {
    left: -60px;
}

.carousel-control-next.carousel-control-side {
    right: -60px;
}

.carousel-control-icon {
    background-color: white;
    border-radius: 50%;
    padding: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.carousel-control-prev-icon.carousel-control-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%233F7EC8%27%3E%3Cpath d=%27M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z%27/%3E%3C/svg%3E');
}

.carousel-control-next-icon.carousel-control-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%233F7EC8%27%3E%3Cpath d=%27M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z%27/%3E%3C/svg%3E');
}

/* Mobile bottom controls */
.carousel-controls-mobile {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
}

.carousel-btn-mobile {
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background: transparent;
}

.carousel-control-mobile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.carousel-control-prev-icon.carousel-control-mobile-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%233F7EC8%27%3E%3Cpath d=%27M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z%27/%3E%3C/svg%3E');
}

.carousel-control-next-icon.carousel-control-mobile-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%233F7EC8%27%3E%3Cpath d=%27M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z%27/%3E%3C/svg%3E');
}

.success-popup-content {
    animation: scaleIn 0.3s ease-out;
}

.success-icon-wrapper i{
    font-size: 56px;
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* Small inline spinner */
.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ===== Light-surface branded language toggle ===== */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: linear-gradient( 180deg, rgba(178, 203, 233, 0.45), /* light blue */
    rgba(178, 203, 233, 0.25) );
    border: 1px solid rgba(42, 32, 111, 0.25); /* primary purple */

    box-shadow: 0 2px 6px rgba(21, 16, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Toggle button */
.lang-toggle-btn {
    cursor: pointer;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #2A206F; /* primary purple */
    background-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
    user-select: none;
    white-space: nowrap;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* remove underline */
    border: none;
    outline: none;
}

/* Hover (inactive) */
.lang-toggle-btn:hover:not(.is-active) {
    background-color: rgba(130, 48, 119, 0.15); /* secondary magenta */
}

/* Active state */
.lang-toggle-btn.is-active {
    background-color: #2A206F; /* primary purple */
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(42, 32, 111, 0.35);
}

/* Press feedback */
.lang-toggle-btn:active {
    transform: scale(0.97);
}

/* Keyboard focus (accessibility) */
.lang-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #B2CBE9, /* secondary light blue */
    0 0 0 4px rgba(42, 32, 111, 0.35);
}


/* Remove link-specific states */
.lang-toggle-btn:not(.is-active):link,
.lang-toggle-btn:not(.is-active):visited,
.lang-toggle-btn:not(.is-active):hover,
.lang-toggle-btn:not(.is-active):active {
    text-decoration: none;
    color: inherit;
}


.card-link {
    display: flex; /* Makes the whole card clickable */
    text-decoration: none; /* Removes underline */
    color: inherit; /* Keeps existing text color */
    cursor: pointer; /* Same as your div */
}

.card-link:hover,
.card-link:focus {
    text-decoration: none;
    color: inherit;
}
/* Cookie Simple Banner - Shows first at bottom */
.cookie-simple-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2A206F 0%, #E30613 100%);
    color: white;
    padding: 1rem 1.5rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: slideUp 0.4s ease-out;
}

.cookie-simple-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookie-simple-text {
    margin: 0;
    font-size: 0.95rem;
    flex: 1;
}

.cookie-simple-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Cookie Banner Overlay - Shows when "Customize" is clicked */
.cookie-banner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(21, 16, 55, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease-out;
}

.cookie-banner-modal {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(42, 32, 111, 0.4);
    animation: slideIn 0.3s ease-out;
}

.cookie-banner-header {
    padding: 1.5rem;
    border-bottom: 1px solid #DDDDDD;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #2A206F 0%, #151037 100%);
    border-radius: 12px 12px 0 0;
}

.cookie-banner-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #FFFFFF;
}

.cookie-banner-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #FFFFFF;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
    opacity: 0.8;
}

    .cookie-banner-close:hover {
        opacity: 1;
    }

.cookie-banner-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.cookie-intro {
    margin-bottom: 1.5rem;
}

    .cookie-intro p {
        margin-bottom: 0.75rem;
        color: #5F5F5F;
        font-size: 0.9rem;
        line-height: 1.6;
    }

.cookie-policy-link {
    color: #2A206F;
    text-decoration: none;
    font-weight: 500;
}

    .cookie-policy-link:hover {
        text-decoration: underline;
        color: #E30613;
    }

.cookie-categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cookie-category {
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 1rem;
    background: #FFFFFF;
    transition: border-color 0.2s;
}

    .cookie-category:hover {
        border-color: #B2CBE9;
    }

.cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cookie-category-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .cookie-category-title h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #2A206F;
    }

.cookie-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.always-active {
    background: #28a745;
    color: white;
}

.cookie-category-description p {
    margin: 0;
    font-size: 0.875rem;
    color: #5F5F5F;
    line-height: 1.5;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #DDDDDD;
    transition: 0.3s;
    border-radius: 24px;
}

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

input:checked + .toggle-slider {
    background-color: #2A206F;
}

    input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }

.cookie-banner-footer {
    padding: 1.5rem;
    border-top: 1px solid #DDDDDD;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    background-color: #FFFFFF;
}

    .cookie-banner-footer .btn {
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
        border-radius: 6px;
        font-weight: 500;
        border: none;
        cursor: pointer;
    }

    .cookie-banner-footer .btn-outline-secondary {
        background-color: transparent;
        border: 2px solid #969696;
        color: #5F5F5F;
        transition: all 0.2s;
    }

        .cookie-banner-footer .btn-outline-secondary:hover {
            background-color: #969696;
            color: #FFFFFF;
        }

    .cookie-banner-footer .btn-secondary {
        background-color: #2A206F;
        color: #FFFFFF;
        /* No hover effect */
    }

        .cookie-banner-footer .btn-secondary:hover {
            background-color: #2A206F;
            color: #FFFFFF;
        }

/* Specific override for Save Preferences button by ID */
#savePreferences {
    background-color: #2A206F;
    color: #FFFFFF;
    transition: none;
}

    #savePreferences:hover {
        background-color: #2A206F;
        color: #FFFFFF;
    }

.cookie-banner-footer .btn-primary {
    background-color: #E30613;
    color: #FFFFFF;
    transition: all 0.2s;
}

    .cookie-banner-footer .btn-primary:hover {
        background-color: #AA050E;
    }

/* Simple Banner Buttons */
.cookie-simple-actions .btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.cookie-simple-actions .btn-outline-light {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    /* No hover effect */
}

.cookie-simple-actions .btn-primary {
    background-color: #FFFFFF;
    color: #2A206F;
    font-weight: 600;
    transition: all 0.2s;
}

    .cookie-simple-actions .btn-primary:hover {
        background-color: #FC9399;
        color: #FFFFFF;
    }

/* Animations */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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

/* Responsive Design */
@media (max-width: 768px) {
    .cookie-simple-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .cookie-simple-actions {
        flex-direction: column;
        width: 100%;
    }

        .cookie-simple-actions .btn {
            width: 100%;
        }

    .cookie-banner-modal {
        max-height: 95vh;
        margin: 0.5rem;
    }

    .cookie-banner-header {
        padding: 1rem;
    }

    .cookie-banner-body {
        padding: 1rem;
    }

    .cookie-banner-footer {
        padding: 1rem;
        flex-direction: column;
    }

        .cookie-banner-footer .btn {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .cookie-simple-banner {
        padding: 0.75rem 1rem;
    }

    .cookie-simple-text {
        font-size: 0.875rem;
    }

    .cookie-banner-title {
        font-size: 1.1rem;
    }
}

.custom-link {
    color: #2A206F !important;
    text-decoration: none;
}

    .custom-link:hover {
        text-decoration: underline;
    }
.page-link {
    position: relative !important;
    display: block !important;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x) !important;
    font-size: var(--bs-pagination-font-size) !important;
    color: #FFFFFF !important; /* White text */
    text-decoration: none !important;
    background-color: #2A206F !important; /* Primary Purple background */
    border: var(--bs-pagination-border-width) solid #2A206F !important; /* Primary Purple border */
    transition: none !important; /* Disable transitions to remove hover effects */
}
    /* Disable hover effect */
    .page-link:hover {
        color: #FFFFFF !important;
        background-color: #2A206F !important;
        border-color: #2A206F !important;
    }
    /* Disable focus effect */
    .page-link:focus {
        color: #FFFFFF !important;
        background-color: #2A206F !important;
        border-color: #2A206F !important;
        box-shadow: none !important;
    }
    /* Active/current page styling */
    .page-link.active,
    .page-item.active .page-link {
        color: #FFFFFF !important;
        background-color: #2A206F !important;
        border-color: #2A206F !important;
    }
    /* Disabled state styling - using Medium Gray */
    .page-link.disabled,
    .page-item.disabled .page-link {
        color: #FFFFFF !important;
        background-color: #5F5F5F !important; /* Medium Gray background */
        border-color: #5F5F5F !important;
        pointer-events: none !important;
        opacity: 1 !important;
    }