body {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    margin: 0;
    background-color: #f8f8f8;
    overflow-y: auto;
    /* Oculta a barra de rolagem vertical, mas mantém a rolagem funcional */
    scrollbar-width: none; /* Firefox */
}
html, body {
    scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

.container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 25px; /* Remove o arredondamento dos cantos do contêiner */
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0); /* Ajuste a opacidade conforme necessário */
    width: 90%;
    max-width: 600px;
    margin: 0 auto; /* Centraliza o container horizontalmente */
    text-align: center;
    margin-bottom: 40px;
    padding-top: 90px;
    margin-top: 0px;
    position: relative; /* Necessário para o pseudo-elemento */
}

.container::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 22px;
    right: 22px;
    bottom: 40px;
    margin: 0 auto; /* Centraliza o container horizontalmente */
    border: 1px solid rgb(220, 215, 215); /* Adiciona o contorno */
    border-radius: 25px; /* Define o arredondamento do contorno */
    pointer-events: none; /* Garante que o pseudo-elemento não interfira nas interações do contêiner */
}

.container-response-output {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 25px; /* Remove o arredondamento dos cantos do contêiner */
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0); /* Ajuste a opacidade conforme necessário */
    width: 90%;
    max-width: 600px;
    text-align: center;
    margin-bottom: -7px;
    margin: 0 auto; /* Centraliza o container horizontalmente */
    padding-top: 50px;
    margin-top: 7px; /*Parâmetro para aproximar os conteiners um do outro*/
    position: relative; /* Necessário para o pseudo-elemento */
}

.container-response-output::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 20px;
    right: 20px;
    margin: 0 auto; /* Centraliza o container horizontalmente */
    bottom: 40px;
    border: 0px solid rgb(220, 215, 215); /* Adiciona o contorno */
    border-radius: 25px; /* Define o arredondamento do contorno */
    pointer-events: none; /* Garante que o pseudo-elemento não interfira nas interações do contêiner */
}

.container-formulário {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
    width: 90%;
    max-width: 600px;
    text-align: center;
    margin-bottom: 40px;
    margin-top: -30px; /*Parâmetro para aproxima conteiners*/
    padding-top: 35px;
    padding-bottom: 35px;
}

h1 {
    font-size: 22px;
    font-weight: normal;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    text-align: center; /* Centraliza o texto horizontalmente */
    padding-bottom: 102px; /* Espaçamento inferior (pode ser ajustado conforme necessário) */
}


.stars {
    font-size: 23px;
    margin-bottom: 12px;
    text-align: center;
    padding-bottom: 9px;
    margin-top: -35px;
    gap: 0;
}

.stars .star {
    color: #fbbf1c;
    cursor: pointer;
    transition: color 0.3s ease;
}

.stars .star.checked {
    color: #fbbf1c;
}

#review-form {
    text-align: center;
    border-radius: 25px;
}

#review-form input[type="text"],
#review-form textarea,
#review-form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 17px;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    color: #000000;
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif; /* Adicionado */
    margin-bottom: -3px; 
}

#review-form textarea {
    resize: vertical;
    margin-bottom: -5px;
}

#review-form textarea::placeholder,
#review-form input[type="text"]::placeholder {
    color: #999;
    font-size: 15px;
    margin-bottom: 10px;
}

#review-form button {
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    padding: 9px 20px;
    background-color: #ffffff;
    border: 0.5px solid #1a6aff;
    color: #1a6aff;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

#review-form button:hover {
    background-color: #1a6aff;
    border-color: #1a6aff;
    color: #ffffff;

}

#review-form button:active {
    background-color: #1a6aff;
    border-color: #1a6aff;
    color: #ffffff;
}

