/* =====================================================
   ACCESSIBILITY PANEL  –  trigger + slide-out panel
   ===================================================== */

#acc-trigger {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8000;
    width: 52px;
    height: 52px;
    background: #1a6fb5;
    border: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 12px rgba(0,0,0,.25);
    transition: background .2s, opacity .2s;
    padding: 0;
}
#acc-trigger:hover    { background: #135494; }
#acc-trigger svg      { width: 30px; height: 30px; fill: #fff; display: block; }
/* hide trigger while panel is open */
body.acc-panel-open #acc-trigger { opacity: 0; pointer-events: none; }

#acc-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: #f4f6f9;
    border-radius: 0 16px 16px 0;
    box-shadow: 6px 0 40px rgba(0,0,0,.28);
    z-index: 8002;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
#acc-panel.acc-open {
    transform: translateX(0);
}

.acc-header {
    background: linear-gradient(135deg, #1255a0 0%, #1a8fd1 100%);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.acc-header-left { display: flex; align-items: center; gap: 12px; }
.acc-header-icon {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acc-header-icon svg { width: 22px; height: 22px; fill: #fff; }
.acc-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.acc-header p  { margin: 2px 0 0; font-size: 11px; color: rgba(255,255,255,.75); }
.acc-close {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 22px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
    line-height: 1;
}
.acc-close:hover { background: rgba(255,255,255,.3); }

.acc-body { overflow-y: auto; padding: 20px 22px; flex: 1; }

.acc-section { margin-bottom: 20px; }
.acc-section-title {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: #8a93a2; margin-bottom: 10px;
    padding-bottom: 5px; border-bottom: 1px solid #dde2ea;
}

.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.acc-btn {
    background: #fff;
    border: 2px solid #e2e6ed;
    border-radius: 11px;
    padding: 13px 6px 11px;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    color: #444;
    transition: border-color .15s, background .15s, box-shadow .15s;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.acc-btn i { font-size: 20px; color: #1a6fb5; }
.acc-btn:hover { border-color: #1a6fb5; background: #eef5fd; }
.acc-btn.acc-active {
    background: #1a6fb5; border-color: #1a6fb5;
    color: #fff; box-shadow: 0 3px 10px rgba(26,111,181,.28);
}
.acc-btn.acc-active i { color: #fff; }

.acc-stepper {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 2px solid #e2e6ed; border-radius: 11px;
    padding: 9px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-bottom: 8px;
}
.acc-step-btn {
    background: #eef5fd; border: none; border-radius: 7px;
    min-width: 42px; height: 36px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #1a6fb5;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .15s; padding: 0 8px;
    font-family: Arial, Helvetica, sans-serif;
}
.acc-step-btn:hover { background: #d4e8f8; }
.acc-step-label {
    flex: 1; text-align: center;
    font-size: 13px; font-weight: 600; color: #555;
}

.acc-align-row { display: flex; gap: 8px; }
.acc-align-row .acc-btn { flex: 1; padding: 11px 4px 9px; }

/* Color swatches */
.acc-swatch-section { margin-bottom: 14px; }
.acc-swatch-label {
    font-size: 11px; font-weight: 600; color: #555;
    margin-bottom: 7px; display: flex; align-items: center; gap: 6px;
}
.acc-swatch-label i { font-size: 13px; color: #1a6fb5; }
.acc-swatches {
    display: flex; flex-wrap: wrap; gap: 7px;
    background: #fff; border: 2px solid #e2e6ed; border-radius: 11px;
    padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.acc-swatch {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .12s, box-shadow .12s;
    outline: none;
}
.acc-swatch:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.acc-swatch.acc-active {
    outline: 3px solid #1a6fb5;
    outline-offset: 2px;
    transform: scale(1.15);
}
.acc-color-reset {
    width: 28px; height: 28px; border-radius: 50%; border: 2px dashed #c8cfd9;
    cursor: pointer; flex-shrink: 0; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #999; transition: border-color .12s, color .12s;
}
.acc-color-reset:hover { border-color: #888; color: #555; }

.acc-footer {
    padding: 10px 22px 16px; flex-shrink: 0;
    border-top: 1px solid #dde2ea; display: flex; justify-content: center;
    background: #f4f6f9;
}
.acc-reset-btn {
    background: none; border: 2px solid #c8cfd9; border-radius: 10px;
    padding: 9px 28px; cursor: pointer;
    font-size: 13px; font-family: Arial, Helvetica, sans-serif;
    color: #666; font-weight: 600; transition: border-color .15s, color .15s;
    display: flex; align-items: center; gap: 7px;
}
.acc-reset-btn:hover { border-color: #999; color: #333; }

/* =====================================================
   EXCLUSION SHORTHAND
   All filter/contrast effects exclude the panel,
   the trigger, reading masks, magnifier AND the
   cookie-consent popup (.popup).
   ===================================================== */
/* (used in comments below as reference) */

/* =====================================================
   HIGH CONTRAST – contrast(150%) on all page content
   ===================================================== */
body.acc-hc > *:not(#acc-panel):not(#acc-trigger):not(#acc-reading-mask-top):not(#acc-reading-mask-bottom):not(#acc-magn):not(.popup) {
    filter: contrast(150%) !important;
}

/* =====================================================
   MONOCHROME
   ===================================================== */
body.acc-mono > *:not(#acc-panel):not(#acc-trigger):not(#acc-reading-mask-top):not(#acc-reading-mask-bottom):not(#acc-magn):not(.popup) {
    filter: grayscale(100%) !important;
}

/* =====================================================
   HIGH SATURATION
   ===================================================== */
body.acc-sat-high > *:not(#acc-panel):not(#acc-trigger):not(#acc-reading-mask-top):not(#acc-reading-mask-bottom):not(#acc-magn):not(.popup) {
    filter: saturate(250%) !important;
}

/* =====================================================
   LOW SATURATION
   ===================================================== */
body.acc-sat-low > *:not(#acc-panel):not(#acc-trigger):not(#acc-reading-mask-top):not(#acc-reading-mask-bottom):not(#acc-magn):not(.popup) {
    filter: saturate(25%) !important;
}

/* =====================================================
   DARK CONTRAST – element selectors (NOT filter)
   Only targets text-bearing elements, NOT structural
   containers (div, section, header, nav, footer, main)
   to avoid covering decorative backgrounds & images.
   ===================================================== */
body.acc-dc {
    background-color: #181818 !important;
}
body.acc-dc p,
body.acc-dc li,
body.acc-dc label,
body.acc-dc span,
body.acc-dc td,
body.acc-dc th,
body.acc-dc blockquote,
body.acc-dc code,
body.acc-dc pre,
body.acc-dc input,
body.acc-dc select,
body.acc-dc textarea,
body.acc-dc figcaption {
    color: #e8e8e8 !important;
    background-color: #181818 !important;
}
body.acc-dc h1, body.acc-dc h2, body.acc-dc h3,
body.acc-dc h4, body.acc-dc h5, body.acc-dc h6 {
    color: #a2e6cc !important;
    background-color: transparent !important;
}
body.acc-dc a {
    color: #f7c79b !important;
}
/* Ensure all direct body children have dark bg so no white gaps */
body.acc-dc > *:not(#acc-panel):not(#acc-trigger):not(#acc-reading-mask-top):not(#acc-reading-mask-bottom):not(#acc-magn):not(.popup) {
    background-color: #181818 !important;
}

/* ── Protect panel + cookie popup from dark contrast ── */
body.acc-dc #acc-panel,
body.acc-dc #acc-panel *          { background-color: transparent !important; color: inherit !important; }
body.acc-dc #acc-panel             { background-color: #f4f6f9 !important; color: #222 !important; }
body.acc-dc #acc-panel .acc-header { background: linear-gradient(135deg, #1255a0 0%, #1a8fd1 100%) !important; }
body.acc-dc #acc-panel .acc-header,
body.acc-dc #acc-panel .acc-header * { color: #fff !important; }
body.acc-dc #acc-panel .acc-btn   { background: #fff !important; color: #444 !important; border-color: #e2e6ed !important; }
body.acc-dc #acc-panel .acc-btn i { color: #1a6fb5 !important; }
body.acc-dc #acc-panel .acc-btn.acc-active,
body.acc-dc #acc-panel .acc-btn.acc-active i { background: #1a6fb5 !important; color: #fff !important; border-color: #1a6fb5 !important; }
body.acc-dc #acc-panel .acc-stepper { background: #fff !important; border-color: #e2e6ed !important; }
body.acc-dc #acc-panel .acc-step-btn { background: #eef5fd !important; color: #1a6fb5 !important; }
body.acc-dc #acc-panel .acc-step-label { color: #555 !important; }
body.acc-dc #acc-panel .acc-section-title { color: #8a93a2 !important; }
body.acc-dc #acc-panel .acc-swatches { background: #fff !important; border-color: #e2e6ed !important; }
body.acc-dc #acc-panel .acc-footer { background: #f4f6f9 !important; }
body.acc-dc #acc-panel .acc-reset-btn { color: #666 !important; background: transparent !important; border-color: #c8cfd9 !important; }
body.acc-dc #acc-panel .acc-body { background: #f4f6f9 !important; }
body.acc-dc #acc-trigger { background: #1a6fb5 !important; }
/* protect cookie popup */
body.acc-dc .popup,
body.acc-dc .popup * { background-color: revert !important; color: revert !important; }

/* =====================================================
   OTHER MODIFIERS
   ===================================================== */

/* Highlight links – exclude panel links */
body.acc-highlight-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid #1a6fb5 !important; outline-offset: 1px !important; }
body.acc-highlight-links #acc-panel a { text-decoration: none !important; outline: none !important; }

/* Highlight headings – exclude panel h2 */
body.acc-highlight-headings h1, body.acc-highlight-headings h2,
body.acc-highlight-headings h3, body.acc-highlight-headings h4,
body.acc-highlight-headings h5, body.acc-highlight-headings h6 { outline: 2px dashed #c00 !important; outline-offset: 3px !important; }
body.acc-highlight-headings #acc-panel h2 { outline: none !important; }

/* Readable font – exclude panel */
body.acc-readable-font p, body.acc-readable-font li,
body.acc-readable-font td, body.acc-readable-font label, body.acc-readable-font span {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: .04em !important; word-spacing: .12em !important; line-height: 1.75 !important;
}
body.acc-readable-font #acc-panel,
body.acc-readable-font #acc-panel * { letter-spacing: normal !important; word-spacing: normal !important; line-height: normal !important; }

/* Stop animations – exclude panel slide transition */
body.acc-stop-animations *:not(#acc-panel):not(#acc-trigger),
body.acc-stop-animations *:not(#acc-panel)::before,
body.acc-stop-animations *:not(#acc-panel)::after { animation: none !important; transition: none !important; }

/* Hide images – exclude panel */
body.acc-hide-images img:not(#acc-panel img) { visibility: hidden !important; }
body.acc-hide-images * { background-image: none !important; }
/* Explicitly restore panel header gradient – higher specificity (#acc-panel .acc-header) beats body.acc-hide-images * */
body.acc-hide-images #acc-panel .acc-header {
    background: linear-gradient(135deg, #1255a0 0%, #1a8fd1 100%) !important;
}

/* Focus highlight – exclude panel */
body.acc-highlight-focus :focus:not(#acc-panel *) {
    outline: 4px solid #e53935 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(229,57,53,.25) !important;
}

/* Hover highlight – exclude panel */
body.acc-highlight-hover *:not(#acc-panel):not(#acc-panel *):hover {
    outline: 3px solid #ff6600 !important;
    outline-offset: 2px !important;
}

/* Reading mask */
#acc-reading-mask-top,
#acc-reading-mask-bottom {
    display: none; position: fixed; left: 0; width: 100%;
    background: rgba(0,0,0,.7); z-index: 7990; pointer-events: none;
}
body.acc-reading-mask #acc-reading-mask-top,
body.acc-reading-mask #acc-reading-mask-bottom { display: block; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 440px) {
    #acc-panel  { width: 100vw; border-radius: 0; }
    .acc-body   { padding: 14px; }
    .acc-grid   { grid-template-columns: repeat(2, 1fr); }
}