/*
Plugin Name: Nome do Plugin (Placeholder)
Description: Estilos para Containers Responsivos
Version: 5.1.0
*/

/*
Este arquivo contém estilos estruturais gerais para o site,
incluindo a classe padrão para modais.
*/

/* --- RESET GLOBAL E BOX-SIZING --- */
/* Aplica box-sizing em todos os elementos para que width: 100% + padding não cause estouro */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Estilos base para o corpo do documento */
html, body {
    /* CORREÇÃO: Remove margens e padding padrão do navegador */
    margin: 0; 
    padding: 0; 
    
    font-family: Arial, sans-serif; /* Define a fonte principal */
    color: #272626; /* Cor de texto base */
    overflow-x: hidden; /* Mantém para prevenir rolagem horizontal indesejada */
    width: 100%;
    background-color: #f5f5f5; /* Fundo suave para testar aplicação de CSS */
}

/* Esconde o conteúdo principal por padrão para prevenir FOUC */
#main-content-wrapper {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Mostra o conteúdo principal quando o JavaScript é carregado e adiciona a classe 'js-loaded' ao body */
body.js-loaded #main-content-wrapper {
    opacity: 1;
}

/* Container principal (Desktop - MANTIDO INALTERADO) */

.container-geral-1,
.container-geral-2,
.container-geral-3,
.container-geral-4 {
    padding: 30px;
    margin: 5px auto;
    border-radius: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.container-geral-1 {
    max-width: 900px; /* Largura máxima do contêiner */
    border: 0px solid #ddd;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para o container geral */
}

.container-geral-2 {
    max-width: 1300px; /* Largura máxima do contêiner */
}

.container-geral-3 {
    max-width: 400px; /* Largura máxima do contêiner */
    border: 0px solid #ddd;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.container-geral-4 {
    max-width: 1300px; /* Largura máxima do contêiner */
    border: 0px solid #ddd;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para o container geral */
}

.container-divisoes {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: hidden; 
}

.container-divisoes-2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

/* Textos (MANTIDOS INALTERADOS) */

.titulo-categoria,
.titulo-geral-1,
.titulo-geral-2,
.subtitulo-geral,
.texto-geral
.texto-geral-bold
.texto-geral-2 {
	font-family: Arial, sans-serif;
    color: inherit; /* Herdar a cor do texto */
    text-decoration: none; /* Remover sublinhado */
    cursor: text; /* Cursor de texto, como em um parágrafo comum */
}

.titulo-geral-1 {
    font-size: 22px;
    font-weight: bold;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.titulo-geral-2 {
    font-size: 20px;
    font-weight: bold;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.titulo-geral-3 {
    font-size: 18px;
    text-align: center;
    justify-content: center;
    color: #272626;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 20px;
}

.subtitulo-geral {
    text-align: justify;
    font-size: 17px;
    color: #272626;
    margin-bottom: 10px;
}

.texto-geral {
    font-size: 16px;
    color: #272626;
}

.texto-geral-bold {
    font-size: 16px;
    color: #272626;
	font-weight: bold;
}

.texto-geral-2 {
    font-size: 16px;
    text-align: center;
    justify-content: center;
    color: #272626;
}

.texto-geral-3 {
    font-size: 20px;
    text-align: center;
    justify-content: center;
    color: #475569;
}

.texto-geral-3-bold {
    font-size: 20px;
	font-weight: bold;
    text-align: center;
    justify-content: center;
    color: #475569;
}

.descricao-geral {
	font-family: Arial, sans-serif;
    font-size: 14px;
    color: #272626;
}

.descricao-geral-bold {
	font-family: Arial, sans-serif;
    font-size: 14px;
    color: #272626;
	font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.microdescricao-geral {
	font-family: Arial, sans-serif;
    font-size: 12px;
    color: #272626;
}

.microdescricao-geral-bold {
	font-family: Arial, sans-serif;
    font-size: 12px;
    color: #272626;
	font-weight: bold;
}

.destaque-geral {
    background-color: #f1f1f1;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}


.preco-geral {
	font-family: Arial, sans-serif;
    font-size: 18px;
    color: #ff3131;
    font-weight: bold;
}


.texto-info-1 {
	font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}


/* B O T Õ E S (MANTIDOS INALTERADOS) */

.botao-geral-1,
.botao-geral-2,
.botao-geral-3,
.botao-geral-4,
.botao-geral-5,
.botao-complemento,
.botao-editar,
.botao-adicionar-mais {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 12px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-items: center;
    justify-content: center;
	text-align: center;
	text-decoration: none;
}


.botao-geral-1 {
    color: #FFFFFF;
    background-color: #6B26CB;
    border: none;
    display: flex;
    border: 2px solid #6B26CB;
}

.botao-geral-1:hover {
    background-color: #8B47D9;
}


.botao-geral-2 {
    color: #6B26CB;
    background-color: #FFFFFF;
    border: 2px solid #6B26CB;
	text-align: center;
	display: flex;
}

.botao-geral-2:hover {
    background-color: #F0E6FF;
}



.botao-geral-3 {
    color: #272626;
    background-color: #D9D9D9;
    border: 2px solid #D9D9D9;
    text-align: center;
}

.botao-geral-3:hover {
    background-color: #E2E2E2;
}



.botao-geral-4 {
    color: #272626;
    background-color: #FFFFFF;
    border: 2px solid #D9D9D9;
    text-align: center;
}

.botao-geral-4:hover {
    background-color: #F7F7F7;
}


.botao-geral-5 {
    color: #6B26CB;
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
	text-align: center;
	display: flex;
}

/* Estilo para Botão Desabilitado */
.botao-desabilitado {
    /* Cor de fundo cinza claro para indicar que está OFF (Solicitação do usuário) */
    background-color: #e0e0e0 !important; 
    border: 2px solid #D9D9D9;
    color: #888888 !important; /* Cor do texto cinza escuro */
    cursor: not-allowed !important; /* Indica que o clique não é permitido */
    opacity: 0.8; 
}



/* DIVISÕES (MANTIDAS INALTERADAS) */

.divisao-geral-0 {
    width: auto;
}

.divisao-geral-1 {
    width: 67%;
    max-width: 67%;
}

.divisao-geral-2 {
    width: 33%;
    max-width: 33%;
}

.divisao-geral-3 {
    width: 100%;
    max-width: 100%;
}

.divisao-geral-4 {
    width: 85%;
}

.divisao-geral-5 {
    width: 15%;
}

.divisao-geral-6 {
    width: 50%;
}

.divisao-geral-7 {
    width: 25%;
}

.divisao-geral-8 {
    width: 75%;
}

.divisao-geral-9 {
    width: 20%;
    max-width: 20%;
}


/* OUTROS (MANTIDOS INALTERADOS) */



.texto-truncado-css,
.formatacao-truncado {
    /* Garante que o texto não quebre linha */
    white-space: nowrap;

    /* Esconde qualquer texto que ultrapasse o limite do container */
    overflow: hidden;

    /* Adiciona as reticências ("...") ao final do texto cortado */
    text-overflow: ellipsis;

    /* O elemento deve ser um bloco para que a largura funcione, mas inline-block
       permite que ele se ajuste ao conteúdo dentro de um container */
    display: inline-block;}


/* --- ESTILOS MOBILE (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    /* REGRAS DE RESPONSIVIDADE PARA CONTAINERS GERAIS */
    .container-geral-1,
    .container-geral-2,
    .container-geral-3,
    .container-geral-4 {
        /* Centralização e eliminação de margens superiores/laterais indesejadas */
        margin: 0 auto;
        border-radius: 0px;
        /* Garante que a largura seja 100% (o box-sizing global impede o estouro) */
        max-width: 100%;
        width: 100%;
        /* CORREÇÃO: Reduz o padding para algo seguro e consistente (15px laterais) */
        padding: 15px 15px; 
        
        /* A propriedade box-sizing já é aplicada globalmente */
        /* flex-direction: column (Comentado/Removido conforme instrução) */
    }

    /* Regra para outros containers gerais (container-geral, container-superior)
       CORREÇÃO: Unifica com a regra acima e remove o padding: 30px que estava causando estouro */
    .container-geral-1,
    .container-geral,
    .container-superior {
		width: 100%;
        /* CORREÇÃO: Usa o padding responsivo para evitar estouro */
        padding: 15px 15px;
        margin: 0 auto;
        border-radius: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }


    /* REGRAS ESPECÍFICAS: container-divisoes-2 (Deve ser em coluna no mobile) */
    .container-divisoes-2 {
        /* Sobrescreve flex-direction: row do desktop para forçar coluna no mobile */
        flex-direction: column;
        display: flex;
        justify-content: center;
        /* Garante zero margem/padding ao redor do container-divisoes-2 */
        width: 100%;
        max-width: 100%;
        margin: 0; 
        padding: 0; 
        gap: 10px;
    }
    
    /* Garante que os itens internos de .container-divisoes-2 usem a largura total disponível */
    .container-divisoes-2 > * {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* container-divisoes (MANTIDO) */
    /* Nenhuma alteração em container-divisoes, conforme solicitado. */

    /* container-divisoes-3 (Vertical no Mobile) */
    .container-divisoes-3 {
        flex-direction: column; /* Padrão Mobile: Vertical */
    }
	
    /* AJUSTES DE FONTES (MANTIDOS INALTERADOS) */

    .titulo-categoria {
        font-size: 22px; 		/* Ajuste do tamanho da fonte */
    }

    .titulo-geral-1 {
        font-size: 20px; 		/* Ajuste do tamanho da fonte */
    }
    
    .titulo-geral-2 {
        font-size: 18px; 		/* Ajuste do tamanho da fonte */
    }
    
    .titulo-geral-3 {
        font-size: 16px; 		/* Ajuste do tamanho da fonte */
    }

    .subtitulo-geral {
        font-size: 15px; 		/* Ajuste do tamanho da fonte */
    }

    .texto-geral {
        font-size: 14px;
    }
    
    .texto-geral-3,
    .texto-geral-3-bold {
        font-size: 18px; 		/* Ajuste do tamanho da fonte */
    }

    .pagination .page-number {
        padding: 8px 10px; 		/* Ajuste do tamanho do botão de paginação */
        font-size: 14px; 		/* Ajuste da fonte para paginação */
    }
}