/* 
 * accessibility.css
 * Стили для версии сайта для слабовидящих (koilibrimed.ru)
 * Подключать ПОСЛЕ style.css и bootstrap.min.css
 */

/* =========================================
   1. ГЛОБАЛЬНЫЙ СБРОС (Убираем визуальный шум)
   ========================================= */
html.visually-impaired,
html.visually-impaired *,
html.visually-impaired *::before,
html.visually-impaired *::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important; /* Убираем скругления для строгости границ */
    transition: none !important; /* Отключаем плавные переходы */
    animation: none !important;  /* Отключаем анимации */
}

/* =========================================
   2. БАЗОВАЯ ТИПОГРАФИКА (Черное на белом)
   ========================================= */
html.visually-impaired {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
}
/* ВАЖНО: currentColor заставляет все элементы наследовать цвет от выбранной схемы */
html.visually-impaired * {
    background-color: transparent !important;
    color: currentColor !important; 
}

html.visually-impaired h1, 
html.visually-impaired h2, 
html.visually-impaired h3, 
html.visually-impaired h4, 
html.visually-impaired h5, 
html.visually-impaired h6 {
    color: #000000 !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* =========================================
   3. ССЫЛКИ (Обязательное подчеркивание)
   ========================================= */
html.visually-impaired a,
html.visually-impaired .btn-link,
html.visually-impaired .el-nav-link,
html.visually-impaired .dropdown-item,
html.visually-impaired .el-main-link {
    color: currentColor !important; 
    text-decoration: underline !important;
    background-color: transparent !important;
}

html.visually-impaired a:hover,
html.visually-impaired a:focus,
html.visually-impaired a:active {
    text-decoration: none !important;    
}

/*
html.visually-impaired a:hover,
html.visually-impaired a:focus {
    color: #FF0000 !important;
    outline: 3px solid #FF0000 !important;
    outline-offset: 2px;
}
*/

/* =========================================
   4. КНОПКИ, ФОРМЫ И ФОКУС
   ========================================= */
html.visually-impaired .btn,
html.visually-impaired button,
html.visually-impaired input[type="submit"],
html.visually-impaired input[type="button"],
html.visually-impaired .nc-consent .nc-consent__btn {
    background-color: transparent !important;
    color: currentColor !important;
    border: 2px solid currentColor !important;
    font-weight: bold !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
}

html.visually-impaired .btn:hover,
html.visually-impaired button:hover {
    /*background-color: #000000 !important;
    color: #FFFFFF !important;*/
}

html.visually-impaired input,
html.visually-impaired textarea,
html.visually-impaired select,
html.visually-impaired .form-control {
    background-color: transparent !important;
    color: currentColor !important;
    border: 2px solid currentColor !important;
    font-size: 1.2rem !important;
    padding: 10px !important;
}

/* Яркий фокус для клавиатурной навигации */
html.visually-impaired *:focus {
    outline: none;
    outline-offset: 3px;
    box-shadow: none !important;
}

/* =========================================
   5. ИЗОБРАЖЕНИЯ (Ч/Б и четкие рамки)
   ========================================= */
html.visually-impaired img,
html.visually-impaired figure,
html.visually-impaired svg,
html.visually-impaired video,
html.visually-impaired iframe {
    filter: grayscale(100%) contrast(120%) !important;
    border: 2px solid currentColor !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 15px 0 !important;
}

/* =========================================
   6. ЛИНЕАРИЗАЦИЯ СЛАЙДЕРОВ (Превращаем в списки)
   ========================================= */
html.visually-impaired .slick-track,
html.visually-impaired .slick-list,
html.visually-impaired .swiper-wrapper,
html.visually-impaired .owl-stage,
html.visually-impaired .owl-carousel {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    overflow: visible !important;
    height: auto !important;
}

html.visually-impaired .slick-slide,
html.visually-impaired .swiper-slide,
html.visually-impaired .owl-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 20px 0 !important;
    clear: both !important;
    height: auto !important;
    background: #FFFFFF !important;
}

html.visually-impaired .slick-dots,
html.visually-impaired .owl-nav,
html.visually-impaired .slick-prev,
html.visually-impaired .slick-next,
html.visually-impaired .swiper-button-next,
html.visually-impaired .swiper-button-prev {
    display: none !important;
}

/* =========================================
   7. ШАПКА И МЕНЮ (Отключаем прилипание)
   ========================================= */
