/* ==========================================================================
   Custom Accessibility Widget Styles (ITI Capital)
   Replaces UserWay with 100% self-hosted, accessible, zero-dependency widget
   ========================================================================== */

/* Global overflow containment to avoid horizontal expansion */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* --- Floating Trigger Button --- */
#a11y-trigger-btn {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  background: #0048FF !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0, 72, 255, 0.4), 0 2px 6px rgba(0,0,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2147483640 !important;
  border: 2px solid #ffffff !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, left 0.3s ease, right 0.3s ease !important;
  padding: 0 !important;
  outline: none !important;
}

#a11y-trigger-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.5), 0 3px 8px rgba(0,0,0,0.2) !important;
}

#a11y-trigger-btn:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 3px !important;
}

#a11y-trigger-btn.position-right {
  left: auto !important;
  right: 20px !important;
}

#a11y-trigger-btn.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#a11y-trigger-btn svg.a11y-icon-main {
  width: 30px !important;
  height: 30px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  pointer-events: none !important;
}

/* Green Active Checkmark Badge on Trigger Button */
#a11y-active-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 18px !important;
  height: 18px !important;
  background-color: #10B981 !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

#a11y-active-badge svg {
  width: 10px !important;
  height: 10px !important;
  fill: #ffffff !important;
}

#a11y-trigger-btn.has-active-features #a11y-active-badge {
  display: flex !important;
}

/* --- Accessibility Modal / Drawer Panel --- */
#a11y-modal-panel {
  position: fixed !important;
  bottom: 85px !important;
  left: 20px !important;
  right: auto !important;
  width: 360px !important;
  max-width: calc(100% - 40px) !important;
  max-height: calc(100vh - 110px) !important;
  background: #f8fafc !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0,0,0,0.1) !important;
  z-index: 2147483645 !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  border: 1px solid #e2e8f0 !important;
  animation: a11ySlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#a11y-modal-panel.position-right {
  left: auto !important;
  right: 20px !important;
}

#a11y-modal-panel.is-open {
  display: flex !important;
}

@keyframes a11ySlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.a11y-header {
  background: #0048FF !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.2px !important;
}

.a11y-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.a11y-close-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  padding: 0 !important;
}

.a11y-close-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Panel Body & Scroll Area */
.a11y-body {
  padding: 16px 16px 28px 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-height: calc(100vh - 180px) !important;
}

.a11y-body::-webkit-scrollbar {
  width: 6px;
}
.a11y-body::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

/* Feature Grid */
.a11y-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* Individual Feature Card */
.a11y-card {
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  position: relative !important;
  user-select: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  min-height: 104px !important;
}

.a11y-card:hover {
  border-color: #94a3b8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

.a11y-card:focus-visible {
  outline: 3px solid #0048FF !important;
  outline-offset: 2px !important;
}

/* Active State on Card */
.a11y-card.is-active {
  border-color: #0048FF !important;
  background: #f0f5ff !important;
}

/* Active Checkmark Pill on Top-Right of Card */
.a11y-card-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  background: #10B981 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

.a11y-card.is-active .a11y-card-badge {
  display: flex !important;
}

/* Level Indicator Subtitle Pill (e.g. "2/4", "Heavy", etc.) */
.a11y-level-indicator {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: #0048FF !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  display: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.a11y-card.is-active .a11y-level-indicator {
  display: inline-block !important;
}

.a11y-card-icon {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0f172a !important;
}

.a11y-card.is-active .a11y-card-icon {
  color: #0048FF !important;
}

.a11y-card-icon svg {
  width: 26px !important;
  height: 26px !important;
  fill: currentColor !important;
}

.a11y-card-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.a11y-card-sub {
  font-size: 11px !important;
  color: #64748b !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
}

.a11y-card.is-active .a11y-card-sub {
  color: #0048FF !important;
  font-weight: 700 !important;
}

/* Reset All Button */
.a11y-reset-btn {
  background: #0048FF !important;
  color: #ffffff !important;
  border: none !important;
  padding: 13px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 72, 255, 0.3) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.a11y-reset-btn:hover {
  background: #0038d1 !important;
  transform: translateY(-1px) !important;
}

.a11y-reset-btn svg {
  width: 17px !important;
  height: 17px !important;
  fill: #ffffff !important;
}

/* Move & Hide Settings Card */
.a11y-settings-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-top: 10px !important;
}

