/* ═══════════════════════════════════════════
   Flavor Accessibility — Frontend v1.2
   ═══════════════════════════════════════════ */

/* ─── WIDGET ISOLATION ───
   Force fixed sizes inside the widget so page-level
   font-size / zoom / filter changes never bleed in.
   ─────────────────────── */
#flavor-a11y-wrap,
#flavor-a11y-wrap *,
#flavor-a11y-wrap *::before,
#flavor-a11y-wrap *::after {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif !important;
    line-height: 1.45 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left !important;
    font-style: normal !important;
    text-transform: none !important;
    color: inherit;
}

/* ─── Trigger button ─── */
.flavor-a11y-trigger {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.flavor-a11y-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0,0,0,.3), 0 0 0 6px rgba(var(--fa11y-rgb), .2);
}
.flavor-a11y-trigger:active { transform: scale(.95); }

.flavor-a11y-trigger .flavor-a11y-trigger-open {
    display: flex; align-items: center; justify-content: center;
    width: 55%; height: 55%;
}
.flavor-a11y-trigger .flavor-a11y-trigger-open svg { width: 100%; height: 100%; display: block; }
.flavor-a11y-trigger .flavor-a11y-close-icon { display: none; width: 55%; height: 55%; }
.flavor-a11y-trigger.is-open .flavor-a11y-trigger-open { display: none; }
.flavor-a11y-trigger.is-open .flavor-a11y-close-icon { display: block; }

/* Pulse */
@keyframes flavor-a11y-pulse {
    0%   { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(var(--fa11y-rgb), .4); }
    70%  { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 14px rgba(var(--fa11y-rgb), 0); }
    100% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(var(--fa11y-rgb), 0); }
}
.flavor-a11y-trigger.has-pulse { animation: flavor-a11y-pulse 2.5s infinite; }
.flavor-a11y-trigger.is-open.has-pulse { animation: none; }

/* ═══════════════════════════════════════════
   POSITION SYSTEM
   ═══════════════════════════════════════════ */
.flavor-a11y-trigger.fa11y-pos-bottom-right { bottom: 20px; right: 20px; }
.flavor-a11y-trigger.fa11y-pos-bottom-left  { bottom: 20px; left: 20px; }
.flavor-a11y-trigger.fa11y-pos-top-right    { top: 20px; right: 20px; }
.flavor-a11y-trigger.fa11y-pos-top-left     { top: 20px; left: 20px; }
.flavor-a11y-trigger.fa11y-pos-middle-right { top: 50%; right: 20px; transform: translateY(-50%); }
.flavor-a11y-trigger.fa11y-pos-middle-left  { top: 50%; left: 20px; transform: translateY(-50%); }
.flavor-a11y-trigger.fa11y-pos-middle-right:hover,
.flavor-a11y-trigger.fa11y-pos-middle-left:hover { transform: translateY(-50%) scale(1.1); }

.flavor-a11y-panel.fa11y-panel-pos-bottom-right { bottom: 88px; right: 20px; }
.flavor-a11y-panel.fa11y-panel-pos-bottom-left  { bottom: 88px; left: 20px; }
.flavor-a11y-panel.fa11y-panel-pos-top-right    { top: 88px; right: 20px; }
.flavor-a11y-panel.fa11y-panel-pos-top-left     { top: 88px; left: 20px; }
.flavor-a11y-panel.fa11y-panel-pos-middle-right { top: 50%; right: 20px; transform: translateY(-50%); }
.flavor-a11y-panel.fa11y-panel-pos-middle-left  { top: 50%; left: 20px; transform: translateY(-50%); }

/* Mobile position overrides */
@media (max-width: 768px) {
    .flavor-a11y-trigger.fa11y-mob-bottom-right { top:auto!important; left:auto!important; bottom:16px!important; right:16px!important; transform:none!important; }
    .flavor-a11y-trigger.fa11y-mob-bottom-left  { top:auto!important; right:auto!important; bottom:16px!important; left:16px!important; transform:none!important; }
    .flavor-a11y-trigger.fa11y-mob-top-right    { bottom:auto!important; left:auto!important; top:16px!important; right:16px!important; transform:none!important; }
    .flavor-a11y-trigger.fa11y-mob-top-left     { bottom:auto!important; right:auto!important; top:16px!important; left:16px!important; transform:none!important; }
    .flavor-a11y-trigger.fa11y-mob-middle-right { bottom:auto!important; left:auto!important; top:50%!important; right:16px!important; transform:translateY(-50%)!important; }
    .flavor-a11y-trigger.fa11y-mob-middle-left  { bottom:auto!important; right:auto!important; top:50%!important; left:16px!important; transform:translateY(-50%)!important; }

    .flavor-a11y-panel {
        left: 8px !important; right: 8px !important;
        bottom: 80px !important; top: auto !important;
        width: calc(100% - 16px) !important;
        max-height: 70vh !important;
        transform: none !important;
    }
    .flavor-a11y-panel.is-open { transform: none !important; }
}

