/**
 * Efeito de "revelar footer" - o cartão do cardápio encolhe/sobe e o
 * menu inferior estreita quando você chega perto do fim da página,
 * revelando o rodapé por baixo. Inspirado em
 * https://codepen.io/mfritsch/pen/KdKoKQ, adaptado pro shell de scroll
 * interno do tema (.menubee-nav-floting tem overflow:scroll próprio).
 *
 * Estrutura (ver index.php):
 *   #mbShrinkOuter (relative)
 *     #mbShrinkBacking (absolute, inset:0, verde - só do tamanho dos
 *       dois itens abaixo juntos, não da página toda)
 *     #mbShrinkWrap (o cartão - hero + cardápio)
 *     .menubar-area.footer-fixed (o menu, position:sticky)
 *   footer
 *
 * É um liga/desliga (classe .mb-tight), não um valor contínuo - o JS
 * só escreve no DOM UMA VEZ quando cruza o limite (ver
 * menubee-footer-reveal.js), e a transição abaixo cuida de deixar
 * essa troca suave. É a mesma estratégia do modelo de referência.
 */

/* A altura repete 100vh (fallback) e depois 100dvh - no Chrome mobile,
   100vh não conta direito o espaço quando a barra de endereço/navegação
   do Android aparece ou some, fazendo o menu ficar embaixo dela; 100dvh
   é a unidade feita pra resolver exatamente isso. Também descontamos a
   altura da barra de status da loja (fechada/fechando/pausada) - ela
   fica ACIMA de .menubee-nav-floting, então sem descontar, os 100dvh
   ficavam maiores que o espaço realmente sobrando na tela, empurrando
   o menu (grudado embaixo) pra fora da área visível. --altura-barra-status
   já é mantida pelo próprio site (assets/js/api.js), só reaproveitamos. */
.menubee-nav-floting {
	height: 100vh;
	height: calc(100dvh - var(--altura-barra-status, 0px));
}

/* mbShrinkOuter envolve o cartão + o menu; mbShrinkBacking é uma camada
   verde exatamente do tamanho dos dois juntos (nem mais, nem menos) -
   escopada assim de propósito, pra NÃO aparecer lá no topo da página
   quando alguém puxa rápido demais e estoura o scroll elástico. */
#mbShrinkOuter {
	position: relative;
}
#mbShrinkBacking {
	position: absolute;
	inset: 0;
	background: #051f15; /* reserva - navegadores sem suporte a color-mix() */
	background: color-mix(in srgb, var(--primary, #04764E) 55%, black 45%);
	z-index: 0;
}

#mbShrinkWrap {
	position: relative;
	z-index: 1;
	background: #fff;
	transform-origin: center bottom;
	transition: transform .3s ease-out, border-radius .3s ease-out, box-shadow .3s ease-out;
	will-change: transform;
}
.menubee-nav-floting.mb-tight #mbShrinkWrap {
	transform: scale(0.94);
	border-radius: 24px;
	box-shadow: 0 26px 44px rgba(0,0,0,.28);
	cursor: pointer;
}

/* O menu inferior "gruda" no fim da tela normalmente (position:sticky),
   sincronizado automaticamente pelo navegador com o scroll - a posição
   em si nunca dependeu de JS. Largura/margem são aplicadas via JS
   direto no elemento (ver .js) porque a regra de CSS equivalente não
   estava vencendo a cascata do tema em alguns navegadores; a
   transição abaixo ainda funciona normalmente em cima de um style
   inline, então a troca fica suave do mesmo jeito. */
.menubee-nav-floting .menubar-area.footer-fixed {
	position: sticky !important;
	bottom: 0 !important;
	border-radius: 0 0 20px 20px;
	overflow: hidden;
	box-shadow: none !important;
	transition: width .3s ease-out, margin .3s ease-out;
}

.mb-store-footer {
	position: relative;
	z-index: 1;
	background: #051f15; /* reserva - navegadores sem suporte a color-mix() */
	background: color-mix(in srgb, var(--primary, #04764E) 55%, black 45%);
	color: rgba(255,255,255,.82);
	text-align: center;
	padding: 36px 24px calc(36px + env(safe-area-inset-bottom, 0px) + 60px);
}

.mb-store-footer .mb-footer-logo {
	width: 54px; height: 54px; border-radius: 16px; overflow: hidden;
	margin: 0 auto 12px; background: #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.mb-store-footer .mb-footer-logo img { width: 100%; height: 100%; object-fit: cover; }

.mb-store-footer h6 { color: #fff; font-weight: 700; margin-bottom: 4px; font-size: 15px; }
.mb-store-footer p.mb-footer-tagline { font-size: 12.5px; margin-bottom: 20px; color: rgba(255,255,255,.55); }

.mb-store-footer .mb-footer-social { display: flex; justify-content: center; gap: 14px; margin-bottom: 20px; }
.mb-store-footer .mb-footer-social a {
	width: 38px; height: 38px; border-radius: 10px;
	background: rgba(255,255,255,.09);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 17px;
	transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.mb-store-footer .mb-footer-social a:active { transform: scale(0.92); opacity: .85; background: rgba(255,255,255,.2); }

.mb-store-footer .mb-footer-copy { font-size: 11px; color: rgba(255,255,255,.38); }
.mb-store-footer .mb-footer-copy a { color: rgba(255,255,255,.6); text-decoration: underline; }
.mb-store-footer .mb-footer-copy a:active { opacity: .7; }

.mb-footer-actions { display: flex; gap: 10px; margin-bottom: 22px; }
.mb-footer-action-btn {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
	background: rgba(255,255,255,.09); color: #fff; border: none; border-radius: 12px;
	padding: 11px 10px; font-size: 12.5px; font-weight: 600;
	transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.mb-footer-action-btn:active { transform: scale(0.97); opacity: .85; background: rgba(255,255,255,.18); }
.mb-footer-action-btn i { font-size: 15px; }

/* O CSS do modal "Ver horário" (.mb-horario-*) mudou pra partials/head.php -
   ele agora é compartilhado por todas as páginas do site, não só esta. */

/* Em telas largas (desktop/tablet), a página inteira fica limitada
   numa largura de "celular" centralizada, com uma margem neutra dos
   lados - em vez de esticar o conteúdo mobile pela janela toda. */
@media (min-width: 576px) {
	.menubee-nav-floting {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0 0 60px rgba(0,0,0,.2);
	}
}