/**
 * CORREÇÃO DE RESPONSIVIDADE MOBILE
 * Fixa problemas de texto grande, quebra de layout e elementos muito grandes no mobile
 */

/* ==================== VIEWPORT E BASE ==================== */
/* Garantir que não haja zoom automático e textos sejam dimensionados corretamente */
html {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size: 16px !important;
}

body {
    font-size: 16px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ==================== PÁGINA DE PRODUTO - MOBILE ==================== */
@media (max-width: 767px) {
    /* Container principal - ESPAÇAMENTO REDUZIDO */
    .produto-container {
        padding: 0.5rem 0.5rem !important;
        padding-top: 85px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Grid de produto - ESPAÇAMENTO COMPACTO */
    .produto-grid {
        padding: 0.5rem !important;
        gap: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }
    
    /* Container geral - REDUZIR PADDING */
    .container.mx-auto.px-4,
    .container.mx-auto.px-4.py-6 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Título do produto - REDUZIDO */
    .produto-titulo {
        font-size: 1.125rem !important; /* 18px - reduzido de valores maiores */
        line-height: 1.4 !important;
        margin-bottom: 0.375rem !important;
        margin-top: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    /* Categoria */
    .produto-categoria {
        font-size: 0.75rem !important; /* 12px */
        margin-bottom: 0.375rem !important;
        margin-top: 0 !important;
    }
    
    /* Preço principal - REDUZIDO E COMPACTO */
    .preco-box {
        margin-bottom: 0.75rem !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .preco-principal {
        font-size: 1.5rem !important; /* 24px - reduzido */
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    
    .preco-label {
        font-size: 0.8125rem !important; /* 13px */
        margin-bottom: 0.25rem !important;
    }
    
    .economia-badge {
        margin-top: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Badges de produto - COMPACTOS */
    [style*="margin-bottom: 1rem"],
    [style*="margin-bottom: 1.5rem"] {
        margin-bottom: 0.75rem !important;
    }
    
    /* Aviso de produto esgotado - COMPACTO */
    [style*="margin-bottom: 1rem"] div[style*="padding: 1rem"] {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Formulário de compra - ESPAÇAMENTO REDUZIDO */
    .formulario-compra {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .formulario-compra h3 {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.625rem !important;
        margin-top: 0 !important;
    }
    
    /* Quantidade wrapper */
    .quantidade-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .quantidade-input {
        font-size: 1rem !important;
        padding: 0.5rem !important;
        width: 60px !important;
        text-align: center !important;
    }
    
    .quantidade-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }
    
    .quantidade-label {
        font-size: 0.8125rem !important; /* 13px */
    }
    
    /* Resumo de preço - COMPACTO */
    .resumo-preco-box {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        margin-top: 0.5rem !important;
    }
    
    .resumo-preco-box span {
        font-size: 0.8125rem !important; /* 13px */
    }
    
    #totalPedido {
        font-size: 1.125rem !important; /* 18px - reduzido */
        font-weight: 700 !important;
    }
    
    #precoUnitarioResumo {
        font-size: 0.875rem !important; /* 14px */
    }
    
    /* Quantidade resumo wrapper - GAP REDUZIDO */
    .quantidade-resumo-wrapper {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Botão adicionar - COMPACTO */
    .btn-adicionar {
        font-size: 0.9375rem !important; /* 15px */
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        min-height: 44px !important;
        max-height: 50px !important;
        margin-top: 0.5rem !important;
    }
    
    /* Cards de informação - ESPAÇAMENTO REDUZIDO */
    .info-explicativa-box {
        padding: 0.75rem 0.5rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .info-card {
        padding: 0.75rem !important;
    }
    
    .info-card h4 {
        font-size: 0.9375rem !important; /* 15px */
        margin-bottom: 0.375rem !important;
        margin-top: 0 !important;
    }
    
    .info-card p,
    .info-card ol,
    .info-card li {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.5 !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Descrição do produto - COMPACTA */
    .descricao-produto {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .descricao-produto h3 {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    .descricao-produto div,
    .descricao-produto p {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Informações de entrega - COMPACTA */
    .informacoes-entrega {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .informacoes-entrega h3 {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    .entrega-grid {
        gap: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
    
    .entrega-item {
        padding: 0.625rem !important;
    }
    
    .entrega-item strong {
        font-size: 0.875rem !important; /* 14px */
    }
    
    .entrega-item p {
        font-size: 0.8125rem !important; /* 13px */
        margin: 0.25rem 0 0 0 !important;
    }
    
    .entrega-cta {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
    }
    
    /* WhatsApp box - COMPACTA */
    .whatsapp-box {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .whatsapp-box h3 {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.375rem !important;
        margin-top: 0 !important;
    }
    
    .whatsapp-box p {
        font-size: 0.875rem !important; /* 14px */
        margin-bottom: 0.5rem !important;
    }
    
    .btn-whatsapp {
        font-size: 0.9375rem !important; /* 15px */
        padding: 0.75rem 1rem !important;
        min-height: 44px !important;
    }
    
    /* Tabela de preços - COMPACTA */
    .preco-box {
        margin-bottom: 0.75rem !important;
    }
    
    .tier-row {
        padding: 0.625rem !important;
        font-size: 0.875rem !important; /* 14px */
        margin-bottom: 0.5rem !important;
    }
    
    /* Galeria - COMPACTA */
    .galeria-simples {
        margin-bottom: 0.75rem !important;
    }
    
    .produto-info {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* Imagens */
    .imagem-principal {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .imagem-principal img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
    }
    
    .thumbnails-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .thumbnail {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Botão fixo mobile */
    .botao-fixo-mobile {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .mobile-preco {
        font-size: 1rem !important; /* 16px */
        font-weight: 700 !important;
    }
    
    .mobile-quantidade {
        font-size: 0.75rem !important; /* 12px */
    }
    
    .btn-mobile-adicionar {
        font-size: 0.9375rem !important; /* 15px */
        padding: 0.875rem 1.5rem !important;
        min-height: 44px !important;
    }
    
    /* Indicadores de confiança - COMPACTO */
    .indicadores-confianca {
        padding: 0.75rem 0.5rem !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .indicador-item {
        padding: 0.625rem !important;
    }
    
    .indicador-titulo {
        font-size: 0.8125rem !important; /* 13px */
    }
    
    /* Reduzir espaçamentos gerais entre seções */
    section,
    .container.mx-auto.px-4.py-6 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Breadcrumbs - COMPACTO */
    .breadcrumbs {
        padding: 0.5rem 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduzir margens entre elementos */
    .mb-4, .mb-6, .my-4, .my-6 {
        margin-bottom: 0.75rem !important;
    }
    
    .mt-4, .mt-6, .my-4, .my-6 {
        margin-top: 0.75rem !important;
    }
}

/* ==================== MOBILE MUITO PEQUENO (< 360px) ==================== */
@media (max-width: 359px) {
    .produto-container {
        padding: 0.375rem !important;
    }
    
    .produto-titulo {
        font-size: 1rem !important; /* 16px */
    }
    
    .preco-principal {
        font-size: 1.25rem !important; /* 20px */
    }
    
    .formulario-compra {
        padding: 0.75rem !important;
    }
    
    .btn-adicionar,
    .btn-whatsapp,
    .btn-mobile-adicionar {
        font-size: 0.875rem !important; /* 14px */
        padding: 0.75rem 0.875rem !important;
    }
    
    .thumbnails-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==================== MENU MOBILE - CORREÇÕES ==================== */
@media (max-width: 767px) {
    /* Menu mobile - textos menores */
    #mobile-menu {
        width: 85% !important;
        max-width: 320px !important;
    }
    
    #mobile-menu > div:first-child h2 {
        font-size: 0.9375rem !important; /* 15px */
    }
    
    /* Links do menu */
    #mobile-menu a {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
    }
    
    #mobile-menu a span {
        font-size: 0.875rem !important; /* 14px */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
    
    /* Títulos de seção */
    #mobile-menu h3 {
        padding: 0.625rem 1rem !important;
        font-size: 0.625rem !important; /* 10px - muito pequeno para cabeçalhos */
    }
    
    /* Ícones do menu */
    #mobile-menu a svg {
        width: 18px !important;
        height: 18px !important;
        margin-right: 0.75rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Botão de fechar */
    #mobile-menu > div:first-child button {
        width: 32px !important;
        height: 32px !important;
    }
    
    #mobile-menu > div:first-child button svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Badge do carrinho no menu */
    #menu-cart-count {
        font-size: 0.625rem !important; /* 10px */
        padding: 0.125rem 0.375rem !important;
        min-width: 18px !important;
    }
}

/* ==================== CORREÇÃO DE QUEBRA DE TEXTO ==================== */
/* Garantir que textos não quebrem o layout */
* {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* Elementos específicos que não devem quebrar */
input,
textarea,
button,
select {
    font-size: 16px !important; /* Previne zoom no iOS */
    max-width: 100% !important;
}

/* Textos em caixas */
.container,
.produto-container,
.produto-grid,
.produto-info,
.galeria-simples {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==================== CORREÇÃO DE CARDS E BOTÕES GRANDES ==================== */
@media (max-width: 767px) {
    /* Cards menores */
    .info-card,
    .entrega-item,
    .indicador-item {
        min-height: auto !important;
        padding: 0.875rem !important;
    }
    
    /* Botões menores mas acessíveis (mínimo 44x44px) */
    button,
    .btn-adicionar,
    .btn-whatsapp,
    .btn-mobile-adicionar,
    a.btn {
        min-height: 44px !important;
        max-height: 50px !important;
        font-size: 0.9375rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Inputs menores */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 0.625rem !important;
        min-height: 44px !important;
    }
}

/* ==================== PREVENIR ZOOM AUTOMÁTICO NO iOS ==================== */
/* Quando inputs recebem foco no iOS, o navegador faz zoom automático se a fonte for menor que 16px */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
    font-size: 16px !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}