/* =========================================================
   DARK MODE - Only swap black to white,
   ========================================================= */

/* Page background: white -> black */
body.dark-mode,
body.dark-mode #smooth-content,
body.dark-mode .vb-slider-container,
body.dark-mode .api-connect-block {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    /* Remove the grid pattern background in dark mode */
    body.dark-mode #smooth-content {
        background-image: none !important;
    }

    /* Navbar: white -> black */
    body.dark-mode #nav_header,
    body.dark-mode #nav_header.shrink {
        background-color: #000000 !important;
    }

    /* All white/light backgrounds -> black */
    body.dark-mode .vb-login,
    body.dark-mode .modal-content,
    body.dark-mode .vb-c_care-package_container,
    body.dark-mode ul.infoGraphic li,
    body.dark-mode ul.infoGraphic li .coverWrap .numberCover,
    body.dark-mode #vb-vb-open-an-account,
    body.dark-mode #vb-faq,
    body.dark-mode .vb-faq-left-box-block,
    body.dark-mode .vb-faq-box-content-block,
    body.dark-mode #vb-services,
    body.dark-mode .vb-service-box,
    body.dark-mode .vb-app-showcase-inner,
    body.dark-mode footer,
    body.dark-mode .vb-company-reg,
    body.dark-mode .accordion-item,
    body.dark-mode .accordion-button {
        background-color: #000000 !important;
        background-image: none !important;
    }

    /* Dark blue section -> black */
    body.dark-mode .vb-c_care-paybill_container {
        background: #000000 !important;
        background-image: none !important;
    }

    /* All black text -> white */
    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
    body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
        color: #ffffff !important;
    }

    body.dark-mode p,
    body.dark-mode li,
    body.dark-mode label,
    body.dark-mode .vb-login-content h2,
    body.dark-mode .vb-login-content h2 small,
    body.dark-mode .vb-login-content .vb-list-style li,
    body.dark-mode .vb-login-content .vb-list-style li p,
    body.dark-mode .vb-l-input-group label,
    body.dark-mode .vb-notifi,
    body.dark-mode .vb-oac-box h3,
    body.dark-mode .vb-faq-box-content li,
    body.dark-mode .vb-service-box h2,
    body.dark-mode .vb-service-box-content p,
    body.dark-mode .vb-app-showcase-content p,
    body.dark-mode .vb-app-showcase-content ul li,
    body.dark-mode .vb-footer-box h2,
    body.dark-mode footer ul li,
    body.dark-mode footer ul li a,
    body.dark-mode .vb-company-reg p,
    body.dark-mode ul.infoGraphic li .content h2,
    body.dark-mode ul.infoGraphic li .content p,
    body.dark-mode .navbar-light .navbar-nav .nav-link,
    body.dark-mode .modal-body p,
    body.dark-mode .modal-title,
    body.dark-mode .vb-account-content h5 {
        color: #ffffff !important;
    }

    /* Links: keep color but make visible */
    body.dark-mode a {
        color: #ffffff !important;
    }

        body.dark-mode a:hover {
            color: #bf2b2c !important;
        }



    /* Footer links stay white */
    body.dark-mode footer ul li a:hover {
        color: #bf2b2c !important;
    }

    /* Borders: light grey -> dark grey */
    body.dark-mode .vb-login-content .vb-list-style li p {
        border-bottom-color: #333333 !important;
    }

    body.dark-mode .modal-header {
        border-bottom-color: #333333 !important;
    }

    body.dark-mode .modal-footer {
        border-top-color: #333333 !important;
    }

    body.dark-mode footer {
        border-top-color: #333333 !important;
    }

    body.dark-mode .vb-company-reg {
        border-top-color: #333333 !important;
    }

    body.dark-mode .vb-footer-box:before {
        border-left-color: #333333 !important;
    }

    body.dark-mode .vb-service-box {
        border-color: #333333 !important;
    }

    /* Inputs: white -> black, text white */
    body.dark-mode .vb-login input,
    body.dark-mode .form-control,
    body.dark-mode .form-select {
        background-color: #111111 !important;
        border-color: #444444 !important;
        color: #ffffff !important;
    }

        body.dark-mode .vb-login input::placeholder,
        body.dark-mode .form-control::placeholder {
            color: #888888 !important;
        }

    /* OTP verified/not verified colors stay */
    body.dark-mode #span_mobileverification.notverified {
        color: #ff4444 !important;
    }

    body.dark-mode #span_mobileverification.verified {
        color: #44bb77 !important;
    }

