/* ==========================================================================
   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; 
}





/* =========================================
   Widget Positions Setup (Updated with Gap)
========================================= */

/* 1. Bottom Right */
.aw-pos-bottom-right #aw-floating-btn { bottom: 20px; right: 20px; top: auto; left: auto; }
.aw-pos-bottom-right #aw-panel { bottom: 100px; right: 20px; top: auto; left: auto; transform-origin: bottom right; }

/* 2. Bottom Left */
.aw-pos-bottom-left #aw-floating-btn { bottom: 20px; left: 20px; top: auto; right: auto; }
.aw-pos-bottom-left #aw-panel { bottom: 100px; left: 20px; top: auto; right: auto; transform-origin: bottom left; }

/* 3. Top Right */
.aw-pos-top-right #aw-floating-btn { top: 20px; right: 20px; bottom: auto; left: auto; }
.aw-pos-top-right #aw-panel { top: 100px; right: 20px; bottom: auto; left: auto; transform-origin: top right; }

/* 4. Top Left */
.aw-pos-top-left #aw-floating-btn { top: 20px; left: 20px; bottom: auto; right: auto; }
.aw-pos-top-left #aw-panel { top: 100px; left: 20px; bottom: auto; right: auto; transform-origin: top left; }

/* 5. Middle Right */
.aw-pos-middle-right #aw-floating-btn { top: 50%; right: 20px; transform: translateY(-50%); bottom: auto; left: auto; }
.aw-pos-middle-right #aw-panel { top: 50%; right: 100px; transform: translateY(-50%); bottom: auto; left: auto; transform-origin: center right; }

/* 6. Middle Left */
.aw-pos-middle-left #aw-floating-btn { top: 50%; left: 20px; transform: translateY(-50%); bottom: auto; right: auto; }
.aw-pos-middle-left #aw-panel { top: 50%; left: 100px; transform: translateY(-50%); bottom: auto; right: auto; transform-origin: center left; }

/* Dragging Support */
#aw-floating-btn {
    position: fixed;
    z-index: 999999;
}
#aw-panel {
    position: fixed;
    z-index: 999998;
}




/* ==========================================================================
   NEW: Color Blindness Filters (Safe DOM Implementation)
========================================================================== */

/* Protanopia (Red-Blind) */
html.aw-protanopia-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: url('#aw-filter-protanopia') !important;
}

/* Deuteranopia (Green-Blind) */
html.aw-deuteranopia-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: url('#aw-filter-deuteranopia') !important;
}

/* Tritanopia (Blue-Blind) */
html.aw-tritanopia-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: url('#aw-filter-tritanopia') !important;
}

/* Ensure images and videos also get filtered safely if they aren't directly in the body root */
html.aw-protanopia-mode img, html.aw-protanopia-mode video { filter: url('#aw-filter-protanopia') !important; }
html.aw-deuteranopia-mode img, html.aw-deuteranopia-mode video { filter: url('#aw-filter-deuteranopia') !important; }
html.aw-tritanopia-mode img, html.aw-tritanopia-mode video { filter: url('#aw-filter-tritanopia') !important; }



/* ==========================================================================
   NEW: Smart Dark Mode & Color Saturation Controls
========================================================================== */

/* Smart Dark Mode (Eye-care dark gray theme) */
html.aw-dark-mode body {
    background-color: #121212 !important;
}
html.aw-dark-mode body > *:not(#aw-widget-container):not(script):not(style) {
    /* Magic Filter: Inverts colors beautifully to dark mode */
    filter: invert(85%) hue-rotate(180deg) brightness(105%) contrast(95%) !important;
}
/* Ensure Images and Videos keep their original colors in Dark Mode */
html.aw-dark-mode img, 
html.aw-dark-mode video, 
html.aw-dark-mode iframe {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* Low Saturation Mode (Reduces vivid colors) */
html.aw-sat-low-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: saturate(40%) !important;
}

/* High Saturation Mode (Boosts color intensity) */
html.aw-sat-high-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: saturate(200%) !important;
}


/* ==========================================================================
   NEW: Text Alignment, Line Height & Dictionary Tooltip
========================================================================== */

