/* ============================================
   COSMIC FANTASY MOBILE ELEMENTS
   Компактная и профессиональная адаптация элементов для мобильных
   ============================================ */

/* ========== ОБЩИЕ СТИЛИ ДЛЯ ИКОНОК ========== */
/* Делаем иконки светлыми для всех устройств - белая с фиолетовым свечением */
.section-title i,
.gallery-section .section-title i,
.frozyai-home .section-title i,
.frozyai-home .gallery-section .section-title i {
    color: rgba(255, 255, 255, 0.95) !important;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.8)) !important;
    text-shadow: 
        0 0 15px rgba(139, 92, 246, 0.6),
        0 0 25px rgba(139, 92, 246, 0.4) !important;
}

/* Дополнительное свечение для галереи */
.gallery-section .section-title i {
    color: rgba(255, 255, 255, 1) !important;
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.9)) !important;
    text-shadow: 
        0 0 20px rgba(139, 92, 246, 0.7),
        0 0 30px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* ========== ЗАГОЛОВКИ СЕКЦИЙ ========== */
@media (max-width: 768px) {
    /* Заголовок секции */
    .section-title,
    .gallery-section .section-title,
    .frozyai-home .section-title,
    .frozyai-home .gallery-section .section-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        gap: 10px !important;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        letter-spacing: -0.3px;
    }
    
    /* Иконка в заголовке */
    .section-title i,
    .gallery-section .section-title i,
    .frozyai-home .section-title i,
    .frozyai-home .gallery-section .section-title i {
        font-size: 20px !important;
        width: 24px;
        text-align: center;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.95) !important;
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.8)) !important;
        text-shadow: 
            0 0 12px rgba(139, 92, 246, 0.6),
            0 0 20px rgba(139, 92, 246, 0.4) !important;
    }
    
    /* Подзаголовок секции */
    .section-subtitle,
    .gallery-section .section-subtitle,
    .frozyai-home .section-subtitle,
    .frozyai-home .gallery-section .section-subtitle {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center;
        margin-top: 4px !important;
        margin-bottom: 24px !important;
        color: var(--text-muted) !important;
        opacity: 0.85;
        padding: 0 16px;
        font-weight: 400;
    }
    
    /* Заголовок секции - header */
    .section-header,
    .gallery-section .section-header {
        margin-bottom: 32px !important;
        padding: 0 16px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .section-title,
    .gallery-section .section-title,
    .frozyai-home .section-title,
    .frozyai-home .gallery-section .section-title {
        font-size: 20px !important;
        gap: 8px !important;
    }
    
    .section-title i,
    .gallery-section .section-title i,
    .frozyai-home .section-title i,
    .frozyai-home .gallery-section .section-title i {
        font-size: 18px !important;
        width: 20px;
        color: rgba(255, 255, 255, 0.95) !important;
        filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.8)) !important;
        text-shadow: 
            0 0 10px rgba(139, 92, 246, 0.6),
            0 0 16px rgba(139, 92, 246, 0.4) !important;
    }
    
    .section-subtitle,
    .gallery-section .section-subtitle,
    .frozyai-home .section-subtitle,
    .frozyai-home .gallery-section .section-subtitle {
        font-size: 12px !important;
        margin-top: 2px !important;
        margin-bottom: 20px !important;
        padding: 0 12px;
    }
    
    .section-header,
    .gallery-section .section-header {
        margin-bottom: 24px !important;
        padding: 0 12px;
    }
}