/* ─── Panel ─── */
.flavor-a11y-panel {
    position: fixed;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.96);
    transition: opacity .35s cubic-bezier(.4,0,.2,1),
                transform .35s cubic-bezier(.4,0,.2,1),
                visibility .35s;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
}
.flavor-a11y-panel::-webkit-scrollbar { width: 5px; }
.flavor-a11y-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.flavor-a11y-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* Panel styles */
.flavor-a11y-panel--glass {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    color: #1e1e2f;
}
.flavor-a11y-panel--solid {
    background: #fff; border: 1px solid #e8e8e8;
    box-shadow: 0 12px 48px rgba(0,0,0,.1); color: #1e1e2f;
}
.flavor-a11y-panel--dark {
    background: #1a1a2e; border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 48px rgba(0,0,0,.4); color: #e8e8f0;
}

/* Panel header — more padding */
.flavor-a11y-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(128,128,128,.12);
}
.flavor-a11y-panel-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.2px !important; }
.flavor-a11y-reset-btn {
    font-size: 12px !important; font-weight: 600 !important;
    padding: 5px 14px; border-radius: 20px;
    border: 1px solid rgba(128,128,128,.2);
    background: transparent; cursor: pointer;
    transition: all .2s; color: inherit; opacity: .7;
}
.flavor-a11y-reset-btn:hover { opacity: 1; border-color: rgba(128,128,128,.4); }

/* Panel body — generous padding */
.flavor-a11y-panel-body {
    padding: 18px 24px 24px;
}

/* Section */
.flavor-a11y-section { margin-bottom: 20px; }
.flavor-a11y-section:last-child { margin-bottom: 0; }
.flavor-a11y-section-title {
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 1.2px !important;
    opacity: .45; margin-bottom: 10px; padding-left: 2px;
}

/* ═══════════════════════════════════════════
   3-STEP BUTTONS (Text Size / Zoom)
   ═══════════════════════════════════════════ */
.flavor-a11y-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.flavor-a11y-step {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    padding: 12px 6px;
    border-radius: 14px;
    border: 1.5px solid rgba(128,128,128,.12);
    background: rgba(128,128,128,.04);
    cursor: pointer; transition: all .2s;
    -webkit-tap-highlight-color: transparent;
    min-height: 68px;
    color: inherit;
}
.flavor-a11y-step:hover {
    border-color: rgba(var(--fa11y-rgb), .3);
    background: rgba(var(--fa11y-rgb), .06);
}
.flavor-a11y-step.is-active {
    border-color: var(--fa11y-color);
    background: rgba(var(--fa11y-rgb), .12);
    box-shadow: 0 2px 8px rgba(var(--fa11y-rgb), .15);
}
.flavor-a11y-step-icon {
    width: 18px; height: 18px; opacity: .6; transition: all .2s;
}
.flavor-a11y-step-icon--md { width: 22px !important; height: 22px !important; }
.flavor-a11y-step-icon--lg { width: 26px !important; height: 26px !important; }
.flavor-a11y-step.is-active .flavor-a11y-step-icon { opacity: 1; color: var(--fa11y-color); }
.flavor-a11y-step-icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.flavor-a11y-step-label {
    font-size: 10px !important; font-weight: 600 !important;
    opacity: .65; line-height: 1 !important;
}
.flavor-a11y-step.is-active .flavor-a11y-step-label { opacity: 1; color: var(--fa11y-color); }

/* ═══════════════════════════════════════════
   FEATURE GRID
   ═══════════════════════════════════════════ */
.flavor-a11y-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.flavor-a11y-feat {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 14px;
    border: 1.5px solid rgba(128,128,128,.12);
    background: rgba(128,128,128,.04);
    cursor: pointer; transition: all .2s;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent;
    min-height: 76px;
}
.flavor-a11y-feat:hover {
    border-color: rgba(var(--fa11y-rgb), .3);
    background: rgba(var(--fa11y-rgb), .06);
}
.flavor-a11y-feat.is-active {
    border-color: var(--fa11y-color);
    background: rgba(var(--fa11y-rgb), .12);
    box-shadow: 0 2px 8px rgba(var(--fa11y-rgb), .15);
}
.flavor-a11y-feat-icon {
    width: 22px; height: 22px;
    opacity: .6; transition: all .2s;
    flex-shrink: 0;
}
.flavor-a11y-feat.is-active .flavor-a11y-feat-icon { opacity: 1; color: var(--fa11y-color); }
.flavor-a11y-feat-icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.flavor-a11y-feat-label {
    font-size: 11px !important; font-weight: 600 !important;
    line-height: 1.2 !important; opacity: .65;
}
.flavor-a11y-feat.is-active .flavor-a11y-feat-label { opacity: 1; color: var(--fa11y-color); }

