/* PLANOS */
.container_planos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.card_plano {
    background-color: #ffffff;
    border-radius: 18px;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0.8rem;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    border: 1px solid #DCE3DF;
}

.tag_plano_destaque {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #F36C52;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.conteudo_plano {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.nome_plano {
    font-size: 16px;
    font-weight: 600;
    color: #212224;
    line-height: 1.2;
}

.descricao_plano {
    font-size: 13px;
    color: #4F5F56;
    line-height: 1.5;
    margin: 0;
}

.moeda {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.valor {
    font-size: 40px;
    font-weight: 700;
    line-height: 0.9;
    color: #039753;
}

.periodo {
    font-size: 13px;
    color: #4F5F56;
    margin-bottom: 0.25rem;
}

.lista_beneficios {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.lista_beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 13px;
    color: #212224;
    line-height: 1.4;
}

.lista_beneficios i {
    color: #039753;
    font-size: 12px;
    margin-top: 0.15rem;
}

.btn_contratar_plano {
    width: 100%;
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    margin-top: auto;
    box-shadow: rgba(50, 50, 93, 0.12) 0px 2px 6px -1px, rgba(0, 0, 0, 0.08) 0px 1px 3px -1px;
}

.container_planos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.card_plano_destaque {
    border: 2px solid #039753;
}

.tag_plano_destaque {
    position: absolute;
    top: -13.79px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #039753;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.conteudo_plano {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.nome_plano {
    font-size: 16px;
    font-weight: 600;
    color: #212224;
    line-height: 1.2;
}

.descricao_plano {
    font-size: 14px;
    color: #4F5F56;
    line-height: 1.5;
    margin: 0;
}

.preco_plano {
    display: flex;
    align-items: flex-end;
    gap: 0px;
    margin: 0.3rem 0;
    color: #212224;
}

.moeda {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.valor {
    font-size: 46px;
    font-weight: 700;
    line-height: 0.9;
    color: #039753;
}

.periodo {
    font-size: 14px;
    color: #4F5F56;
    margin-bottom: 0.25rem;
}

.lista_beneficios {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.lista_beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 14px;
    color: #212224;
    line-height: 1.4;
}

.lista_beneficios i {
    color: #039753;
    font-size: 14px;
    margin-top: 0.15rem;
}
/* PLANOS */

/* FINANCEIRO */
.container_financeiro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.card_financeiro {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 0.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.topo_financeiro_card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.titulo_financeiro {
    font-size: 16px;
    font-weight: 500;
    color: #212224;
}

.descricao_financeiro {
    font-size: 14px;
    color: #4F5F56;
    line-height: 1.4;
}

.card_fatura_pendente {
    background-color: #ffffff;
    border: 1px solid #EEF2EF;
    border-radius: 16px;
    padding: 0.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.info_fatura {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.nome_fatura {
    font-size: 14px;
    font-weight: 500;
    color: #212224;
    line-height: 1.35;
}

.data_fatura {
    font-size: 14px;
    color: #4F5F56;
    line-height: 1.35;
}

.linha_pagamento_fatura {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.valor_fatura {
    color: #039753;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.btn_pagar_fatura {
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
}

.card_faturas_pagas {
    background-color: #F8FAF9;
    border: 1px solid #EEF2EF;
    border-radius: 16px;
    overflow: hidden;
}

.item_fatura_paga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border-bottom: 1px solid #E5ECE8;
}

.item_fatura_paga:last-child {
    border-bottom: none;
}

.valor_fatura_pago {
    color: #039753;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.status_fatura {
    width: fit-content;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 11px;
    font-weight: 500;
    margin-top: 0.2rem;
}

.status_fatura.pago {
    background-color: #039753;
    color: #ffffff;
}

.container_fatura_pendente{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
/* FINANCEIRO */


/* PERFIL */
.perfil_container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.perfil_card_usuario {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 0.6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.linha_nome_foto_perfil {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.perfil_foto_area {
    position: relative;
}

.perfil_foto_area img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #80808060;
}

.icone_camera {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background-color: #039753;
    color: #ffffff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #ffffff;
}

.foto_input {
    display: none;
}

.perfil_dados_usuario {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
}

.perfil_dados_usuario h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #212224;
}

.perfil_dados_usuario span {
    font-size: 14px;
    color: #4F5F56;
}

.btn_send_message {
    width: 100%;
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.secao_perfil_melhorada {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.container_receitas_perfil {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
}

.container_receitas_perfil::-webkit-scrollbar {
    display: none;
}

.div_inputs_perfil {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.div_dois_perfil_vertical {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.div_dois_perfil_vertical span {
    font-size: 14px;
    color: #212224;
    font-weight: 400;
}

.div_dois_perfil_vertical input {
    width: 100%;
    border: 1px solid #DCE3DF;
    border-radius: 10px;
    padding: 0.6rem;
    box-sizing: border-box;
    outline: none;
    font-size: 14px;
    color: #212224;
    background-color: #ffffff;
}

.div_dois_perfil_vertical input:focus {
    border-color: #039753;
}

.acoes_perfil_melhorada {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.btn_padrao {
    width: 100%;
    border: none;
    padding: 0.6rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.btn_salvar {
    background-color: #039753;
    color: #ffffff;
}

.btn_logout {
    background-color: #212224;
    color: #ffffff;
}

.btn_excluir {
    background-color: #E53935;
    color: #ffffff;
}

.modo_visitando .area_edicao,
.modo_visitando .area_acoes,
.modo_visitando .icone_camera {
    display: none;
}

.modo_proprio .btn_send_message {
    display: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 20;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal.hide {
    opacity: 0;
}

.modal-content {
    width: 90%;
    max-width: 330px;
    border-radius: 12px;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
    animation: fadeInScale 0.3s ease forwards;
    transform: scale(0.9);
}

.modal-padrao {
    background-color: #ffffff;
    color: #4F5F56;
    border: none;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
}

.modal-padrao h2 {
    color: #039753;
    font-size: 20px;
    margin-bottom: 0.6rem;
    font-weight: 500;
}

.modal-padrao p {
    color: #4F5F56;
    font-size: 13px;
    line-height: 1.6;
}

.botoes_modal_duplo {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 0.6rem;
}

.btn_modal {
    width: 100%;
    margin-top: 1rem;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: 0.2s ease;
}

.botoes_modal_duplo .btn_modal {
    margin-top: 0;
}

.btn_modal_termos {
    background-color: #039753;
    color: #ffffff;
}

.btn_modal_cancelar {
    background-color: #212224;
    color: #ffffff;
}

.btn_modal_excluir {
    background-color: #E53935;
    color: #ffffff;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.87);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* PERFIL */


/* ALERTAS */
.container_alertas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.data_alerta {
    align-items: end;
    justify-content: end;
    display: flex;
    margin-top: 0.5rem;
}

.card_alerta {
    background: #ffffff;
    color: #000000;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    border: 1px solid #DCE3DF;
}

.card_alerta>span {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}
/* ALERTAS */


/* CHATS */
.container_chats_pagina {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.topo_chats {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.container_lista_chats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card_chat {
    padding: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    transition: 0.25s ease;
    background: #ffffff;
    color: #000000;
    border-radius: 12px;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    border: 1px solid #DCE3DF;
}

.foto_chat_box {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    position: relative;
}

.foto_chat_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #0000003d;
}

.status_online {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #41B45D;
    border: 2px solid #ffffff;
    position: absolute;
    right: -2px;
    bottom: -5px;
}

.card_chat.visto {
    opacity: 0.7;
}

.conteudo_chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.topo_card_chat {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.nome_chat {
    font-size: 14px;
    font-weight: 600;
    color: #3C3C3C;
}

.data_chat {
    font-size: 11px;
    color: #6F7872;
    white-space: nowrap;
    margin-top: 2px;
}

.mensagem_chat {
    font-size: 14px;
    line-height: 1.5;
    color: #4F5F56;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* CHATS */


/* CHAT */
.barra_conversa {
    background-color: #ffffff;
    padding: 0.7rem 1rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-top: 1px solid #eef2ef;
    border-bottom: 1px solid #dce3df;
    box-shadow: rgba(50, 50, 93, 0.06) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.04) 0px 1px 3px -1px;
    min-height: 72px;
}

.btn_voltar_conversa {
    background-color: #039753;
    color: #ffffff;
    border: none;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.foto_usuario_conversa {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #dce3df;
}

.foto_usuario_conversa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info_usuario_conversa {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.label_conversa {
    font-size: 12px;
    color: #4F5F56;
    line-height: 1;
}

.nome_usuario_conversa {
    font-size: 14px;
    font-weight: 600;
    color: #212224;
    line-height: 1.2;
}

.dia_conversa {
    text-align: center;
    font-size: 14px;
    justify-self: center;
    width: 100%;
}

.container_solicitante,
.container_prestador {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.container_solicitante {
    align-self: flex-end;
}

.container_prestador {
    align-self: flex-start;
}

.mensagem_solicitante {
    background-color: #ffffff;
    color: #212224;
    padding: 0.65rem 0.8rem;
    border-radius: 14px 14px 4px 14px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    border: 1px solid #DCE3DF;
}

.mensagem_prestador {
    background-color: #039753;
    color: #ffffff;
    padding: 0.65rem 0.8rem;
    border-radius: 14px 14px 14px 4px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    border: 1px solid #DCE3DF;
}

.conteudo_texto {
    font-size: 14px;
    line-height: 1.45;
}

.horario_solicitante,
.horario_prestador {
    font-size: 12px;
    margin-top: 0.25rem;
    color: #4F5F56;
}

.horario_solicitante {
    align-self: flex-end;
}

.horario_prestador {
    align-self: flex-start;
}

footer {
    background-color: #ffffff;
    width: 100%;
    padding: 0.4rem 1rem;
    padding-bottom: calc(0.4rem);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 57.17px;
    border-top: 1px solid #80808021;
    gap: 0.5rem;
}

.input_enviar_mensagem {
    width: 100%;
    border: 1px solid #DCE3DF;
    border-radius: 8px;
    padding: 0.5rem;
    height: 35px;
    box-sizing: border-box;
    color: #212224;
}

.input_enviar_mensagem:focus {
    outline: none;
    border-color: #039753;
}

.btn_enviar {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background-color: #039753;
    color: #ffffff;
    height: 35px;
    box-sizing: border-box;
    cursor: pointer;
    border: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* CHAT */


/* RECEITAS DETALHES */
.modal_avaliacao_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}

.modal_avaliacao_overlay.ativo {
    display: flex;
}

.modal_avaliacao {
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 1.2rem;
    box-sizing: border-box;
    position: relative;
    animation: subirModal 0.25s ease;
}

@keyframes subirModal {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal_avaliacao_header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.modal_avaliacao_header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #212224;
}

.modal_avaliacao_header span {
    font-size: 14px;
    color: #4F5F56;
}

.campo_modal {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.campo_modal label {
    font-size: 14px;
    color: #212224;
    font-weight: 500;
}

.campo_modal input,
.campo_modal textarea {
    width: 100%;
    border: 1px solid #DCE3DF;
    border-radius: 10px;
    padding: 0.75rem;
    box-sizing: border-box;
    font-size: 14px;
    color: #212224;
    outline: none;
}

.campo_modal input:focus,
.campo_modal textarea:focus {
    border-color: #039753;
}

.campo_modal textarea {
    min-height: 100px;
    resize: none;
}

.container_estrelas_avaliacao {
    display: flex;
    gap: 0.4rem;
}

.estrela_avaliacao {
    font-size: 26px;
    color: #d4d4d4;
    cursor: pointer;
    transition: 0.2s;
}

.estrela_avaliacao.ativo {
    color: #FFC107;
}

.erro_avaliacao {
    display: none;
    color: red;
    font-size: 12px;
    margin-top: 0.2rem;
}

.btn_salvar_avaliacao {
    width: 100%;
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.detalhes_receita {
    gap: 1rem;
}

.topo_detalhes_receita {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.container_receita_detalhes {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 0.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.card_imagem_receita {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: rgba(50, 50, 93, 0.10) 0px 2px 8px -1px,
        rgba(0, 0, 0, 0.08) 0px 1px 4px -1px;
}

.img_principal_detalhes {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.avaliacoes_detalhes {
    font-size: 14px;
    color: #4F5F56;
}

.owner_receita {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 0.8rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    flex-wrap: wrap;
}

.btn_ver_perfil_owner {
    border: 1px solid #80808038;
    background-color: #F8FAF9;
    color: #212224;
    padding: 0.4rem 0.5rem;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    width: 100%;
}

.owner_receita img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #DCE3DF;
}

.owner_receita div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.label_owner {
    font-size: 12px;
    color: #7A837D;
}

.nome_owner {
    font-size: 14px;
    font-weight: 600;
    color: #212224;
}

.lista_ingredientes_detalhes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lista_ingredientes_detalhes span {
    background-color: #F4F8F5;
    border: 1px solid #DCE3DF;
    color: #4F5F56;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font-size: 13px;
    font-weight: 500;
}

.video_recipe {
    width: 100%;
    border-radius: 10px;
}

.lista_instrucoes_receita {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    counter-reset: step;
}

.lista_instrucoes_receita li {
    list-style: none;
    color: #4F5F56;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    gap: 0.6rem;
}

.lista_instrucoes_receita li::before {
    counter-increment: step;
    content: counter(step);
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #039753;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container_avaliacoes_realizadas {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.div_avaliacoes_realizadas {
    background-color: #F8FAF9;
    border: 1px solid #EEF2EF;
    border-radius: 12px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.div_nome_avaliacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nome_avaliacao {
    font-size: 14px;
    font-weight: 600;
    color: #212224;
}

.nota_avaliacao {
    font-size: 13px;
    color: #4F5F56;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.comentario_avaliacao {
    font-size: 13px;
    color: #4F5F56;
    line-height: 1.5;
}

.data_avalicao {
    font-size: 12px;
    color: #7A837D;
    align-self: flex-end;
}
/* RECEITAS DETALHES */


/* RECEITAS */
.btn_tirar_ingredientes {
    width: 100%;
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.btn_limpar_ingredientes,
.btn_aplicar_ingredientes {
    width: 100%;
    border: none;
    padding: 0.6rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.btn_limpar_ingredientes {
    background-color: #212224;
    color: #ffffff;
}

.btn_aplicar_ingredientes {
    background-color: #039753;
    color: #ffffff;
}

.icone_adicionar_receita {
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    bottom: 64px;
    right: 16px;
}

.modal_ingredientes_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}

.modal_ingredientes_overlay.ativo {
    display: flex;
}

.modal_ingredientes {
    width: 100%;
    max-height: 85vh;
    overflow: auto;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 1.2rem;
    box-sizing: border-box;
    position: relative;
    animation: subirModal 0.25s ease;
    scrollbar-width: none;
}

.modal_ingredientes_header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.modal_ingredientes_header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #212224;
}

.modal_ingredientes_header span {
    font-size: 14px;
    color: #4F5F56;
}

.modal_ingredientes_botoes {
    display: flex;
    gap: 0.7rem;
    margin-top: 1rem;
}

@keyframes subirModal {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.campo_busca_ingredientes {
    width: 100%;
    border: 1px solid #DCE3DF;
    border-radius: 12px;
    padding: 0.65rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    background-color: #ffffff;
}

.campo_busca_ingredientes i {
    color: #4F5F56;
    font-size: 14px;
}

.campo_busca_ingredientes input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: #212224;
    background: transparent;
}

.lista_ingredientes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 300px;
    overflow: auto;
    scrollbar-width: none;
}

.chip_ingrediente_remover {
    border: 1px solid #DCE3DF;
    background-color: #F8FAF9;
    color: #4F5F56;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: 0.2s ease;
}

.chip_ingrediente_remover.ativo {
    background-color: #039753;
    color: #ffffff;
    border-color: #039753;
}

.chip_ingrediente_remover.oculto {
    display: none;
}

.sem_resultado_ingredientes {
    display: none;
    font-size: 13px;
    color: #4F5F56;
    background-color: #F8FAF9;
    border: 1px solid #EEF2EF;
    border-radius: 12px;
    padding: 0.8rem;
}

.form_receita_propria {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.grupo_receita {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.grupo_receita label {
    font-size: 14px;
    color: #212224;
    font-weight: 500;
}

.grupo_receita input,
.grupo_receita select,
.grupo_receita textarea {
    width: 100%;
    border: 1px solid #DCE3DF;
    border-radius: 10px;
    padding: 0.65rem;
    font-size: 14px;
    box-sizing: border-box;
    color: #212224;
    background-color: #ffffff;
    outline: none;
}

.grupo_receita input:focus,
.grupo_receita select:focus,
.grupo_receita textarea:focus {
    border-color: #039753;
}

.grupo_receita textarea {
    min-height: 90px;
    resize: none;
}

.grupo_receita.erro input,
.grupo_receita.erro select,
.grupo_receita.erro label,
.grupo_receita.erro textarea {
    border-color: red;
}

.texto_erro_receita {
    display: none;
    color: red;
    font-size: 12px;
}

.lista_ingredientes_receita {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip_ingrediente_receita {
    border: 1px solid #DCE3DF;
    background-color: #F8FAF9;
    color: #4F5F56;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: 0.2s ease;
}

.chip_ingrediente_receita.ativo {
    background-color: #039753;
    color: #ffffff;
    border-color: #039753;
}

.grupo_receita.erro .lista_ingredientes_receita {
    border: 1px solid red;
    border-radius: 10px;
    padding: 0.5rem;
}

.btn_upload_cadastro_receita {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 12px;
    padding: 0.65rem;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    color: #212224;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.preview_upload_receita {
    display: none;
    width: 100%;
    margin-top: 0.4rem;
    border: 1px solid #DCE3DF;
    border-radius: 12px;
    overflow: hidden;
    background-color: #F8FAF9;
}

.preview_upload_receita img,
.preview_upload_receita video {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    display: block;
}

.preview_upload_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.7rem;
    background-color: #ffffff;
    border-top: 1px solid #EEF2EF;
}

.nome_arquivo_preview {
    font-size: 12px;
    color: #4F5F56;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn_remover_preview {
    border: none;
    background-color: #e53935;
    color: #ffffff;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.card_index.oculto {
    display: none;
}

.icone_tempo_receita {
    color: #039753;
}
/* RECEITAS */


/* INDEX DETALHES */
.icone_voltar {
    background-color: #039753;
    color: #ffffff;
    border: none;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.card_detalhes {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 0.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.topo_card_detalhes {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.topo_card_detalhes>div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.titulo_card_detalhes {
    font-size: 16px;
    font-weight: 500;
    color: #212224;
}

.descricao_card_detalhes {
    font-size: 14px;
    color: #4F5F56;
    line-height: 1.4;
}

.div_fotos_vertical {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.img_principal_detalhes {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.container_img_secundaria_detalhes {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.container_img_secundaria_detalhes::-webkit-scrollbar {
    display: none;
}

.img_secundaria_detalhes {
    min-width: 88px;
    min-height: 88px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid transparent;
    opacity: 0.75;
    cursor: pointer;
    transition: 0.2s ease;
}

.img_secundaria_detalhes.ativo {
    border-color: #039753;
    opacity: 1;
}

.div_titulo_index_detalhes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nome_tipo_detalhes {
    color: #039753;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.titulo_nome_detalhes {
    font-size: 16px;
    font-weight: 600;
    color: #212224;
    line-height: 1.25;
}

.avaliacoes_detalhes {
    font-size: 14px;
    color: #4F5F56;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.descricao_detalhes {
    display: block;
    color: #4F5F56;
    font-size: 14px;
    line-height: 1.55;
}

.div_listagem_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.box_video_detalhes {
    width: 100%;
    height: 190px;
    background-color: #F8FAF9;
    border: 1px solid #DCE3DF;
    border-radius: 14px;
    overflow: hidden;
}

.box_video_detalhes video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lista_info_detalhes {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.item_info_detalhes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #F8FAF9;
    border: 1px solid #80808038;
    border-radius: 14px;
    padding: 0.75rem;
    box-sizing: border-box;
}

.icone_info_detalhes {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #80808038;
}

.icones_card_detalhes {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.conteudo_info_detalhes {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.label_info_detalhes {
    font-size: 12px;
    font-weight: 500;
    color: #4F5F56;
}

.valor_info_detalhes {
    font-size: 14px;
    font-weight: 500;
    color: #212224;
    line-height: 1.35;
    word-break: break-word;
}

.div_avaliacoes_realizadas {
    background-color: #F8FAF9;
    border: 1px solid #80808038;
    border-radius: 14px;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.div_nome_avaliacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nome_avaliacao {
    font-size: 14px;
    font-weight: 600;
    color: #212224;
}

.nota_avaliacao {
    font-size: 13px;
    color: #4F5F56;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.comentario_avaliacao {
    font-size: 13px;
    color: #4F5F56;
    line-height: 1.5;
}

.data_avalicao {
    font-size: 12px;
    color: #4F5F56;
    align-self: flex-end;
}

.btn_enviar_avaliacao {
    width: 100%;
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.modal_avaliacao_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}

.modal_avaliacao_overlay.ativo {
    display: flex;
}

.modal_avaliacao {
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 1.2rem;
    box-sizing: border-box;
    position: relative;
    animation: subirModal 0.25s ease;
}

@keyframes subirModal {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.btn_fechar_modal {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    background-color: #212224;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal_avaliacao_header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.modal_avaliacao_header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #212224;
}

.modal_avaliacao_header span {
    font-size: 14px;
    color: #4F5F56;
}

.campo_modal {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.campo_modal label {
    font-size: 14px;
    color: #212224;
    font-weight: 500;
}

.campo_modal input,
.campo_modal textarea {
    width: 100%;
    border: 1px solid #DCE3DF;
    border-radius: 10px;
    padding: 0.75rem;
    box-sizing: border-box;
    font-size: 14px;
    color: #212224;
    outline: none;
}

.campo_modal input:focus,
.campo_modal textarea:focus {
    border-color: #039753;
}

.campo_modal textarea {
    min-height: 100px;
    resize: none;
}

.container_estrelas_avaliacao {
    display: flex;
    gap: 0.4rem;
}

.estrela_avaliacao {
    font-size: 26px;
    color: #D4D4D4;
    cursor: pointer;
    transition: 0.2s;
}

.estrela_avaliacao.ativo {
    color: #F4B400;
}

.btn_salvar_avaliacao {
    width: 100%;
    border: none;
    background-color: #039753;
    color: #ffffff;
    padding: 0.6rem;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.erro_avaliacao {
    display: none;
    color: red;
    font-size: 12px;
    margin-top: 0.2rem;
}

.container_avaliacoes_realizadas {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 350px;
    overflow: auto;
}
/* INDEX DETALHES */


/* INDEX */
.topo_index {
    display: flex;
    flex-direction: column;
}

.div_texto_card_index span{
    color: #000000;
}

.img_card_index {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.card_index {
    background: #ffffff;
    color: #000000;
    border-radius: 12px;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    min-width: 90%;
    border: 1px solid #80808038;
}

.texto_card_index {
    padding: 0.8rem;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.nome_card_index {
    font-weight: 500;
}

.icones_card_index {
    width: 16px;
}

.btn_detalhes_index {
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    cursor: pointer;
    transition: all 0.3s;
    color: #000000;
    width: 100%;
    border: 1px solid #80808038;
    font-size: 14px;
    background-color: #F8FAF9;
}

.icone_estrelas {
    color: #FFC107;
}

.div_texto_card_index {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.tags_cards {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    color: #4F5F56;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 12px;
    font-weight: 500;
}

.div_listagem_tags {
    display: flex;
    align-items: start;
    gap: 0.4rem;
}

.div_search_sem_borda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    color: #333;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    outline: none;
}

.div_search_sem_borda i {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.div_search_sem_borda input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 100%;
}

.div_img_tipo_index {
    position: relative;
    display: flex;
}

.texto_tipo_card_index {
    position: absolute;
    top: 10px;
    left: 10px;
    transition: all 0.3s;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    color: #4F5F56;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 12px;
    font-weight: 500;
}

.container_card_index {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.div_filtro_raio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    padding: 0.65rem 0.8rem;
    font-size: 14px;
    border-radius: 10px;
    color: #333;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    outline: none;
}

.input_range_raio {
    flex: 1;
}

.card_filtros_busca {
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 18px;
    padding: 0.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 1px 3px -1px;
}

.campo_busca_filtro {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #DCE3DF;
    border-radius: 14px;
    padding: 0.65rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #6b7280;
}

.campo_busca_filtro input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #212224;
    font-size: 14px;
}

.campo_busca_filtro input::placeholder {
    color: #4F5F56;
}

.linha_filtros {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.campo_select_filtro,
.campo_range_filtro {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.campo_select_filtro label {
    font-size: 14px;
    font-weight: 500;
    color: #4F5F56;
}

.select_filtro_box {
    width: 100%;
    background-color: #F8FAF9;
    border: 1px solid #DCE3DF;
    border-radius: 14px;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #6b7280;
}

.topo_range_filtro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.label_range {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #4F5F56;
    font-size: 14px;
    font-weight: 500;
}

.label_range i {
    color: #039753;
}

.valor_raio {
    background-color: #ffffff;
    color: #039753;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #DCE3DF;
}

.input_range_raio {
    width: 100%;
    accent-color: #039753;
    cursor: pointer;
}

@media (min-width: 700px) {
    .linha_filtros {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }
}
/* INDEX */