/*======================================================================
# MOBILE.CSS - Otimizações específicas para dispositivos móveis
======================================================================*/

/*======================================================================
# MELHORIAS GERAIS MOBILE
======================================================================*/
@media (max-width: 768px) {
    
    /* Touch-friendly: aumentar áreas de toque */
    .mobile-action-icon,
    .menu-toggle,
    .btn-favorite {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Melhorar legibilidade */
    body {
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* Espaçamento confortável */
    .container {
        padding: 0 12px;
    }
    
    /*==================================================================
    # HEADER MOBILE MELHORADO
    ==================================================================*/
    .mobile-top-bar {
        padding: 10px 12px;
        gap: 12px;
    }
    
    .mobile-actions {
        gap: 8px;
    }
    
    .mobile-action-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
        border-radius: 10px;
    }
    
    .logo-mobile-img {
        height: 42px;
    }
    
    .mobile-search-bar {
        padding: 0 12px 10px;
    }
    
    .mobile-search-bar .search-input {
        font-size: 15px;
        padding: 11px 46px 11px 18px;
    }
    
    /*==================================================================
    # MENU MOBILE - AJUSTES GERAIS
    ==================================================================*/
    .mobile-user-dropdown-trigger {
        padding: 12px 14px;
    }
    
    .mobile-user-avatar {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }
    
    .mobile-user-name {
        font-size: 14px;
    }
    
    .mobile-user-dropdown-item {
        padding: 12px 14px;
        font-size: 13px;
    }
    
    .mobile-user-dropdown-item i {
        font-size: 17px;
    }
    
    /*==================================================================
    # BREADCRUMB MOBILE
    ==================================================================*/
    .breadcrumb-custom {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .breadcrumb-item {
        font-size: 12px;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px;
    }
    
    /*==================================================================
    # FILTROS MOBILE MELHORADOS
    ==================================================================*/
    .mobile-filter-buttons {
        gap: 8px;
        margin-bottom: 15px;
    }
    
    .mobile-filter-btn {
        padding: 12px 16px;
        font-size: 13px;
        border-radius: 10px;
    }
    
    .mobile-filter-panel {
        padding: 18px;
        margin-bottom: 15px;
    }
    
    .mobile-filter-title {
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    /* TAMANHOS MOBILE - MAIORES E MAIS LEGÍVEIS */
    .size-options {
        gap: 8px;
    }
    
    .size-label {
        padding: 12px 16px;
        font-size: 16px;
        min-width: 52px;
        font-weight: 700;
    }
    
    /*==================================================================
    # SEÇÃO DE PRODUTOS MOBILE
    ==================================================================*/
    .section-header {
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 22px;
        gap: 8px;
    }
    
    .section-title i {
        font-size: 20px;
    }
    
    .section-subtitle {
        font-size: 14px;
    }
    
    /*==================================================================
    # CATEGORIAS NAVIGATION MOBILE
    ==================================================================*/
    .categories-navigation {
        padding: 18px;
        margin-bottom: 20px;
    }
    
    .categories-title {
        font-size: 16px;
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
    
    .categories-list {
        gap: 8px;
    }
    
    .category-badge {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    /*==================================================================
    # CARDS DE PRODUTOS MOBILE - OTIMIZADOS
    ==================================================================*/
    .products-grid {
        margin-top: 20px;
    }
    
    .product-item {
        margin-bottom: 20px;
    }
    
    .product-card {
        border-radius: 12px;
    }
    
    /* Botão Favorito Mobile */
    .btn-favorite {
        width: 38px;
        height: 38px;
        top: 8px;
        right: 8px;
    }
    
    .btn-favorite i {
        font-size: 16px;
    }
    
    /* Imagem - proporção otimizada para mobile */
    .product-image-wrapper {
        padding-top: 115%;
    }
    
    /* Badge Mobile */
    .product-badge {
        top: 8px;
        left: 8px;
        padding: 4px 10px;
        font-size: 9px;
    }
    
    /* Informações do Produto Mobile */
    .product-info {
        padding: 12px;
    }
    
    .product-name {
        font-size: 13px;
        min-height: 36px;
        margin-bottom: 6px;
        line-height: 1.4;
        font-weight: 400;
    }
    
    /* Meta Info Mobile */
    .product-meta {
        font-size: 11px;
        margin-bottom: 8px;
    }
    
    /* Tamanhos Mobile - MELHORADOS */
    .product-sizes {
        gap: 5px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    .size-badge {
        padding: 7px 11px;
        font-size: 14px;
        min-width: 38px;
        font-weight: 700;
        border-width: 1.5px;
    }
    
    .size-badge.more-sizes i {
        font-size: 13px;
    }
    
    /* Preço Mobile */
    .product-price {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    /* Botões de Ação Mobile */
    .product-actions {
        gap: 6px;
    }
    
    .btn-buy {
        padding: 11px 14px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    .btn-add-cart {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    
    .btn-add-cart i {
        font-size: 15px;
    }
    
    /*==================================================================
    # ORDENAÇÃO MOBILE
    ==================================================================*/
    .mobile-sort-options {
        gap: 8px;
    }
    
    .mobile-sort-option {
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 8px;
        font-weight: 600;
    }
    
    .mobile-sort-option i {
        font-size: 15px;
    }
    
    /*==================================================================
    # ALERTAS MOBILE
    ==================================================================*/
    .alert {
        padding: 30px 20px;
    }
    
    .alert h4 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .alert p {
        font-size: 14px;
        margin-bottom: 18px;
    }
    
    .alert .fa-3x {
        font-size: 2.5rem;
    }
}

/*======================================================================
# MOBILE EXTRA PEQUENO (iPhone SE, etc)
======================================================================*/
@media (max-width: 375px) {
    
    /* Ajustes para telas muito pequenas */
    .section-title {
        font-size: 20px;
    }
    
    .new-badge {
        font-size: 10px;
        padding: 4px 10px;
    }
    
    .product-name {
        font-size: 12px;
        min-height: 34px;
        font-weight: 400;
    }
    
    .product-meta {
        font-size: 10px;
    }
    
    .product-price {
        font-size: 17px;
        font-weight: 500;
    }
    
    .size-badge {
        padding: 6px 9px;
        font-size: 13px;
        min-width: 36px;
    }
    
    .btn-buy {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .btn-add-cart {
        width: 42px;
        height: 42px;
    }
    
    .category-badge {
        font-size: 11px;
        padding: 7px 10px;
    }
    
    .product-info {
        padding: 10px;
    }
}

/*======================================================================
# LANDSCAPE MOBILE
======================================================================*/
@media (max-width: 768px) and (orientation: landscape) {
    
    /* Otimizar uso do espaço em landscape */
    .mobile-header {
        position: sticky;
        top: 0;
    }
    
    .product-image-wrapper {
        padding-top: 100%;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .product-info {
        padding: 12px;
    }
}

/*======================================================================
# ANIMAÇÕES MOBILE OTIMIZADAS
======================================================================*/
@media (max-width: 768px) {
    
    /* Reduzir animações para melhor performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Scroll suave */
    html {
        scroll-behavior: smooth;
    }
    
    /* Hover states para touch */
    .product-card:active {
        transform: scale(0.98);
    }
    
    .btn-buy:active,
    .btn-add-cart:active,
    .btn-favorite:active {
        transform: scale(0.95);
    }
}

/*======================================================================
# ACESSIBILIDADE MOBILE
======================================================================*/
@media (max-width: 768px) {
    
    /* Melhorar contraste para leitura */
    .product-name a {
        color: #222;
    }
    
    /* Áreas de toque maiores */
    .mobile-category,
    .mobile-submenu a,
    .contact-link,
    .tracking-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    /* Foco visível para navegação por teclado */
    button:focus,
    a:focus {
        outline: 2px solid var(--meninas-primary);
        outline-offset: 2px;
    }
}

/*======================================================================
# NOTIFICAÇÕES MOBILE
======================================================================*/
@media (max-width: 768px) {
    
    .notification {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .notification-content i {
        font-size: 18px !important;
    }
}

/*======================================================================
# PERFORMANCE MOBILE
======================================================================*/
@media (max-width: 768px) {
    
    /* Otimizar renderização */
    .product-image {
        will-change: transform;
    }
    
    /* Reduzir shadows complexos */
    .product-card {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    
    .product-card:hover {
        box-shadow: 0 6px 20px rgba(255, 105, 180, 0.15);
    }
}