/* ==========================================================================
   ACCESSIBILITY WIDGET PRO - MAIN STYLESHEET
   Description: Premium Glassmorphism UI & DOM-Safe Global Accessibility Rules
========================================================================== */

/* =========================================
   1. WIDGET UI: VARIABLES & BASE CONFIG
========================================= */
#aw-widget-container {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    
    /* CSS Magic: Auto-generating shades from the primary theme color */
    --aw-bg-tint: color-mix(in srgb, var(--aw-primary) 3%, rgba(255, 255, 255, 0.95));
    --aw-hover-bg: color-mix(in srgb, var(--aw-primary) 8%, white);
    --aw-active-bg: color-mix(in srgb, var(--aw-primary) 12%, white);
    --aw-border-light: color-mix(in srgb, var(--aw-primary) 20%, transparent);
    --aw-shadow-glow: color-mix(in srgb, var(--aw-primary) 25%, transparent);
}

/* =========================================
   2. FLOATING TRIGGER BUTTON
========================================= */
#aw-floating-btn {
    position: fixed; 
    bottom: 30px; 
    width: 60px; 
    height: 60px; 
    border: none; 
    border-radius: 50%;
    color: white; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 10px 25px var(--aw-shadow-glow), 0 4px 10px rgba(0,0,0,0.1); 
    z-index: 999999; 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

#aw-floating-btn:hover { 
    transform: scale(1.08) rotate(5deg); 
    box-shadow: 0 15px 35px var(--aw-shadow-glow), 0 8px 15px rgba(0,0,0,0.15); 
}

/* Position Classes */
.aw-pos-right #aw-floating-btn, .aw-pos-right #aw-panel { right: 30px; }
.aw-pos-left #aw-floating-btn, .aw-pos-left #aw-panel { left: 30px; }

/* =========================================
   3. MAIN GLASS PANEL (DASHBOARD)
========================================= */
#aw-panel {
    position: fixed; 
    bottom: 110px; 
    width: 380px; 
    max-height: calc(100vh - 150px);
    display: flex; 
    flex-direction: column;
    background: var(--aw-bg-tint);
    backdrop-filter: blur(28px); 
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--aw-border-light);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 0 40px var(--aw-shadow-glow);
    z-index: 999999;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(20px) scale(0.96); 
    overflow: hidden;
}

#aw-panel:not(.aw-hidden) { 
    transform: translateY(0) scale(1); 
}

.aw-hidden { 
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
}

/* Panel Header */
.aw-header { 
    flex-shrink: 0; 
    padding: 24px 24px 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: transparent; 
    border-bottom: 1px solid var(--aw-border-light);
    margin-bottom: 10px;
}

.aw-header h3 { 
    margin: 0; 
    font-size: 18px; 
    font-weight: 800; 
    color: #0f172a; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

#aw-close-btn { 
    background: #f1f5f9; 
    border: none; 
    color: #64748b; 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    font-size: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

#aw-close-btn:hover { 
    background: #e2e8f0; 
    color: #ef4444; 
    transform: rotate(90deg); 
}

/* Custom Scrollbar */
.aw-panel-scroll { 
    overflow-y: auto; 
    padding: 0 24px 24px; 
}
.aw-panel-scroll::-webkit-scrollbar { width: 4px; }
.aw-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.aw-panel-scroll::-webkit-scrollbar-thumb { background: var(--aw-border-light); border-radius: 10px; }

/* Premium Theme-Synced Section Titles */
.aw-section-title {
    display: flex; 
    align-items: center; 
    font-size: 11px; 
    text-transform: uppercase;
    font-weight: 800; 
    letter-spacing: 1.5px; 
    color: var(--aw-primary);
    margin: 28px 0 14px 0; 
    opacity: 0.9;
}

.aw-section-title:first-child { 
    margin-top: 5px; 
}

/* Glowing Vertical Accent */
.aw-section-title::before {
    content: ''; 
    display: inline-block; 
    width: 5px; 
    height: 14px;
    background-color: var(--aw-primary); 
    border-radius: 10px; 
    margin-right: 10px;
    box-shadow: 0 2px 8px var(--aw-primary); 
    opacity: 0.8;
}

/* Fading Gradient Divider */
.aw-section-title::after {
    content: ''; 
    flex: 1; 
    height: 1px; 
    margin-left: 15px;
    background: linear-gradient(90deg, var(--aw-primary) 0%, transparent 100%); 
    opacity: 0.25;
}

/* =========================================
   4. FEATURE CARDS GRID
========================================= */
.aw-tools-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
}