/* =========================================================
   HIGH CONTRAST MODE
   ========================================================= */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

    body.high-contrast #nav_header {
        background-color: #000 !important;
/*        border-bottom: 2px solid #ffffff !important;*/
    }

    body.high-contrast .vb-login {
        background: #000 !important;
        border: 2px solid #ffffff !important;
        box-shadow: none !important;
    }

    body.high-contrast h1, body.high-contrast h2, body.high-contrast h3,
    body.high-contrast h4, body.high-contrast h5, body.high-contrast h6 {
        color: #ffffff !important;
    }

    body.high-contrast p, body.high-contrast li, body.high-contrast label {
        color: #fff !important;
    }

    body.high-contrast .vb-login input, body.high-contrast .form-control {
        background: #000 !important;
        border: 2px solid #ffffff !important;
        color: #fff !important;
    }

    body.high-contrast .btn-primary, body.high-contrast .get-ac-btn {
        background: #ffffff !important;
        color: #000 !important;
    }

    body.high-contrast footer, body.high-contrast .vb-c_care-package_container,
    body.high-contrast #vb-faq, body.high-contrast .vb-service-box {
        background: #000 !important;
    }

        body.high-contrast footer ul li a, body.high-contrast a {
            color: #ffffff !important;
        }

/* =========================================================
   FONT SIZE CLASSES
   ========================================================= */
body.font-small {
    font-size: 11px !important;
}

body.font-normal {
    font-size: 13px !important;
}

body.font-large {
    font-size: 16px !important;
}

body.font-small p {
    font-size: 11px !important;
}

body.font-normal p {
    font-size: 13px !important;
}

body.font-large p {
    font-size: 16px !important;
}

body.font-small .vb-login-content h2 {
    font-size: 36px !important;
}

body.font-normal .vb-login-content h2 {
    font-size: 44px !important;
}

body.font-large .vb-login-content h2 {
    font-size: 52px !important;
}
/* =========================================================
   HIGH CONTRAST - Missing background + text fixes
   ========================================================= */

/* Fix invisible text: sections with white backgrounds need black bg */
body.high-contrast .vb-c_care-package_container,
body.high-contrast ul.infoGraphic li,
body.high-contrast ul.infoGraphic li .coverWrap .numberCover,
body.high-contrast #vb-vb-open-an-account,
body.high-contrast #vb-faq,
body.high-contrast .vb-faq-left-box-block,
body.high-contrast .vb-faq-box-content-block,
body.high-contrast .vb-app-showcase-inner,
body.high-contrast .modal-content,
body.high-contrast .vb-c_care-paybill_container,
body.high-contrast #smooth-content,
body.high-contrast .vb-slider-container,
body.high-contrast .api-connect-block {
    background-color: #000 !important;
    background-image: none !important;
}

    /* Force white on ALL text in those sections */
    body.high-contrast ul.infoGraphic li .content h2,
    body.high-contrast ul.infoGraphic li .content p,
    body.high-contrast .vb-app-showcase-content h3,
    body.high-contrast .vb-app-showcase-content h3 span,
    body.high-contrast .vb-app-showcase-content p,
    body.high-contrast .vb-app-showcase-content ul li,
    body.high-contrast .vb-faq-box-content li,
    body.high-contrast .vb-faq-box-content ul li,
    body.high-contrast .modal-body p,
    body.high-contrast .modal-title,
    body.high-contrast .vb-account-content h5,
    body.high-contrast .vb-login-content h2,
    body.high-contrast .vb-login-content h2 small,
    body.high-contrast .vb-login-content .vb-list-style li p,
    body.high-contrast .vb-notifi {
        color: #ffffff !important;
    }

    /* Broad catch-all for any remaining hidden text */
    body.high-contrast .vb-c_care-package_container *,
    body.high-contrast #vb-vb-open-an-account *,
    body.high-contrast #vb-faq *,
    body.high-contrast .vb-app-showcase-inner * {
        color: #ffffff !important;
    }

/* Keep SVG icons unaffected */
body.high-contrast svg * {
    color: unset;
}

/* Modal borders */
body.high-contrast .modal-header {
    border-bottom-color: #ffffff !important;
}

body.high-contrast .modal-footer {
    border-top-color: #ffffff !important;
}


/* =========================================================
   MOBILE ACCESSIBILITY - phones/tablets only
   ========================================================= */
