/* Base widget styles - Full-page panel sliding from right */
#a11y-enhancer-widget {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 500px !important;
    height: 100% !important;
    background: inherit !important;
    border-left: 1px solid #fff !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15) !important;
    border-radius: 0 !important;
    transition: transform 0.3s ease !important;
    transform: translateX(100%) !important;
    overflow-y: auto !important;
    font-family: inherit !important;
    color: inherit !important;
    z-index: 10001 !important;
}

/* Panel open state */
#a11y-enhancer-widget.open {
    transform: translateX(0) !important;
}

/* Toggle button - always visible, fixed, like ccpa-frontend-button */
#a11y-enhancer-toggle {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background: #645edc !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 10002 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}

#a11y-enhancer-toggle:hover {
    background: #645edc !important;
    transform: scale(1.1) !important;
}

#a11y-enhancer-toggle i {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: 28px !important;
    height: 28px !important;
    text-align: center !important;
    font-size: 28px !important;
}

/* Hide toggle when widget is open */
#a11y-enhancer-widget.open ~ #a11y-enhancer-toggle {
    visibility: hidden !important;
    display: none !important;
}

/* Toggle positioning */
#a11y-enhancer-toggle.bottom-right {
    right: 20px !important;
    left: auto !important;
}
#a11y-enhancer-toggle.bottom-left {
    left: 20px !important;
    right: auto !important;
}

/* Header styles - Mimics ccpa-frontend-header */
#a11y-enhancer-widget .a11y-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: #645edc !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Header logo */
#a11y-enhancer-widget .a11y-header-logo {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* Actions wrapper */
#a11y-enhancer-widget .a11y-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Language selector - Flag only, no label */
#a11y-enhancer-widget .a11y-language-selector {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 4px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

#a11y-enhancer-widget .a11y-language-selector:hover {
    background: #f5f5f5 !important;
}

#a11y-enhancer-widget .a11y-language-selector img.a11y-flag {
    width: 16px !important;
    height: 12px !important;
    margin-right: 4px !important;
}

#a11y-enhancer-widget .a11y-language-selector select {
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
    color: #003C43 !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* Action buttons */
#a11y-enhancer-widget .a11y-action {
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

#a11y-enhancer-widget .a11y-action:hover {
    background: #f5f5f5 !important;
}

#a11y-enhancer-widget .a11y-action i {
    font-size: 16px !important;
}

/* Rest of the original styles */
#a11y-enhancer-widget .a11y-options {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 15px !important;
    background: inherit !important;
}

/* Option buttons */
#a11y-enhancer-widget .a11y-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-family: inherit !important;
    text-transform: capitalize !important;
    background: linear-gradient(135deg, #ffffff, #f1f1f1) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    padding: 12px !important;
    text-align: center !important;
    width: 145px !important;
    height: 120px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
}

#a11y-enhancer-widget .a11y-option:hover,
#a11y-enhancer-widget .a11y-option:active {
    border: 1px solid #6952f4 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15) !important;
}

#a11y-enhancer-widget .a11y-option.active {
    background: linear-gradient(135deg, #7b75e6, #5b54e6) !important;
    border: 1px solid #6952f4 !important;
    box-shadow: 0 4px 8px rgba(0,115,170,0.3) !important;
}

#a11y-enhancer-widget .a11y-option .fas {
    font-size: 26px !important;
    margin-bottom: 8px !important;
}

#a11y-enhancer-widget .a11y-option span {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Indicators for multi-step buttons */
#a11y-enhancer-widget .a11y-indicators {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-top: 4px !important;
}

#a11y-enhancer-widget .a11y-indicators span {
    width: 8px !important;
    height: 8px !important;
    background: #ccc !important;
    border-radius: 50% !important;
    transition: background 0.2s ease !important;
}

#a11y-enhancer-widget .a11y-indicators span.active {
    background: #645edc !important;
}

/* Sections */
#a11y-enhancer-widget .a11y-section {
    margin-top: 20px !important;
}

#a11y-enhancer-widget .a11y-section h3 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    color: inherit !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

/* Footer styles */
#a11y-enhancer-widget .a11y-footer {
    align-items: center !important;
    background-color: #6952f4 !important;
    border-bottom-color: rgb(60, 71, 112) !important;
    border-bottom-style: none !important;
    border-bottom-width: 0px !important;
    border-left-color: rgb(60, 71, 112) !important;
    border-left-style: none !important;
    border-left-width: 0px !important;
    border-right-color: rgb(60, 71, 112) !important;
    border-right-style: none !important;
    border-right-width: 0px !important;
    border-top-color: rgb(60, 71, 112) !important;
    border-top-style: none !important;
    border-top-width: 0px !important;
    bottom: 0px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    display: flex !important;
    font-family: Roboto, sans-serif !important;
    font-size: 12px !important;
    height: 40px !important;
    justify-content: space-between !important;
    left: 0px !important;
    line-height: 26px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    outline-color: rgb(60, 71, 112) !important;
    outline-style: none !important;
    outline-width: 0px !important;
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 10px !important;
    position: sticky !important;
    right: 0px !important;
    scroll-behavior: smooth !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    visibility: visible !important;
    width: 100% !important;
    z-index: 10 !important;
}

#a11y-enhancer-widget .a11y-footer a {
    color: #fff !important;
    text-decoration: none !important;
}

#a11y-enhancer-widget .a11y-footer a:hover {
    text-decoration: underline !important;
}

#a11y-enhancer-widget .a11y-footer svg {
    vertical-align: middle !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px !important;
}

#a11y-enhancer-widget .a11y-footer .a11y-icon {
    font-size: 14px !important;
    margin-left: 5px !important;
}