/* ========== КНОПКИ В HERO СЕКЦИИ ========== */
@media (max-width: 768px) {
    /* Контейнер кнопок */
    .hero-actions,
    .hero-banner .hero-actions,
    .frozyai-home .hero-actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
        padding: 0 16px;
        margin-bottom: 24px !important;
    }
    
    /* Кнопки */
    .hero-actions .btn,
    .hero-actions .btn-large,
    .hero-banner .hero-actions .btn,
    .hero-banner .hero-actions .btn-large,
    .frozyai-home .hero-actions .btn,
    .frozyai-home .hero-actions .btn-large {
        width: 100% !important;
        min-width: auto !important;
        max-width: 100%;
        padding: 14px 20px !important;
        font-size: 14px !important;
        font-weight: 600;
        border-radius: 12px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Иконки в кнопках */
    .hero-actions .btn i,
    .hero-actions .btn-large i,
    .hero-banner .hero-actions .btn i,
    .hero-banner .hero-actions .btn-large i {
        font-size: 16px;
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }
    
    /* Текст в кнопках */
    .hero-actions .btn span,
    .hero-actions .btn-large span,
    .hero-banner .hero-actions .btn span,
    .hero-banner .hero-actions .btn-large span {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }
    
    /* Primary кнопка */
    .hero-actions .btn-primary,
    .hero-actions .btn-primary.btn-large,
    .hero-banner .hero-actions .btn-primary,
    .hero-banner .hero-actions .btn-primary.btn-large {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
        border: 2px solid transparent !important;
        box-shadow: 
            0 4px 12px rgba(139, 92, 246, 0.4),
            0 0 20px rgba(236, 72, 153, 0.2) !important;
    }
    
    .hero-actions .btn-primary:active,
    .hero-banner .hero-actions .btn-primary:active {
        transform: scale(0.98);
        box-shadow: 
            0 2px 8px rgba(139, 92, 246, 0.3),
            inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Secondary кнопка */
    .hero-actions .btn-secondary,
    .hero-actions .btn-secondary.btn-large,
    .hero-banner .hero-actions .btn-secondary,
    .hero-banner .hero-actions .btn-secondary.btn-large {
        background: rgba(139, 92, 246, 0.1) !important;
        border: 2px solid rgba(139, 92, 246, 0.3) !important;
        color: var(--text-cosmic) !important;
    }
    
    .hero-actions .btn-secondary:active,
    .hero-banner .hero-actions .btn-secondary:active {
        transform: scale(0.98);
        background: rgba(139, 92, 246, 0.15) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .hero-actions {
        gap: 10px !important;
        padding: 0 12px;
    }
    
    .hero-actions .btn,
    .hero-actions .btn-large {
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-radius: 10px;
        gap: 6px;
    }
    
    .hero-actions .btn i,
    .hero-actions .btn-large i {
        font-size: 14px;
        width: 16px;
    }
    
    .hero-actions .btn span,
    .hero-actions .btn-large span {
        font-size: 13px;
    }
}

/* ========== КНОПКА В НАВИГАЦИИ ========== */
@media (max-width: 768px) {
    /* Кнопка "СОЗДАТЬ" в топ-навигации */
    .nav-btn-primary,
    .frozyai-top-nav .nav-btn-primary {
        padding: 10px 16px !important;
        font-size: 12px !important;
        font-weight: 700;
        border-radius: 10px;
        min-width: auto;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .nav-btn-primary i {
        font-size: 14px;
        width: 16px;
        text-align: center;
    }
    
    /* Уменьшаем эффекты для мобильных */
    .nav-btn-primary:hover {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 
            0 4px 16px rgba(236, 72, 153, 0.4),
            0 0 30px rgba(236, 72, 153, 0.2);
    }
    
    .nav-btn-primary:active {
        transform: translateY(0) scale(0.98);
        box-shadow: 
            0 2px 8px rgba(236, 72, 153, 0.3),
            inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .nav-btn-primary,
    .frozyai-top-nav .nav-btn-primary {
        padding: 8px 12px !important;
        font-size: 11px !important;
        border-radius: 8px;
        gap: 4px;
    }
    
    .nav-btn-primary i {
        font-size: 12px;
        width: 14px;
    }
    
    /* На очень маленьких экранах можно скрыть текст */
    @media (max-width: 360px) {
        .nav-btn-primary span {
            display: none;
        }
        
        .nav-btn-primary {
            padding: 10px !important;
            min-width: 40px;
            width: 40px;
        }
    }
}

/* ========== ОБЩИЕ УЛУЧШЕНИЯ ========== */
@media (max-width: 768px) {
    /* Плавные анимации для всех элементов */
    .section-title,
    .section-subtitle,
    .hero-actions .btn,
    .nav-btn-primary {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Улучшенная читаемость */
    .section-title,
    .section-subtitle {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Компактные отступы */
    .gallery-section {
        padding: 60px 16px !important;
    }
    
    .hero-banner {
        padding: 100px 16px 80px !important;
    }
}

/* Очень маленькие экраны - дополнительные оптимизации */
@media (max-width: 480px) {
    .gallery-section {
        padding: 40px 12px !important;
    }
    
    .hero-banner {
        padding: 80px 12px 60px !important;
    }
}