/* ===== Version for visually impaired (ГОСТ Р 52872-2019) ===== */

/* ---------- header toggle (round eye button) ---------- */
.header__va {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.va-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;
  height: 2.5vw;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid #d7dce3;
  border-radius: 50%;
  background: #fff;
  color: var(--main-color, #1d3077);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.va-toggle:hover,
.va-toggle:focus-visible {
  border-color: var(--main-color, #1d3077);
  background: var(--main-color, #1d3077);
  color: #fff;
}

.va-toggle svg {
  width: 55%;
  height: 55%;
}

.va-toggle__text {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: #1c1c1c;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}

.va-toggle:hover .va-toggle__text,
.va-toggle:focus-visible .va-toggle__text {
  opacity: 1;
}

.header__va {
  margin: 0 0.8vw;
}

@media (max-width: 1024px) {
  .header__va {
    margin: 0 10px;
  }

  .va-toggle {
    width: 40px;
    height: 40px;
  }

  .va-toggle__text {
    display: none;
  }
}

/* ---------- settings panel ---------- */
.va-panel[hidden] {
  display: none !important;
}

.va-panel {
  position: relative;
  z-index: 1001;
  border-bottom: 2px solid currentColor;
  font-family: Arial, Helvetica, sans-serif;
}

.va-panel__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 16px;
}

.va-panel__group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.va-panel__label {
  font-size: 16px !important;
  font-weight: 700;
  margin-right: 4px;
}

html .va-panel .va-panel__btn {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 2px solid currentColor !important;
  border-radius: 6px;
  font: inherit;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  cursor: pointer;
}

html .va-panel .va-panel__btn.is-active {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

html .va-panel .va-panel__btn--a1 { font-size: 16px !important; }
html .va-panel .va-panel__btn--a2 { font-size: 21px !important; }
html .va-panel .va-panel__btn--a3 { font-size: 26px !important; }

html .va-panel .va-swatch--bw    { background: #fff !important; color: #000 !important; border-color: #000 !important; }
html .va-panel .va-swatch--wb    { background: #000 !important; color: #fff !important; border-color: #fff !important; outline-color: #fff; }
html .va-panel .va-swatch--blue  { background: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
html .va-panel .va-swatch--brown { background: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
html .va-panel .va-swatch--green { background: #3b2716 !important; color: #a9e44d !important; border-color: #a9e44d !important; }

html .va-panel .va-panel__exit {
  margin-left: auto;
}

/* ---------- alt text for hidden images ---------- */
.va-alt {
  display: none;
}

html.va-img-off .va-alt {
  display: inline-block;
  padding: 4px 8px;
  border: 1px dashed currentColor;
  font-size: 0.9em;
}

/* ---------- colour schemes ---------- */
html.va-scheme-bw    { --va-bg: #fff;    --va-fg: #000; }
html.va-scheme-wb    { --va-bg: #000;    --va-fg: #fff; }
html.va-scheme-blue  { --va-bg: #9dd1ff; --va-fg: #063462; }
html.va-scheme-brown { --va-bg: #f7f3d6; --va-fg: #4d4b43; }
html.va-scheme-green { --va-bg: #3b2716; --va-fg: #a9e44d; }

html.va,
html.va body,
html.va body *:not(img):not(video):not(iframe):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(g) {
  background-color: var(--va-bg) !important;
  background-image: none !important;
  color: var(--va-fg) !important;
  border-color: var(--va-fg) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.va body *::before,
html.va body *::after {
  color: var(--va-fg) !important;
  border-color: var(--va-fg) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.va svg [fill]:not([fill="none"]) {
  fill: var(--va-fg) !important;
}

html.va svg [stroke]:not([stroke="none"]) {
  stroke: var(--va-fg) !important;
}

/* controls get a visible frame */
html.va body button,
html.va body .svc-btn,
html.va body .md-main-color-btn,
html.va body .form-btn,
html.va body .content-btn,
html.va body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va body textarea,
html.va body select,
html.va body .nice-select {
  border: 2px solid var(--va-fg) !important;
}

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

html.va body :focus-visible {
  outline: 3px solid var(--va-fg) !important;
  outline-offset: 2px !important;
}

/* shapes drawn with background-color only (burger lines, bullets, ticks) */
html.va .header__btn span,
html.va .swiper-pagination-bullet,
html.va .slider-pagination span,
html.va .lead-popup__check input:checked + .lead-popup__box {
  background-color: var(--va-fg) !important;
}

html.va .lead-popup__box::after {
  border-color: var(--va-bg) !important;
}

html.va .lead-popup__box {
  border: 2px solid var(--va-fg) !important;
}

/* mobile "Позвонить" bar has its own strong colour rule */
html.va .widget__contacts .header__phone .header__phone-number,
html.va .widget__contacts .header__phone,
html.va .widget__contacts {
  background-color: var(--va-bg) !important;
  color: var(--va-fg) !important;
}

html.va .widget__contacts {
  border-top: 2px solid var(--va-fg) !important;
}

/* popup dimming stays dark */
html.va .popup__blur {
  background-color: #000 !important;
}

/* no motion */
html.va *,
html.va *::before,
html.va *::after {
  animation: none !important;
  transition: none !important;
}

/* reveal-on-scroll / entrance animations start hidden: show them at once */
html.va .fade-in-up,
html.va [onScrollDisplay_JS],
html.va [onscrolldisplay_js] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* decorative layers that would cover text */
html.va .promotions__item-blur,
html.va .promotions__bg {
  display: none !important;
}

/* ---------- images ---------- */
html.va-img-gray img,
html.va-img-gray video,
html.va-img-gray iframe {
  filter: grayscale(1) !important;
}

html.va-img-off img,
html.va-img-off video,
html.va-img-off picture {
  display: none !important;
}

html.va-img-off .va-panel img {
  display: inline !important;
}

/* ---------- letter spacing ---------- */
html.va-ls-2 body *:not(.va-panel__btn) {
  letter-spacing: 0.08em !important;
  word-spacing: 0.12em !important;
}

html.va-ls-3 body *:not(.va-panel__btn) {
  letter-spacing: 0.16em !important;
  word-spacing: 0.24em !important;
}

/* ---------- relaxed layout for large text ----------
 * Theme cards have fixed vw heights + overflow:hidden; let them grow. */
html.va-size-2 body *,
html.va-size-3 body * {
  text-overflow: clip !important;
}

html.va-size-2 body [class*="__block"],
html.va-size-2 body [class*="__item"],
html.va-size-2 body [class*="__card"],
html.va-size-2 body [class*="-item"],
html.va-size-2 body [class*="__content"],
html.va-size-2 body [class*="__title"],
html.va-size-2 body [class*="__text"],
html.va-size-3 body [class*="__block"],
html.va-size-3 body [class*="__item"],
html.va-size-3 body [class*="__card"],
html.va-size-3 body [class*="-item"],
html.va-size-3 body [class*="__content"],
html.va-size-3 body [class*="__title"],
html.va-size-3 body [class*="__text"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

html.va-size-2 body .swiper-container,
html.va-size-3 body .swiper-container {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .va-panel__inner {
    gap: 10px 16px;
    padding: 10px 12px;
  }

  .va-panel__group {
    flex-wrap: wrap;
  }

  .va-panel__label {
    width: 100%;
  }

  html .va-panel .va-panel__exit {
    margin-left: 0;
    width: 100%;
  }
}