/*#vb-mobile-trigger {
    display: none;
}

#vb-mobile-panel {
    display: none;
}

@media (max-width: 768px) {*/

    /* Hide the desktop bar on mobile */
    /*#vb-accessibility-bar {
        display: none !important;
    }*/

    /* 3-line hamburger trigger */
    /*#vb-mobile-trigger {
        display: flex !important;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999999;
        width: 40px;
        height: 40px;
        background: #ffffff;
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px;
    }

        #vb-mobile-trigger span {
            display: block;
            width: 20px;
            height: 2px;
            background: #000;
            border-radius: 2px;
        }

    body.dark-mode #vb-mobile-trigger,
    body.high-contrast #vb-mobile-trigger {
        background: #111;
    }

        body.dark-mode #vb-mobile-trigger span,
        body.high-contrast #vb-mobile-trigger span {
            background: #fff;
        }*/

    /* Slide-down panel */
    /*#vb-mobile-panel {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999998;
        background: #fff;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.18);
        padding: 54px 18px 20px;
        transform: translateY(-110%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        #vb-mobile-panel.vb-panel-open {
            transform: translateY(0);
        }

    body.dark-mode #vb-mobile-panel,
    body.high-contrast #vb-mobile-panel {
        background: #111;
        border-bottom: 1px solid #333;
    }*/

    /* Close button */
    /*#vb-panel-close {
        position: absolute;
        top: 12px;
        right: 14px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #000;
        line-height: 1;
        padding: 2px 6px;
    }

    body.dark-mode #vb-panel-close,
    body.high-contrast #vb-panel-close {
        color: #fff;
    }*/

    /* Panel title */
    /*.vb-panel-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #888;
        margin-bottom: 12px;
    }

    body.dark-mode .vb-panel-title,
    body.high-contrast .vb-panel-title {
        color: #aaa;
    }*/

    /* Rows */
    /*.vb-panel-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 0;
        border-bottom: 1px solid #eee;
    }

    body.dark-mode .vb-panel-row,
    body.high-contrast .vb-panel-row {
        border-bottom-color: #333;
    }

    .vb-panel-row:last-of-type {
        border-bottom: none;
    }

    .vb-panel-label {
        font-size: 14px;
        font-weight: 600;
        color: #222;
    }

    body.dark-mode .vb-panel-label,
    body.high-contrast .vb-panel-label {
        color: #eee;
    }*/

    /* Font buttons */
    /*.vb-font-controls {
        display: flex;
        gap: 6px;
    }

        .vb-font-controls button {
            width: 36px;
            height: 36px;
            border: 1.5px solid #ddd;
            background: #f4f4f4;
            border-radius: 6px;
            font-weight: 700;
            cursor: pointer;
            color: #222;
        }

    body.dark-mode .vb-font-controls button,
    body.high-contrast .vb-font-controls button {
        background: #222;
        border-color: #444;
        color: #fff;
    }*/

    /* Contrast toggle */
    /*.vb-panel-btn {
        padding: 7px 16px;
        border: 1.5px solid #ddd;
        background: #f4f4f4;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        color: #222;
    }

    body.high-contrast .vb-panel-btn {
        background: #bf2b2c !important;
        color: #fff !important;
        border-color: #bf2b2c !important;
    }

    body.dark-mode .vb-panel-btn {
        background: #222;
        border-color: #444;
        color: #fff;
    }*/

    /* Reset button */
    /*#vb-panel-reset {
        display: block;
        width: 100%;
        margin-top: 14px;
        padding: 11px;
        background: #f0f0f0;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #333;
        cursor: pointer;
    }

    body.dark-mode #vb-panel-reset,
    body.high-contrast #vb-panel-reset {
        background: #222;
        color: #eee;
    }
}*/


/* =========================================================
   MOBILE ACCESSIBILITY - phones/tablets only
   ========================================================= */
#vb-mobile-trigger {
    display: none;
}

#vb-mobile-panel {
    display: none;
}

