/* opendyslexic-latin-400-normal */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff) format("woff");
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#a1s-root *,
body * {
  cursor: inherit;
}

/* #a1s-root */
.a1s_dyslexia-fonts {
  font-family: "OpenDyslexic" !important;
}

/* Floating Button */
.a1s_float-button span {
  display: none;
  transition: all 0.3sec ease-in-out;
  font-size: 16px;
}
.a1s_float-button {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background-color: #ffffff !important;
  color: #111 !important;
  padding: 5px 16px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 10px rgb(0 0 0 / 82%);
  font-size: 22px;
  transition: background-color 0.3s;
  width: 60px;
  transition: all 0.3sec ease-in-out;
  align-items: center;
}

.a1s_float-button:hover {
  display: flex;
  background-color: #666 !important;
  color: #fff !important;
  width: auto;
  transition: all 0.3sec ease-in;
}
.a1s_float-button:hover span {
  display: inherit;
  margin-left: 8px;
  font-size: 16px;
  transition: all 0.3sec ease-in;
}
/* Sidebar Header */
.a1s_sidebar h2 {
  font-size: 1rem;
  color: #555 !important;
  margin-bottom: 20px;
  text-align: center;
}

/* Grid Layout for Buttons */

.a1s_button:hover {
  background-color: #ddd !important;
}

.a1s_button:focus {
  outline: 2px solid #ffd700;
}

/* Icons and Text */
.a1s_icon {
  font-size: 16px;
  margin: 0px 8px;
  display: block;
}

/* Reset Button */
.a1s_reset-button {
  background-color: #e74c3c !important;
}

.a1s_reset-button:hover {
  background-color: #c0392b !important;
}

/* High Contrast Mode */
.a1s_high-contrast {
  background-color: black !important;
  color: yellow !important;
}

/* Pause Animations */
#a1s-root.a1s_pause-animations {
  animation-play-state: paused !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  -webkit-animation-play-state: paused !important;
  -webkit-animation-duration: 0s !important;
  -webkit-animation-delay: 0s !important;
  -webkit-transition-duration: 0s !important;
  -webkit-transition-delay: 0s !important;
}

/* Dyslexia-Friendly Font */
#a1s-root.a1s_dyslexia-fonts {
  font-family: "OpenDyslexic" !important;
}

/* Legible Font */
.a1s_legible-fonts {
  font-family: "Arial", sans-serif !important;
}

/* Line Height and Readability */
.a1s_line-height {
  line-height: 1.8 !important;
}

.a1s_readability {
  letter-spacing: 1px !important;
}

/* Move Sidebar */
.a1s_move-sidebar {
  position: absolute;
  bottom: 20px;
  width: 100%;
  background-color: #444 !important;
  color: white !important;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
}

/* Scrollbar Styling for Sidebar */
.a1s_sidebar::-webkit-scrollbar {
  width: 10px;
}

.a1s_sidebar::-webkit-scrollbar-thumb {
  background-color: #888 !important;
  border-radius: 5px;
}

.a1s_sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #555 !important;
}

/* Dark Mode */
#a1s-root.a1s_dark-mode {
  background-color: #1d1f20 !important;
  color: white !important;
}

/* High Contrast Mode Styles */
#a1s-root.a1s_high-contrast
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    b,
    strong,
    em,
    small,
    mark,
    li,
    i,
    q,
    blockquote,
    label,
    input,
    textarea,
    select,
    option,
    button,
    th,
    td,
    caption,
    code,
    pre,
    kbd,
    samp,
    abbr,
    cite,
    time,
    dt,
    dd,
    address,
    figcaption,
    legend,
    summary,
    details,
    [role="text"],
    [contenteditable="true"]
  ) {
  color: yellow !important;
}

#a1s-root.a1s_high-contrast a:has(img) {
  background-color: transparent !important;
}
#a1s-root.a1s_high-contrast,
#a1s-root.a1s_high-contrast
  :is(
    main,
    section,
    nav,
    header,
    article,
    .card,
    button,
    input,
    textarea,
    i,
    [class*="dropdown-menu"],
    [id*="dropdown-menu"],
    [class*="sidebar"],
    [id*="sidebar"],
    [class*="open"],
    [id*="open"],
    [class*="nav"],
    [id*="nav"],
    [class*="inputs"],
    [class*="input"],
    [id*="input"],
    [class*="header"],
    [id*="header"],
    [class*="card"]
  ) {
  background-color: black !important;
  color: yellow !important;
}
#a1s-root.a1s_high-contrast :is(button, input, textarea, a, [class*="card"], [class*="nav"], [class*="sidebar"]):hover,
#a1s-root.a1s_high-contrast :is(button, input, textarea, a):focus,
#a1s-root.a1s_high-contrast :is(button, input, textarea, a):focus-visible,
#a1s-root.a1s_high-contrast :is(button, a):active {
  background-color: black !important;
  color: yellow !important;
}
#a1s-root.a1s_high-contrast :focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

