﻿
h3.ws-accessibility-heading {
    font-size: 18px;
    padding: 8px 0;
}

#wsAccessibilityTrigger:focus {
    outline: 3px solid #155EEF;
    outline-offset: 4px;
    box-shadow: 0 0 0 5px rgba(21, 94, 239, 0.20);
}

#wsAccessibilityTrigger:focus-visible {
    outline: 3px solid #155EEF;
    outline-offset: 4px;
    box-shadow: 0 0 0 5px rgba(21, 94, 239, 0.20);
}
.ws-accessibility-trigger i {
    color: #fff;
}
body.ws-accessible-color  .ws-accessibility-trigger i{color:#000;}
/* Ensure the button remains visible and focusable */


/* =========================================================
   ACCESSIBILITY FLOATING BUTTON
========================================================= */

.ws-accessibility-trigger {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1450f0;
    color: #ffffff;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


    .ws-accessibility-trigger:hover {
        transform: scale(1.05);
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.25);
    }


/* =========================================================
   OVERLAY
========================================================= */

.ws-accessibility-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
}


/* =========================================================
   PANEL
========================================================= */

.ws-accessibility-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 390px;
    max-width: 100%;
    height: 100vh;
    background: #ffffff;
    color: #0f172a;
    z-index: 10000;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.20);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
}


    .ws-accessibility-panel.ws-panel-open {
        transform: translateX(0);
        visibility: visible;
    }


/* =========================================================
   HEADER
========================================================= */

.ws-accessibility-header {
    min-height: 70px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}


    .ws-accessibility-header h2 {
        margin: 0;
        color: #0f172a;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 700;
    }


/* Close */

.ws-accessibility-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}


    .ws-accessibility-close:hover {
        background: #f1f5f9;
    }


/* =========================================================
   BODY
========================================================= */

.ws-accessibility-body {
    padding: 20px;
}


/* =========================================================
   TOP GRID
========================================================= */

.ws-accessibility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}


/* =========================================================
   TILE
========================================================= */

.ws-accessibility-tile {
    min-height: 100px;
    padding: 15px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .ws-accessibility-tile:hover:not(:disabled) {
        background: #f5f7ff;
        border-color: #1450f0;
        transform: translateY(-2px);
    }

    .ws-accessibility-tile.ws-active {
        background: #eef3ff;
        border-color: #1450f0;
    }

    .ws-accessibility-tile:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
    }


/* Icon */

.ws-accessibility-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
/* Label */
.ws-accessibility-label {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

/* Status */
.ws-accessibility-status {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}


/* =========================================================
   TOGGLE LIST
========================================================= */
.ws-accessibility-toggle-list {
    margin-top: 10px;
}

.ws-accessibility-toggle-row {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.ws-toggle-label {
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}


/* =========================================================
   SWITCH
========================================================= */

.ws-switch {
    position: relative;
    width: 50px;
    height: 28px;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}

    /* Actual checkbox */

    .ws-switch input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }


/* Track */

.ws-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: #cbd5e1;
    transition: background 0.2s ease;
}


    /* Circle */

    .ws-switch-track::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        top: 4px;
        left: 4px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        transition: transform 0.2s ease;
    }


/* Checked */

.ws-switch input:checked + .ws-switch-track {
    background: #1450f0;
}


    .ws-switch input:checked + .ws-switch-track::after {
        transform: translateX(22px);
    }


/* =========================================================
   RESET BUTTON
========================================================= */

.ws-accessibility-reset {
    margin-top: 25px;
    padding-bottom: 25px;
}


#wsResetAccessibility {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #dc2626;
    border-radius: 8px;
    background: #ffffff;
    color: #dc2626;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}


    #wsResetAccessibility:hover {
        background: #fef2f2;
    }


    /* =========================================================
   KEYBOARD FOCUS
========================================================= */

    .ws-accessibility-trigger:focus-visible,
    .ws-accessibility-close:focus-visible,
    .ws-accessibility-tile:focus-visible,
    #wsResetAccessibility:focus-visible,
    .ws-switch input:focus-visible + .ws-switch-track {
        outline: 3px solid #f59e0b;
        outline-offset: 3px;
    }


/* =========================================================
   ZOOM
========================================================= */

html.ws-zoom-110 { zoom: 1.10; }
html.ws-zoom-125 { zoom: 1.25; }
html.ws-zoom-150 { zoom: 1.50; }
html.ws-zoom-175 { zoom: 1.75; }
html.ws-zoom-200 { zoom: 2; }

/* =========================================================
   TEXT SPACING
========================================================= */
body.ws-text-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }

/* =========================================================
   LINE HEIGHT
========================================================= */

body.ws-line-height * { line-height: 1.8 !important; }

/* =========================================================
   DYSLEXIA FONT
========================================================= */