@media (max-width: 768px) {

    #vb-accessibility-bar {
        display: none !important;
    }

    /* Hamburger trigger button */
    #vb-mobile-trigger {
        display: flex !important;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 9999999;
        width: 36px;
        height: 36px;
        background: linear-gradient(180deg, #f8f8f8 0%, #e0e0e0 50%, #d0d0d0 100%);
        border: 1.5px solid #a0a0a0;
        border-radius: 8px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(0,0,0,0.1) inset, 0 2px 4px rgba(0,0,0,0.15);
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 7px;
    }

        #vb-mobile-trigger span {
            display: block;
            width: 18px;
            height: 2px;
            background: #333;
            border-radius: 2px;
        }

    body.dark-mode #vb-mobile-trigger,
    body.high-contrast #vb-mobile-trigger {
        background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 50%, #1e1e1e 100%);
        border-color: #555555;
        box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.4) inset, 0 2px 4px rgba(0,0,0,0.4);
    }

        body.dark-mode #vb-mobile-trigger span,
        body.high-contrast #vb-mobile-trigger span {
            background: #eeeeee;
        }

    /* Slide-down panel */
    #vb-mobile-panel {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999998;
        background: #f4f4f4;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.18);
        padding: 52px 16px 18px;
        transform: translateY(-110%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        #vb-mobile-panel.vb-panel-open {
            transform: translateY(0);
        }

    body.dark-mode #vb-mobile-panel,
    body.high-contrast #vb-mobile-panel {
        background: #1a1a1a;
        border-bottom: 1px solid #333;
    }

    /* Close button */
    #vb-panel-close {
        position: absolute;
        top: 10px;
        right: 12px;
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        color: #444;
        line-height: 1;
        padding: 2px 6px;
        box-shadow: none;
    }

    body.dark-mode #vb-panel-close,
    body.high-contrast #vb-panel-close {
        color: #ccc;
    }

    /* Panel title */
    .vb-panel-title {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #888;
        margin-bottom: 14px;
    }

    body.dark-mode .vb-panel-title,
    body.high-contrast .vb-panel-title {
        color: #777;
    }

    /* -----------------------------------------------
       Metallic pill groups inside mobile panel
    ----------------------------------------------- */
    .vb-mobile-metallic-group {
        display: flex;
        align-items: center;
        border: 1.5px solid #a0a0a0;
        border-radius: 999px;
        overflow: hidden;
        background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 50%, #d8d8d8 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(0,0,0,0.1) inset, 0 2px 4px rgba(0,0,0,0.12);
        width: 100%;
    }

    body.dark-mode .vb-mobile-metallic-group,
    body.high-contrast .vb-mobile-metallic-group {
        background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 50%, #1e1e1e 100%);
        border-color: #555555;
        box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.4) inset, 0 2px 4px rgba(0,0,0,0.4);
    }

    .vb-mob-btn {
        flex: 1;
        border: none;
        background: transparent;
        color: #222222;
        font-size: 11px;
        font-weight: 700;
        padding: 8px 6px;
        cursor: pointer;
        text-align: center;
        letter-spacing: 0.3px;
        border-radius: 0;
        box-shadow: none;
        text-shadow: 0 1px 0 rgba(255,255,255,0.6);
        line-height: 1.4;
        white-space: nowrap;
    }

    .vb-mob-btn-divider {
        border-right: 1px solid #a0a0a0 !important;
    }

    body.dark-mode .vb-mob-btn,
    body.high-contrast .vb-mob-btn {
        color: #eeeeee;
        text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    }

    body.dark-mode .vb-mob-btn-divider,
    body.high-contrast .vb-mob-btn-divider {
        border-right-color: #555555 !important;
    }

    .vb-mob-btn:hover {
        background: rgba(0,0,0,0.07) !important;
    }

    body.dark-mode .vb-mob-btn:hover,
    body.high-contrast .vb-mob-btn:hover {
        background: rgba(255,255,255,0.07) !important;
    }
}

/* =========================================================
   DARK MODE - Inner pages (BasicInfo, forms, cards)
   ========================================================= */

body.dark-mode .row-layout,
body.dark-mode .profileDetails,
body.dark-mode .personal-details {
    background-color: #111111 !important;
    background: #111111 !important;
    box-shadow: 0 4px 20px rgba(255,255,255,0.05) !important;
}

body.dark-mode .vb-client-container,
body.dark-mode .vb-signup-dashboard,
body.dark-mode .sub-main {
    background-color: #000000 !important;
    background: #000000 !important;
}

body.dark-mode .row-layout h1, body.dark-mode .row-layout h2,
body.dark-mode .row-layout h3, body.dark-mode .row-layout h4,
body.dark-mode .row-layout h5, body.dark-mode .row-layout h6,
body.dark-mode .row-layout p, body.dark-mode .row-layout label,
body.dark-mode .row-layout .form-label, body.dark-mode .row-layout span,
body.dark-mode .profileDetails label, body.dark-mode .profileDetails .form-label,
body.dark-mode .profileDetails span, body.dark-mode .profileDetails p {
    color: #ffffff !important;
}

