/* =============================================
   Accessibility Widget
   ============================================= */

/* Trigger Button */
.acc-trigger-btn {
  position: fixed;
  bottom: 30px;
  left: 20px;
  z-index: 9998;
  background: var(--rv-secondary);
  color: var(--rv-secondary);
  border-radius: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(196, 151, 90, 0.4);

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;

  /* Collapsed — shows only icon + Ctrl+F2 */
  width: 50px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}

.acc-trigger-btn:hover {
  width: 220px;
  background: var(--rv-secondary);
  box-shadow: 0 6px 26px rgba(196, 151, 90, 0.5);
}

/* Icon + Ctrl+F2 stacked, always visible */
.acc-trigger-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;


}

.acc-trigger-btn svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.acc-trigger-shortcut {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  letter-spacing: 0.02em;
  font-weight: 600;
  white-space: nowrap;
}

/* "Accessibility Options" — hidden by default, slides in from left on hover */
.acc-trigger-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--rv-primary);
  white-space: nowrap;

  letter-spacing: 0.01em;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.22s ease 0.14s, transform 0.22s ease 0.14s;
}

.acc-trigger-btn:hover .acc-trigger-label {
  opacity: 1;
  transform: translateX(0);
}

/* Panel */
.acc-panel {
  position: fixed;
  bottom: 15px;
  left: -320px;
  width: 300px;
  max-height: 92vh;
  background: var(--rv-primary);
  z-index: 9999;
  border-radius: 0 14px 14px 0;
  box-shadow: 6px 0 28px rgba(196, 151, 90, 0.18);
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  border: 2px solid #fff;
  border-left: unset;
  flex-direction: column;
  overflow: hidden;
}

.acc-panel.acc-open {
  left: 0;
}