#a11y-enhancer-widget #color-blind-filters {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Accessibility modes */
html.a11y-font-size-1, body.a11y-font-size-1,
html.a11y-font-size-1 *, body.a11y-font-size-1 * {
    font-size: 1.2rem !important;
}

html.a11y-font-size-2, body.a11y-font-size-2,
html.a11y-font-size-2 *, body.a11y-font-size-2 * {
    font-size: 1.4rem !important;
}

html.a11y-font-size-3, body.a11y-font-size-3,
html.a11y-font-size-3 *, body.a11y-font-size-3 * {
    font-size: 1.6rem !important;
}

html.a11y-high-contrast-1, body.a11y-high-contrast-1 {
    filter: contrast(1.5) brightness(0.9) !important;
    background: #000 !important;
    color: #fff !important;
}
html.a11y-high-contrast-1 a, body.a11y-high-contrast-1 a {
    color: #ff0 !important;
}

html.a11y-high-contrast-2, body.a11y-high-contrast-2 {
    filter: contrast(1.7) brightness(0.85) !important;
    background: #000 !important;
    color: #fff !important;
}
html.a11y-high-contrast-2 a, body.a11y-high-contrast-2 a {
    color: #ff0 !important;
}

html.a11y-high-contrast-3, body.a11y-high-contrast-3 {
    filter: contrast(2.0) brightness(0.8) !important;
    background: #000 !important;
    color: #fff !important;
}
html.a11y-high-contrast-3 a, body.a11y-high-contrast-3 a {
    color: #ff0 !important;
}

html.a11y-grayscale-1, body.a11y-grayscale-1 {
    filter: grayscale(33%) !important;
}

html.a11y-grayscale-2, body.a11y-grayscale-2 {
    filter: grayscale(66%) !important;
}

html.a11y-grayscale-3, body.a11y-grayscale-3 {
    filter: grayscale(100%) !important;
}

html.a11y-underline-links, body.a11y-underline-links {
    text-decoration: underline !important;
}

html.a11y-highlight-links a, body.a11y-highlight-links a {
    background-color: yellow !important;
    color: black !important;
}

html.a11y-letter-spacing-1, body.a11y-letter-spacing-1,
html.a11y-letter-spacing-1 *, body.a11y-letter-spacing-1 * {
    letter-spacing: 0.05em !important;
}

html.a11y-letter-spacing-2, body.a11y-letter-spacing-2,
html.a11y-letter-spacing-2 *, body.a11y-letter-spacing-2 * {
    letter-spacing: 0.1em !important;
}

html.a11y-letter-spacing-3, body.a11y-letter-spacing-3,
html.a11y-letter-spacing-3 *, body.a11y-letter-spacing-3 * {
    letter-spacing: 0.15em !important;
}

html.a11y-simplify-layout, body.a11y-simplify-layout {
    background: #fff !important;
}
html.a11y-simplify-layout img, html.a11y-simplify-layout video {
    display: none !important;
}

html.a11y-profile-adhd-friendly,
html.a11y-profile-adhd-friendly * {
    font-family: 'Open Dyslexic', sans-serif !important;
    line-height: 1.7 !important;
}

html.a11y-profile-deuteranomaly {
    filter: url(#deuteranomaly) !important;
}
html.a11y-profile-protanomaly {
    filter: url(#protanomaly) !important;
}
html.a11y-profile-tritanomaly {
    filter: url(#tritanomaly) !important;
}
html.a11y-profile-blindness {
    filter: grayscale(100%) contrast(2) !important;
    font-size: 1.5rem !important;
}
html.a11y-profile-epilepsy-safe {
    filter: brightness(0.9) !important;
    animation: none !important;
    transition: none !important;
}
html.a11y-profile-dyslexia-friendly,
html.a11y-profile-dyslexia-friendly * {
    font-family: 'Comic Sans MS', sans-serif !important;
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
}

html.a11y-reduce-motion {
    animation: none !important;
    transition: none !important;
}

html.a11y-pause-animations * {
    animation-play-state: paused !important;
}

html.a11y-large-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M0 0 L10 10 L2 10 L2 2 L0 0 Z" fill="black"/></svg>') 2 2, auto !important;
}

html.a11y-visible-focus a:focus,
html.a11y-visible-focus button:focus,
html.a11y-visible-focus input:focus,
html.a11y-visible-focus select:focus,
html.a11y-visible-focus textarea:focus {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* Text-to-speech styles */
#a11y-speech-indicator {
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
    background: #0073aa !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    z-index: 10003 !important;
}

/* Responsive design - Ensure visibility on all screens */
@media (max-width: 768px) {
    #a11y-enhancer-widget {
        max-width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    #a11y-enhancer-toggle {
        display: block !important;
        visibility: visible !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 10002 !important;
    }
    #a11y-enhancer-widget .a11y-options {
        justify-content: center !important;
    }
    #a11y-enhancer-widget .a11y-option {
        width: 115px !important;
        height: 105px !important;
        font-size: 12px !important;
    }
    #a11y-enhancer-widget .a11y-option .fas {
        font-size: 22px !important;
    }
    #a11y-enhancer-widget .a11y-option span {
        font-size: 12px !important;
    }
    #a11y-enhancer-widget .a11y-section h3 {
        font-size: 14px !important;
    }
    #a11y-enhancer-widget .a11y-header-logo {
        font-size: 16px !important;
    }
    #a11y-enhancer-widget .a11y-language-selector {
        padding: 3px !important;
    }
    #a11y-enhancer-widget .a11y-language-selector img.a11y-flag {
        width: 16px !important;
        height: 12px !important;
    }
    #a11y-enhancer-widget .a11y-action {
        width: 28px !important;
        height: 28px !important;
    }
    #a11y-enhancer-widget .a11y-action i {
        font-size: 14px !important;
    }
}