/* === Версия для слабовидящих: локальная адаптация под health-clinic.ru === */

html.special {
  --special-panel-height: 56px;
}

/* Сдвигаем сайт под панель, а не перекрываем его */
html.special body {
  padding-top: calc(115px + var(--special-panel-height)) !important;
}

html.special .header {
  top: var(--special-panel-height) !important;
}

@media (max-width: 767px) {
  html.special body {
    padding-top: calc(69px + var(--special-panel-height)) !important;
  }

  html.special .mobile-menu {
    top: calc(69px + var(--special-panel-height)) !important;
    height: calc(100% - 149px - var(--special-panel-height)) !important;
  }
}

@media (max-width: 575px) {
  html.special .mobile-menu {
    top: calc(65px + var(--special-panel-height)) !important;
    height: calc(100% - 144px - var(--special-panel-height)) !important;
  }
}

@media (max-width: 350px) {
  html.special .mobile-menu {
    top: calc(120px + var(--special-panel-height)) !important;
    height: calc(100% - 144px - var(--special-panel-height)) !important;
  }
}

/* Базовая кнопка включения */
.special-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #3a40ff;
  border-radius: 32px;
  background: #fff;
  color: #3a40ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
}

.special-toggle:hover {
  background: #3a40ff;
  color: #fff;
}

.special-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.header .contacts .special-toggle {
  margin-left: 12px;
}

@media (max-width: 1150px) {
  .header .contacts .special-toggle {
    margin-left: 8px;
    padding: 0 12px;
  }
}

@media (max-width: 767px) {
  .header .contacts .special-toggle {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .special-toggle__text {
    display: none;
  }
}

/* === Панель === */
#special {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999999;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  line-height: 1;
}

#special,
#special * {
  box-sizing: border-box;
}

#special .special-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}

#special .special-panel > div,
#special .special-actions > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#special span,
#special em {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.2 !important;
  margin: 0;
}

#special em {
  font-style: italic;
}

#special button {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  padding: 6px 10px;
  min-width: 38px;
  min-height: 36px;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
}

#special button i {
  font-style: normal;
  font-weight: 700;
  font-size: inherit !important;
  line-height: inherit !important;
}

#special .special-panel button {
  min-width: 34px;
  min-height: 34px;
  padding: 6px 8px;
}

#special button.active {
  border-width: 2px;
}

#special-settings-body {
  display: none;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.15);
}

#special-settings-body h2 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.15);
}

#special-settings-body > div {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

#special-settings-body button {
  min-width: 110px;
  font-size: 14px !important;
}

#special-settings-body button i {
  display: block;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

#special .special-settings-close {
  margin-left: auto;
}

#special .special-label-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#special .special-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

#special .special-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* === Общие упрощения интерфейса === */
html.special *,
html.special *::before,
html.special *::after {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html.special a {
  text-decoration: underline !important;
}

html.special img[usemap],
html.special iframe,
html.special video {
  max-width: 100% !important;
}

html.special .header,
html.special .services-block,
html.special .doctors-block,
html.special .consult-block form,
html.special .consult-block2 form,
html.special .prices-block .table,
html.special .services-block .list .item,
html.special .services-block .list .item .info,
html.special .doctors-block .list .item,
html.special .index-first-block .text .info {
  border-radius: 0 !important;
}

/* === Настройки режима === */
html.special-line-height-1 *:not(#special *):not(script):not(style) {
  line-height: normal !important;
}

html.special-line-height-2 *:not(#special *):not(script):not(style) {
  line-height: 1.5 !important;
}

html.special-line-height-3 *:not(#special *):not(script):not(style) {
  line-height: 1.9 !important;
}

html.special-font-size-1 *:not(#special *):not(script):not(style) {
  font-size: max(1rem, inherit) !important;
}

html.special-font-size-2 *:not(#special *):not(script):not(style) {
  font-size: 1.125rem !important;
}

html.special-font-size-3 *:not(#special *):not(script):not(style) {
  font-size: 1.25rem !important;
}

html.special-font-family-1 *:not(#special *):not(script):not(style) {
  font-family: Arial, sans-serif !important;
}

html.special-font-family-2 *:not(#special *):not(script):not(style) {
  font-family: "Times New Roman", Times, serif !important;
}

html.special-letter-spacing-1 *:not(#special *):not(script):not(style) {
  letter-spacing: normal !important;
}

html.special-letter-spacing-2 *:not(#special *):not(script):not(style) {
  letter-spacing: 1.5px !important;
}

html.special-letter-spacing-3 *:not(#special *):not(script):not(style) {
  letter-spacing: 3px !important;
}

/* Цветовые схемы */
html.special-color-1,
html.special-color-1 body,
html.special-color-1 #special {
  background: #fff !important;
  color: #000 !important;
}

