/* Панель и версия для слабовидящих */

:root {
  --a11y-panel-h: 0px;
}

/* —— Панель управления —— */
.a11y-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: #ececec;
  color: #111;
  border-bottom: 1px solid #c8c8c8;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s var(--ease, ease), visibility 0.35s;
}

.a11y-panel.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.a11y-panel__inner {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: 0.85rem clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.a11y-panel__groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.75rem;
  flex: 1;
  min-width: 0;
}

.a11y-panel__group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.a11y-panel__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.a11y-panel__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.a11y-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 0.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111;
  background: #f5f5f5;
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.a11y-panel__btn:hover {
  background: #fff;
  border-color: #888;
}

.a11y-panel__btn.is-active {
  background: #fff;
  border-color: #333;
  box-shadow: inset 0 0 0 1px #333;
}

.a11y-panel__btn--color {
  width: 2.35rem;
  padding: 0;
  font-weight: 800;
}

.a11y-panel__btn--color[data-a11y-color="light"] {
  background: #fff;
  color: #000;
  border-color: #333;
}

.a11y-panel__btn--color[data-a11y-color="dark"] {
  background: #000;
  color: #fff;
  border-color: #000;
}

.a11y-panel__btn--color[data-a11y-color="blue"] {
  background: #9dd1ff;
  color: #063462;
  border-color: #063462;
}

.a11y-panel__btn--color[data-a11y-color="beige"] {
  background: #f7f3d6;
  color: #4d4b43;
  border-color: #4d4b43;
}

.a11y-panel__btn--color[data-a11y-color="brown"] {
  background: #3b2716;
  color: #a9e44d;
  border-color: #a9e44d;
}

