/* ==========================================================================
   Accessibility Widget Panel Styles (Redesigned)
   ========================================================================== */
.accessibility-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    font-family: var(--font-body);
}

.accessibility-toggle-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-teal);
    color: var(--color-navy);
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.accessibility-toggle-btn:hover {
    transform: scale(1.08);
    background-color: var(--color-teal-hover);
}

.widget-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background-color: var(--color-navy);
    color: var(--color-white);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
    z-index: 10000;
}

.widget-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: var(--color-navy);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.accessibility-toggle-btn:hover ~ .widget-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.accessibility-toggle-btn[aria-expanded="true"] ~ .widget-tooltip {
    display: none;
}

.accessibility-toggle-btn svg {
    width: 28px;
    height: 28px;
}

/* Redesigned Floating Panel (Dark Theme) */
.accessibility-panel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 380px;
    max-height: 80vh;
    background: #090d16; /* Solid black/dark navy background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: #FFFFFF;
}

.accessibility-panel.active {
    display: flex;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header styling */
.panel-header {
    padding: 20px 24px 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-title-area {
    display: flex;
    flex-direction: column;
}

.panel-header h3 {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-header .gear-icon {
    font-size: 1.15rem;
    color: #A855F7; /* Purple theme */
}

.header-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.08em;
    margin-top: 4px;
    text-transform: uppercase;
}

.close-panel-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.close-panel-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.close-panel-btn svg {
    width: 14px;
    height: 14px;
}

/* Panel Body & Scroll Container */
.panel-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    background: #030d17; /* Solid black body background */
}

.panel-section {
    margin-bottom: 24px;
}

.panel-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.section-emoji {
    font-size: 0.95rem;
}

/* Widget Lists (replacing Grid) */
.widget-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Redesigned Card Button Row */
.widget-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #081b29; /* Dark background matching the page theme */
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    outline: none;
    font-family: inherit;
}

.widget-btn:hover {
    border-color: rgba(0, 209, 193, 0.4);
    background: #0c2235;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-left {
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.btn-icon {
    width: 20px;
    height: 20px;
    color: #94A3B8;
    transition: color 0.2s ease;
    stroke-width: 2.2px;
}

.btn-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: #E2E8F0;
    transition: color 0.2s ease;
}

.toggle-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
    color: #94A3B8;
    pointer-events: none;
}

/* Active State Styles (Toggled ON) */
.widget-btn[aria-pressed="true"] {
    border-color: #10B981; /* Green border */
    background: rgba(16, 185, 129, 0.08); /* Dark green tint background */
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
}

.widget-btn[aria-pressed="true"]:hover {
    border-color: #059669;
    background: rgba(16, 185, 129, 0.08);
}

.widget-btn[aria-pressed="true"] .btn-icon {
    color: #10B981;
}

.widget-btn[aria-pressed="true"] .btn-text {
    color: #10B981; /* Green text */
}

.widget-btn[aria-pressed="true"] .toggle-pill {
    background: #10B981;
    color: #FFFFFF;
}

/* Widget Card (for non-clickable rows with interactive inputs like sliders) */
.widget-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #081b29;
    padding: 14px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.widget-card:hover {
    border-color: rgba(0, 209, 193, 0.4);
    background: #0c2235;
}

/* Slider elements styling */
.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-container input[type="range"] {
    width: 90px;
    accent-color: #10B981;
    cursor: pointer;
}

.slider-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94A3B8;
    min-width: 42px;
    text-align: right;
}

/* Active slider styles */
.widget-card.active-slider {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.08);
}

.widget-card.active-slider .btn-icon {
    color: #10B981;
}

.widget-card.active-slider .btn-text {
    color: #10B981;
}

.widget-card.active-slider .slider-value {
    color: #10B981;
}

/* Footer styling */
.panel-footer {
    padding: 16px 24px;
    background: #090d16;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reset-link-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748B;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    transition: color 0.2s;
    padding: 4px 0;
}

.reset-link-btn:hover {
    color: #0F172A;
}

.reset-icon {
    width: 14px;
    height: 14px;
    color: inherit;
}

.compliance-text {
    font-size: 0.72rem;
    color: #94A3B8;
    font-weight: 500;
}

/* ==========================================================================
   State Overrides & Overlay Elements
   ========================================================================== */

/* 1. ADHD Reading Ruler */
#accessibility-reading-ruler {
    position: fixed;
    left: 0;
    right: 0;
    height: 24px;
    background-color: rgba(16, 185, 129, 0.16); /* Emerald tint */
    border-top: 2px solid #10B981;
    border-bottom: 2px solid #10B981;
    pointer-events: none;
    z-index: 2147483647; /* Highest z-index */
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

/* 2. Focus Spotlight */
#accessibility-focus-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2147483646; /* Just below ruler */
    background: radial-gradient(circle 130px at var(--mouse-x, 0) var(--mouse-y, 0), transparent 100%, rgba(7, 24, 39, 0.76) 100%);
    mix-blend-mode: multiply;
    transition: opacity 0.2s ease;
}

/* 3. Contrast high theme override */
html.accessibility-contrast-high {
    background-color: #000000 !important;
    color: #FFFF00 !important;
}

