/* accessibility-widget.css */
/* Modern Accessibility Widget Styles */

/* Floating Trigger Button */
.accessibility-trigger {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 56px;
  height: 56px;
  background: #1e293b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: all 0.2s ease;
  border: none;
  color: white;
  font-size: 26px;
}

.accessibility-trigger:hover {
  transform: scale(1.05);
  /* background: #0f172a; */
  background: #004bfd;
}

/* Accessibility Panel */
.accessibility-panel {
  position: fixed;
  bottom: 96px;
  left: 24px;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: #0055a5;
  backdrop-filter: blur(0px);
  border-radius: 28px;
  box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border: 1px solid rgba(226, 232, 240, 0.8);
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
}

.accessibility-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Panel Header */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  background: #013970;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}

.panel-header i {
  cursor: pointer;
  font-size: 1.2rem;
  transition: 0.1s;
}

/* Accessibility Options */
.accessibility-options {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.a11y-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.9rem;
  background: #ffffff;
  color: #1e293b;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #e2e8f0;
  font-weight: 500;
}

.a11y-item i {
  width: 24px;
  font-size: 1.2rem;
  color: #3b82f6;
}

.a11y-item span {
  flex: 1;
  font-size: 0.9rem;
}

.a11y-item:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* Active State for Toggled Buttons */
.a11y-item.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.a11y-item.active i {
  color: white;
}

/* Reset Button */
.reset-btn {
  margin-top: 0.5rem;
  background: #eef2ff;
  border: none;
  padding: 0.65rem;
  border-radius: 40px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: #e0e7ff;
}

/* ========== APPLIED ACCESSIBILITY STYLES ========== */

/* Font Size Classes */
body.font-smaller {
  font-size: 14px;
}

body.font-default {
  font-size: 16px;
}

body.font-larger {
  font-size: 18px;
}

body.font-xlarge {
  font-size: 21px;
}

/* Grayscale Mode */
body.grayscale {
  filter: grayscale(100%);
}

/* High Contrast Mode */
body.high-contrast {
  background: #000 !important;
  color: #ffff00 !important;
}

body.high-contrast a,
body.high-contrast p,
body.high-contrast div,
body.high-contrast section,
body.high-contrast header,
body.high-contrast footer,
body.high-contrast article,
body.high-contrast .card,
body.high-contrast button:not(.accessibility-trigger):not(.reset-btn) {
  background: #111 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

body.high-contrast .card i,
body.high-contrast .a11y-item i {
  color: #ffff00 !important;
}

body.high-contrast .accessibility-panel {
  background: #000;
  border-color: #ffff00;
}

body.high-contrast .panel-header {
  background: #111;
  color: #ffff00;
  border-bottom-color: #ffff00;
}

body.high-contrast .a11y-item {
  background: #000;
  border-color: #ffff00;
  color: #ffff00;
}

body.high-contrast .a11y-item.active {
  background: #ffff00;
  color: black;
}

body.high-contrast .a11y-item.active i {
  color: black;
}

body.high-contrast .reset-btn {
  background: #ffff00;
  color: black;
}

/* Underline Links */
body.underline-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* Readable Font (OpenDyslexic) */
@font-face {
  font-family: "OpenDyslexic";
  src: url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/otf/OpenDyslexic-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

body.readable-font {
  font-family: "OpenDyslexic", "Comic Neue", "Segoe UI", sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.6;
}

body.readable-font p,
body.readable-font li,
body.readable-font span:not(.a11y-item span) {
  font-family: "OpenDyslexic", sans-serif !important;
}

/* Responsive Design */
@media (max-width: 480px) {
  .accessibility-panel {
    width: 300px;
    right: 16px;
    bottom: 80px;
  }

  .accessibility-trigger {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 20px;
    font-size: 22px;
  }

  .a11y-item {
    padding: 0.55rem 0.8rem;
  }
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}