/* При увеличении масштаба fixed-шапка перекрывает весь экран. Делаем её статичной. */
html.visually-impaired .stickytop,
html.visually-impaired .navbar,
html.visually-impaired .el-navbar-wrapper,
html.visually-impaired header,
html.visually-impaired .el-left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
    background-color: transparent !important;
    padding: 15px 0 !important;
    width: 100% !important;
}
html.visually-impaired .navbar-nav,
html.visually-impaired .nav-item,
html.visually-impaired .dropdown-menu {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    float: none !important;
    background-color: transparent !important;
    border: none !important;
}
html.visually-impaired .dropdown-menu {
    border: 2px solid currentColor !important;
    padding: 10px !important;
    margin-top: 10px !important;
}

/* =========================================
   8. СПЕЦИФИЧНЫЕ БЛОКИ kolibrimed.ru
   ========================================= */
html.visually-impaired .el-uslugi,
html.visually-impaired .el-banner,
html.visually-impaired .el-offers,
html.visually-impaired .el-news-main,
html.visually-impaired .el-map,
html.visually-impaired .el-footer,
html.visually-impaired .el-personal-wrapper,
html.visually-impaired .el-service-slider {
    background: transparent !important;
    border-top: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    margin: 30px 0 !important;
    padding: 30px 15px !important;
}
html.visually-impaired .card,
html.visually-impaired .el-offers .card,
html.visually-impaired .el-filials-link {
    background: transparent !important;
    border: 2px solid currentColor !important;
    margin-bottom: 20px !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

html.visually-impaired .el-uslugi::after {
    display: none !important; /* Скрываем декоративную стрелку вниз */
}

/* =========================================
   9. МОДАЛЬНЫЕ ОКНА И ТАБЛИЦЫ
   ========================================= */
html.visually-impaired .modal-backdrop {
    display: none !important;
}
html.visually-impaired .modal {
    background-color: transparent !important;
    padding: 20px !important;
}
html.visually-impaired .modal-content {
    border: 3px solid currentColor !important;
    background-color: transparent !important;
}
html.visually-impaired table,
html.visually-impaired th,
html.visually-impaired td {
    border: 2px solid currentColor !important;
    border-collapse: collapse !important;
    padding: 10px !important;
    color: currentColor !important;
}

/* =========================================
   КНОПКА ПЕРЕКЛЮЧЕНИЯ ВЕРСИИ САЙТА
   ========================================= */

/* Базовые стили кнопки (Обычный режим) */
.a11y-toggle-btn {
    background: transparent;
    border: 2px solid #F73232; 
    color: #F73232;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
}

.a11y-toggle-btn:hover {
    background: #F73232;
    color: #fff;
}
.a11y-toggle-btn:focus {
   border: 2px solid #F73232; 
   color: #F73232;
   background: transparent;
   outline: none;
}

/* Логика переключения состояний через CSS */
.a11y-toggle-btn .a11y-state-off {
    display: none; /* По умолчанию текст скрыт */
}

.a11y-toggle-btn[aria-pressed="true"] .a11y-state-on {
    display: none; /* Когда включен a11y, скрываем иконку */
}

.a11y-toggle-btn[aria-pressed="true"] .a11y-state-off {
    display: inline-block; /* Показываем текст "Обычная версия" */
    font-weight: bold;
}




html.visually-impaired .pv-logo {
    display: none;
}
html.visually-impaired .pv-menu {
    width: 100%;
    max-width: unset;
    flex: 0 0 100%;
}
html.visually-impaired .nav-item.dropdown .pv-dropdown-menu {
    display:flex !important;
    flex-wrap: wrap;
}

html.visually-impaired .nav-item.dropdown .pv-dropdown-menu .dropdown-item  {
    width: auto;
}

html.visually-impaired .collapse.navbar-collapse.pv-navbar-collapse {
    display: block !important;
}
html.visually-impaired .pv-callback {
    display: block !important;
}
html.visually-impaired .nav-item.pv-nav-link-search {
    display: none !important;
}
html.visually-impaired .el-banner.pv-el-banner {
    height: 100% !important;
}
html.visually-impaired .pv-el-banner .el-banner-quality {
    position: static;
}
html.visually-impaired .pv-el-banner .el-banner-price {
    position: static;
    text-align: center;
}
html.visually-impaired .pv-el-banner .el-banner-buttons {
    position: static;
}
html.visually-impaired .pv-el-banner .el-banner-quality-wrapper img {
    display: none !important;
}
html.visually-impaired .pv-el-banner .el-banner-quality {
    width: 100%;
    text-align: center;
}
html.visually-impaired .pv-el-banner .el-banner-quality-text {
    position: static;    
    margin-bottom: 0;
}
html.visually-impaired .pv-el-filials .pv-el-filials-img {
    display: none;
}
html.visually-impaired .pv-el-filials .pv-el-filials-text {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}
html.visually-impaired .el-offers.pv-el-offers {
    border: none !important;
}
html.visually-impaired .el-offers.pv-el-offers .card {
    border: none !important;
}
html.visually-impaired .pv-personal {
    display: none !important;
}
html.visually-impaired .el-filials.el-map.pv-el-map {
    border: none !important;
}
html.visually-impaired .el-filials.el-map.pv-el-map .pv-el-filials-img {
    display: none !important;    
}
html.visually-impaired .el-filials.el-map.pv-el-map .pv-el-filials-text {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}
html.visually-impaired .pv-footer-logo {
    display: none !important; 
}
html.visually-impaired #cloudim_chat {
    display: none !important;
}
html.visually-impaired .lb-widget-panel {
    display: none !important;    
}
html.visually-impaired .pv-service-slider {
    display: none !important; 
}
html.visually-impaired .pv-service-personal {
    display: none !important; 
}
html.visually-impaired .pv-el-uslugi .el-uslugi-img {
    display: none !important;     
}
html.visually-impaired .pv-el-banner-service {
    display: none !important;
}
html.visually-impaired .pv-el-banner-service .el-banner-wrapper {
    text-align: center;    
}
html.visually-impaired .pv-el-banner-service .el-banner-service-white {
    position: static;    
}
html.visually-impaired .pv-el-banner-service .el-banner-service-white .el-banner-service-wrapper img {
    display: none !important;     
}
html.visually-impaired .pv-el-banner-service .el-banner-service-white .el-banner-service-wrapper .el-banner-service-text {
    position: static;
}
html.visually-impaired .pv-el-banner-service .el-banner-service-red {
    position: static;
}
html.visually-impaired .pv-el-banner-service .el-banner-service-red img {
    display: none !important;      
}
html.visually-impaired .pv-el-banner-service .el-banner-service-name {
    position: static;    
}
html.visually-impaired .pv-el-banner-service .el-banner-service-text {
    position: static;    
}
html.visually-impaired .pv-service-offer .el-logo-div {
    display: none !important;    
}
html.visually-impaired .pv-service-offer .el-text-div {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;    
}
html.visually-impaired .dropdown-item:hover {
    border-bottom: none;
}
html.visually-impaired .nav-link.dropdown-toggle.el-nav-link {
    display: none !important;       
}
html.visually-impaired .fas.fa-exclamation-circle {
    display: none !important;       
}

