/*
 * TEMA PRETO E VERMELHO, LAYOUT DE CATÁLOGO DE DELIVERY
 * Carregado depois de delivry.css. Para ajustar as cores do site inteiro,
 * mude só as variáveis abaixo.
 */
:root {
	color-scheme: dark;
	--fundo: #0a0a0b;
	--superficie: #161618;
	--superficie-2: #212124;
	--borda: #303035;
	--borda-forte: #45454c;
	--texto: #f5f5f6;
	--texto-suave: #b4b4bb;
	--vermelho: #d10f24;
	--vermelho-escuro: #a50c1d;
	--vermelho-claro: #ff4a5c;
	--aviso: #1e0b0e;
	--margem: 30px;
}

/* ---------- base ---------- */
html,
body {
	background: var(--fundo);
	color: var(--texto);
}

a {
	color: var(--texto);
}

h1,
h2 {
	color: var(--texto);
}

::-webkit-scrollbar-track {
	background: var(--fundo);
	box-shadow: none;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
	background: var(--borda-forte);
}

.btn {
	background: var(--vermelho);
	color: #ffffff;
	font-weight: 600;
	border-radius: 8px;
	box-shadow: none;
}

.btn:hover {
	opacity: 1;
	background: var(--vermelho-escuro);
	box-shadow: none;
}

a.voltar {
	background: var(--superficie);
	color: var(--texto);
	font-weight: 600;
	border: 1px solid var(--borda);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

a.voltar i {
	color: var(--vermelho-claro);
}

a.voltar:hover {
	opacity: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

/* ---------- topo ---------- */
header#topo {
	background: var(--fundo);
	border-bottom: 0;
}

header#topo .cover {
	height: 200px;
	background-color: var(--superficie-2);
	/* Amplia e alinha à direita para esconder o logo embutido na foto da capa. */
	background-size: max(170%, 640px) auto;
	background-position: right center;
}

header#topo .borda {
	display: none;
}

header#topo .cover .logo {
	top: auto;
	bottom: -34px;
	left: max(var(--margem), calc(50% - 600px + var(--margem)));
	width: 76px;
	height: 76px;
	background: #000000;
	border: 2px solid var(--vermelho);
	box-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

header#topo .info {
	position: relative;
	align-items: flex-start;
	text-align: left;
	min-height: 60px;
	padding: 10px 48px 6px 90px;
}

header#topo .info h1 {
	color: var(--texto);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.2px;
}

header#topo .info .icones {
	position: absolute;
	top: 8px;
	right: 0;
	margin: 0;
}

header#topo .info .icones a {
	width: 36px;
	height: 36px;
	border: 1px solid var(--borda);
	background: var(--superficie);
	color: var(--vermelho-claro);
	font-size: 15px;
}

header#topo .info .icones a:hover {
	border-color: var(--borda-forte);
	color: var(--vermelho-claro);
}

header#topo .info .detalhe {
	color: var(--texto-suave);
	flex-wrap: wrap;
	justify-content: flex-start;
	font-size: 13px;
}

#trocarCidade,
#trocarUnidade,
#unidadePedido a {
	color: var(--vermelho-claro);
	font-weight: 500;
}

.aberto {
	position: static;
	color: var(--texto-suave);
	background: none;
	border: 0;
	font-size: 13px;
	font-weight: 500;
	margin: 2px 0 0;
	padding: 0;
}

.aberto .btn-pisca {
	color: var(--vermelho-claro);
	font-size: 8px;
	vertical-align: 1px;
}

.fechado {
	position: static;
	margin: 4px 0 0;
}

/* Abas de categoria */
header#topo #menuCategorias {
	background: var(--fundo);
	border-bottom: 1px solid var(--borda);
	margin-top: 8px;
	padding: 0;
}

header#topo #menuCategorias.fixed {
	margin-top: 0;
	padding: 0;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

header#topo #menuCategorias .container {
	justify-content: flex-start;
}

header#topo .categorias {
	justify-content: flex-start;
	gap: 24px;
}

header#topo .categorias a,
header#topo .categorias a:hover {
	color: var(--texto-suave);
	font-size: 14px;
	font-weight: 500;
	padding: 12px 0 10px;
	border-top: 0;
	border-bottom: 2px solid transparent;
}

header#topo .categorias a:hover,
header#topo .categorias a.ativo,
header#topo .categorias a:only-child {
	color: var(--vermelho-claro);
	border-top: 0;
	border-bottom-color: var(--vermelho);
}

