.elementor-344 .elementor-element.elementor-element-ce28d5e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-344 .elementor-element.elementor-element-b54d263{width:100%;max-width:100%;}.elementor-344 .elementor-element.elementor-element-b54d263 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-344 .elementor-element.elementor-element-28bbc98{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-344 .elementor-element.elementor-element-5cecbc8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-344 .elementor-element.elementor-element-0669606{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-344 .elementor-element.elementor-element-386cef9{width:var( --container-widget-width, 63% );max-width:63%;--container-widget-width:63%;--container-widget-flex-grow:0;text-align:center;font-family:"Poppins", Sans-serif;font-size:17px;font-weight:400;color:#000000;}.elementor-344 .elementor-element.elementor-element-386cef9.elementor-element{--align-self:center;}.elementor-344 .elementor-element.elementor-element-3991356{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-344 .elementor-element.elementor-element-8201f66 img{width:93%;border-radius:14px 14px 14px 14px;}.elementor-344 .elementor-element.elementor-element-1315eea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-344 .elementor-element.elementor-element-068673b{width:100%;max-width:100%;}.elementor-344 .elementor-element.elementor-element-068673b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body.elementor-page-344:not(.elementor-motion-effects-element-type-background), body.elementor-page-344 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EAEAEA;}@media(max-width:767px){.elementor-344 .elementor-element.elementor-element-28bbc98{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-344 .elementor-element.elementor-element-0669606{--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-344 .elementor-element.elementor-element-386cef9{--container-widget-width:96%;--container-widget-flex-grow:0;width:var( --container-widget-width, 96% );max-width:96%;font-size:15px;}.elementor-344 .elementor-element.elementor-element-3991356{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-344 .elementor-element.elementor-element-ce28d5e{--content-width:100%;}.elementor-344 .elementor-element.elementor-element-1315eea{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-755546c *//* Estilos Gerais */
.shopping-list-container {
    font-family: Arial, sans-serif;
    max-width: 700px; /* Aumentei um pouco para dar mais espaço */
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}
.shopping-list-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
}

/* Campo de Entrada, Quantidade e Botão Adicionar */
.input-section {
    display: flex;
    flex-wrap: nowrap; /* Impede quebras de linha indesejadas em desktop */
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-end; /* Alinha os itens na parte inferior */
    /* justify-content: space-between; -- Poderia ser usado, mas flex-grow já vai distribuir */
}
#itemInput {
    flex-grow: 3; /* Cresce mais */
    flex-shrink: 1;
    min-width: 150px; /* Permite encolher até aqui */
    max-width: 40%; /* Limita crescimento para deixar espaço para outros */
}
#quantityInput {
    flex-grow: 1; /* Cresce menos */
    flex-shrink: 1;
    min-width: 50px;
    max-width: 80px; /* Largura máxima para quantidade */
    text-align: center;
}
#addItemBtn {
    flex-shrink: 0; /* Impede que o botão encolha */
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
    /* Remover margin-left: auto para que fique alinhado pela flexbox */
}
#addItemBtn:hover {
    background-color: #0056b3;
}

/* Estilos gerais para inputs de topo */
#itemInput, #quantityInput {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
#itemInput:focus, #quantityInput:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}


/* Lista de Itens */
#shoppingList {
    list-style: none;
    padding: 0;
    margin-top: 0;
}
#shoppingList li {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}
#shoppingList li:last-child {
    margin-bottom: 0;
}
#shoppingList li.completed {
    text-decoration: line-through;
    color: #888;
    background-color: #e6e6e6;
}
#shoppingList li .item-details {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-wrap: wrap;
    cursor: pointer; /* Área clicável para riscar */
    min-width: 0;
}
#shoppingList li .item-details .item-name {
    font-weight: bold;
    margin-right: 15px;
    word-break: break-word;
    flex-shrink: 0;
    max-width: 100%;
}