html.visually-impaired #map {
    display: none !important;     
}
html.visually-impaired .pv-service-offer .pv-item {
    display: none !important;     
}
html.visually-impaired .pv-service-offer .pv-text {
    flex: 0 0 100%;
    max-width: 100%; 
}
html.visually-impaired .pv-service-offer .pv-text ul {
    list-style-image: none;
}
html.visually-impaired .pv-service-offer .pv-text li {
    font-size: 22px;
}
html.visually-impaired .pv-position .pv-position-notice {
    flex: 0 0 100%;
    max-width: 100%;     
}
html.visually-impaired .pv-position .pv-position-notice p.el-georgia {
    font-size: 1.375rem !important;
    line-height: 1.6 !important;
}
html.visually-impaired .pv-position .pv-position-text {
    flex: 0 0 100%;
    max-width: 100%;     
}
html.visually-impaired .pv-service-landing .pv-service-img {
    display: none !important;  
}
html.visually-impaired .pv-service-landing .pv-service-text {
    flex: 0 0 100%;
    max-width: 100%;     
}
html.visually-impaired .pv-images-landing {
    display: none !important;     
}
html.visually-impaired .pv-filials #accordion {
    display: none !important;     
}
html.visually-impaired .pv-filials .pv-filials-img {
    display: none !important; 
}
html.visually-impaired .pv-filials .pv-filials-name {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;    
}
html.visually-impaired .pv-el-offers .el-offers-row .card-title {
    margin-top: 0 !important;
}
html.visually-impaired .pv-el-offers .el-offers-row img {
    margin: 0 !important;
    max-height: 248px !important;
    object-fit: cover;
    width: 100% !important;
}
html.visually-impaired .pv-el-offers .el-offers-row .col-12 {
    order: unset !important;
}
html.visually-impaired .pv-el-offers .el-offers-row .card-body {
    height: unset !important;
}
html.visually-impaired .pv-personal-tabs .el-personal-wrapper {
    border-bottom: none !important;    
}
html.visually-impaired .pv-news-text {
    font-size: 22px;
}