/* ---------- avisos ---------- */
.alert,
.alert-info {
	background-color: var(--aviso);
	color: var(--texto);
	outline: 0;
	text-align: left;
	text-shadow: none;
	border-radius: 8px;
	padding: 10px 14px;
}

/* ---------- cardápio ---------- */
main#lista h2 {
	color: var(--texto);
	font-size: 20px;
	font-weight: 600;
	margin: 22px 0 12px;
}

main#lista .categoria {
	clear: both;
}

main#lista .produtos {
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	gap: 16px;
}

main#lista .produtos .item {
	display: flex;
	min-width: 0;
}

main#lista .produtos .item:last-child a {
	margin-bottom: 0;
}

main#lista .produtos .item a {
	gap: 16px;
	padding: 16px;
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 8px;
	transition: border-color .15s, background-color .15s;
	-webkit-tap-highlight-color: transparent;
}

main#lista .produtos .item a:active {
	background: var(--superficie-2);
}

@media (hover: hover) {
	main#lista .produtos .item a:hover {
		background: var(--superficie);
		border: 1px solid var(--borda-forte);
	}
}

main#lista .produtos .item .texto {
	flex: 1;
	min-width: 0;
	padding-right: 0;
	color: var(--texto-suave);
}

main#lista .produtos .item .texto h3 {
	color: var(--texto);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 4px;
}

main#lista .produtos .item .texto span {
	font-weight: 300;
}

/* Preço atual primeiro, em destaque; preço anterior riscado ao lado. */
.linhaPreco {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
}

main#lista .produtos .item .texto span.precoPromocao {
	color: var(--texto-suave);
	font-size: 13px;
}

main#lista .produtos .item .texto span.preco {
	color: var(--vermelho-claro);
	font-size: 16px;
	font-weight: 500;
}

main#lista .produtos .item figure {
	width: 104px;
	height: 104px;
	border: 0;
	border-radius: 8px;
}

/* ---------- rodapé ---------- */
main#lista {
	padding-bottom: 0;
}

main#lista footer {
	position: static;
	clear: both;
	background: none;
	color: var(--texto-suave);
	border-top: 1px solid var(--borda);
	margin-top: 28px;
	padding: 18px 8px 24px !important;
	font-weight: 400;
}

main#lista footer a {
	color: var(--texto-suave) !important; /* o HTML define branco inline */
}

/* ---------- painel de informações ---------- */
#info {
	background: var(--superficie);
	color: var(--texto-suave);
	box-shadow: -4px 0 20px rgba(0, 0, 0, .6);
}

#info h2 {
	color: var(--texto);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

#info a.fechar {
	color: var(--texto-suave);
}

.opacidade {
	background-color: rgba(0, 0, 0, .7);
}

/* ---------- página do produto ---------- */
.containerFinalizar {
	display: block;
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 8px;
}

#detalhesProduto .info1 .fotoProduto figure img {
	border-radius: 8px;
}

#detalhesProduto .info1 .descricao {
	align-items: flex-start;
	text-align: left;
	color: var(--texto-suave);
}

#detalhesProduto .info1 h3,
#detalhesProduto label {
	color: var(--texto);
}

#detalhesProduto .info1 h3 {
	font-weight: 500;
}

#detalhesProduto .info1 .preco {
	color: var(--vermelho-claro);
	font-size: 20px;
	font-weight: 500;
}

#detalhesProduto .info2 .tipo .topo {
	background: var(--superficie-2);
	color: var(--texto-suave);
	border-radius: 4px;
}

#detalhesProduto .info2 .tipo .topo h3 {
	color: var(--texto);
	font-weight: 500;
}

#detalhesProduto .info2 .tipo .topo .col2 span {
	background: var(--vermelho);
	border-radius: 3px;
	font-size: 10px;
}

#detalhesProduto .info2 .tipo .topo .col2 i {
	color: var(--vermelho-claro);
}

#detalhesProduto .info2 .opcoes {
	border-color: var(--borda);
	border-style: solid;
	border-width: 0 0 1px;
}

#detalhesProduto .info2 .opcoes > div.desc {
	gap: 10px;
}

#detalhesProduto .info2 .opcoes .nome {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

#detalhesProduto .info2 .opcoes .nome b {
	color: var(--texto);
	font-weight: 500;
}

#detalhesProduto .info2 .opcoes .nome .preco {
	color: var(--texto-suave);
	font-size: 13px;
	font-weight: 400;
	overflow-wrap: anywhere;
}

.qtdeProdutoOpcao {
	flex: 0 0 auto;
}

.qtdeOpcao {
	width: 30px;
}

.qtdeProduto,
.qtdeProdutoOpcao {
	background: var(--superficie);
	border-color: var(--borda);
}

