@charset "UTF-8";
/* Moved from inline <style> in _PopDownPartial.cshtml -> W3C-valid + CSP-clean. Behaviour preserved. */
    /* Premium Accessibility UI Styles */
    .popdown-area {
        position: fixed;
        top: 60px;
        right: 0px;
        width: 380px !important;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        z-index: 9999999;
        display: none;
        overflow: hidden;
        font-family: 'Inter', sans-serif;
        border: 1px solid rgba(0,0,0,0.05);
        
        /* Fixed height strategy for scrolling buttons */
        max-height: calc(100vh - 80px);
        display: none; /* Controlled by .show */
        flex-direction: column;
    }

    .popdown-area.show {
        display: flex !important;
        animation: slideIn 0.3s ease-out;
    }

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

    .accessibility-popup {
        padding: 10px;
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* Important for flex child scrolling */
        scrollbar-width: thin;
        scrollbar-color: #ccc #f1f1f1;
    }

    /* width for Webkit */
    .accessibility-popup::-webkit-scrollbar {
        width: 6px;
    }
    .accessibility-popup::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .accessibility-popup::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    .accessibility-title {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
        color: #1a1a1a;
    }

    .accessibility-section {
        margin-bottom: 5px;
    }

    .accessibility-section-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 7px;
        color: #005a8c; /* Original Govt Blue feel */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .accessibility-section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #eee;
    }

    .accessibility-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .accessibility-card {
        background: #fdfdfd;
        border: 1px solid #ccc;
        border-radius: 12px;
        padding: 10px 6px; /* Slightly increased padding */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        text-decoration: none !important;
        color: #444 !important;
        min-height: 100px; /* Increased from 90px to prevent overlap */
        text-align: center;
        /* Reset default button styling so converted <button> elements look identical to old <a> */
        font: inherit;
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
    }

    .accessibility-card:hover {
        background: #fff;
        border-color: #005a8c;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .accessibility-card.active {
            background-color: var(--nav-bg) !important;
        color: #fff !important;
        border-color: #005a8c;
    }

    .accessibility-card .icon {
        font-size: 20px; /* Reduced from 24px to give more room for text */
        margin-bottom: 6px; /* Reduced from 8px */
        transition: transform 0.25s ease;
    }

    .accessibility-card .label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.1; /* Tighter line height for labels */
        word-wrap: break-word; /* Ensure wrapping */
        width: 100%;
    }

    .status-check {
        position: absolute;
        top: 6px;
        right: 6px;
        background: #14873f;
        color: #fff;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        font-size: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .accessibility-card.active .status-check {
        opacity: 1;
        transform: scale(1);
    }

    .accessibility-card.active .icon, 
    .accessibility-card.active .label {
        color: #fff !important;
    }

    .modal-footer {
        padding: 12px 20px;
        background: #fafafa;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin: 0; /* Removed margin to stick to bottom better */
        flex-shrink: 0; /* Don't compress footer */
    }

    .btn-premium {
        padding: 6px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #005a8c;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-reset-ui {
        background: transparent;
        color: #005a8c;
    }

    .btn-reset-ui:hover {
        background: #e7f1ff;
    }

    .btn-close-ui {
        background: #005a8c;
        color: #fff;
    }

    .btn-close-ui:hover {
        background: #00446a;
    }

    /* Functional Classes */
    body.highlight-text h1, body.highlight-text h2, body.highlight-text h3, body.highlight-text h4, body.highlight-text h5, body.highlight-text h6,
    body.highlight-text .card-title, body.highlight-text .section-title, body.highlight-text .title, body.highlight-text [class*="title"], 
    body.highlight-text .heading, body.highlight-text [class*="heading"],
    body.highlight-text strong, body.highlight-text b { background-color: yellow !important; color: black !important; }
    body.highlight-links a { border: 1px solid red !important; padding: 2px !important; border-radius: 3px !important; }
    body.high-saturation { filter: saturate(200%); }
    body.low-saturation { filter: saturate(50%); }
    body.monochrome { filter: grayscale(100%); }
    body.text-magnifier-active [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; background: #333; color: #fff; padding: 10px; border-radius: 5px; z-index: 10000; font-size: 1.5rem; }

    /* ADHD Reading Mask */
    .adhd-mask {
        position: fixed;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9999990;
        pointer-events: none;
        display: none;
        transition: opacity 0.3s;
    }
    body.adhd-friendly .adhd-mask {
        display: block;
    }
    /* Ensure specific icon click triggers the parent button */
    /* Ensure specific icon click triggers the parent button */
    #popdowntoggle_desktop .fa-universal-access,
    #popdowntoggle_mobile .fa-universal-access {
        pointer-events: none;
    }

    /* Mobile Responsiveness Rules */
    @media (max-width: 480px) {
        .popdown-area {
            width: calc(100% - 20px) !important;
            right: 10px !important;
            left: 10px !important;
            top: 70px;
            max-height: calc(100vh - 90px);
            border-radius: 12px;
        }

        .accessibility-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 columns on very small screens for better readability */
            gap: 8px;
        }

        .accessibility-card {
            min-height: 90px;
            padding: 12px 6px;
        }

        .accessibility-card .icon {
            font-size: 18px;
        }

        .accessibility-card .label {
            font-size: 10px;
        }
    }

    @media (min-width: 481px) and (max-width: 768px) {
        .popdown-area {
            width: 350px !important;
            right: 10px !important;
        }
    }