/* CSS Responsivo adicional para páginas de pizza */

/* Regras gerais para todos os dispositivos */
.imagem-ampliada img {
    max-width: 100%;
    height: auto;
}

/* Corrige problemas com a visualização de imagens */
#detalhesProduto .info1 .fotoProduto figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Previne overflow horizontal em todos os dispositivos */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.container.containerFinalizar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
}

/* Corrige overflow no texto longo das descrições */
#detalhesProduto .info2 .opcoes .nome {
    max-width: 100%;
}

#detalhesProduto .info2 .opcoes .nome .preco {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    width: 100%;
    display: inline-block;
}

/* Melhorias para dispositivos tablet e mobile */
@media only screen and (max-width: 768px) {
    /* Corrige largura de elementos para evitar overflow */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    
    #detalhesProduto, 
    #detalhesProduto .info1, 
    #detalhesProduto .info2,
    #detalhesProduto .info3 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Melhora a experiência de toque nos botões */
    .removerQtdeOpcao, .adicionarQtdeOpcao {
        min-width: 35px;
        min-height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ajusta tamanho do botão finalizar */
    .btn.adicionarProduto {
        font-size: 1.1rem;
        padding: 15px;
        margin-top: 20px;
    }
    
    /* Melhora espaçamento entre seções */
    #detalhesProduto .info2 .tipo {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    
    /* Melhora apresentação visual do preço */
    #detalhesProduto .info3 #precoProduto {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        margin: 10px 0;
    }
    
    /* Melhor visualização dos seletores de opções */
    #detalhesProduto .info2 .opcoes {
        background-color: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    
    /* Destaca opções selecionadas */
    #detalhesProduto .info2 .opcoes.selecionado {
        background-color: #f0fff0;
        border-left: 3px solid #028b49;
    }
    
    /* Corrige alinhamento dos botões nas opções */
    #detalhesProduto .info2 .opcoes > div.desc {
        flex-wrap: wrap;
    }
    
    /* Ajusta a largura da descrição para evitar overflow */
    #detalhesProduto .info2 .opcoes .nome {
        width: 65%;
        padding-right: 5px;
    }
    
    .qtdeProdutoOpcao {
        width: 30%;
        min-width: auto;
    }
    
    /* Ajustes para imagens */
    .overlay, .imagem-ampliada {
        max-width: 100vw;
        box-sizing: border-box;
    }
}

/* Regras específicas para telas pequenas (smartphones) */
@media only screen and (max-width: 480px) {
    /* Ajusta o container para telas pequenas */
    .containerFinalizar {
        padding: 10px 5px;
        margin: 0;
        border: none;
    }
    
    /* Corrige problema de overflow nas descrições de sabores */
    #detalhesProduto .info2 .opcoes .nome .preco {
        font-size: 12px;
        line-height: 1.3;
    }
    
    /* Organiza melhor o layout dos elementos de opção */
    #detalhesProduto .info2 .opcoes > div.desc {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    #detalhesProduto .info2 .opcoes > div.desc .nome {
        width: 100%;
        margin-bottom: 8px;
    }
    
    #detalhesProduto .info2 .opcoes .nome b {
        font-size: 0.9rem;
        display: block;
        margin-bottom: 3px;
    }
    
    #detalhesProduto .info2 .opcoes .nome .preco {
        font-size: 0.8rem;
        line-height: 1.2;
        margin-top: 2px;
    }
    
    /* Melhora layout dos containers */
    #detalhesProduto .info2 {
        padding: 0;
    }
    
    #detalhesProduto .info2 .tipo {
        margin-bottom: 10px;
    }
    
    #detalhesProduto .info2 .tipo .topo {
        padding: 8px;
    }
    
    #detalhesProduto .info2 .opcoes {
        padding: 8px;
    }
    
    /* Ajusta botões de quantidade para evitar overflow */
    .qtdeProdutoOpcao {
        width: auto;
        align-self: flex-end;
        margin-top: 3px;
    }
    
    /* Melhora a aparência da descrição do produto */
    .descricao .detalhe, .descricao .precoPromocao, .descricao .preco {
        display: block;
        margin: 5px 0;
    }
    
    .descricao .estoque {
        margin-top: 10px;
        padding: 5px;
        background-color: rgba(2, 139, 73, 0.1);
        border-radius: 5px;
        display: inline-block;
    }
    
    /* Botão voltar mais visível */
    a.voltar {
        padding: 8px 15px;
        font-size: 0.8rem;
        left: 5px;
        top: 5px;
    }
    
    /* Melhora espaçamento do modal de finalização */
    .swal2-popup {
        padding: 15px !important;
        font-size: 14px !important;
    }
    
    .swal2-title {
        font-size: 1.2rem !important;
    }
    
    /* Ajusta inputs e campos de texto */
    #detalhesProduto .info2 > input.observacao {
        border-radius: 5px;
        font-size: 14px;
    }
}

/* Ajustes para telas muito pequenas */
@media only screen and (max-width: 375px) {
    /* Reduz ainda mais fontes e espaçamentos */
    #detalhesProduto .info1 .descricao h3 {
        font-size: 1.2rem;
    }
    
    #detalhesProduto .info2 .opcoes .nome b {
        font-size: 0.9rem;
    }
    
    /* Redimensiona botões para melhor encaixe */
    .qtdeProdutoOpcao {
        min-width: 80px;
    }
    
    .qtdeProdutoOpcao button {
        min-width: 28px;
    }
    
    /* Simplifica bordas e margens para economizar espaço */
    #detalhesProduto .info2 .tipo .topo {
        border-radius: 5px;
    }
    
    /* Simplifica ainda mais a apresentação para evitar overflow */
    .containerFinalizar {
        padding: 5px 2px;
    }
    
    #detalhesProduto .info2 .opcoes {
        padding: 5px;
    }
    
    #detalhesProduto .info2 .opcoes .nome .preco {
        font-size: 0.75rem;
        line-height: 1.1;
    }
    
    /* Reduz tamanho dos botões para melhor encaixe */
    .qtdeProdutoOpcao {
        min-width: 75px;
    }
    
    .qtdeProdutoOpcao button {
        min-width: 25px;
        width: 25px;
    }
    
    .qtdeProdutoOpcao input {
        max-width: 25px;
    }
}

/* Ajustes extremos para telas muito estreitas */
@media only screen and (max-width: 320px) {
    body, html {
        font-size: 12px;
    }
    
    #detalhesProduto .info1 .descricao h3 {
        font-size: 1rem;
    }
    
    #detalhesProduto .info2 .tipo .topo h3 {
        font-size: 0.9rem;
    }
    
    #detalhesProduto .info2 .tipo .topo .detalhe {
        font-size: 0.7rem;
    }
    
    #detalhesProduto .info2 .opcoes .nome b {
        font-size: 0.8rem;
    }
    
    #detalhesProduto .info2 .opcoes .nome .preco {
        font-size: 0.7rem;
    }
    
    .qtdeProdutoOpcao {
        min-width: 70px;
    }
    
    .qtdeProdutoOpcao button {
        min-width: 22px;
        width: 22px;
    }
    
    .qtdeProdutoOpcao input {
        max-width: 22px;
    }
    
    a.voltar {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}