/* Widget Base */
.acc-widget-container {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    z-index: 9999999 !important;
    display: flex !important;
    flex-direction: column !important; /* Stack normally: Menu then Trigger */
    align-items: flex-start !important;
    gap: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    pointer-events: none !important; /* Allow clicks to pass through container */
}

.acc-trigger {
    pointer-events: auto !important; /* Re-enable clicks for trigger */
    width: 64px !important;
    height: 64px !important;
    background-color: #1e0b4d !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    border: 2px solid #ffffff !important;
    transition: transform 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 2 !important; /* Forces trigger to bottom in 'column' flow */
}

/* Trigger Tooltip */
.acc-trigger::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    left: 80px !important;
    background-color: #1e0b4d !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.acc-trigger:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(5px) !important;
}

.acc-trigger svg {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
    stroke: #ffffff !important;
}

/* Vertical Menu */
.acc-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    order: 1 !important; /* Menu above trigger */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important; /* Ensure hidden menu doesn't block clicks */
}

.acc-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; /* Enable clicks when visible */
}

.acc-btn {
    width: 200px !important;
    height: 48px !important;
    background-color: #ffffff !important;
    border: 2px solid #1e0b4d !important;
    border-radius: 24px !important;
    color: #1e0b4d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    gap: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
}

.acc-btn span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e0b4d !important;
    pointer-events: none !important;
}

.acc-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #1e0b4d !important;
    flex-shrink: 0 !important;
}

.acc-btn:hover {
    background-color: #fdb71a !important; /* Gold hover */
    border-color: #fdb71a !important;
}

.acc-btn.active {
    background-color: #fdb71a !important;
    border-color: #fdb71a !important;
}

/* Tooltip - Hide since we have labels */
.acc-btn::after {
    display: none !important;
}

.acc-btn:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(5px);
}

/* =========================================
   ACCESSIBILITY MODES (BODY CLASSES)
   ========================================= */

/* High Contrast */
body.acc-high-contrast {
    filter: contrast(1.2) !important;
    background-color: #000 !important;
}

body.acc-high-contrast *:not(.acc-widget-container):not(.acc-widget-container *) {
    color: #ffff00 !important;
}

body.acc-high-contrast .navbar,
body.acc-high-contrast .footer {
    background: #000 !important;
}

/* Grayscale */
body.acc-grayscale {
    filter: grayscale(100%) !important;
}

/* Large Text */
body.acc-large-text {
    font-size: 1.25em !important;
}

/* Highlight Links */
body.acc-highlight-links a:not(.nav-cta):not(.btn-footer-bling) {
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 4px !important;
    background-color: rgba(253, 183, 26, 0.2) !important;
}

/* Dyslexia Font */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/opendyslexic@1.0.3/OpenDyslexic-Regular.otf');
}

body.acc-dyslexia *:not(.acc-widget-container):not(.acc-widget-container *) {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Responsive */
@media (max-width: 768px) {
    .acc-widget-container {
        bottom: var(--space-4);
        left: var(--space-4);
    }
    
    .acc-trigger {
        width: 50px;
        height: 50px;
    }

    .acc-btn::after {
        display: none; /* Hide tooltips on mobile */
    }
}