/**
 * Accessibility Styles for Visually Impaired Users
 * Стили доступности для слабовидящих пользователей
 */

/* ===================================
   РАЗМЕР ШРИФТА - Относительное масштабирование
   Масштабирует все элементы через CSS zoom
   Шаг: ±5% от базового размера (100%)
   Диапазон: от 75% (-5) до 125% (+5)
   =================================== */

/* Базовый уровень 0 - 100% */
body.font-size-level-0 .header:not(.settings),
body.font-size-level-0 .body:not(.settings),
body.font-size-level-0 .footer:not(.settings),
body.font-size-level-0 .mobile-header:not(.settings) {
    zoom: 1.0;
}

/* Отрицательные уровни - уменьшение на 5% за шаг */
body.font-size-level-minus-5 .header:not(.settings),
body.font-size-level-minus-5 .body:not(.settings),
body.font-size-level-minus-5 .footer:not(.settings),
body.font-size-level-minus-5 .mobile-header:not(.settings) { zoom: 0.75; } /* -25% */

body.font-size-level-minus-4 .header:not(.settings),
body.font-size-level-minus-4 .body:not(.settings),
body.font-size-level-minus-4 .footer:not(.settings),
body.font-size-level-minus-4 .mobile-header:not(.settings) { zoom: 0.80; } /* -20% */

body.font-size-level-minus-3 .header:not(.settings),
body.font-size-level-minus-3 .body:not(.settings),
body.font-size-level-minus-3 .footer:not(.settings),
body.font-size-level-minus-3 .mobile-header:not(.settings) { zoom: 0.85; } /* -15% */

body.font-size-level-minus-2 .header:not(.settings),
body.font-size-level-minus-2 .body:not(.settings),
body.font-size-level-minus-2 .footer:not(.settings),
body.font-size-level-minus-2 .mobile-header:not(.settings) { zoom: 0.90; } /* -10% */

body.font-size-level-minus-1 .header:not(.settings),
body.font-size-level-minus-1 .body:not(.settings),
body.font-size-level-minus-1 .footer:not(.settings),
body.font-size-level-minus-1 .mobile-header:not(.settings) { zoom: 0.95; } /* -5% */

/* Положительные уровни - увеличение на 5% за шаг */
body.font-size-level-1 .header:not(.settings),
body.font-size-level-1 .body:not(.settings),
body.font-size-level-1 .footer:not(.settings),
body.font-size-level-1 .mobile-header:not(.settings) { zoom: 1.05; } /* +5% */

body.font-size-level-2 .header:not(.settings),
body.font-size-level-2 .body:not(.settings),
body.font-size-level-2 .footer:not(.settings),
body.font-size-level-2 .mobile-header:not(.settings) { zoom: 1.10; } /* +10% */

body.font-size-level-3 .header:not(.settings),
body.font-size-level-3 .body:not(.settings),
body.font-size-level-3 .footer:not(.settings),
body.font-size-level-3 .mobile-header:not(.settings) { zoom: 1.15; } /* +15% */

body.font-size-level-4 .header:not(.settings),
body.font-size-level-4 .body:not(.settings),
body.font-size-level-4 .footer:not(.settings),
body.font-size-level-4 .mobile-header:not(.settings) { zoom: 1.20; } /* +20% */

body.font-size-level-5 .header:not(.settings),
body.font-size-level-5 .body:not(.settings),
body.font-size-level-5 .footer:not(.settings),
body.font-size-level-5 .mobile-header:not(.settings) { zoom: 1.25; } /* +25% */

/* Панель настроек всегда остается без масштабирования */
body[class*="font-size-level"] .settings {
    zoom: 1.0 !important;
}

/* ===================================
   ИЗОБРАЖЕНИЯ
   Работает для всех типов изображений:
   - <img> теги
   - background-image в CSS
   - <picture> элементы
   - SVG изображения
   =================================== */

