/* Accessibility container */
.accessibility-container {
  display: flex;
  justify-content: center;
  font-family: Arial, sans-serif;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}

/* Toggle panel */
.plain-mode-toggle {
  display: flex;
  align-items: center;
  background: #fff !important;
  padding: 12px 20px;
}

/* Toggle switch */
.plain-mode-toggle__switch {
  width: 50px;
  height: 28px;
  background: #fff !important;
  border-radius: 14px !important;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  border: 1px solid #d1d5db;
}

.plain-mode-toggle__switch::after {
  content: '✕';
  position: absolute;
  width: 22px;
  height: 22px;
  background: #758b9c;
  border-radius: 50%;
  left: 3px;
  top: 2px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #ced9e0;
  font-weight: bolder;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.plain-mode-toggle__switch.active {
  background: #3988e3 !important;
  border-color: #d1d5db !important;
}

.plain-mode-toggle__switch.active::after {
  content: '✓';
  transform: translateX(22px);
  color: #fff;
  font-family: system-ui;
  left: 2px;
}
body.plain-mode-enabled .plain-mode-toggle__switch::after {
  background: #3b82f6 !important;
}
body.plain-mode-enabled .plain-mode-toggle__switch.active {
  background: #fff !important;
}
body.plain-mode-enabled .plain-mode-toggle__switch {
  background: #ccc !important;
}

/* Toggle text */
.plain-mode-toggle__text {
  font-size: 14px;
  color: #333;
  margin: 0;
  font-weight: 500;
}

/* Toggle icon */
.plain-mode-toggle__icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* Plain mode styles - when toggled on */
body.plain-mode-enabled * {
  background: white !important;
  color: black !important;
  border-color: black !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.plain-mode-enabled img {
  filter: grayscale(100%) contrast(120%) !important;
}

body.plain-mode-enabled button,
body.plain-mode-enabled input[type='submit'],
body.plain-mode-enabled .btn,
body.plain-mode-enabled .click-button {
  background: black !important;
  color: white !important;
  border: 2px solid black !important;
}

body.plain-mode-enabled input,
body.plain-mode-enabled select,
body.plain-mode-enabled textarea {
  background: white !important;
  color: black !important;
  border: 2px solid black !important;
}

/* Keep accessibility controls visible in plain mode */
body.plain-mode-enabled .accessibility-container,
body.plain-mode-enabled .accessibility-container * {
  color: white !important;
}

body.plain-mode-enabled .plain-mode-toggle {
  background: white !important;
  color: black !important;
}

body.plain-mode-enabled .plain-mode-toggle * {
  background: transparent !important;
  color: black !important;
}

.accessibility-icon {
  margin-right: 8px;
}
.plain-mode-toggle__text {
  margin-right: 16px;
}