html.special-color-1 *:not(#special .special-icon svg):not(script):not(style) {
  color: #000 !important;
  border-color: #000 !important;
  background-color: #fff !important;
  background-image: none !important;
}

html.special-color-2,
html.special-color-2 body,
html.special-color-2 #special {
  background: #000 !important;
  color: #fff !important;
}

html.special-color-2 *:not(#special .special-icon svg):not(script):not(style) {
  color: #fff !important;
  border-color: #fff !important;
  background-color: #000 !important;
  background-image: none !important;
}

html.special-color-3,
html.special-color-3 body,
html.special-color-3 #special {
  background: #e6f3ff !important;
  color: #063462 !important;
}

html.special-color-3 *:not(#special .special-icon svg):not(script):not(style) {
  color: #063462 !important;
  border-color: #063462 !important;
  background-color: #e6f3ff !important;
  background-image: none !important;
}

html.special-color-4,
html.special-color-4 body,
html.special-color-4 #special {
  background: #fffcf0 !important;
  color: #59422e !important;
}

html.special-color-4 *:not(#special .special-icon svg):not(script):not(style) {
  color: #59422e !important;
  border-color: #59422e !important;
  background-color: #fffcf0 !important;
  background-image: none !important;
}

html.special-color-5,
html.special-color-5 body,
html.special-color-5 #special {
  background: #2a1d10 !important;
  color: #a9dd38 !important;
}

html.special-color-5 *:not(#special .special-icon svg):not(script):not(style) {
  color: #a9dd38 !important;
  border-color: #a9dd38 !important;
  background-color: #2a1d10 !important;
  background-image: none !important;
}

/* Когда изображения выключены */
html.special-images-0 img:not(#special img):not(.special-toggle svg) {
  visibility: hidden !important;
}

html.special-images-0 [style*="background-image"] {
  background-image: none !important;
}

html.special-images-0 .index-first-block,
html.special-images-0 .consult-block form,
html.special-images-0 .consult-block2 form,
html.special-images-0 .advantages-block,
html.special-images-0 .prices-block,
html.special-images-0 .steps-block,
html.special-images-0 .index-gallery-block {
  background-image: none !important;
}

/* Удобнее на маленьком экране */
@media (max-width: 940px) {
  #special .special-panel > div > span {
    display: none;
  }
}

@media (max-width: 640px) {
  #special {
    padding: 8px 8px 10px;
  }

  #special .special-panel {
    gap: 6px 10px;
  }

  #special button {
    min-width: 34px;
    min-height: 34px;
    padding: 6px 8px;
  }

  #special-settings-body button {
    min-width: 92px;
  }
}


/* =========================================================
   1. КНОПКА ВКЛЮЧЕНИЯ — В СТИЛЕ "Врачи / Лицензии / Частые вопросы"
   ========================================================= */

.special-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 29px;
    padding: 0 18px;
    border: 1px solid #d7d7d7;
    border-radius: 19px;
    background: #f6f6f6;
    color: #4a4a4a;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
    min-height: 22px;
    top: 3px;
    position: relative;
}