body.dark-mode .row-layout .form-control,
body.dark-mode .row-layout .form-select,
body.dark-mode .row-layout input,
body.dark-mode .row-layout select,
body.dark-mode .row-layout textarea,
body.dark-mode .profileDetails .form-control,
body.dark-mode .profileDetails .form-select,
body.dark-mode .profileDetails input,
body.dark-mode .profileDetails select,
body.dark-mode .profileDetails textarea,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode select.form-select,
body.dark-mode select.form-control,
body.dark-mode input.form-control,
body.dark-mode textarea.form-control {
    background-color: #222222 !important;
    background: #222222 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

    body.dark-mode .row-layout select option,
    body.dark-mode .profileDetails select option,
    body.dark-mode select.form-select option,
    body.dark-mode select.form-control option {
        background-color: #222222 !important;
        color: #ffffff !important;
    }

    body.dark-mode .row-layout input::placeholder,
    body.dark-mode .row-layout textarea::placeholder,
    body.dark-mode .profileDetails input::placeholder,
    body.dark-mode .profileDetails textarea::placeholder,
    body.dark-mode .form-control::placeholder {
        color: #888888 !important;
    }

body.dark-mode .row-layout hr,
body.dark-mode .profileDetails hr {
    background-color: #444444 !important;
    opacity: 0.5 !important;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
    background-color: #2a2a2a !important;
    color: #aaaaaa !important;
}

body.dark-mode .vb-l-input-group label,
body.dark-mode .form-label,
body.dark-mode .form-check label {
    color: #ffffff !important;
}


/* =========================================================
   DARK MODE - BasicInfo form card fix
   ========================================================= */

/* The white card container wrapping the form */
body.dark-mode .vb-dashboard-wrap,
body.dark-mode .personal-details,
body.dark-mode .row.row-layout.personal-details,
body.dark-mode .content,
body.dark-mode .col-4.mx-auto,
body.dark-mode .wrapper.sub-main,
body.dark-mode section#vb-signup-dashboard {
    background-color: #111111 !important;
    background: #111111 !important;
}

/* The outer page section */
body.dark-mode #vb-signup-dashboard,
body.dark-mode .vb-section.vb-signup-dashboard {
    background-color: #000000 !important;
}

/* All text inside the form card */
body.dark-mode .personal-details *,
body.dark-mode .vb-dashboard-wrap * {
    color: #ffffff !important;
}

