/* ---------- Accessibility Toolbar (Desktop) ---------- */
#accessibilityToolbar {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0;
    background: #ffffff;
    border: 1.5px solid #cccccc;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    font-family: Arial, sans-serif;
    overflow: hidden;
}

    #accessibilityToolbar button {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 12px !important;
        font-weight: 700;
        color: #222222;
        padding: 7px 12px;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        transition: background 0.15s ease, color 0.15s ease;
        letter-spacing: 0.4px;
        white-space: nowrap;
        /* Prevent font-step classes from resizing toolbar buttons */
        flex-shrink: 0;
    }

        #accessibilityToolbar button:hover {
            background: #f0f0f0;
        }

        #accessibilityToolbar button:focus,
        #accessibilityToolbar button:active,
        #accessibilityToolbar button:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }

        #accessibilityToolbar button:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

/* HIGH CONTRAST button — active state */
#toggleDarkThemeBtn.active {
    background: #222222;
    color: #ffffff;
}

/* RESET button */
#btnReset {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.toolbar-divider {
    width: 1px;
    height: 100%;
    min-height: 34px;
    background: #cccccc;
    flex-shrink: 0;
}

/* A- A A+ — fixed visual sizes, never change with font-step classes */
#btnFontDecrease {
    font-size: 10px !important;
    padding: 7px 9px !important;
    line-height: 1 !important;
}

#btnFontNormal {
    font-size: 14px !important;
    font-weight: 900 !important;
    padding: 7px 9px !important;
    line-height: 1 !important;
}

#btnFontIncrease {
    font-size: 20px !important;
    padding: 4px 9px !important;
    line-height: 1 !important;
}

/* ---------- Mobile Hamburger Button ---------- */
#accessibilityHamburger {
    display: none;
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 10000;
    background: #ffffff;
    border: 1.5px solid #cccccc;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    flex-direction: column;
    gap: 5px;
    padding: 0;
}

    #accessibilityHamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: #111111;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

/* ---------- Mobile Dropdown Panel ---------- */
#accessibilityMobilePanel {
    display: none;
    position: fixed;
    top: 62px;
    right: 16px;
    z-index: 9998;
    background: #ffffff;
    border: 1.5px solid #cccccc;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-family: Arial, sans-serif;
    min-width: 220px;
    flex-direction: column;
    gap: 8px;
}

    #accessibilityMobilePanel.open {
        display: flex;
    }

.mobile-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mobile-panel-label {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 0.3px;
}

.mobile-panel-divider {
    height: 1px;
    background: #eeeeee;
    margin: 2px 0;
}

.mobile-panel-font-btns {
    display: flex;
    gap: 0;
    border: 1px solid #dddddd;
    border-radius: 6px;
    overflow: hidden;
}

    .mobile-panel-font-btns button {
        background: #f5f5f5;
        border: none;
        border-right: 1px solid #dddddd;
        cursor: pointer;
        font-weight: 700;
        color: #111111;
        padding: 5px 10px;
        transition: background 0.2s ease;
    }

        .mobile-panel-font-btns button:last-child {
            border-right: none;
        }

        .mobile-panel-font-btns button:hover {
            background: #e0e0e0;
        }

        .mobile-panel-font-btns button:focus,
        .mobile-panel-font-btns button:active,
        .mobile-panel-font-btns button:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }

        .mobile-panel-font-btns button:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

.mobile-panel-theme-btn {
    background: #f5f5f5;
    border: 1px solid #dddddd;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 11px;
    color: #111111;
    padding: 5px 10px;
    transition: background 0.2s ease, color 0.2s ease;
    letter-spacing: 0.3px;
}

    .mobile-panel-theme-btn:hover {
        background: #e0e0e0;
    }

    .mobile-panel-theme-btn:focus,
    .mobile-panel-theme-btn:active,
    .mobile-panel-theme-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .mobile-panel-theme-btn.active {
        background: #222222;
        color: #ffffff;
        border-color: #222222;
    }

.mobile-panel-reset-btn {
    background: #f5f5f5;
    border: 1px solid #dddddd;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #111111;
    padding: 7px;
    margin-top: 2px;
    letter-spacing: 0.4px;
    transition: background 0.2s ease;
}

    .mobile-panel-reset-btn:hover {
        background: #e0e0e0;
    }

    .mobile-panel-reset-btn:focus,
    .mobile-panel-reset-btn:active,
    .mobile-panel-reset-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

#mobileBtnFontDecrease {
    font-size: 10px !important;
    line-height: 1 !important;
}

