/* pagina_principal.css */

/* --- GERAL E A FUMAÇA VIVA --- */
body {
    background-color: #0a0a0f;
    color: #eee;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita rolagem horizontal */

    /* A nossa fumaça animada de volta! */
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(161, 86, 255, 0.18), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(0, 234, 255, 0.18), transparent 45%);
    animation: fumaca 20s infinite alternate;
}

.container {
    padding: 15px;
}

/* --- O PORTAL DA BALADA (MODAL 18+) --- */
.age-gate-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 15, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    transition: opacity 0.5s ease;
}

.age-gate-modal.hidden {
    display: none;
}

.age-gate-content {
    text-align: center;
    padding: 40px;
    border: 2px solid #a156ff;
    border-radius: 10px;
    box-shadow: 0 0 15px #a156ff, 0 0 30px #a156ff, inset 0 0 10px #a156ff;
    animation: fadeIn 1s ease;
}

.logo-modal {
    width: 100px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px #ff4ecb);
}

.neon-button {
    background-color: transparent;
    border: 2px solid #ff4ecb;
    color: #ff4ecb;
    padding: 15px 30px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #ff4ecb, 0 0 20px #ff4ecb, inset 0 0 5px #ff4ecb;
}

.neon-button:hover {
    background-color: #ff4ecb;
    color: #0a0a0f;
    box-shadow: 0 0 15px #ff4ecb, 0 0 30px #ff4ecb, 0 0 45px #ff4ecb;
    transform: scale(1.05);
}

/* --- HEADER E STATUS DA LOJA --- */
header {
    padding: 15px;
    text-align: center;
}

.store-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    /* Margem na direita e esquerda */
    margin: 0 50px;
}

.status-aberto {
    color: #39ff14;
    text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14;
    border: 1px solid #39ff14;
}

.status-fechado {
    color: #ff2d2d;
    text-shadow: 0 0 5px #ff2d2d, 0 0 10px #ff2d2d;
    border: 1px solid #ff2d2d;
}

/* --- SEÇÃO DE ENTREGA --- */
.delivery-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 234, 255, 0.3);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.delivery-card:hover {
    border-color: #00eaff;
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.5);
}
.delivery-title {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}
.delivery-action {
    margin: 5px 0 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
}
.delivery-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
}

/* --- CARROSSEL --- */
#carousel-section {
    margin-top: 25px;
}
.carousel-container {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    scroll-snap-type: x mandatory; /* Efeito de "travar" no item */
    gap: 15px;
    padding-bottom: 15px; /* Espaço para a barra de rolagem não ficar colada */
}
/* Esconde a barra de rolagem mas mantém a funcionalidade */
.carousel-container::-webkit-scrollbar { display: none; } 

.carousel-item {
    flex: 0 0 85%; /* Cada item ocupa 85% da tela */
    scroll-snap-align: center;
}
.carousel-item img {
    width: 100%;
    height: 180px; /* Forçando a altura */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- CARDÁPIO --- */
#menu-section {
    margin-top: 25px;
}
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.menu-header h2 {
    color: #ff4ecb;
    text-shadow: 0 0 10px #ff4ecb;
    margin: 0;
}

/* --- ANIMAÇÕES --- */
@keyframes fumaca {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* --- RESPONSIVO --- */
@media (min-width: 768px) {
    .container {
        max-width: 90%;
        margin: 0 auto;
    }
    .carousel-item {
        flex: 0 0 48%; /* Dois itens por vez em telas maiores */
    }
}

/* Em telas bem grandes, como monitores largos */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px; /* Define um limite para não ficar largo demais */
    }
}

