/* ===================================================================
 * WP Pizza Fácil — Frontend (mobile-first, escopado em .wpfp-app)
 * =================================================================== */

.wpfp-app, .wpfp-app * { box-sizing: border-box; }
.wpfp-app {
	--wpfp-primary: #e11d48;
	--wpfp-secondary: #1f2937;
	--wpfp-bg: #f8fafc;
	--wpfp-card: #ffffff;
	--wpfp-border: #e5e7eb;
	--wpfp-text: #0f172a;
	--wpfp-muted: #6b7280;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--wpfp-text);
	background: var(--wpfp-bg);
	max-width: 760px;
	margin: 0 auto;
	padding: 8px;
	border-radius: 14px;
	line-height: 1.35;
	font-size: 14px;
}
@media (min-width: 720px) {
	.wpfp-app { padding: 14px; font-size: 15px; line-height: 1.4; border-radius: 18px; }
}

/* Loader */
.wpfp-app-loader, .wpfp-app-error {
	padding: 40px 20px;
	text-align: center;
	color: var(--wpfp-muted);
}
.wpfp-spinner {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 3px solid var(--wpfp-border);
	border-top-color: var(--wpfp-primary);
	margin: 0 auto 12px;
	animation: wpfp-spin 0.8s linear infinite;
}
@keyframes wpfp-spin { to { transform: rotate(360deg); } }

/* Header — estilo app de delivery: card branco enxuto, logo à esquerda,
   saudação + UMA linha de info (status · tempo · entrega) com ícones SVG.
   O vermelho da marca fica reservado para acentos (preço, tab ativa, CTA). */
.wpfp-app .wpfp-header {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 11px;
	text-align: center;
	/* Bloco 1 full-bleed: encosta nas bordas do container (quebra o padding de 8px
	   do .wpfp-app com margem negativa), sem margem lateral — só padding interno.
	   Sem gap embaixo: o banner encosta direto (separados pela linha fininha). */
	margin: -8px -8px 0;
	padding: 20px 12px 16px;
	background: var(--wpfp-card);
	color: var(--wpfp-text);
	border: none;
	border-bottom: 1px solid var(--wpfp-border);
	border-radius: 14px 14px 0 0;
	box-shadow: none;
}
.wpfp-app .wpfp-header .wpfp-shop-name { color: var(--wpfp-text); }
/* Logo da loja: protagonista — centralizada e grande, SEM fundo, borda ou sombra
   (flutua limpa sobre o header branco). */