/* ─── Dark panel tweaks ─── */
.flavor-a11y-panel--dark .flavor-a11y-feat,
.flavor-a11y-panel--dark .flavor-a11y-step { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.flavor-a11y-panel--dark .flavor-a11y-feat:hover,
.flavor-a11y-panel--dark .flavor-a11y-step:hover { background: rgba(var(--fa11y-rgb), .12); }
.flavor-a11y-panel--dark .flavor-a11y-feat.is-active,
.flavor-a11y-panel--dark .flavor-a11y-step.is-active { background: rgba(var(--fa11y-rgb), .18); }
.flavor-a11y-panel--dark .flavor-a11y-reset-btn { border-color: rgba(255,255,255,.15); }

/* Mobile hide */
@media (max-width: 768px) {
    .flavor-a11y-hide-mobile { display: none !important; }
}

/* ═══════════════════════════════════════════
   A11Y OVERRIDES on <html>
   — All use :not() to exclude the widget
   ═══════════════════════════════════════════ */
html.fa11y-bigger-text { font-size: 120% !important; }
html.fa11y-biggest-text { font-size: 140% !important; }

/* High contrast */
html.fa11y-high-contrast *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) {
    color: #000 !important;
    background-color: #fff !important;
    border-color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.fa11y-high-contrast a:not(#flavor-a11y-wrap a) { color: #0000EE !important; text-decoration: underline !important; }
html.fa11y-high-contrast img { filter: contrast(1.2) !important; }

/* Dark contrast (invert) */
html.fa11y-dark-contrast { filter: invert(1) hue-rotate(180deg); }
html.fa11y-dark-contrast img,
html.fa11y-dark-contrast video,
html.fa11y-dark-contrast canvas,
html.fa11y-dark-contrast [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }
html.fa11y-dark-contrast #flavor-a11y-wrap { filter: invert(1) hue-rotate(180deg); }

/* Saturation */
html.fa11y-low-saturation { filter: saturate(.3); }
html.fa11y-low-saturation #flavor-a11y-wrap { filter: saturate(3.33); }
html.fa11y-monochrome { filter: grayscale(1); }
html.fa11y-monochrome #flavor-a11y-wrap { filter: none; }

/* Readable font */
html.fa11y-readable-font *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) {
    font-family: "Georgia", "Times New Roman", serif !important;
    letter-spacing: .03em !important;
    word-spacing: .12em !important;
}

/* Highlight links */
html.fa11y-highlight-links a:not(#flavor-a11y-wrap a) {
    outline: 3px solid #FFD700 !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 215, 0, .15) !important;
}

/* Big cursor */
html.fa11y-big-cursor *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='black' stroke='white' stroke-width='1'%3E%3Cpath d='M5 3l14 8-6 1-4 6z'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Line height */
html.fa11y-line-height *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) { line-height: 2 !important; }

/* Letter spacing */
html.fa11y-letter-spacing *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) { letter-spacing: .12em !important; }

/* Highlight headings */
html.fa11y-highlight-titles h1:not(#flavor-a11y-wrap *),
html.fa11y-highlight-titles h2:not(#flavor-a11y-wrap *),
html.fa11y-highlight-titles h3:not(#flavor-a11y-wrap *),
html.fa11y-highlight-titles h4:not(#flavor-a11y-wrap *),
html.fa11y-highlight-titles h5:not(#flavor-a11y-wrap *),
html.fa11y-highlight-titles h6:not(#flavor-a11y-wrap *) {
    outline: 3px dashed var(--fa11y-color, #6C5CE7) !important;
    outline-offset: 4px !important;
}

/* Stop animations — exclude widget */
html.fa11y-stop-animations *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *),
html.fa11y-stop-animations *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *)::before,
html.fa11y-stop-animations *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *)::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* Reading guide */
html.fa11y-reading-guide .fa11y-guide-bar { display: block !important; }
.fa11y-guide-bar {
    display: none; position: fixed; left: 0; width: 100%; height: 12px;
    pointer-events: none; z-index: 9999998;
    background: rgba(var(--fa11y-rgb, 108,92,231), .25);
    border-top: 2px solid var(--fa11y-color, #6C5CE7);
    border-bottom: 2px solid var(--fa11y-color, #6C5CE7);
    transition: top .05s linear;
}

/* Text align — exclude widget */
html.fa11y-text-align-left *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) { text-align: left !important; }
html.fa11y-text-align-center *:not(#flavor-a11y-wrap):not(#flavor-a11y-wrap *) { text-align: center !important; }

/* ─── Zoom via CSS transform (better than body zoom) ─── */
html.fa11y-zoom-medium body:not(#flavor-a11y-wrap) { zoom: 1.25; }
html.fa11y-zoom-large body:not(#flavor-a11y-wrap) { zoom: 1.5; }