body.ws-dyslexia,
body.ws-dyslexia * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   HIGHLIGHT LINKS
========================================================= */
body.ws-highlight-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid currentColor; outline-offset: 2px; }

body.ws-highlight-links .ace-responsive-menu > li a { padding: 0 10px; align-content: center;}
body.ws-highlight-links a.navbar-brand.m-logo-none img {
    padding: 6px 0px 0 0;
}

body.ws-highlight-links .btn-radio-inline,
body.ws-highlight-links .radio-refer.radio-line,
body.ws-highlight-links .radio-refer,
body.ws-highlight-links .radio-mtf {margin-bottom:0px; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid currentColor; outline-offset: 2px; }

body.ws-highlight-links .btn-primary,
body.ws-highlight-links .KYC-box h5 span{text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid rgb(0 0 0); outline-offset: 2px; }



/* =========================================================
   BIG CURSOR
========================================================= */

body.ws-big-cursor,
body.ws-big-cursor * {
    /*cursor: url("../images/big-cursor.svg") 12 12, auto !important;*/
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M7 3 L7 39 L17 29 L24 44 L31 41 L24 26 L40 26 Z' fill='white' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 7 3, auto !important;
}

/* =========================================================
   HIDE IMAGES
========================================================= */

body.ws-hide-images img {
    visibility: hidden !important;
}

/* =========================================================
   INVERT COLORS
========================================================= */

/*body.ws-invert { filter: invert(1); }
body.ws-invert img, body.ws-invert video, body.ws-invert iframe { filter: invert(1); }*/
body.ws-invert > *:not(#wsAccessibilityTrigger) :not(#wsAccessibilityOverlay) :not(#wsAccessibilityPanel) {
    filter: invert(1);
}
body.ws-invert #wsAccessibilityTrigger {
    filter: none !important;
}
body.ws-invert #wsAccessibilityOverlay {
    filter: none !important;
}
body.ws-invert #wsAccessibilityPanel {
    filter: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
}
body.ws-invert #wsAccessibilityPanel * {
    filter: none !important;
}
body.ws-invert #wsAccessibilityTrigger * {
    filter: none !important;
}

/* =========================================================
   ACCESSIBLE COLOR
========================================================= */

