/* ==========================================================================
   Версия для слабовидящих (asko.kz / e.asko.kz)
   Включается классом html.a11y, настройки — модификаторами:
     a11y--font-n|m|l          размер шрифта (обычный / крупный / очень крупный)
     a11y--scheme-bw|wb|bb|be|gb цветовая схема
     a11y--noimages            изображения отключены
     a11y--spacing-n|m|l       межбуквенный интервал
     a11y--serif               шрифт с засечками
   Классы выставляет /backend/accessibility.js (в <head>, до отрисовки страницы).
   ========================================================================== */

/* ---------- кнопка-переключатель в шапке и ссылка в подвале ---------- */
.a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    order: 4;
    margin-left: 15px;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: rgba(77, 88, 95, 0.7);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}
.a11y-toggle:hover,
.a11y-toggle:focus {
    color: #0d5ea8;
}
.a11y-toggle:focus-visible {
    outline: 2px solid #0d5ea8;
    outline-offset: 2px;
}
.a11y-toggle svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.a11y-toggle__text {
    display: none;
}
@media (min-width: 1170px) {
    .a11y-toggle__text {
        display: inline;
    }
}
.a11y-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

/* ---------- панель настроек (видна только в режиме для слабовидящих) ---------- */
.a11y-panel {
    display: none;
}
html.a11y .a11y-panel {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10050;
    border-bottom: 3px solid currentColor;
}
.a11y-panel__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    padding: 10px 15px;
    max-width: 1300px;
    margin: 0 auto;
}
.a11y-panel__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.a11y-panel__label {
    font-weight: bold;
    margin-right: 4px;
}
.a11y-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 12px;
    border: 2px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.a11y-btn[aria-pressed="true"] {
    font-weight: bold;
    text-decoration: underline;
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
.a11y-btn:focus-visible {
    outline: 3px dashed currentColor;
    outline-offset: 2px;
}
/* размеры букв на кнопках «А» не зависят от выбранного размера шрифта */
html.a11y .a11y-panel .a11y-btn--font-n { font-size: 16px !important; }
html.a11y .a11y-panel .a11y-btn--font-m { font-size: 22px !important; }
html.a11y .a11y-panel .a11y-btn--font-l { font-size: 28px !important; }
/* кнопки схем показывают свои цвета независимо от выбранной схемы */
html.a11y .a11y-panel .a11y-btn--scheme-bw { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; }
html.a11y .a11y-panel .a11y-btn--scheme-wb { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; }
html.a11y .a11y-panel .a11y-btn--scheme-bb { background-color: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
html.a11y .a11y-panel .a11y-btn--scheme-be { background-color: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
html.a11y .a11y-panel .a11y-btn--scheme-gb { background-color: #3b2716 !important; color: #a9e44d !important; border-color: #a9e44d !important; }

/* ---------- общие правила режима ---------- */
html.a11y body {
    font-family: Arial, Helvetica, sans-serif;
}
html.a11y a {
    text-decoration: underline !important;
}
html.a11y *:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 2px;
}
html.a11y button,
html.a11y .btn,
html.a11y input:not([type="hidden"]),
html.a11y select,
html.a11y textarea {
    border: 2px solid currentColor !important;
    border-radius: 4px !important;
}
html.a11y ::placeholder {
    color: inherit !important;
    opacity: 0.7;
}
/* рекламные и декоративные элементы: главный слайдер, рекламные баннеры
   «Специальное предложение» во вкладках продуктов, видео-чат */
html.a11y .main-slider,
html.a11y .main-slider-section,
html.a11y .js-banner-offer,
html.a11y .banner-offer,
html.a11y .special-offer-banner,
html.a11y #richcall-widget,
html.a11y .rich_call_btn1 {
    display: none !important;
}

/* карточки продуктов на главной: без наложений и отрицательных отступов,
   одна колонка, рамка вместо фоновой картинки */
html.a11y .product-list {
    display: block !important;
}
html.a11y .product-widget,
html.a11y .product-widget--small {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 20px !important;
    border: 2px solid currentColor !important;
    border-radius: 8px !important;
}
html.a11y .product-widget__content {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html.a11y .product-widget__image {
    position: static !important;
    width: auto !important;
    max-width: 320px;
    margin: 0 0 15px !important;
}
html.a11y .product-widget__link {
    position: static !important;
    display: none !important;
}
html.a11y .product-widget__title a,
html.a11y .product-widget__title span {
    text-decoration: underline !important;
}
html.a11y .product-widget__form {
    display: block !important;
}
html.a11y .main-tabs .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px;
    border: 0 !important;
}
html.a11y .main-tabs .nav-tabs li a {
    border: 2px solid currentColor !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
}

/* ---------- цветовые схемы ---------- */
html.a11y--scheme-bw body, html.a11y--scheme-bw body * { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; }
html.a11y--scheme-wb body, html.a11y--scheme-wb body * { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; }
html.a11y--scheme-bb body, html.a11y--scheme-bb body * { background-color: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
html.a11y--scheme-be body, html.a11y--scheme-be body * { background-color: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
html.a11y--scheme-gb body, html.a11y--scheme-gb body * { background-color: #3b2716 !important; color: #a9e44d !important; border-color: #a9e44d !important; }

html.a11y body * {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html.a11y svg {
    fill: currentColor;
}
html.a11y body img,
html.a11y body video,
html.a11y body iframe,
html.a11y body canvas {
    background-color: transparent !important;
}

/* ---------- изображения ---------- */
html.a11y--noimages body img,
html.a11y--noimages body picture,
html.a11y--noimages body video,
html.a11y--noimages body canvas,
html.a11y--noimages body iframe {
    display: none !important;
}

/* ---------- размер шрифта ---------- */
html.a11y--font-m body,
html.a11y--font-m body p, html.a11y--font-m body li, html.a11y--font-m body a, html.a11y--font-m body span,
html.a11y--font-m body div, html.a11y--font-m body td, html.a11y--font-m body th, html.a11y--font-m body label,
html.a11y--font-m body input, html.a11y--font-m body select, html.a11y--font-m body textarea,
html.a11y--font-m body button, html.a11y--font-m body small, html.a11y--font-m body dt, html.a11y--font-m body dd {
    font-size: 20px !important;
    line-height: 1.5 !important;
}
html.a11y--font-m body h1 { font-size: 36px !important; line-height: 1.3 !important; }
html.a11y--font-m body h2 { font-size: 30px !important; line-height: 1.3 !important; }
html.a11y--font-m body h3 { font-size: 26px !important; line-height: 1.3 !important; }
html.a11y--font-m body h4, html.a11y--font-m body h5, html.a11y--font-m body h6 { font-size: 22px !important; line-height: 1.3 !important; }

html.a11y--font-l body,
html.a11y--font-l body p, html.a11y--font-l body li, html.a11y--font-l body a, html.a11y--font-l body span,
html.a11y--font-l body div, html.a11y--font-l body td, html.a11y--font-l body th, html.a11y--font-l body label,
html.a11y--font-l body input, html.a11y--font-l body select, html.a11y--font-l body textarea,
html.a11y--font-l body button, html.a11y--font-l body small, html.a11y--font-l body dt, html.a11y--font-l body dd {
    font-size: 24px !important;
    line-height: 1.5 !important;
}
html.a11y--font-l body h1 { font-size: 44px !important; line-height: 1.3 !important; }
html.a11y--font-l body h2 { font-size: 36px !important; line-height: 1.3 !important; }
html.a11y--font-l body h3 { font-size: 30px !important; line-height: 1.3 !important; }
html.a11y--font-l body h4, html.a11y--font-l body h5, html.a11y--font-l body h6 { font-size: 26px !important; line-height: 1.3 !important; }

/* крупный шрифт: элементы шапки и панели переносятся, а не вылезают за экран */
html.a11y--font-m .header-content, html.a11y--font-l .header-content,
html.a11y--font-m .check-policy-panel .form-row, html.a11y--font-l .check-policy-panel .form-row {
    flex-wrap: wrap !important;
    gap: 8px 16px;
}

/* ---------- межбуквенный интервал ---------- */
html.a11y--spacing-m body * { letter-spacing: 1.5px !important; word-spacing: 3px !important; }
html.a11y--spacing-l body * { letter-spacing: 3px !important; word-spacing: 6px !important; }

/* ---------- шрифт с засечками (иконочные шрифты не трогаем) ---------- */
html.a11y--serif body,
html.a11y--serif body *:not(.glyphicon):not([class*="icon"]) {
    font-family: "Times New Roman", Times, Georgia, serif !important;
}

/* иконка «глаз» на переключателе остаётся контурной в любой схеме */
html.a11y .a11y-toggle svg {
    fill: none !important;
}
/* при отключённых изображениях вместо логотипа показываем название */
html.a11y--noimages .logo::after {
    content: "АСКО";
    font-weight: bold;
    font-size: 28px !important;
    letter-spacing: 2px;
}