/* Pão da Praça — Página de pedidos
   Cores da marca: azul #013950 · azul escuro #01293A · texto #1B2A33 · dourado #D0AE67
   O sistema visual acompanha o plugin “Pão da Praça — Cardápio”. */

.pp-app {
	--pp-fundo-pagina: #ffffff;
	--pp-fundo: #ffffff;
	--pp-titulo: #013950;
	--pp-secao: #a8863f;
	--pp-texto: #1b2a33;
	--pp-suave: #4c6270;
	--pp-preco: #a8863f;
	--pp-cor: #013950;
	--pp-cor-escura: #01293a;
	--pp-botao-texto: #ffffff;
	--pp-ouro: #d0ae67;
	--pp-borda: #dce3e7;
	--pp-fundo-alt: #fbf6ec;
	--pp-raio: 14px;
	--pp-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--pp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	font-family: var(--pp-sans);
	color: var(--pp-texto);
	background: var(--pp-fundo-pagina);
	font-size: 16px;
	line-height: 1.5;
	position: relative;
}

/* Só quando o lojista escolhe um fundo diferente do branco a caixa ganha respiro. */
.pp-app--fundo {
	padding: 26px;
	border-radius: var(--pp-raio);
}

@media (max-width: 600px) {
	.pp-app--fundo {
		padding: 18px 14px;
	}
}

.pp-app *,
.pp-app *::before,
.pp-app *::after {
	box-sizing: border-box;
}

/* Elementos com display explícito ignorariam o atributo hidden. */
.pp-app [hidden] {
	display: none !important;
}

.pp-titulo {
	font-family: var(--pp-serif);
	color: var(--pp-titulo);
	margin: 0 0 6px;
}

.pp-aviso-topo {
	margin: 0 0 22px;
	padding: 13px 18px;
	background: var(--pp-fundo-alt);
	border-left: 4px solid var(--pp-ouro);
	border-radius: 0 var(--pp-raio) var(--pp-raio) 0;
	color: var(--pp-texto);
	font-size: 0.95em;
	line-height: 1.55;
}

/* Avisos para o administrador: cores fixas, para continuarem legíveis
   qualquer que seja a paleta escolhida. */
.pp-alerta {
	background: #fff6e5;
	border: 1px solid #e8cf9c;
	border-radius: var(--pp-raio);
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #5c4715;
	font-size: 0.95em;
}

.pp-alerta a {
	color: #7a5c12;
}

.pp-alerta--erro {
	background: #fdecea;
	border-color: #e0a9a4;
	color: #7a2e28;
}

.pp-alerta--erro a {
	color: #7a2e28;
}

/* --- Topo: logo e atendimento --- */

.pp-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1.5px solid var(--pp-borda);
}

.pp-topo__marca {
	display: flex;
	align-items: center;
	min-width: 0;
}

.pp-topo__logo {
	display: block;
	width: auto;
	max-width: 100%;
}

.pp-topo__nome {
	font-family: var(--pp-serif);
	font-size: 1.5em;
	font-weight: 600;
	color: var(--pp-titulo);
}

@media (max-width: 600px) {
	.pp-topo {
		justify-content: center;
		text-align: center;
	}

	.pp-topo__whatsapp {
		width: 100%;
		justify-content: center;
	}
}

/* --- Abas de categoria --- */

.pp-abas {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 4px 8px;
	margin: 0 -4px 26px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pp-abas::-webkit-scrollbar {
	display: none;
}

.pp-aba {
	flex: 0 0 auto;
	appearance: none;
	background: var(--pp-fundo);
	border: 1.5px solid var(--pp-borda);
	border-radius: 100px;
	padding: 12px 26px;
	font-family: var(--pp-sans);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1;
	color: var(--pp-suave);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pp-aba:hover {
	border-color: var(--pp-ouro);
}

.pp-aba[aria-selected="true"] {
	background: var(--pp-cor);
	border-color: var(--pp-cor);
	color: var(--pp-botao-texto);
}

.pp-aba:focus-visible {
	outline: 2px solid var(--pp-ouro);
	outline-offset: 3px;
}

.pp-aba__conta {
	display: inline-block;
	margin-left: 8px;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--pp-ouro);
	color: var(--pp-titulo);
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: middle;
}

.pp-aba[aria-selected="true"] .pp-aba__conta {
	background: var(--pp-botao-texto);
	color: var(--pp-cor);
}

/* --- Subcategorias --- */

.pp-subabas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -14px 0 26px;
}

