/* Исправления мобильной верстки для страницы "Задания" */

/* 1. Исправление заголовка "Доступные задания" */
.tasks-page-container .relative.mb-8 .relative.bg-\[#1a1a1a\]\/80 {
    background: #252525 !important; /* Добавляем серый фон */
}

/* Выравнивание галочки и заголовка в одну строку на мобильных */
@media (max-width: 768px) {
    /* Заголовок с иконкой в одну строку */
    .tasks-page-container .flex.items-center.gap-4 {
        align-items: center !important;
        gap: 12px !important;
    }
    
    .tasks-page-container .w-16.h-16.rounded-2xl {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }
    
    .tasks-page-container .w-16.h-16.rounded-2xl i {
        font-size: 20px !important;
    }
    
    /* Статистика в одну строку на мобильных */
    .tasks-page-container .flex.gap-4.w-full.lg\:w-auto {
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .tasks-page-container .flex.gap-4.w-full.lg\:w-auto::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Компактные блоки статистики */
    .tasks-page-container .bg-gradient-to-br.from-amber-500\/20,
    .tasks-page-container .bg-gradient-to-br.from-blue-500\/20,
    .tasks-page-container .bg-gradient-to-br.from-green-500\/20 {
        min-width: 120px !important;
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
    }
    
    .tasks-page-container .w-10.h-10.rounded-xl {
        width: 32px !important;
        height: 32px !important;
        margin-right: 8px !important;
    }
    
    .tasks-page-container .w-10.h-10.rounded-xl i {
        font-size: 14px !important;
    }
    
    .tasks-page-container .text-xs {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
    
    .tasks-page-container .font-bold.text-lg {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
}

/* 2. Исправление карточек активных подписок */
.subscription-card,
.active-subscription-card {
    background: #252525 !important;
    border: 1px solid #374151 !important;
}

/* Выравнивание иконки монет и блока "Схемы" в одну строку */
@media (max-width: 768px) {
    .subscription-card .flex.items-center,
    .active-subscription-card .flex.items-center {
        align-items: center !important;
        gap: 8px !important;
    }
    
    .subscription-card .w-8.h-8,
    .subscription-card .w-10.h-10,
    .active-subscription-card .w-8.h-8,
    .active-subscription-card .w-10.h-10 {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Выделение текста "Активна" */
    .subscription-status-active,
    .text-green-400:contains("Активна"),
    .active-subscription-card .text-green-400 {
        background: rgba(34, 197, 94, 0.2) !important;
        color: #22c55e !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
        border: 1px solid rgba(34, 197, 94, 0.3) !important;
    }
}

/* 3. Исправление пункта "Получите баллы" - добавляем фон к цифре 4 */
.instruction-step-number,
.step-number,
.numbered-list .number,
.bg-blue-500.text-white.rounded-full.w-8.h-8 {
    background: #3b82f6 !important;
    color: white !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

/* Дополнительные селекторы для цифры 4 */
.instruction-item:nth-child(4) .step-number,
.step-item:nth-child(4) .number,
.numbered-step:nth-child(4) .step-indicator {
    background: #3b82f6 !important;
    color: white !important;
}

/* Общие исправления для мобильной версии */
@media (max-width: 768px) {
    /* Уменьшаем отступы на мобильных */
    .tasks-page-container {
        padding: 0 12px !important;
    }
    
    .tasks-content {
        gap: 16px !important;
    }
    
    .tasks-main-container {
        padding: 16px !important;
    }
    
    /* Исправляем карточки заданий */
    .task-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Кнопки в карточках заданий */
    .task-card button {
        padding: 8px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* Иконки в карточках */
    .task-card .w-12.h-12,
    .task-card .w-10.h-10 {
        width: 40px !important;
        height: 40px !important;
    }
    
    .task-card .w-12.h-12 i,
    .task-card .w-10.h-10 i {
        font-size: 16px !important;
    }
}

/* Дополнительные исправления для очень маленьких экранов */
@media (max-width: 480px) {
    .tasks-page-container .flex.gap-4.w-full.lg\:w-auto {
        gap: 6px !important;
    }
    
    .tasks-page-container .bg-gradient-to-br.from-amber-500\/20,
    .tasks-page-container .bg-gradient-to-br.from-blue-500\/20,
    .tasks-page-container .bg-gradient-to-br.from-green-500\/20 {
        min-width: 100px !important;
        padding: 6px 8px !important;
    }
    
    .tasks-page-container .font-bold.text-lg {
        font-size: 12px !important;
    }
}

/* Дополнительные исправления для заголовка на мобильных */
@media (max-width: 768px) {
    /* Обеспечиваем правильное выравнивание заголовка */
    .tasks-page-container .flex.flex-col.lg\:flex-row {
        gap: 16px !important;
    }
    
    .tasks-page-container h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    
    .tasks-page-container p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}

/* Специальные исправления для галочки в заголовке "Доступные задания" */
.tasks-page-container .w-16.h-16.rounded-2xl.bg-gradient-to-br.from-blue-500.to-purple-600 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tasks-page-container .w-16.h-16.rounded-2xl.bg-gradient-to-br.from-blue-500.to-purple-600 i {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Исправления для заголовка панели заданий */
.tasks-main-container .w-12.h-12.rounded-xl.bg-gradient-to-br {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tasks-main-container .w-12.h-12.rounded-xl.bg-gradient-to-br i {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Дополнительные исправления для мобильных устройств */
@media (max-width: 768px) {
    /* Фильтры сортировки - адаптивная верстка */
    .tasks-main-container .flex.flex-col.lg\:flex-row.justify-between {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Улучшенное отображение статуса подписки */
    .subscription-status-badge {
        background: rgba(34, 197, 94, 0.3) !important;
        color: #22c55e !important;
        border: 1px solid rgba(34, 197, 94, 0.5) !important;
        font-weight: 600 !important;
    }
    
    /* Выравнивание иконок монет в карточках подписок */
    .subscription-points {
        align-items: center !important;
        display: flex !important;
    }
    
    .subscription-points i {
        margin-right: 4px !important;
        line-height: 1 !important;
    }
    
    /* Скрытие скроллбара на мобильных */
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Исправления для статистических блоков */
    .tasks-page-container .bg-gradient-to-br.from-amber-500\/20,
    .tasks-page-container .bg-gradient-to-br.from-blue-500\/20,
    .tasks-page-container .bg-gradient-to-br.from-green-500\/20 {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 8px !important;
    }
    
    .tasks-page-container .bg-gradient-to-br.from-amber-500\/20 .w-8,
    .tasks-page-container .bg-gradient-to-br.from-blue-500\/20 .w-8,
    .tasks-page-container .bg-gradient-to-br.from-green-500\/20 .w-8 {
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .tasks-page-container .bg-gradient-to-br.from-amber-500\/20 .text-center,
    .tasks-page-container .bg-gradient-to-br.from-blue-500\/20 .text-center,
    .tasks-page-container .bg-gradient-to-br.from-green-500\/20 .text-center {
        width: 100% !important;
    }
}