.a11y-panel__btn--icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.a11y-panel__exit {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  background: #f5f5f5;
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.a11y-panel__exit:hover {
  background: #fff;
  border-color: #333;
}

.a11y-panel__foot {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 0.5rem;
}

.a11y-panel__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  background: #f5f5f5;
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.a11y-panel__toggle:hover {
  background: #fff;
  border-color: #333;
}

/* Сдвиг шапки и контента при открытой панели */
html.a11y-panel-open {
  --a11y-panel-h: 7.25rem;
}

html.a11y-panel-open .header {
  top: var(--a11y-panel-h);
}

html.a11y-panel-open body {
  padding-top: calc(var(--header-h, 72px) + var(--a11y-panel-h));
}

@media (max-width: 767px) {
  html.a11y-panel-open {
    --a11y-panel-h: 9.5rem;
  }

  html.a11y-panel-open.a11y-panel-collapsed {
    --a11y-panel-h: 3.65rem;
  }

  .a11y-panel__inner {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .a11y-panel__foot {
    width: 100%;
  }

  .a11y-panel__exit {
    flex: 1;
    width: auto;
    text-align: center;
  }

  .a11y-panel__toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  .a11y-panel.is-collapsed .a11y-panel__groups {
    display: none;
  }
}

/* —— Цветовые схемы —— */
html.a11y-active[data-a11y-color="light"] {
  --a11y-bg: #ffffff;
  --a11y-fg: #000000;
  --a11y-muted: #222222;
  --a11y-link: #000000;
  --a11y-border: #000000;
  --a11y-btn-bg: #000000;
  --a11y-btn-fg: #ffffff;
}

html.a11y-active[data-a11y-color="dark"] {
  --a11y-bg: #000000;
  --a11y-fg: #ffffff;
  --a11y-muted: #dddddd;
  --a11y-link: #ffffff;
  --a11y-border: #ffffff;
  --a11y-btn-bg: #ffffff;
  --a11y-btn-fg: #000000;
}

html.a11y-active[data-a11y-color="blue"] {
  --a11y-bg: #9dd1ff;
  --a11y-fg: #063462;
  --a11y-muted: #063462;
  --a11y-link: #063462;
  --a11y-border: #063462;
  --a11y-btn-bg: #063462;
  --a11y-btn-fg: #9dd1ff;
}

html.a11y-active[data-a11y-color="beige"] {
  --a11y-bg: #f7f3d6;
  --a11y-fg: #4d4b43;
  --a11y-muted: #4d4b43;
  --a11y-link: #4d4b43;
  --a11y-border: #4d4b43;
  --a11y-btn-bg: #4d4b43;
  --a11y-btn-fg: #f7f3d6;
}

html.a11y-active[data-a11y-color="brown"] {
  --a11y-bg: #3b2716;
  --a11y-fg: #a9e44d;
  --a11y-muted: #d4f0a8;
  --a11y-link: #a9e44d;
  --a11y-border: #a9e44d;
  --a11y-btn-bg: #a9e44d;
  --a11y-btn-fg: #3b2716;
}

/* Масштаб шрифта */
html.a11y-active[data-a11y-font="0"] { font-size: 100%; }
html.a11y-active[data-a11y-font="1"] { font-size: 112.5%; }
html.a11y-active[data-a11y-font="2"] { font-size: 125%; }
html.a11y-active[data-a11y-font="3"] { font-size: 137.5%; }

/* —— Применение темы к сайту —— */
html.a11y-active body {
  background: var(--a11y-bg) !important;
  color: var(--a11y-fg) !important;
}

html.a11y-active .cursor-glow {
  display: none !important;
}

html.a11y-active :where(
  .header,
  main,
  .footer,
  section,
  article,
  .hero-swiper,
  .hero-slide,
  .service-card,
  .doctor-card,
  .reviews-card,
  .prices-block,
  .svc-exp,
  .svc-exp__panel,
  .mobile-menu__panel,
  .callback-drawer__panel,
  .search-drawer__panel,
  .cookie-banner,
  .legal-page,
  .page-cta,
  .booking-section,
  .hero-form-wrap,
  .quiz-card,
  .toast
) {
  background-color: var(--a11y-bg) !important;
  background-image: none !important;
  color: var(--a11y-fg) !important;
  box-shadow: none !important;
}

html.a11y-active :where(
  h1, h2, h3, h4, h5, h6,
  p, li, label, dt, dd, th, td, figcaption, blockquote, small, strong, em
) {
  color: var(--a11y-fg) !important;
  text-shadow: none !important;
}

html.a11y-active :where(span):not(
  .btn-call span,
  .btn--primary span,
  .hero-form__submit span,
  .footer__cta span,
  .doctor-card__cta span,
  .svc-exp__cta span,
  .callback-drawer__submit span,
  .svc-form__submit span,
  .mobile-menu__callback span,
  .tooth-cta__btn span,
  .btn--ghost span
) {
  color: var(--a11y-fg) !important;
  text-shadow: none !important;
}

html.a11y-active .text-muted,
html.a11y-active :where(.search-dropdown__desc, .search-dropdown__hint, .search-dropdown__label, .header-phone__hours, .footer__hours, .footer__tagline, .hero-slide__lead, .service-card__text) {
  color: var(--a11y-muted) !important;
}

html.a11y-active a:not(.a11y-panel a):not(.a11y-panel__btn):not(.btn-call):not(.btn):not(.btn--primary):not(.btn--ghost):not(.doctor-card__cta):not(.svc-exp__cta):not(.footer__cta):not(.prices-block__cta):not(.page-cta__btn) {
  color: var(--a11y-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Залитые кнопки — контрастный текст поверх фона */
html.a11y-active :is(
  a.btn-call,
  .btn-call,
  .btn--primary,
  .footer__cta,
  .hero-form__submit,
  .callback-drawer__submit,
  .svc-form__submit,
  .page-cta__btn,
  .mobile-menu__callback,
  .quiz-card__btn,
  .prices-block__cta,
  .doctor-card__cta,
  .svc-exp__cta,
  .tooth-cta__btn,
  .about-contacts__btn,
  button.btn--primary
) {
  background: var(--a11y-btn-bg) !important;
  color: var(--a11y-btn-fg) !important;
  border: 2px solid var(--a11y-border) !important;
  box-shadow: none !important;
  animation: none !important;
  background-image: none !important;
  text-decoration: none !important;
}

html.a11y-active :is(
  a.btn-call,
  .btn-call,
  .btn--primary,
  .footer__cta,
  .hero-form__submit,
  .callback-drawer__submit,
  .svc-form__submit,
  .page-cta__btn,
  .mobile-menu__callback,
  .quiz-card__btn,
  .prices-block__cta,
  .doctor-card__cta,
  .svc-exp__cta,
  .tooth-cta__btn,
  .about-contacts__btn,
  button.btn--primary
) :is(span, strong, em, svg, path, circle, line, polyline) {
  color: inherit !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Контурные кнопки */
html.a11y-active .btn--ghost {
  background: var(--a11y-bg) !important;
  color: var(--a11y-fg) !important;
  border: 2px solid var(--a11y-border) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html.a11y-active .btn--ghost :is(span, strong, em) {
  color: inherit !important;
}

html.a11y-active :where(
  input,
  textarea,
  select,
  .search__input,
  .search-drawer__input,
  .callback-drawer__input,
  .hero-form__input
) {
  background: var(--a11y-bg) !important;
  color: var(--a11y-fg) !important;
  border: 2px solid var(--a11y-border) !important;
  box-shadow: none !important;
}

html.a11y-active :where(
  .header,
  .footer,
  .service-card,
  .doctor-card,
  .mobile-menu__panel,
  .search-dropdown__inner,
  .prices-block__item,
  .svc-exp__tabs-bar
) {
  border-color: var(--a11y-border) !important;
}

html.a11y-active .header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 2px solid var(--a11y-border) !important;
}

html.a11y-active .header-phone__number,
html.a11y-active .footer__phone,
html.a11y-active .search-dropdown__price,
html.a11y-active mark {
  color: var(--a11y-fg) !important;
  background: transparent !important;
}

html.a11y-active .search-dropdown__title mark,
html.a11y-active .search-dropdown__desc mark {
  background: color-mix(in srgb, var(--a11y-fg) 25%, transparent) !important;
}

html.a11y-active .icon-btn,
html.a11y-active .burger,
html.a11y-active .header-search-btn {
  color: var(--a11y-fg) !important;
  border-color: var(--a11y-border) !important;
  box-shadow: none !important;
}

html.a11y-active .header__icons .icon-btn--a11y,
html.a11y-active .mobile-menu__a11y {
  background: var(--a11y-btn-bg) !important;
  color: var(--a11y-btn-fg) !important;
}

html.a11y-active .search-dropdown__item:hover,
html.a11y-active .search-dropdown__item.is-active {
  background: color-mix(in srgb, var(--a11y-fg) 12%, var(--a11y-bg)) !important;
}

/* Изображения */
html.a11y-active[data-a11y-images="hide"] :where(
  img:not(.logo__img),
  video,
  picture source,
  .hero-video__player,
  .doctor-card__photo img,
  .service-card__img,
  .reviews-card__avatar
) {
  visibility: hidden !important;
  opacity: 0 !important;
}

html.a11y-active[data-a11y-images="mono"] :where(img, video) {
  filter: grayscale(1) contrast(1.15) !important;
}