:root {
    --cor-primaria-cart: #00b894; /* Verde */
    --cor-perigo-cart: #e74c3c; /* Vermelho */
}

/* ======================================= */
/* === ESTILOS DO ÍCONE FLUTUANTE      === */
/* ======================================= */

#cart-float-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: var(--cor-primaria-cart);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 998;
    transition: transform 0.2s ease;
}

#cart-float-button:hover {
    transform: scale(1.1);
}

.cart-float-icon {
    font-size: 28px;
}

.cart-float-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--cor-perigo-cart);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
}


/* ======================================= */
/* === PAINEL LATERAL (ESTRUTURA GERAL) === */
/* ======================================= */

.cart-panel-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 999;
    visibility: hidden;
}
.cart-panel-wrapper.active {
    visibility: visible;
}
.cart-panel-overlay {
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cart-panel-wrapper.active .cart-panel-overlay {
    opacity: 1;
}
.cart-panel-conteudo {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.cart-panel-wrapper.active .cart-panel-conteudo {
    transform: translateX(0);
}

/* Sistema de Telas (Views) */
.cart-view {
    display: none; /* Todas as telas começam escondidas */
    flex-direction: column;
    height: 100%;
    background-color: #fff;
}
.cart-view.active {
    display: flex; /* A tela ativa é exibida */
}


/* ======================================= */
/* === COMPONENTES DO PAINEL           === */
/* ======================================= */

/* Cabeçalho do Painel */
.cart-panel-header {
    flex-shrink: 0;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.cart-panel-header h3 { margin: 0; font-size: 20px; }
.cart-panel-fechar, .cart-panel-voltar { background: none; border: none; font-size: 24px; cursor: pointer; line-height: 1; padding: 0 5px; }
.cart-panel-voltar { font-size: 18px; font-weight: 600; color: #555; }

/* Corpo (Área de Scroll) */
.cart-panel-corpo {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
}
.cart-item { display: flex; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; gap: 10px; }
.cart-item-info { flex-grow: 1; }
.cart-item-titulo { font-weight: 600; margin: 0 0 5px; }
.cart-item-opcoes { font-size: 13px; color: #666; margin: 0 0 10px; }
.cart-item-qty-preco { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cart-item-qty-controls { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; }
.cart-item-qty-controls button { background-color: transparent; border: none; font-size: 20px; font-weight: bold; color: var(--cor-primaria-cart); cursor: pointer; padding: 5px 10px; }
.cart-item-qty-controls .qty-display { padding: 0 10px; font-weight: 500; min-width: 20px; text-align: center; }
.cart-item-preco { font-weight: bold; }
.cart-item-acoes { flex-shrink: 0; }
.cart-item-acoes .btn-remover-item { font-size: 24px; color: var(--cor-perigo-cart); cursor: pointer; text-decoration: none; line-height: 1; font-weight: bold; padding-left: 10px; }
.cart-vazio { text-align: center; padding: 50px 20px; color: #888; }

/* Rodapé (Área Fixa) */
.cart-panel-rodape {
    flex-shrink: 0;
    padding: 15px;
    background-color: #f8f8f8;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -5px 10px rgba(0,0,0,0.05);
}

/* Seção de Totais e Formulário */
#cart-totals-display, #cart-totals-display-form { margin-bottom: 15px; }
#cart-totals-display-form { padding: 10px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 20px; background: #fdfdfd; }
.cart-total-linha { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 8px; }
.cart-total-linha.total-geral { font-size: 20px; font-weight: bold; color: var(--cor-primaria-cart); }
#cart-view-summary .cart-total-linha.total-geral { border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px; }

/* Campos do Formulário */
#cart-view-form .cart-panel-corpo { padding-top: 0; }
.form-fields-container { max-height: calc(100vh - 250px); overflow-y: auto; padding: 5px; }
#cart-checkout-form .form-group { margin-bottom: 12px; }
#cart-checkout-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
#cart-checkout-form input[type="text"],
#cart-checkout-form input[type="tel"],
#cart-checkout-form select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; }

/* ======================================= */
/* === BOTÕES PRINCIPAIS (BLINDADOS)   === */
/* ======================================= */

#cart-float-panel .button-primary-full {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--cor-primaria-cart) !important; /* Cor primária do carrinho */
    color: #fff !important; /* Cor do texto */
    border: none !important; /* Remove qualquer borda do tema */
    border-radius: 8px !important; /* Arredondamento */
    font-size: 18px !important; /* Tamanho da fonte */
    font-weight: 700 !important; /* Peso da fonte */
    cursor: pointer;
    text-align: center;
    text-decoration: none !important; /* Garante que não tenha sublinhado */
    text-shadow: none !important; /* Remove qualquer sombra de texto do tema */
    box-shadow: none !important; /* Remove qualquer sombra de botão do tema */
    transition: background-color 0.2s;
}

#cart-float-panel .button-primary-full:hover {
    background-color: #00a082 !important; /* Cor mais escura no hover */
    color: #fff !important;
}

#cart-float-panel .button-primary-full:disabled {
    background-color: #999 !important; /* Cor quando desabilitado */
    cursor: not-allowed;
}

/* Tela de Sucesso */
#cart-view-success .cart-success-body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; padding: 20px; }
a#btn-open-whatsapp.whatsapp-button-as-link { display: inline-block; width: 100%; box-sizing: border-box; padding: 15px; background-color: #25D366; color: #fff !important; border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; margin-top: 10px; text-align: center; text-decoration: none !important; transition: background-color 0.2s; }
a#btn-open-whatsapp.whatsapp-button-as-link:hover { background-color: #128C7E; }


/* Adicione este trecho aos 3 arquivos CSS */

.opcao-grupo textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.cart-item-obs {
    font-size: 13px;
    color: #e67e22; /* Laranja para destaque */
    margin: 5px 0 0 0;
    padding-left: 5px;
    border-left: 2px solid #e67e22;
}

.item-obs-detalhe {
    list-style-type: none !important;
    font-size: 13px;
    color: #e67e22;
    margin: -5px 0 10px 20px; /* Alinha abaixo do item principal */
}

/* --- Estilos para o Seletor de Tipo de Entrega --- */
.tipo-entrega-selector {
    background-color: #f0f8ff;
    border: 1px solid #bde0ff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.tipo-entrega-selector > label {
    font-weight: 700;
    margin-bottom: 10px;
}
.tipo-entrega-selector div {
    display: flex;
    align-items: center;
}
.tipo-entrega-selector input[type="radio"] {
    width: auto;
    margin-right: 10px;
    transform: scale(1.2);
}
.tipo-entrega-selector label {
    font-weight: normal !important;
    margin-bottom: 0 !important;
}