#mobileBtnFontNormal {
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

#mobileBtnFontIncrease {
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 3px 10px !important;
}

/* ---- CRITICAL: Prevent any font-step body class from resizing toolbar/panel buttons ---- */
body.font-x-small #accessibilityToolbar button,
body.font-small #accessibilityToolbar button,
body.font-normal #accessibilityToolbar button,
body.font-large #accessibilityToolbar button,
body.font-x-large #accessibilityToolbar button {
    font-size: 12px !important;
}

body.font-x-small #btnFontDecrease,
body.font-small #btnFontDecrease,
body.font-normal #btnFontDecrease,
body.font-large #btnFontDecrease,
body.font-x-large #btnFontDecrease {
    font-size: 10px !important;
}

body.font-x-small #btnFontNormal,
body.font-small #btnFontNormal,
body.font-normal #btnFontNormal,
body.font-large #btnFontNormal,
body.font-x-large #btnFontNormal {
    font-size: 14px !important;
}

body.font-x-small #btnFontIncrease,
body.font-small #btnFontIncrease,
body.font-normal #btnFontIncrease,
body.font-large #btnFontIncrease,
body.font-x-large #btnFontIncrease {
    font-size: 20px !important;
}

body.font-x-small #accessibilityMobilePanel button,
body.font-small #accessibilityMobilePanel button,
body.font-normal #accessibilityMobilePanel button,
body.font-large #accessibilityMobilePanel button,
body.font-x-large #accessibilityMobilePanel button {
    font-size: 12px !important;
}

body.font-x-small #mobileBtnFontDecrease,
body.font-small #mobileBtnFontDecrease,
body.font-normal #mobileBtnFontDecrease,
body.font-large #mobileBtnFontDecrease,
body.font-x-large #mobileBtnFontDecrease {
    font-size: 10px !important;
}

body.font-x-small #mobileBtnFontNormal,
body.font-small #mobileBtnFontNormal,
body.font-normal #mobileBtnFontNormal,
body.font-large #mobileBtnFontNormal,
body.font-x-large #mobileBtnFontNormal {
    font-size: 14px !important;
}

body.font-x-small #mobileBtnFontIncrease,
body.font-small #mobileBtnFontIncrease,
body.font-normal #mobileBtnFontIncrease,
body.font-large #mobileBtnFontIncrease,
body.font-x-large #mobileBtnFontIncrease {
    font-size: 20px !important;
}

/* ---------- Font Size Steps (5 levels) ---------- */

/* Step 0 — x-small */
body.font-x-small {
    font-size: 11px !important;
}

    body.font-x-small p, body.font-x-small label,
    body.font-x-small input, body.font-x-small button,
    body.font-x-small a, body.font-x-small span {
        font-size: 11px !important;
    }

    body.font-x-small h3 {
        font-size: 17px !important;
    }

/* Step 1 — small */
body.font-small {
    font-size: 13px !important;
}

    body.font-small p, body.font-small label,
    body.font-small input, body.font-small button,
    body.font-small a, body.font-small span {
        font-size: 13px !important;
    }

    body.font-small h3 {
        font-size: 19px !important;
    }

/* Step 2 — normal (default) */
body.font-normal {
    font-size: 16px !important;
}

    body.font-normal p, body.font-normal label,
    body.font-normal input, body.font-normal button,
    body.font-normal a, body.font-normal span {
        font-size: 16px !important;
    }

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

/* Step 3 — large */
body.font-large {
    font-size: 19px !important;
}

    body.font-large p, body.font-large label,
    body.font-large input, body.font-large button,
    body.font-large a, body.font-large span {
        font-size: 19px !important;
    }

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

/* Step 4 — x-large */
body.font-x-large {
    font-size: 22px !important;
}

    body.font-x-large p, body.font-x-large label,
    body.font-x-large input, body.font-x-large button,
    body.font-x-large a, body.font-x-large span {
        font-size: 22px !important;
    }

    body.font-x-large h3 {
        font-size: 30px !important;
    }

/* ---------- Prevent input font jump on focus/click ---------- */
body.font-x-small input:focus, body.font-x-small input:active {
    font-size: 11px !important;
}

body.font-small input:focus, body.font-small input:active {
    font-size: 13px !important;
}

body.font-normal input:focus, body.font-normal input:active {
    font-size: 16px !important;
}

body.font-large input:focus, body.font-large input:active {
    font-size: 19px !important;
}

body.font-x-large input:focus, body.font-x-large input:active {
    font-size: 22px !important;
}

