/* ==========================================================================
   Accessibility Widget Styles - REVISED with Toggles & Grayscale
   ========================================================================== */

/* Base Widget Container
-------------------------------------------------- */
#accessibility-widget {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Or left: 20px; */
    z-index: 999;
}

/* Toggle Button (Opens Widget)
-------------------------------------------------- */
#accessibility-toggle {
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#accessibility-toggle:hover,
#accessibility-toggle:focus {
    background-color: #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    outline: 2px solid dodgerblue;
    outline-offset: 2px;
}
#accessibility-toggle img {
    width: 28px;
    height: 28px;
    display: block;
}

/* Menu Panel
-------------------------------------------------- */
#accessibility-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 20rem; /* Slightly wider for toggles */
    background: #f9f9f9;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    border-radius: 8px;
    z-index: 999;
    color: #333333;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Menu Header & Close Button
-------------------------------------------------- */
#accessibility-menu h3 {
    margin-top: 0;
    margin-bottom: 20px; /* More space */
    font-size: 1.2em;
    text-align: center;
    color: inherit;
}
#close-accessibility-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
    color: #aaa;
    transition: color 0.3s ease;
}
#close-accessibility-menu:hover,
#close-accessibility-menu:focus {
    color: #333;
    outline: none; /* Simple color change is enough */
}

/* Menu Options Wrapper
-------------------------------------------------- */
.accessibility-option {
    margin-bottom: 18px; /* Increased spacing */
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
    display: flex;          /* Use flexbox for toggle alignment */
    align-items: center;    /* Vertically center items */
    justify-content: space-between; /* Space label and toggle */
}
.accessibility-option:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Specific styling for Font Size Fieldset */
.accessibility-option.font-size-option fieldset {
    border: 1px solid #ccc;
    padding: 10px 15px 5px 15px; /* Adjusted padding */
    margin: 0;
    border-radius: 4px;
    transition: border-color 0.3s ease;
    width: 100%; /* Take full width */
}
.accessibility-option.font-size-option legend {
    padding: 0 8px;
    font-weight: bold;
    font-size: 0.95em;
    color: inherit;
}
.accessibility-option.font-size-option label {
    display: inline-block; /* Arrange radios side-by-side */
    margin-right: 15px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.95em;
    color: inherit;
    transition: color 0.3s ease;
}
.accessibility-option.font-size-option label:last-child {
    margin-right: 0;
}
.accessibility-option.font-size-option input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
}
.accessibility-option.font-size-option input[type="radio"]:focus {
    outline: 2px solid dodgerblue;
    outline-offset: 1px;
}


/* Reset Button Specific Styles (Full Width)
-------------------------------------------------- */
.accessibility-option.reset-option {
    padding-bottom: 0; /* No padding needed below button */
}
#reset-accessibility {
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    border-radius: 4px;
    text-align: center;
    font-size: 0.95em;
    font-weight: bold;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
#reset-accessibility:hover,
#reset-accessibility:focus {
    background-color: #f1b0b7;
    border-color: #ee9ca7;
    outline: 2px solid #dc3545;
     outline-offset: 1px;
}

/* ==========================================================================
   Custom Animated Toggle Switch Styles
   ========================================================================== */
.toggle-label-text {
    margin-right: 10px; /* Space between text and switch */
    font-size: 0.95em;
    color: inherit;
}

.toggle-switch {
    display: inline-block;
    position: relative;
    width: 50px;  /* Width of the track */
    height: 26px; /* Height of the track */
    cursor: pointer;
    vertical-align: middle; /* Align with label text */
    user-select: none; /* Prevent text selection */
}

/* Hide default checkbox */
.toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Track */
.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 13px; /* height / 2 */
    transition: background-color 0.3s ease;
}

/* Thumb */
.toggle-thumb {
    position: absolute;
    content: '';
    height: 20px; /* Slightly smaller than track */
    width: 20px;
    left: 3px;  /* Initial position */
    bottom: 3px; /* Initial position */
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}



/* Checked State */
.toggle-checkbox:checked + .toggle-track {
    background-color: #2196F3; /* Active color - Blue */
}

.toggle-checkbox:checked ~ .toggle-thumb {
    transform: translateX(24px); /* width - thumb_width - (2 * left_offset) = 50 - 20 - (2*3) = 24 */
    background-color: #f1f1f1; /* Thumb color when active */
}


/* Focus State (Applied to track for visibility) */
.toggle-checkbox:focus + .toggle-track {
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.5); /* Focus ring */
}


/* ==========================================================================
   Dark Mode Styles FOR WIDGET ONLY
   ========================================================================== */

html.dark-mode #accessibility-toggle { /* ... (same as before) ... */
    background-color: #444; color: #eee; border-color: #666; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
html.dark-mode #accessibility-toggle:hover,
html.dark-mode #accessibility-toggle:focus { background-color: #555; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); outline-color: lightblue; }

html.dark-mode #accessibility-menu { /* ... (same as before) ... */
    background: #2a2a2a; color: #e0e0e0; border-color: #555; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html.dark-mode #close-accessibility-menu { color: #888; }
html.dark-mode #close-accessibility-menu:hover,
html.dark-mode #close-accessibility-menu:focus { color: #eee; }
html.dark-mode .accessibility-option { border-bottom-color: #444; }
html.dark-mode .accessibility-option.font-size-option fieldset { border-color: #555; }
html.dark-mode .accessibility-option.font-size-option input[type="radio"] { accent-color: #66b3ff; }
html.dark-mode .accessibility-option.font-size-option input[type="radio"]:focus { outline-color: lightblue; }
html.dark-mode #reset-accessibility { background-color: #a04048; border-color: #803038; color: #f8d7da; }
html.dark-mode #reset-accessibility:hover,
html.dark-mode #reset-accessibility:focus { background-color: #803038; border-color: #702830; outline-color: #f5c6cb; }

/* Dark mode for Toggle Switches */
html.dark-mode .toggle-label-text { color: inherit; }
html.dark-mode .toggle-track { background-color: #555; } /* Darker inactive track */
html.dark-mode .toggle-thumb { background-color: #bbb; } /* Slightly lighter thumb */
html.dark-mode .toggle-thumb .icon-checked::before { color: #333; } /* Dark check on light active thumb */
html.dark-mode .toggle-thumb .icon-unchecked::before { color: #333; } /* Dark minus */

html.dark-mode .toggle-checkbox:checked + .toggle-track { background-color: #66b3ff; } /* Active color - Light Blue */
html.dark-mode .toggle-checkbox:checked ~ .toggle-thumb { background-color: #e0e0e0; } /* Light thumb when active */

html.dark-mode .toggle-checkbox:focus + .toggle-track { box-shadow: 0 0 0 2px rgba(102, 179, 255, 0.6); } /* Focus ring color */


/* ==========================================================================
   Accessibility Feature Implementation Styles
   ========================================================================== */

/* Grayscale Mode
-------------------------------------------------- */
html.grayscale-mode {
    filter: grayscale(100%);
    /* Optional: Might need to force background for html/body if filter causes issues */
    /* background-color: var(--page-background); */
}

/* Disable Images
-------------------------------------------------- */
body.images-disabled img:not(.no-hide),
body.images-disabled svg:not(.no-hide),
body.images-disabled video[poster]:not(.no-hide) /* Select video poster only if video itself doesn't have no-hide, might need adjustment */
{
    display: none !important;
}
/* Consider background images */
/* body.images-disabled .element-with-bg { background-image: none !important; } */

/* Disable Animations
-------------------------------------------------- */
html.animations-disabled *,
body.animations-disabled * {
    animation: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}