/* ============================================================
   VARIÁVEIS GLOBAIS E CONFIGURAÇÕES BASE
   ============================================================ */
:root {
    --primaria: #FFD700;        /* Amarelo Ouro - Destaque Principal */
    --primaria-dark: #E6C200;   /* Amarelo Escuro - Bordas e Hover */
    --secundaria: #1e272e;      /* Grafite Escuro - Textos e Cabeçalhos */
    --sucesso: #05c46b;         /* Verde - Finalização e Confirmação */
    --erro: #ff3f34;            /* Vermelho - Alertas e Exclusão */
    --info: #34e7e4;            /* Ciano - Informações Adicionais */
    --branco: #ffffff;
    --inter: 'Inter', sans-serif; /* Fonte Principal */
}

/* Reset de Margens e Box-sizing para evitar quebras de layout */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: var(--inter);
    background: #a9c5e0;      /* Cor de fundo da página */
    display: flex;
    justify-content: center;  /* Centraliza o PDV horizontalmente */
    min-height: 100vh;
    padding: 20px;
}

/* Container Principal do PDV */
.container {
    width: 100%;
    max-width: 1100px;
    background: var(--branco);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2); /* Sombra para profundidade */
    overflow: hidden;
}

/* ============================================================
   CABEÇALHO (HEADER)
   ============================================================ */
header {
    background: var(--primaria);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--primaria-dark);
}

.logo-wrapper { font-size: 1.6rem; letter-spacing: -1px; color: var(--secundaria); }
.logo-main { font-weight: 300; }
.logo-sub { font-weight: 900; text-transform: uppercase; }

/* Badge de status no topo */
.header-status {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--secundaria);
    background: rgba(255,255,255,0.3);
    padding: 6px 15px;
    border-radius: 30px;
}

/* ============================================================
   LAYOUT GRID (Divisão de Telas)
   ============================================================ */
.grid { 
    display: grid; 
    grid-template-columns: 360px 1fr; /* Coluna fixa para inputs e flexível para itens */
    min-height: 600px; 
}

.painel-entrada { 
    padding: 30px; 
    border-right: 2px solid #f1f2f6; 
    background: #f9f9fb; 
}

.painel-carrinho { 
    padding: 30px; 
    display: flex; 
    flex-direction: column; 
}

h3 { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    color: #808e9b; 
    margin-bottom: 15px; 
}

/* Estilização de Inputs */
input {
    width: 100%; 
    padding: 14px; 
    margin-bottom: 15px;
    border: 2px solid #d2dae2; 
    border-radius: 10px; 
    font-size: 1rem;
}

input:focus { 
    border-color: var(--primaria-dark); 
    outline: none; 
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1); 
}

/* Alinhamento de Quantidade e Preço lado a lado */
.input-group-row { 
    display: grid; 
    grid-template-columns: 1fr 90px; 
    gap: 12px; 
}

/* ============================================================
   COMPONENTES DE BOTÃO
   ============================================================ */
button { 
    border: none; 
    border-radius: 10px; 
    cursor: pointer; 
    font-weight: 700; 
    transition: 0.2s; 
}

button:active { 
    transform: translateY(2px); /* Efeito de clique físico */
}

.btn-adicionar { 
    background: var(--secundaria); 
    color: white; 
    width: 100%; 
    padding: 16px; 
    text-transform: uppercase; 
}

.btn-finalizar { 
    background: var(--sucesso); 
    color: white; 
    width: 100%; 
    padding: 22px; 
    font-size: 1.2rem; 
    margin-top: 15px;
    box-shadow: 0 6px 0 #059652; /* Sombra sólida para estilo 3D */
    text-transform: uppercase;
}

/* Botão de Limpar Carrinho */
#removeAll {
    background: none;
    border: 2px solid var(--erro);
    color: var(--erro);
    padding: 8px 15px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-bottom: 10px;
    width: fit-content;
    align-self: flex-end; 
    text-transform: uppercase;
    transition: all 0.3s ease;
}

#removeAll:hover {
    background: var(--erro);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 63, 52, 0.3);
    transform: translateY(-2px);
}

/* ============================================================
   LISTAGEM DE ITENS (CARRINHO)
   ============================================================ */
#lista { 
    flex-grow: 1; 
    overflow-y: auto; 
    max-height: 400px; 
    margin-bottom: 20px; 
}

