/* ============================================
   SHOPEE-MOBILE.CSS - Estilos para Mobile
   Aplicado em telas até 768px
   VERSÃO OTIMIZADA - SEM CONFLITOS
   ============================================ */

@media (max-width: 768px) {
    /* ============================================
       CONTAINER E LAYOUT GERAL
       ============================================ */
    .container {
        padding: 0 12px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
    
    .row, [class*="grid"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* ============================================
       TOP NAVBAR - Links à esquerda, redes à direita
       ============================================ */
    .top-navbar {
        height: 34px !important;
    }
    
    .top-navbar-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 34px !important;
        width: 100% !important;
    }
    
    /* Lado esquerdo - Links */
    .navbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .navbar-link {
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 300 !important;
        white-space: nowrap !important;
    }
    
    .separator {
        color: rgba(255,255,255,0.3) !important;
        font-size: 11px !important;
        margin: 0 2px !important;
    }
    
    /* Lado direito - Redes sociais */
    .navbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .navbar-text {
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 300 !important;
        white-space: nowrap !important;
    }
    
    .social-icons {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .social-icon {
        color: #fff !important;
        font-size: 13px !important;
        opacity: 0.9 !important;
        transition: opacity 0.2s ease !important;
        line-height: 1 !important;
    }
    
    .social-icon:hover {
        opacity: 1 !important;
    }
    
    /* ============================================
       HEADER PRINCIPAL
       ============================================ */
    .shopee-header {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .header-content {
        flex-direction: column !important;
        height: auto !important;
        gap: 10px !important;
        padding: 10px 0 !important;
        width: 100% !important;
    }
    
    .logo {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* ===== LOGO - TAMANHO AUMENTADO NO MOBILE ===== */
    .logo img {
        height: 65px !important; /* AUMENTADO de 36px para 65px */
        width: auto !important;
        max-width: 180px !important; /* AUMENTADO de 120px para 140px */
        margin: 0 auto !important;
    }
    /* ============================================ */
    
    /* ============================================
       SEÇÃO DE BUSCA
       ============================================ */
    .search-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-wrapper {
        width: 100% !important;
    }
    
    .search-input {
        height: 36px !important;
        font-size: 13px !important;
    }
    
    .search-button {
        width: 45px !important;
        height: 36px !important;
        font-size: 14px !important;
        padding: 0 !important;
    }
    
    .trending-searches {
        display: none !important; /* Esconder trends no mobile */
    }
    
    /* ============================================
       CARRINHO - REMOVIDO NO MOBILE
       ============================================ */
    .cart-wrapper {
        display: none !important;
    }
    
    /* ============================================
       HERO SECTION
       ============================================ */
    .hero-section {
        padding: 20px 0 !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        padding: 0 5px !important;
    }
    
    .hero-subtitle {
        font-size: 0.875rem !important;
        padding: 0 10px !important;
    }
    
    .main-search-box {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .search-box-wrapper {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    #main-search {
        border-radius: 2px !important;
        width: 100% !important;
        height: 36px !important;
    }
    
    .btn-search-large {
        border-radius: 2px !important;
        width: 100% !important;
        height: 36px !important;
        padding: 0 !important;
    }
    
    /* ============================================
       RESULTS CONTAINER
       ============================================ */
    .results-container {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .filters-sidebar {
        width: 100% !important;
        position: static !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
    }
    
    /* ============================================
       GRIDS DE PRODUTOS
       ============================================ */
    .products-grid,
    .promo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* ============================================
       PRODUCT CARDS
       ============================================ */
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .product-title {
        font-size: 11px !important;
        height: 30px !important;
        line-height: 15px !important;
    }
    
    .current-price {
        font-size: 14px !important;
    }
    
    .original-price {
        font-size: 11px !important;
    }
    
    .product-rating {
        font-size: 10px !important;
    }
    
    .stars {
        font-size: 11px !important;
    }
    
    .product-actions {
        gap: 4px !important;
    }
    
    .btn-buy, .btn-share {
        padding: 4px 2px !important;
        font-size: 10px !important;
    }
    
    .btn-buy i, .btn-share i {
        font-size: 10px !important;
    }
    
    /* ============================================
       SECTION HEADERS
       ============================================ */
    .section-header {
        margin: 20px 0 10px !important;
        padding-bottom: 8px !important;
    }
    
    .section-header h2 {
        font-size: 1rem !important;
    }
    
    .section-header h2:before {
        width: 0.5rem !important;
        height: 1.2rem !important;
    }
    
    .see-all {
        font-size: 12px !important;
    }
    
    /* ============================================
       CATEGORIES GRID
       ============================================ */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .category-card {
        padding: 10px 5px !important;
    }
    
    .category-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .category-card span {
        font-size: 11px !important;
    }
    
    /* ============================================
       COMMERCIAL SECTION
       ============================================ */
    .commercial-card {
        padding: 20px 15px !important;
    }
    
    .commercial-content h2 {
        font-size: 1.25rem !important;
    }
    
    .commercial-description {
        font-size: 0.875rem !important;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .feature {
        padding: 10px !important;
    }
    
    .feature i {
        font-size: 1.25rem !important;
    }
    
    .feature h4 {
        font-size: 0.875rem !important;
    }
    
    .feature p {
        font-size: 0.75rem !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .btn-primary, .btn-whatsapp {
        width: 100% !important;
        padding: 10px !important;
    }
    
    /* ============================================
       FOOTER
       ============================================ */
    .shopee-footer {
        padding: 30px 0 15px !important;
        margin-top: 40px !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .footer-brand {
        text-align: center !important;
    }
    
    .footer-brand img {
        margin: 0 auto 15px !important;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr !important);
        gap: 20px !important;
    }
    
    .link-group h4 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    
    .link-group a {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    
    .footer-bottom {
        padding-top: 15px !important;
        font-size: 12px !important;
    }
    
    /* ============================================
       MODAL
       ============================================ */
    .modal-content {
        width: 95% !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .modal-body h3 {
        font-size: 1.1rem !important;
    }
    
    .link-container {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .btn-copy {
        width: 100% !important;
    }
    
    .modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .modal-note {
        font-size: 12px !important;
    }
    
    /* ============================================
       LOADING E ERROR STATES
       ============================================ */
    .loading-spinner, .loading-overlay {
        padding: 40px 15px !important;
    }
    
    .loading-spinner i, .loading-overlay i {
        font-size: 1.5rem !important;
    }
    
    .error-message, .no-results {
        padding: 40px 15px !important;
    }
    
    .error-message i, .no-results i {
        font-size: 2.5rem !important;
    }
    
    .error-message h3, .no-results h3 {
        font-size: 1.1rem !important;
    }
    
    /* ============================================
       UTILITÁRIOS
       ============================================ */
    .mt-20 { margin-top: 15px !important; }
    .mb-20 { margin-bottom: 15px !important; }
    .mt-40 { margin-top: 25px !important; }
    .mb-40 { margin-bottom: 25px !important; }
}

/* ============================================
   AJUSTES PARA TELAS MUITO PEQUENAS (≤ 576px)
   ============================================ */
@media (max-width: 576px) {
    .top-navbar {
        height: 32px !important;
    }
    
    .top-navbar-content {
        height: 32px !important;
    }
    
    .navbar-link {
        font-size: 10px !important;
    }
    
    .separator {
        font-size: 10px !important;
    }
    
    .navbar-text {
        font-size: 10px !important;
    }
    
    .social-icon {
        font-size: 12px !important;
    }
    
    /* ===== LOGO - AINDA MAIOR EM TELAS PEQUENAS ===== */
    .logo img {
        height: 52px !important; /* Ligeiramente menor que 768px mas ainda maior que antes */
        max-width: 130px !important;
    }
    /* ================================================ */
    
    .search-input {
        height: 34px !important;
        font-size: 12px !important;
    }
    
    .search-button {
        width: 42px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
    
    #main-search,
    .btn-search-large {
        height: 34px !important;
    }
    
    .products-grid,
    .promo-grid {
        gap: 6px !important;
    }
}

/* ============================================
   AJUSTES PARA TELAS EXTREMAMENTE PEQUENAS (≤ 360px)
   ============================================ */
@media (max-width: 360px) {
    .navbar-left {
        gap: 2px !important;
    }
    
    .navbar-link {
        font-size: 9px !important;
    }
    
    .separator {
        margin: 0 1px !important;
    }
    
    .navbar-right {
        gap: 4px !important;
    }
    
    .navbar-text {
        font-size: 9px !important;
    }
    
    .social-icons {
        gap: 4px !important;
    }
    
    .social-icon {
        font-size: 11px !important;
    }
    
    /* ===== LOGO - TAMANHO MÍNIMO ===== */
    .logo img {
        height: 38px !important;
        max-width: 120px !important;
    }
    /* ================================ */
    
    .products-grid,
    .promo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
    
    .product-title {
        font-size: 10px !important;
        height: 28px !important;
    }
    
    .current-price {
        font-size: 12px !important;
    }
    
    .btn-buy, .btn-share {
        font-size: 9px !important;
    }
    
    .footer-links {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
}

/* ============================================
   ORIENTAÇÃO PAISAGEM
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .products-grid,
    .promo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .hero-section {
        padding: 15px 0 !important;
    }
    
    .modal-content {
        max-height: 85vh !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .shopee-header,
    .commercial-section,
    .modal,
    .product-actions,
    .search-container,
    .filters-sidebar,
    .top-navbar {
        display: none !important;
    }
}