.a11y-fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.a11y-legend {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  width: 100% !important;
}

/* Position Radio Pills */
.a11y-pos-btn-group {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.a11y-radio-pill {
  flex: 1 !important;
  position: relative !important;
}

.a11y-radio-pill input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.a11y-radio-pill label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
  width: 100% !important;
}

.a11y-radio-pill input[type="radio"]:checked + label {
  background: #0048FF !important;
  color: #ffffff !important;
  border-color: #0048FF !important;
  box-shadow: 0 2px 6px rgba(0, 72, 255, 0.3) !important;
}

.a11y-radio-pill input[type="radio"]:focus-visible + label {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Hide Section */
.a11y-hide-section {
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 8px !important;
}

.a11y-hide-toggle-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 2px !important;
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
}

.a11y-hide-toggle-btn:hover {
  color: #0048FF !important;
}

.a11y-hide-box {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-top: 8px !important;
  display: none !important;
}

.a11y-hide-box.is-visible {
  display: block !important;
}

.a11y-radio-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
}

.a11y-radio-row:last-of-type {
  border-bottom: none !important;
}

.a11y-radio-row label {
  font-size: 12px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
}

.a11y-radio-row input[type="radio"] {
  cursor: pointer !important;
  accent-color: #0048FF !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

.a11y-hide-btns {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.a11y-hide-btns button {
  flex: 1 !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid #0048FF !important;
}

.a11y-btn-cancel {
  background: #ffffff !important;
  color: #0048FF !important;
}

.a11y-btn-confirm {
  background: #0048FF !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Accessibility Feature Implementation Styles
   ========================================================================== */

/* 1. CONTRAST MODES */
/* Invert Colors (applied to html root to keep fixed elements viewport-anchored) */
html.a11y-contrast-invert {
  filter: invert(100%) hue-rotate(180deg) !important;
  background-color: #000000 !important;
}
html.a11y-contrast-invert body {
  background-color: #000000 !important;
}
html.a11y-contrast-invert img,
html.a11y-contrast-invert video,
html.a11y-contrast-invert iframe,
html.a11y-contrast-invert .owl-img,
html.a11y-contrast-invert #a11y-trigger-btn,
html.a11y-contrast-invert #a11y-modal-panel {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Dark High Contrast */
body.a11y-contrast-dark {
  background-color: #121212 !important;
  color: #ffffff !important;
}
body.a11y-contrast-dark *:not(#a11y-modal-panel):not(#a11y-modal-panel *):not(#a11y-trigger-btn):not(#a11y-trigger-btn *) {
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}
body.a11y-contrast-dark a:not(#a11y-modal-panel *) {
  color: #93c5fd !important;
}

/* Light High Contrast */
body.a11y-contrast-light {
  background-color: #ffffff !important;
  color: #000000 !important;
}
body.a11y-contrast-light *:not(#a11y-modal-panel):not(#a11y-modal-panel *):not(#a11y-trigger-btn):not(#a11y-trigger-btn *) {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
body.a11y-contrast-light a:not(#a11y-modal-panel *) {
  color: #0000ee !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

/* 2. HIGHLIGHT LINKS */
body.a11y-highlight-links a:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  background-color: #ffeb3b !important;
  color: #000000 !important;
  text-decoration: underline !important;
  outline: 2px solid #000000 !important;
  outline-offset: 1px !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
}

/* 3. BIGGER TEXT (4 Levels) */
body.a11y-text-lvl-1 { font-size: 110% !important; }
body.a11y-text-lvl-2 { font-size: 120% !important; }
body.a11y-text-lvl-3 { font-size: 130% !important; }
body.a11y-text-lvl-4 { font-size: 140% !important; }

body[class*="a11y-text-lvl-"] *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *):not(i):not(svg) {
  font-size: 1.08em !important;
}

/* 4. TEXT SPACING (3 Levels: Light, Moderate, Heavy) */
body.a11y-spacing-light *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
}
body.a11y-spacing-moderate *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  letter-spacing: 0.14em !important;
  word-spacing: 0.28em !important;
}
body.a11y-spacing-heavy *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  letter-spacing: 0.20em !important;
  word-spacing: 0.40em !important;
}