/* ESTILOS PARA O INPUT DE QUANTIDADE DENTRO DOS ITENS DA LISTA */
#shoppingList li .item-qty-input {
    background-color: transparent; /* Fundo transparente */
    border: none; /* Sem borda visível */
    border-bottom: 1px dashed #ccc; /* Apenas uma borda inferior pontilhada */
    border-radius: 0; /* Sem bordas arredondadas */
    padding: 2px 4px;
    font-size: 0.9em;
    color: #333;
    margin-right: 10px;
    width: 45px; /* Largura ajustada para a quantidade */
    text-align: center;
    flex-shrink: 0;
    transition: all 0.2s ease; /* Transição suave ao focar */
}
#shoppingList li .item-qty-input:focus {
    border-color: #007bff; /* Borda visível e sólida ao focar */
    border-bottom-style: solid;
    background-color: #fff; /* Fundo branco ao focar */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* ESTILO PARA O INPUT DE VALOR UNITÁRIO DENTRO DA LISTA (AGORA É ESTE O EDITÁVEL) */
#shoppingList li .item-price-input-in-list { /* Esta é a classe do input de Valor Unitário */
    background-color: transparent; /* Fundo transparente */
    border: none; /* Sem borda visível */
    border-bottom: 1px dashed #ccc; /* Apenas uma borda inferior pontilhada */
    border-radius: 0; /* Sem bordas arredondadas */
    padding: 2px 4px;
    font-size: 0.9em;
    font-weight: normal; /* Normal, pois o subtotal é que será bold */
    color: #333;
    margin-left: 5px; /* Espaço após o R$ */
    width: 75px; /* Largura para o valor unitário */
    text-align: right;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
#shoppingList li .item-price-input-in-list:focus {
    border-color: #007bff;
    border-bottom-style: solid;
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* ESTILO PARA O PREFIXO "R$" DO VALOR UNITÁRIO DENTRO DA LISTA */
#shoppingList li .item-price-group-in-list { /* Agrupa "Valor Un:", "R$" e o input */
    display: flex;
    align-items: center;
    margin-right: 10px; /* Espaço para o próximo elemento */
    font-size: 0.9em; /* Tamanho do R$ */
    color: #555; /* Cor do R$ */
    white-space: nowrap; /* Não quebra linha */
}
#shoppingList li .item-price-group-in-list span.currency-prefix {
    font-weight: bold; /* Deixa o R$ mais destacado */
    margin-right: 2px; /* Espaço entre R$ e o input */
    color: #007bff; /* Mesma cor do total estimado */
}


/* Remover setas padrão em inputs number em alguns navegadores */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* ESTILO PARA O SUBTOTAL DO ITEM (RESULTADO DO CÁLCULO) */
#shoppingList li .item-subtotal-value { /* Agora é um SPAN, resultado de Qtd * Valor Un. */
    font-weight: bold;
    color: #007bff;
    margin-left: auto; /* Empurra para a direita */
    white-space: nowrap;
    flex-shrink: 0;
    padding: 2px 0; /* Para alinhar com o padding dos inputs */
}
.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    margin-left: 10px;
}
.delete-btn:hover {
    background-color: #c82333;
}

/* Seção de Total Geral */
.total-section {
    text-align: right;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}
.total-section h3 {
    margin: 0;
    color: #333;
    font-size: 1.5em;
}
#totalValue {
    color: #007bff;
    font-size: 1.6em;
}

/* Botões de Ação (Imprimir/Baixar/WhatsApp) */
.actions {
    text-align: center;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.actions button {
    padding: 12px 25px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
    flex-grow: 1;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
}
.actions button:hover {
    background-color: #218838;
}
#downloadListBtn {
    background-color: #17a2b8;
}
#downloadListBtn:hover {
    background-color: #138496;
}
#whatsappListBtn {
    background-color: #25D366;
}
#whatsappListBtn:hover {
    background-color: #1DA851;
}
.actions button i {
    margin-right: 8px;
    flex-shrink: 0;
}

/* --- Media Queries para Responsividade --- */