.qtdeProduto button,
.qtdeProdutoOpcao button {
	color: var(--vermelho-claro);
}

.qtdeProdutoOpcao button:disabled,
.qtdeProduto button:disabled {
	color: var(--borda-forte);
}

#detalhesProduto .info3 input,
#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao input {
	background: transparent;
	color: var(--texto);
	-webkit-text-fill-color: var(--texto);
	opacity: 1;
}

.selecionado {
	border-color: var(--vermelho);
}

#detalhesProduto .info2 input.observacao {
	background: var(--superficie);
	border: 1px solid var(--borda-forte);
	border-radius: 4px;
	color: var(--texto);
}

#detalhesProduto .info2 input.observacao::placeholder {
	color: var(--texto-suave);
}

.info2 em {
	color: var(--texto-suave);
}

#detalhesProduto .info3 {
	background: var(--superficie);
	border-top: 1px solid var(--borda);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .6);
}

#detalhesProduto .info3 #precoProduto {
	color: var(--texto);
	font-weight: 600;
}

@media (min-width: 768px) {
	#detalhesProduto .info3 {
		justify-content: center;
		align-items: center;
		gap: 32px;
	}

	#detalhesProduto .info3 .btn {
		margin: 10px 0;
	}
}

/* ---------- janelas de escolha ---------- */
.swal2-popup {
	background: var(--superficie) !important;
	color: var(--texto) !important;
	border-radius: 8px !important;
}

.swal2-title,
.swal2-html-container {
	color: var(--texto) !important;
}

.swal2-select {
	background: var(--superficie) !important;
	color: var(--texto) !important;
	border: 1px solid var(--borda-forte) !important;
}

.swal2-cancel {
	background: transparent !important;
	color: var(--texto-suave) !important;
	border: 1px solid var(--borda-forte) !important;
}

.swal2-validation-message {
	background: var(--aviso) !important;
	color: var(--texto) !important;
}

/* ---------- privacidade e termos ---------- */
body > main {
	background: var(--superficie);
	border: 1px solid var(--borda);
	color: var(--texto-suave);
	box-shadow: none;
	overflow-wrap: anywhere;
}

body > main h1,
body > main h2 {
	color: var(--texto);
}

body > main a:not(.btn-voltar) {
	color: var(--vermelho-claro);
}

body > main strong {
	color: var(--texto);
}

body > main .muted {
	color: var(--texto-suave);
}

body > main .btn-voltar {
	background: var(--vermelho);
}

body > main .btn-voltar:hover {
	background: var(--vermelho-escuro);
}

body > main ul {
	padding-left: 20px;
}

/* ---------- celular ---------- */
@media (max-width: 767px) {
	header#topo .cover {
		height: 150px;
	}

	/* Lista corrida com divisórias, em vez de cartões. */
	main#lista .produtos {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	main#lista .produtos .item a,
	main#lista .produtos .item a:hover {
		padding: 16px 0;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--borda);
		border-radius: 0;
	}

	main#lista .produtos .item:last-child a {
		border-bottom: 0;
	}

	.containerFinalizar {
		width: 100%;
		margin: 0 0 96px;
		padding: 68px 16px 16px;
		border: 0;
		border-radius: 0;
	}

	#detalhesProduto .info1 {
		align-items: stretch;
	}

	#detalhesProduto .info1 .fotoProduto {
		margin: 0 0 14px;
	}

	#detalhesProduto .info1 .fotoProduto figure {
		max-width: 100%;
		max-height: none;
	}

	#detalhesProduto .info1 .fotoProduto figure img {
		display: block;
		width: 100%;
		height: auto;
	}

	#detalhesProduto .info1 .descricao {
		width: 100%;
		max-width: none;
	}

	#detalhesProduto .info1 h3 {
		font-size: 19px;
		line-height: 1.3;
	}

	#detalhesProduto .info2 .tipo .topo .col2 {
		width: auto;
		flex-shrink: 0;
	}

	#detalhesProduto .info3 {
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	}

	#detalhesProduto .info3 .btn {
		flex: 1;
		max-width: 240px;
		margin: 0;
		padding: 13px 16px;
	}

	#detalhesProduto input.observacao {
		font-size: 16px; /* abaixo disso o iPhone dá zoom ao tocar no campo */
		width: 100%;
	}

	#trocarCidade,
	#trocarUnidade {
		display: inline-block;
		padding: 4px 2px;
	}

	body > main {
		margin: 12px;
		padding: 16px;
	}
}