/* 5. PAUSE ANIMATIONS */
body.a11y-pause-animations *,
body.a11y-pause-animations *::before,
body.a11y-pause-animations *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

/* 6. HIDE IMAGES */
body.a11y-hide-images img:not(#a11y-modal-panel *):not(#a11y-trigger-btn *),
body.a11y-hide-images svg:not(#a11y-modal-panel *):not(#a11y-trigger-btn *),
body.a11y-hide-images video,
body.a11y-hide-images iframe,
body.a11y-hide-images [style*="background-image"]:not(#a11y-modal-panel *) {
  opacity: 0.05 !important;
  filter: blur(8px) !important;
}

/* 7. DYSLEXIA / LEGIBLE FONTS (2 Levels) */
@import url('https://fonts.googleapis.com/css2?family=OpenDyslexic&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

body.a11y-font-dyslexia *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *):not(i):not(.fa) {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}
body.a11y-font-legible *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *):not(i):not(.fa) {
  font-family: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif !important;
}

/* 8. CURSOR MODES (3 Levels: Big Cursor, Reading Mask, Reading Guide) */
body.a11y-cursor-big,
body.a11y-cursor-big * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' stroke='%23ffffff' stroke-width='2' d='M4.5 3.5l7 17.5 3-7.5 7.5-3z'/%3E%3C/svg%3E"), auto !important;
}

/* Reading Mask */
#a11y-reading-mask-top,
#a11y-reading-mask-bottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(0, 0, 0, 0.65) !important;
  pointer-events: none !important;
  z-index: 2147483630 !important;
  display: none !important;
}
body.a11y-cursor-mask #a11y-reading-mask-top,
body.a11y-cursor-mask #a11y-reading-mask-bottom {
  display: block !important;
}

/* Reading Guide Ruler */
#a11y-reading-guide-line {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 6px !important;
  background: #EF4023 !important;
  box-shadow: 0 0 10px rgba(239, 64, 35, 0.8) !important;
  pointer-events: none !important;
  z-index: 2147483635 !important;
  display: none !important;
  transform: translateY(-50%) !important;
}
body.a11y-cursor-guide #a11y-reading-guide-line {
  display: block !important;
}

/* 9. TOOLTIPS */
#a11y-tooltip-display {
  position: fixed !important;
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  z-index: 2147483648 !important;
  pointer-events: none !important;
  display: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  max-width: 320px !important;
  line-height: 1.4 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
body.a11y-tooltips-on #a11y-tooltip-display.is-shown {
  display: block !important;
}

/* 10. LINE HEIGHT (3 Levels) */
body.a11y-line-height-1 *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  line-height: 1.75 !important;
}
body.a11y-line-height-2 *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  line-height: 2.0 !important;
}
body.a11y-line-height-3 *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  line-height: 2.3 !important;
}

/* 11. TEXT ALIGN (4 Levels: Left, Right, Center, Justify) */
body.a11y-align-left *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  text-align: left !important;
}
body.a11y-align-right *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  text-align: right !important;
}
body.a11y-align-center *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  text-align: center !important;
}
body.a11y-align-justify *:not(#a11y-modal-panel *):not(#a11y-trigger-btn *) {
  text-align: justify !important;
}

/* 12. SATURATION (3 Levels: Low, High, Monochrome) - Applied to html root */
html.a11y-saturation-low {
  filter: saturate(50%) !important;
}
html.a11y-saturation-high {
  filter: saturate(180%) !important;
}
html.a11y-saturation-mono {
  filter: grayscale(100%) !important;
}
html.a11y-saturation-low #a11y-modal-panel,
html.a11y-saturation-high #a11y-modal-panel,
html.a11y-saturation-mono #a11y-modal-panel,
html.a11y-saturation-low #a11y-trigger-btn,
html.a11y-saturation-high #a11y-trigger-btn,
html.a11y-saturation-mono #a11y-trigger-btn {
  filter: none !important;
}