.aw-tool-card {
    background: #ffffff; 
    border: 1px solid rgba(0,0,0,0.06); 
    border-radius: 16px;
    padding: 16px 12px; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    gap: 10px; 
    height: 100px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.aw-icon { 
    color: #64748b; 
    transition: 0.3s ease; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.aw-text { 
    font-size: 13px; 
    font-weight: 600; 
    color: #334155; 
    line-height: 1.2; 
    transition: 0.3s ease; 
}

/* Card Hover (Soft Theme Fill) */
.aw-tool-card:hover { 
    background: var(--aw-hover-bg); 
    border-color: var(--aw-border-light); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.05); 
    transform: translateY(-3px); 
}
.aw-tool-card:hover .aw-icon { transform: scale(1.1); color: var(--aw-primary); }
.aw-tool-card:hover .aw-text { color: var(--aw-primary); }

/* Card Active State (Deep Theme Fill) */
.aw-active-btn {
    background: var(--aw-active-bg) !important; 
    border-color: var(--aw-primary) !important;
    box-shadow: 0 4px 15px var(--aw-shadow-glow) !important; 
    position: relative;
}
.aw-active-btn .aw-icon, .aw-active-btn .aw-text { 
    color: var(--aw-primary) !important; 
    font-weight: 700; 
}

/* Active Checkmark Badge */
.aw-active-btn::after {
    content: '✓'; 
    position: absolute; 
    top: -8px; 
    right: -8px;
    background: var(--aw-primary); 
    color: #fff; 
    width: 22px; 
    height: 22px;
    border-radius: 50%; 
    font-size: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 4px 10px var(--aw-shadow-glow); 
    font-weight: 800; 
    border: 2px solid #fff;
}

/* =========================================
   5. ACTION BUTTONS & MODALS
========================================= */

/* Reset Button */
#aw-btn-reset {
    width: 100%; 
    background: #f8fafc; 
    color: #64748b; 
    border: 1px dashed #cbd5e1;
    padding: 14px; 
    border-radius: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.2s;
    margin-top: 25px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    font-size: 13px;
}

#aw-btn-reset:hover { 
    background: #fef2f2; 
    color: #ef4444; 
    border-color: #fca5a5; 
    transform: translateY(-2px); 
}

/* Statement Link Footer Button */
.aw-footer-link {
    display: block; 
    text-align: center; 
    margin-top: 15px; 
    background: var(--aw-hover-bg);
    color: var(--aw-primary); 
    font-size: 13px; 
    font-weight: 700; 
    text-decoration: none;
    padding: 12px; 
    border-radius: 12px; 
    transition: 0.2s; 
    border: 1px solid var(--aw-border-light);
}

.aw-footer-link:hover { 
    background: var(--aw-active-bg); 
    transform: translateY(-1px); 
    box-shadow: 0 4px 10px var(--aw-shadow-glow); 
}

/* Statement Modal Window */
#aw-statement-modal { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 9999999; display: flex; justify-content: center; align-items: center; 
    opacity: 0; visibility: hidden; transition: opacity 0.3s; 
}
#aw-statement-modal.aw-show { opacity: 1; visibility: visible; }

.aw-modal-content { 
    background: #fff; width: 90%; max-width: 600px; max-height: 80vh; 
    overflow-y: auto; border-radius: 16px; padding: 35px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); font-family: 'Segoe UI', Arial, sans-serif; 
    transform: translateY(-20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    position: relative;
}
#aw-statement-modal.aw-show .aw-modal-content { transform: translateY(0) scale(1); }

.aw-modal-close { 
    position: absolute; top: 15px; right: 20px; background: #f1f5f9; border: none; 
    font-size: 24px; cursor: pointer; color: #64748b; width: 36px; height: 36px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.aw-modal-close:hover { background: #fee2e2; color: #ef4444; }

/* Magnifier Tooltip */
#aw-magnifier-tooltip { 
    position: fixed; pointer-events: none; background-color: #0f172a; color: #fff; 
    font-size: 28px !important; font-weight: 800; padding: 12px 24px; border-radius: 12px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); z-index: 999999; display: none; 
    max-width: 80%; word-wrap: break-word; text-align: center; line-height: 1.4; 
    font-family: 'Segoe UI', Arial, sans-serif; transform: translate(-50%, -120%); 
    border: 3px solid var(--aw-primary); 
}
#aw-magnifier-tooltip.aw-active { display: block; }

/* Reading Mask */
.aw-reading-mask { 
    position: fixed; left: 0; width: 100%; height: 120px; pointer-events: none; 
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65); z-index: 999998; display: none; 
    transform: translateY(-50%); transition: top 0.05s linear; 
}
.aw-reading-mask.aw-active { display: block; }