/* Para telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
    .shopping-list-container {
        margin: 10px;
        padding: 15px;
    }
    .shopping-list-container h2 {
        font-size: 1.5em;
    }
    .input-section {
        flex-direction: column; /* Inputs empilham */
        align-items: stretch;
    }
    #itemInput, #quantityInput, #addItemBtn { /* Todos os inputs e o botão */
        width: 100%;
        max-width: none;
        margin-left: 0;
        text-align: left;
    }
    #quantityInput {
        text-align: center; /* Mantém centralizado */
    }
    #addItemBtn {
        margin-top: 10px; /* Adiciona espaço acima do botão */
    }

    #shoppingList li {
        padding: 10px;
        font-size: 15px;
    }
    #shoppingList li .item-details {
        flex-direction: column;
        align-items: flex-start;
        width: calc(100% - 70px);
    }
    #shoppingList li .item-details .item-name {
        margin-right: 0;
        margin-bottom: 5px;
    }
    #shoppingList li .item-qty-input {
        margin-right: 0;
        margin-bottom: 3px;
        width: 80px; /* Ajuste para quantidade em mobile */
        text-align: center;
    }
    #shoppingList li .item-price-group-in-list { /* Agrupa R$ e input */
        margin-right: 0;
        margin-bottom: 3px;
        width: 100%; /* Ocupa a largura total para o grupo */
        justify-content: flex-start; /* Alinha o R$ e input à esquerda em mobile */
    }
    #shoppingList li .item-price-input-in-list {
        width: calc(100% - 25px); /* Desconta o R$ */
        text-align: right;
    }
    #shoppingList li .item-subtotal-value { /* O subtotal do item se comporta como texto */
        margin-right: 0;
        margin-top: 5px;
        font-size: 1.1em;
    }
    .delete-btn {
        padding: 6px 10px;
        font-size: 13px;
        margin-left: auto;
    }
    .total-section h3 {
        font-size: 1.3em;
    }
    #totalValue {
        font-size: 1.4em;
    }
    .actions {
        flex-direction: column;
        gap: 10px;
    }
    .actions button {
        width: 100%;
        max-width: none;
        padding: 10px 15px;
        font-size: 15px;
    }
    .actions button i {
        margin-right: 6px;
    }
}

/* Para telas ainda menores (celulares) */
@media (max-width: 480px) {
    .shopping-list-container {
        padding: 10px;
    }
    .input-section {
        gap: 8px;
    }
    #itemInput, #quantityInput, #addItemBtn {
        padding: 10px;
        font-size: 14px;
    }
    #shoppingList li {
        padding: 8px;
        font-size: 14px;
    }
    .delete-btn {
        font-size: 12px;
        padding: 5px 8px;
    }
    .actions button {
        font-size: 13px;
        padding: 8px 10px;
    }
    .actions button i {
        margin-right: 4px;
    }
}

/* Estilos para Impressão */
@media print {
    body { font-family: Arial, sans-serif; margin: 20px; color: #000; }
    h1 { text-align: center; margin-bottom: 20px; font-size: 2em; }
    ul { list-style: none; padding: 0; }
    li {
        margin-bottom: 8px; padding: 8px; border-bottom: 1px dashed #ccc;
        display: flex; align-items: flex-start; page-break-inside: avoid;
        font-size: 1.1em;
    }
    .print-checkbox {
        width: 18px; height: 18px; border: 1px solid black; margin-right: 12px;
        flex-shrink: 0; background-color: #fff;
    }
    .item-text-print { flex-grow: 1; }
    .item-text-print strong { display: block; }
    .item-text-print span { font-size: 0.9em; color: #555; display: block; }
    .item-total-value-print {
        font-weight: bold; color: #000; margin-left: 10px; white-space: nowrap;
    }
    .total-section-print {
        text-align: right; margin-top: 20px; padding-top: 15px;
        border-top: 1px solid #ccc; font-weight: bold; font-size: 1.2em;
    }
    .total-section-print #totalValuePrint { font-size: 1.3em; color: #000; }
    .shopping-list-container h2, .input-section, .actions, #totalValue { display: none; }
}/* End custom CSS */