/* =====================================
   MPK ACCESSIBILITY
===================================== */

#mpk-accessibility {
  font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 600px) {

  .mpk-accessibility-toggle {
    left: 0;
    top: 50%;

    padding: 12px;

    border-radius: 0 22px 22px 0;
  }

  .mpk-accessibility-toggle-text {
    display: none;
  }

  .mpk-accessibility-panel {
    left: 10px;
    right: 10px;
    top: 50%;

    width: auto;
    max-height: 85vh;

    transform: translateY(-50%);
  }
}

/* Floating button */
.mpk-accessibility-toggle {
  position: fixed !important;

  left: 0 !important;
  right: auto !important;

  top: 20% !important;
  bottom: auto !important;

  transform: none !important;

  z-index: 999999 !important;

  margin: 0 !important;

  border: 0;
  border-radius: 0 25px 25px 0;

  padding: 12px 16px;

  background: #004b87;
  color: #fff;

  font-size: 40px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 3px 3px 12px rgba(0, 0, 0, .25);

}

.mpk-accessibility-toggle:hover,
.mpk-accessibility-toggle:focus {
  background: #00355f;
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}


/* Panel */
.mpk-accessibility-panel {
  position: fixed;

  left: 70px;
  top: 20%;

  width: 340px;
  max-height: 75vh;

  overflow-y: auto;

  z-index: 99999;

  background: #fff;
  color: #222;

  border-radius: 10px;

  box-shadow: 0 5px 30px rgba(0,0,0,.3);
}


/* Header */

.mpk-accessibility-header {

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  background: #004b87;
  color: #fff;

  border-radius:
    10px 10px 0 0;
}

.mpk-accessibility-header strong {
  display: block;
  font-size: 19px;
}

.mpk-accessibility-header small {
  display: block;
  margin-top: 2px;
  opacity: .9;
}

.mpk-accessibility-close {

  background: transparent;
  border: 0;

  color: #fff;

  font-size: 28px;

  cursor: pointer;
}


/* Content */

.mpk-accessibility-content {
  padding: 15px;
}

.mpk-accessibility-section {

  padding-bottom: 14px;
  margin-bottom: 14px;

  border-bottom:
    1px solid #ddd;
}

.mpk-accessibility-title {

  margin-bottom: 9px;

  font-weight: 700;
}


/* Text controls */

.mpk-accessibility-text-controls {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 7px;
}

.mpk-accessibility-text-controls button {

  min-height: 44px;

  border:
    1px solid #ccc;

  background: #f5f5f5;

  border-radius: 5px;

  cursor: pointer;

  font-weight: 700;
color: #222;
}
.mpk-accessibility-text-controls button:hover{
 background: #37628e;
 color: #fff;
} 




/* Option */

.mpk-accessibility-option {

  display: flex;

  width: 100%;

  align-items: center;

  gap: 10px;

  min-height: 46px;

  padding: 9px 10px;

  margin-bottom: 6px;

  border:
    1px solid #ddd;

  border-radius: 5px;

  background: #fff;

  color: #222;

  text-align: left;

  cursor: pointer;
}

.mpk-accessibility-option:hover,
.mpk-accessibility-option:focus {

  background: #f1f6fa;

  border-color: #004b87;
}

.mpk-accessibility-option.is-active {

  background: #004b87;

  color: #fff;

  border-color: #004b87;
}


/* Select */

#mpk-color-mode {

  width: 100%;

  min-height: 44px;

  padding: 7px;

  border:
    1px solid #aaa;

  border-radius: 5px;
}


/* Reset */

.mpk-accessibility-reset {

  width: 100%;

  padding: 12px;

  border: 0;

  border-radius: 5px;

  background: #444;

  color: #fff;

  cursor: pointer;

  font-weight: 600;
}


/* =====================================
   ACCESSIBILITY MODES
===================================== */

/* High contrast */

html.mpk-high-contrast body {

  background: #000 !important;

  color: #fff !important;
}

html.mpk-high-contrast body * {

  border-color: #fff !important;
}

html.mpk-high-contrast a {

  color: #ffff00 !important;

  text-decoration: underline !important;
}


/* Grayscale */

html.mpk-grayscale {

  filter: grayscale(100%);
}


/* Highlight links */

html.mpk-highlight-links a {

  text-decoration: underline !important;

  outline:
    2px solid currentColor;

  outline-offset: 2px;

  font-weight: 700 !important;
}


/* Text spacing */

html.mpk-text-spacing body {

  letter-spacing: .08em !important;

  word-spacing: .12em !important;

  line-height: 1.8 !important;
}


/* Readable font */

html.mpk-readable-font body,
html.mpk-readable-font button,
html.mpk-readable-font input,
html.mpk-readable-font select,
html.mpk-readable-font textarea {

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
}


/* =====================================
   COLOR VISION MODES
===================================== */

html.mpk-protanopia body {
  filter:
    saturate(.8)
    sepia(.15)
    hue-rotate(-10deg);
}

html.mpk-deuteranopia body {
  filter:
    saturate(.75)
    sepia(.1)
    hue-rotate(15deg);
}

html.mpk-tritanopia body {
  filter:
    saturate(.8)
    sepia(.1)
    hue-rotate(160deg);
}


/* =====================================
   READING GUIDE
===================================== */

#mpk-reading-guide {

  display: none;

  position: fixed;

  left: 0;

  width: 100%;

  height: 36px;

  pointer-events: none;

  z-index: 99990;

  border-top:
    2px solid #222;

  border-bottom:
    2px solid #222;

  background:
    rgba(255,255,0,.15);
}

html.mpk-reading-guide-active
#mpk-reading-guide {

  display: block;
}


/* =====================================
   PAUSE ANIMATION
===================================== */

html.mpk-pause-animation *,
html.mpk-pause-animation *::before,
html.mpk-pause-animation *::after {

  animation-play-state:
    paused !important;

  transition:
    none !important;

  scroll-behavior:
    auto !important;
}


/* =====================================
   KEYBOARD FOCUS
===================================== */

body :focus-visible {

  outline:
    3px solid #ffbf00 !important;

  outline-offset:
    3px !important;
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 600px) {

  .mpk-accessibility-panel {

    left: 10px;
    right: 10px;

    bottom: 80px;

    width: auto;

    max-height:
      calc(100vh - 100px);
  }

  .mpk-accessibility-toggle {

    right: 12px;
    bottom: 15px;
  }

  .mpk-accessibility-toggle-text {
    display: none;
  }

}