.special-toggle:hover {
  background: #f7f7f7;
  color: #111111;
  border-color: #444444;
}

.special-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.header .contacts .special-toggle {
  margin-left: 12px;
}

.special-toggle[aria-pressed="true"] {
  border-color: #444444;
  color: #111111;
}

/* если кнопка стоит в contacts рядом с "Заказать звонок" */
.header .contacts .special-toggle {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 20px;
}

/* мобильная версия */
@media (max-width: 767px) {
  .header .contacts .special-toggle {
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }

  /* если нужен только значок на мобиле — оставь как есть,
     если нужен текст — просто удали этот блок */
  .special-toggle__text {
    display: none;
  }
}


/* =========================================================
   2. ЦВЕТОВЫЕ КНОПКИ В ПАНЕЛИ — ЧТОБЫ БЫЛИ ВИДНЫ РЕАЛЬНЫЕ СХЕМЫ
   ========================================================= */

/* верхние маленькие кнопки "Ц" */
html.special #special .special-panel .special-color button[value="1"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

html.special #special .special-panel .special-color button[value="2"] {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.special #special .special-panel .special-color button[value="3"] {
  background: #e6f3ff !important;
  color: #063462 !important;
  border-color: #063462 !important;
}

/* кнопки цветовых схем в раскрытых настройках */
html.special #special #special-settings-body .special-color button[value="1"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

html.special #special #special-settings-body .special-color button[value="2"] {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.special #special #special-settings-body .special-color button[value="3"] {
  background: #e6f3ff !important;
  color: #063462 !important;
  border-color: #063462 !important;
}

html.special #special #special-settings-body .special-color button[value="4"] {
  background: #f7f1dd !important;
  color: #59422e !important;
  border-color: #59422e !important;
}

html.special #special #special-settings-body .special-color button[value="5"] {
  background: #2a1d10 !important;
  color: #a9dd38 !important;
  border-color: #a9dd38 !important;
}

/* активная цветовая схема — более заметное выделение */
html.special #special .special-color button.active {
  border-width: 3px !important;
  outline: 2px solid currentColor !important;
  outline-offset: 1px;
}

/* чуть аккуратнее текстовые кнопки схем */
html.special #special #special-settings-body .special-color button {
  min-width: 140px;
  padding: 10px 14px;
}

html.special #special #special-settings-body .special-color button i {
  font-weight: 700;
}


.special-toggle:hover {
  background: #f6f6f6;
  color: #333333;
  border-color: #bdbdbd;
}

.special-toggle:active {
  transform: none;
}

.special-toggle[aria-pressed="true"] {
  background: #f6f6f6;
  color: #333333;
  border-color: #bdbdbd;
}

.special-toggle svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  opacity: 0.75;
}

.header .contacts .special-toggle {
  margin-left: 18px;
}

@media (max-width: 767px) {
  .header .contacts .special-toggle {
    height: 34px;
    padding: 0 12px;
    margin-left: 10px;
    border-radius: 17px;
    font-size: 14px;
  }

  .special-toggle svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* десктоп-кнопка */
.special-toggle--desktop {
  display: inline-flex;
}

/* мобильная по умолчанию скрыта */
.special-toggle-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px;
  padding: 0;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  background: #f6f6f6;
  color: #4a4a4a;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.special-toggle-mobile:hover {
  border-color: #bdbdbd;
  color: #333333;
}

.special-toggle-mobile svg {
  width: 18px;
  height: 18px;
  opacity: .8;
}

.special-toggle-mobile[aria-pressed="true"] {
  border-color: #bdbdbd;
  color: #333333;
}

/* на мобайле desktop-кнопку скрываем, mobile показываем */
@media (max-width: 767px) {
  .special-toggle--desktop {
    display: none !important;
  }

  .special-toggle-mobile {
    display: inline-flex;
  }
}