/* Inputs and selects inside the form */
body.dark-mode .personal-details .form-control,
body.dark-mode .personal-details .form-select,
body.dark-mode .personal-details input,
body.dark-mode .personal-details select,
body.dark-mode .personal-details textarea,
body.dark-mode .vb-dashboard-wrap .form-control,
body.dark-mode .vb-dashboard-wrap .form-select,
body.dark-mode .vb-dashboard-wrap input,
body.dark-mode .vb-dashboard-wrap select,
body.dark-mode .vb-dashboard-wrap textarea {
    background-color: #222222 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

    body.dark-mode .personal-details select option,
    body.dark-mode .vb-dashboard-wrap select option {
        background-color: #222222 !important;
        color: #ffffff !important;
    }

/* HR divider */
body.dark-mode .personal-details hr,
body.dark-mode .vb-dashboard-wrap hr {
    background-color: #444444 !important;
}

/* =========================================================
   HIGH CONTRAST - Inner pages / Form card fix
   ========================================================= */

body.high-contrast .vb-dashboard-wrap,
body.high-contrast .personal-details,
body.high-contrast .row.row-layout.personal-details,
body.high-contrast .content,
body.high-contrast .col-4.mx-auto,
body.high-contrast .wrapper.sub-main,
body.high-contrast section#vb-signup-dashboard,
body.high-contrast #vb-signup-dashboard,
body.high-contrast .vb-section.vb-signup-dashboard,
body.high-contrast .row-layout,
body.high-contrast .profileDetails,
body.high-contrast .sub-main,
body.high-contrast .vb-signup-dashboard {
    background-color: #000000 !important;
    background: #000000 !important;
    box-shadow: none !important;
}

    body.high-contrast .personal-details *,
    body.high-contrast .vb-dashboard-wrap *,
    body.high-contrast .row-layout *,
    body.high-contrast .profileDetails * {
        color: #ffffff !important;
    }

    body.high-contrast .personal-details .form-control,
    body.high-contrast .personal-details .form-select,
    body.high-contrast .personal-details input,
    body.high-contrast .personal-details select,
    body.high-contrast .personal-details textarea,
    body.high-contrast .vb-dashboard-wrap .form-control,
    body.high-contrast .vb-dashboard-wrap .form-select,
    body.high-contrast .vb-dashboard-wrap input,
    body.high-contrast .vb-dashboard-wrap select,
    body.high-contrast .vb-dashboard-wrap textarea,
    body.high-contrast .form-control,
    body.high-contrast .form-select,
    body.high-contrast input.form-control,
    body.high-contrast select.form-select {
        background-color: #000000 !important;
        background: #000000 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }

        body.high-contrast .personal-details select option,
        body.high-contrast .vb-dashboard-wrap select option,
        body.high-contrast select option {
            background-color: #000000 !important;
            color: #ffffff !important;
        }

/* Keep Continue button same as light theme in high contrast */
body.high-contrast .btn-primary,
body.high-contrast .get-ac-btn.btn-primary,
body.high-contrast #btnSubmit {
    background: #bf2b2c !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 9px -4px rgb(59 113 202 / 30%), 0 4px 18px 0 rgb(59 113 202 / 20%) !important;
}

/* =========================================================
   Enhanced outer card box shadow
   ========================================================= */
.profileDetails,
.row-layout {
    margin-top: 20px;
    border-radius: 16px !important;
    box-shadow: 0 0 0 1px rgba(99, 120, 210, 0.25), 0 4px 6px rgba(88, 121, 215, 0.25), 0 8px 24px rgba(76, 85, 151, 0.35), 0 20px 48px rgba(76, 85, 151, 0.25), 0 0 60px rgba(99, 120, 210, 0.15) !important;
    border: 1px solid rgba(99, 120, 210, 0.35) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

    .profileDetails:hover,
    .row-layout:hover {
        box-shadow: 0 0 0 1px rgba(99, 120, 210, 0.4), 0 8px 16px rgba(88, 121, 215, 0.35), 0 16px 40px rgba(76, 85, 151, 0.40), 0 32px 64px rgba(76, 85, 151, 0.30), 0 0 80px rgba(99, 120, 210, 0.25) !important;
        border-color: rgba(99, 120, 210, 0.5) !important;
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

/* =========================================================
   DARK MODE - Placeholder blue fix (must be at bottom)
   ========================================================= */

body.dark-mode input.form-control::-webkit-input-placeholder,
body.dark-mode textarea.form-control::-webkit-input-placeholder,
body.dark-mode .personal-details input::-webkit-input-placeholder,
body.dark-mode .vb-dashboard-wrap input::-webkit-input-placeholder,
body.dark-mode .row-layout input::-webkit-input-placeholder {
    color: #9e9e9e !important;
    opacity: 1 !important;
}

body.dark-mode input.form-control::-moz-placeholder,
body.dark-mode textarea.form-control::-moz-placeholder,
body.dark-mode .personal-details input::-moz-placeholder,
body.dark-mode .vb-dashboard-wrap input::-moz-placeholder,
body.dark-mode .row-layout input::-moz-placeholder {
    color: #9e9e9e !important;
    opacity: 1 !important;
}

body.dark-mode input.form-control:-ms-input-placeholder,
body.dark-mode textarea.form-control:-ms-input-placeholder,
body.dark-mode .personal-details input:-ms-input-placeholder,
body.dark-mode .vb-dashboard-wrap input:-ms-input-placeholder,
body.dark-mode .row-layout input:-ms-input-placeholder {
    color: #9e9e9e !important;
}


/* =========================================================
   DARK MODE - Bank address text fix
   ========================================================= */

body.dark-mode address,
body.dark-mode #bankAddress,
body.dark-mode .bank-details address,
body.dark-mode .bank-details #bankAddress {
    color: #ffffff !important;
    background-color: #222222 !important;
    border-color: #444444 !important;
}

/* HIGH CONTRAST - Bank address text fix */
body.high-contrast address,
body.high-contrast #bankAddress,
body.high-contrast .bank-details address,
body.high-contrast .bank-details #bankAddress {
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
}

/* =========================================================
   DARK MODE - FilePond Upload Area
   ========================================================= */

body.dark-mode .filepond--hopper,
body.dark-mode .filepond--root,
body.dark-mode .filepond--drop-label {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

    body.dark-mode .filepond--drop-label label {
        color: #ffffff !important;
    }

    body.dark-mode .filepond--drop-label .filepond--label-action {
        color: #bf2b2c !important;
        text-decoration-color: #bf2b2c !important;
    }

body.dark-mode .filepond--panel-root {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
}

body.dark-mode .filepond--item-panel {
    background-color: #222222 !important;
}

body.dark-mode .filepond--drip-blob {
    background-color: #444444 !important;
}

/* HIGH CONTRAST - FilePond Upload Area */
/*body.high-contrast .filepond--hopper,
body.high-contrast .filepond--root,
body.high-contrast .filepond--drop-label {
    background: #4c4e53 !important;
    color: #ffffff !important;
}*/

/* HIGH CONTRAST - FilePond Upload Area */
body.high-contrast .filepond--hopper,
body.high-contrast .filepond--root,
body.high-contrast .filepond--drop-label {
    background: #4c4e53 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}

    body.high-contrast .filepond--drop-label label {
        color: #ffffff !important;
    }

    body.high-contrast .filepond--drop-label .filepond--label-action {
        color: #bf2b2c !important;
    }

body.high-contrast .filepond--panel-root {
    background-color: #4c4e53 !important;
    border: 2px solid #4c4e53 !important;
}

/* =========================================================
   DARK MODE - Checkbox Fix for consent/form-check
   ========================================================= */

body.dark-mode .form-check-input[type="checkbox"].segment,
body.dark-mode #checkConscent,
body.dark-mode .form-check .form-check-input[type="checkbox"] {
    background-color: #3a3a3a !important;
    border: 1px solid #666666 !important;
    background-image: none !important;
    width: 16px !important;
    height: 16px !important;
}

    body.dark-mode .form-check-input[type="checkbox"].segment:checked,
    body.dark-mode #checkConscent:checked,
    body.dark-mode .form-check .form-check-input[type="checkbox"]:checked {
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    }

body.dark-mode .form-check-label {
    color: #ffffff !important;
}

/* HIGH CONTRAST same fix */
body.high-contrast .form-check-input[type="checkbox"].segment,
body.high-contrast #checkConscent,
body.high-contrast .form-check .form-check-input[type="checkbox"] {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    background-image: none !important;
}

    body.high-contrast .form-check-input[type="checkbox"].segment:checked,
    body.high-contrast #checkConscent:checked,
    body.high-contrast .form-check .form-check-input[type="checkbox"]:checked {
        background-color: #0d6efd !important;
        border: 2px solid #ffffff !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    }

body.high-contrast .form-check-label {
    color: #ffffff !important;
}


/* =========================================================
   DARK MODE - Bootstrap Switch Nuclear Fix
   ========================================================= */

body.dark-mode .form-check.form-switch .form-check-input,
body.dark-mode .form-switch .form-check-input,
body.dark-mode input.form-check-input[type="checkbox"][role="switch"],
body.dark-mode input.form-check-input[type="checkbox"] {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
    background-color: #3a3a3a !important;
    border-color: #666666 !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 1em !important;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

    body.dark-mode .form-check.form-switch .form-check-input:checked,
    body.dark-mode .form-switch .form-check-input:checked,
    body.dark-mode input.form-check-input[type="checkbox"]:checked {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
        background-position: right center !important;
        background-size: 1em !important;
    }

/* Block the global input override from hitting checkboxes */
body.dark-mode .form-check-input[type="checkbox"],
body.dark-mode .row-layout input[type="checkbox"],
body.dark-mode .personal-details input[type="checkbox"],
body.dark-mode .vb-dashboard-wrap input[type="checkbox"] {
    background-color: #3a3a3a !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-size: 1em !important;
}

    body.dark-mode .form-check-input[type="checkbox"]:checked,
    body.dark-mode .row-layout input[type="checkbox"]:checked,
    body.dark-mode .personal-details input[type="checkbox"]:checked,
    body.dark-mode .vb-dashboard-wrap input[type="checkbox"]:checked {
        background-color: #0d6efd !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
        background-size: 1em !important;
    }

/* =========================================================
   HIGH CONTRAST - Bootstrap Switch Nuclear Fix  
   ========================================================= */

body.high-contrast .form-check-input[type="checkbox"],
body.high-contrast .row-layout input[type="checkbox"],
body.high-contrast .vb-dashboard-wrap input[type="checkbox"] {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-size: 1em !important;
}

    body.high-contrast .form-check-input[type="checkbox"]:checked,
    body.high-contrast .row-layout input[type="checkbox"]:checked,
    body.high-contrast .vb-dashboard-wrap input[type="checkbox"]:checked {
        background-color: #0d6efd !important;
        border: 2px solid #ffffff !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C1.0%29'/%3e%3c/svg%3e") !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
        background-size: 1em !important;
    }


/* =========================================================
   DARK MODE - Signature Canvas Fix
   Keep canvas white so drawn signature is visible
   ========================================================= */

body.dark-mode #signature-pad,
body.dark-mode canvas.signature-pad {
    background-color: #ffffff !important;
    border: 1px solid #444444 !important;
}

body.high-contrast #signature-pad,
body.high-contrast canvas.signature-pad {
    background-color: #ffffff !important;
    border: 2px solid #ffffff !important;
}



/* =========================================================
   Accessibility Bar - Metallic Style
   ========================================================= */

#vb-accessibility-bar {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

#vb-group-1,
#vb-group-2 {
    border: 1.5px solid #a0a0a0 !important;
    background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 50%, #d8d8d8 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(0,0,0,0.1) inset, 0 2px 4px rgba(0,0,0,0.12);
}

    #vb-group-1 button,
    #vb-group-2 button {
        background: transparent !important;
        color: #222222 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.6);
        font-weight: 700 !important;
        border-right-color: #a0a0a0 !important;
    }

        #vb-group-1 button:hover,
        #vb-group-2 button:hover {
            background: rgba(0,0,0,0.07) !important;
            color: #000000 !important;
        }

/* =========================================================
   DARK MODE - Metallic dark style
   ========================================================= */

body.dark-mode #vb-group-1,
body.dark-mode #vb-group-2,
body.high-contrast #vb-group-1,
body.high-contrast #vb-group-2 {
    border: 1.5px solid #555555 !important;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 50%, #1e1e1e 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.4) inset, 0 2px 4px rgba(0,0,0,0.4);
}

    body.dark-mode #vb-group-1 button,
    body.dark-mode #vb-group-2 button,
    body.high-contrast #vb-group-1 button,
    body.high-contrast #vb-group-2 button {
        background: transparent !important;
        color: #eeeeee !important;
        text-shadow: 0 1px 0 rgba(0,0,0,0.5);
        border-right-color: #555555 !important;
    }

        body.dark-mode #vb-group-1 button:hover,
        body.dark-mode #vb-group-2 button:hover,
        body.high-contrast #vb-group-1 button:hover,
        body.high-contrast #vb-group-2 button:hover {
            background: rgba(255,255,255,0.07) !important;
            color: #ffffff !important;
        }

