.cart-header {
    /*border-bottom: 1px solid #eee;*/
}

.cart-header-buttons {
    display: flex;
    gap: 10px;
}

/* Variáveis de cores e valores comuns */
:root {
    --color-gray: #576574;
    --color-red: #f44336;
    --color-green: #4CAF50;
    --shadow-normal: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Container dos botões superiores */
.cart-header-buttons {
    display: flex;
    gap: 8px;
    padding: 10px;
}

/* Estilo base unificado para todos os botões */
.btn_limpa_carrinho,
.btn_cancela_pedido,
.btn_finaliza_pedido {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 10px 20px;
    
    /* Aparência */
    border-radius: 50px;
    border: none;
    box-shadow: var(--shadow-normal);
    
    /* Tipografia */
    font-size: 14px;
    font-weight: 500;
    color: white !important;
    
    /* Transições */
    transition: all 0.2s ease;

    /* Ícones */
    & i {
        font-size: 16px;
    }

    /* Estados */
    &:hover {
        opacity: 0.9;
        box-shadow: var(--shadow-hover);
    }

    &:active {
        opacity: 1;
        transform: translateY(1px);
        box-shadow: var(--shadow-normal);
    }
}

/* Estilos específicos para cada botão */
.btn_limpa_carrinho {
    background-color: var(--color-gray) !important;
}

.btn_cancela_pedido {
    background-color: var(--color-red) !important;
}

.btn_finaliza_pedido {
    background-color: var(--color-green) !important;
    width: 100%;
    margin: 0;
}


/* Ajusta o botão de confirmar pedido no final da página */

/* Container principal do carrinho */
.cart-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Área de conteúdo do carrinho */
.cart-items-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 70px; /* Espaço para o botão */
}

/* Footer com botão fixo */
.cart-footer {
    position: absolute; /* Mudamos para absolute para respeitar o container pai */
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: white;
}

/* Ajuste do botão dentro do footer */
.btn_finaliza_pedido {
    width: 100%;
    margin: 0;
}

/* Ajuste da coluna do carrinho */
.col-lg-5.col-md-6.col-12.px-0 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* Remove qualquer barra de rolagem */
.cart-items-container{
    overflow: hidden;
}



/* Ajustes para tablets */
/*@media (max-width: 1024px) {*/
/*    .btn_finaliza_pedido {*/
/*        padding: 18px;*/
/*        font-size: 20px;*/
/*        min-height: 60px;*/
/*    }*/
    
/*    .btn_finaliza_pedido i {*/
/*        font-size: 22px;*/
/*    }*/
/*}*/


/* Estilo da barra de rolagem para navegadores WebKit (Chrome, Safari) */
tbody[style*="overflow-y:scroll"] {
    scrollbar-width: auto;
    scrollbar-color: #2196F3 #E3F2FD;
}

tbody[style*="overflow-y:scroll"]::-webkit-scrollbar {
    width: 12px;
}

tbody[style*="overflow-y:scroll"]::-webkit-scrollbar-track {
    background: #E3F2FD;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
}

tbody[style*="overflow-y:scroll"]::-webkit-scrollbar-thumb {
    background: #2196F3;
    border-radius: 6px;
    border: 2px solid #E3F2FD;
    min-height: 40px;
}

tbody[style*="overflow-y:scroll"]::-webkit-scrollbar-thumb:hover {
    background: #1976D2;
}

/* Para tablets - barra ainda mais larga */
@media (max-width: 1024px) {
    tbody[style*="overflow-y:scroll"]::-webkit-scrollbar {
        width: 14px;
    }
    
    tbody[style*="overflow-y:scroll"]::-webkit-scrollbar-thumb {
        min-height: 50px;
    }
}


/* Botão de TELA CHEIA */
/* Estilos para o botão de tela cheia */
.fullscreen-btn {
    position: fixed;
    right: 10px;
    bottom: 10px; /* Posicionado no canto inferior direito */
    z-index: 9999;
    padding: 8px;
    border-radius: 50%; /* Formato circular */
    background-color: rgba(240, 240, 240, 0.8);
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.fullscreen-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Esconde o botão em tela cheia */
:fullscreen .fullscreen-btn {
    display: none;
}

/* Suporte para diferentes navegadores */
:-webkit-full-screen .fullscreen-btn {
    display: none;
}

:-moz-full-screen .fullscreen-btn {
    display: none;
}

:-ms-fullscreen .fullscreen-btn {
    display: none;
}


/* Area de informação do cliente  */
/* Estilos para a seção de informações do usuário */
.user-info-section {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}

.user-info-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

.user-details {
    display: flex;
    flex-direction: column;
}

.user-greeting {
    font-size: 14px;
    color: #666;
}

.user-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.session-info {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Responsividade */
@media (max-width: 768px) {
    .user-info-section {
        padding: 10px;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
    }

    .user-name {
        font-size: 16px;
    }

    .session-info {
        font-size: 11px;
    }
}



/* Problema do tamanho do card */
/* Container principal da coluna de produtos */
.col-lg-7.col-md-6.col-12.border-end.px-0 {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Seção de informações do usuário */
.user-info-section {
    flex-shrink: 0; /* Impede que a seção de usuário encolha */
    width: 100%;
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}

/* Área dos botões de categoria */
.category-buttons {
    flex-shrink: 0; /* Impede que os botões de categoria encolham */
}

/* Container de scroll para os cards */
.scroll-column {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    height: calc(100vh - 150px); /* Altura total menos o header e botões */
    -webkit-overflow-scrolling: touch; /* Para melhor scroll no iOS */
}

/* Ajuste para os cards */
#card-items {
    padding-bottom: 20px; /* Espaço extra no final para visualização */
}

/* Media queries para responsividade */
@media (max-width: 768px) {
    .scroll-column {
        height: calc(100vh - 130px); /* Ajuste para telas menores */
    }
}

/* Estilização da barra de rolagem (opcional) */
.scroll-column::-webkit-scrollbar {
    width: 8px;
}

.scroll-column::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroll-column::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.scroll-column::-webkit-scrollbar-thumb:hover {
    background: #555;
}