/* =========================================
ПАНЕЛЬ УПРАВЛЕНИЯ И НАСТРОЙКИ 
========================================= */

/* Изолируем панель от глобального сброса прозрачности */
#a11y-panel {
    display: none;
    background-color: #f4f4f4 !important;
    color: #000000 !important;
    padding: 15px 0;
    font-family: Arial, sans-serif;
    font-size: 16px !important;
    position: relative;
    z-index: 9999;
    border-bottom: 3px solid #000000 !important;
}
html.visually-impaired #a11y-panel {
    display: block !important;
}
html.visually-impaired #a11y-panel * {
    color: #000000 !important;
    background-color: transparent !important;
}
html.visually-impaired #a11y-panel .a11y-panel__label {
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Контейнер панели */
.a11y-panel .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.a11y-panel__row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.a11y-panel__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Кнопки панели */
html.visually-impaired #a11y-panel .a11y-btn {
    background-color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
    padding: 6px 12px !important;
    cursor: pointer;
    font-weight: bold !important;
    border-radius: 0 !important;
    transition: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    min-width: 40px;
    text-align: center;
    font-size: 16px !important;
}

/* Размеры шрифтов в кнопках */
html.visually-impaired #a11y-panel .a11y-btn[data-a11y-font="125"] { font-size: 18px !important; }
html.visually-impaired #a11y-panel .a11y-btn[data-a11y-font="150"] { font-size: 22px !important; }
html.visually-impaired #a11y-panel .a11y-btn[data-a11y-font="200"] { font-size: 26px !important; }

/* Активные состояния и ховеры */
html.visually-impaired #a11y-panel .a11y-btn.active,
html.visually-impaired #a11y-panel .a11y-btn:hover,
html.visually-impaired #a11y-panel .a11y-btn:focus {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

/* Кнопка сброса */
html.visually-impaired #a11y-panel .a11y-btn[data-a11y-reset] {
    background-color: #ff4444 !important;
    color: #FFFFFF !important;
    border-color: #ff4444 !important;
}
html.visually-impaired #a11y-panel .a11y-btn[data-a11y-reset]:hover {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
}

