/* =====================================================================
   PEDEJÁ — ESTILO GLOBAL DO SITE DO CLIENTE (carregado pelo header.php)
   - fonte do sistema
   - barra de navegação de baixo (#app_bar_geral) em todas as páginas
   - carrinho flutuante (#carrinho_floating)
   A cor da marca chega em --pj-marca / --pj-marca-txt (definidas no header.php).
   As páginas antigas não precisaram mudar: tudo é aplicado pelos ids que já existem.
   ===================================================================== */

:root {
	--pj-fonte: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--pj-barra-nav-h: 62px;
}

/* ---------- fonte: substitui Montserrat/Lato/Open Sans do CSS antigo ---------- */
html body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body span, body b, body strong, body small, body li,
body label, body input, body textarea, body select, body button,
body td, body th, body div, body section {
	font-family: var(--pj-fonte) !important;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------- barra de navegação de baixo ---------- */
section#app_bar_geral {
	display: flex !important;
	align-items: stretch;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: calc(var(--pj-barra-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: rgba(255, 255, 255, .97) !important;
	border-top: 0 !important;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, .06), 0 -8px 24px -12px rgba(0, 0, 0, .18);
	z-index: 60;
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

section#app_bar_geral > a,
section#app_bar_geral > section {
	flex: 1;
	display: block;
	min-width: 0;
	text-decoration: none;
}

section#app_bar_geral section#app_bar_ul {
	width: 100% !important;
	height: 100% !important;
	float: none !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: transparent !important;
	color: #8e8e93;
	transition: color .15s ease;
}

section#app_bar_geral section#app_bar_ul:active { background: transparent !important; }
section#app_bar_geral section#app_bar_ul::after { background: none; }

/* o app_bar.php antigo embrulha o ícone num "selecionado" cinza */
section#app_bar_geral section#app_bar_ul_selecionado {
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	display: contents;
}

section#app_bar_geral #app_bar_ul_icone {
	position: relative !important;
	left: auto !important;
	float: none !important;
	width: 52px !important;
	height: 30px !important;
	margin: 0 !important;
	border-radius: 999px;
	opacity: 1 !important;
	background: currentColor !important;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 23px 23px;
	mask-size: 23px 23px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ícones novos, escolhidos pela imagem antiga que a página usa */
section#app_bar_geral #app_bar_ul_icone[style*="home_svg"] {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
section#app_bar_geral #app_bar_ul_icone[style*="user_icon"] {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
section#app_bar_geral #app_bar_ul_icone[style*="order_svg"] {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
}
section#app_bar_geral #app_bar_ul_icone[style*="info_svg"] {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");
}
section#app_bar_geral #app_bar_ul_icone[style*="cardapio_svg"] {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
}

/* nome embaixo do ícone (navegadores sem :has() só mostram o ícone) */
section#app_bar_geral section#app_bar_ul::after {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .1px;
	font-family: var(--pj-fonte);
}
section#app_bar_geral section#app_bar_ul:has([style*="home_svg"])::after { content: 'Início'; }
section#app_bar_geral section#app_bar_ul:has([style*="user_icon"])::after { content: 'Conta'; }
section#app_bar_geral section#app_bar_ul:has([style*="order_svg"])::after { content: 'Pedidos'; }
section#app_bar_geral section#app_bar_ul:has([style*="info_svg"])::after { content: 'Info'; }
section#app_bar_geral section#app_bar_ul:has([style*="cardapio_svg"])::after { content: 'Cardápio'; }

/* aba atual: cor da marca e "pílula" atrás do ícone */
section#app_bar_geral section#app_bar_ul.selecionado,
section#app_bar_geral section#app_bar_ul:has(#app_bar_ul_selecionado) {
	color: var(--pj-marca, #1d1d1f);
}
section#app_bar_geral section#app_bar_ul.selecionado::before,
section#app_bar_geral section#app_bar_ul:has(#app_bar_ul_selecionado)::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 30px;
	margin: -22px 0 0 -26px;
	border-radius: 999px;
	background: var(--pj-marca, #1d1d1f);
	opacity: .12;
}

/* ---------- carrinho flutuante (acima da barra) ---------- */
#carrinho_floating {
	display: flex !important;
	align-items: center;
	gap: 12px;
	left: 12px !important;
	right: 12px;
	bottom: calc(var(--pj-barra-nav-h) + 10px + env(safe-area-inset-bottom, 0px)) !important;
	width: auto !important;
	max-width: 560px;
	height: 58px !important;
	margin: 0 auto;
	padding: 0 18px 0 12px;
	border-radius: 18px !important;
	color: var(--pj-marca-txt, #fff);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45) !important;
	cursor: pointer;
	transition: transform .15s ease, opacity .2s ease;
}
#carrinho_floating:active { transform: scale(.98); }

