/* ==========================================
   6. RESPONSIVIDADE (TELA DE CELULAR E TABLET)
========================================== */

@media (max-width: 768px) {
    /* Ajustes do Banner e Topo */
    .top-banner { height: 140px; }
    .header-main-layout { flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: -55px;}
    .store-logo-wrapper { margin-top: 0; margin-bottom: 5px;}
    .store-logo { width: 110px; height: 110px; border-width: 3px; }
    
    .store-details-wrapper { padding-top: 5px; width: 100%; display: flex; flex-direction: column; align-items: center;}
    .store-title-row { justify-content: center; flex-direction: column; gap: 10px; margin-bottom: 12px; }
    .store-title-row h1 { font-size: 22px; }
    .store-info-row { justify-content: center; flex-wrap: wrap; text-align: center; gap: 10px; }
    
    .header-actions { flex-direction: row; justify-content: center; width: 100%; padding-top: 15px; padding-bottom: 5px; border-top: 1px solid var(--border-color); margin-top: 10px;}

    /* Menu Pegajoso (Navegação) */
    .sticky-nav-wrapper { padding: 10px 15px 0 15px; margin-top: 15px; top: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.02);}
    .nav-tabs { gap: 15px; }
    .nav-tabs a { font-size: 13px; padding-bottom: 12px; }

    /* Cardápio e Cartões */
    .main-content { padding: 0 15px; margin-bottom: 80px;}
    .category-title { font-size: 18px; margin-top: 30px; margin-bottom: 15px;}
    
    .products-grid { grid-template-columns: 1fr; gap: 10px; background: transparent;} 
    .product-card { padding: 15px; gap: 12px; border: 1px solid var(--border-color); border-radius: 12px; align-items: center; background: var(--card-bg);}
    
    .product-info { justify-content: flex-start; }
    .product-title { font-size: 15px; }
    .product-desc { font-size: 12px; -webkit-line-clamp: 2; margin-bottom: 8px; }
    .product-price { font-size: 14px; }
    
    .product-image-container { width: 95px; height: 95px; }
    .btn-add { width: 28px; height: 28px; font-size: 18px; bottom: -8px; right: -8px; }

    /* Janela de Montar Pizza (Modal) */
    .product-detail-modal { z-index: 9999; }
    .product-detail-layout { flex-direction: column; }
    .product-detail-image-box { width: 100%; height: 240px; padding: 0; flex-shrink: 0; }
    .product-detail-image-box img { max-width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
    .product-detail-options-box { width: 100%; padding: 20px 15px; padding-bottom: 100px; }
    
    .options-grid { grid-template-columns: 1fr; }
    .option-label { padding: 12px 10px; background: var(--bg-color);}
    
    .product-detail-footer { padding: 12px 15px; gap: 12px; flex-wrap: wrap; box-shadow: 0 -4px 15px rgba(0,0,0,0.1);}
    .quantity-selector { flex: 1; min-width: 100px; justify-content: center; padding: 12px; }
    .add-to-cart-btn { flex: 2; padding: 12px; font-size: 15px; white-space: nowrap; }

    /* Ajuste responsivo para o botão flutuante de rastreio */
    .tracking-floating-btn {
        bottom: 95px;
        right: 20px;
        padding: 10px 15px;
        font-size: 13px;
    }

    /* Ajuste Dark Mode específico para Mobile */
     .products-grid { background-color: transparent; }
}

/* Telas muito pequenas (iPhones antigos, etc.) */
@media (max-width: 450px) {
    .floating-cart-btn { bottom: 20px; right: 20px; }
    .tracking-floating-btn { bottom: 90px; right: 20px; }
}

/* 🔥 CÓDIGO SUPREMO ANTI-CACHE PARA O MENU VERDE 🔥 */
        #scrollspy-nav a:hover {
            color: var(--primary-green) !important;
            border-bottom: 2px solid var(--primary-green) !important;
        }

        /* OTIMIZAÇÃO DE ESPAÇO DO CARRINHO PARA CELULAR (Evita rolar muito para baixo) */
        @media (max-width: 768px) {
            .cart-drawer { display: flex; flex-direction: column; width: 100% !important; height: 100vh; }

        /* OTIMIZAÇÃO DE ESPAÇO DO CARRINHO PARA CELULAR (Evita rolar muito para baixo) */
        @media (max-width: 768px) {
            .cart-drawer { display: flex; flex-direction: column; width: 100% !important; height: 100vh; }
            .cart-header { padding: 12px 15px !important; }
            .cart-header h2 { font-size: 1.1rem !important; margin: 0; }
            
            /* Área dos produtos espremida, mas com scroll */
            .cart-items { flex-grow: 1; overflow-y: auto; padding: 10px !important; }
            .cart-item { padding: 8px !important; margin-bottom: 8px !important; }
            .cart-item h4 { font-size: 13px !important; margin-bottom: 2px !important; }
            .cart-item p { font-size: 11px !important; margin-bottom: 2px !important; }
            
            /* Rodapé e Formulário compactos */
            .cart-footer { padding: 10px 15px 15px 15px !important; }
            .cart-footer > div { margin-bottom: 4px !important; }
            
            /* Grid inteligente para o formulário (caixas lado a lado quando possível) */
            .checkout-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px !important;}
            .checkout-input { padding: 8px 10px !important; font-size: 13px !important; margin-bottom: 0 !important; border-radius: 6px !important; width: 100%;}
            
            /* Campos que ocupam a largura toda */
            #cliente-nome, #cliente-telefone, #cliente-endereco, #cliente-referencia, #cliente-entrega { grid-column: span 2; }
            
            /* Os campos de 'Pagamento' e 'Troco' vão ficar automaticamente dividindo metade da tela cada um! */

            textarea#cliente-endereco { height: 38px !important; min-height: 38px !important; padding-top: 10px !important; resize: none; overflow: hidden;}
            
            .cart-total-row { font-size: 16px !important; margin-top: 4px !important; margin-bottom: 6px !important; }
            .btn-finalizar-pedido { padding: 10px !important; font-size: 14px !important; border-radius: 8px !important; margin-top: 0 !important;}
            
            #cupom-input { padding: 8px 10px !important; }
            #btn-aplicar-cupom { padding: 0 12px !important; font-size: 12px !important; }
        }
        /* 🔥 BOTÃO RASTREIO REDONDO (SOMENTE NO CELULAR) 🔥 */
            .tracking-floating-btn {
                width: 80px !important;
                height: 80px !important;
                border-radius: 50% !important; /* Bolinha perfeita */
                display: flex !important;
                flex-direction: column !important; /* Empilha a pizza e o texto */
                align-items: center !important;
                justify-content: center !important;
                padding: 5px !important;
                gap: 2px !important;
            }
            
            .tracking-floating-btn .rastreio-icone {
                font-size: 24px !important; /* Pizza maior em destaque */
                line-height: 1 !important;
            }
            
            .tracking-floating-btn .rastreio-texto {
                font-size: 10px !important; /* Letra miúda e elegante */
                line-height: 1.1 !important;
                text-align: center !important;
                white-space: normal !important; /* A quebra automática que você pediu! */
            }

            /* ==========================================
   PROTEÇÃO DAS IMAGENS DO RASTREIO (ANTI-ARRASTE E DOWNLOAD)
========================================== */
#rastreio-content img {
    pointer-events: none !important; /* Bloqueia o clique direito e o toque longo no telemóvel */
    -webkit-user-drag: none !important; /* Bloqueia a tentativa de arrastar no computador */
    user-select: none !important; /* Impede que a imagem fique selecionada a azul */
}