.pp-subaba {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--pp-borda);
	border-radius: 100px;
	padding: 7px 16px;
	font-family: var(--pp-sans);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--pp-suave);
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pp-subaba:hover {
	border-color: var(--pp-ouro);
}

.pp-subaba[aria-selected="true"] {
	background: var(--pp-fundo-alt);
	border-color: var(--pp-ouro);
	color: var(--pp-secao);
}

.pp-subaba:focus-visible {
	outline: 2px solid var(--pp-ouro);
	outline-offset: 3px;
}

/* --- Layout --- */

.pp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 860px) {
	.pp-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.pp-carrinho {
		display: none;
	}

	/* Espaço para a barra fixa não cobrir o último produto. */
	.pp-app {
		padding-bottom: 84px;
	}
}

/* --- Catálogo --- */

.pp-grupo-titulo {
	font-family: var(--pp-sans);
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pp-secao);
	margin: 38px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pp-borda);
}

.pp-grupo-titulo:first-child {
	margin-top: 0;
}

.pp-lista {
	border: 1.5px solid var(--pp-borda);
	border-radius: var(--pp-raio);
	overflow: hidden;
	background: var(--pp-fundo);
}

.pp-produto {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	border-bottom: 1px dashed var(--pp-borda);
	flex-wrap: wrap;
}

.pp-produto:last-child {
	border-bottom: 0;
}

.pp-produto__foto {
	width: 58px;
	height: 58px;
	border-radius: 10px;
	object-fit: cover;
	flex: 0 0 auto;
}

.pp-produto__info {
	flex: 1 1 220px;
	min-width: 0;
}

.pp-produto__nome {
	font-size: 1.02em;
	font-weight: 600;
	color: var(--pp-titulo);
	line-height: 1.35;
	margin: 0 0 3px;
}

.pp-produto__obs {
	margin: 0;
	font-size: 0.88em;
	line-height: 1.5;
	color: var(--pp-suave);
}

.pp-produto__preco {
	margin: 6px 0 0;
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.pp-produto__valor {
	font-family: var(--pp-serif);
	font-size: 1.02em;
	font-weight: 600;
	color: var(--pp-preco);
	font-variant-numeric: tabular-nums;
}

.pp-produto__unidade {
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-suave);
}

.pp-produto__opcoes {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pp-opcao {
	flex: 1 1 200px;
	min-width: 0;
}

.pp-opcao label {
	display: block;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-suave);
	margin-bottom: 4px;
}

.pp-opcao select {
	width: 100%;
	padding: 8px 10px;
	border: 1.5px solid var(--pp-borda);
	border-radius: 8px;
	background: var(--pp-fundo-alt);
	font: inherit;
	font-size: 0.9em;
	color: var(--pp-texto);
}

/* --- Stepper ---
   Os seletores começam em .pp-app de propósito: temas costumam ter regras
   genéricas para input e button que, sem isso, esticariam o campo. */

.pp-app .pp-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.pp-app .pp-stepper button {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 1.5px solid var(--pp-borda);
	border-radius: 50%;
	background: var(--pp-fundo-alt);
	color: var(--pp-cor);
	font-family: var(--pp-sans);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.pp-app .pp-stepper button:hover:not(:disabled) {
	background: var(--pp-cor);
	border-color: var(--pp-cor);
	color: var(--pp-botao-texto);
}

.pp-app .pp-stepper button:active:not(:disabled) {
	transform: scale(0.92);
}

.pp-app .pp-stepper button:focus-visible {
	outline: 2px solid var(--pp-ouro);
	outline-offset: 2px;
}

.pp-app .pp-stepper button:disabled {
	background: transparent;
	color: var(--pp-borda);
	cursor: default;
}

.pp-app .pp-stepper input[type="number"] {
	flex: 0 0 auto;
	width: 56px;
	min-width: 0;
	max-width: 56px;
	height: 38px;
	padding: 0 4px;
	margin: 0;
	border: 1.5px solid var(--pp-borda);
	border-radius: 11px;
	background: var(--pp-fundo);
	box-shadow: none;
	text-align: center;
	font-family: var(--pp-sans);
	font-size: 0.95em;
	font-weight: 700;
	line-height: normal;
	color: var(--pp-titulo);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s, color 0.15s;
}

.pp-app .pp-stepper input[type="number"]:focus {
	outline: 2px solid var(--pp-ouro);
	outline-offset: 1px;
	border-color: var(--pp-ouro);
}

.pp-app .pp-stepper input[type="number"]::-webkit-outer-spin-button,
.pp-app .pp-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Com quantidade escolhida, o campo e o + ganham a cor de destaque. */
.pp-app .pp-stepper--ativo input[type="number"] {
	border-color: var(--pp-ouro);
	color: var(--pp-cor);
}

.pp-app .pp-stepper--ativo button[data-acao="mais"] {
	background: var(--pp-cor);
	border-color: var(--pp-cor);
	color: var(--pp-botao-texto);
}

/* --- Item escolhido: destaque na linha inteira --- */

.pp-produto--ativo {
	background: var(--pp-fundo-alt);
	box-shadow: inset 4px 0 0 var(--pp-ouro);
}

/* --- Carrinho --- */

.pp-carrinho__caixa {
	position: sticky;
	top: 24px;
	border: 1.5px solid var(--pp-borda);
	border-radius: 16px;
	background: var(--pp-fundo);
	padding: 20px;
}

.pp-carrinho__topo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.pp-carrinho__topo strong {
	flex: 1 1 auto;
	font-family: var(--pp-serif);
	font-size: 1.12em;
	color: var(--pp-titulo);
}

.pp-badge {
	background: var(--pp-ouro);
	color: var(--pp-titulo);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 0.75em;
	font-weight: 700;
}

.pp-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.82em;
	color: var(--pp-suave);
	text-decoration: underline;
	cursor: pointer;
}

