/* Monte Seu Prato — frontend */

/* ---- Miniaturas (inseridas via JS dentro da galeria nativa, seja lá
   como o tema/Elementor a monta) — sempre embaixo da foto principal. ---- */

.ppn-msp-miniaturas {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 10px !important;
	width: 100% !important;
}

.ppn-msp-miniatura {
	width: 64px !important;
	height: 64px !important;
	max-width: 64px !important;
	min-width: 64px !important;
	flex: 0 0 64px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	border: 2px solid transparent !important;
	display: inline-block !important;
}

.ppn-msp-miniatura:hover {
	border-color: currentColor;
}

/* ---- Etapas (injetadas dentro do form.cart nativo) ---- */

/* Isolamento contra o flex que o Elementor aplica em form.cart pra
   alinhar quantidade + botão — força nosso bloco a ocupar a linha
   inteira e empurra quantidade/botão pra uma linha normal abaixo.
   (Regra específica por tipo já vem inline no PHP; isto aqui é reforço
   genérico pra qualquer outro contexto/tema.) */
form.cart .ppn-msp-etapas-wrap {
	display: block !important;
	width: 100% !important;
	flex-basis: 100% !important;
}

.ppn-msp-etapas-wrap {
	margin-bottom: 14px;
}

.ppn-msp-etapa-front {
	display: block !important;
	width: 100%;
	margin-bottom: 10px;
}

/* Moldura FIXA — sempre visível, não só ao interagir. Fundo branco
   forçado porque o tema aplica estilo de botão em qualquer <button>
   (deixava o texto ilegível quando era verde em cima de verde). Agora
   é um <div role="button">, não um <button>, então nem herda o
   estilo de botão do tema — mas o fundo branco fica reforçado mesmo
   assim, por segurança. */
.ppn-msp-etapa-titulo {
	display: flex !important;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	background-color: #fff !important;
	color: #333 !important;
	border: 1px solid #c9c9c9;
	border-radius: 6px;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	box-sizing: border-box;
}

.ppn-msp-etapa-titulo[aria-expanded="true"] {
	border-color: #999;
	border-radius: 6px 6px 0 0;
}

/* Nome escolhido + botão × ficam juntos, à direita do título. */
.ppn-msp-etapa-escolhido-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ppn-msp-limpar-selecao {
	all: unset !important;
	cursor: pointer !important;
	color: #b32d2e !important;
	font-size: 18px !important;
	line-height: 1 !important;
	padding: 0 2px !important;
}

.ppn-msp-limpar-selecao:hover {
	color: #8a1f20 !important;
}

/* Rótulo fixo "(Escolha)" / "(Opcional)" — visível sempre até o
   cliente escolher, não só quando clica. */
.ppn-msp-etapa-escolhido {
	font-weight: 400;
	color: #b32d2e;
	font-size: 13px;
}

.ppn-msp-etapa-front.ppn-msp-opcional .ppn-msp-etapa-escolhido {
	color: #8a6d00;
}

/* Quando já tem escolha, o texto muda pro nome do item — deixamos
   verde pra indicar "preenchido". */
.ppn-msp-etapa-front.ppn-msp-etapa-preenchida .ppn-msp-etapa-escolhido {
	color: #2a7d2a;
	font-weight: 600;
}

.ppn-msp-etapa-conteudo {
	border: 1px solid #c9c9c9;
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 12px 14px;
	background: #fafafa;
}

.ppn-msp-etapa-conteudo[hidden] {
	display: none;
}

.ppn-msp-etapa-instrucao {
	margin: 0 0 10px;
	color: #555;
	font-size: 13px;
}

/* Lista VERTICAL de verdade — cada opção numa linha própria. */
.ppn-msp-lista-opcoes {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
}

.ppn-msp-opcao {
	display: flex !important;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	box-sizing: border-box;
}

.ppn-msp-opcao:last-child {
	border-bottom: none;
}

.ppn-msp-opcao:hover {
	background: #f6f7f7;
}

.ppn-msp-opcao-selecionada {
	background: #eaf7ea;
	font-weight: 600;
}

.ppn-msp-mensagem-validacao {
	font-size: 13px;
	color: #b32d2e;
	margin: 10px 0;
}

.ppn-msp-mensagem-validacao.ppn-msp-mensagem-ok {
	color: #2a7d2a;
}

.ppn-msp-preco-total {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 700;
	margin: 10px 0 4px;
}