:root { --bg-color: #121212; --text-color: #ffffff; }
.light-mode { --bg-color: #f4f4f4; --text-color: #121212; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: sans-serif;
    text-align: center;
    margin: 0;
    padding: 10px;
    min-height: 100vh; /* Usa min-height em vez de height para permitir expansão */
    width: 100%;       /* Usa 100% em vez de 100vw para evitar estouro */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

header { 
    width: 100%; 
    height: 50px; /* Altura fixa para o header do toggle */
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
}
.background-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background-image: url('/assets/Sushi.png'); /* Caminho corrigido */
    background-size: cover; 
    background-position: center; 
    opacity: 0.6; 
    z-index: -1; 
}

/* Toggle Alinhado à Direita */
.toggle-wrapper { display: flex; }
.toggle-container { display: flex; align-items: center; gap: 8px; }
.icon-cell { width: 20px; display: flex; justify-content: center; }
.theme-icon { color: var(--text-color); transition: opacity 0.3s; }
.hidden { visibility: hidden; opacity: 0; }

/* Switch */
.switch { position: relative; display: inline-block; width: 52px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #0b1117; border: 2px solid #ffffff; transition: .4s; border-radius: 36px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s; }
input:checked + .slider { background-color: #1a252f; }
input:checked + .slider:before { transform: translateX(24px); }

.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    height: 145px; /* Altura fixa para reservar o espaço (um pouco maior que a logo) */
    overflow: hidden; /* Garante que nada que ultrapasse esse tamanho empurre o resto */
}

.logo-main {
    width: 280px; 
    height: 140px; /* Altura fixa igual ao container */
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease; /* Transição suave na troca */
}

.opcoes { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.btn-opcao img { width: 120px; border-radius: 20px; }
#botoes-acao { display: flex; flex-direction: column; gap: 15px; }
.btn-acao { padding: 15px 40px; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; }
.ifood { background: #ea1d2c; color: white; }
.whatsapp { background: #25d366; color: white; }
footer { margin-top: auto; padding: 10px; font-size: 0.75rem; color: #888; }