.pp-link:hover {
	color: var(--pp-secao);
}

.pp-carrinho__itens {
	max-height: 46vh;
	overflow-y: auto;
	margin-bottom: 12px;
}

.pp-vazio {
	color: var(--pp-suave);
	font-size: 0.9em;
	font-style: italic;
	text-align: center;
	padding: 24px 0;
	margin: 0;
}

.pp-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px dashed var(--pp-borda);
	font-size: 0.9em;
}

.pp-item:last-child {
	border-bottom: 0;
}

.pp-item__info {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-item__nome {
	font-weight: 600;
	color: var(--pp-titulo);
}

.pp-item__detalhe {
	color: var(--pp-suave);
	font-size: 0.88em;
}

.pp-item__preco {
	white-space: nowrap;
	font-weight: 600;
	color: var(--pp-preco);
	font-variant-numeric: tabular-nums;
}

.pp-item__remover {
	background: none;
	border: 0;
	padding: 0 2px;
	cursor: pointer;
	color: var(--pp-suave);
	font-size: 15px;
	line-height: 1;
}

.pp-item__remover:hover {
	color: #a63d34;
}

.pp-carrinho__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1.5px solid var(--pp-borda);
	margin-bottom: 14px;
}

.pp-carrinho__total strong {
	font-family: var(--pp-serif);
	font-size: 1.3em;
	color: var(--pp-preco);
	font-variant-numeric: tabular-nums;
}

/* --- Botões --- */

.pp-botao {
	display: block;
	width: 100%;
	padding: 13px 18px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

.pp-botao:focus-visible {
	outline: 2px solid var(--pp-ouro);
	outline-offset: 3px;
}

.pp-botao--principal {
	background: var(--pp-cor);
	border-color: var(--pp-cor);
	color: var(--pp-botao-texto);
}

.pp-botao--principal:hover:not(:disabled) {
	background: var(--pp-cor-escura);
	border-color: var(--pp-cor-escura);
	color: var(--pp-botao-texto);
}

.pp-botao--principal:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pp-botao--secundario {
	background: transparent;
	border-color: var(--pp-borda);
	color: var(--pp-cor);
	margin-top: 10px;
}

.pp-botao--secundario:hover {
	border-color: var(--pp-ouro);
	color: var(--pp-cor);
}

/* Atendimento rápido no topo: mesma paleta, hierarquia menor que o botão de enviar. */
.pp-topo__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border: 1.5px solid var(--pp-cor);
	border-radius: 100px;
	background: transparent;
	color: var(--pp-cor);
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.pp-topo__whatsapp:hover,
.pp-topo__whatsapp:focus {
	background: var(--pp-cor);
	color: var(--pp-botao-texto);
	text-decoration: none;
}

.pp-topo__whatsapp svg {
	flex: 0 0 auto;
}

.pp-botao--texto {
	background: none;
	color: var(--pp-suave);
	width: auto;
	padding: 13px 12px;
}

/* --- Barra do celular --- */

.pp-barra-mobile {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--pp-fundo);
	border-top: 1.5px solid var(--pp-borda);
	box-shadow: 0 -6px 24px rgba(1, 41, 58, 0.12);
}

.pp-barra-mobile__rotulo {
	display: block;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-suave);
}