@media (max-width: 450px) {
	:root {
		--margem: 16px;
	}

	.container {
		padding-right: var(--margem);
		padding-left: var(--margem);
	}

	main#lista .produtos .item figure {
		width: 92px;
		height: 92px;
	}

	#detalhesProduto .info2 .opcoes > div.desc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 108px;
		align-items: center;
		min-width: 0;
	}

	#detalhesProduto .info2 .opcoes > div.desc .nome {
		width: auto;
	}

	.qtdeProdutoOpcao {
		width: 108px;
	}

	.qtdeProdutoOpcao button {
		flex: 0 0 38px;
		min-width: 0;
		width: 38px;
		padding: 8px;
	}

	#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao input {
		flex: 1 1 0;
		width: 0;
	}
}

/* ---------- escolha de opções (comportamento em produtos/pizza/js/opcoes.js) ---------- */
a.voltar {
	z-index: 5;
}

#detalhesProduto .info3 {
	z-index: 6; /* fica acima do título de grupo que acompanha a rolagem */
}

/* O título do grupo acompanha a rolagem enquanto as opções dele estão na tela. */
#detalhesProduto .info2 .tipo .topo {
	position: sticky;
	top: 0;
	z-index: 3;
}

#detalhesProduto .info2 .tipo:not(.completo) .topo .col2 i {
	display: none !important; /* o HTML e o script mostram inline; o "ok" só vale com o grupo completo */
}

#detalhesProduto .info2 .opcoes {
	padding: 14px 10px;
	cursor: pointer;
	user-select: none;
	transition: background-color .15s, opacity .15s;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	#detalhesProduto .info2 .opcoes:hover {
		background: var(--superficie-2);
	}
}

#detalhesProduto .info2 .opcoes.escolhida {
	background: rgba(209, 15, 36, .12);
}

/* Order bump: destaca o bloco de itens opcionais. */
#detalhesProduto .info2 #order-bump {
	border: 1px dashed var(--vermelho-claro);
	border-radius: 12px;
	overflow: clip;
}

#detalhesProduto .info2 #order-bump .com-foto > div.desc {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: center;
}

#detalhesProduto .info2 #order-bump .com-foto > div.desc .nome {
	width: auto;
}

#detalhesProduto .info2 #order-bump .foto-oferta {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
}

#detalhesProduto .info2 .opcoes[role="radio"]:focus-visible {
	outline: 2px solid var(--vermelho-claro);
	outline-offset: -2px;
}

/* Limite do grupo atingido: as demais opções ficam apagadas. */
#detalhesProduto .info2 .tipo.completo:not(.escolha-unica) .opcoes:not(.escolhida) {
	opacity: .45;
	cursor: default;
}

/* Sem escolha: só o "+". Com escolha, abre em "- 1 +". */
#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao:not(.selecionado) {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--borda-forte);
	border-radius: 50%;
	background: none;
}

#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao:not(.selecionado) .removerQtdeOpcao,
#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao:not(.selecionado) input {
	display: none;
}

#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao:not(.selecionado) button {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0;
}

#detalhesProduto .info2 .opcoes .qtdeProdutoOpcao.selecionado {
	flex: 0 0 108px;
	width: 108px;
}

/* Seleção única: botão redondo no lugar da quantidade. */
#detalhesProduto .info2 .tipo.escolha-unica .opcoes .qtdeProdutoOpcao,
#detalhesProduto .info2 .tipo.escolha-unica .opcoes .qtdeProdutoOpcao.selecionado {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	border: 2px solid var(--borda-forte);
	border-radius: 50%;
	background: none;
}

#detalhesProduto .info2 .tipo.escolha-unica .opcoes .qtdeProdutoOpcao.selecionado {
	border-color: var(--vermelho-claro);
}

#detalhesProduto .info2 .tipo.escolha-unica .opcoes .qtdeProdutoOpcao.selecionado::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--vermelho-claro);
}

#detalhesProduto .info2 .tipo.escolha-unica .opcoes .qtdeProdutoOpcao button,
#detalhesProduto .info2 .tipo.escolha-unica .opcoes .qtdeProdutoOpcao input {
	display: none;
}

@media (max-width: 767px) {
	/* Barra fixa atrás do "Voltar", para o título do grupo não passar por baixo dele. */
	.containerFinalizar::before {
		content: '';
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 4;
		height: 60px;
		background: var(--fundo);
		border-bottom: 1px solid var(--borda);
	}

	#detalhesProduto .info2 .tipo .topo {
		top: 60px;
	}
}

@media (max-width: 450px) {
	#detalhesProduto .info2 .opcoes > div.desc {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}