/* Image Visibility Toggle */
.a1s_hide-images img {
  visibility: hidden;
}

/* Saturation Adjustment */
.a1s_saturation-low {
  filter: saturate(0.5) !important;
}

.a1s_saturation-high {
  filter: saturate(3) !important;
}
.a1s_saturation-desaturate {
  filter: saturate(0) !important;
}

.a1s_saturation-none {
  filter: saturate(1);
}

/* Text Align Options */
.a1s_text-align-left {
  text-align: left;
}

.a1s_text-align-center {
  text-align: center;
}

.a1s_text-align-right {
  text-align: right;
}

.a1s_text-align-justify {
  text-align: justify;
}

/* Image Tool */
.a1s_image-tool {
  display: block;
  width: 100%;
  text-align: center;
}

/* Custom Cursor Modes */
/* Big Cursor */
#a1s-root.a1s_big-cursor {
  cursor: zoom-in;
}

/* Reading Mask */
#a1s-root.a1s_reading-mask {
  cursor: crosshair;
}

/* Magnifier Cursor */
#a1s-root.a1s_magnifier {
  cursor: zoom-in;
}

/* Reading Guide */
#a1s-root.a1s_reading-guide {
  cursor: pointer;
}

/* Sidebar Styling */
.a1s_sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: fit-content;
  height: 100%;
  background-color: #f8f9fa !important;
  color: #333 !important;
  padding: 10px;
  transition: right 0.3s ease-in-out;
  z-index: 1001;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  overflow-x: hidden;
  bottom: 0;
}

/* When Sidebar is open */
.a1s_sidebar.open {
  right: 0;
  padding: 15px;
}

/* Close button for Sidebar */
.a1s_header h3 {
  margin: 0;
  font-size: 20px;
}
.a1s_header {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 4px 0px #737373;
}
.a1s_close-button {
  position: relative;
  font-size: 22px;
  cursor: pointer;
  margin: 0;
  float: right;
  background: #000000;
  color: #fff !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 1;
  border: 0;
  box-shadow: 0px 0px 4px 0px #737373;
}

/* Move Sidebar position */
.a1s_sidebar.move-left {
  left: 0;
  right: auto;
}

.a1s_sidebar.move-right {
  left: auto;
  right: 0;
}

/* Button grid */
.a1s_buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 5px;
}

/* Button card */
.a1s_button {
  background: #fff;
  border-radius: 14px;
  border: 2px solid transparent;
  height: 90px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0px 0px 8px 0px #737373;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
}

.a1s_button:hover {
  background: #f0efff;
}

/* Icon + label */
.a1s_icon {
  font-size: 22px;
}

.a1s_label {
  font-size: 12px;
  text-align: center;
}

/* Active */
.a1s_button.active {
  border-color: #6773ff !important;
  background: #6773ff !important;
  position: relative;
  color: #fff !important;
}
.a1s_button::after {
  width: 64px; /* total space */
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    #6773ff 0,
    #6773ff calc((100% / var(--max)) * var(--level)),
    #ccc calc((100% / var(--max)) * var(--level)),
    #ccc 100%
  );
  border-radius: 4px;
}
.a1s_bullets {
  display: flex;
}
.a1s_bullets span {
  content: "";
  height: 6px;
  width: 10px;
  background: #ffffff;
  margin: 2px;
  border-radius: 6px;
}
.a1s_bullets span.active {
  background: #ffd700;
}
.a1s_button.active::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3a3b4e !important;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.a1s_invert-colors {
  filter: invert(1) hue-rotate(180deg);
}

/* =========================================================
   CUSTOM CURSOR
========================================================= */