.wpfp-app .wpfp-header .wpfp-logo {
	background: transparent;
	padding: 0;
	border: none;
	border-radius: 0;
	max-height: 96px;
	box-shadow: none;
	filter: none;
}
.wpfp-header-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.wpfp-logo {
	height: auto;
	max-height: 96px;
	width: auto;
	max-width: 82%;
	border: none;
	border-radius: 0;
	object-fit: contain;
	background: transparent;
	filter: none;
}
.wpfp-logo-emoji {
	width: 64px; height: 64px;
	border-radius: 16px;
	background: var(--wpfp-bg);
	display: flex; align-items: center; justify-content: center;
	font-size: 32px;
	flex-shrink: 0;
}
.wpfp-shop-name { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.wpfp-hero-greeting { margin: 0; font-size: 15px; font-weight: 700; color: var(--wpfp-muted); letter-spacing: -.01em; }

/* Barra de info do hero — Aberto · tempo · taxa, em pílula única com divisórias finas.
   Substitui os chips soltos: vira um bloco coeso e alinhado abaixo da logo. */
.wpfp-hero-infobar {
	display: inline-flex; align-items: stretch;
	max-width: 100%;
	margin-top: 1px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	overflow: hidden;
}
.wpfp-hero-info {
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	padding: 8px 10px;
	font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1;
	color: var(--wpfp-text-2, #334155);
	background: transparent; border: none; white-space: nowrap;
}
.wpfp-hero-info + .wpfp-hero-info { border-left: 1px solid var(--wpfp-border); }
.wpfp-hero-info-ico { display: inline-flex; align-items: center; color: var(--wpfp-muted); }
.wpfp-hero-info-ico svg { display: block; }
.wpfp-hero-info-txt { display: inline-block; }
.wpfp-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wpfp-muted-2, #94a3b8); flex: none; }
.wpfp-hero-info.is-open { color: #15803d; }
.wpfp-hero-info.is-open .wpfp-hero-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.wpfp-hero-info.is-closed { color: #b91c1c; }
.wpfp-hero-info.is-closed .wpfp-hero-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
.wpfp-hero-info.is-action { cursor: pointer; color: var(--wpfp-primary-700, #be123c); }
.wpfp-hero-info.is-action .wpfp-hero-info-ico { color: var(--wpfp-primary); }
.wpfp-hero-info.is-action:hover { background: var(--wpfp-primary-50, #fff1f3); }
.wpfp-hero-info-chev { display: inline-flex; align-items: center; color: var(--wpfp-muted-2, #94a3b8); margin-left: -1px; }
.wpfp-hero-info-chev svg { display: block; }

/* Lado direito do header (infobar + sociais). Mobile: UMA linha full-width
   (status · tempo · taxa + botão acompanhar), social ancorado no canto. */
.wpfp-header-aside { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; }
.wpfp-header-aside .wpfp-hero-infobar { flex: 1 1 auto; min-width: 0; } /* infobar estica e preenche a linha */
.wpfp-header-aside .wpfp-hero-info { flex: 1 1 auto; } /* segmentos dividem a largura igualmente */
/* Mobile: zap/insta ancorados no canto superior esquerdo (espelham o hambúrguer à direita). */
.wpfp-header-social { display: inline-flex; flex-direction: column; gap: 8px; position: absolute; top: 12px; left: 12px; z-index: 2; }
.wpfp-social-btn {
	width: 38px; height: 38px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--wpfp-border);
	background: var(--wpfp-card);
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
}
.wpfp-social-btn:active { transform: scale(.92); }
.wpfp-social-btn svg { display: block; }
.wpfp-social-whatsapp { color: #1faa52; }
.wpfp-social-whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }
.wpfp-social-instagram { color: #d6276a; }
.wpfp-social-instagram:hover { background: #E1306C; color: #fff; border-color: #E1306C; }
.wpfp-hamburger {
	position: absolute; top: 12px; right: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: var(--wpfp-bg); color: var(--wpfp-text);
	border: 1px solid var(--wpfp-border); border-radius: 11px; cursor: pointer;
	transition: transform .12s ease, background .15s ease;
}
.wpfp-hamburger:hover { background: #eef1f5; }
.wpfp-hamburger:active { transform: scale(.94); }
/* Logo clicável (header e drawer) → home. Botão sem chrome, herda o tamanho da imagem. */
.wpfp-logo-link, .wpfp-drawer-logo-link {
	display: inline-flex; align-items: center; max-width: 100%;
	padding: 0; border: none; background: transparent; cursor: pointer;
	border-radius: 8px; -webkit-tap-highlight-color: transparent;
	transition: transform .12s ease;
}
.wpfp-logo-link:active, .wpfp-drawer-logo-link:active { transform: scale(.97); }
@media (min-width: 720px) {
	.wpfp-app .wpfp-header {
		position: static;
		flex-direction: row; align-items: center; justify-content: flex-start;
		flex-wrap: nowrap; text-align: left;
		/* Desktop volta a ser card (cancela o full-bleed do mobile) */
		margin: 0 0 14px;
		padding: 12px 18px; gap: 10px 16px; border-radius: 16px;
		background: transparent; background-image: none;
		color: var(--wpfp-text);
		border: none;
		box-shadow: none;
	}
	.wpfp-app .wpfp-header .wpfp-shop-name { color: var(--wpfp-text); font-size: 18px; }
	.wpfp-app .wpfp-header .wpfp-logo { background: transparent; padding: 0; box-shadow: none; border-radius: 0; filter: none; height: auto; max-height: 92px; max-width: 230px; }
	.wpfp-header-brand { flex: none; flex-direction: row; align-items: center; gap: 10px; width: auto; }
	.wpfp-logo-emoji { width: 64px; height: 64px; font-size: 32px; border-radius: 14px; background: var(--wpfp-bg); }
	/* Desktop: a barra fica AO LADO do logo, ocupa o espaço restante e quebra em 2 linhas
	   (info em cima; acompanhar + social embaixo). */
	.wpfp-header-aside {
		flex: 1 1 auto; min-width: 0;
		flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
		gap: 7px 7px;
	}
	.wpfp-header-aside .wpfp-hero-infobar { flex: 0 0 100%; } /* infobar sozinha na 1ª linha */
	.wpfp-header-aside .wpfp-hero-info { flex: 1 1 auto; }    /* segmentos preenchem a barra */
	/* 2ª linha (acompanhar + entrar + criar conta + sociais) cabe numa linha só:
	   fonte/padding menores, gaps curtos e sem quebra. */
	.wpfp-header-aside .wpfp-track-btn { font-size: 12px; padding: 7px 11px; gap: 5px; }
	.wpfp-header-aside .wpfp-acct-actions { gap: 6px; flex: none; }
	.wpfp-header-aside .wpfp-header-social { gap: 6px; }
	.wpfp-header-aside .wpfp-social-btn { width: 34px; height: 34px; }
	.wpfp-header-social { position: static; top: auto; left: auto; flex-direction: row; }
	.wpfp-header-meta { justify-content: flex-end; }
	.wpfp-header .wpfp-chip { background: var(--wpfp-bg); color: var(--wpfp-text-2); }
	.wpfp-hamburger, .wpfp-hero-greeting { display: none; }
}
/* Chips de meta (tempo, taxa, mínimo) — neutro tintado, denso */
.wpfp-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--wpfp-bg);
	color: var(--wpfp-text-2);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.wpfp-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.wpfp-badge-open { background: #dcfce7; color: #166534; }
.wpfp-badge-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.wpfp-badge-closed { background: #fee2e2; color: #991b1b; }

/* ===== Drawer (menu hambúrguer mobile) ===== */
.wpfp-drawer-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(15, 23, 42, 0);
	transition: background .28s ease;
}
/* Não ficar por baixo da barra de admin do WordPress (usuário logado). */
body.admin-bar .wpfp-drawer-overlay { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .wpfp-drawer-overlay { top: 46px; }
}
.wpfp-drawer-overlay.is-open { background: rgba(15, 23, 42, .5); }
.wpfp-drawer {
	width: 86%; max-width: 340px; height: 100%;
	background: var(--wpfp-card, #ffffff);
	color: var(--wpfp-text, #0f172a);
	box-shadow: 0 0 40px rgba(15, 23, 42, .3);
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.22, 1, .36, 1);
	display: flex; flex-direction: column;
	overflow-y: auto;
}
.wpfp-drawer-overlay.is-open .wpfp-drawer { transform: translateX(0); }
.wpfp-drawer-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px; border-bottom: 1px solid var(--wpfp-border);
}
.wpfp-drawer-logo { max-height: 84px; max-width: 72%; width: auto; object-fit: contain; display: block; }
.wpfp-drawer-close {
	width: 38px; height: 38px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wpfp-bg); border: none; border-radius: 10px; color: var(--wpfp-text); cursor: pointer;
}
.wpfp-drawer-nav { display: flex; flex-direction: column; padding: 10px; gap: 4px; }
.wpfp-drawer-link {
	display: flex; align-items: center; gap: 12px;
	padding: 12px; border: none; background: transparent; border-radius: 12px;
	font-size: 15px; font-weight: 700; color: var(--wpfp-text); cursor: pointer; text-align: left;
}
.wpfp-drawer-link:hover { background: var(--wpfp-bg); }
.wpfp-drawer-link.is-active { background: var(--wpfp-primary); color: #fff; }
.wpfp-drawer-link-ico { display: inline-flex; flex: none; }
.wpfp-drawer-link-ico svg { width: 20px; height: 20px; }
.wpfp-drawer-contacts {
	margin-top: 6px; padding: 14px 12px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wpfp-border);
	display: flex; flex-direction: column; gap: 2px;
}
.wpfp-drawer-status { margin-bottom: 6px; }
.wpfp-drawer-contact {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 8px; border-radius: 10px; text-decoration: none; color: var(--wpfp-text);
}
a.wpfp-drawer-contact:hover { background: var(--wpfp-bg); }
.wpfp-drawer-contact-ico { display: inline-flex; flex: none; color: var(--wpfp-primary); }
.wpfp-drawer-contact-body { display: flex; flex-direction: column; min-width: 0; }
.wpfp-drawer-contact-body small { font-size: 11px; color: var(--wpfp-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.wpfp-drawer-contact-val { font-size: 13.5px; font-weight: 600; white-space: pre-line; }
@media (prefers-reduced-motion: reduce) {
	.wpfp-drawer, .wpfp-drawer-overlay { transition: none; }
}

/* ===== Toasts (canto inferior esquerdo) ===== */
.wpfp-toast-host {
	position: fixed; left: 14px; bottom: 14px; z-index: 1100;
	display: flex; flex-direction: column; gap: 8px;
	max-width: 90vw;
}
.wpfp-toast {
	display: flex; align-items: center; gap: 10px;
	background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
	color: #fff;
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .34);
	font-size: 14px; font-weight: 600; line-height: 1.3;
	max-width: min(360px, 90vw);
	transform: translateX(-120%); opacity: 0;
	transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
}
.wpfp-toast.is-in { transform: translateX(0); opacity: 1; }
.wpfp-toast-ico { display: inline-flex; flex: none; color: #4ade80; }
.wpfp-toast-error .wpfp-toast-ico { color: #f87171; }
.wpfp-toast-ico svg { display: block; }
@media (prefers-reduced-motion: reduce) {
	.wpfp-toast { transition: opacity .2s ease; transform: none; }
}
.wpfp-badge-closed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; }

/* Closed bar */
.wpfp-closed-bar {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 13px 16px;
	margin: 12px 0 14px;          /* respiro embaixo: não cola no banner */
	background: #fff7ed;          /* orange-50 */
	color: #7c2d12;              /* orange-900 — contraste forte */
	border: 1px solid #fdba74;   /* orange-300 */
	border-left: 5px solid #f97316; /* faixa de acento (laranja-500) — destaque */
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	box-shadow: 0 2px 10px rgba(249, 115, 22, .12);
}
.wpfp-closed-bar-icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f97316;          /* círculo sólido de acento */
	border-radius: 50%;
	color: #fff;
}
.wpfp-closed-bar-icon svg { display: block; }
.wpfp-btn-disabled { opacity: .65; cursor: not-allowed; }
.wpfp-muted { color: var(--wpfp-muted); }

/* Barra: menu (Pizzas|Bebidas) + CTA isolado "Monte sua Pizza" */
.wpfp-tabsbar { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
@media (min-width: 720px) {
	.wpfp-tabsbar { flex-direction: row; align-items: stretch; gap: 10px; margin: 12px 0; }
	.wpfp-tabsbar .wpfp-tabs { flex: 1; }
}

/* Tabs */
.wpfp-tabs {
	display: flex; gap: 3px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	padding: 3px;
	margin: 0;
	overflow-x: auto;
}

/* CTA "Monte sua Pizza" — cor configurável (tokens --wpfp-build-bg/-text; por padrão
   segue a marca). Pulso de anel de brilho que expande pra chamar atenção. */
.wpfp-build-cta {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 20px;
	border: none; border-radius: 12px; cursor: pointer;
	font-weight: 800; font-size: 14px; letter-spacing: -.01em;
	color: var(--wpfp-build-text, #fff);
	background: linear-gradient(135deg, var(--wpfp-build-bg, var(--wpfp-primary)), var(--wpfp-build-bg-2, var(--wpfp-primary)));
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 42%, transparent);
	animation: wpfp-build-pulse 1.9s ease-in-out infinite;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
	transition: transform .12s ease, filter .12s ease;
}
.wpfp-build-cta:hover { filter: brightness(1.04); transform: translateY(-1px); }
.wpfp-build-cta:active { transform: scale(.98); }
.wpfp-build-cta.is-active { animation: none; outline: 2px solid color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 55%, transparent); outline-offset: 2px; }
.wpfp-build-cta-ico { display: inline-flex; }
.wpfp-build-cta-ico svg { width: 18px; height: 18px; display: block; }
@media (min-width: 720px) { .wpfp-build-cta { padding: 13px 24px; font-size: 14.5px; } }
@keyframes wpfp-build-pulse {
	0%   { box-shadow: 0 6px 18px color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 55%, transparent); transform: translateZ(0) scale(1); }
	70%  { box-shadow: 0 9px 24px color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 48%, transparent), 0 0 0 13px color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 0%, transparent); transform: translateZ(0) scale(1.03); }
	100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--wpfp-build-bg, var(--wpfp-primary)) 0%, transparent); transform: translateZ(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .wpfp-build-cta { animation: none; } }
.wpfp-tab {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 42px;
	background: transparent;
	border: none;
	padding: 8px 6px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--wpfp-text);
	cursor: pointer;
	text-align: center;
}
.wpfp-tab-ico { display: inline-flex; flex: none; }
.wpfp-tab-ico svg { display: block; width: 16px; height: 16px; }
.wpfp-tab.is-active { background: var(--wpfp-primary); color: #fff; }
@media (min-width: 720px) {
	.wpfp-tabs { padding: 5px; gap: 6px; border-radius: 12px; margin: 0; }
	.wpfp-tab { padding: 10px 12px; gap: 7px; font-size: 14px; border-radius: 9px; min-height: 0; }
	.wpfp-tab-ico svg { width: 18px; height: 18px; }
}

/* Notice (toast discreto) */
.wpfp-notice {
	padding: 8px 12px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	border-radius: 10px;
	margin-bottom: 8px;
	font-size: 13px;
	animation: wpfp-notice-in .2s ease;
}
@keyframes wpfp-notice-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* CTA builder — card discreto com tinta leve da marca (sem âmbar gritante, sem pulso). */
.wpfp-cta-builder {
	display: flex; gap: 12px; align-items: center; justify-content: space-between;
	padding: 13px 14px;
	background: var(--wpfp-primary-50);
	color: var(--wpfp-text);
	border: 1px solid #f6c9d6;
	border-radius: 14px;
	margin-bottom: 10px;
}
.wpfp-cta-builder strong { display: block; font-size: 15px; line-height: 1.2; color: var(--wpfp-text); }
.wpfp-cta-builder p { margin: 2px 0 0; color: var(--wpfp-muted); font-size: 12px; line-height: 1.35; }
.wpfp-cta-builder .wpfp-btn { background: var(--wpfp-primary); color: #fff; border-color: var(--wpfp-primary); padding: 10px 16px; font-size: 13.5px; box-shadow: var(--wpfp-sh-primary); }
.wpfp-cta-builder .wpfp-btn:hover { background: var(--wpfp-primary-700, #be123c); }
.wpfp-cta-builder-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	flex: none; white-space: nowrap;
}
.wpfp-cta-builder-ico { display: inline-flex; }
.wpfp-cta-builder-ico svg { display: block; width: 18px; height: 18px; }
@media (min-width: 720px) {
	.wpfp-cta-builder { padding: 16px; gap: 12px; border-radius: 14px; margin-bottom: 14px; }
	.wpfp-cta-builder strong { font-size: 17px; }
	.wpfp-cta-builder p { font-size: 14px; margin-top: 4px; }
	.wpfp-cta-builder .wpfp-btn { padding: 11px 16px; font-size: 14px; }
}

/* Buttons */
.wpfp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 11px 16px;
	border-radius: 10px;
	border: 1px solid var(--wpfp-border);
	background: var(--wpfp-card);
	color: var(--wpfp-text);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
}
.wpfp-btn:hover { filter: brightness(.97); }
.wpfp-btn:disabled { opacity: .5; cursor: not-allowed; }
.wpfp-btn-primary { background: var(--wpfp-primary); color: #fff; border-color: var(--wpfp-primary); }
.wpfp-btn-ghost { background: transparent; }
.wpfp-btn-sm { padding: 6px 10px; font-size: 13px; }
.wpfp-btn-block { width: 100%; padding: 13px; font-size: 15px; }
@media (min-width: 720px) {
	.wpfp-btn-block { padding: 14px; font-size: 16px; }
}

/* Section titles */
.wpfp-section-title { font-size: 15px; margin: 14px 0 6px; }
.wpfp-cat-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--wpfp-muted); margin: 10px 0 4px; font-weight: 700; }
@media (min-width: 720px) {
	.wpfp-section-title { font-size: 17px; margin: 18px 0 8px; }
	.wpfp-cat-title { font-size: 14px; margin: 14px 0 6px; }
}

/* Grid cards */
.wpfp-grid-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.wpfp-card-item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 10px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	padding: 8px;
}
.wpfp-card-img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.wpfp-card-img-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--wpfp-bg); font-size: 24px;
}
/* Reserva uma coluna à direita p/ o botão "+" (canto inferior): título, descrição
   e preço param antes do botão, sem texto colado nele. */
/* O título usa a linha toda; só descrição e preço recuam pra não colidir com o botão "+". */
.wpfp-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wpfp-card-desc, .wpfp-card-foot { padding-right: 50px; }
.wpfp-card-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wpfp-card-head strong { font-size: 15.5px; line-height: 1.2; }
.wpfp-card-desc {
	margin: 0;
	color: var(--wpfp-muted);
	font-size: 13.5px;
	line-height: 1.35;
	/* Descrição completa, sem truncar. No grid de 2 colunas os cards da mesma linha
	   alinham pela altura do mais alto, então o layout continua uniforme. */
}
.wpfp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.wpfp-card-price { font-weight: 800; color: var(--wpfp-primary); font-size: 16.5px; letter-spacing: -.01em; }
@media (min-width: 720px) {
	.wpfp-grid-cards { gap: 10px; }
	.wpfp-card-item { grid-template-columns: 90px 1fr; gap: 12px; padding: 10px; border-radius: 14px; }
	.wpfp-card-img { width: 90px; height: 90px; }
	.wpfp-card-img-placeholder { font-size: 28px; }
	.wpfp-card-head strong { font-size: 16px; }
	.wpfp-card-desc { font-size: 14px; }
	.wpfp-card-price { font-size: 17px; }
}
.wpfp-card-foot { display: flex; justify-content: flex-start; align-items: center; margin-top: auto; gap: 8px; }
/* Botão "+" encaixado no canto inferior direito do card: quadrado, encostado nas bordas
   (acompanha o canto do card embaixo/direita), só o canto superior-esquerdo arredondado. */
.wpfp-add-btn {
	position: absolute;
	right: 0; bottom: 0;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px 0 11px 0;
	background: var(--wpfp-primary); color: #fff;
	border: none; cursor: pointer;
	box-shadow: -3px -3px 8px rgba(15, 23, 42, .07);
	transition: background var(--wpfp-t-fast, .12s) ease, transform .1s ease;
	transform-origin: bottom right;
	-webkit-tap-highlight-color: transparent;
}
.wpfp-add-btn:hover { background: var(--wpfp-primary-700, #be123c); }
.wpfp-add-btn:active { transform: scale(.94); }
.wpfp-add-btn svg { width: 22px; height: 22px; display: block; }
@media (min-width: 720px) {
	.wpfp-card-desc, .wpfp-card-foot { padding-right: 60px; }
	.wpfp-add-btn { width: 52px; height: 52px; border-radius: 14px 0 13px 0; }
	.wpfp-add-btn svg { width: 24px; height: 24px; }
}
.wpfp-tag { font-size: 11px; padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.wpfp-tag-warn { background: #fef3c7; color: #92400e; }
.wpfp-tag-info { background: #dbeafe; color: #1e40af; }

/* Stepper — progress bar minimalista */
.wpfp-stepper {
	display: flex; flex-direction: column; gap: 8px;
	padding: 12px 14px; margin: 12px 0;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
}
.wpfp-stepper-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wpfp-stepper-of  { color: var(--wpfp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.wpfp-stepper-now { font-size: 16px; color: var(--wpfp-text); }
.wpfp-stepper-track {
	position: relative;
	height: 6px;
	background: var(--wpfp-border);
	border-radius: 999px;
	overflow: hidden;
}
.wpfp-stepper-fill {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--wpfp-primary), #fb7185);
	border-radius: 999px;
	transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

/* Step section */
.wpfp-step-section {
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 16px;
	padding: 13px;          /* mobile: gutter enxuto pra ganhar largura */
	margin-bottom: 14px;
}
@media (min-width: 720px) {
	.wpfp-step-section { padding: 18px; margin-bottom: 16px; }
}
.wpfp-step-section h2 { margin: 0 0 4px; font-size: 18px; }

/* Size grid */
.wpfp-size-grid, .wpfp-count-grid, .wpfp-border-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 14px;
}
.wpfp-size-card, .wpfp-count-card, .wpfp-border-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px;
	border-radius: 12px;
	background: var(--wpfp-card);
	border: 2px solid var(--wpfp-border);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--wpfp-text);
}
.wpfp-size-card strong, .wpfp-count-card strong, .wpfp-border-card strong { font-size: 16px; }
.wpfp-size-card.is-selected, .wpfp-count-card.is-selected, .wpfp-border-card.is-selected {
	border-color: var(--wpfp-primary);
	background: #fff1f2;
}
.wpfp-size-meta { color: var(--wpfp-primary); font-size: 13px; font-weight: 600; }
/* Diâmetro · fatias do tamanho */
.wpfp-size-sub {
	display: inline-flex; align-items: center;
	align-self: flex-start;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--wpfp-muted);
	background: var(--wpfp-bg);
	padding: 2px 8px;
	border-radius: 999px;
	margin: 2px 0 1px;
}
.wpfp-border-price { color: var(--wpfp-primary); font-weight: 700; }

/* Border card com foto */
.wpfp-border-card.has-img { padding: 0; overflow: hidden; }
.wpfp-border-card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--wpfp-bg);
}
.wpfp-border-card-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.wpfp-border-card-name {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 28px 12px 10px;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.82) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -.01em;
	line-height: 1.15;
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.wpfp-border-card-meta {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 12px 12px;
}
.wpfp-border-card-meta small {
	color: var(--wpfp-muted);
	font-size: 12px;
	line-height: 1.3;
}
.wpfp-border-card.has-img.is-selected .wpfp-border-card-img {
	box-shadow: inset 0 0 0 3px var(--wpfp-primary);
}

/* Pizza step header */
.wpfp-step-pizza { padding: 18px 16px; }
.wpfp-pizza-header {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	margin-bottom: 10px;
}
.wpfp-pizza-header h2 { margin: 0 0 2px; font-size: 18px; }
.wpfp-pizza-header p { margin: 0; font-size: 13px; }
.wpfp-pizza-counter {
	flex-shrink: 0;
	display: flex; flex-direction: column; align-items: center;
	padding: 8px 14px;
	background: #fff1f2;
	color: var(--wpfp-primary);
	border-radius: 12px;
	border: 1px solid #fecdd3;
	line-height: 1.1;
}
.wpfp-pizza-counter strong { font-size: 20px; font-weight: 800; }
.wpfp-pizza-counter small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.wpfp-pizza-counter.is-complete { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }

/* Stepper de fatias — substitui counter quando o usuário pode ajustar */
.wpfp-pizza-stepper {
	flex-shrink: 0;
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	background: #fff1f2;
	color: var(--wpfp-primary);
	border-radius: 14px;
	border: 1px solid #fecdd3;
	overflow: hidden;
	line-height: 1.1;
	box-shadow: 0 1px 2px rgba(225,29,72,.06);
}
.wpfp-pizza-stepper.is-complete { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.wpfp-stepper-btn {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	padding: 0 14px;
	min-width: 38px;
	cursor: pointer;
	transition: background .12s, color .12s, opacity .12s;
	-webkit-tap-highlight-color: transparent;
}
.wpfp-stepper-btn:hover:not(:disabled) { background: rgba(225,29,72,.10); }
.wpfp-pizza-stepper.is-complete .wpfp-stepper-btn:hover:not(:disabled) { background: rgba(5,150,105,.10); }
.wpfp-stepper-btn:disabled { opacity: .32; cursor: not-allowed; }
.wpfp-stepper-value {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 6px 8px;
	min-width: 58px;
	border-left: 1px solid currentColor;
	border-right: 1px solid currentColor;
	border-color: rgba(225,29,72,.18);
}
.wpfp-pizza-stepper.is-complete .wpfp-stepper-value { border-color: rgba(5,150,105,.20); }
.wpfp-stepper-value strong { font-size: 18px; font-weight: 800; }
.wpfp-stepper-value small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 480px) {
	.wpfp-stepper-btn { font-size: 20px; padding: 0 12px; min-width: 34px; }
	.wpfp-stepper-value { min-width: 50px; padding: 6px; }
	.wpfp-stepper-value strong { font-size: 16px; }
}

/* Pizza SVG — protagonista */
.wpfp-pizza-stage {
	display: flex; justify-content: center;
	padding: 4px 0 8px;
}
.wpfp-pizza-svg {
	width: min(340px, 100%);
	height: auto;
	display: block;
	/* Profundidade vem de uma sombra suave em vez de moldura grossa */
	filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .22));
	overflow: visible;
}
.wpfp-pizza-base { fill: #fbbf24; }
/* Rim quase invisível — só pra dar terminação limpa no caso sem foto */
.wpfp-pizza-rim {
	fill: none;
	stroke: rgba(120, 53, 15, .35);
	stroke-width: 1;
}
.wpfp-pizza-segment {
	stroke: rgba(255, 255, 255, .8);
	stroke-width: 1.5;
	stroke-linejoin: round;
	cursor: pointer;
	fill: #fde68a;
	transition: filter .15s;
}
.wpfp-pizza-segment.is-empty {
	fill: #fef3c7;
	stroke-dasharray: 5 3;
	stroke: #f59e0b;
	stroke-width: 1.5;
	animation: wpfp-pulse 1.8s ease-in-out infinite;
}
/* Fatia com foto real: divisória bem fininha branca semi-transparente, só pra MARCAR. */
.wpfp-pizza-segment.has-image {
	fill: transparent;
	stroke: rgba(255, 255, 255, .55);
	stroke-width: 1;
	stroke-linejoin: round;
}
.wpfp-pizza-segment.has-image.is-active {
	stroke: var(--wpfp-primary);
	stroke-width: 2.4;
	filter: none;
}
.wpfp-pizza-slice-img { pointer-events: none; }
.wpfp-pizza-segment.is-active {
	filter: brightness(.95);
	stroke: var(--wpfp-primary);
	stroke-width: 2.4;
	animation: none;
}
.wpfp-pizza-segment:hover { filter: brightness(.97); }
.wpfp-pizza-segment:focus { outline: none; }
.wpfp-pizza-segment:focus-visible { stroke: var(--wpfp-primary); stroke-width: 2.4; }
.wpfp-pizza-label {
	font-size: 13px;
	font-weight: 700;
	fill: #1f2937;
	letter-spacing: -.01em;
}
/* Label sobre foto: stroke escuro forte + leve glow pra legibilidade total */
.wpfp-pizza-label-onimg {
	fill: #fff;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, .85);
	stroke-width: 4;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.wpfp-pizza-label-empty {
	fill: #c2410c;
	font-weight: 400;
}
.wpfp-pizza-disclaimer {
	margin: 6px 0 0;
	text-align: center;
	font-size: 11px;
	color: var(--wpfp-muted);
	opacity: .7;
	letter-spacing: .01em;
}

/* Passo "Montar": mobile empilha (pizza → controles); desktop usa 2 colunas
   (pizza à esquerda, controles à direita) pra encurtar a tela. */
.wpfp-pizza-visual { display: flex; flex-direction: column; }
@media (min-width: 720px) {
	.wpfp-pizza-layout {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: center;
		column-gap: 32px;
	}
	.wpfp-pizza-controls {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
	}
	/* Primeiro controle não precisa do espaçamento de cima (a coluna já centraliza) */
	.wpfp-pizza-controls > :first-child { margin-top: 0; }
	/* Pizza pode crescer um pouco mais já que tem coluna dedicada */
	.wpfp-pizza-layout .wpfp-pizza-svg { width: min(360px, 100%); }
}

/* Lupa nas fotos dos cards + modal de zoom */
.wpfp-card-img-wrap {
	position: relative;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	cursor: zoom-in;
}
.wpfp-card-img-wrap .wpfp-card-img {
	width: 100%; height: 100%;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

/* Pizzas: foto REDONDA e maior que o card, "saltando" pra fora no topo, embaixo
   e à ESQUERDA (cobre a borda/ponta do card desse lado). margin-block extra no item
   evita colidir com a foto do card vizinho. Vale p/ foto E placeholder (sem foto). */
.wpfp-card-item--pizza { grid-template-columns: 92px 1fr; overflow: visible; margin-block: 13px; border-radius: 50px 14px 14px 50px; }
.wpfp-card-item--pizza > .wpfp-card-img-wrap,
.wpfp-card-item--pizza > .wpfp-card-img-placeholder {
	width: 108px; height: 108px;
	margin: -11px 0 -11px -18px;   /* salto vertical reduzido (cards mais próximos no mobile) */
	align-self: center;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--wpfp-card), 0 6px 16px rgba(15, 23, 42, .2);
}
.wpfp-card-item--pizza > .wpfp-card-img-wrap .wpfp-card-img { border-radius: 50%; }
.wpfp-card-item--pizza > .wpfp-card-img-placeholder { font-size: 34px; }
/* Foto redonda: recua a lupa pra dentro pra ela encostar na borda do círculo (arco a 45°),
   em vez de ficar solta no canto do quadrado, fora do círculo. */
.wpfp-card-item--pizza .wpfp-zoom-btn { bottom: -5px; right: 15px; }
@media (min-width: 720px) {
	.wpfp-card-item--pizza { grid-template-columns: 112px 1fr; margin-block: 16px; border-radius: 50px 14px 14px 50px; }
	.wpfp-card-item--pizza > .wpfp-card-img-wrap,
	.wpfp-card-item--pizza > .wpfp-card-img-placeholder { width: 132px; height: 132px; margin: -14px 0 -14px -20px; }
	.wpfp-card-item--pizza .wpfp-zoom-btn { bottom: -1px; right: 19px; }
}
.wpfp-zoom-btn {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(15, 23, 42, .72);
	color: #fff;
	border: none;
	font-size: 12px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
	transition: transform .15s, background .15s;
}
.wpfp-zoom-btn:hover { background: rgba(15,23,42,.9); transform: scale(1.05); }
@media (min-width: 720px) {
	.wpfp-card-img-wrap { width: 90px; height: 90px; }
	.wpfp-zoom-btn { width: 30px; height: 30px; font-size: 14px; }
}

body.wpfp-zoom-open { overflow: hidden; }
.wpfp-zoom-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: wpfp-zoom-fade .2s ease;
	cursor: zoom-out;
}
@keyframes wpfp-zoom-fade { from { opacity: 0; } to { opacity: 1; } }
.wpfp-zoom-inner {
	position: relative;
	max-width: min(100%, 720px);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: default;
}
.wpfp-zoom-img {
	max-width: 100%;
	max-height: calc(100vh - 100px);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0,0,0,.5);
	display: block;
	animation: wpfp-zoom-pop .25s ease;
}
@keyframes wpfp-zoom-pop {
	from { transform: scale(.92); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}
.wpfp-zoom-close {
	position: absolute;
	top: -42px;
	right: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	color: #fff;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.wpfp-zoom-close:hover { background: rgba(255,255,255,.28); }
.wpfp-zoom-caption {
	margin: 0;
	color: rgba(255,255,255,.65);
	font-size: 11px;
	text-align: center;
}
@keyframes wpfp-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .6; }
}

/* ===== Modal genérico (ex.: Taxa de Entrega) ===== */
.wpfp-modal-overlay {
	position: fixed; inset: 0; z-index: 1200;
	display: flex; align-items: center; justify-content: center;
	padding: 18px;
	background: rgba(15, 23, 42, 0);
	transition: background .2s ease;
}
.wpfp-modal-overlay.is-open { background: rgba(15, 23, 42, .55); }
.wpfp-modal {
	width: 100%; max-width: 380px;
	background: var(--wpfp-card); border-radius: 16px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
	transform: translateY(14px) scale(.98); opacity: 0;
	transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
	overflow: hidden;
}
.wpfp-modal-overlay.is-open .wpfp-modal { transform: none; opacity: 1; }
.wpfp-modal-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 16px 8px;
}
.wpfp-modal-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--wpfp-text); }
.wpfp-modal-close {
	width: 34px; height: 34px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wpfp-bg); border: none; border-radius: 10px; color: var(--wpfp-text); cursor: pointer;
}
.wpfp-modal-close:hover { background: #eef1f5; }
.wpfp-modal-body { padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.wpfp-modal-row {
	display: flex; flex-direction: column; gap: 2px;
	padding: 12px 14px; background: var(--wpfp-bg); border-radius: 12px;
}
.wpfp-modal-row strong { font-size: 15px; font-weight: 800; color: var(--wpfp-text); }
.wpfp-modal-row span { font-size: 12.5px; color: var(--wpfp-muted); line-height: 1.4; }
.wpfp-modal-note { margin: 6px 2px 0; font-size: 12px; color: var(--wpfp-muted); line-height: 1.45; }
.wpfp-modal-foot { padding: 10px 16px 16px; }
@media (prefers-reduced-motion: reduce) {
	.wpfp-modal-overlay, .wpfp-modal { transition: none; }
}

/* Next-slice CTA + status final */
.wpfp-next-slice {
	display: flex; align-items: center; justify-content: center;
	gap: 8px; width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	background: #fff7ed;
	color: #9a3412;
	border: 1px dashed #fdba74;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.wpfp-next-slice:hover { background: #ffedd5; }
.wpfp-next-slice-icon { font-size: 18px; }
.wpfp-pizza-done {
	text-align: center; margin: 12px 0 0;
	padding: 10px;
	background: #ecfdf5;
	color: #065f46;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
}

/* Detalhes recolhíveis */
.wpfp-segment-details {
	margin-top: 14px;
	border-top: 1px solid var(--wpfp-border);
	padding-top: 12px;
}
.wpfp-segment-details > summary {
	display: flex; justify-content: space-between; align-items: center;
	cursor: pointer;
	font-size: 13px;
	color: var(--wpfp-muted);
	list-style: none;
	padding: 4px 0;
}
.wpfp-segment-details > summary::-webkit-details-marker { display: none; }
.wpfp-seg-chev { transition: transform .15s; }
.wpfp-segment-details[open] .wpfp-seg-chev { transform: rotate(180deg); }

/* Segment list */
.wpfp-segment-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.wpfp-segment-item {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	cursor: pointer;
}
.wpfp-segment-item.is-filled { background: #ecfdf5; border-color: #a7f3d0; }
.wpfp-segment-item.is-active { outline: 2px solid var(--wpfp-primary); }
.wpfp-seg-badge {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--wpfp-primary); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
}
.wpfp-seg-label small { color: var(--wpfp-muted); font-size: 11px; display: block; }
.wpfp-seg-label strong { font-size: 14px; }
.wpfp-seg-action { color: var(--wpfp-primary); font-weight: 600; font-size: 13px; }

/* Builder nav */
.wpfp-builder-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }
/* Mobile: navegação fixa no rodapé — sempre acessível durante a montagem.
   Full-bleed até as bordas do step (padding mobile = 13px) e respeita o notch/home bar. */
@media (max-width: 719px) {
	.wpfp-builder-nav {
		position: sticky;
		bottom: 0;
		z-index: 30;
		margin: 14px -13px -13px;
		padding: 11px 13px calc(11px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		border-top: 1px solid var(--wpfp-border);
		border-radius: 0 0 16px 16px;
	}
	/* Garante que o CTA tenha presença mesmo com Voltar ao lado. */
	.wpfp-builder-nav .wpfp-btn-primary { flex: 1; }
	/* Teclado aberto: rodapé do builder vira estático (evita jump do iOS). */
	.wpfp-builder.wpfp-kbd .wpfp-builder-nav {
		position: static;
		margin: 14px 0 0;
		padding: 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-top: 0;
		border-radius: 0;
	}
}
.wpfp-hint { color: #92400e; background: #fef3c7; padding: 8px 12px; border-radius: 10px; margin-top: 10px; font-size: 13px; text-align: center; }
.wpfp-hint-warn { color: #991b1b; background: #fee2e2; }

/* Ilustração de tamanhos (step Tamanho) */
.wpfp-size-illustration {
	margin: 4px 0 16px;
	padding: 10px 6px 4px;
	background: linear-gradient(180deg, #fffdf7 0%, #fff8ec 100%);
	border: 1px solid #f6e3b4;
	border-radius: 16px;
}
.wpfp-size-illustration svg { display: block; max-width: 460px; margin: 0 auto; }

/* Summary (legado — mantido p/ compat) */
.wpfp-summary-card { padding: 14px; background: var(--wpfp-bg); border-radius: 12px; border: 1px solid var(--wpfp-border); margin-top: 12px; }
.wpfp-summary-list { padding-left: 18px; }
.wpfp-summary-list li { font-size: 14px; margin-bottom: 2px; }
.wpfp-summary-price { font-size: 18px; font-weight: 800; color: var(--wpfp-primary); margin-top: 10px; }

/* ===== Resumo da pizza v2 (visual + responsivo) ===== */
.wpfp-summary-card-v2 {
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	/* Mobile: sem chrome próprio — evita cartão-dentro-de-cartão (já está dentro do step). */
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.wpfp-summary-hero {
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 42%, #fff8ec 0%, #fdeccd 70%, #f6e3b4 100%);
	border-radius: 16px;
	padding: 14px;
	min-height: 0;
}
.wpfp-summary-hero svg, .wpfp-summary-hero .wpfp-pizza-svg { width: 100%; max-width: 240px; height: auto; filter: drop-shadow(0 10px 18px rgba(180,83,9,.18)); }

/* No resumo: sem divisórias/bordas nas fatias — só as imagens das partes.
   A interatividade vem do badge de "trocar" + leve escurecimento no hover. */
.wpfp-summary-hero .wpfp-pizza-segment,
.wpfp-summary-hero .wpfp-pizza-segment.has-image,
.wpfp-summary-hero .wpfp-pizza-segment.is-active,
.wpfp-summary-hero .wpfp-pizza-segment.has-image.is-active {
	stroke: none;
	animation: none;
}
.wpfp-summary-hero .wpfp-pizza-segment { cursor: pointer; transition: fill .15s; }
@media (hover: hover) {
	.wpfp-summary-hero .wpfp-pizza-segment:hover,
	.wpfp-summary-hero .wpfp-pizza-segment.has-image:hover { fill: rgba(15, 23, 42, .12); }
}
/* Badge "trocar" sobre cada parte */
.wpfp-swap-badge { cursor: pointer; }
.wpfp-swap-badge-bg {
	fill: #fff;
	stroke: var(--wpfp-primary);
	stroke-width: 1;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
	transition: fill .15s;
}
.wpfp-swap-badge-ico {
	fill: none;
	stroke: var(--wpfp-primary);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
	transition: stroke .15s;
}
.wpfp-swap-badge:hover .wpfp-swap-badge-bg,
.wpfp-swap-badge:focus-visible .wpfp-swap-badge-bg { fill: var(--wpfp-primary); }
.wpfp-swap-badge:hover .wpfp-swap-badge-ico,
.wpfp-swap-badge:focus-visible .wpfp-swap-badge-ico { stroke: #fff; }
.wpfp-swap-badge:focus { outline: none; }
.wpfp-summary-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wpfp-summary-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--wpfp-text); line-height: 1.15; }

.wpfp-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wpfp-summary-chip {
	display: flex; flex-direction: column; gap: 1px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 10px;
	padding: 6px 11px;
}
.wpfp-summary-chip small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wpfp-muted); }
.wpfp-summary-chip strong { font-size: 13px; font-weight: 700; color: var(--wpfp-text); }

.wpfp-summary-flavors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wpfp-summary-flavor {
	display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
	padding: 9px 12px;
	background: var(--wpfp-bg);
	border-radius: 10px;
}
.wpfp-summary-flavor-badge {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--wpfp-primary); color: #fff;
	font-size: 12px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.wpfp-summary-flavor-name { font-size: 14px; font-weight: 700; color: var(--wpfp-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpfp-summary-flavor-price { font-size: 13px; font-weight: 700; color: var(--wpfp-muted); }
.wpfp-summary-hint { margin: 0; font-size: 12px; color: var(--wpfp-muted); font-style: italic; }
.wpfp-summary-note { display: flex; flex-direction: column; gap: 4px; }

.wpfp-summary-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wpfp-summary-qty-label { font-size: 13px; font-weight: 700; color: var(--wpfp-text-2, #334155); }

.wpfp-summary-pricebox {
	display: flex; flex-direction: column; gap: 10px;
	background: transparent; border: 0; padding: 0;
}
.wpfp-summary-price-cap { font-size: 14px; font-weight: 700; color: var(--wpfp-secondary, #1f2937); }
.wpfp-summary-price-val { font-size: 26px; font-weight: 800; color: var(--wpfp-primary); letter-spacing: -.02em; white-space: nowrap; }

@media (min-width: 640px) {
	/* Sem chrome próprio no desktop também — evita cartão-dentro-de-cartão
	   (já está dentro do .wpfp-step-section). Mantém só o layout em 2 colunas. */
	.wpfp-summary-card-v2 {
		grid-template-columns: 240px 1fr; align-items: start; gap: 20px;
	}
	.wpfp-summary-hero { position: sticky; top: 12px; }
}

.wpfp-qty { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0; }
.wpfp-qty-btn {
	width: 32px; height: 32px;
	border-radius: 8px;
	border: 1px solid var(--wpfp-border);
	background: var(--wpfp-card);
	font-size: 18px;
	cursor: pointer;
}
.wpfp-qty-val { font-weight: 700; min-width: 24px; text-align: center; }

/* No carrinho a qty é compacta */
.wpfp-cart-item-controls .wpfp-qty { margin: 0; gap: 4px; }
.wpfp-cart-item-controls .wpfp-qty-btn {
	width: 26px; height: 26px;
	font-size: 14px;
	line-height: 1;
}
.wpfp-cart-item-controls .wpfp-qty-val { min-width: 18px; font-size: 13px; }

/* Bottom sheet */
body.wpfp-sheet-open { overflow: hidden; }
.wpfp-sheet {
	/* Fallback de variáveis caso o sheet escape do .wpfp-app */
	--wpfp-primary: #e11d48;
	--wpfp-secondary: #1f2937;
	--wpfp-bg: #f8fafc;
	--wpfp-card: #ffffff;
	--wpfp-border: #e5e7eb;
	--wpfp-text: #0f172a;
	--wpfp-muted: #6b7280;
	color: var(--wpfp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	position: fixed; inset: 0; z-index: 999999;
	display: flex; align-items: flex-end;
	pointer-events: none;
}
.wpfp-sheet.is-open { pointer-events: auto; }
.wpfp-sheet-overlay {
	position: absolute; inset: 0;
	background: rgba(15, 23, 42, 0);
	transition: background .2s;
}
.wpfp-sheet.is-open .wpfp-sheet-overlay { background: rgba(15, 23, 42, .5); }
.wpfp-sheet-panel {
	position: relative;
	width: 100%; max-height: 88vh;
	background: var(--wpfp-card);
	border-radius: 24px 24px 0 0;
	padding: 14px 16px 24px;
	display: flex; flex-direction: column; gap: 10px;
	transform: translateY(100%);
	transition: transform .25s ease;
	overflow: hidden;
}
.wpfp-sheet.is-open .wpfp-sheet-panel { transform: translateY(0); }
.wpfp-sheet-handle {
	width: 40px; height: 4px;
	background: var(--wpfp-border-strong); border-radius: 2px;
	margin: 0 auto 4px;
}
.wpfp-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.wpfp-sheet-head h3 { margin: 0; font-size: 16px; }
.wpfp-sheet-close { background: transparent; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--wpfp-muted); }
.wpfp-sheet-search {
	width: 100%;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1.5px solid var(--wpfp-border);
	background: var(--wpfp-bg);
	font-size: 14px;
	font-family: inherit;
	color: var(--wpfp-text);
	transition: border-color .15s, background .15s, box-shadow .15s;
	box-sizing: border-box;
	-webkit-appearance: none;
}
.wpfp-sheet-search:focus {
	outline: none;
	background: var(--wpfp-card);
	border-color: var(--wpfp-primary);
	box-shadow: 0 0 0 3px rgba(225, 29, 72, .1);
}
.wpfp-cat-bar {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: visible;
	padding: 8px 2px 10px;
	margin: 4px -2px 8px;
	/* esconde scrollbar mantendo scroll funcional */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.wpfp-cat-bar::-webkit-scrollbar { display: none; }
.wpfp-cat-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--wpfp-border);
	background: var(--wpfp-card);
	color: var(--wpfp-text-2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.wpfp-cat-btn:hover { background: var(--wpfp-bg); border-color: var(--wpfp-border-strong); }
.wpfp-cat-btn:active { transform: translateY(1px); }
.wpfp-cat-btn.is-active {
	background: var(--wpfp-primary);
	color: #fff;
	border-color: var(--wpfp-primary);
	box-shadow: 0 2px 8px rgba(225, 29, 72, .28);
}

.wpfp-sheet-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.wpfp-flavor-pick {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	background: var(--wpfp-card);
	cursor: pointer;
	text-align: left;
	font: inherit;
}
.wpfp-flavor-pick:hover { border-color: var(--wpfp-primary); }
.wpfp-flavor-pick img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.wpfp-flavor-pick .wpfp-card-img-placeholder { width: 56px; height: 56px; border-radius: 10px; }
.wpfp-flavor-info strong { display: block; font-size: 14px; }
.wpfp-flavor-info small { color: var(--wpfp-muted); font-size: 12px; display: block; }
.wpfp-flavor-price { font-weight: 700; color: var(--wpfp-primary); }

/* Cart */
.wpfp-cart-view {
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 14px;
	padding: 12px;
}
.wpfp-cart-view h2 { margin: 0 0 8px; font-size: 16px; }
@media (min-width: 720px) {
	.wpfp-cart-view { padding: 16px; border-radius: 16px; }
	.wpfp-cart-view h2 { font-size: 19px; margin-bottom: 12px; }
}
.wpfp-cart-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wpfp-cart-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	grid-template-rows: auto;
	gap: 10px;
	align-items: center;
	padding: 8px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
}
.wpfp-cart-thumb {
	width: 56px; height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--wpfp-bg);
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.wpfp-cart-thumb-fallback {
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
}
.wpfp-cart-item-info {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
.wpfp-cart-title { font-size: 14px; font-weight: 600; line-height: 1.25; }
.wpfp-cart-sub {
	font-size: 11.5px;
	color: var(--wpfp-muted);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.wpfp-cart-item-price {
	font-weight: 800;
	color: var(--wpfp-primary);
	font-size: 14px;
	margin-top: 4px;
}
.wpfp-cart-item-controls {
	display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.wpfp-cart-remove {
	background: transparent;
	border: none;
	color: var(--wpfp-muted-2);
	font-size: 16px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	line-height: 1;
}
.wpfp-cart-remove:hover { background: #fef2f2; color: #dc2626; }
@media (min-width: 720px) {
	.wpfp-cart-item { padding: 10px; gap: 12px; grid-template-columns: 64px 1fr auto; }
	.wpfp-cart-thumb { width: 64px; height: 64px; }
	.wpfp-cart-title { font-size: 15px; }
	.wpfp-cart-sub { font-size: 12.5px; }
}

.wpfp-cart-totals { margin: 12px 0 8px; padding: 10px 12px; background: var(--wpfp-bg); border-radius: 10px; }
.wpfp-cart-totals div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.wpfp-cart-grand {
	font-size: 16px;
	font-weight: 800;
	border-top: 1px solid var(--wpfp-border);
	padding-top: 6px !important;
	margin-top: 4px;
}
.wpfp-cart-grand span:last-child { color: var(--wpfp-primary); }
@media (min-width: 720px) {
	.wpfp-cart-totals div { font-size: 14px; padding: 4px 0; }
	.wpfp-cart-grand { font-size: 18px; padding-top: 8px !important; }
}

/* Delivery */
.wpfp-delivery-box { margin: 14px 0; padding: 12px; background: var(--wpfp-bg); border-radius: 12px; }
.wpfp-delivery-box h3 { margin: 0 0 6px; font-size: 15px; }
.wpfp-cep-row { display: flex; gap: 8px; margin-top: 6px; }
.wpfp-cep-input {
	flex: 1;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wpfp-border);
	font-size: 16px;
}
.wpfp-delivery-result { margin-top: 8px; font-size: 14px; }
.wpfp-delivery-result p { margin: 2px 0; }
.wpfp-fee-free { color: #16a34a; }

/* Entrada manual de endereço (bairro/cidade/UF) */
.wpfp-manual-addr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 6px;
}
.wpfp-manual-addr .col-2 { grid-column: 1 / -1; }
.wpfp-manual-addr .wpfp-input {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wpfp-border);
	font-size: 16px;
}
.wpfp-uf-input { text-transform: uppercase; }
.wpfp-manual-addr-action .wpfp-btn { width: 100%; }

/* Link de alternância CEP <-> manual */
.wpfp-link-btn {
	display: inline-block;
	margin-top: 10px;
	background: none; border: none; padding: 0;
	color: var(--wpfp-primary); font-size: 13px; font-weight: 600;
	text-decoration: underline; cursor: pointer;
}
.wpfp-link-btn:hover { opacity: .85; }

/* Customer / address form */
.wpfp-customer-box { margin: 14px 0; padding: 14px; background: var(--wpfp-bg); border-radius: 12px; }
.wpfp-customer-box h3 { margin: 0 0 4px; font-size: 15px; }
.wpfp-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}
.wpfp-field { display: flex; flex-direction: column; gap: 4px; }
.wpfp-field.col-2 { grid-column: span 2; }
.wpfp-field.col-1 { grid-column: span 1; }
/* col-split: largura total no mobile, meia (2 colunas) no desktop. */
.wpfp-field.col-split { grid-column: span 2; }
@media (min-width: 720px) { .wpfp-field.col-split { grid-column: span 1; } }
.wpfp-field-label { font-size: 12px; font-weight: 600; color: var(--wpfp-muted); }
.wpfp-input {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wpfp-border);
	font-size: 16px;   /* >=16px evita o auto-zoom (e o "pulo"/scroll) do iOS ao focar */
	font-family: inherit;
	background: var(--wpfp-card);
	box-sizing: border-box;
}
.wpfp-input:focus { outline: 2px solid var(--wpfp-primary); outline-offset: 1px; border-color: var(--wpfp-primary); }
textarea.wpfp-input { resize: vertical; min-height: 56px; }
.wpfp-pay-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}
.wpfp-pay-btn {
	padding: 10px 8px;
	border: 1px solid var(--wpfp-border);
	background: var(--wpfp-card);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.wpfp-pay-btn:hover { background: var(--wpfp-bg); }
.wpfp-pay-btn.is-selected {
	border-color: var(--wpfp-primary);
	background: rgba(225, 29, 72, .08);
	color: var(--wpfp-primary);
}
@media (max-width: 480px) {
	/* Pagamento lado a lado também no mobile (3 colunas; rótulos longos quebram em 2 linhas). */
	.wpfp-pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.wpfp-pay-btn { padding: 10px 5px; font-size: 11.5px; text-align: center; line-height: 1.15; }
}

/* Troco em tempo real */
.wpfp-cash-box .wpfp-change-feedback { margin-top: 6px; }
.wpfp-change-result {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 10px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}
.wpfp-change-result strong { color: #047857; font-size: 16px; }

/* PIX box (redesign v1.14.1) */
.wpfp-pix-box {
	margin-top: 8px;
	padding: 16px;
	background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 55%);
	border: 1px solid #99f6e4;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(13,148,136,.08);
}
.wpfp-pix-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.wpfp-pix-badge {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 5px 11px; border-radius: 9px;
	background: linear-gradient(135deg, #0f9d8f 0%, #14b8a6 100%);
	color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .06em;
	box-shadow: 0 3px 8px rgba(15,157,143,.35);
}
.wpfp-pix-head-text strong { display: block; font-size: 15px; color: var(--wpfp-text); line-height: 1.2; }
.wpfp-pix-head-text small { color: #0d9488; font-size: 12px; font-weight: 600; }

.wpfp-pix-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 13px;
	margin-bottom: 8px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wpfp-pix-row-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wpfp-pix-row-info small { font-size: 10.5px; color: var(--wpfp-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.wpfp-pix-key {
	font-size: 14px;
	font-weight: 700;
	word-break: break-all;
	color: var(--wpfp-text);
}
.wpfp-pix-value { font-size: 19px; color: #0f9d8f; font-weight: 800; letter-spacing: -.01em; }
.wpfp-pix-payload-preview {
	font-size: 11px;
	color: var(--wpfp-muted-2);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	word-break: break-all;
}
.wpfp-pix-qr {
	display: flex; flex-direction: column; align-items: center; gap: 11px;
	margin-top: 6px;
	padding: 8px 0 2px;
}
.wpfp-pix-qr-label { font-size: 12px; color: var(--wpfp-muted); font-weight: 600; text-align: center; }
.wpfp-pix-qr-frame {
	position: relative;
	padding: 16px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(15,23,42,.12);
}
/* Cantos estilo "moldura de leitura" */
.wpfp-pix-qr-frame::before,
.wpfp-pix-qr-frame::after {
	content: ""; position: absolute;
	width: 22px; height: 22px;
	border: 3px solid #0f9d8f;
	border-radius: 4px;
}
.wpfp-pix-qr-frame::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.wpfp-pix-qr-frame::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.wpfp-pix-qr-canvas { display: block; width: 200px; height: 200px; image-rendering: pixelated; border-radius: 6px; }
.wpfp-pix-hint { margin: 12px 0 0 !important; font-size: 12px; text-align: center; }

/* Cartão box */
.wpfp-card-box {
	margin-top: 8px;
	padding: 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
}
.wpfp-card-box h4 { margin: 0 0 8px; font-size: 14px; color: #1e40af; }
.wpfp-card-type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.wpfp-card-type-btn {
	padding: 10px;
	background: var(--wpfp-card);
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
	transition: border-color .15s, background .15s;
}
.wpfp-card-type-btn:hover { background: #f3f6ff; }
.wpfp-card-type-btn.is-selected {
	background: #1e40af;
	color: #fff;
	border-color: #1e40af;
}
.wpfp-card-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 6px;
}
.wpfp-card-brand-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 6px;
	background: var(--wpfp-card);
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.wpfp-card-brand-btn .wpfp-brand-badge { width: 100%; height: auto; max-width: 46px; }
.wpfp-brand-badge-wrap { display: block; line-height: 0; }
.wpfp-card-brand-btn:hover { background: #f3f6ff; }
.wpfp-card-brand-btn.is-selected {
	border-color: #1e40af;
	background: rgba(30, 64, 175, .08);
	color: #1e40af;
}

/* FAB carrinho */
.wpfp-cart-fab {
	position: sticky;
	bottom: 12px;
	margin: 14px auto 0;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 18px;
	/* Acompanha o preset: parte da cor secundária da marca, puxada pro escuro pra
	   garantir contraste do texto branco mesmo em presets de secundária clara (ex.: dourado). */
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wpfp-secondary, #1f2937) 78%, #0b1020) 0%,
		color-mix(in srgb, var(--wpfp-secondary, #1f2937) 45%, #0b1020) 100%);
	color: #fff;
	border: none;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .35);
	font-size: 15px;
	cursor: pointer;
}
/* Sobrescreve a sombra vermelha do design-system (mesma especificidade, carrega depois) */
.wpfp-app .wpfp-cart-fab { box-shadow: 0 10px 28px rgba(15, 23, 42, .38); border-radius: 14px; }
.wpfp-cart-fab-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wpfp-cart-fab-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: none;
	background: rgba(255, 255, 255, .12); border-radius: 11px; color: #fff;
}
.wpfp-cart-fab-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; }
.wpfp-cart-fab-title { font-size: 15px; font-weight: 800; color: #fff; }
.wpfp-cart-fab-count { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .68); }
.wpfp-cart-fab-right { display: flex; align-items: center; gap: 8px; flex: none; }
.wpfp-cart-fab-total-lbl {
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.wpfp-cart-fab-total {
	font-size: 17px; font-weight: 800; color: #fff;
	background: rgba(255, 255, 255, .12);
	padding: 4px 12px; border-radius: 999px;
}
.wpfp-cart-fab-chevron { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .7); margin-left: 2px; }

/* Empty */
.wpfp-empty { color: var(--wpfp-muted); text-align: center; padding: 24px 12px; }

/* ===== Carrossel de banners (topo do cardápio) ===== */
/* Mobile: full-bleed (encosta nas bordas do container, quebrando o padding de 8px).
   Encosta direto no header em cima; o respiro p/ as 3 abas vem da margem das próprias abas. */
.wpfp-banner-carousel { position: relative; margin: 0 -8px 0; }
.wpfp-banner-viewport { overflow: hidden; border-radius: 0; box-shadow: none; }
.wpfp-banner-track { display: flex; transition: transform .45s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.wpfp-banner-slide { flex: 0 0 100%; display: block; line-height: 0; }
.wpfp-banner-img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; background: var(--wpfp-bg); }
.wpfp-banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.wpfp-banner-dot {
	width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
	background: var(--wpfp-border); cursor: pointer;
	transition: width .2s ease, background .2s ease;
}
.wpfp-banner-dot.is-active { width: 18px; background: var(--wpfp-primary); }
@media (min-width: 720px) {
	/* Desktop: volta a ser card contido (margem zero, cantos arredondados, sombra). */
	.wpfp-banner-carousel { margin: 0 0 14px; }
	.wpfp-banner-viewport { border-radius: 14px; box-shadow: 0 6px 18px rgba(15,23,42,.08); }
	.wpfp-banner-img { aspect-ratio: 16 / 5; }
}
@media (prefers-reduced-motion: reduce) {
	.wpfp-banner-track { transition: none; }
}

/* =========================================
 * Quick Order sheet (pizza inteira via card)
 * ========================================= */
.wpfp-quick-panel {
	display: flex;
	flex-direction: column;
	padding: 10px 0 0;
	gap: 0;
}
.wpfp-quick-panel .wpfp-sheet-handle { margin: 0 auto 8px; }

/* HEAD com thumbnail */
.wpfp-quick-head {
	display: grid;
	grid-template-columns: 64px 1fr 32px;
	gap: 12px;
	align-items: flex-start;
	padding: 0 18px 14px;
	border-bottom: 1px solid var(--wpfp-border);
}
.wpfp-quick-thumb {
	width: 64px; height: 64px;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.wpfp-quick-thumb-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #fde68a, #fbbf24);
	font-size: 30px;
}
.wpfp-quick-thumb-wrap {
	position: relative;
	width: 64px; height: 64px;
	flex-shrink: 0;
	cursor: zoom-in;
}
.wpfp-quick-thumb-wrap .wpfp-quick-thumb { width: 64px; height: 64px; display: block; }
.wpfp-zoom-btn-sm {
	position: absolute;
	bottom: -4px; right: -4px;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(15,23,42,.78);
	color: #fff;
	font-size: 11px;
	cursor: zoom-in;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
	transition: transform .12s, background .12s;
}
.wpfp-zoom-btn-sm:hover { background: rgba(15,23,42,.95); transform: scale(1.1); }
.wpfp-quick-head-info { min-width: 0; }
.wpfp-quick-head-info small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.wpfp-quick-head-info h3 { margin: 2px 0 4px; font-size: 18px; line-height: 1.15; }
.wpfp-quick-desc { font-size: 13px; margin: 0; color: var(--wpfp-muted); line-height: 1.35; }
.wpfp-quick-panel .wpfp-sheet-close {
	background: var(--wpfp-bg);
	border-radius: 50%;
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	padding: 0;
	color: var(--wpfp-text-2);
}

/* BODY — scroll */
.wpfp-quick-panel .wpfp-quick-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 18px 12px;
}
.wpfp-quick-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wpfp-muted);
	margin: 0 0 8px;
	font-weight: 800;
}
.wpfp-quick-label:not(:first-child) { margin-top: 18px; }

/* Compact grids: SEMPRE 2 colunas (sobrescreve tablet media query) */
.wpfp-quick-panel .wpfp-size-grid-compact,
.wpfp-quick-panel .wpfp-border-grid-compact {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px;
	margin-top: 0;
}
.wpfp-quick-panel .wpfp-size-card,
.wpfp-quick-panel .wpfp-border-card {
	padding: 10px 12px;
	gap: 2px;
	min-width: 0;
	border-width: 1.5px;
	border-radius: 12px;
}
.wpfp-quick-panel .wpfp-size-card strong,
.wpfp-quick-panel .wpfp-border-card strong {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;
}
.wpfp-quick-panel .wpfp-size-card .wpfp-size-meta,
.wpfp-quick-panel .wpfp-border-card .wpfp-border-price,
.wpfp-quick-panel .wpfp-border-card .wpfp-muted {
	font-size: 12.5px;
	white-space: nowrap;
	font-weight: 600;
}

/* Cards do quick-order com thumbnail (tamanho / massa / borda) */
.wpfp-qo-card { position: relative; }
.wpfp-qo-card .wpfp-qo-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.wpfp-qo-card.has-thumb {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.wpfp-qo-thumb {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
}
.wpfp-qo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wpfp-qo-card.is-selected .wpfp-qo-thumb {
	border-color: var(--wpfp-primary);
}
.wpfp-quick-card-desc {
	color: var(--wpfp-muted);
	font-size: 11.5px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Quantidade maior */
.wpfp-qty-large {
	display: flex; align-items: center; gap: 14px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	padding: 6px 12px;
	width: fit-content;
}
.wpfp-qty-large .wpfp-qty-btn {
	width: 36px; height: 36px;
	font-size: 20px;
	font-weight: 700;
	border-radius: 8px;
}
.wpfp-qty-large .wpfp-qty-val {
	font-size: 18px;
	min-width: 28px;
}

.wpfp-quick-note {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wpfp-border);
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 56px;
	box-sizing: border-box;
}
.wpfp-quick-note:focus {
	outline: none;
	border-color: var(--wpfp-primary);
	box-shadow: 0 0 0 3px rgba(225,29,72,.12);
}

/* FOOTER fixo */
.wpfp-quick-footer {
	flex: 0 0 auto;
	background: var(--wpfp-card);
	border-top: 1px solid var(--wpfp-border);
	padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0));
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 -4px 12px rgba(15,23,42,.05);
}
.wpfp-quick-total {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wpfp-quick-total-label {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
.wpfp-quick-total-label small { color: var(--wpfp-muted); font-size: 12px; }
.wpfp-quick-total-label strong { color: var(--wpfp-primary); font-size: 22px; font-weight: 800; }

/* Seletor de quantidade compacto à direita do preço */
.wpfp-qty-compact {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 999px;
	padding: 4px;
	flex-shrink: 0;
}
.wpfp-qty-compact .wpfp-qty-btn {
	width: 34px; height: 34px;
	font-size: 18px; font-weight: 700;
	border-radius: 999px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .12s, border-color .12s;
}
.wpfp-qty-compact .wpfp-qty-btn:hover { background: var(--wpfp-bg); border-color: var(--wpfp-primary); color: var(--wpfp-primary); }
.wpfp-qty-compact .wpfp-qty-val { min-width: 26px; text-align: center; font-size: 16px; font-weight: 800; }

/* Link discreto pra revelar o campo de observações */
.wpfp-quick-note-link {
	background: none;
	border: none;
	color: var(--wpfp-primary);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 6px 2px;
	margin-top: 4px;
	border-radius: 6px;
	transition: opacity .12s;
}
.wpfp-quick-note-link:hover { opacity: .75; text-decoration: underline; }

/* CTA principal — alto contraste, sempre visível */
.wpfp-quick-cta {
	background: var(--wpfp-primary) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 18px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 14px rgba(225,29,72,.35);
}
.wpfp-quick-cta:hover { filter: brightness(.95); }

/* No tablet, manter o sheet com tamanho fixo e altura controlada */
@media (min-width: 720px) {
	.wpfp-quick-panel { max-height: 85vh; }
}
.wpfp-cart-note {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 8px;
	background: #fef3c7;
	color: #92400e;
	border-radius: 6px;
	font-size: 12px !important;
}

/* Tablet+ */
@media (min-width: 720px) {
	.wpfp-grid-cards { grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
	.wpfp-size-grid, .wpfp-count-grid, .wpfp-border-grid { grid-template-columns: repeat(4, 1fr); }
	.wpfp-pizza-svg { width: 360px; }
	.wpfp-sheet { align-items: center; justify-content: center; padding: 20px; }
	.wpfp-sheet-panel { max-width: 520px; max-height: 80vh; border-radius: 18px; }
}

/* ============================================
 * Checkout em multistep (v1.13.3+)
 * ============================================ */
.wpfp-checkout-progress {
	/* Mobile: sem chrome próprio — já está dentro do card do carrinho. */
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 14px;
	box-shadow: none;
}
@media (min-width: 720px) {
	.wpfp-checkout-progress {
		background: var(--wpfp-card);
		border: 1px solid var(--wpfp-border);
		border-radius: 14px;
		padding: 14px 16px;
		box-shadow: 0 1px 2px rgba(15,23,42,.04);
	}
}
.wpfp-checkout-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: 12px;
}
.wpfp-checkout-step-num {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wpfp-muted);
}
.wpfp-checkout-step-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--wpfp-text);
	letter-spacing: -.01em;
}
.wpfp-checkout-progress-bar {
	height: 6px;
	background: var(--wpfp-border);
	border-radius: 999px;
	overflow: hidden;
}
.wpfp-checkout-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wpfp-primary), #fb7185);
	border-radius: 999px;
	transition: width .25s ease;
}

/* Barra de totais persistente — acompanha todos os steps do checkout */
.wpfp-ctotals {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 18px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 14px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wpfp-ctotals-row {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	color: var(--wpfp-muted);
}
.wpfp-ctotals-num { font-weight: 700; color: var(--wpfp-text); }
.wpfp-ctotals-grand {
	margin-left: auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--wpfp-text);
}
.wpfp-ctotals-grand .wpfp-ctotals-num { color: var(--wpfp-primary); font-size: 17px; letter-spacing: -.01em; }

.wpfp-checkout-step {
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wpfp-checkout-step h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.wpfp-checkout-step > p.wpfp-muted { margin: 0 0 14px; font-size: 13px; }

.wpfp-checkout-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--wpfp-border);
}
.wpfp-checkout-nav .wpfp-btn-primary { min-width: 160px; }
/* Mobile: navegação do checkout fixa no rodapé — sempre acessível durante os passos.
   Full-bleed até as bordas do card do carrinho (padding mobile = 12px) + safe-area. */
@media (max-width: 719px) {
	.wpfp-checkout-nav {
		position: sticky;
		bottom: 0;
		z-index: 30;
		margin: 14px -12px -12px;
		padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		border-top: 1px solid var(--wpfp-border);
		border-radius: 0 0 14px 14px;
	}
	/* Teclado aberto (campo focado): vira estático pra não brigar com o iOS. */
	.wpfp-cart-view.wpfp-kbd .wpfp-checkout-nav {
		position: static;
		margin: 14px 0 0;
		padding: 14px 0 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-radius: 0;
	}
}

.wpfp-cart-totals-inline { margin-top: 14px; }
.wpfp-pay-detail {
	margin-top: 14px;
	padding: 14px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
}
.wpfp-pay-detail .wpfp-field-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--wpfp-text-2, #334155);
	margin-bottom: 8px;
}

.wpfp-confirm-summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--wpfp-bg);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
	padding: 14px;
	margin: 4px 0 14px;
}
.wpfp-confirm-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	align-items: flex-start;
}
.wpfp-confirm-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--wpfp-muted);
	letter-spacing: -.005em;
	padding-top: 2px;
}
.wpfp-confirm-value { display: flex; flex-direction: column; gap: 2px; }
.wpfp-confirm-value strong { font-size: 14px; font-weight: 700; color: var(--wpfp-text); line-height: 1.3; }
.wpfp-confirm-value small { font-size: 12px; color: var(--wpfp-muted); line-height: 1.3; }

@media (max-width: 480px) {
	.wpfp-checkout-step { padding: 14px; }
	.wpfp-checkout-nav .wpfp-btn { padding: 11px 14px; font-size: 13px; }
	.wpfp-checkout-nav .wpfp-btn-primary { min-width: 0; flex: 1; }
	.wpfp-confirm-row { grid-template-columns: 90px 1fr; }
}

/* ===================================================================
 * Revisão a11y / contraste / toque (v1.16.0)
 * =================================================================== */
/* Contraste AA em textos pequenos (>=4.5:1 em fundo claro) */
.wpfp-card-desc { color: var(--wpfp-muted); }
.wpfp-summary-flavor-price { color: var(--wpfp-text-2); }
.wpfp-pix-payload-preview { color: var(--wpfp-muted); }
.wpfp-zoom-caption { color: rgba(255,255,255,.88); }

/* Alvos de toque confortáveis (>=40-44px) sem inchar o ícone */
.wpfp-cart-remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.wpfp-cart-item-controls .wpfp-qty-btn { min-width: 40px; min-height: 40px; }
.wpfp-sheet-close { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.wpfp-zoom-btn { width: 34px; height: 34px; }

/* Foco visível consistente (teclado), independente do tema */
.wpfp-tab:focus-visible,
.wpfp-cat-btn:focus-visible,
.wpfp-size-card:focus-visible,
.wpfp-border-card:focus-visible,
.wpfp-count-card:focus-visible,
.wpfp-qty-btn:focus-visible,
.wpfp-btn:focus-visible { outline: 2px solid var(--wpfp-primary); outline-offset: 2px; }

/* Sinaliza scroll horizontal na barra de categorias com fade nas bordas */
.wpfp-cat-bar {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Botão desabilitado: muda cor + cursor (não depende só de opacidade) */
.wpfp-btn-disabled,
.wpfp-btn:disabled {
	background: var(--wpfp-border) !important;
	color: var(--wpfp-muted-2) !important;
	border-color: var(--wpfp-border) !important;
	box-shadow: none !important;
	opacity: 1;
	cursor: not-allowed;
}

/* ===================================================================
 * Builder: card de tamanho com glifo realista + carrinho (v1.18.0)
 * =================================================================== */
.wpfp-size-card-rich {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 6px; padding: 14px 12px;
}
/* Baseline comum: glifos de tamanhos diferentes alinham embaixo → diferença fica óbvia */
.wpfp-size-glyph-wrap { display: flex; align-items: flex-end; justify-content: center; min-height: 88px; width: 100%; }
.wpfp-size-glyph { display: block; line-height: 0; filter: drop-shadow(0 4px 6px rgba(180,120,20,.18)); }
.wpfp-size-glyph svg { display: block; }
.wpfp-size-card-body { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.wpfp-size-card-rich .wpfp-size-sub { align-self: center; }
.wpfp-size-card-rich .wpfp-size-meta { font-weight: 700; }
.wpfp-size-desc { font-size: 12px; color: var(--wpfp-muted); line-height: 1.3; }

/* Badge de zoom refinado (limpo, não "grosseiro") */
.wpfp-zoom-btn-sm {
	width: 22px; height: 22px; padding: 0;
	background: var(--wpfp-card); color: var(--wpfp-text-2);
	border: 1px solid rgba(15,23,42,.10);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(15,23,42,.18);
	display: flex; align-items: center; justify-content: center;
}
.wpfp-zoom-btn-sm:hover { background: var(--wpfp-card); color: var(--wpfp-primary); transform: scale(1.08); }
.wpfp-zoom-btn-sm svg { display: block; }
.wpfp-zoom-btn svg { display: block; }

/* Carrinho: foto ocupa 100% da altura do card (largura = coluna do grid, sem transbordar) */
.wpfp-cart-item { align-items: stretch; grid-template-columns: 84px 1fr auto; }
@media (min-width: 720px) { .wpfp-cart-item { grid-template-columns: 96px 1fr auto; } }
.wpfp-cart-thumb {
	width: 100%; height: auto; align-self: stretch;
	object-fit: cover; border-radius: 12px; min-height: 84px;
}
.wpfp-cart-thumb-fallback { display: flex; align-items: center; justify-content: center; background: var(--wpfp-bg); font-size: 30px; }

/* Botão Remover: ícone SVG + label, ghost danger */
.wpfp-cart-remove {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; border: 1px solid var(--wpfp-border);
	color: var(--wpfp-muted); cursor: pointer;
	padding: 6px 12px; border-radius: var(--wpfp-r-pill, 999px);
	font-size: 12px; font-weight: 700;
	transition: color .15s, border-color .15s, background .15s;
}
.wpfp-cart-remove svg { display: block; }
.wpfp-cart-remove:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.wpfp-cart-item-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; justify-content: center; }

/* ===== Card do carrinho v3 — mobile: foto + texto no topo, controles em linha própria abaixo ===== */
.wpfp-cart-item {
	grid-template-columns: 88px 1fr;
	grid-template-areas: "thumb info" "controls controls";
	column-gap: 12px; row-gap: 10px;
	align-items: start;
	padding: 10px;
}
.wpfp-cart-thumb {
	grid-area: thumb;
	width: 88px; height: 88px; min-height: 0;
	align-self: start;
	object-fit: cover; border-radius: 12px;
}
.wpfp-cart-item-info { grid-area: info; align-self: center; }
.wpfp-cart-item-controls {
	grid-area: controls;
	flex-direction: row; align-items: center; justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wpfp-border);
}
@media (min-width: 720px) {
	.wpfp-cart-item {
		grid-template-columns: 96px 1fr auto;
		grid-template-areas: "thumb info controls";
		align-items: stretch; column-gap: 14px;
	}
	.wpfp-cart-thumb { grid-area: thumb; width: 100%; height: 100%; align-self: stretch; }
	.wpfp-cart-item-info { align-self: center; }
	/* Desktop: quantidade e Remover lado a lado (Remover à direita do +/−). */
	.wpfp-cart-item-controls {
		flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px;
		padding-top: 0; border-top: 0;
	}
}

/* ===================================================================
 * PIX em 2 colunas + resumo com breakdown (v1.18.0)
 * =================================================================== */
.wpfp-pix-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.wpfp-pix-data { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpfp-pix-qr { margin: 0; }
@media (min-width: 560px) {
	.wpfp-pix-grid { grid-template-columns: 1fr 220px; }
	.wpfp-pix-qr { align-self: start; }
}
/* Botão copiar discreto */
.wpfp-pix-copy {
	flex-shrink: 0;
	background: var(--wpfp-card); color: var(--wpfp-muted);
	border: 1px solid var(--wpfp-border);
	border-radius: var(--wpfp-r-pill, 999px);
	padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.wpfp-pix-copy:hover { color: #0d9488; border-color: #99f6e4; background: #f0fdfa; }
.wpfp-pix-copy-primary { color: #0d9488; border-color: #99f6e4; }
.wpfp-pix-copy-primary:hover { background: #ccfbf1; }

/* Resumo: destaque do sabor de maior valor (de onde vem o preço) */
.wpfp-summary-flavor.is-base {
	background: #fff1f3;
	box-shadow: inset 0 0 0 1.5px var(--wpfp-primary);
}
.wpfp-summary-flavor-price.is-base { color: var(--wpfp-primary); font-weight: 800; }
.wpfp-base-tag {
	display: inline-block; margin-left: 8px;
	background: var(--wpfp-primary); color: #fff;
	font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
	padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}

/* Resumo: breakdown transparente do cálculo */
.wpfp-summary-breakdown {
	display: flex; flex-direction: column; gap: 5px;
	padding: 12px 14px; margin-bottom: 2px;
	background: var(--wpfp-bg, #f8fafc);
	border: 1px solid var(--wpfp-border);
	border-radius: 12px;
}
.wpfp-bd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; color: var(--wpfp-text-2, #334155); }
.wpfp-bd-row span:first-child { color: var(--wpfp-muted); min-width: 0; }
.wpfp-bd-val { font-weight: 700; color: var(--wpfp-text, #0f172a); white-space: nowrap; }
.wpfp-bd-add { font-weight: 700; color: #0d9488; white-space: nowrap; }
.wpfp-bd-border .wpfp-bd-add { color: var(--wpfp-primary); }
.wpfp-summary-total-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px;
	background: linear-gradient(135deg, #fff1f3 0%, #ffe4e9 100%);
	border: 1px solid #fecdd6; border-radius: 14px;
}

/* ===================================================================
 * Taxa de entrega destacada + QR centralizado (v1.20.1)
 * =================================================================== */
.wpfp-delivery-addr { margin: 10px 0 8px; font-size: 13px; color: var(--wpfp-text); font-weight: 600; }
.wpfp-delivery-fee {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 14px; border-radius: 12px;
	background: #ecfdf5; border: 1px solid #a7f3d0;
}
.wpfp-delivery-fee span { font-size: 13px; font-weight: 700; color: #065f46; }
.wpfp-delivery-fee strong { font-size: 18px; font-weight: 800; color: #0d9488; white-space: nowrap; }

/* QR PIX: alinhado ao TOPO da coluna (não centralizado — a coluna esquerda é mais alta). */
.wpfp-pix-qr { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 10px; height: auto; }

/* ===================================================================
 * Cardápio v2: busca, ícones nos botões, título destacado (v1.21.0)
 * =================================================================== */
.wpfp-menu-search {
	position: relative; display: flex; align-items: center; margin: 4px 0 6px;
}
.wpfp-menu-search > svg { position: absolute; left: 14px; color: var(--wpfp-muted-2, #94a3b8); pointer-events: none; }
.wpfp-menu-search-input {
	width: 100%; padding: 12px 14px 12px 40px;
	border: 1px solid var(--wpfp-border); border-radius: var(--wpfp-r-pill, 999px);
	background: var(--wpfp-card, #fff); font-size: 15px; font-family: inherit; color: var(--wpfp-text);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wpfp-menu-search-input:focus { outline: none; border-color: var(--wpfp-primary); box-shadow: 0 0 0 3px rgba(225,29,72,.12); }

/* Ícones nos botões (alinhamento) */
.wpfp-btn svg { display: block; flex-shrink: 0; }
.wpfp-btn-sm svg { width: 14px; height: 14px; }

/* Título do produto mais destacado + legibilidade */
.wpfp-card-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--wpfp-text); line-height: 1.18; }
.wpfp-card-desc { font-size: 12.5px; line-height: 1.4; color: var(--wpfp-muted); }
.wpfp-card-price { font-size: 13px; font-weight: 800; line-height: 1.2; }
@media (min-width: 720px) { .wpfp-card-price { font-size: 13.5px; } }
@media (min-width: 720px) { .wpfp-card-title { font-size: 18px; } }
.wpfp-tag-warn svg { display: block; }
.wpfp-tag-warn { color: #f59e0b; background: #fef3c7; }

/* Hero: o header controla a própria margem (full-bleed no mobile via .wpfp-app .wpfp-header). */
.wpfp-app { padding-top: 8px; }
@media (min-width: 720px) { .wpfp-app { padding-top: 2px; } }

/* ===================================================================
 * Seletor "Quantos sabores?" abaixo da pizza (v1.21.2) — neutro e claro
 * =================================================================== */
.wpfp-flavorcount {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	max-width: 420px; margin: 6px auto 4px; padding: 12px 16px;
	background: var(--wpfp-card, #fff);
	border: 1px solid var(--wpfp-border, #e5e7eb);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.wpfp-flavorcount-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpfp-flavorcount-info strong { font-size: 15px; color: var(--wpfp-text, #0f172a); }
.wpfp-flavorcount-info small { font-size: 12px; color: var(--wpfp-muted, #6b7280); line-height: 1.3; }
.wpfp-fc-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wpfp-fc-btn {
	width: 44px; height: 44px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; cursor: pointer;
	background: var(--wpfp-card); color: var(--wpfp-primary);
	border: 1.5px solid var(--wpfp-border, #e5e7eb);
	transition: background .15s, border-color .15s, transform .1s;
}
.wpfp-fc-btn:hover:not(:disabled) { border-color: var(--wpfp-primary); background: #fff1f3; }
.wpfp-fc-btn:active:not(:disabled) { transform: scale(.94); }
.wpfp-fc-btn:disabled { opacity: .4; cursor: not-allowed; color: var(--wpfp-muted-2, #94a3b8); }
.wpfp-fc-btn svg { display: block; }
.wpfp-fc-val { min-width: 52px; text-align: center; display: flex; flex-direction: column; line-height: 1; }
.wpfp-fc-val strong { font-size: 22px; font-weight: 800; color: var(--wpfp-text, #0f172a); }
.wpfp-fc-val small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wpfp-muted, #6b7280); margin-top: 2px; }
@media (max-width: 480px) {
	.wpfp-flavorcount { padding: 12px 14px; }
	.wpfp-flavorcount-info strong { font-size: 14px; }
}

/* ===================================================================
 * Flavor sheet com ALTURA FIXA (v1.21.3) — não varia com nº de itens
 * =================================================================== */
.wpfp-sheet-panel.wpfp-flavor-sheet { height: 86vh; max-height: 86vh; }
@media (min-width: 720px) {
	.wpfp-sheet-panel.wpfp-flavor-sheet { height: min(640px, 84vh); max-height: 84vh; }
}
/* Head, busca e chips ficam fixos; só a lista rola */
.wpfp-flavor-sheet .wpfp-sheet-head,
.wpfp-flavor-sheet .wpfp-sheet-search,
.wpfp-flavor-sheet .wpfp-cat-bar { flex: 0 0 auto; }
.wpfp-flavor-sheet .wpfp-sheet-list { flex: 1 1 auto; min-height: 0; }
/* Chips com altura consistente (não esticam) */
.wpfp-flavor-sheet .wpfp-cat-btn { align-self: center; }

/* ===================================================================
 * Zoom do card: discreto e acoplado ao canto (offset negativo) v1.21.4
 * =================================================================== */
.wpfp-card-img-wrap { overflow: visible; }
.wpfp-zoom-btn {
	width: 24px; height: 24px;
	bottom: -5px; right: -5px;
	background: var(--wpfp-card); color: var(--wpfp-muted);
	border: 1px solid rgba(15,23,42,.10);
	box-shadow: 0 2px 6px rgba(15,23,42,.20);
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
.wpfp-zoom-btn:hover { background: var(--wpfp-card); color: var(--wpfp-primary); transform: scale(1.1); }
.wpfp-zoom-btn svg { width: 12px; height: 12px; }
@media (min-width: 720px) { .wpfp-zoom-btn { width: 26px; height: 26px; bottom: -6px; right: -6px; } }

/* ===================================================================
 * Pagamento online (Mercado Pago) — campos extras, PIX online, cartão
 * =================================================================== */

/* Bloco de identidade (e-mail + CPF) na etapa de pagamento. */
.wpfp-online-identity { margin-top: 10px; }
.wpfp-online-intro { margin-top: 10px; }

/* Spinner pequeno (reaproveita a animação wpfp-spin). */
.wpfp-spinner-sm {
	width: 18px; height: 18px; border-width: 2.5px; margin: 0;
	display: inline-block; vertical-align: middle;
}

/* --- Sheet de pagamento (bottom sheet mobile / modal centralizado desktop) --- */
.wpfp-pay-sheet-overlay {
	position: fixed; inset: 0; z-index: 1300;
	display: flex; align-items: flex-end; justify-content: center;
	padding: 0;
	background: rgba(15, 23, 42, 0);
	transition: background .22s ease;
}
.wpfp-pay-sheet-overlay.is-open { background: rgba(15, 23, 42, .55); }
.wpfp-pay-sheet {
	width: 100%; max-width: 480px;
	max-height: 92vh; overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--wpfp-card);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -10px 50px rgba(15, 23, 42, .3);
	transform: translateY(100%); opacity: 1;
	transition: transform .26s cubic-bezier(.22, 1, .36, 1);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.wpfp-pay-sheet-overlay.is-open .wpfp-pay-sheet { transform: none; }
@media (min-width: 560px) {
	.wpfp-pay-sheet-overlay { align-items: center; padding: 18px; }
	.wpfp-pay-sheet { border-radius: 18px; max-height: 88vh; }
	.wpfp-pay-sheet { transform: translateY(16px) scale(.98); }
	.wpfp-pay-sheet-overlay.is-open .wpfp-pay-sheet { transform: none; }
}
.wpfp-pay-sheet-head {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 16px 10px;
	background: var(--wpfp-card);
	border-bottom: 1px solid var(--wpfp-border);
}
.wpfp-pay-sheet-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--wpfp-text); }
.wpfp-pay-sheet-close {
	width: 34px; height: 34px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wpfp-bg); border: none; border-radius: 10px; color: var(--wpfp-text); cursor: pointer;
}
.wpfp-pay-sheet-close:hover { background: #eef1f5; }
.wpfp-pay-sheet-body { padding: 16px; }

/* Estados: loading / erro / sucesso. */
.wpfp-pay-loading { text-align: center; padding: 24px 8px; }
.wpfp-pay-loading p { margin: 12px 0 0; }
.wpfp-pay-error { text-align: center; padding: 12px 8px; }
.wpfp-pay-error-ico { font-size: 34px; margin-bottom: 6px; }
.wpfp-pay-error p { margin: 0 0 4px; color: var(--wpfp-text); font-weight: 600; }

.wpfp-pay-success { text-align: center; padding: 8px; }
.wpfp-pay-success-ico { font-size: 48px; margin-bottom: 6px; }
.wpfp-pay-success h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--wpfp-text); }
.wpfp-pay-success-code {
	margin: 12px auto; padding: 12px;
	background: var(--wpfp-bg); border-radius: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 22px; font-weight: 700; letter-spacing: .1em; color: var(--wpfp-text);
}

/* Status de pagamento (aguardando / aviso). */
.wpfp-pay-status {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 14px; padding: 12px;
	background: var(--wpfp-bg); border-radius: 12px;
	font-size: 13.5px; font-weight: 600; color: var(--wpfp-muted);
}
.wpfp-pay-status-warn { color: var(--wpfp-primary); font-weight: 700; }

/* --- PIX online (QR + valor + copia-e-cola) --- */
.wpfp-pix-online { text-align: center; }
.wpfp-pix-online-qrwrap {
	display: inline-block; padding: 10px;
	background: #fff; border: 1px solid var(--wpfp-border);
	border-radius: 14px; margin-bottom: 12px;
}
.wpfp-pix-online-qr { display: block; width: 220px; max-width: 60vw; height: auto; image-rendering: pixelated; }
.wpfp-pix-online-value {
	display: flex; flex-direction: column; gap: 2px; align-items: center;
	margin-bottom: 12px;
}
.wpfp-pix-online-value strong { font-size: 22px; font-weight: 800; color: var(--wpfp-text); }
.wpfp-pix-online-exp { margin: 10px 0 0; font-size: 12.5px; }

/* --- Cartão online (form seguro) --- */
.wpfp-card-form-total {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px; margin-bottom: 14px;
	background: var(--wpfp-bg); border-radius: 12px;
}
.wpfp-card-form-total strong { font-size: 18px; font-weight: 800; color: var(--wpfp-text); }
.wpfp-card-form .wpfp-form-grid { margin-bottom: 6px; }

/* ===================================================================
 * Cross-sell (tela após montar pizza)
 * =================================================================== */
.wpfp-upsell { padding: 8px 2px 90px; max-width: 560px; margin: 0 auto; }
.wpfp-upsell-head { text-align: center; margin: 10px 0 18px; }
.wpfp-upsell-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: #dcfce7; color: #16a34a; margin-bottom: 10px;
}
.wpfp-upsell-head h2 { margin: 0; font-size: 21px; color: var(--wpfp-text); }
.wpfp-upsell-sub { margin: 4px 0 0; font-size: 14px; color: var(--wpfp-muted); font-weight: 600; }
.wpfp-upsell-q { text-align: center; font-size: 14px; color: var(--wpfp-text-2, var(--wpfp-muted)); margin: 0 0 12px; font-weight: 600; }
.wpfp-upsell-opts { display: flex; flex-direction: column; gap: 10px; }
.wpfp-upsell-opt {
	display: flex; align-items: center; gap: 13px; width: 100%;
	padding: 14px 16px; cursor: pointer; text-align: left;
	background: var(--wpfp-card); border: 1px solid var(--wpfp-border); border-radius: 14px;
	transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.wpfp-upsell-opt:hover { border-color: var(--wpfp-primary); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.wpfp-upsell-opt:active { transform: scale(.99); }
.wpfp-upsell-opt-ico {
	flex: none; width: 42px; height: 42px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wpfp-primary-50, #fff1f3); color: var(--wpfp-primary);
}
.wpfp-upsell-opt-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpfp-upsell-opt-txt strong { font-size: 15px; color: var(--wpfp-text); }
.wpfp-upsell-opt-txt span { font-size: 12.5px; color: var(--wpfp-muted); }
.wpfp-upsell-opt-chev { flex: none; color: var(--wpfp-muted); display: inline-flex; }

/* ===================================================================
 * Acompanhamento público do pedido (botão, modal de busca, timeline)
 * =================================================================== */
/* Botão no header */
.wpfp-track-btn {
	flex: none;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 999px;
	background: var(--wpfp-card); color: var(--wpfp-text);
	border: 1px solid var(--wpfp-border);
	font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
}
.wpfp-track-btn:hover { background: var(--wpfp-bg); border-color: var(--wpfp-border-strong, var(--wpfp-border)); }
/* Grupo Entrar + Criar conta */
.wpfp-acct-actions { display: inline-flex; align-items: center; gap: 6px; }
.wpfp-acct-btn-primary { background: var(--wpfp-primary); color: #fff; border-color: var(--wpfp-primary); }
.wpfp-acct-btn-primary:hover { background: var(--wpfp-primary-700, var(--wpfp-primary)); border-color: var(--wpfp-primary-700, var(--wpfp-primary)); color: #fff; }
.wpfp-track-btn:active { transform: scale(.97); }
.wpfp-track-btn svg { flex: none; }
@media (max-width: 560px) {
	/* No mobile o botão fica só com ícone (texto completo vai pro drawer) p/ caber
	   na mesma linha da infobar. Tightening leve nos segmentos pra não cortar texto. */
	.wpfp-track-btn span { display: none; }
	.wpfp-track-btn { padding: 9px; }
	.wpfp-acct-create { display: none; } /* "Criar conta" fica no drawer/tela de conta no mobile */
	.wpfp-header-aside { gap: 6px; }
	.wpfp-hero-info { padding: 8px 7px; gap: 4px; }
}

/* Modal de busca */
.wpfp-track-modal { background: var(--wpfp-card); border-radius: 16px; padding: 22px; max-width: 400px; width: 92vw; color: var(--wpfp-text); text-align: left; }
.wpfp-track-saved-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wpfp-muted); margin-bottom: 6px; }
.wpfp-track-saved { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.wpfp-track-saved-item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 13px; border-radius: 11px; cursor: pointer;
	background: var(--wpfp-bg); border: 1px solid var(--wpfp-border); color: var(--wpfp-text);
	transition: border-color .15s ease, background .15s ease;
}
.wpfp-track-saved-item:hover { border-color: var(--wpfp-primary); }
.wpfp-track-saved-code { font-family: monospace; font-weight: 800; font-size: 15px; letter-spacing: .06em; }
.wpfp-track-saved-meta { font-size: 12.5px; color: var(--wpfp-muted); }
.wpfp-track-or { text-align: center; font-size: 12px; color: var(--wpfp-muted); margin: 14px 0 10px; position: relative; }
.wpfp-track-form { display: flex; flex-direction: column; gap: 8px; }
.wpfp-track-form-label { font-size: 13px; font-weight: 700; }
.wpfp-track-modal .wpfp-input {
	width: 100%; padding: 11px 13px; border-radius: 10px;
	border: 1px solid var(--wpfp-border); background: var(--wpfp-bg); color: var(--wpfp-text);
	font-size: 15px; box-sizing: border-box;
}
.wpfp-track-modal .wpfp-input:focus { outline: none; border-color: var(--wpfp-primary); }
.wpfp-track-form-err { color: #dc2626; font-size: 12.5px; margin: 0; }

/* Tela de timeline */
.wpfp-track-view { padding: 4px 2px 20px; }
.wpfp-track-back {
	display: inline-flex; align-items: center; gap: 5px;
	background: none; border: none; color: var(--wpfp-muted);
	font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 6px 2px; margin-bottom: 10px;
}
.wpfp-track-back:hover { color: var(--wpfp-text); }
.wpfp-track-loading, .wpfp-track-error { text-align: center; padding: 40px 16px; color: var(--wpfp-muted); }
.wpfp-track-gone { text-align: center; padding: 40px 20px; color: var(--wpfp-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wpfp-track-gone svg { color: var(--wpfp-muted); opacity: .7; }
.wpfp-track-gone-msg { font-size: 16px; font-weight: 700; color: var(--wpfp-text); margin: 4px 0 0; }
.wpfp-track-gone-sub { font-size: 13px; margin: 0 0 8px; max-width: 320px; }
.wpfp-track-error .wpfp-btn { margin-top: 12px; }
.wpfp-track-head { margin-bottom: 18px; }
.wpfp-track-head-lbl { display: block; font-size: 13px; color: var(--wpfp-muted); margin-bottom: 4px; }
.wpfp-track-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wpfp-track-code { font-family: monospace; font-size: 30px; font-weight: 800; letter-spacing: .1em; color: var(--wpfp-text); }
.wpfp-track-copy {
	padding: 6px 12px; border-radius: 999px; cursor: pointer;
	background: var(--wpfp-primary); color: #fff; border: none; font-size: 12.5px; font-weight: 700;
}
.wpfp-track-copy:active { transform: scale(.96); }

/* Timeline vertical */
.wpfp-track-timeline { list-style: none; padding: 0; margin: 0 0 6px; }
.wpfp-track-step { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.wpfp-track-step:last-child { padding-bottom: 0; }
.wpfp-track-step::before { /* linha conectora */
	content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--wpfp-border);
}
.wpfp-track-step:last-child::before { display: none; }
.wpfp-track-step.is-done::before { background: var(--wpfp-primary); }
.wpfp-track-step-dot {
	flex: none; width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wpfp-card); border: 2px solid var(--wpfp-border); color: #fff; z-index: 1;
}
.wpfp-track-step.is-done .wpfp-track-step-dot { background: var(--wpfp-primary); border-color: var(--wpfp-primary); }
.wpfp-track-step.is-active .wpfp-track-step-dot {
	background: var(--wpfp-primary); border-color: var(--wpfp-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpfp-primary) 22%, transparent);
	animation: wpfp-track-pulse 1.6s ease-in-out infinite;
}
@keyframes wpfp-track-pulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpfp-primary) 22%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--wpfp-primary) 8%, transparent); } }
.wpfp-track-step-txt { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; }
.wpfp-track-step-label { font-weight: 700; font-size: 14.5px; color: var(--wpfp-text); }
.wpfp-track-step.is-pending .wpfp-track-step-label { color: var(--wpfp-muted); font-weight: 600; }
.wpfp-track-step-time { font-size: 12px; color: var(--wpfp-muted); }
.wpfp-track-live { font-size: 12px; color: var(--wpfp-muted); margin: 0 0 16px; }
.wpfp-track-canceled {
	display: flex; flex-direction: column; gap: 2px;
	background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
	border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}

/* Cards de itens / info */
.wpfp-track-card { background: var(--wpfp-card); border: 1px solid var(--wpfp-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.wpfp-track-card h4 { margin: 0 0 10px; font-size: 14px; }
.wpfp-track-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wpfp-track-item { display: flex; gap: 10px; align-items: flex-start; }
.wpfp-track-item-qty { flex: none; font-weight: 800; color: var(--wpfp-primary); font-size: 14px; min-width: 26px; }
.wpfp-track-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpfp-track-item-name { font-size: 14px; font-weight: 600; color: var(--wpfp-text); }
.wpfp-track-item-sub { font-size: 12px; color: var(--wpfp-muted); }
.wpfp-track-item-price { flex: none; font-weight: 700; font-size: 14px; color: var(--wpfp-text); }
.wpfp-track-totals { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--wpfp-border); display: flex; flex-direction: column; gap: 5px; }
.wpfp-track-totals > div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--wpfp-muted); }
.wpfp-track-total-grand { font-size: 16px !important; font-weight: 800; color: var(--wpfp-text) !important; }
.wpfp-track-info-row, .wpfp-track-pay { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.wpfp-track-info-lbl { color: var(--wpfp-muted); flex: none; }
.wpfp-track-info-val { text-align: right; color: var(--wpfp-text); }
.wpfp-track-pay.is-paid .wpfp-track-info-val { color: #16a34a; font-weight: 800; }

/* ===================================================================
 * Conta do cliente (login / cadastro / minha conta) + endereços
 * =================================================================== */
.wpfp-acct { padding: 4px 2px 90px; max-width: 480px; margin: 0 auto; }
.wpfp-acct-box { background: var(--wpfp-card); border: 1px solid var(--wpfp-border); border-radius: 16px; padding: 18px; }
.wpfp-acct-box h2 { margin: 0 0 6px; font-size: 20px; color: var(--wpfp-text); }
.wpfp-acct-h3 { margin: 20px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--wpfp-muted); }
.wpfp-acct-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; font-size: 12.5px; font-weight: 600; color: var(--wpfp-text-2, var(--wpfp-muted)); }
.wpfp-app .wpfp-input {
	width: 100%; box-sizing: border-box; padding: 11px 13px;
	border: 1px solid var(--wpfp-border); border-radius: 10px;
	background: var(--wpfp-bg); color: var(--wpfp-text); font-size: 15px;
}
.wpfp-app .wpfp-input:focus { outline: none; border-color: var(--wpfp-primary); }
.wpfp-acct-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 9px; padding: 9px 12px; font-size: 13px; margin: 0 0 12px; }
.wpfp-acct-link { background: none; border: none; color: var(--wpfp-primary); font-weight: 700; cursor: pointer; padding: 0; font-size: 13px; text-decoration: none; }
.wpfp-acct-switch { text-align: center; font-size: 13px; color: var(--wpfp-muted); margin: 14px 0 0; }
.wpfp-acct-orders { display: flex; flex-direction: column; gap: 8px; }
.wpfp-acct-order {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
	padding: 11px 13px; cursor: pointer; text-align: left;
	background: var(--wpfp-bg); border: 1px solid var(--wpfp-border); border-radius: 11px; color: var(--wpfp-text);
}
.wpfp-acct-order:hover { border-color: var(--wpfp-primary); }
.wpfp-acct-order-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpfp-acct-order-main strong { font-family: monospace; font-size: 14px; letter-spacing: .05em; }
.wpfp-acct-order-main span { font-size: 12px; color: var(--wpfp-muted); }
.wpfp-acct-order-status { flex: none; font-size: 11.5px; font-weight: 700; color: var(--wpfp-primary); }
.wpfp-acct-addrs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wpfp-acct-addr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--wpfp-bg); border: 1px solid var(--wpfp-border); border-radius: 11px; }
.wpfp-acct-addr-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpfp-acct-addr-main strong { font-size: 13.5px; color: var(--wpfp-text); }
.wpfp-acct-addr-main span { font-size: 12px; color: var(--wpfp-muted); }
.wpfp-acct-addr-del { flex: none; background: none; border: none; cursor: pointer; font-size: 15px; opacity: .7; }
.wpfp-acct-addr-del:hover { opacity: 1; }
.wpfp-acct-addrform { margin-top: 6px; }
.wpfp-acct-addrform > summary { cursor: pointer; color: var(--wpfp-primary); font-weight: 700; font-size: 13.5px; list-style: none; padding: 6px 0; }
.wpfp-acct-addrform > summary::-webkit-details-marker { display: none; }
.wpfp-acct-addrform .wpfp-input { margin-bottom: 8px; }
.wpfp-app .wpfp-acct-addrform .wpfp-input.is-loading { opacity: .6; background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wpfp-primary) 10%, transparent), transparent); }
.wpfp-acct-cep-hint { display: block; font-size: 11.5px; color: var(--wpfp-muted); margin: -2px 0 10px; line-height: 1.4; }

/* "Minha conta" (logado) — layout em cards organizados */
.wpfp-acct-home { display: flex; flex-direction: column; gap: 14px; }
.wpfp-acct-hero {
	display: flex; align-items: center; gap: 13px;
	background: var(--wpfp-card); border: 1px solid var(--wpfp-border); border-radius: 16px; padding: 16px 18px;
}
.wpfp-acct-avatar {
	flex: none; width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 800; color: #fff;
	background: linear-gradient(135deg, var(--wpfp-primary), var(--wpfp-primary-700, var(--wpfp-primary)));
}
.wpfp-acct-hero-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpfp-acct-hero-info strong { font-size: 17px; color: var(--wpfp-text); line-height: 1.2; }
.wpfp-acct-hero-info small { font-size: 12.5px; color: var(--wpfp-muted); word-break: break-word; }
.wpfp-acct-card { background: var(--wpfp-card); border: 1px solid var(--wpfp-border); border-radius: 16px; padding: 16px 18px; }
.wpfp-acct-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.wpfp-acct-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--wpfp-text); }
.wpfp-acct-card-ico { font-size: 17px; line-height: 1; }
.wpfp-acct-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--wpfp-muted); font-size: 13.5px; margin: 0; }
.wpfp-acct-empty p { margin: 0; }
.wpfp-acct-logout {
	margin-top: 2px; width: 100%; padding: 12px; cursor: pointer;
	background: none; border: 1px solid var(--wpfp-border); border-radius: 12px;
	color: var(--wpfp-muted); font-weight: 700; font-size: 13.5px;
}
.wpfp-acct-logout:hover { color: var(--wpfp-text); border-color: var(--wpfp-border-strong, var(--wpfp-border)); }

/* Campo de telefone com DDI (bandeira) + máscara */
.wpfp-phone { display: flex; gap: 8px; align-items: stretch; }
.wpfp-app .wpfp-phone-ddi {
	flex: none; width: auto; max-width: 130px;
	padding: 11px 8px; border: 1px solid var(--wpfp-border); border-radius: 10px;
	background: var(--wpfp-bg); color: var(--wpfp-text); font-size: 14px; cursor: pointer;
}
.wpfp-app .wpfp-phone-ddi:focus { outline: none; border-color: var(--wpfp-primary); }
.wpfp-phone .wpfp-phone-num { flex: 1; min-width: 0; }

/* Picker de endereço salvo no checkout */
.wpfp-addr-picker { margin-bottom: 14px; }
.wpfp-addr-picker-title { margin: 0 0 8px; font-size: 14px; color: var(--wpfp-text); }
.wpfp-addr-card {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
	padding: 11px 13px; margin-bottom: 8px;
	background: var(--wpfp-card); border: 1.5px solid var(--wpfp-border); border-radius: 12px; color: var(--wpfp-text);
	transition: border-color .15s ease;
}
.wpfp-addr-card:hover { border-color: var(--wpfp-primary); }
.wpfp-addr-card.is-picked { border-color: var(--wpfp-primary); background: var(--wpfp-primary-50, #fff1f3); }
.wpfp-addr-card-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpfp-addr-card-main strong { font-size: 13.5px; }
.wpfp-addr-card-main span { font-size: 12px; color: var(--wpfp-muted); }
.wpfp-addr-card-tick { flex: none; color: var(--wpfp-primary); display: inline-flex; }
.wpfp-addr-or { text-align: center; font-size: 12px; color: var(--wpfp-muted); margin: 6px 0 0; }