/**
 * Исправления мобильной версии страницы профиля
 * Решает проблемы с размерами блоков и перекрытием аватарки
 */

/* === ОСНОВНЫЕ ИСПРАВЛЕНИЯ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ ПРОФИЛЯ === */
@media (max-width: 768px) {
    
    /* Исправление блока с балансом - уменьшаем размер */
    .profile-balance-card,
    .balance-display,
    .user-balance-info {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Исправление для блока баланса в шапке профиля */
    .profile-header .balance-info {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0.25rem 0 !important;
    }
    
    /* Уменьшаем отступы между элементами профиля */
    .profile-user-info,
    .profile-stats-section {
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Исправление блока с аватаркой - предотвращаем перекрытие */
    .profile-avatar-section {
        position: relative !important;
        z-index: 10 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Исправление размера аватарки на мобильных */
    .profile-avatar,
    #main-avatar,
    .user-avatar.large {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* === ИСПРАВЛЕНИЯ ДЛЯ БЛОКА УРОВНЯ === */
    
    /* Контейнер аватарки с уровнем */
    .relative .w-24.h-24 {
        width: 5rem !important;
        height: 5rem !important;
        margin: 0 auto !important;
    }
    
    /* Индикатор уровня на аватаре */
    .absolute.-bottom-2.-right-2 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        bottom: -6px !important;
        right: -6px !important;
        border-width: 3px !important;
    }
    
    .absolute.-bottom-2.-right-2 span {
        font-size: 0.875rem !important;
        font-weight: 700 !important;
    }
    
    /* Блок информации об уровне */
    .inline-flex.items-center.px-3.py-1 {
        padding: 0.375rem 0.625rem !important;
        margin: 0 auto 0.5rem auto !important;
        display: inline-flex !important;
        max-width: fit-content !important;
    }
    
    .text-blue-400 {
        font-size: 0.6875rem !important;
    }
    
    .ml-2.w-4.h-4 {
        width: 0.875rem !important;
        height: 0.875rem !important;
        margin-left: 0.375rem !important;
    }
    
    /* Название уровня */
    .text-purple-400.text-xs {
        font-size: 0.6875rem !important;
        text-align: center !important;
        margin-top: 0.25rem !important;
    }
    
    /* Прогресс блок */
    .bg-\[#2a2a2a\].rounded-lg.p-4 {
        padding: 0.75rem !important;
        margin-top: 1rem !important;
    }
    
    /* Заголовок прогресса */
    .flex.justify-between.items-center.mb-3 {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .flex.justify-between.items-center.mb-3 span:first-child {
        font-size: 0.75rem !important;
    }
    
    .flex.justify-between.items-center.mb-3 span:last-child {
        font-size: 0.625rem !important;
    }
    
    /* Прогресс бар */
    .w-full.bg-\[#333333\].rounded-full.h-2 {
        height: 0.375rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    .bg-gradient-to-r.from-blue-500.to-purple-500.h-2 {
        height: 0.375rem !important;
    }
    
    /* Статистика прогресса */
    .flex.justify-between.text-xs {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
        font-size: 0.625rem !important;
    }
    
    /* Дополнительная статистика */
    .grid.grid-cols-2.gap-3.mt-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
    }
    
    .grid.grid-cols-2.gap-3.mt-4 .text-center {
        padding: 0.5rem !important;
    }
    
    .grid.grid-cols-2.gap-3.mt-4 .text-lg {
        font-size: 1rem !important;
    }
    
    .grid.grid-cols-2.gap-3.mt-4 .text-xs {
        font-size: 0.625rem !important;
    }
    
    /* === ИСПРАВЛЕНИЯ ДЛЯ СТАТИСТИКИ === */
    
    /* Компактная статистика на мобильных */
    .profile-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .stat-card,
    .compact-stat-card {
        padding: 0.5rem !important;
        text-align: center !important;
    }
    
    .stat-value {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    .stat-label {
        font-size: 0.625rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* === ИСПРАВЛЕНИЯ ДЛЯ БЛОКОВ КОНТЕНТА === */
    
    /* Уменьшаем отступы в карточках */
    .profile-card,
    .bg-\[\#252525\],
    .bg-\[\#2a2a2a\] {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Исправление заголовков карточек */
    .card-title,
    .section-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* === ПРЕДОТВРАЩЕНИЕ ПЕРЕКРЫТИЙ === */
    
    /* Обеспечиваем правильный z-index для важных элементов */
    .profile-avatar-container {
        z-index: 20 !important;
        position: relative !important;
    }
    
    .profile-balance-info {
        z-index: 5 !important;
        position: relative !important;
    }
    
    /* Исправление флекс-контейнеров */
    .profile-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* === ИСПРАВЛЕНИЯ ДЛЯ МЕЛКИХ ЭКРАНОВ === */
}

@media (max-width: 480px) {
    
    /* Еще более компактная версия для очень маленьких экранов */
    .profile-avatar,
    #main-avatar,
    .user-avatar.large {
        width: 64px !important;
        height: 64px !important;
    }
    
    .profile-balance-card,
    .balance-display {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    .level-number,
    #profile-level {
        font-size: 1.125rem !important;
    }
    
    .level-title,
    #profile-level-title {
        font-size: 0.6875rem !important;
    }
    
    .stat-value {
        font-size: 0.875rem !important;
    }
    
    .stat-label {
        font-size: 0.5625rem !important;
    }
}

/* === ИСПРАВЛЕНИЯ ДЛЯ МОДАЛЬНОГО ОКНА ЗАДАНИЯ === */
@media (max-width: 768px) {
    
    /* Модальное окно */
    #subscription-modal .bg-\[\#252525\] {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }
    
    /* Заголовок модального окна */
    #subscription-modal .flex.justify-between.items-start {
        align-items: flex-start !important;
        margin-bottom: 1rem !important;
    }
    
    /* Кнопка закрытия - справа сверху */
    #subscription-modal #close-modal {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 10 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    /* Название канала и username в одной строке */
    #subscription-modal .flex.items-center.mb-3 {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #subscription-modal .flex.items-center.mb-3 > div {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    #subscription-modal #modal-channel-title {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    #subscription-modal #modal-channel-username {
        font-size: 0.875rem !important;
        margin-left: 0 !important;
    }
    
    /* Кнопка "Открыть канал" */
    #subscription-modal #modal-subscribe-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Добавляем иконку слева для кнопки "Открыть канал" */
    #subscription-modal #modal-subscribe-link::before {
        content: "📱" !important;
        font-size: 1rem !important;
        margin-right: 0.25rem !important;
    }
    
    /* Чекбокс и текст */
    #subscription-modal .flex.items-center.mb-4 {
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    #subscription-modal #subscription-confirmation {
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        margin-top: 0.125rem !important;
    }
    
    #subscription-modal label[for="subscription-confirmation"] {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        margin-left: 0 !important;
    }
    
    /* Кнопки действий */
    #subscription-modal .flex.justify-end.space-x-3 {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: 1.5rem !important;
    }
    
    #subscription-modal .flex.justify-end.space-x-3 button {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        order: 1 !important;
    }
    
    /* Кнопка "Проверить подписку" первая */
    #subscription-modal #verify-subscription {
        order: 0 !important;
    }
    
    /* Отступы в содержимом модального окна */
    #subscription-modal .bg-\[\#2a2a2a\] {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Баллы */
    #subscription-modal #modal-channel-points {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* === ИСПРАВЛЕНИЯ ДЛЯ БЕЗОПАСНОСТИ === */

/* Предотвращение переполнения контента */
.profile-container * {
    box-sizing: border-box !important;
}

/* Предотвращение горизонтальной прокрутки */
@media (max-width: 768px) {
    .profile-content,
    .profile-sidebar,
    .profile-main-content {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}