/* ==========================================================================
   6. DOM-SAFE GLOBAL CLASSES (ACCESSIBILITY RULES)
   Applied to html/body tags to prevent widget styling conflicts
========================================================================== */

/* High Contrast Mode (Fixed Stacking Context) */
html.aw-high-contrast-mode body {
    background: #000 !important; /* Fully black background */
}
/* Invert all body elements except the widget container and script/style tags */
html.aw-high-contrast-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: invert(100%) hue-rotate(180deg) !important;
}
/* Double invert for images and videos to retain original colors */
html.aw-high-contrast-mode body > *:not(#aw-widget-container) img, 
html.aw-high-contrast-mode body > *:not(#aw-widget-container) video, 
html.aw-high-contrast-mode body > *:not(#aw-widget-container) iframe {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* Monochrome Mode */
/* Apply grayscale to all elements except the widget */
html.aw-monochrome-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: grayscale(100%) !important;
}

/* Text Enlarge Mode */
html.aw-text-large body *:not(#aw-widget-container):not(#aw-widget-container *):not(#aw-magnifier-tooltip) {
    font-size: 110% !important; line-height: 1.5 !important;
}
html.aw-text-xlarge body *:not(#aw-widget-container):not(#aw-widget-container *):not(#aw-magnifier-tooltip) {
    font-size: 130% !important; line-height: 1.6 !important;
}

/* Dyslexia Friendly Font */
html.aw-dyslexia-mode body *:not(#aw-widget-container):not(#aw-widget-container *) {
    font-family: "Comic Sans MS", "OpenDyslexic", "Lexend", sans-serif !important;
}

/* Text Spacing Mode */
html.aw-spacing-mode body *:not(#aw-widget-container):not(#aw-widget-container *) {
    letter-spacing: 0.12em !important; word-spacing: 0.16em !important; line-height: 1.8 !important;
}

/* Hide Images & Media */
html.aw-hide-images-mode img, 
html.aw-hide-images-mode video, 
html.aw-hide-images-mode iframe,
html.aw-hide-images-mode svg:not(#aw-widget-container svg) {
    display: none !important;
}

/* Stop Animations Mode */
html.aw-stop-animations-mode * { 
    transition: none !important; 
    animation: none !important; 
    scroll-behavior: auto !important; 
}

/* Big Cursor Mode */
html.aw-big-cursor-mode body { 
    cursor: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 24 24" fill="black" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 3.2L18.5 16.2H12.5L10.5 22.2L7.5 13.2L2.5 13.2L5.5 3.2Z"/></svg>'), auto !important; 
}
html.aw-big-cursor-mode a, html.aw-big-cursor-mode button, html.aw-big-cursor-mode input {
    cursor: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 24 24" fill="%230056b3" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8 2 4 5 4 10C4 16 12 22 12 22C12 22 20 16 20 10C20 5 16 2 12 2Z"/></svg>'), pointer !important;
}

/* Utility Cursors for Specific Tools */
html.aw-reader-mode body { cursor: help !important; }
html.aw-magnifier-mode body { cursor: zoom-in !important; }
html.aw-reader-mode #aw-widget-container, html.aw-magnifier-mode #aw-widget-container { cursor: auto !important; }

/* Highlight Headers Mode */
html.aw-highlight-headers-mode h1, html.aw-highlight-headers-mode h2, html.aw-highlight-headers-mode h3, 
html.aw-highlight-headers-mode h4, html.aw-highlight-headers-mode h5, html.aw-highlight-headers-mode h6 {
    border: 2px dashed var(--aw-primary, #0056b3) !important; 
    padding: 4px !important; position: relative; border-radius: 4px;
}

/* Highlight Focused / Hover Element */
.aw-hover-target { 
    outline: 3px solid #ff9800 !important; 
    background-color: rgba(255, 152, 0, 0.1) !important; 
    z-index: 99999; border-radius: 4px; transition: all 0.2s ease; 
}

/* Hide Distractions (Focus Mode) */
html.aw-hide-distractions-mode aside, 
html.aw-hide-distractions-mode iframe, 
html.aw-hide-distractions-mode marquee, 
html.aw-hide-distractions-mode .popup, 
html.aw-hide-distractions-mode .modal, 
html.aw-hide-distractions-mode .ads, 
html.aw-hide-distractions-mode .ad-banner, 
html.aw-hide-distractions-mode .sidebar { 
    display: none !important; 
}