/* Responsive Styles for Legacy Table-Based Layout */

/* Применяем стили только для экранов шириной до 768px (планшеты и мобильные) */
@media only screen and (max-width: 768px) {

    /* --- Общие улучшения --- */
    body {
        -webkit-text-size-adjust: 100%; /* Предотвращаем автоматическое увеличение текста на iOS */
        word-wrap: break-word; /* Разрешаем перенос длинных слов */
    }

    /* --- Скрываем декоративные элементы --- */
    /* Скрываем ВЕРХНЮЮ ДЕКОРАТИВНУЮ картинку в левой колонке, но оставляем формы */
    td[width="163"] > table > tbody > tr:first-child {
        display: none;
    }

    /* Скрываем боковые "тени", верхние и нижние картинки */
    td[background*="shadow_last_middle.gif"],
    td[background*="shadow_left_middle.gif"],
    img[src*="side_1.jpg"],
    img[src*="cons_bottom.jpg"],
    img[src*="lady_bottom.jpg"],
    td[width="31"] /* Скрываем боковые колонки-тени */
    {
        display: none;
    }

    /* Скрываем ненужные картинки в шапке и разделители */
    img[src*="head_right_2.jpg"],
    img[src*="menu_bg_dark.gif"] {
        display: none !important;
    }


    /* --- Перестраиваем табличную верстку в блочную --- */
    /* Заставляем таблицы, строки и ячейки вести себя как блочные элементы */
    table,
    tbody,
    tr,
    td {
        display: block;
        width: 100% !important; /* !important нужен, чтобы переопределить встроенные в HTML атрибуты width */
        box-sizing: border-box; /* Чтобы padding и border не увеличивали ширину */
    }

    /* Убираем лишние отступы и рамки, которые могут мешать */
    table, td {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- Адаптация контента --- */
    /* Центрируем логотип */
    td[width="100%"] > p[align="center"] > a > img[src*="head_logo_ru.gif"] {
        display: block;
        margin: 10px auto;
    }
    
    /* Делаем изображения адаптивными */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* --- Левая колонка (формы входа) --- */
    /* Стилизуем саму левую колонку для мобильных */
    td[width="163"] {
        padding: 15px !important;
        background-color: #f0f0f5;
        border-bottom: 2px solid #44407A;
        margin-bottom: 15px !important;
    }

    /* Стилизуем формы внутри */
    form[name="mail_login"] input[type="text"],
    form[name="mail_login"] input[type="password"],
    form[id="users_area"] input[type="text"],
    form[id="users_area"] input[type="password"] {
        width: 95% !important;
        max-width: 280px; /* Ограничим ширину на больших мобильных */
        height: 34px !important;
        font-size: 14px !important;
        padding: 5px;
        box-sizing: border-box;
    }


    /* --- Основной контент --- */
    /* Ячейка с основным контентом */
    td.b_text {
        padding: 15px !important; /* Добавляем отступы для читабельности */
    }
    
    /* Убираем картинку, которая выравнивается по правому краю и мешает */
    td.b_text img[align="right"] {
        display: none;
    }
    
    /* Улучшаем читабельность новостей */
    .col-wrap {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* --- Шапка и меню --- */
    /* Скрываем левую большую картинку в шапке */
    td[width="333px"][rowspan="2"] {
        display: none;
    }

    /* Стилизуем правый блок с переключателем языков */
    td.b_menu[width="333px"] {
        display: block !important;
        background-image: none !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }
    
    /* Скрываем распорки в блоке с языками */
    td.b_menu img[src*="1x1.gif"] {
        display: none !important;
    }

    /* Центральное меню делаем более компактным */
    td.b_menu {
        text-align: center !important;
        padding: 10px 0 !important;
        background-image: none !important; /* Убираем фоновую картинку */
        background-color: #3361AC !important; /* Задаем сплошной цвет */
    }
    
    td.b_menu a {
        display: inline-block;
        padding: 5px 8px;
        margin: 2px;
        border: 1px solid #fff;
        border-radius: 4px;
    }
}