/* --- ESTILOS PARA OS CARDS DE PRODUTO (ADICIONAR NO CSS) --- */
.category-block {
    margin-bottom: 40px;
}
.category-title {
    font-size: 1.5rem;
    color: #a156ff;
    text-shadow: 0 0 8px #a156ff;
    margin-bottom: 20px;
    border-left: 3px solid #a156ff;
    padding-left: 10px;
}
.products-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna por padrão (mobile) */
    gap: 20px;
}
.product-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.product-info {
    padding: 15px;
}
.product-name {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #eee;
}
.product-description {
    font-family: sans-serif; /* Fonte mais legível para texto corrido */
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    height: 40px; /* Limita a altura para 2-3 linhas */
    overflow: hidden;
}
.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.product-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #39ff14;
    text-shadow: 0 0 8px #39ff14;
}
.add-to-cart-btn {
    background-color: #ff4ecb;
    color: #0a0a0f;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.add-to-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #ff4ecb;
}

/* Em telas maiores, mostrar 2 colunas */
@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* === CSS PARA O MODAL DO PRODUTO (O CAMARIM VIP) === */

/* --- A ESTRUTURA PRINCIPAL DO MODAL --- */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 15, 0.85);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    
    /* A mágica da transição lenta */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Estado visível do modal */
.product-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.product-modal-content {
    background-color: #0a0a0f;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    border-radius: 15px;
    border: 2px solid #a156ff;
    box-shadow: 0 0 25px #a156ff, 0 0 50px #a156ff, inset 0 0 20px rgba(161, 86, 255, 0.4);
    
    display: flex;
    flex-direction: column;
    padding: 25px;
    overflow-y: auto; /* Permite rolar se o conteúdo for grande */

    /* Efeito de "zoom in" suave */
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

.product-modal:not(.hidden) .product-modal-content {
    transform: scale(1);
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.close-modal-btn:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* --- ELEMENTOS DENTRO DO MODAL --- */
.modal-product-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
}

#modal-product-name {
    color: #ff4ecb;
    text-shadow: 0 0 10px #ff4ecb, 0 0 20px #ff4ecb;
    margin: 0 0 10px 0;
    text-align: center;
}

#modal-product-description {
    font-family: sans-serif;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 30px;
}

.modal-options-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.option-group-title {
    font-size: 1.2rem;
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 234, 255, 0.3);
    padding-bottom: 5px;
}

.option-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.option-item label {
    font-size: 1rem;
    cursor: pointer;
}

.option-price {
    margin-left: auto; /* Joga o preço para a direita */
    color: rgba(255, 255, 255, 0.7);
}

/* Customização dos Radio Buttons */
.option-item input[type="radio"] {
    display: none; /* Esconde o radio button original */
}
.option-item label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #a156ff;
    border-radius: 50%;
    margin-right: 15px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.option-item input[type="radio"]:checked + label::before {
    background-color: #a156ff;
    box-shadow: 0 0 10px #a156ff;
}

/* --- CAMPO DE OBSERVAÇÕES --- */
.observations-group {
    margin-top: 30px;
    box-sizing: border-box;
}
.observations-group label {
    display: block;
    margin-bottom: 10px;
    color: #00eaff;
}
#modal-product-observations {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
}
#modal-product-observations:focus {
    outline: none;
    border-color: #00eaff;
}

/* --- RODAPÉ DO MODAL (QUANTIDADE E BOTÃO) --- */
.product-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 15px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}
.quantity-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 5px 15px;
    cursor: pointer;
}
#quantity-display {
    font-size: 1.2rem;
    padding: 0 10px;
}

.add-to-cart-modal-btn {
    flex-grow: 1; /* Faz o botão ocupar o espaço restante */
    background-color: #ff4ecb;
    color: #0a0a0f;
    border: none;
    border-radius: 5px;
    padding: 15px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: all 0.2s ease;
}
.add-to-cart-modal-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px #ff4ecb, 0 0 25px #ff4ecb;
}

/* ======================================================= */
/* === CSS DO CARRINHO DE COMPRAS (COMANDA VIP) === */
/* ======================================================= */

/* --- 1. O ÍCONE FLUTUANTE DO CARRINHO --- */
.cart-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    background-color: rgba(255, 78, 203, 0.2);
    border: 2px solid #ff4ecb;
    border-radius: 50%;
    color: #ff4ecb;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #ff4ecb, 0 0 20px #ff4ecb;
}