.pp-barra-mobile strong {
	font-family: var(--pp-serif);
	font-size: 1.16em;
	color: var(--pp-preco);
	font-variant-numeric: tabular-nums;
}

.pp-barra-mobile .pp-botao {
	width: auto;
	flex: 1 1 auto;
	max-width: 220px;
	margin-left: auto;
}

@media (min-width: 861px) {
	.pp-barra-mobile {
		display: none !important;
	}
}

/* --- Modal --- */

.pp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.pp-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(1, 41, 58, 0.6);
}

.pp-modal__caixa {
	position: relative;
	background: var(--pp-fundo);
	border-radius: 18px;
	width: 100%;
	max-width: 540px;
	max-height: 92vh;
	overflow-y: auto;
	box-shadow: 0 24px 64px rgba(1, 41, 58, 0.3);
}

.pp-modal__conteudo {
	padding: 26px 26px 20px;
}

.pp-modal__conteudo h3 {
	font-family: var(--pp-serif);
	color: var(--pp-titulo);
	margin: 0 0 4px;
	font-size: 1.4em;
	font-weight: 600;
}

.pp-modal__sub {
	margin: 0 0 18px;
	color: var(--pp-suave);
	font-size: 0.9em;
}

.pp-conferencia {
	background: var(--pp-fundo-alt);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 20px;
	font-size: 0.88em;
	max-height: 190px;
	overflow-y: auto;
}

.pp-conferencia__linha {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.pp-conferencia__linha span:last-child {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pp-conferencia__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--pp-borda);
	margin-top: 10px;
	padding-top: 10px;
	font-weight: 700;
	color: var(--pp-titulo);
}

.pp-campo {
	margin-bottom: 15px;
}

.pp-campo label {
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-suave);
	margin-bottom: 6px;
}

.pp-campo input[type="text"],
.pp-campo input[type="tel"],
.pp-campo input[type="date"],
.pp-campo select,
.pp-campo textarea {
	width: 100%;
	padding: 12px 13px;
	border: 1.5px solid var(--pp-borda);
	border-radius: 10px;
	font: inherit;
	font-size: 0.95em;
	color: var(--pp-texto);
	background: var(--pp-fundo);
}

.pp-campo input:focus,
.pp-campo select:focus,
.pp-campo textarea:focus {
	outline: 2px solid var(--pp-ouro);
	outline-offset: 1px;
	border-color: var(--pp-ouro);
}

.pp-campo--inline label {
	font-size: 0.92em;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pp-texto);
	display: flex;
	align-items: center;
	gap: 8px;
}

.pp-campo-duplo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 460px) {
	.pp-campo-duplo {
		grid-template-columns: 1fr;
	}
}

.pp-erro {
	display: block;
	color: #a63d34;
	font-size: 0.82em;
	margin-top: 5px;
	min-height: 1px;
}

.pp-erro--geral:not(:empty) {
	background: #fdecea;
	border: 1px solid #e0a9a4;
	border-radius: 10px;
	padding: 10px 12px;
	margin: 4px 0 14px;
	font-size: 0.9em;
}

.pp-modal__nota {
	font-size: 0.82em;
	line-height: 1.6;
	color: var(--pp-suave);
	background: var(--pp-fundo-alt);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 16px;
}

.pp-modal__acoes {
	display: flex;
	gap: 10px;
	align-items: center;
}

.pp-modal__acoes .pp-botao--principal {
	flex: 1 1 auto;
}

.pp-isca {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Sucesso --- */

.pp-sucesso {
	text-align: center;
	padding: 6px 0 0;
}

.pp-sucesso__numero {
	display: inline-block;
	background: var(--pp-fundo-alt);
	border: 1.5px solid var(--pp-ouro);
	border-radius: 14px;
	padding: 12px 26px;
	margin: 12px 0 16px;
	font-family: var(--pp-serif);
	font-size: 1.6em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--pp-titulo);
}

.pp-sucesso p {
	color: var(--pp-suave);
	font-size: 0.92em;
}

.pp-sucesso .pp-botao {
	margin-top: 8px;
}

/* --- Histórico --- */

.pp-historico {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
}

.pp-historico li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--pp-borda);
	font-size: 0.9em;
}

.pp-historico li:last-child {
	border-bottom: 0;
}

.pp-historico strong {
	color: var(--pp-titulo);
}

.pp-historico a {
	color: var(--pp-preco);
	font-weight: 600;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.pp-aba,
	.pp-botao {
		transition: none;
	}
}