/* ---------- Responsive: Switch to hamburger on mobile ---------- */
@media only screen and (max-width: 767px) {
    #accessibilityToolbar {
        display: none !important;
    }

    #accessibilityHamburger {
        display: flex !important;
    }
}

/* ---------- HIGH CONTRAST MODE ---------- */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    body.high-contrast #accessibilityToolbar {
        background: #1a1a1a;
        border-color: #555555;
    }

        body.high-contrast #accessibilityToolbar button {
            color: #e0e0e0;
        }

            body.high-contrast #accessibilityToolbar button:hover {
                background: #2a2a2a;
            }

    body.high-contrast #toggleDarkThemeBtn.active {
        background: #ffffff;
        color: #000000;
    }

    body.high-contrast .toolbar-divider {
        background: #555555;
    }

    /* Mobile hamburger high contrast */
    body.high-contrast #accessibilityHamburger {
        background: #000000;
        border-color: #ffffff;
    }

        body.high-contrast #accessibilityHamburger span {
            background: #ffffff;
        }

    body.high-contrast #accessibilityMobilePanel {
        background: #0d0d0d;
        border-color: #444444;
    }

    body.high-contrast .mobile-panel-label {
        color: #e0e0e0;
    }

    body.high-contrast .mobile-panel-divider {
        background: #333333;
    }

    body.high-contrast .mobile-panel-font-btns button,
    body.high-contrast .mobile-panel-theme-btn,
    body.high-contrast .mobile-panel-reset-btn {
        background: #1a1a1a;
        border-color: #555555;
        color: #ffffff;
    }

        body.high-contrast .mobile-panel-font-btns button:hover,
        body.high-contrast .mobile-panel-theme-btn:hover,
        body.high-contrast .mobile-panel-reset-btn:hover {
            background: #2a2a2a;
        }

        body.high-contrast .mobile-panel-theme-btn.active {
            background: #ffffff;
            color: #000000;
            border-color: #ffffff;
        }

    /* Login section background */
    body.high-contrast .login-area,
    body.high-contrast section.login-area {
        background-color: #000000 !important;
    }

    body.high-contrast .login-content {
        background-color: #000000 !important;
    }

    /* Login form box */
    body.high-contrast .login-form {
        background-color: #0d0d0d !important;
        border: 1px solid #444 !important;
        border-radius: 12px;
        padding: 30px;
    }

    /* Headings */
    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;
        font-weight: 700 !important;
    }

    /* Paragraphs and labels */
    body.high-contrast p,
    body.high-contrast label,
    body.high-contrast span {
        color: #e0e0e0 !important;
    }

    /* Input fields */
    body.high-contrast .form-control,
    body.high-contrast input[type="text"],
    body.high-contrast input[type="password"],
    body.high-contrast input[type="email"] {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border: 1.5px solid #666666 !important;
        border-radius: 8px !important;
    }

        body.high-contrast .form-control::placeholder {
            color: #aaaaaa !important;
        }

        body.high-contrast .form-control:focus {
            border-color: #ffffff !important;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.2) !important;
            outline: none !important;
            background-color: #1a1a1a !important;
        }

    /* Login Button */
    body.high-contrast .btn-primary,
    body.high-contrast button[type="submit"],
    body.high-contrast #btnLogin,
    body.high-contrast #btnOTP {
        background: linear-gradient(135deg, #4a0080, #6a00b8) !important;
        border: none !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        border-radius: 8px !important;
        padding: 12px !important;
        width: 100% !important;
        transition: background 0.3s ease !important;
    }

        body.high-contrast .btn-primary:hover,
        body.high-contrast #btnLogin:hover,
        body.high-contrast #btnOTP:hover {
            background: linear-gradient(135deg, #5c00a0, #7b00d4) !important;
        }

    /* Forgot Password Link */
    body.high-contrast .forgot-password a,
    body.high-contrast a {
        color: #9b6edb !important;
        text-decoration: underline !important;
    }

        body.high-contrast a:hover {
            color: #c49ef5 !important;
        }

    /* Footer */
    body.high-contrast footer {
        background-color: #000000 !important;
        color: #aaaaaa !important;
        border-top: 1px solid #333 !important;
    }

    /* Row/container backgrounds */
    body.high-contrast .row,
    body.high-contrast .col-lg-6,
    body.high-contrast .col-md-6,
    body.high-contrast .d-table,
    body.high-contrast .d-table-cell {
        background-color: #000000 !important;
    }