/* ============================================
   EasyKA Accessibility Widget - CSS
   Version: 1.0.0
   ============================================ */

/* ============================================
   1. CSS Reset & Global Variables
   ============================================ */
:root {
  --a11y-primary: #2563eb;
  --a11y-primary-hover: #1d4ed8;
  --a11y-bg: #ffffff;
  --a11y-text: #1f2937;
  --a11y-border: #e5e7eb;
  --a11y-shadow: rgba(0, 0, 0, 0.1);
  --a11y-overlay: rgba(0, 0, 0, 0.3);
  --a11y-bg-color: inherit;
  --a11y-text-color: inherit;
  --a11y-link-color: #0645ad;
  --a11y-border-color: currentColor;
}

body {
  background-color: var(--a11y-bg-color);
  color: var(--a11y-text-color);
}

body :is(p, span, li, ul, ol, a, button, input, select, textarea, label, main, section, article, header, footer, nav, blockquote, table, th, td, small, strong):not(:is(.a11y-widget-button, .a11y-widget-panel, .a11y-widget-overlay, .a11y-skip-link, .a11y-widget-button *, .a11y-widget-panel *, .a11y-widget-overlay *, .a11y-skip-link *)) {
  color: var(--a11y-text-color);
}

body a:not(:is(.a11y-widget-button, .a11y-widget-panel *, .a11y-skip-link)) {
  color: var(--a11y-link-color);
}

/* ============================================
   2. Accessibility Button (Floating)
   ============================================ */
.a11y-widget-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--a11y-primary);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--a11y-shadow);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  font-size: 28px;
  line-height: 1;
}

.a11y-widget-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px var(--a11y-shadow);
  background-color: var(--a11y-primary-hover);
}

.a11y-widget-button:focus {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

.a11y-widget-button:active {
  transform: scale(0.95);
}

/* Position variations */
.a11y-widget-button.position-left {
  left: 20px;
  right: auto;
}

.a11y-widget-button.position-top-right {
  top: 20px;
  bottom: auto;
}

.a11y-widget-button.position-top-left {
  top: 20px;
  bottom: auto;
  left: 20px;
  right: auto;
}

/* ============================================
   Skip to Content Link
   ============================================ */
.a11y-skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--a11y-primary);
  color: white;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000001;
  transition: top 0.3s ease;
  box-shadow: 0 4px 12px var(--a11y-shadow);
}

.a11y-skip-link:focus {
  top: 0;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}


/* ============================================
   3. Accessibility Panel
   ============================================ */
.a11y-widget-panel {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) translateX(400px);
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  background-color: var(--a11y-bg);
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--a11y-shadow);
  z-index: 1000000;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.a11y-widget-panel.open {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* RTL positioning */
.a11y-dir-rtl .a11y-widget-panel {
  right: auto;
  left: 20px;
  transform: translateY(-50%) translateX(-400px);
}

.a11y-dir-rtl .a11y-widget-panel.open {
  transform: translateY(-50%) translateX(0);
}

/* Panel Header */
.a11y-panel-header {
  padding: 20px;
  border-bottom: 1px solid var(--a11y-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
}

.a11y-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--a11y-text);
}

.a11y-panel-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.a11y-panel-close:hover {
  background-color: #e5e7eb;
  color: var(--a11y-text);
}

.a11y-panel-close:focus {
  outline: 2px solid var(--a11y-primary);
  outline-offset: 2px;
}

/* Panel Content */
.a11y-panel-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.a11y-profile-group {
  margin-bottom: 20px;
}

.a11y-profile-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--a11y-text);
}