/* Panel Header */
.acc-panel-header {
  background: var(--rv-secondary);
  color: var(--rv-primary);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.acc-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.acc-panel-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-shortcut-badge {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.acc-close-btn {
  background: none;
  border: none;
  color: var(--rv-primary);
  font-size: 42px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.acc-close-btn:hover {
  opacity: 1;
}

/* Grid */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.acc-grid::-webkit-scrollbar {
  width: 5px;
}

.acc-grid::-webkit-scrollbar-track {
  background: var(--rv-primary);
}

.acc-grid::-webkit-scrollbar-thumb {
  background: rgba(196, 151, 90, 0.3);
  border-radius: 3px;
}

/* Grid Items */
.acc-item {
  position: relative;
  background: var(--rv-primary);
  border-radius: 11px;
  padding: 13px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(196, 151, 90, 0.12);
  transition: border-color 0.18s, background 0.18s;
  text-align: center;
  user-select: none;
  min-height: 82px;
}

.acc-item:hover {
  border-color: var(--rv-secondary);
  background: #052168;
}

.acc-item.acc-item-active {
  border-color: var(--rv-secondary);
  background: var(--rv-primary);
}

.acc-item svg {
  width: 30px;
  height: 30px;
  margin-bottom: 7px;
  color: var(--rv-white);
  stroke: var(--rv-white);
  fill: none;
  display: block;
  stroke-width: 1.8;
}

/* Force all SVG child elements to inherit the gold color */
.acc-item svg path,
.acc-item svg line,
.acc-item svg circle,
.acc-item svg rect,
.acc-item svg polyline,
.acc-item svg polygon,
.acc-item svg ellipse {
  stroke: var(--rv-white);
  color: var(--rv-white);
}

/* Filled icons (Saturation, Invert, etc.) keep their fill */
.acc-item svg path[fill="currentColor"] {
  fill: var(--rv-white);
  stroke: none;
}

.acc-item-label {
  font-size: 12px;
  color: var(--rv-white);
  font-weight: 600;
  line-height: 1.25;
}

/* Smaller Text card — disabled look when bigger text is not active */
.acc-item.acc-item-muted {
  opacity: 1;
  border-color: var(--rv-secondary);
  background: var(--rv-primary);
  pointer-events: none;
  cursor: default;
}

/* Stepper items (Bigger / Smaller Text) — click the card to cycle steps */
.acc-item-stepper {
  min-height: 96px;
}

/* Checkmark badge — shown when level > 0 */
.acc-item-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  background: var(--rv-secondary);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.acc-item.acc-item-active .acc-item-check {
  display: flex;
}

/* Progress dashes — 4 segments, filled = active steps */
.acc-steps {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}

.acc-step-dash {
  flex: 1;
  height: 3px;
  background: rgba(196, 151, 90, 0.2);
  border-radius: 2px;
  transition: background 0.2s;
}

.acc-step-dash.acc-dash-on {
  background: var(--rv-secondary);
}

/* Reset Button */
.acc-reset-btn {
  background: var(--rv-secondary);
  color: var(--rv-primary);
  border: none;
  padding: 13px;
  width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: opacity 0.18s;
}

.acc-reset-btn:hover {
  opacity: 0.88;
}

.acc-reset-btn svg {
  width: 15px;
  height: 15px;
}

/* =============================================
   Applied Accessibility Effects
   ============================================= */

/* font-size for bigger/smaller is applied inline on #acc-page-wrapper via JS */



/* Line Height — text elements only; skipping layout/icon elements */
body.acc-line-height p,
body.acc-line-height h1,
body.acc-line-height h2,
body.acc-line-height h3,
body.acc-line-height h4,
body.acc-line-height h5,
body.acc-line-height h6,
body.acc-line-height li,
body.acc-line-height td,
body.acc-line-height th,
body.acc-line-height span,
body.acc-line-height a,
body.acc-line-height label,
body.acc-line-height button,
body.acc-line-height input,
body.acc-line-height textarea {
  line-height: 1.9;
}

body.acc-dyslexia,
body.acc-dyslexia * {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.06em;
  word-spacing: 0.1em;
}

body.acc-highlight-links a {
  background: #ffff00;
  color: #000000;
  text-decoration: underline;
  padding: 0 2px;
  border-radius: 2px;
}

body.acc-hide-images img,
body.acc-hide-images [style*="background-image"] {
  visibility: hidden !important;
}

/* Applied to wrapper (not body) so the widget's own slide animation is never frozen */
#acc-page-wrapper.acc-pause-anim *,
#acc-page-wrapper.acc-pause-anim *::before,
#acc-page-wrapper.acc-pause-anim *::after {
  animation-play-state: paused;
  transition-duration: 0s;
  animation-duration: 0s;
}

body.acc-big-cursor,
body.acc-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23C4975A' stroke='white' stroke-width='1.5' d='M4 4 L4 30 L12 22 L18 36 L23 34 L17 20 L28 20 Z'/%3E%3C/svg%3E") 4 4, auto;
}

/* ADHD reading focus */
body.acc-adhd {
  position: relative;
}

.acc-adhd-overlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 99990;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
  height: 80px;
  border-top: 2px solid rgba(255, 220, 0, 0.55);
  border-bottom: 2px solid rgba(255, 220, 0, 0.55);
  transition: top 0.05s linear;
}

body.acc-adhd .acc-adhd-overlay {
  display: block;
}

/* =============================================
   Language Bar
   ============================================= */

.acc-section-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}


/* =============================================
   Color Theme Bar
   ============================================= */

.acc-theme-bar {
  padding: 9px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.acc-theme-options {
  display: flex;
  gap: 8px;
}

.acc-theme-btn {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  border: 2.5px solid transparent;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  font-family: Georgia, serif;
}

.acc-theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.acc-theme-btn.acc-theme-active {
  border-color: #f0c040;
  box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.32);
}

.acc-theme-btn[data-theme="white"] {
  background: #ffffff;
  color: #111111;
}

.acc-theme-btn[data-theme="black"] {
  background: #111111;
  color: #f0c040;
}

.acc-theme-btn[data-theme="gray"] {
  background: #6b6b6b;
  color: #ffffff;
}

/* =============================================
   BLACK THEME — proper dark mode
   Uses `background` shorthand (not background-color)
   so it also clears gradients and background-images
   ============================================= */

#acc-page-wrapper.acc-theme-black {
  background: #141414 !important;
  color: #d0d0d0 !important;
}

/* One rule covers EVERY element — background shorthand clears
   any gradient/image that was previously set on the element */
#acc-page-wrapper.acc-theme-black *:not([class*="acc-"]):not(img):not(video):not(svg):not(canvas):not(iframe):not(script):not(style) {
  background: #141414 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Slightly lighter for cards/boxes to preserve visual hierarchy */