html.accessibility-contrast-high * {
    background-color: transparent !important;
    color: #FFFF00 !important;
    border-color: #FFFF00 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Force solid black background on the accessibility window elements, not transparent */
html.accessibility-contrast-high .accessibility-panel,
html.accessibility-contrast-high .panel-header,
html.accessibility-contrast-high .panel-body,
html.accessibility-contrast-high .panel-footer {
    background-color: #000000 !important;
    border-color: #FFFF00 !important;
}

html.accessibility-contrast-high .widget-tooltip,
html.accessibility-contrast-high .widget-tooltip::after {
    background-color: #000000 !important;
    color: #FFFF00 !important;
    border: 2px solid #FFFF00 !important;
    box-shadow: none !important;
}

html.accessibility-contrast-high a, 
html.accessibility-contrast-high button, 
html.accessibility-contrast-high .widget-card,
html.accessibility-contrast-high .widget-btn[aria-pressed="true"] {
    background-color: #FFFF00 !important;
    color: #000000 !important;
    border: 2px solid #FFFF00 !important;
    font-weight: 900 !important;
}

/* Ensure inner text, icons, and elements inside black-on-yellow buttons/links are readable */
html.accessibility-contrast-high a *, 
html.accessibility-contrast-high button *,
html.accessibility-contrast-high .widget-card *,
html.accessibility-contrast-high .widget-btn * {
    color: #000000 !important;
}

html.accessibility-contrast-high a:hover, 
html.accessibility-contrast-high button:hover,
html.accessibility-contrast-high .widget-card:hover,
html.accessibility-contrast-high .widget-btn:hover,
html.accessibility-contrast-high .widget-btn[aria-pressed="true"]:hover {
    background-color: #000000 !important;
    color: #FFFF00 !important;
    border-color: #FFFF00 !important;
}

/* Ensure inner text, icons, and elements inside hovered yellow-on-black buttons/links match */
html.accessibility-contrast-high a:hover *, 
html.accessibility-contrast-high button:hover *,
html.accessibility-contrast-high .widget-card:hover *,
html.accessibility-contrast-high .widget-btn:hover *,
html.accessibility-contrast-high .widget-btn[aria-pressed="true"]:hover * {
    color: #FFFF00 !important;
}

/* 4. Grayscale/Monochrome Filter */
html.accessibility-monochrome {
    filter: grayscale(100%) !important;
}

/* 5. Underline Links */
html.accessibility-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* 6. Dyslexia Layout Font Settings */
html.accessibility-dyslexic-font {
    font-family: 'Comic Sans MS', 'OpenDyslexic', 'Segoe UI', cursive, sans-serif !important;
}

html.accessibility-dyslexic-font h1, 
html.accessibility-dyslexic-font h2, 
html.accessibility-dyslexic-font h3, 
html.accessibility-dyslexic-font h4, 
html.accessibility-dyslexic-font h5, 
html.accessibility-dyslexic-font h6 {
    font-family: 'Comic Sans MS', 'OpenDyslexic', 'Segoe UI', cursive, sans-serif !important;
}

/* 7. Large Mouse Pointer */
html.accessibility-large-cursor, 
html.accessibility-large-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0,0 L0,24 L6,18 L13,32 L17,30 L10,16 L18,16 Z' fill='%23081b29' stroke='%230ad8ad' stroke-width='2'/%3E%3C/svg%3E"), auto !important;
}

/* 8. Larger Text Scale */
html.accessibility-larger-text {
    --font-scale: 1.35;
}

/* 9. Highlight Headings */
html.accessibility-highlight-headings h1,
html.accessibility-highlight-headings h2,
html.accessibility-highlight-headings h3,
html.accessibility-highlight-headings h4,
html.accessibility-highlight-headings h5,
html.accessibility-highlight-headings h6 {
    outline: 2px dashed #0ad8ad !important;
    outline-offset: 4px;
    background-color: rgba(0, 209, 193, 0.08) !important;
}

/* 10. Readable Font */
html.accessibility-readable-font,
html.accessibility-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* 11. Pause Animations & Motion */
html.accessibility-paused-animations *,
html.accessibility-paused-animations *::before,
html.accessibility-paused-animations *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* 12. Highlight Links */
html.accessibility-highlight-links a {
    text-decoration: underline !important;
    background-color: rgba(0, 209, 193, 0.2) !important;
    outline: 2px dashed #0ad8ad !important;
    outline-offset: 2px;
}

/* 13. Increase Text Spacing */
html.accessibility-spacing-increase {
    --letter-spacing: 0.08em !important;
}

/* 14. Line Height + Scaling */
html.accessibility-lineheight-increase {
    --line-height-scale: 2.0 !important;
}

/* 15. Text to Speech Speaking Highlight */
.accessibility-speaking-highlight {
    outline: 2px solid #10B981 !important;
    outline-offset: 4px;
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-radius: 4px;
    transition: background-color 0.2s ease, outline 0.2s ease;
}

html.accessibility-contrast-high .accessibility-speaking-highlight {
    outline: 3px solid #FFFF00 !important;
    background-color: #000000 !important;
    color: #FFFF00 !important;
}