body.ws-accessible-color { background: #ffffff !important; color: #000000 !important; }
body.ws-accessible-color a { text-decoration: underline !important; }
body.ws-accessible-color button { border-color: #000000 !important; }

body.ws-accessible-color .login-logo a img,
body.ws-accessible-color .kyc-hedr h5 span img{background: yellow;}

body.ws-accessible-color a,
.ws-accessible-color .ws-accessibility-trigger,
body.ws-accessible-color .btn-primary{ background: yellow; color:#000 !important; }

body.ws-accessible-color  .control--checkbox .control__indicator:after{border-color: #000;}

body.ws-accessible-color  label.control.control--checkbox.ripple span,
body.ws-accessible-color  .btn-radio-inline,
body.ws-accessible-color  .radio-refer.radio-line,
body.ws-accessible-color  .radio-refer,
body.ws-accessible-color  .radio-mtf { background: yellow; }

body.ws-accessible-color  .btn-radio-inline label,
body.ws-accessible-color  .radio-refer.radio-line label,
body.ws-accessible-color  .radio-refer label,
body.ws-accessible-color   {margin-bottom:0px;}


    
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

.ws-accessibility-panel { width: 100%; }
body.ws-highlight-links .ace-responsive-menu > li a { padding: 10px; }
.ws-accessibility-body { padding: 15px; }
.ws-accessibility-grid { gap: 10px; }
.ws-accessibility-tile { min-height: 110px; }
.ws-accessibility-trigger { right: 15px; bottom: 15px; width: 50px; height: 50px; }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ws-accessibility-panel,
    .ws-accessibility-trigger,
    .ws-accessibility-tile,
    .ws-switch-track,
    .ws-switch-track::after {
        transition: none !important;
    }
}

/*=====================================================================================*/


/* ==========================================
   LIGHT / DARK MODE
========================================== */

:root {
    --ws-page-bg: #ffffff;
    --ws-page-text: #281662;
    --ws-card-bg: #ffffff;
    --ws-border: #dddddd;
    --ws-input-bg: #ffffff;
    --ws-input-text: #281662;
}


/* ==========================================
   DARK MODE
========================================== */

body.ws-dark-mode {
    --ws-page-bg: #121212;
    --ws-page-text: #ffffff;
    --ws-card-bg: #1e1e1e;
    --ws-border: #444444;
    --ws-input-bg: #1e1e1e;
    --ws-input-text: #ffffff;
    /* Existing website variables */
    --bg-color: #1e1e1e;
    --box-shadow: rgba(0, 0, 0, 0.60);
    background-color: var(--ws-page-bg) !important;
    color: var(--ws-page-text) !important;
}


    /* Main website */

    /*body.ws-dark-mode #wsPageContent {
    background-color: #121212 !important;
    color: #ffffff !important;
}*/


    /* Headings */

    /*body.ws-dark-mode #wsPageContent h1,
body.ws-dark-mode #wsPageContent h2,
body.ws-dark-mode #wsPageContent h3,
body.ws-dark-mode #wsPageContent h4,
body.ws-dark-mode #wsPageContent h5,
body.ws-dark-mode #wsPageContent h6 {
    color: #ffffff !important;
}*/


    /* Paragraph */

    /*body.ws-dark-mode #wsPageContent p,
body.ws-dark-mode #wsPageContent span,
body.ws-dark-mode #wsPageContent li {
    color: #eeeeee;
}*/

    body.ws-dark-mode .use-link ul li:before,
    body.ws-dark-mode .use-link-policy ul li::before {
        background: #fff;
    }

    body.ws-dark-mode .nav-tabs.anywhere-nav-tabs .nav-link.active {
        background: initial;
    }

    /* Links */

    body.ws-dark-mode .menu,
    body.ws-dark-mode .menu a,
    body.ws-dark-mode .menu span,
    body.ws-dark-mode p, body.ws-dark-mode h4,
    body.ws-dark-mode .feature-box h3,
    body.ws-dark-mode .menu ul li, body.ws-dark-mode ul li,
    body.ws-dark-mode ul li a,
    body.ws-dark-mode h5, body.ws-dark-mode h5 a,
    body.ws-dark-mode h6,
    body.ws-dark-mode .ws-offer-info dl,
    body.ws-dark-mode .ws-offer-info dl dt,
    body.ws-dark-mode .ws-offer-info dl dd,
    body.ws-dark-mode .value-txt,
    body.ws-dark-mode .equity-info p span,
    body.ws-dark-mode .rslider-hdng h3,
    body.ws-dark-mode .calc-result .calc-result-info h3,
    body.ws-dark-mode .calc-boxs label,
    body.ws-dark-mode .kyc-ttl h4 a,
    body.ws-dark-mode .status-info a,
    body.ws-dark-mode .control,
    body.ws-dark-mode .matrix-link a,
    body.ws-dark-mode ol.Tem-num li:before,
    body.ws-dark-mode .mf-dtl-box h3 {
        color: #ffffff !important;
    }

    body.ws-dark-mode .table-bordered td,
    body.ws-dark-mode .table-bordered th,
    body.ws-dark-mode .table-bordered td a,
    body.ws-dark-mode .complaint-exchange ul li:before {
        background-color: #1e1e1e !important;
        color: #ffffff !important;
        border-color: #fff;
    }
    /*body.ws-dark-mode #wsPageContent a {
    color: #66a3ff;
}*/

    body.ws-dark-mode .feature-bg::before {
        background: inherit;
    }
    /* Cards */

    body.ws-dark-mode #wsPageContent .card,
    body.ws-dark-mode #wsPageContent .bg-white,
    body.ws-dark-mode .wmt-anywhere,
    body.ws-dark-mode .bg-slider-one:before,
    body.ws-dark-mode .service-box,
    body.ws-dark-mode .bg-become-partner,
    body.ws-dark-mode .footer-part:before,
    body.ws-dark-mode .bg-clr-rond-t-b,
    body.ws-dark-mode .bg_abt_trading,
    body.ws-dark-mode .bg-iposubscr,
    body.ws-dark-mode .bg-stock-app:before,
    body.ws-dark-mode .list-group-item.active,
    body.ws-dark-mode ul.form-dwnld li::before,
    body.ws-dark-mode .dwn-invester,
    body.ws-dark-mode .card-body,
    body.ws-dark-mode .card .card-header,
    body.ws-dark-mode .form-search-box,
    body.ws-dark-mode .light-bg {
        background-color: #1e1e1e !important;
        color: #ffffff !important;
    }

    /* Form controls */
    body.ws-dark-mode header,
    body.ws-dark-mode #wsPageContent input,
    body.ws-dark-mode #wsPageContent textarea,
    body.ws-dark-mode #wsPageContent select,
    body.ws-dark-mode .filter-dropdown #nav > ul > li > a {
        background-color: #1e1e1e !important;
        color: #ffffff !important;
        border-color: #555555 !important;
    }


/* ===========MODE BUTTONS ========================================== */

.ws-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ws-mode-btn {
    min-height: 75px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    color: #281662;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .ws-mode-btn i {
        font-size: 22px;
    }

    .ws-mode-btn span {
        font-size: 14px;
    }

    .ws-mode-btn[aria-pressed="true"] {
        background: #eef3ff;
        border-color: #1450f0;
        color: #1450f0;
    }

    .ws-mode-btn:focus-visible {
        outline: 3px solid #1450f0;
        outline-offset: 3px;
    }

    #dvAOF, #dvNachMandate{margin-top:4px;}