/* =========================================
1. ЦВЕТОВЫЕ СХЕМЫ
========================================= */
html.visually-impaired.a11y-color-bw { background: #FFFFFF !important; color: #000000 !important; }
html.visually-impaired.a11y-color-bw * { color: #000000 !important; }

html.visually-impaired.a11y-color-wb { background: #000000 !important; color: #FFFFFF !important; }
html.visually-impaired.a11y-color-wb * { color: #FFFFFF !important; }
html.visually-impaired.a11y-color-wb #a11y-panel { background: #000000 !important; border-bottom-color: #FFFFFF !important; }
html.visually-impaired.a11y-color-wb #a11y-panel * { color: #FFFFFF !important; }
html.visually-impaired.a11y-color-wb #a11y-panel .a11y-btn { background: #000000 !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; }
html.visually-impaired.a11y-color-wb #a11y-panel .a11y-btn.active,
html.visually-impaired.a11y-color-wb #a11y-panel .a11y-btn:hover { background: #FFFFFF !important; color: #000000 !important; outline: 2px solid #FFFFFF !important; }

html.visually-impaired.a11y-color-blue { background: #9DD1FF !important; color: #001F5C !important; }
html.visually-impaired.a11y-color-blue * { color: #001F5C !important; }
html.visually-impaired.a11y-color-blue #a11y-panel { background: #9DD1FF !important; border-bottom-color: #001F5C !important; }
html.visually-impaired.a11y-color-blue #a11y-panel * { color: #001F5C !important; }
html.visually-impaired.a11y-color-blue #a11y-panel .a11y-btn { background: #9DD1FF !important; color: #001F5C !important; border: 2px solid #001F5C !important; }
html.visually-impaired.a11y-color-blue #a11y-panel .a11y-btn.active,
html.visually-impaired.a11y-color-blue #a11y-panel .a11y-btn:hover { background: #001F5C !important; color: #9DD1FF !important; }

html.visually-impaired.a11y-color-brown { background: #442A17 !important; color: #F3E9D2 !important; }
html.visually-impaired.a11y-color-brown * { color: #F3E9D2 !important; }
html.visually-impaired.a11y-color-brown #a11y-panel { background: #442A17 !important; border-bottom-color: #F3E9D2 !important; }
html.visually-impaired.a11y-color-brown #a11y-panel * { color: #F3E9D2 !important; }
html.visually-impaired.a11y-color-brown #a11y-panel .a11y-btn { background: #442A17 !important; color: #F3E9D2 !important; border: 2px solid #F3E9D2 !important; }
html.visually-impaired.a11y-color-brown #a11y-panel .a11y-btn.active,
html.visually-impaired.a11y-color-brown #a11y-panel .a11y-btn:hover { background: #F3E9D2 !important; color: #442A17 !important; }

/* Ссылки остаются подчеркнутыми во всех схемах */
html.visually-impaired.a11y-color-bw a,
html.visually-impaired.a11y-color-wb a,
html.visually-impaired.a11y-color-blue a,
html.visually-impaired.a11y-color-brown a { text-decoration: underline !important; }

/* Кнопки и формы на сайте в нестандартных схемах */
html.visually-impaired.a11y-color-wb .btn, html.visually-impaired.a11y-color-wb button, html.visually-impaired.a11y-color-wb input, html.visually-impaired.a11y-color-wb select { background: #000000 !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; }
html.visually-impaired.a11y-color-blue .btn, html.visually-impaired.a11y-color-blue button, html.visually-impaired.a11y-color-blue input, html.visually-impaired.a11y-color-blue select { background: #9DD1FF !important; color: #001F5C !important; border: 2px solid #001F5C !important; }
html.visually-impaired.a11y-color-brown .btn, html.visually-impaired.a11y-color-brown button, html.visually-impaired.a11y-color-brown input, html.visually-impaired.a11y-color-brown select { background: #442A17 !important; color: #F3E9D2 !important; border: 2px solid #F3E9D2 !important; }

/* =========================================
2. РАЗМЕРЫ ШРИФТОВ (переопределение базового 22px)
========================================= */
html.visually-impaired.a11y-font-100 { font-size: 16px !important; }
html.visually-impaired.a11y-font-125 { font-size: 20px !important; }
html.visually-impaired.a11y-font-150 { font-size: 24px !important; }
html.visually-impaired.a11y-font-200 { font-size: 32px !important; }

/* =========================================
3. ИЗОБРАЖЕНИЯ (Скрытие)
========================================= */
html.visually-impaired.a11y-images-off img,
html.visually-impaired.a11y-images-off figure,
html.visually-impaired.a11y-images-off svg,
html.visually-impaired.a11y-images-off video,
html.visually-impaired.a11y-images-off iframe,
html.visually-impaired.a11y-images-off .el-banner {
    display: none !important;
}

/* =========================================
4. КЕРНИНГ (Межбуквенное расстояние)
========================================= */
html.visually-impaired.a11y-kerning-large,
html.visually-impaired.a11y-kerning-large * {
    letter-spacing: 0.15em !important;
    word-spacing: 0.2em !important;
}

/* =========================================
10. МАСШТАБИРОВАНИЕ ФИКСИРОВАННЫХ ШРИФТОВ
========================================= */

/* Общие настройки для проблемных текстов */
html.visually-impaired .el-service-offer-text p,
html.visually-impaired .el-service-offer-text p span,
html.visually-impaired .pv-position .pv-position-notice p.el-georgia {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    color: currentColor !important;
}

/* Было:
   .el-service-offer-text p {
       font-size: 18px;
       line-height: 2;
   }
*/
html.visually-impaired .el-service-offer-text p {
    font-size: 1.125rem !important; /* 18px при базовых 16px */
    line-height: 1.6 !important;
}

/* Было:
   .el-service-offer-text p span {
       font-size: 24px;
   }

   Используем em, чтобы span масштабировался вместе с p
*/
html.visually-impaired .el-service-offer-text p span {
    font-size: 1.333em !important; /* примерно 24px при 18px */
    line-height: 1.35 !important;
}

/* Было:
   html.visually-impaired .pv-position .pv-position-notice p.el-georgia {
       font-size: 22px;
   }
*/
html.visually-impaired .pv-position .pv-position-notice p.el-georgia {
    font-size: 1.375rem !important; /* 22px при базовых 16px */
    line-height: 1.6 !important;
}