.cart-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #ff4ecb, 0 0 30px #ff4ecb;
}

.cart-toggle-btn svg {
    width: 28px;
    height: 28px;
}

/* A bolinha de notificação */
.cart-item-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #00eaff;
    color: #0a0a0f;
    min-width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
    border: 2px solid #0a0a0f;
    
    /* Animação de "pop" */
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Classe para mostrar a bolinha quando tiver itens */
.cart-item-count.visible {
    transform: scale(1);
}

/* --- 2. A LATERAL DESLIZANTE (SIDEBAR) --- */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 90%;
    max-width: 400px;
    height: 100dvh;
    background-color: #0a0a0f;
    border-left: 2px solid #a156ff;
    box-shadow: -10px 0 30px rgba(161, 86, 255, 0.5);
    z-index: 1100;
    padding-bottom: env(safe-area-inset-bottom, 20px);
    display: flex;
    flex-direction: column;

    /* A mágica do slide */
    transform: translateX(110%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Quando não estiver escondida, ela desliza para a posição 0 */
.cart-sidebar:not(.hidden) {
    transform: translateX(0);
}

/* --- ESTRUTURA INTERNA DA SIDEBAR --- */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-title {
    margin: 0;
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
}

.close-cart-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.close-cart-btn:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.cart-items-container {
    flex-grow: 1; /* Faz esta área ocupar todo o espaço disponível */
    overflow-y: auto; /* Adiciona scroll se os itens passarem da altura */
    padding: 20px;
}

.cart-empty-message {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-top: 50px;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

#cart-subtotal-price {
    font-weight: bold;
    color: #39ff14;
    text-shadow: 0 0 8px #39ff14;
}

.checkout-btn {
    width: 100%;
    padding: 15px;
    background-color: #ff4ecb;
    color: #0a0a0f;
    border: none;
    border-radius: 5px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.checkout-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px #ff4ecb;
}

/* --- ESTILOS DOS ITENS DO CARRINHO --- */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cart-item-name {
    font-weight: bold;
    margin: 0 0 5px 0;
}
.cart-item-details {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.cart-item-price {
    font-weight: bold;
    white-space: nowrap; /* Impede que o preço quebre a linha */
    margin-left: 15px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre o preço e o botão */
    margin-left: 15px;
}

.cart-item-remove-btn {
    background: transparent;
    border: 1px solid rgba(255, 45, 45, 0.5); /* Vermelho neon suave */
    color: rgba(255, 45, 45, 0.7);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 26px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-item-remove-btn:hover {
    background-color: #ff2d2d;
    color: #0a0a0f;
    transform: scale(1.1);
    box-shadow: 0 0 10px #ff2d2d;
}

.cart-icon-img {
    width: 18px;
    height: 18px;
    
    /* A MÁGICA ACONTECE AQUI! */
    /* Este filtro vai "pintar" qualquer coisa preta de rosa neon */
    filter: invert(48%) sepia(89%) saturate(1583%) hue-rotate(296deg) brightness(102%) contrast(101%);
}

/* ======================================================= */
/* === CSS DO BOTÃO DO MENU PRINCIPAL (HAMBÚRGUER) === */
/* ======================================================= */

.menu-toggle-btn {
    position: fixed;
    top: 20px;
    left: 20px; /* Posicionado à esquerda */
    width: 35px;
    height: 35px;
    background-color: rgba(0, 234, 255, 0.2); /* Azul ciano */
    border: 2px solid #00eaff;
    border-radius: 50%;
    color: #00eaff; /* Cor do SVG */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #00eaff, 0 0 20px #00eaff;
}

.menu-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #00eaff, 0 0 30px #00eaff;
}

.menu-toggle-btn svg {
    width: 28px;
    height: 28px;
}

/* ======================================================= */
/* === CSS DA LATERAL DO MENU PRINCIPAL === */
/* ======================================================= */

/* --- A ESTRUTURA PRINCIPAL DA SIDEBAR --- */
.main-menu-sidebar {
    position: fixed;
    top: 0;
    left: 0; /* Posicionada à esquerda */
    width: 90%;
    max-width: 350px;
    height: 100dvh;
    background-color: #0a0a0f;
    border-right: 2px solid #00eaff; /* Borda neon azul */
    box-shadow: 10px 0 30px rgba(0, 234, 255, 0.5); /* Sombra para a direita */
    z-index: 1100;
    padding-bottom: env(safe-area-inset-bottom, 20px); /* Espaço para a barra de navegação em dispositivos móveis */
    display: flex;
    flex-direction: column;

    /* A mágica do slide (com a correção da sombra!) */
    transform: translateX(-110%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Quando não estiver escondida, ela desliza para a posição 0 */
.main-menu-sidebar:not(.hidden) {
    transform: translateX(0);
}

/* --- CABEÇALHO E CORPO --- */
/* (Usando seletores mais específicos para garantir que não haja conflito) */
.main-menu-sidebar .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-menu-sidebar .menu-title {
    margin: 0;
    color: #ff4ecb; /* Título em rosa neon */
    text-shadow: 0 0 8px #ff4ecb;
}

.main-menu-sidebar .close-menu-btn {
    background: none; border: none; color: #fff;
    font-size: 2rem; cursor: pointer; opacity: 0.7;
    transition: all 0.2s ease;
}
.main-menu-sidebar .close-menu-btn:hover {
    opacity: 1; transform: rotate(90deg);
}

.menu-body {
    padding: 20px;
}

/* --- ÁREA DO USUÁRIO --- */
.user-area {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.user-action-link, #user-greeting {
    color: #eee;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease;
}
.user-action-link:hover {
    color: #ff4ecb;
    text-shadow: 0 0 8px #ff4ecb;
}

/* --- NAVEGAÇÃO PRINCIPAL --- */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav li a {
    display: block;
    padding: 15px 0;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.main-nav li a:hover {
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
    transform: translateX(10px); /* Efeito de deslocamento no hover */
}

/* --- RODAPÉ DO MENU --- */
.menu-footer {
    margin-top: auto; /* Empurra o rodapé para o fundo! */
    padding: 20px;
    text-align: center;
}

.install-pwa-btn {
    width: 100%;
    padding: 15px;
    margin-bottom: 25px;
    background-color: transparent;
    border: 2px solid #39ff14; /* Verde neon para ação */
    color: #39ff14;
    border-radius: 5px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.install-pwa-btn:hover {
    background-color: #39ff14;
    color: #0a0a0f;
    box-shadow: 0 0 15px #39ff14;
}

.social-link {
    color: #fff;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.social-link:hover {
    opacity: 1;
    color: #ff4ecb;
    filter: drop-shadow(0 0 8px #ff4ecb);
}

/* Adicionar no final do pagina_principal.css */

.user-logged-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espaço entre a saudação e o botão */
}

#user-greeting {
    margin: 0;
}

.logoff-btn {
    background: transparent;
    border: 1px solid #ff2d2d; /* Vermelho neon */
    color: #ff2d2d;
    padding: 8px 25px;
    border-radius: 5px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logoff-btn:hover {
    background-color: #ff2d2d;
    color: #0a0a0f;
    box-shadow: 0 0 10px #ff2d2d;
}

/* --- SEÇÃO DE LOCALIZAÇÃO DA LOJA --- */
.store-location-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(161, 86, 255, 0.3); /* Roxo neon suave */
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px; /* Adiciona um espaço antes do carrossel */
}

.location-info {
    /* Ocupa o espaço disponível */
    flex-grow: 1;
}

.location-title {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.location-name {
    margin: 5px 0 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #a156ff; /* Roxo neon */
    text-shadow: 0 0 8px #a156ff;
}

.location-change-link {
    color: #00eaff; /* Azul ciano */
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.location-change-link:hover {
    background-color: rgba(0, 234, 255, 0.2);
    text-shadow: 0 0 8px #00eaff;
}
/* Adicionar em pagina_principal.css */

/* --- ESTILO DO BOTÃO DE ADICIONAR NO MODAL (ESTADO DE SUCESSO) --- */

.add-to-cart-modal-btn {
    position: relative; /* Necessário para o ícone de check */
    overflow: hidden;   /* Esconde o conteúdo que sai do botão */
}

/* Quando o botão estiver no estado de sucesso */
.add-to-cart-modal-btn.success {
    background-color: #39ff14; /* Verde neon */
    box-shadow: 0 0 15px #39ff14, 0 0 25px #39ff14;
    animation: pulse-green 0.5s ease;
}

/* Esconde o texto e o preço quando estiver no estado de sucesso */
.add-to-cart-modal-btn.success span {
    opacity: 0;
}

/* O ícone de check (começa invisível) */
.add-to-cart-modal-btn::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Começa pequeno e no centro */
    font-size: 2rem;
    color: #0a0a0f;
    transition: transform 0.3s ease;
}

/* Mostra o ícone de check quando o botão estiver no estado de sucesso */
.add-to-cart-modal-btn.success::after {
    transform: translate(-50%, -50%) scale(1); /* Animação de "pop" */
}

/* Animação de pulsar verde */
@keyframes pulse-green {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animação para os itens do menu */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Prepara os itens para a animação quando o menu está visível */
.main-menu-sidebar:not(.hidden) .main-nav li {
    animation: slideInFromLeft 0.5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0; /* Começa invisível */
}

/* A mágica do atraso para cada item! */
.main-menu-sidebar:not(.hidden) .main-nav li:nth-child(1) { animation-delay: 0.1s; }
.main-menu-sidebar:not(.hidden) .main-nav li:nth-child(2) { animation-delay: 0.2s; }
.main-menu-sidebar:not(.hidden) .main-nav li:nth-child(3) { animation-delay: 0.3s; }
/* Adicione mais se tiver mais itens! */

/* Estilos para agrupar os ícones sociais */
.menu-social-links {
    display: flex;
    justify-content: center;
    gap: 25px; /* Espaço entre os ícones */
}

/* Troca a cor do hover do ícone do WhatsApp */
.menu-social-links a[aria-label="Nosso WhatsApp"]:hover {
    color: #39ff14; /* Verde neon */
    filter: drop-shadow(0 0 8px #39ff14);
}

/* --- ANIMAÇÃO PARA A COMANDA VIP (VERSÃO ANTI-PISCADA) --- */

/* Esconde a barra de rolagem que aparece durante a animação */
.cart-items-container {
    overflow-x: hidden;
}

/* A animação em si, continua a mesma */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* A REGRA DE OURO! */
/* Itens dentro da comanda aberta COMEÇAM invisíveis. */
.cart-sidebar:not(.hidden) .cart-item {
    opacity: 0;
}

/* Quando a animação é disparada, ela assume o controle e os torna visíveis. */
/* A propriedade 'forwards' da animação garante que eles permaneçam visíveis (opacity: 1) no final. */
.cart-sidebar.start-item-animation .cart-item {
    animation: slideInFromRight 0.5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* O atraso para cada item continua valendo */
.cart-sidebar.start-item-animation .cart-item:nth-child(1) { animation-delay: 0.1s; }
.cart-sidebar.start-item-animation .cart-item:nth-child(2) { animation-delay: 0.2s; }
.cart-sidebar.start-item-animation .cart-item:nth-child(3) { animation-delay: 0.3s; }
.cart-sidebar.start-item-animation .cart-item:nth-child(4) { animation-delay: 0.4s; }

/* Adicione no final do pagina_principal.css */

/* --- ESTILO DA BOLINHA DE NOTIFICAÇÃO DE PEDIDOS --- */

.order-status-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #0a0a0f; /* Borda da cor do fundo para destacar */
    
    /* Animação de "pop" para aparecer */
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.order-status-dot.visible {
    transform: scale(1);
}

/* --- CORES E EFEITOS --- */

.status-amarelo {
    background-color: #ffe85e;
    box-shadow: 0 0 8px #ffe85e, 0 0 12px #ffe85e;
    animation: blink-neon 1.5s infinite; /* A animação de piscar! */
}

.status-verde {
    background-color: #39ff14;
    box-shadow: 0 0 8px #39ff14;
}

.status-vermelho {
    background-color: #ff2d2d;
    box-shadow: 0 0 8px #ff2d2d;
}

/* A animação que faz a bolinha piscar */
@keyframes blink-neon {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--glow-color), 0 0 12px var(--glow-color);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 12px var(--glow-color), 0 0 20px var(--glow-color);
    }
}

/* Definindo a cor da animação para cada status */
.status-amarelo { --glow-color: #ffe85e; }

/* --- AJUSTE PARA A BOLINHA NO LINK "MEUS PEDIDOS" --- */

/* 1. Transforma o link em um container para a bolinha */
#my-orders-link {
    position: relative;
    /* Adiciona um espaço à direita para a bolinha não ficar em cima do texto */
    padding-right: 25px; 
}

/* 2. Posiciona a bolinha dentro do link */
#my-orders-dot {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* As outras classes (.visible, .status-cor) já cuidam do resto! */
}

/* --- ANIMAÇÕES DE SCROLL (FADE-IN) --- */

/* 1. O estado inicial de todo elemento que vai ser animado:
   Ele começa invisível e um pouquinho para baixo. */
.fade-in-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. O estado final, quando ele se torna visível:
   Totalmente opaco e na sua posição original. */
.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

main {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* --- EFEITO DE CARREGAMENTO DE IMAGEM (SKELETON) --- */

/* 1. O container que será nosso "esqueleto" */
.image-container {
    background-color: rgba(255, 255, 255, 0.05); /* Um pouco mais claro que o fundo */
    position: relative;
    overflow: hidden; /* Garante que nada escape */
    /* Animação de pulsação para o esqueleto */
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}

@keyframes skeleton-pulse {
    0% { background-color: rgba(255, 255, 255, 0.05); }
    50% { background-color: rgba(255, 255, 255, 0.08); }
    100% { background-color: rgba(255, 255, 255, 0.05); }
}

/* 2. A imagem começa invisível */
.image-container img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* 3. Quando o container recebe a classe 'loaded', a mágica acontece! */
.image-container.loaded {
    animation: none; /* Para a animação do esqueleto */
    background-color: transparent; /* Remove o fundo do esqueleto */
}

.image-container.loaded img {
    opacity: 1; /* A imagem aparece suavemente! */
}

/* --- SKELETON LOADER PARA O MODAL DE PRODUTO --- */

.modal-skeleton {
    display: none; /* Começa escondido por padrão */
    width: 100%;
    flex-direction: column;
    align-items: center;
}

/* Quando o modal estiver carregando, o esqueleto aparece... */
.product-modal-content.loading .modal-skeleton {
    display: flex;
}
/* ...e o conteúdo real some. */
.product-modal-content.loading #modal-real-content {
    display: none;
}

/* Estilos dos elementos do esqueleto */
.skeleton-image {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    margin-bottom: 20px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
.skeleton-title {
    width: 60%;
    height: 30px;
    margin-bottom: 15px;
    border-radius: 5px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
.skeleton-text {
    width: 90%;
    height: 18px;
    margin-bottom: 10px;
    border-radius: 5px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
.skeleton-text.short {
    width: 70%;
}
.skeleton-options {
    width: 100%;
    height: 100px;
    margin-top: 20px;
    border-radius: 5px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}

/* Reutilizando a animação que já temos! */
@keyframes skeleton-pulse {
    0% { background-color: rgba(255, 255, 255, 0.05); }
    50% { background-color: rgba(255, 255, 255, 0.08); }
    100% { background-color: rgba(255, 255, 255, 0.05); }
}