/* ===================================================================
 * WP Pizza Fácil — Design System (Frontend) v1.13.x
 * Tokens + refinamentos escopados em .wpfp-app.
 * =================================================================== */

.wpfp-app {
	/* Tokens — herdam o que já é declarado, mas refinados */
	--wpfp-primary: #e11d48;
	--wpfp-primary-700: #be123c;
	--wpfp-primary-50: #fff1f3;
	--wpfp-dark: #0f172a;
	--wpfp-bg: #f7f8fa;
	--wpfp-card: #ffffff;
	--wpfp-border: #e5e7eb;
	--wpfp-border-strong: #cbd5e1;
	--wpfp-text: #0f172a;
	--wpfp-text-2: #334155;
	--wpfp-muted: #64748b;
	--wpfp-muted-2: #94a3b8;

	--wpfp-r-xs: 6px;
	--wpfp-r-sm: 8px;
	--wpfp-r-md: 10px;
	--wpfp-r-lg: 12px;
	--wpfp-r-xl: 14px;
	--wpfp-r-pill: 999px;

	--wpfp-sh-xs: 0 1px 2px rgba(15,23,42,.04);
	--wpfp-sh-sm: 0 1px 3px rgba(15,23,42,.08);
	--wpfp-sh-md: 0 4px 12px rgba(15,23,42,.08);
	--wpfp-sh-primary: 0 4px 14px rgba(225,29,72,.30);

	--wpfp-t-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
	--wpfp-t-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);

	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============ Botões padronizados no .wpfp-app ============ */
.wpfp-app .wpfp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 16px;
	border-radius: var(--wpfp-r-md);
	border: 1.5px solid var(--wpfp-border);
	background: var(--wpfp-card);
	color: var(--wpfp-text);
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: -.005em;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--wpfp-t-fast), border-color var(--wpfp-t-fast), color var(--wpfp-t-fast), box-shadow var(--wpfp-t-fast), transform var(--wpfp-t-fast);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.wpfp-app .wpfp-btn:hover { background: var(--wpfp-bg); border-color: var(--wpfp-border-strong); }
.wpfp-app .wpfp-btn:active { transform: translateY(1px); }
.wpfp-app .wpfp-btn:disabled, .wpfp-app .wpfp-btn-disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

.wpfp-app .wpfp-btn-primary {
	background: var(--wpfp-primary);
	border-color: var(--wpfp-primary);
	color: #fff;
	box-shadow: var(--wpfp-sh-primary);
}
.wpfp-app .wpfp-btn-primary:hover { background: var(--wpfp-primary-700); border-color: var(--wpfp-primary-700); color: #fff; }

.wpfp-app .wpfp-btn-dark {
	background: var(--wpfp-dark);
	border-color: var(--wpfp-dark);
	color: #fff;
}
.wpfp-app .wpfp-btn-dark:hover { background: #1e293b; border-color: #1e293b; color: #fff; }

.wpfp-app .wpfp-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--wpfp-text-2);
}
.wpfp-app .wpfp-btn-ghost:hover { background: var(--wpfp-bg); border-color: var(--wpfp-border); }

.wpfp-app .wpfp-btn-sm { padding: 8px 12px; font-size: 13px; border-radius: var(--wpfp-r-sm); }
.wpfp-app .wpfp-btn-block { width: 100%; }

/* ============ Tabs (Cardápio / Montar / Carrinho) — estilo Foodly ============ */
.wpfp-app .wpfp-tabs {
	display: flex;
	gap: 4px;
	background: var(--wpfp-card);
	border: 1px solid var(--wpfp-border);
	border-radius: var(--wpfp-r-pill);
	padding: 4px;
	margin: 8px 0;
}
.wpfp-app .wpfp-tab {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 9px 12px;
	border-radius: var(--wpfp-r-pill);
	font-family: inherit;
	font-weight: 700;
	font-size: 13px;
	color: var(--wpfp-muted);
	cursor: pointer;
	transition: all var(--wpfp-t-fast);
	white-space: nowrap;
}
.wpfp-app .wpfp-tab:hover { color: var(--wpfp-text); }
.wpfp-app .wpfp-tab.is-active {
	background: var(--wpfp-primary);
	color: #fff;
	/* Sem glow vermelho fixo (--wpfp-sh-primary era hardcoded em rgba(225,29,72)).
	   A aba ativa já se destaca pelo fundo na cor primária do preset. */
	box-shadow: none;
}
@media (min-width: 720px) {
	.wpfp-app .wpfp-tabs { padding: 5px; }
	.wpfp-app .wpfp-tab { padding: 10px 16px; font-size: 14px; }
}

