/* Улучшения для мобильной версии */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5em;
            }

            .container {
                width: 100%;
                padding: 15px;
                margin: 0 !important;
                border-radius: 0 !important;
            }
            
            #login-page,
            #register-page,
            #privazka-page,
            #payment-page {
                border-radius: 10px !important;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            input[type="tel"],
            input[type="number"],
            select,
            textarea {
                font-size: 16px; /* >=16px чтобы iOS не зумил при фокусе */
            }

            button {
                font-size: 1rem;
                min-height: 44px; /* минимальный touch-target */
            }

            .tariffs-table-container { /* Теперь стили применяются только к контейнеру таблицы с тарифами */
                overflow: visible;
            }
        
            .tariffs-table thead {  /* Теперь стили применяются только к THEAD таблицы с тарифами */
                display: none;
            }
        
            .tariffs-table, .tariffs-table tbody, .tariffs-table tr, .tariffs-table td {  /* Теперь стили применяются только к таблице с тарифами и ее элементам */
                display: block;
                width: 100%;
            }
        
            .tariffs-table tr {  /* Теперь стили применяются только к TR таблицы с тарифами */
                margin-bottom: 0.5rem;
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
            }
        
            .tariffs-table td {  /* Теперь стили применяются только к TD таблицы с тарифами */
                padding-left: 50%;
                position: relative;
                border: none;
                font-size: 0.9em;
            }
        
            .tariffs-table td:before { /* Теперь стили применяются только к TD:before таблицы с тарифами */
                position: absolute;
                top: 0.5rem;
                left: 0.5rem;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                font-weight: bold;
                content: attr(data-label);
                color: #495057;
            }
            
            .table-container {
                font-size: 0.9em;
            }
            
            .meters-grid {
                grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
            }
            
            .tariffs-grid {
                grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
            }
            
            #news-slider-container .news-slide h3 {
                font-size: 1.05em; /* Размер шрифта h3 для мобильных экранов */
                line-height: 1.3;
            }
            
            #news-slider {
                min-height: 100px; /* Увеличена минимальная высота слайдера для мобильных */
            }
            
            .meter-item p {
                font-size: 0.95em; /* Уменьшаем размер текста */
            }
            
            .tariff-item .label {
                font-size: 0.8em; /* Уменьшаем размер подписей */
            }
            
            .tariff-item p {
                font-size: 0.8em; /* Уменьшаем размер текста */
            }
            
            .readings-grid {
                grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
                gap: 0.5rem; /* Уменьшаем расстояние между элементами */
            }
        
            .reading-item {
                padding: 0.5rem; /* Уменьшаем внутренний отступ */
                font-size: 1em; /* Уменьшаем размер шрифта */
            }
        
            .reading-item .label {
                font-size: 1em; /* Уменьшаем размер шрифта для label */
            }
            
            .reading-item p {
                line-height: 1.2; /* Значение по умолчанию обычно 1.4-1.6, уменьшаем до 1.2 */
                margin-bottom: 0.125rem;
            }
            
            .requisites-block p {
                line-height: 1.3; /* Уменьшаем межстрочный интервал */
                margin-bottom: 0.150rem; /* Можно немного уменьшить нижний отступ */
            }
            .requisites-title {
                font-size: 1em;
            }
            
            .modal-content {
                max-width: 95%; /*  Уменьшаем ширину на маленьких экранах  */
            }
            
             .grafik-grid {
                grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
            }
            
            .mobile-icon-button .button-text {
                display: none; /* Скрываем текст */
            }
            
            .logout-container {
                gap: 6px;
                flex-wrap: nowrap;
                align-items: center;
                padding: 4px 0;
            }
            /* Дата — однострочная, аккуратная */
            .logout-container .date-weather-info {
                margin: 0;
                font-size: 0.78rem;
                font-weight: 600;
                color: var(--accent-info);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 0 1 auto;
                min-width: 0;
                line-height: 1.2;
            }
            /* Селектор ЛС не должен схлопываться до "5..." */
            .logout-container .ls-switch {
                padding: 6px 10px;
                max-width: none;
                flex: 0 1 auto;
                min-width: 0;
                font-size: 0.85em;
            }
            .logout-container .ls-switch__value {
                max-width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* Блок адреса под шапкой — аккуратная карточка */
            #detailed-info > p:has(#address-info),
            #detailed-info #address-info {
                font-size: 0.95rem;
                line-height: 1.4;
            }
            #detailed-info > p:has(#address-info) {
                margin: 12px 0 16px;
                padding: 12px 14px;
                background: #f6fbf8;
                border: 1px solid var(--border, #e7eef0);
                border-left: 4px solid var(--accent-info, #2cb67d);
                border-radius: 10px;
                color: var(--text, #1f2d3d);
            }

            /* Все три кнопки в шапке кабинета — одинаковые круглые тач-таргеты 44×44.
               Селекторы намеренно повышенной специфичности, чтобы перебить .logout-button,
               .notification-button и Bootstrap .btn ниже по каскаду. */
            .logout-container .icon-button,
            .logout-container .mobile-icon-button,
            .logout-container button.btn.icon-button,
            .logout-container button.btn.mobile-icon-button {
                width: 44px;
                height: 44px;
                min-width: 44px;
                min-height: 44px;
                padding: 0;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .icon-button::after,
            .icon-button::before {
                display: none;
            }

            .icon-button::after {
                content: none;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 16px;
              }
              .footer-info {
                padding: 10px;
              }
            
            .company-info-buttons-grid {
                grid-template-columns: 1fr;
                gap: 0.7rem;
            }
            .company-info-buttons-grid button {
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                padding: 0.8rem 1rem;
                min-height: 56px;
                font-size: 1em;
            }
            .company-info-buttons-grid img {
                margin-bottom: 0;
                margin-right: 12px;
            }
            .company-info-buttons-grid span {
                margin-right: auto;
            }
            .company-info-buttons-grid .arrow {
                position: static;
                margin-left: auto;
                font-size: 1.3em;
            }

            .info-buttons-grid {
                grid-template-columns: 1fr;
                gap: 0.7rem;
            }
            .info-buttons-grid button {
                flex-direction: row;
                align-items: center;
                padding: 0.9rem 1rem;
                min-height: 64px;
                gap: 12px;
            }
            .info-buttons-grid img {
                margin-bottom: 0;
                width: 42px;
                height: 42px;
                padding: 8px;
                box-sizing: border-box;
                flex-shrink: 0;
                object-fit: contain;
            }
            .info-buttons-grid h3 {
                font-size: 1em;
                margin: 0;
            }
            .info-buttons-grid p {
                display: none;
            }
            .info-buttons-grid span {
                top: 50%;
                transform: translateY(-50%);
                right: 14px;
            }
            .info-buttons-grid button:hover span {
                transform: translateY(-50%) translateX(4px);
            }
        }