/* =========================================================
   DARK MODE - Modal Fix
   ========================================================= */

body.dark-mode .modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important;
}

body.dark-mode .modal-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #444444 !important;
    display: flex !important;
    visibility: visible !important;
}

body.dark-mode .modal-title {
    color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
}

body.dark-mode .modal-body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

    body.dark-mode .modal-body p {
        color: #ffffff !important;
    }

body.dark-mode .modal-footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid #444444 !important;
}

body.dark-mode .modal-backdrop {
    background-color: #000000 !important;
    opacity: 0.7 !important;
}

/* =========================================================
   HIGH CONTRAST - Modal Fix
   ========================================================= */

body.high-contrast .modal-content {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

body.high-contrast .modal-header {
    background-color: #000000 !important;
    border-bottom: 2px solid #ffffff !important;
    display: flex !important;
    visibility: visible !important;
}

body.high-contrast .modal-title {
    color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
}

body.high-contrast .modal-body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    body.high-contrast .modal-body p {
        color: #ffffff !important;
    }

body.high-contrast .modal-footer {
    background-color: #000000 !important;
    border-top: 2px solid #ffffff !important;
}

body.high-contrast .modal-backdrop {
    background-color: #000000 !important;
    opacity: 0.85 !important;
}

body.dark-mode .btn-close,
body.high-contrast .btn-close {
    filter: invert(1) !important;
    opacity: 0.8 !important;
}

/* =========================================================
   MODAL - Push below fixed navbar
   ========================================================= */
#myModal .modal-dialog {
    margin-top: 80px;
}


body.dark-mode .vb-you-can,
body.high-contrast .vb-you-can {
    color: #ffffff !important;
}

/* =========================================================
   ACCESSIBILITY BAR - Override style.css global button rule
   ========================================================= */
 
#vb-accessibility-bar #vb-group-1 button,
#vb-accessibility-bar #vb-group-2 button {
    padding: 0 7px !important;
    height: 22px !important;
    line-height: 22px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}