/* ============ Cards refinados ============ */
.wpfp-app .wpfp-header {
	border-radius: var(--wpfp-r-xl);
	box-shadow: var(--wpfp-sh-xs);
	background: linear-gradient(180deg, var(--wpfp-card) 0%, var(--wpfp-card) 100%);
}
.wpfp-app .wpfp-shop-name {
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--wpfp-text);
}

.wpfp-app .wpfp-card-item {
	border-radius: var(--wpfp-r-xl);
	box-shadow: var(--wpfp-sh-xs);
	transition: transform var(--wpfp-t-base), box-shadow var(--wpfp-t-base);
}
.wpfp-app .wpfp-card-item:hover { transform: translateY(-1px); box-shadow: var(--wpfp-sh-md); }
/* Card de pizza (foto redonda saltando à esquerda): cantos esquerdos bem arredondados
   (50px) pra acompanhar a foto; direita normal (14px). Especificidade casa com a regra
   acima e vence por vir depois. */
.wpfp-app .wpfp-card-item--pizza { border-radius: 50px 14px 14px 50px; }

/* ============ Inputs ============ */
.wpfp-app .wpfp-input,
.wpfp-app .wpfp-cep-input {
	border: 1.5px solid var(--wpfp-border);
	transition: border-color var(--wpfp-t-fast), box-shadow var(--wpfp-t-fast), background var(--wpfp-t-fast);
}
.wpfp-app .wpfp-input:focus,
.wpfp-app .wpfp-cep-input:focus {
	outline: none;
	border-color: var(--wpfp-primary);
	box-shadow: 0 0 0 3px rgba(225,29,72,.14);
	background: var(--wpfp-card);
}

/* ============ Badge / Pílulas ============ */
.wpfp-app .wpfp-badge {
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* ============ Categoria chips no menu ============ */
.wpfp-app .wpfp-cat-title {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--wpfp-muted);
}
.wpfp-app .wpfp-section-title {
	font-weight: 800;
	letter-spacing: -.015em;
}

/* ============ CTA Builder destacado ============ */
/* Âmbar "massa de pizza" — distinto do vermelho da marca (usado no tab ativo). */
.wpfp-app .wpfp-cta-builder {
	background: linear-gradient(135deg, #fff1d2 0%, #ffd98a 100%);
	border: 1px solid #f0c24a;
	box-shadow: 0 4px 14px rgba(217,131,36,.18);
}
.wpfp-app .wpfp-cta-builder strong { color: #6b3e0a; }
.wpfp-app .wpfp-cta-builder p { color: #92621a; opacity: 1; }
.wpfp-app .wpfp-cta-builder .wpfp-btn {
	background: var(--wpfp-primary); color: #fff; border-color: var(--wpfp-primary);
	box-shadow: 0 4px 12px rgba(225,29,72,.28);
}
.wpfp-app .wpfp-cta-builder .wpfp-btn:hover { background: var(--wpfp-primary-700, #be123c); }

/* ============ FAB Carrinho mais elegante ============ */
.wpfp-app .wpfp-cart-fab {
	border-radius: var(--wpfp-r-pill);
	box-shadow: var(--wpfp-sh-primary), 0 8px 24px rgba(225,29,72,.22);
	transition: transform var(--wpfp-t-base), box-shadow var(--wpfp-t-base);
}
.wpfp-app .wpfp-cart-fab:hover { transform: translateY(-2px); }

/* ============ Animação utilitária ============ */
@keyframes wpfp-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.wpfp-app .wpfp-notice { animation: wpfp-fade-in .2s ease; }