.item {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px; 
    background: #fff; 
    border: 2px solid transparent; /* Reserva espaço para o hover */
    border-radius: 12px; 
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Feedback visual ao passar o mouse no item */
.item:hover {
    border-color: var(--primaria);
    background-color: #fffdf0;
    transform: translateX(5px); /* Desliza levemente para a direita */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.item-info { display: flex; flex-direction: column; gap: 4px; }
.item-detalhes { font-size: 0.85rem; color: #636e72; display: flex; gap: 10px; }

/* Tag de Desconto ou Info no Item */
.tag-desc {
    background: #ffeaa7;
    color: #d63031;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 8px;
}

/* Área do Totalizador */
#total-area {
    background: var(--secundaria); 
    color: white; 
    padding: 20px;
    border-radius: 15px; 
    text-align: right; 
    border-left: 8px solid var(--primaria);
}

/* ============================================================
   SISTEMA DE PAGAMENTO (UI CUSTOMIZADA)
   ============================================================ */
.painel-pagamento {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

.metodos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

/* Esconde o Radio Button padrão */
.metodo-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Estilização do Card de Pagamento */
.metodo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90px;
    cursor: pointer;
    background: #ffffff;
    border: 2px solid #d2dae2;
    border-radius: 12px;
    transition: all 0.25s ease;
    padding: 10px;
}

.metodo-card:hover {
    border-color: #b3bdc6;
    background-color: #fbfbfc;
    transform: translateY(-2px);
}

/* Estilo quando o método está SELECIONADO */
.metodo-item input[type="radio"]:checked + .metodo-card {
    border-color: #05c46b;
    background-color: #f0fff8;
    box-shadow: 0 5px 15px rgba(5, 196, 107, 0.15);
}

.metodo-card img { height: 30px; margin-bottom: 10px; object-fit: contain; }
.metodo-card span { font-size: 0.8rem; font-weight: 700; color: #4b4b4b; }

.metodo-item input[type="radio"]:checked + .metodo-card span {
    color: #05c46b;
}

/* ============================================================
   NOTIFICAÇÕES (TOASTS)
   ============================================================ */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }

.toast {
    background: white; 
    padding: 16px 25px; 
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    margin-bottom: 10px;
    color: var(--secundaria); 
    font-weight: 700; 
    min-width: 250px;
    display: flex; 
    align-items: center; 
    gap: 12px;
    animation: slideIn 0.3s ease forwards; /* Animação de entrada */
}

@keyframes slideIn { 
    from { transform: translateX(120%); } 
    to { transform: translateX(0); } 
}

.toast.success { border-left: 6px solid var(--sucesso); }
.toast.error { border-left: 6px solid var(--erro); }
.toast.info { border-left: 6px solid var(--info); }

/* ============================================================
   MODAIS E POPUPS (DIALOG)
   ============================================================ */
dialog {
    border: none;
    border-radius: 20px;
    padding: 30px;
    width: 420px;
    margin: auto;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Efeito de desfoque atrás do modal */
dialog::backdrop {
    background: rgba(30, 39, 46, 0.85);
    backdrop-filter: blur(6px);
}

.popup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

/* Botões dentro do Modal */
.btn-confirm-pop {
    background: var(--sucesso);
    color: white;
    padding: 12px 25px;
    border-radius: 10px;
    flex: 1;
}

.btn-confirm-pop.danger { background: var(--erro); }

.btn-cancel-pop {
    background: #f1f2f6;
    color: #57606f;
    padding: 12px 25px;
    border-radius: 10px;
    flex: 1;
    border: 1px solid #d2dae2;
}

.input-pdv {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #d2dae2;
    background: white;
    font-family: var(--inter);
    font-weight: 600;
}

#secao-pix img {
    border: 4px solid white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ============================================================
   AJUSTES PARA AS NOVAS FUNÇÕES (PAGAMENTO DINÂMICO)
   ============================================================ */

/* Garante que o seletor de parcelas e troco tenha espaçamento */
#detalhes-pagamento {
    transition: all 0.3s ease;
}

/* Estilização extra para os selects de Cartão e parcelas */
.input-pdv {
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.input-pdv:focus {
    border-color: var(--primaria-dark);
    outline: none;
}

/* Estilo para o display de troco */
#display-troco {
    font-size: 1rem;
    padding: 5px;
    background: #f8f9fa;
    border-radius: 5px;
    text-align: center;
}

/* Ajuste do QR Code para não ficar gigante */
#secao-pix img {
    max-width: 130px;
    height: auto;
    display: block;
    margin: 10px auto;
    border: 4px solid white;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Garante que o botão de finalizar tenha destaque total */
.btn-finalizar {
    display: block;
    margin-top: 20px;
    transition: filter 0.2s, transform 0.1s;
}

.btn-finalizar:hover {
    filter: brightness(1.1);
}

/* Estilos para os novos campos de pagamento */
.input-pdv {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #d2dae2;
    background: white;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
}

#display-troco {
    text-align: center;
    padding: 8px;
    background: #f1f2f6;
    border-radius: 8px;
    font-size: 0.9rem;
}

#secao-pix img {
    max-width: 120px;
    margin: 10px auto;
    border: 3px solid white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; }
.toast { background: white; padding: 15px 25px; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); animation: slideIn 0.3s forwards; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.toast.success { border-left: 5px solid #05c46b; }
.toast.error { border-left: 5px solid #ff3f34; }

@media (max-width: 660px) {
    .grid {
        display: grid; 
        grid-template-columns: 360px;
        min-height: 600px; 
        justify-content: center;
    }
}