/* sacola vazia: some (volta sozinha quando um item é adicionado) */
#carrinho_floating.pj-vazio {
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
}

#carrinho_floating #carrinho_floating_icon {
	float: none !important;
	flex-shrink: 0;
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, .18) url(../img/carrinho_branco.png) center / 20px no-repeat !important;
}

#carrinho_floating #mostrar_qnt_carrinho_mobile {
	left: 38px !important;
	top: 7px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 999px !important;
	padding: 2px;
}

#carrinho_floating #mostrar_qnt_carrinho_mobile_escuro p {
	font-size: 11px !important;
	font-weight: 800 !important;
	height: auto !important;
	line-height: 1;
}

#carrinho_floating h3.ver_carrinho,
#carrinho_floating h3.valor_total_carrinho {
	position: static !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	color: inherit !important;
	font-size: 15px !important;
	line-height: 1.2;
}
#carrinho_floating h3.ver_carrinho { flex: 1; text-align: left !important; font-weight: 600 !important; }
#carrinho_floating h3.valor_total_carrinho { font-weight: 800 !important; white-space: nowrap; }

section#margin-bottom { height: 150px !important; }

/* ---------- menu lateral (header_moderno.php) ---------- */
#menu_lateral_back {
	background: rgba(15, 15, 18, .5) !important;
	-webkit-backdrop-filter: blur(3px) !important;
	backdrop-filter: blur(3px) !important;
}

#menu_lateral_back #menu_lateral_fecha { width: 100% !important; height: 100% !important; }

#menu_lateral.pj-ml {
	display: flex !important;
	flex-direction: column;
	top: 0;
	right: 0;
	width: min(86vw, 340px) !important;
	height: 100% !important;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	overflow-y: auto;
	border-radius: 24px 0 0 24px;
	background: #fff !important;
	box-shadow: -12px 0 40px -12px rgba(0, 0, 0, .35) !important;
	color: #1d1d1f;
	transition: transform .32s cubic-bezier(.2, .8, .2, 1) !important;
}

.pj-ml a { color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pj-ml svg { display: block; }

.pj-ml__topo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .18)), var(--pj-marca, #1d1d1f);
	color: var(--pj-marca-txt, #fff);
	border-radius: 24px 0 0 0;
}

.pj-ml__logo {
	width: 58px;
	height: 58px;
	padding: 4px;
	border-radius: 16px;
	background: #fff;
	object-fit: contain;
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
}

.pj-ml__loja {
	padding-right: 40px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
}

.pj-ml__fechar {
	position: absolute;
	top: calc(16px + env(safe-area-inset-top, 0px));
	right: 16px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	color: inherit;
}
.pj-ml__fechar svg { width: 17px; height: 17px; }

/* cliente logado */
.pj-ml__usuario {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 16px 4px;
	padding: 12px 14px;
	border-radius: 16px;
	background: #f4f4f6;
}

.pj-ml__avatar {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pj-marca, #1d1d1f);
	color: var(--pj-marca-txt, #fff);
	font-size: 17px;
	font-weight: 800;
}

.pj-ml__usuario-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj-ml__usuario-txt strong { font-size: 15px; font-weight: 700; }
.pj-ml__usuario-txt small { font-size: 12.5px; color: #6e6e73; }

/* visitante */
.pj-ml__convite {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 16px 16px 4px;
	padding: 16px;
	border-radius: 16px;
	background: #f4f4f6;
}
.pj-ml__convite strong { font-size: 15px; font-weight: 700; }
.pj-ml__convite small { font-size: 12.5px; line-height: 1.4; color: #6e6e73; }

.pj-ml__entrar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	margin-top: 10px;
	border-radius: 12px;
	background: var(--pj-marca, #1d1d1f);
	color: var(--pj-marca-txt, #fff) !important;
	font-size: 14px;
	font-weight: 700;
}

/* itens */
.pj-ml__lista { display: flex; flex-direction: column; padding: 10px 8px; }

.pj-ml__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 54px;
	padding: 8px 12px;
	border-radius: 14px;
	transition: background .12s ease;
}
.pj-ml__item:active { background: #f4f4f6; }

.pj-ml__item-icone {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #f4f4f6;
	color: #3a3a3c;
}
.pj-ml__item-icone svg { width: 19px; height: 19px; }

.pj-ml__item-texto { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }

.pj-ml__item-seta { color: #c7c7cc; flex-shrink: 0; }
.pj-ml__item-seta svg { width: 16px; height: 16px; }

.pj-ml__sair {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: auto 20px 20px;
	padding: 14px 4px 0;
	border-top: 1px solid #ececf0;
	color: #b42318 !important;
	font-size: 14.5px;
	font-weight: 700;
}
.pj-ml__sair svg { width: 19px; height: 19px; }