/* Neumorphism (Soft UI) Global Overrides */

body, html, .app-container {
    background-color: var(--neu-bg) !important;
    background-image: none !important;
}

.banner-container {
    background: var(--neu-header-bg) !important;
    background-image: none !important;
    z-index: 100 !important;
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s;
    z-index: 1;
}

.banner-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

#salgados {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.overlay {
    z-index: 2000 !important;
}

.modal-categorias, .modal-produto, .modal-finalizar, .modal-mix-salgados, .modal-porcao {
    z-index: 2500 !important;
}

.categoria-titulo {
    font-size: 0.9rem;
    margin: 15px 10px 10px 10px;
    padding-left: 8px;
    border-left: 3px solid var(--neu-primary);
    color: var(--neu-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
}

.categoria-section {
    margin-bottom: 30px;
    scroll-margin-top: 20px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.categoria-section.view-hidden {
    display: none !important;
    opacity: 0;
    transform: translateY(20px);
}

.categoria-section.view-active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    animation: appViewEnter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes appViewEnter {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.carrinho-container {
    background-color: var(--neu-window-bg) !important;
    border: none !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 -5px 12px var(--neu-window-shadow-dark), 0 -10px 20px var(--neu-window-shadow-light) !important;
    z-index: 2200 !important;
}

.modal-content, .carrinho-item, .adc-item {
    background-color: var(--neu-window-bg) !important;
    border: none !important;
    background-image: none !important;
    box-shadow: 3px 3px 6px var(--neu-window-shadow-dark), -3px -3px 6px var(--neu-window-shadow-light) !important;
    border-radius: 10px !important;
    margin-bottom: 5px;
}

.salgado-item {
    background-color: var(--neu-window-bg) !important;
    border: none !important;
    background-image: none !important;
    box-shadow: 0 4px 15px var(--neu-window-shadow-dark) !important;
    border-radius: 16px !important;
}



.adc-item {
    padding: 6px !important;
    margin-bottom: 4px;
}

.salgado-item:hover {
    box-shadow: 0 8px 25px var(--neu-window-shadow-dark) !important;
    transform: translateY(-2px) !important;
}

.modal-content {
    box-shadow: 6px 6px 12px var(--neu-window-shadow-dark), -6px -6px 12px var(--neu-window-shadow-light) !important;
    border: 1px solid rgba(255,255,255,0.02) !important;
    padding: 12px !important;
}

/* Inset styles for form inputs and quantities (Pressed effect) */
.quantidade-controle, .quantidade-controle-adc, .modal-form-group input, .modal-adicionais, .modal-form-summary {
    background-color: var(--neu-window-bg) !important;
    border: none !important;
    box-shadow: inset 5px 5px 10px var(--neu-window-shadow-dark), inset -5px -5px 10px var(--neu-window-shadow-light) !important;
    border-radius: 12px !important;
    color: var(--neu-text) !important;
}

.modal-form-group input {
    padding: 10px !important;
    font-size: 0.9rem !important;
}

.quantidade-controle-adc input {
    color: var(--neu-text) !important;
}

/* Buttons (Extruded effect) */
.btn-adicionar, .btn-finalizar, .modal-btn-confirmar, .btn-remover, .modal-radio, .modal-btn-cancelar, #ver-carrinho-btn {
    background: var(--neu-btn-bg) !important;
    color: var(--neu-btn-text) !important;
    border: none !important;
    box-shadow: 4px 4px 8px var(--neu-btn-shadow-dark), -4px -4px 8px var(--neu-btn-shadow-light) !important;
    transition: all 0.2s ease !important;
    font-weight: 700 !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
}

.btn-adicionar:hover, .btn-finalizar:hover, .modal-btn-confirmar:hover {
    box-shadow: 4px 4px 8px var(--neu-btn-shadow-dark), -4px -4px 8px var(--neu-btn-shadow-light) !important;
    transform: translateY(1px) !important;
}

.btn-adicionar:active, .btn-finalizar:active, .modal-btn-confirmar:active, .modal-btn-cancelar:active {
    box-shadow: inset 4px 4px 8px var(--neu-btn-shadow-darker), inset -4px -4px 8px var(--neu-btn-shadow-light) !important;
    transform: translateY(2px) !important;
}

/* Specifically for quantity up/down buttons */
.quantidade-controle button, .quantidade-controle-adc button {
    text-shadow: 1px 1px 2px var(--neu-shadow-light);
    color: var(--neu-primary) !important;
}

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.splash-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.splash-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Floating Mascot */
.mascot-container {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    transition: transform 0.5s ease;
}

.mascot-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* Animations */
.mascot-fade-in {
    animation: mascotFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.mascot-fade-out {
    animation: mascotFadeOut 0.5s ease forwards;
}

@keyframes mascotFadeIn {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes mascotFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
}



.produto-detalhe-imagem {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 20px 0;
    width: 100%;
}

.produto-detalhe-imagem img {
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(3px 3px 6px var(--neu-shadow-dark));
    transition: transform 0.3s ease;
}

.produto-detalhe-imagem img:hover {
    transform: scale(1.05);
}

.mascot-bottom-right { bottom: 85px; right: 15px; }
.mascot-bottom-left  { bottom: 85px; left: 15px; }
.mascot-top-right    { top: 15px; right: 15px; }
.mascot-top-left     { top: 15px; left: 15px; }

/* Typography adjusting for Soft UI */
h2, span.nome, .preco, .adc-preco, .brand-name, .carrinho-total span, .modal-produto h2, .modal-finalizar h2, body {
    color: var(--neu-text) !important; 
    text-shadow: 1px 1px 1px var(--neu-shadow-light);
    font-weight: 700;
}



.brand-name {
    color: #fff !important;
    text-shadow: none;
}

.preco {
    color: var(--neu-primary) !important;
    text-shadow: 1px 1px 2px var(--neu-shadow-light);
}



/* Descriptions and subtitles */
.descricao, .salgado-item .descricao, .modal-produto-desc, .modal-help-text, p {
    color: var(--neu-text-desc) !important;
    text-shadow: none !important;
}

/* Hide default shadow states that conflict */
.salgado-item::before, .modal-porcao-item::before {
    display: none !important;
}