.a11y-profile-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.a11y-profile-button {
  flex: 1 1 calc(50% - 8px);
  padding: 12px;
  border-radius: 8px;
  border: 2px solid var(--a11y-border);
  background-color: #f9fafb;
  color: var(--a11y-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.a11y-profile-button:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.a11y-profile-button:focus {
  outline: 2px solid var(--a11y-primary);
  outline-offset: 2px;
}

.a11y-profile-button.active {
  background-color: #dbeafe;
  border-color: var(--a11y-primary);
  color: var(--a11y-primary);
}

/* Feature Toggle */
.a11y-feature {
  margin-bottom: 16px;
}

.a11y-feature:last-child {
  margin-bottom: 0;
}

.a11y-toggle-button {
  width: 100%;
  padding: 14px 16px;
  background-color: #f9fafb;
  border: 2px solid var(--a11y-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--a11y-text);
  text-align: right;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.a11y-dir-ltr .a11y-toggle-button {
  text-align: left;
}

.a11y-toggle-button:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.a11y-toggle-button:focus {
  outline: 2px solid var(--a11y-primary);
  outline-offset: 2px;
}

.a11y-toggle-button.active {
  background-color: #dbeafe;
  border-color: var(--a11y-primary);
  color: var(--a11y-primary);
}

.a11y-toggle-icon {
  font-size: 20px;
  transition: transform 0.2s;
}

.a11y-toggle-button.active .a11y-toggle-icon {
  transform: scale(1.1);
}

/* Panel Footer */
.a11y-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--a11y-border);
  background-color: #f9fafb;
}

.a11y-reset-button {
  width: 100%;
  padding: 12px;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.a11y-reset-button:hover {
  background-color: #dc2626;
}

.a11y-reset-button:focus {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

.a11y-footer-controls {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.a11y-footer-controls.a11y-footer-row {
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.a11y-footer-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
}

.a11y-footer-label {
  font-size: 13px;
  color: #6b7280;
}

.a11y-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.a11y-select {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--a11y-border);
  background-color: #f9fafb;
  font-size: 13px;
  color: var(--a11y-text);
}

.a11y-lang-button,
.a11y-lang-toggle,
.a11y-position-button {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--a11y-border);
  background-color: #f9fafb;
  font-size: 13px;
  cursor: pointer;
  color: var(--a11y-text);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.a11y-lang-button.active,
.a11y-lang-toggle.active,
.a11y-position-button.active {
  border-color: var(--a11y-primary);
  background-color: #dbeafe;
  color: var(--a11y-primary);
}

/* Overlay */
.a11y-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--a11y-overlay);
  z-index: 999998;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.a11y-widget-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   4. Accessibility Feature Classes
   ============================================ */

/* Contrast Modes via CSS variables */
body.a11y-high-contrast,
body.a11y-contrast-dark {
  --a11y-bg-color: #0a0a0a;
  --a11y-text-color: #ffffff;
  --a11y-link-color: #ffeb3b;
  --a11y-border-color: #f5f5f5;
}

body.a11y-contrast-light {
  --a11y-bg-color: #f8fafc;
  --a11y-text-color: #0f172a;
  --a11y-link-color: #0f52ba;
  --a11y-border-color: #0f172a;
}

body.a11y-contrast-bw {
  --a11y-bg-color: #ffffff;
  --a11y-text-color: #000000;
  --a11y-link-color: #000000;
  --a11y-border-color: #000000;
}

body.a11y-contrast-yellow {
  --a11y-bg-color: #000000;
  --a11y-text-color: #ffeb3b;
  --a11y-link-color: #ffeb3b;
  --a11y-border-color: #ffeb3b;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow) {
  background-color: var(--a11y-bg-color) !important;
  color: var(--a11y-text-color) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow) :not(:is(.a11y-widget-button, .a11y-widget-panel, .a11y-widget-overlay, .a11y-skip-link, .a11y-widget-button *, .a11y-widget-panel *, .a11y-widget-overlay *, .a11y-skip-link *)) {
  background-color: var(--a11y-bg-color) !important;
  color: var(--a11y-text-color) !important;
  border-color: var(--a11y-border-color) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow) a:not(:is(.a11y-widget-button, .a11y-widget-panel *, .a11y-skip-link)) {
  color: var(--a11y-link-color) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow) :is(button, input, select, textarea):not(:is(.a11y-widget-button, .a11y-widget-panel *, .a11y-skip-link)) {
  background-color: var(--a11y-bg-color) !important;
  color: var(--a11y-text-color) !important;
  border: 2px solid var(--a11y-border-color) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow) img:not(:is(.a11y-widget-panel img)) {
  filter: grayscale(100%) contrast(120%);
}

/* Readable Font */
body.a11y-readable-font :not(:is(.a11y-widget-button, .a11y-widget-panel, .a11y-widget-overlay, .a11y-skip-link, .a11y-widget-button *, .a11y-widget-panel *, .a11y-widget-overlay *, .a11y-skip-link *)) {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Highlight Links */
body.a11y-highlight-links a:not(:is(.a11y-widget-button, .a11y-widget-panel *, .a11y-skip-link)) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
  background-color: #ecbf0b !important;
  padding: 2px 4px !important;
  border-radius: 2px !important;
}

/* Reduce Animations */
body.a11y-reduce-animations :not(:is(.a11y-widget-button, .a11y-widget-panel, .a11y-widget-overlay, .a11y-skip-link, .a11y-widget-button *, .a11y-widget-panel *, .a11y-widget-overlay *, .a11y-skip-link *)) {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Increased Text Spacing */
body.a11y-text-spacing :is(p, li, blockquote, dd, dt, label, div):not(:is(.a11y-widget-button, .a11y-widget-panel, .a11y-widget-overlay, .a11y-skip-link, .a11y-widget-button *, .a11y-widget-panel *, .a11y-widget-overlay *, .a11y-skip-link *)) {
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.12em !important;
  margin-bottom: 1.4em !important;
}

/* Reading Column mode: only affect explicit targets */
body.a11y-reading-column {
  background-color: #f5f5f5 !important;
}

body.a11y-reading-column .a11y-reading-target {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px;
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
}

body.a11y-reading-column .a11y-hide-in-reading {
  display: none !important;
}

/* Protect widget UI from global overrides */
body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) :is(.a11y-widget-button, .a11y-widget-panel, .a11y-widget-overlay, .a11y-skip-link) {
  all: revert !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 56px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background-color: var(--a11y-primary) !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px var(--a11y-shadow) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button.position-left {
  left: 20px !important;
  right: auto !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button.position-top-right {
  top: 20px !important;
  bottom: auto !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button.position-top-left {
  top: 20px !important;
  bottom: auto !important;
  left: 20px !important;
  right: auto !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 16px var(--a11y-shadow) !important;
  background-color: var(--a11y-primary-hover) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button:focus {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button:active {
  transform: scale(0.95) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel {
  position: fixed !important;
  top: 50% !important;
  right: 20px !important;
  transform: translateY(-50%) translateX(400px) !important;
  width: 320px !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  background-color: var(--a11y-bg) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px var(--a11y-shadow) !important;
  z-index: 1000000 !important;
  opacity: 0 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel.open {
  transform: translateY(-50%) translateX(0) !important;
  opacity: 1 !important;
}

body.a11y-dir-rtl:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel {
  right: auto !important;
  left: 20px !important;
  transform: translateY(-50%) translateX(-400px) !important;
}

body.a11y-dir-rtl:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel.open {
  transform: translateY(-50%) translateX(0) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: var(--a11y-overlay) !important;
  z-index: 999998 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-overlay.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-skip-link {
  position: fixed !important;
  top: -100px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: var(--a11y-primary) !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 0 0 8px 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  z-index: 1000001 !important;
  transition: top 0.3s ease !important;
  box-shadow: 0 4px 12px var(--a11y-shadow) !important;
}

body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-skip-link:focus {
  top: 0 !important;
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

/* ============================================
   5. Responsive Design
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
  .a11y-widget-button {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
    font-size: 26px;
  }
  
  .a11y-widget-button.position-left {
    left: 16px;
  }
  
  .a11y-widget-panel {
    width: 300px;
    right: 16px;
  }
  
  .a11y-dir-rtl .a11y-widget-panel {
    left: 16px;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button {
    width: 52px !important;
    height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
    font-size: 26px !important;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button.position-left {
    left: 16px !important;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel {
    width: 300px !important;
    right: 16px !important;
  }

  body.a11y-dir-rtl:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel {
    left: 16px !important;
    right: auto !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .a11y-widget-button {
    width: 48px;
    height: 48px;
    bottom: 12px;
    right: 12px;
    font-size: 24px;
  }
  
  .a11y-widget-button.position-left {
    left: 12px;
  }
  
  .a11y-widget-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
    top: auto;
    bottom: 80px;
    right: 12px;
    transform: translateY(150%);
  }
  
  .a11y-widget-panel.open {
    transform: translateY(0);
  }
  
  .a11y-dir-rtl .a11y-widget-panel {
    left: 12px;
    right: auto;
    transform: translateY(150%);
  }
  
  .a11y-dir-rtl .a11y-widget-panel.open {
    transform: translateY(0);
  }
  
  .a11y-panel-header {
    padding: 16px;
  }
  
  .a11y-panel-title {
    font-size: 16px;
  }
  
  .a11y-panel-content {
    padding: 16px;
  }
  
  .a11y-toggle-button {
    padding: 12px 14px;
    font-size: 14px;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button {
    width: 48px !important;
    height: 48px !important;
    bottom: 12px !important;
    right: 12px !important;
    font-size: 24px !important;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-button.position-left {
    left: 12px !important;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 100px) !important;
    top: auto !important;
    bottom: 80px !important;
    right: 12px !important;
    transform: translateY(150%) !important;
  }

  body:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel.open {
    transform: translateY(0) !important;
  }

  body.a11y-dir-rtl:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel {
    left: 12px !important;
    right: auto !important;
    transform: translateY(150%) !important;
  }

  body.a11y-dir-rtl:is(.a11y-high-contrast, .a11y-contrast-dark, .a11y-contrast-light, .a11y-contrast-bw, .a11y-contrast-yellow, .a11y-reading-column, .a11y-text-spacing, .a11y-reduce-animations) .a11y-widget-panel.open {
    transform: translateY(0) !important;
  }
}

/* ============================================
   6. Print Styles
   ============================================ */
@media print {
  .a11y-widget-button,
  .a11y-widget-panel,
  .a11y-widget-overlay {
    display: none !important;
  }
}