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

/* =========================================
   1. ГЛОБАЛЬНЫЙ СБРОС (Убираем визуальный шум)
   ========================================= */
body.visually-impaired,
body.visually-impaired *,
body.visually-impaired *::before,
body.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. БАЗОВАЯ ТИПОГРАФИКА (Черное на белом)
   ========================================= */
body.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;
}

body.visually-impaired * {
    background-color: transparent !important;
    color: #000000 !important;
}

body.visually-impaired h1, 
body.visually-impaired h2, 
body.visually-impaired h3, 
body.visually-impaired h4, 
body.visually-impaired h5, 
body.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. ССЫЛКИ (Обязательное подчеркивание)
   ========================================= */
body.visually-impaired a,
body.visually-impaired a:hover,
body.visually-impaired a:focus,
body.visually-impaired a:active,
body.visually-impaired .btn-link,
body.visually-impaired .el-nav-link,
body.visually-impaired .dropdown-item,
body.visually-impaired .el-main-link {
    color: #0000EE !important; /* Контрастный синий */
    text-decoration: underline !important;
    background-color: transparent !important;
}

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

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

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

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

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

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

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

body.visually-impaired .slick-slide,
body.visually-impaired .swiper-slide,
body.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;
}

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

/* =========================================
   7. ШАПКА И МЕНЮ (Отключаем прилипание)
   ========================================= */
/* При увеличении масштаба fixed-шапка перекрывает весь экран. Делаем её статичной. */
body.visually-impaired .stickytop,
body.visually-impaired .navbar,
body.visually-impaired .el-navbar-wrapper,
body.visually-impaired header,
body.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: #FFFFFF !important;
    border-bottom: 3px solid #000000 !important;
    padding: 15px 0 !important;
    width: 100% !important;
}

body.visually-impaired .navbar-nav,
body.visually-impaired .nav-item,
body.visually-impaired .dropdown-menu {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    float: none !important;
    background-color: #FFFFFF !important;
    border: none !important;
}

body.visually-impaired .dropdown-menu {
    border: 2px solid #000000 !important;
    padding: 10px !important;
    margin-top: 10px !important;
}

/* =========================================
   8. СПЕЦИФИЧНЫЕ БЛОКИ kolibrimed.ru
   ========================================= */
body.visually-impaired .el-uslugi,
body.visually-impaired .el-banner,
body.visually-impaired .el-offers,
body.visually-impaired .el-news-main,
body.visually-impaired .el-map,
body.visually-impaired .el-footer,
body.visually-impaired .el-personal-wrapper,
body.visually-impaired .el-service-slider {
    background: #FFFFFF !important;
    border-top: 2px solid #000000 !important;
    border-bottom: 2px solid #000000 !important;
    margin: 30px 0 !important;
    padding: 30px 15px !important;
}

body.visually-impaired .card,
body.visually-impaired .el-offers .card,
body.visually-impaired .el-filials-link {
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
    margin-bottom: 20px !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

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

/* =========================================
   9. МОДАЛЬНЫЕ ОКНА И ТАБЛИЦЫ
   ========================================= */
body.visually-impaired .modal-backdrop {
    display: none !important;
}

body.visually-impaired .modal {
    background-color: rgba(255, 255, 255, 0.98) !important;
    padding: 20px !important;
}

body.visually-impaired .modal-content {
    border: 3px solid #000000 !important;
    background-color: #FFFFFF !important;
}

body.visually-impaired table,
body.visually-impaired th,
body.visually-impaired td {
    border: 2px solid #000000 !important;
    border-collapse: collapse !important;
    padding: 10px !important;
    color: #000000 !important;
}