/* Medium cursor */
.a1s_cursor-medium,
.a1s_cursor-medium * {
  cursor: url("data:image/svg+xml,%3Csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20x='0px'%20y='0px'%20width='29.188px'%20height='43.625px'%20viewBox='0%200%2029.188%2043.625'%20enable-background='new%200%200%2029.188%2043.625'%3E%3Cpolygon%20fill='%23FFFFFF'%20stroke='%23D9DAD9'%20stroke-width='1.1406'%20stroke-miterlimit='10'%20points='2.8,4.549%2026.847,19.902%2016.964,22.701%2024.239,37.749%2018.278,42.017%209.741,30.724%201.138,35.809'/%3E%3Cpath%20fill='%23212627'%20d='M29.175,21.155c0.071-0.613-0.165-1.253-0.635-1.573L2.165,0.258c-0.424-0.32-0.988-0.346-1.435-0.053C0.282,0.497,0,1.03,0,1.617v34.171c0,0.613,0.306,1.146,0.776,1.439c0.471,0.267,1.059,0.213,1.482-0.16l7.482-6.344l6.847,12.155c0.259,0.48,0.729,0.746,1.2,0.746c0.235,0,0.494-0.08,0.706-0.213l6.988-4.585c0.329-0.213,0.565-0.586,0.659-1.013c0.094-0.426,0.024-0.88-0.188-1.226l-6.376-11.382l8.611-2.745C28.705,22.274,29.105,21.768,29.175,21.155z%20M16.964,22.701c-0.424,0.133-0.776,0.506-0.941,0.96c-0.165,0.48-0.118,1.013,0.118,1.439l6.588,11.781l-4.541,2.985l-6.894-12.315c-0.212-0.373-0.541-0.64-0.941-0.72c-0.094-0.027-0.165-0.027-0.259-0.027c-0.306,0-0.588,0.107-0.847,0.32L2.8,32.59V4.549l21.599,15.806L16.964,22.701z'/%3E%3C/svg%3E")
      10 10,
    auto !important;
}

/* Large cursor */
.a1s_cursor-large,
.a1s_cursor-large * {
  cursor: url("data:image/svg+xml,%3Csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20x='0px'%20y='0px'%20width='58.376px'%20height='87.25px'%20viewBox='0%200%2029.188%2043.625'%20enable-background='new%200%200%2029.188%2043.625'%3E%3Cpolygon%20fill='%23FFFFFF'%20stroke='%23D9DAD9'%20stroke-width='1.1406'%20stroke-miterlimit='10'%20points='2.8,4.549%2026.847,19.902%2016.964,22.701%2024.239,37.749%2018.278,42.017%209.741,30.724%201.138,35.809'/%3E%3Cpath%20fill='%23212627'%20d='M29.175,21.155c0.071-0.613-0.165-1.253-0.635-1.573L2.165,0.258c-0.424-0.32-0.988-0.346-1.435-0.053C0.282,0.497,0,1.03,0,1.617v34.171c0,0.613,0.306,1.146,0.776,1.439c0.471,0.267,1.059,0.213,1.482-0.16l7.482-6.344l6.847,12.155c0.259,0.48,0.729,0.746,1.2,0.746c0.235,0,0.494-0.08,0.706-0.213l6.988-4.585c0.329-0.213,0.565-0.586,0.659-1.013c0.094-0.426,0.024-0.88-0.188-1.226l-6.376-11.382l8.611-2.745C28.705,22.274,29.105,21.768,29.175,21.155z%20M16.964,22.701c-0.424,0.133-0.776,0.506-0.941,0.96c-0.165,0.48-0.118,1.013,0.118,1.439l6.588,11.781l-4.541,2.985l-6.894-12.315c-0.212-0.373-0.541-0.64-0.941-0.72c-0.094-0.027-0.165-0.027-0.259-0.027c-0.306,0-0.588,0.107-0.847,0.32L2.8,32.59V4.549l21.599,15.806L16.964,22.701z'/%3E%3C/svg%3E")
      16 16,
    auto !important;
}

/* Reset */
.a1s_reset {
  margin: 15px auto;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #e6e2f9;
  color: #4b3fd6;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0px 0px 8px 0px #737373;
}

/* Cursor */

/* Base cursor styling on root */
.a1s_cursor-medium,
.a1s_cursor-large {
  cursor: pointer; /* or use a custom image if you like */
}

/* Optional: custom cursor entity if you want a visual circle */
.a1s_cursor-medium::after,
.a1s_cursor-large::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: black;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* Medium cursor size */
.a1s_cursor-medium::after {
  width: 24px;
  height: 24px;
}

/* Large cursor size */
.a1s_cursor-large::after {
  width: 48px;
  height: 48px;
}