.review-container {
    width: 90%;
    max-width: 600px;
    background-color: rgba(2, 2, 2, 0);
    padding: 20px;
    border-radius: 25px;
    margin: 10px auto;
    text-align: left;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review {
    background-color: #f8f8f8;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 30px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
    width: 91.5%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.circle-border {
    width: 44px;
    height: 44px;
    border-radius: 100%;
    position: absolute;
    top: 12px;
    left: 18px;
    z-index: 2;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background-color: transparent; /* Preenchimento transparente */
    border: 2px solid #f8f8f8;
    box-sizing: border-box; /* Para incluir a borda no cálculo do tamanho */
    box-shadow: 0 0 0 0.5px #f8f8f8; /* Ajuste o valor '-2px' para ocultar 2px do contorno */
}

.circle-border2 {
    width: 44px;
    height: 44px;
    border-radius: 100%;
    position: absolute;
    top: 12px;
    left: 18px;
    z-index: 2;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background-color: transparent; /* Preenchimento transparente */
    box-sizing: border-box; /* Para incluir a borda no cálculo do tamanho */
    box-shadow: 0 0 0 0.5px #f8f8f8 inset; /* Ajuste o valor '-2px' para ocultar 2px do contorno */
}




.circle {
    width: 44px;
    height: 44px;
    font-size: 16px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    top: 12px;
    left: 18px;
    background-size: cover;
    background-position: center;
    z-index: 1;
    
}






.review .stars {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: left;
    color: #fbbf1c;
    margin-top: 40px;
}

.review .stars .star {
    color: #fbbf1c;
}

.review p {
    margin: 10px 0;
}

.review .name-date {
    font-size: 15px;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-left: 50px;
    margin-top: -95px;
    margin-bottom: 20px;
}

.review .date {
    font-size: 12px;
    color: #333;
    opacity: 50%;
    margin-top: -20px;
    text-align: left;
    margin-left: 50px;
}

.review .comment {
    font-size: 15px;
    margin-left: 0px;
    text-align: left;
    position: relative;
    margin-top: 40px;
}

.verified-icon {
    width: 17px;
    height: 17px;
    opacity: 100%;
    border-radius: 50%;
    /*background-color: #e6e6fa;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 9px;
    margin-top: 4px; /* Adicione essa linha para mover o ícone para baixo */
    background-image: url('img/icon-verification-48.svg');
    background-size: cover;
}

/*

.verified-icon::after {
    content: '✔';
    font-size: 8px;
    color: #725bc2;
    
}
    
*/

.container-icons-mensagem {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 0vh; /* Altura do contêiner para centralização vertical */
    position: relative;
    margin-top: 7px; /* usar esse parámetro no conteiners para apaximar um do outro.*/
}

.container-icons-mensagem img {
    width: 210px; /* Defina a largura desejada */
    height: auto; /* A altura será ajustada automaticamente para manter a proporção */
    position: absolute;
    z-index: 1; /* Coloca a imagem acima do contêiner */
    margin-top: -83px; /* Ajuste conforme necessário para posicionar mais para cima */
    margin-bottom: -485px; /* Ajuste conforme necessário para posicionar mais para baixo */
}

@media (max-width: 768px) {
    .container-icons-mensagem {
        display: flex;
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        height: 0vh; /* Altura do contêiner para centralização vertical */
        position: relative;
        margin-top: 7px; /* usar esse parámetro no conteiners para apaximar um do outro.*/
    }

    .container-icons-mensagem img {
        width: 200px; /* Defina a largura desejada */
        height: auto; /* A altura será ajustada automaticamente para manter a proporção */
        position: absolute;
        z-index: 1; /* Coloca a imagem acima do contêiner */
        margin-top: -83px; /* Ajuste conforme necessário para posicionar mais para cima */
        margin-bottom: -495px; /* Ajuste conforme necessário para posicionar mais para baixo */
    }  
}

@media (max-width: 480px) {
    .container-icons-mensagem {
        display: flex;
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        height: 0vh; /* Altura do contêiner para centralização vertical */
        position: relative;
        margin-top: 7px; /* usar esse parámetro no conteiners para apaximar um do outro.*/
    }

    .container-icons-mensagem img {
        width: 200px; /* Defina a largura desejada */
        height: auto; /* A altura será ajustada automaticamente para manter a proporção */
        position: absolute;
        z-index: 1; /* Coloca a imagem acima do contêiner */
        margin-top: -83px; /* Ajuste conforme necessário para posicionar mais para cima */
        margin-bottom: -495px; /* Ajuste conforme necessário para posicionar mais para baixo */
    }  
}


h2 {
    font-size: 15px;
    font-weight: normal;
    padding-bottom: 10px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

/* 5.0 */

.estatisticas h3 {
    font-size: 1.0rem;
    font-weight: bold;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 30%; /* Ajuste conforme necessário */
    left: 88%; /* Centraliza horizontalmente em relação ao contêiner pai */
    transform: translateX(-50%); /* Ajusta para que o ponto de referência seja o centro do texto */
}

/* Ajustes específicos para diferentes tamanhos de tela */
@media (max-width: 768px) {
    .estatisticas h3 {
        top: 30%; /* Ajuste conforme necessário */
        left: 88%; /* Centraliza horizontalmente */
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .estatisticas h3 {
        top: 30%; /* Ajuste conforme necessário */
        left: 83%; /* Centraliza horizontalmente */
        transform: translateX(-50%);
    }
}

/* Estrelas do Resumo Reviews ★ ★ ★ ★ ★ */

.estatisticas .star-rating-container {
    position: absolute;
    top: 54%;
    left: 88%;
    transform: translateX(-50%);
}

/* Ajuste o tamanho das imagens das estrelas */
.estatisticas .star-rating-container img {
    width: 120px; /* Defina o tamanho desejado em pixels */
    height: auto; /* Mantém a proporção da imagem */
}


@media (max-width: 768px) {
    .estatisticas .star-rating-container {
        position: absolute;
        top: 54%;
        left: 88%;
        transform: translateX(-50%);
    }

    /* Ajuste o tamanho das imagens das estrelas */
    .estatisticas .star-rating-container img {
        width: 120px; /* Defina o tamanho desejado em pixels */
        height: auto; /* Mantém a proporção da imagem */
    }
}

@media (max-width: 480px) {
    .estatisticas .star-rating-container {
        position: absolute;
        top: 54%;
        left: 83%;
        transform: translateX(-50%);
    }

    /* Ajuste o tamanho das imagens das estrelas */
    .estatisticas .star-rating-container img {
        width: 115px; /* Defina o tamanho desejado em pixels */
        height: auto; /* Mantém a proporção da imagem */
    }
}

/* Número total de reviews */

.estatisticas .numero-total-de-reviews {
    position: absolute;
    font-size: 0.8rem;
    font-weight: normal;
    color: #424242;
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    text-align: center;
    top: 63%; /* Ajuste conforme necessário */
    left: 88%; /* Centraliza horizontalmente em relação ao contêiner pai */
    transform: translateX(-50%); /* Ajusta para que o ponto de referência seja o centro do texto */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
}

@media (max-width: 768px) {
    .estatisticas .numero-total-de-reviews {
        position: absolute;
        font-size: 0.8rem;
        font-weight: normal;
        color: #424242;
        font-family: 'Open Sans', sans-serif;
        position: absolute;
        text-align: center;
        top: 63%; /* Ajuste conforme necessário */
        left: 88%; /* Centraliza horizontalmente em relação ao contêiner pai */
        transform: translateX(-50%); /* Ajusta para que o ponto de referência seja o centro do texto */
        white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    }
}

@media (max-width: 480px) {
    .estatisticas .numero-total-de-reviews {
        position: absolute;
        font-size: 0.9rem;
        font-weight: normal;
        color: #424242;
        font-family: 'Open Sans', sans-serif;
        position: absolute;
        text-align: center;
        top: 61%; /* Ajuste conforme necessário */
        left: 83%; /* Centraliza horizontalmente em relação ao contêiner pai */
        transform: translateX(-50%); /* Ajusta para que o ponto de referência seja o centro do texto */
        white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    }
}

/* Conteiner das estatísticas */

.estatisticas {
    position: relative;
    background-color: #ffffff;
    padding: 20px;
    padding-bottom: 30px; /* Aumentando a altura da parte inferior */
    border-radius: 25px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
    width: 90%; /* Largura do conteiner */
    max-width: 600px;
    text-align: center;
    margin-bottom: 5px;
    margin-top: -30px; /* usar esse parámetro no conteiners para apaximar um do outro.*/ 
}


/* Barras da estatística */

.barra-avaliacao {
    width: 75%;
    background-color: #e0e0e0;
    margin: 10px 0;
    border-radius: 5px;
    margin-left: 18px;
}

@media (max-width: 768px) {
    .barra-avaliacao {
        width: 74%;
        background-color: #e0e0e0;
        margin: 10px 0;
        border-radius: 5px;
        margin-left: 18px;
    }
}

@media (max-width: 480px) {
    .barra-avaliacao {
        width: 63%;
        background-color: #e0e0e0;
        margin: 10px 0;
        border-radius: 5px;
        margin-left: 18px;
    }
}

/* Número 5 da barra de avaliacão 1 */

.estatisticas .numero-barra-5 {
    position: absolute; /* Permite posicionar o elemento */
    top: 57px; /* Move o elemento para cima */
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    
    padding-bottom: 0px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

/* Número 4 da barra de avaliacão 1 */

.estatisticas .numero-barra-4 {
    position: absolute; /* Permite posicionar o elemento */
    top: 72px; /* Move o elemento para cima */
    font-size: 12px;
    font-weight: normal;
    text-align: left;
   
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

/* Número 3 da barra de avaliacão 1 */

.estatisticas .numero-barra-3 {
    position: absolute; /* Permite posicionar o elemento */
    top: 87px; /* Move o elemento para cima */
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

/* Número 2 da barra de avaliacão 1 */

.estatisticas .numero-barra-2 {
    position: absolute; /* Permite posicionar o elemento */
    top: 102px; /* Move o elemento para cima */
    font-size: 12px;
    font-weight: normal;
    text-align: left;
   
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

/* Número 1 da barra de avaliacão 1 */

.estatisticas .numero-barra-1 {
    position: absolute; /* Permite posicionar o elemento */
    top: 117px; /* Move o elemento para cima */
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
}

/* Barras de avalicão que são preenchidas em porcentagem para representar visualmente um resumo da estatística */

.barra-avaliacao div {
    height: 5px; /* Altura mais fina */
    border-radius: 5px;
    transition: width 0.5s;
    margin-bottom: 10px; /* Espaçamento entre as barras */
}

.cinco-estrelas { background-color: #fbbf1c; width: 0%; } /* Amarelo e ajuste da largura */
.quatro-estrelas { background-color: #fbbf1c; width: 0%; } /* Amarelo e ajuste da largura */
.tres-estrelas { background-color: #fbbf1c; width: 0%; } /* Amarelo e ajuste da largura */
.duas-estrelas { background-color: #fbbf1c; width: 0%; } /* Amarelo e ajuste da largura */
.uma-estrela { background-color: #fbbf1c; width: 0%; } /* Amarelo e ajuste da largura */



/* Estilos para a div contêiner do botão */
.login-container {
    position: relative; /* Permite posicionamento absoluto dentro do contêiner */
    width: 100%; /* Ocupa toda a largura disponível */
    height: 0.1vh; /* Ocupa a altura total da viewport */
    z-index: 9999; /* Coloca o ícone na frente de todos os outros elementos */
    opacity: 0%;
}

/* Estilos para o botão de review */
.login-button {        
    background: none; /* Remove o fundo padrão do botão */
    border: none; /* Remove a borda padrão do botão */
    padding: 0; /* Remove o padding padrão do botão */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    position: absolute; /* Permite o ajuste preciso da posição */
    top: -65px; /* Move o botão mais para cima */
    right: 2.8%; /* Ajusta a posição horizontal padrão */
    z-index: 10; /* Garante que o botão esteja por cima de outros elementos */
}



/* Media query para telas maiores (por exemplo, desktop) */
@media (min-width: 901px) {
    .login-button {
        top: -65px; /* Ajuste conforme necessário para manter a posição */
        right: 2.8%; /* Mantém a posição horizontal */
    }
}

/* Media query para orientação horizontal */
@media (orientation: landscape) {
    .login-button {
        top: -65px; /* Ajuste conforme necessário para manter a posição */
        right: 2.8%; /* Mantém a posição horizontal */
    }
}

/* Media query para celular na orientação vertical */
@media (max-width: 900px) and (orientation: portrait) {
    .login-button {
        top: -65px; /* Ajuste conforme necessário para manter a posição */
        right: 3.4%; /* Move o botão um pouco mais para a direita */
    }
}


/* Estilos para a div contêiner do botão */
.logo-container {
    position: relative; /* Permite posicionamento absoluto dentro do contêiner */
    width: 100%; /* Ocupa toda a largura disponível */
    height: 0.1vh; /* Ocupa a altura total da viewport */
    
}

/* Estilos para o botão de review */
.logo-button {        
    background: none; /* Remove o fundo padrão do botão */
    border: none; /* Remove a borda padrão do botão */
    padding: 0; /* Remove o padding padrão do botão */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    position: absolute; /* Permite o ajuste preciso da posição */
    top: -198px; /* Move o botão mais para cima */
    right: 4%; /* Ajusta a posição horizontal padrão */
    z-index: 10; /* Garante que o botão esteja por cima de outros elementos */
    cursor: default; /* Define o cursor padrão */
}

/* Estilos para a imagem dentro do botão de review */
.logo-button img {
    width: 25px; /* Largura da imagem */
    height: auto; /* Mantém a proporção da imagem */
}

/* Media query para telas maiores (por exemplo, desktop) */
@media (min-width: 901px) {
    .logo-button {
        top: -198px; /* Ajuste conforme necessário para manter a posição */
        right: 4%; /* Mantém a posição horizontal */
    }
}

/* Media query para orientação horizontal */
@media (orientation: landscape) {
    .logo-button {
        top: -198px; /* Ajuste conforme necessário para manter a posição */
        right: 4%; /* Mantém a posição horizontal */
    }
}

/* Media query para celular na orientação vertical */
@media (max-width: 900px) and (orientation: portrait) {
    .logo-button {
        top: -198px; /* Ajuste conforme necessário para manter a posição */
        right: 5%; /* Move o botão um pouco mais para a direita */
    }
}



/* Estilos para a div contêiner do botão */
.button-container {
    position: relative; /* Permite posicionamento absoluto dentro do contêiner */
    width: 100%; /* Ocupa toda a largura disponível */
    height: 0.1vh; /* Ocupa a altura total da viewport */
}


/* Estilos para o botão de review */
.review-button {        
    background: none; /* Remove o fundo padrão do botão */
    border: none; /* Remove a borda padrão do botão */
    padding: 0; /* Remove o padding padrão do botão */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    position: absolute; /* Permite o ajuste preciso da posição */
    top: -57px; /* Move o botão para cima (exemplo: 70 pixels acima do topo) */
    right: 3%; /* Mais para a direita para alinhar com o ícone do Google */
    z-index: 9999 !important;
    opacity: 0.5; /* Opacidade do botão */
}

/* Estilos para a imagem dentro do botão de review */
.review-button img {
    width: 38px; /* Aumentado de 27px */
    height: auto;
}
 
/* Media query para telas maiores (por exemplo, desktop) */
@media (min-width: 901px) {
    .review-button {
        top: -57px; /* Ajuste conforme necessário para manter a posição */
        right: 3%; /* Mantém a posição horizontal */
    }
}

/* Media query para orientação horizontal */
@media (orientation: landscape) {
    .review-button {
        top: -57px; /* Ajuste conforme necessário para manter a posição */
        right: 3%; /* Mantém a posição horizontal */
    }
}

/* Media query para celular na orientação vertical */
@media (max-width: 900px) and (orientation: portrait) {
    .review-button {
        right: 3%; /* Move o botão um pouco mais para a direita */

    }
}

/* Estilos para a div contêiner do formulário de review */
.container-formulario {
    display: none; /* Oculta por padrão */
    background-color: #ffffff; /* Cor de fundo */
    padding: 20px; /* Espaçamento interno */
    border-radius: 25px; /* Borda arredondada */
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.0); /* Sombra */
    width: 90%; /* Largura */
    max-width: 600px; /* Largura máxima */
    text-align: center; /* Alinhamento de texto */
    margin-bottom: 0px; /* Margem inferior */
    padding-top: 40px; /* Espaçamento superior */
    padding-bottom: 45px; /* Espaçamento inferior */
    margin-top: -23px; /* Margem superior */
}

.stars .star {
    cursor: pointer;
}

.stars .star.checked {
    color: #fbbf1c;
}

.stars .star.checked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--star-fill, 100%);
    overflow: hidden;
    color: black;
}

/* Garante que qualquer iframe fique acima do botão de avaliação */
iframe {
    position: relative;
    z-index: 100;
}

/* Opcional: se o botão de avaliação estiver dentro de um container com z-index alto, reduza o z-index do botão */
.review-button {
    z-index: 10;
}