/* Изображения включены (по умолчанию) */
body.images-on img,
body.images-on picture,
body.images-on svg image {
    display: inline-block !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Изображения отключены */
body.images-off img,
body.images-off picture,
body.images-off svg image {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Скрываем фоновые изображения - универсальный подход */
body.images-off [style*="background-image"],
body.images-off [style*="background:"],
body.images-off .main-banner__item,
body.images-off .best-from-bank__item,
body.images-off .news-item,
body.images-off .card-img,
body.images-off [class*="banner"],
body.images-off [class*="-img"],
body.images-off [class*="image"],
body.images-off [class*="bg-"],
body.images-off [class*="background"] {
    background-image: none !important;
    background: transparent !important;
}


/* Изображения в черно-белом режиме */
body.images-bw img,
body.images-bw picture,
body.images-bw svg image {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

/* Фоновые изображения в черно-белом режиме - универсальный подход */
body.images-bw [style*="background-image"],
body.images-bw [style*="background:"],
body.images-bw .main-banner__item,
body.images-bw .best-from-bank__item,
body.images-bw .news-item,
body.images-bw .card-img,
body.images-bw [class*="banner"],
body.images-bw [class*="-img"],
body.images-bw [class*="image"],
body.images-bw [class*="bg-"],
body.images-bw [class*="background"] {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

/* Применяем черно-белый фильтр ко всему контенту, кроме настроек */
body.images-bw .body:not(.settings),
body.images-bw .header:not(.settings),
body.images-bw .footer:not(.settings) {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

/* Исключаем панель настроек из фильтров */
body.images-bw .settings {
    filter: none !important;
    -webkit-filter: none !important;
}

/* ===================================
   МЕЖБУКВЕННЫЙ ИНТЕРВАЛ
   =================================== */

body.letter-spacing-normal {
    letter-spacing: normal;
}

body.letter-spacing-normal * {
    letter-spacing: normal;
}

body.letter-spacing-medium {
    letter-spacing: 0.07em;
}

body.letter-spacing-medium * {
    letter-spacing: 0.07em;
}

body.letter-spacing-large {
    letter-spacing: 0.17em;
}

body.letter-spacing-large * {
    letter-spacing: 0.17em;
}

/* ===================================
   МЕЖСТРОЧНЫЙ ИНТЕРВАЛ
   =================================== */

body.line-height-normal {
    line-height: 1.5;
}

body.line-height-normal p,
body.line-height-normal li,
body.line-height-normal div {
    line-height: 1.5;
}

body.line-height-medium {
    line-height: 1.8;
}

body.line-height-medium p,
body.line-height-medium li,
body.line-height-medium div {
    line-height: 1.8;
}

body.line-height-large {
    line-height: 2.2;
}

body.line-height-large p,
body.line-height-large li,
body.line-height-large div {
    line-height: 2.2;
}

/* ===================================
   ТИП ШРИФТА
   =================================== */

body.font-sans-serif,
body.font-sans-serif * {
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

body.font-serif,
body.font-serif * {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* ===================================
   ПАНЕЛЬ НАСТРОЕК
   =================================== */

/* НЕ переопределяем базовые стили .settings - они уже есть в common.css */

.settings-btn.active {
    background: #FF6B00 !important;
    color: #fff !important;
    border-color: #FF6B00 !important;
}

.settings-btn.active svg path {
    stroke: #fff !important;
    fill: #fff !important;
}

/* ===================================
   СИНТЕЗ РЕЧИ - Визуальная индикация
   =================================== */

/* Подсветка элемента при наведении (когда синтез речи включен) */
.speech-hover {
    outline: 2px solid #4CAF50 !important;
    outline-offset: 2px;
    background-color: rgba(76, 175, 80, 0.1) !important;
    cursor: help;
    position: relative;
    transition: all 0.2s ease;
}

/* Иконка динамика при наведении */
.speech-hover::before {
    content: '🔊';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 16px;
    background: #4CAF50;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 10000;
    pointer-events: none;
}

/* Визуальная индикация фокуса для клавиатурной навигации (WCAG 2.1) */
/* Используем :focus-visible для современных браузеров (показываем только при навигации клавиатурой) */
body.speech-synthesis-enabled *:focus-visible {
    outline: 3px solid #2196F3 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2) !important;
}

/* Fallback для старых браузеров */
body.speech-synthesis-enabled *:focus:not(:focus-visible) {
    outline: 2px solid #2196F3 !important;
    outline-offset: 2px;
}

/* Делаем нефокусируемые элементы фокусируемыми при включении синтеза речи */
body.speech-synthesis-enabled p,
body.speech-synthesis-enabled h1,
body.speech-synthesis-enabled h2,
body.speech-synthesis-enabled h3,
body.speech-synthesis-enabled h4,
body.speech-synthesis-enabled h5,
body.speech-synthesis-enabled h6,
body.speech-synthesis-enabled span,
body.speech-synthesis-enabled div[class*="title"],
body.speech-synthesis-enabled div[class*="text"],
body.speech-synthesis-enabled div[class*="description"],
body.speech-synthesis-enabled div[class*="item"],
body.speech-synthesis-enabled div[class*="note"] {
    /* Не добавляем tabindex через CSS, это сделано в JS */
    cursor: help;
}

/* ===================================
   ИНДИКАТОР АКТИВНОГО ОЗВУЧИВАНИЯ
   =================================== */

#speech-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99999;
    font-size: 14px;
    font-weight: 500;
    animation: slideInUp 0.3s ease-out, pulse 2s infinite;
    transition: all 0.3s ease;
}

#speech-indicator:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(76, 175, 80, 0.5);
}

#speech-indicator-icon {
    font-size: 20px;
    animation: soundWave 1s infinite;
}

#speech-indicator-text {
    margin: 0;
    white-space: nowrap;
}

#speech-indicator-stop {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

#speech-indicator-stop:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

#speech-indicator-stop:active {
    transform: scale(0.95);
}

/* Анимации */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(76, 175, 80, 0.6);
    }
}

@keyframes soundWave {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Скрытое состояние */
#speech-indicator.hidden {
    display: none;
}

/* Responsive стили минимальны, так как базовые стили в common.css */