/* Text Alignment Logic */
html.aw-align-left-mode body *:not(#aw-widget-container):not(#aw-widget-container *) { text-align: left !important; }
html.aw-align-center-mode body *:not(#aw-widget-container):not(#aw-widget-container *) { text-align: center !important; }
html.aw-align-right-mode body *:not(#aw-widget-container):not(#aw-widget-container *) { text-align: right !important; }
html.aw-align-justify-mode body *:not(#aw-widget-container):not(#aw-widget-container *) { text-align: justify !important; }

/* Line Height Logic */
html.aw-line-height-1 body *:not(#aw-widget-container):not(#aw-widget-container *) { line-height: 1.75 !important; }
html.aw-line-height-2 body *:not(#aw-widget-container):not(#aw-widget-container *) { line-height: 2 !important; }

/* Wikipedia API Dictionary Tooltip */
#aw-dict-tooltip {
    position: fixed;
    background: #ffffff;
    color: #1e293b;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 20px var(--aw-shadow-glow);
    border: 1px solid var(--aw-primary);
    z-index: 9999999;
    max-width: 320px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    pointer-events: none; /* Allows click-through */
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
}
#aw-dict-tooltip.aw-hidden {
    display: none;
    opacity: 0;
    transform: translateY(0);
}



/* ==========================================================================
   NEW: Keyboard Focus, Page Navigator Modal & Virtual Keyboard
========================================================================== */

/* 1. Keyboard Focus Indicator Mode */
html.aw-focus-mode body *:focus {
    outline: 4px solid var(--aw-primary, #ff9800) !important;
    outline-offset: 4px !important;
    transition: outline-offset 0.2s ease !important;
}

/* 2. Virtual Keyboard Container */
#aw-vkb-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    z-index: 9999999;
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: bottom 0.3s, opacity 0.3s;
}
#aw-vkb-container.aw-hidden {
    bottom: -300px;
    opacity: 0;
    pointer-events: none;
}
.aw-vkb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
#aw-close-vkb {
    background: transparent; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0 10px;
}
.aw-vkb-keys {
    display: flex; flex-direction: column; gap: 6px;
}
.aw-vkb-row {
    display: flex; gap: 6px; justify-content: center;
}
.aw-vkb-k {
    background: #334155; color: white; border: none; border-radius: 8px; 
    padding: 12px 18px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.1s;
    user-select: none; /* Crucial to prevent highlighting */
}
.aw-vkb-k:active { background: var(--aw-primary); transform: scale(0.95); }
.aw-vkb-wide { padding: 12px 24px; font-size: 14px; background: #475569; }
.aw-vkb-space { flex-grow: 1; min-width: 250px; background: #475569; }





/* ==========================================================================
   NEW: Custom Colors (Background, Text, Title Swapping)
========================================================================== */

/* UI Styling for Color Swap Box */
.aw-color-swap-grid { 
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; 
}
.aw-color-box { 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid var(--aw-border-light); 
    padding: 12px 10px; border-radius: 12px; gap: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.aw-color-box label { 
    font-size: 11px; font-weight: 700; color: #64748b; margin: 0;
}

/* Logic for Custom Background */
html.aw-custom-bg-mode body,
html.aw-custom-bg-mode main,
html.aw-custom-bg-mode section,
html.aw-custom-bg-mode header,
html.aw-custom-bg-mode footer,
html.aw-custom-bg-mode div:not(#aw-widget-container):not(#aw-widget-container *) {
    background-color: var(--aw-custom-bg) !important;
}

/* Logic for Custom Text Color */
html.aw-custom-text-mode body *:not(#aw-widget-container):not(#aw-widget-container *) {
    color: var(--aw-custom-text) !important;
}

/* Logic for Custom Title Color (Overrides text color specifically for Headings) */
html.aw-custom-title-mode h1, 
html.aw-custom-title-mode h2, 
html.aw-custom-title-mode h3, 
html.aw-custom-title-mode h4, 
html.aw-custom-title-mode h5, 
html.aw-custom-title-mode h6 {
    color: var(--aw-custom-title) !important;
}




/* ==========================================================================
   FIX 2: Page Navigator & Statement Modal Z-Index (Top Layer)
========================================================================== */
#aw-statement-modal, #aw-nav-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 !important; /* Forces it to stay above everything */
    display: flex; justify-content: center; align-items: center; 
    opacity: 0; visibility: hidden; transition: opacity 0.3s; 
}
#aw-statement-modal.aw-show, #aw-nav-modal.aw-show { opacity: 1; visibility: visible; }

#aw-statement-modal .aw-modal-content, #aw-nav-modal .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, #aw-nav-modal.aw-show .aw-modal-content { transform: translateY(0) scale(1); }

/* ==========================================================================
   FIX 3: Safe Title Color Change (Only changes Website Headings, ignores Widget)
========================================================================== */
/* Logic for Custom Title Color */
html.aw-custom-title-mode h1:not(#aw-widget-container *), 
html.aw-custom-title-mode h2:not(#aw-widget-container *), 
html.aw-custom-title-mode h3:not(#aw-widget-container *), 
html.aw-custom-title-mode h4:not(#aw-widget-container *), 
html.aw-custom-title-mode h5:not(#aw-widget-container *), 
html.aw-custom-title-mode h6:not(#aw-widget-container *) {
    color: var(--aw-custom-title) !important;
}







/* ==========================================================================
   FIX 1: Google Translate Banner Hide (White-labeling)
========================================================================== */
body { top: 0 !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-gadget-icon, .goog-te-gadget-simple { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc, .VIpgJd-ZVi9od-ORHb {
	
	z-index: 0 !important;	
}


/* ==========================================================================
   FIX 2: Page Navigator & Statement Modal Z-Index (Absolute Top Layer)
========================================================================== */
#aw-statement-modal, #aw-nav-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: 2147483647 !important; /* Maximum possible Z-index value */
    display: flex; justify-content: center; align-items: center; 
    opacity: 0; visibility: hidden; transition: opacity 0.3s; 
}
#aw-statement-modal.aw-show, #aw-nav-modal.aw-show { opacity: 1; visibility: visible; }


/* ==========================================================================
   FIX 3: Custom Colors - Protect Widget & Isolate Title/Text (FINAL 100% FIX)
========================================================================== */

/* 1. Website Text (Targeting ONLY text tags to prevent inheritance to Headings) */
html.aw-custom-text-mode body p:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body span:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body a:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body li:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body td:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body th:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body b:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body i:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body strong:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body em:not(#aw-widget-container):not(#aw-widget-container *),
html.aw-custom-text-mode body label:not(#aw-widget-container):not(#aw-widget-container *) {
    color: var(--aw-custom-text) !important;
}

/* 2. Website Titles (Headings ONLY) - Placed after Text rule to override it */
html.aw-custom-title-mode body h1:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h2:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h3:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h4:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h5:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h6:not(#aw-widget-container):not(#aw-widget-container *) {
    color: var(--aw-custom-title) !important;
}

/* 3. Elements INSIDE Titles (e.g. Spans or Links inside H1) */
html.aw-custom-title-mode body h1 *:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h2 *:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h3 *:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h4 *:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h5 *:not(#aw-widget-container):not(#aw-widget-container *), 
html.aw-custom-title-mode body h6 *:not(#aw-widget-container):not(#aw-widget-container *) {
    color: var(--aw-custom-title) !important;
}

/* --------------------------------------------------
   ISOLATION: Protect the Widget's Internal Colors!
--------------------------------------------------- */
html.aw-custom-title-mode #aw-widget-container h1, 
html.aw-custom-title-mode #aw-widget-container h2, 
html.aw-custom-title-mode #aw-widget-container h3, 
html.aw-custom-title-mode #aw-widget-container h4, 
html.aw-custom-title-mode #aw-widget-container h5, 
html.aw-custom-title-mode #aw-widget-container h6 {
    color: #0f172a !important; 
}

html.aw-custom-text-mode #aw-widget-container p,
html.aw-custom-text-mode #aw-widget-container span,
html.aw-custom-text-mode #aw-widget-container div,
html.aw-custom-text-mode #aw-widget-container a,
html.aw-custom-text-mode #aw-widget-container label {
    color: initial !important; 
}

html.aw-custom-text-mode #aw-widget-container .aw-active-btn .aw-text,
html.aw-custom-text-mode #aw-widget-container .aw-active-btn .aw-icon {
    color: var(--aw-primary) !important;
}
html.aw-custom-text-mode #aw-widget-container .aw-tool-card:not(.aw-active-btn) .aw-text {
    color: #334155 !important;
}
html.aw-custom-text-mode #aw-widget-container .aw-tool-card:not(.aw-active-btn) .aw-icon {
    color: #64748b !important;
}


/* ==========================================================================
   NEW: Smart Profiles & Reading Guide
========================================================================== */

/* Profiles UI Grid */
.aw-profiles-grid {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 25px;
}
.aw-prof-card {
    background: #ffffff; border: 1px solid var(--aw-border-light); padding: 12px 15px;
    border-radius: 12px; cursor: pointer; text-align: left; font-weight: 700; color: #334155;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.aw-prof-card:hover {
    background: var(--aw-hover-bg); color: var(--aw-primary); border-color: var(--aw-border-light); transform: translateY(-2px);
}
.aw-prof-card.aw-active-prof {
    background: var(--aw-primary); color: #ffffff; border-color: var(--aw-primary); box-shadow: 0 4px 15px var(--aw-shadow-glow);
}
.aw-prof-card.aw-active-prof:hover { transform: translateY(0); }

/* Reading Guide Line */
.aw-reading-guide {
    position: fixed; left: 0; width: 100%; height: 4px; background-color: var(--aw-primary, #4f46e5);

    z-index: 999998; display: none; pointer-events: none;
    transform: translateY(-50%); transition: top 0.05s linear;
}
.aw-reading-guide.aw-active { display: block; }







/* ==========================================================================
   NEW: Theme Colors for Highlight Hover & Highlight Headers
========================================================================== */

/* Highlight Focused / Hover Element using Theme Color */
.aw-hover-target { 
    outline: 3px solid var(--aw-primary) !important; 
    /* color-mix creates a soft 15% transparent background of your primary color */
    background-color: color-mix(in srgb, var(--aw-primary) 15%, transparent) !important; 
    z-index: 99999; border-radius: 4px; transition: all 0.2s ease; 
}

/* Highlight Headers Mode using Theme Color */
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: 3px dashed var(--aw-primary) !important; 
    padding: 4px !important; position: relative; border-radius: 4px;
}


/* ==========================================================================
   NEW: Multi-step Dots Indicator (Text Size, Align, Line Height)
========================================================================== */
.aw-steps {
    display: flex; gap: 5px; margin-top: 8px; justify-content: center; width: 100%;
}
.aw-dot {
    width: 6px; height: 6px; border-radius: 50%; background-color: #cbd5e1; transition: all 0.2s ease;
}
/* When button is NOT active, but it is the default step */
.aw-dot.aw-active-dot {
    background-color: #94a3b8; transform: scale(1.3);
}
/* When button IS active, make inactive dots slightly themed */
.aw-active-btn .aw-dot {
    background-color: color-mix(in srgb, var(--aw-primary) 30%, #fff);
}
/* When button IS active, make the active dot full theme color */
.aw-active-btn .aw-dot.aw-active-dot {
    background-color: var(--aw-primary); 
}



/* ==========================================================================
   FIX: Color Blindness Filters (CSS Data URIs - 100% Browser Support)
========================================================================== */
html.aw-protanopia-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeColorMatrix type='matrix' values='0.567 0.433 0 0 0 0.558 0.442 0 0 0 0 0.242 0.758 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f") !important;
}

html.aw-deuteranopia-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeColorMatrix type='matrix' values='0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f") !important;
}

html.aw-tritanopia-mode body > *:not(#aw-widget-container):not(script):not(style) {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeColorMatrix type='matrix' values='0.95 0.05 0 0 0 0 0.433 0.567 0 0 0 0.475 0.525 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f") !important;
}


/* ==========================================================================
   FIX: Theme Colors for Highlight Hover & Highlight Headers
========================================================================== */
.aw-hover-target { 
    outline: 3px solid var(--aw-primary, #ff9800) !important; 
    background-color: color-mix(in srgb, var(--aw-primary) 15%, transparent) !important; 
    z-index: 99999; border-radius: 4px; transition: all 0.2s ease; 
}

html.aw-highlight-headers-mode h1:not(#aw-widget-container *), 
html.aw-highlight-headers-mode h2:not(#aw-widget-container *), 
html.aw-highlight-headers-mode h3:not(#aw-widget-container *), 
html.aw-highlight-headers-mode h4:not(#aw-widget-container *), 
html.aw-highlight-headers-mode h5:not(#aw-widget-container *), 
html.aw-highlight-headers-mode h6:not(#aw-widget-container *) {
    border: 3px dashed var(--aw-primary) !important; 
    padding: 4px !important; position: relative; border-radius: 4px;
}





/* ==========================================================================
   NEW: User Position Changer Grid & UI
========================================================================== */
.aw-pos-grid {
    display: flex; justify-content: space-between; gap: 8px; margin-bottom: 25px;
    background: #f8fafc; padding: 12px; border-radius: 12px; border: 1px solid var(--aw-border-light);
}
.aw-pos-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 2px solid #cbd5e1; background: #ffffff;
    cursor: pointer; position: relative; transition: all 0.2s ease;
}
.aw-pos-btn:hover { border-color: var(--aw-primary); transform: translateY(-2px); }
.aw-pos-btn.aw-pos-active { border-color: var(--aw-primary); background: var(--aw-primary); }

/* Dots to visually represent the position */
.aw-pos-btn::after {
    content: ''; position: absolute; width: 6px; height: 6px; background: #94a3b8; border-radius: 50%;
    transition: 0.2s;
}
.aw-pos-btn.aw-pos-active::after { background: #ffffff; }

/* Positioning the dots based on real widget positions */
.aw-pos-btn[data-pos="top-left"]::after { top: 4px; left: 4px; }
.aw-pos-btn[data-pos="top-right"]::after { top: 4px; right: 4px; }
.aw-pos-btn[data-pos="middle-left"]::after { top: 50%; left: 4px; transform: translateY(-50%); }
.aw-pos-btn[data-pos="middle-right"]::after { top: 50%; right: 4px; transform: translateY(-50%); }
.aw-pos-btn[data-pos="bottom-left"]::after { bottom: 4px; left: 4px; }
.aw-pos-btn[data-pos="bottom-right"]::after { bottom: 4px; right: 4px; }

/* Ensure widget dynamically respects the classes added by JS */
#aw-widget-container.aw-pos-bottom-right #aw-floating-btn { top: auto; bottom: 20px; left: auto; right: 20px; }
#aw-widget-container.aw-pos-bottom-right #aw-panel { top: auto; bottom: 100px; left: auto; right: 20px; transform-origin: bottom right; }

#aw-widget-container.aw-pos-bottom-left #aw-floating-btn { top: auto; bottom: 20px; right: auto; left: 20px; }
#aw-widget-container.aw-pos-bottom-left #aw-panel { top: auto; bottom: 100px; right: auto; left: 20px; transform-origin: bottom left; }

#aw-widget-container.aw-pos-top-right #aw-floating-btn { bottom: auto; top: 20px; left: auto; right: 20px; }
#aw-widget-container.aw-pos-top-right #aw-panel { bottom: auto; top: 100px; left: auto; right: 20px; transform-origin: top right; }

#aw-widget-container.aw-pos-top-left #aw-floating-btn { bottom: auto; top: 20px; right: auto; left: 20px; }
#aw-widget-container.aw-pos-top-left #aw-panel { bottom: auto; top: 100px; right: auto; left: 20px; transform-origin: top left; }

#aw-widget-container.aw-pos-middle-right #aw-floating-btn { top: 50%; bottom: auto; left: auto; right: 20px; transform: translateY(-50%); }
#aw-widget-container.aw-pos-middle-right #aw-panel { top: 50%; bottom: auto; left: auto; right: 100px; transform: translateY(-50%); transform-origin: center right; }

#aw-widget-container.aw-pos-middle-left #aw-floating-btn { top: 50%; bottom: auto; right: auto; left: 20px; transform: translateY(-50%); }
#aw-widget-container.aw-pos-middle-left #aw-panel { top: 50%; bottom: auto; right: auto; left: 100px; transform: translateY(-50%); transform-origin: center left; }