#acc-page-wrapper.acc-theme-black .card,
#acc-page-wrapper.acc-theme-black [class*="-card"],
#acc-page-wrapper.acc-theme-black [class*="-step"],
#acc-page-wrapper.acc-theme-black [class*="-box"],
#acc-page-wrapper.acc-theme-black [class*="-block"],
#acc-page-wrapper.acc-theme-black [class*="-item"],
#acc-page-wrapper.acc-theme-black [class*="-panel"],
#acc-page-wrapper.acc-theme-black [class*="-stat"],
#acc-page-wrapper.acc-theme-black [class*="-widget"] {
  background: #1f1f1f !important;
}

/* Headings — bright white */
#acc-page-wrapper.acc-theme-black h1,
#acc-page-wrapper.acc-theme-black h2,
#acc-page-wrapper.acc-theme-black h3,
#acc-page-wrapper.acc-theme-black h4,
#acc-page-wrapper.acc-theme-black h5,
#acc-page-wrapper.acc-theme-black h6 {
  color: #f0f0f0 !important;
}

/* Body text — light gray */
#acc-page-wrapper.acc-theme-black p,
#acc-page-wrapper.acc-theme-black span,
#acc-page-wrapper.acc-theme-black li,
#acc-page-wrapper.acc-theme-black td,
#acc-page-wrapper.acc-theme-black th,
#acc-page-wrapper.acc-theme-black label,
#acc-page-wrapper.acc-theme-black strong,
#acc-page-wrapper.acc-theme-black em,
#acc-page-wrapper.acc-theme-black small,
#acc-page-wrapper.acc-theme-black div,
#acc-page-wrapper.acc-theme-black button:not([class*="acc-"]) {
  color: #d0d0d0 !important;
}

#acc-page-wrapper.acc-theme-black a {
  color: #82baff !important;
}

/* Images and video — completely untouched */
#acc-page-wrapper.acc-theme-black img,
#acc-page-wrapper.acc-theme-black video,
#acc-page-wrapper.acc-theme-black iframe {
  background: transparent !important;
  filter: none !important;
}

/* =============================================
   GRAY THEME — gray backgrounds, normal images
   Same technique: background shorthand clears gradients
   ============================================= */

#acc-page-wrapper.acc-theme-gray {
  background: #6b6b6b !important;
  color: #ffffff !important;
}

#acc-page-wrapper.acc-theme-gray *:not([class*="acc-"]):not(img):not(video):not(svg):not(canvas):not(iframe):not(script):not(style) {
  background: #6b6b6b !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Slightly lighter cards */
#acc-page-wrapper.acc-theme-gray .card,
#acc-page-wrapper.acc-theme-gray [class*="-card"],
#acc-page-wrapper.acc-theme-gray [class*="-step"],
#acc-page-wrapper.acc-theme-gray [class*="-box"],
#acc-page-wrapper.acc-theme-gray [class*="-block"],
#acc-page-wrapper.acc-theme-gray [class*="-item"],
#acc-page-wrapper.acc-theme-gray [class*="-panel"],
#acc-page-wrapper.acc-theme-gray [class*="-stat"],
#acc-page-wrapper.acc-theme-gray [class*="-widget"] {
  background: #7a7a7a !important;
}

#acc-page-wrapper.acc-theme-gray h1,
#acc-page-wrapper.acc-theme-gray h2,
#acc-page-wrapper.acc-theme-gray h3,
#acc-page-wrapper.acc-theme-gray h4,
#acc-page-wrapper.acc-theme-gray h5,
#acc-page-wrapper.acc-theme-gray h6 {
  color: #ffffff !important;
}

#acc-page-wrapper.acc-theme-gray p,
#acc-page-wrapper.acc-theme-gray span,
#acc-page-wrapper.acc-theme-gray li,
#acc-page-wrapper.acc-theme-gray td,
#acc-page-wrapper.acc-theme-gray th,
#acc-page-wrapper.acc-theme-gray label,
#acc-page-wrapper.acc-theme-gray strong,
#acc-page-wrapper.acc-theme-gray em,
#acc-page-wrapper.acc-theme-gray small,
#acc-page-wrapper.acc-theme-gray div,
#acc-page-wrapper.acc-theme-gray button:not([class*="acc-"]) {
  color: #f0f0f0 !important;
}

#acc-page-wrapper.acc-theme-gray a {
  color: #ffffff !important;
}

/* Images and video — completely untouched */
#acc-page-wrapper.acc-theme-gray img,
#acc-page-wrapper.acc-theme-gray video,
#acc-page-wrapper.acc-theme-gray iframe {
  background: transparent !important;
  filter: none !important;
}