/**
 * Raw Delivery — UI clean e elegante (direção 02/07/2026, Lucas).
 * Superfícies claras, vermelho institucional #BF2E26 apenas como acento,
 * micro-animações sutis. Mobile-first, base 375px (seção 9.3).
 */
.rawd-app {
	--bg: #FAFAF8;
	--surface: #FFFFFF;
	--border: #ECECE6;
	--border-strong: #E0E0D8;
	--text: #1C1C1A;
	--text-2: #74746A;
	--accent: #BF2E26;
	--accent-dark: #A62721;
	--accent-soft: #FBF1F0;
	--success: #1E7A3C;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow-sm: 0 1px 2px rgba(24, 24, 20, 0.04), 0 1px 6px rgba(24, 24, 20, 0.03);
	--shadow-md: 0 6px 24px rgba(24, 24, 20, 0.10);
	--ease: cubic-bezier(0.2, 0, 0, 1);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	background: var(--bg);
	color: var(--text);
	min-height: 60vh;
	-webkit-font-smoothing: antialiased;
	/* Mata o flash roxo/cinza do toque no mobile (0.5.6). */
	-webkit-tap-highlight-color: transparent;
}

/* Autofill do Chrome pintava os campos de amarelo (0.5.6). */
.rawd-field input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
	-webkit-text-fill-color: #1C1C1A !important;
}

.rawd-shell {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 20px 110px;
}

.rawd-app h1,
.rawd-app h2,
.rawd-title,
.rawd-price,
.rawd-cta,
.rawd-totals-total,
.rawd-cartbar {
	font-family: 'Space Grotesk', -apple-system, sans-serif;
}

/* ---------- Motion ---------- */
@keyframes rawd-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes rawd-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes rawd-sheet-up {
	from { transform: translateY(24%); opacity: 0.6; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes rawd-pop {
	0% { transform: scale(0.4); opacity: 0; }
	70% { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes rawd-shimmer {
	to { background-position-x: -200%; }
}

.rawd-view--enter { animation: rawd-fade-up 0.32s var(--ease) both; }
.rawd-view--enter .rawd-row { animation: rawd-fade-up 0.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
	.rawd-app *, .rawd-app *::before, .rawd-app *::after { animation: none !important; transition: none !important; }
}

/* ---------- Header ---------- */
/* O tema aplica overflow-x:hidden no body/#content para esconder os drawers
   estacionados fora da tela — mas overflow hidden/auto em ancestral mata o
   position:sticky (vira um "scroller" que nunca rola). overflow-x:clip corta
   visualmente do mesmo jeito SEM criar scroll container: drawers continuam
   escondidos e o sticky do app funciona. Só nas páginas que têm o app. */
body:has(#rawd-app),
body:has(#rawd-app) #content {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* Bloco fixo do topo do app: header + faixa "fechado" (quando houver).
   --rawd-top/--rawd-z calculados no app.js a partir do header fixo do tema:
   gruda logo abaixo dele e, no fim do scroll, passa por trás. */
.rawd-top {
	position: sticky;
	top: var(--rawd-top, 0px);
	z-index: var(--rawd-z, 10);
	background: var(--bg);
}

.rawd-header-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 18px 0 14px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}

/* Faixa fixa de loja fechada — discreta, sempre visível, abre os horários. */
.rawd-closed-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	background: #EFEFEA;
	color: var(--text-2);
	font-size: 12.5px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	cursor: pointer;
	line-height: 1.35;
	text-align: center;
	transition: opacity 0.15s var(--ease);
}

.rawd-closed-strip-txt { white-space: normal; min-width: 0; }
.rawd-closed-strip u { text-underline-offset: 2px; }
.rawd-closed-strip:hover { opacity: 0.7; }

.rawd-title-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.rawd-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Status aberto/fechado — clicável, abre os horários. */
.rawd-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	padding: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	line-height: 1;
	transition: opacity 0.15s var(--ease);
}

.rawd-status:hover { opacity: 0.65; }
.rawd-status--open { color: var(--success); }
.rawd-status--closed { color: var(--accent); }

.rawd-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(30, 122, 60, 0.12);
}

.rawd-status--closed .rawd-status-dot { box-shadow: 0 0 0 3px rgba(191, 46, 38, 0.12); }

/* Botões de ícone do header (relógio, info) — leves, traço fino. */
.rawd-iconbtn {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.15s var(--ease), transform 0.12s var(--ease);
}

.rawd-iconbtn:hover { opacity: 0.55; }
.rawd-iconbtn:active { transform: scale(0.94); }

.rawd-back,
.rawd-account {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	min-height: 38px;
	min-width: 38px;
	padding: 0 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	transition: color 0.18s var(--ease), transform 0.12s var(--ease);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Hover clean (direção Lucas 02/07/2026): nunca cor de fundo, só fade do texto. */
.rawd-back:hover, .rawd-account:hover { color: rgba(28, 28, 26, 0.55); }
.rawd-back:active, .rawd-account:active { transform: scale(0.96); }


/* ---------- Cardápio (lista, estilo delivery app) ---------- */
.rawd-list { padding: 8px 0; }

.rawd-row {
	display: flex;
	gap: 14px;
	align-items: center;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--border);
	padding: 16px 4px;
	cursor: pointer;
	transition: opacity 0.15s var(--ease);
	border-radius: var(--radius-sm);
}

.rawd-row:hover .rawd-row-name { color: var(--accent); }
.rawd-row:active { opacity: 0.7; }
.rawd-row:last-child { border-bottom: 0; }

.rawd-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rawd-row-name { font-weight: 600; font-size: 15px; color: var(--text); transition: color 0.18s var(--ease); }

/* Texto completo, sempre quebrando linha — nunca cortar nem encolher fonte. */
.rawd-row-desc {
	font-size: 13px;
	color: var(--text-2);
	white-space: normal;
	overflow-wrap: break-word;
}

.rawd-price { color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 3px; }
.rawd-price small { color: var(--text-2); font-weight: 500; font-family: inherit; }

/* Pílulas de tamanho + preço no cardápio (riscadas quando esgotado). */
.rawd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.rawd-vpill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 4px 11px;
	background: var(--surface);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

.rawd-vpill-size { color: var(--text-2); font-weight: 500; }
.rawd-vpill-price { color: var(--accent); font-weight: 700; font-family: 'Space Grotesk', sans-serif; }

.rawd-vpill--off { opacity: 0.45; }
.rawd-vpill--off .rawd-vpill-size,
.rawd-vpill--off .rawd-vpill-price { text-decoration: line-through; color: var(--text-2); }

/* Loja fechada: cardápio visível, mas claramente inativo (sem "botão quebrado"). */
.rawd-row:disabled { cursor: default; }
.rawd-row:disabled:hover .rawd-row-name { color: var(--text); }
.rawd-row:disabled:active { opacity: 1; }

.rawd-shell--closed .rawd-row { opacity: 0.5; }
.rawd-shell--closed .rawd-row-img { filter: grayscale(100%); opacity: 0.75; }
.rawd-shell--closed .rawd-vpill-price { color: var(--text-2); }
.rawd-shell--closed .rawd-cat-title { opacity: 0.5; }

.rawd-row-img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 12px;
	flex-shrink: 0;
	background: var(--border);
}

.rawd-row-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-soft);
}

.rawd-row-img--empty img { width: 44px; opacity: 0.9; }

/* ---------- Bottom sheet ---------- */
.rawd-overlay {
	position: fixed;
	inset: 0;
	background: rgba(24, 24, 20, 0.45);
	z-index: 9998;
	animation: rawd-fade 0.25s var(--ease);
	backdrop-filter: blur(2px);
	touch-action: none;
	overscroll-behavior: none;
}

/* Overlay aberto: trava o scroll da página de fundo (sheet/modais).
   Overflow hidden preserva a posição — sem position:fixed nem scrollTo. */
html.rawd-lock-html,
body.rawd-lock {
	overflow: hidden !important;
}

.rawd-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 480px;
	margin: 0 auto;
	background: var(--surface);
	border-radius: 22px 22px 0 0;
	padding: 10px 22px calc(22px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--shadow-md);
	animation: rawd-sheet-up 0.32s var(--ease);
	/* --rawd-drag acompanha o dedo ao arrastar para fechar (app.js). */
	transform: translateY(var(--rawd-drag, 0px));
	transition: transform 0.26s var(--ease);
}

.rawd-sheet--dragging { transition: none; }
.rawd-sheet-handle { cursor: grab; touch-action: none; }
.rawd-sheet--dragging .rawd-sheet-handle { cursor: grabbing; }

.rawd-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 6px auto 14px; }
.rawd-sheet-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 16px; }
.rawd-sheet-name { font-size: 21px; font-weight: 700; margin: 14px 0 4px; }
.rawd-sheet-desc { margin: 0 0 16px; color: var(--text-2); font-size: 14px; }

.rawd-sizes { border: 0; padding: 0; margin: 0 0 18px; }
.rawd-sizes legend { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }

.rawd-size {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 13px 14px;
	margin-bottom: 8px;
	min-height: 48px;
	cursor: pointer;
	transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
	position: relative;
}

.rawd-size:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rawd-size--off { opacity: 0.45; }
.rawd-size input { position: absolute; opacity: 0; }

.rawd-size-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	flex-shrink: 0;
	transition: all 0.18s var(--ease);
}

.rawd-size:has(input:checked) .rawd-size-dot { border-color: var(--accent); border-width: 5px; background: #fff; }
.rawd-size-label { font-weight: 500; }
.rawd-size-price { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.rawd-size--off .rawd-size-price { font-size: 12px; color: var(--text-2); font-weight: 600; }

/* ---------- Stepper ---------- */
.rawd-qty {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--surface);
}

.rawd-step {
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	font-size: 19px;
	color: var(--accent);
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s var(--ease);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

.rawd-step:hover { opacity: 0.55; }
.rawd-step:active { opacity: 0.4; }
.rawd-qty-value { min-width: 34px; text-align: center; font-weight: 700; font-size: 15px; font-family: 'Space Grotesk', sans-serif; line-height: 1; align-self: center; }

.rawd-sheet-footer { display: flex; gap: 12px; align-items: stretch; margin-top: 6px; }
.rawd-sheet-footer .rawd-qty { flex-shrink: 0; }
.rawd-sheet-footer .rawd-cta { margin: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }

.rawd-qty--small { border-width: 1px; }
.rawd-qty--small .rawd-step { width: 32px; height: 32px; font-size: 16px; }
.rawd-qty--small .rawd-qty-value { min-width: 26px; font-size: 14px; }

/* ---------- Botões ---------- */
.rawd-cta {
	display: block;
	width: 100%;
	background: var(--accent);
	color: #FDFDFB;
	border: 0;
	border-radius: var(--radius-sm);
	min-height: 50px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	margin-top: 10px;
	transition: color 0.18s var(--ease), transform 0.12s var(--ease), box-shadow 0.18s var(--ease);
	box-shadow: var(--shadow-sm);
	white-space: normal;
	padding: 8px 18px;
	box-sizing: border-box;
}

/* Hover/toque do CTA: fundo vermelho translúcido no lugar do highlight do
   navegador (0.5.6) — vale também para a página /entrar/, que usa .rawd-app sem id. */
.rawd-cta:hover,
.rawd-cta:focus { background: rgba(191, 46, 38, 0.85); color: #FDFDFB; }
.rawd-cta:active { background: rgba(191, 46, 38, 0.75); transform: scale(0.985); }
.rawd-cta:disabled { background: #D8D8CF; color: #92928A; cursor: not-allowed; box-shadow: none; }

/* CTA em Poppins, sem caixa alta — usado no aviso de trocar de conta. */
.rawd-cta--plain {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}

.rawd-cta--ghost {
	background: var(--surface);
	color: var(--text);
	border: 1.5px solid var(--border);
	box-shadow: none;
}

.rawd-cta--ghost:hover { color: rgba(28, 28, 26, 0.55); }

.rawd-busy { position: relative; color: transparent !important; }
.rawd-busy::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(253, 253, 251, 0.6);
	border-top-color: transparent;
	border-radius: 50%;
	animation: rawd-spin 0.7s linear infinite;
}

.rawd-cta--ghost.rawd-busy::after { border-color: rgba(28, 28, 26, 0.4); border-top-color: transparent; }

@keyframes rawd-spin { to { transform: rotate(360deg); } }

.rawd-link {
	background: none;
	border: 0;
	color: var(--accent);
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	padding: 10px 0;
}

.rawd-link:hover { text-decoration: underline; opacity: 0.7; }

/* ---------- Barra do carrinho ---------- */
.rawd-cartbar {
	position: fixed;
	left: 20px;
	right: 20px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	max-width: 440px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--accent);
	color: #FDFDFB;
	border: 0;
	border-radius: 999px;
	min-height: 54px;
	padding: 0 22px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	/* Mesma camada baixa do header do app: nunca por cima de menu/carrinho do tema. */
	z-index: var(--rawd-z, 10);
	box-shadow: 0 10px 28px rgba(191, 46, 38, 0.35);
	animation: rawd-fade-up 0.3s var(--ease);
	transition: transform 0.15s var(--ease), color 0.18s var(--ease);
}

.rawd-cartbar:hover { color: rgba(253, 253, 251, 0.75); }
.rawd-cartbar:active { transform: scale(0.98); }
.rawd-cartbar-cta { font-weight: 700; letter-spacing: 0.03em; }

/* ---------- Carrinho ---------- */
.rawd-cart { padding: 18px 0; }

.rawd-cart-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin-bottom: 10px;
	box-shadow: var(--shadow-sm);
}

.rawd-cart-item--off { opacity: 0.5; }
.rawd-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rawd-cart-item-info strong { font-weight: 600; }
.rawd-cart-item-info span { color: var(--text-2); font-size: 12.5px; }
.rawd-cart-item-total { font-weight: 700; font-size: 14px; min-width: 74px; text-align: right; font-family: 'Space Grotesk', sans-serif; }

.rawd-cart-subtotal { display: flex; justify-content: space-between; padding: 14px 6px 10px; font-size: 15px; }
.rawd-cart-subtotal strong { font-family: 'Space Grotesk', sans-serif; }

.rawd-minbar { margin: 6px 0 10px; }
.rawd-minbar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.rawd-minbar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s var(--ease); }
.rawd-minbar p { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }

/* ---------- Auth ---------- */
.rawd-auth { padding: 28px 0; }

.rawd-auth-logo {
	display: block;
	margin: 10px auto 24px;
	width: 148px;
	max-width: 55%;
	animation: rawd-fade-up 0.4s var(--ease);
}

/* Aviso acima do cartao de login: so aparece com itens no carrinho, para nao
   falar de "pedido" para quem chegou aqui pelo menu sem nada escolhido. */
.rawd-auth-aviso {
	text-align: center;
	margin: 0 0 14px;
	padding: 0 6px;
}

.rawd-auth-aviso strong {
	display: block;
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}

.rawd-auth-aviso span {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-2);
}

.rawd-auth-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 28px 22px 24px;
	box-shadow: var(--shadow-sm);
}

.rawd-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); }

.rawd-tab {
	flex: 1;
	min-height: 44px;
	border: 0;
	background: none;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-2);
	cursor: pointer;
	position: relative;
	transition: color 0.18s var(--ease);
}

.rawd-tab::after {
	content: '';
	position: absolute;
	left: 25%;
	right: 25%;
	bottom: -1px;
	height: 2px;
	border-radius: 1px;
	background: transparent;
	transition: background 0.18s var(--ease), left 0.18s var(--ease), right 0.18s var(--ease);
}

.rawd-tab:hover { color: rgba(28, 28, 26, 0.55); }
.rawd-tab--on { color: var(--text); }
.rawd-tab--on:hover { color: rgba(28, 28, 26, 0.7); }
.rawd-tab--on::after { background: var(--accent); left: 12%; right: 12%; }

/* ---------- Formulários ---------- */
.rawd-field { display: block; margin-bottom: 14px; }
.rawd-field span { display: block; font-weight: 600; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }

.rawd-field input,
.rawd-field textarea,
.rawd-coupon-row input {
	width: 100%;
	min-height: 48px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: 15px;
	background: var(--surface);
	color: var(--text);
	box-sizing: border-box;
	font-family: inherit;
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.rawd-field input:focus,
.rawd-field textarea:focus,
.rawd-coupon-row input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(191, 46, 38, 0.10);
}

.rawd-cta:focus-visible, .rawd-tab:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Stepper: sem contorno no clique; teclado recebe feedback por fundo. */
.rawd-step:focus { outline: none; }
.rawd-step:focus-visible { background: var(--accent-soft); }

/* WhatsApp com DDI fixo: +55 dentro do campo, cliente digita só DDD + número. */
.rawd-field .rawd-phone {
	display: flex;
	align-items: center;
	margin: 0;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.rawd-field .rawd-phone:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(191, 46, 38, 0.10);
}

.rawd-field .rawd-phone-ddi {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-2);
	line-height: 1;
}

.rawd-field .rawd-phone input {
	border: 0;
	background: transparent;
	flex: 1;
	width: auto;
	min-width: 0;
	padding-left: 8px;
}

.rawd-field .rawd-phone input:focus {
	border: 0;
	box-shadow: none;
}

.rawd-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--text-2);
}

.rawd-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 13.5px; color: var(--text-2); }
.rawd-check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.rawd-hp { position: absolute; left: -9999px; height: 1px; width: 1px; opacity: 0; }
.rawd-form-error { color: var(--accent); font-weight: 500; font-size: 13.5px; min-height: 1em; margin: 8px 0; }
.rawd-form-error a { color: var(--accent); font-weight: 700; }
.rawd-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Checkout ---------- */
.rawd-checkout { padding: 18px 0; }

.rawd-section {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 12px;
	box-shadow: var(--shadow-sm);
}

.rawd-section-title {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Etapa fechada mostra só o título; o corpo entra no clique. */
.rawd-section-toggle {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	min-height: 30px;
}

.rawd-section-name { flex: 1; }
.rawd-section-toggle:hover { color: var(--text); }

/* Títulos das etapas em Poppins (pedido do Lucas). Precisa do #rawd-app: o
   escudo `#rawd-app button` (que mata o hover do kit Elementor) tem ID e
   venceria qualquer seletor de classe aqui. */
#rawd-app .rawd-section-title,
#rawd-app .rawd-section-toggle,
#rawd-app .rawd-section-name {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
}

.rawd-section-caret {
	display: inline-flex;
	color: var(--text-2);
	transition: transform 0.22s var(--ease);
}

.rawd-section--open .rawd-section-caret { transform: rotate(180deg); }
.rawd-section--open .rawd-section-title { margin-bottom: 14px; }
.rawd-section--open .rawd-section-name { color: var(--text); }

/* Lápis + "Editar" (mesmo controle do checkout do site). */
.rawd-pencil {
	flex-shrink: 0;
	border: 0;
	background: none;
	color: var(--text-2);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 2px;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: color 0.15s var(--ease);
}

.rawd-pencil svg { width: 14px; height: 14px; }
.rawd-pencil:hover { color: var(--text); }

.rawd-section-body { animation: rawd-fade 0.22s var(--ease); }

/* Abrir/fechar etapas muda a altura acima do viewport e o Chrome "reancora"
   o scroll — a página parecia se corrigir sozinha depois de cada toque. */
#rawd-app,
.rawd-shell,
.rawd-view,
.rawd-checkout,
.rawd-section,
.rawd-summary {
	overflow-anchor: none;
}

.rawd-steps-intro {
	font-size: 13px;
	color: var(--text-2);
	margin: 2px 0 12px;
	padding: 0 2px;
	text-align: center;
}

/* ---------- Resumo do pedido (mesmos elementos do carrinho) ---------- */
.rawd-summary-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	min-height: 30px;
}

.rawd-summary-toggle .rawd-summary-title { margin: 0; flex-shrink: 0; }

.rawd-summary-meta {
	flex: 1;
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	font-family: 'Space Grotesk', sans-serif;
}

.rawd-summary--open .rawd-summary-toggle { margin-bottom: 12px; }
.rawd-summary--open .rawd-section-caret { transform: rotate(180deg); }

/* Indicador de etapa: presente em todos os títulos, verde só quando completa. */
.rawd-step-check {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	color: transparent;
	font-size: 11px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.rawd-step-check--on {
	background: var(--success);
	border-color: var(--success);
	color: #FFFFFF;
}

.rawd-summary {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px 10px;
	margin-bottom: 12px;
	box-shadow: var(--shadow-sm);
}

.rawd-summary-title {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0 0 12px;
}

/* Carrinho vazio dentro do resumo: o mascote em vermelho ocupa o lugar da
   lista de itens, para a tela nao ficar oca. */
.rawd-sum-vazio {
	text-align: center;
	padding: 18px 10px 16px;
}

.rawd-sum-vazio-img {
	width: 64px;
	height: auto;
	display: block;
	margin: 0 auto 10px;
}

.rawd-sum-vazio-titulo {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.rawd-sum-vazio-texto {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-2);
}

.rawd-sum-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.rawd-sum-item:last-of-type { border-bottom: 0; }

.rawd-sum-img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--border);
}

.rawd-sum-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rawd-sum-info strong { font-size: 14px; font-weight: 600; }
.rawd-sum-unit { font-size: 12.5px; color: var(--text-2); }
.rawd-sum-controls { display: flex; align-items: center; gap: 10px; margin-top: 2px; }

.rawd-sum-remove {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--text-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: color 0.15s var(--ease);
}

.rawd-sum-remove:hover { color: var(--accent); }

.rawd-sum-total {
	font-weight: 700;
	font-size: 14px;
	font-family: 'Space Grotesk', sans-serif;
	white-space: nowrap;
}

/* ---------- Campo travado (padrão do checkout do site) ---------- */
.rawd-field--lock { position: relative; margin-bottom: 12px; }

/* Telefone no bloco de dados: o wrapper NAO desenha caixa. A regra generica
   .rawd-field .rawd-phone pinta borda e fundo branco (estilo do cadastro, que e
   um campo branco) e, aqui dentro, isso virava uma segunda caixa por cima da
   cinza. O +55 passa a flutuar DENTRO do proprio campo, entao vale igual para o
   estado travado e o de edicao, sem precisar saber qual e o fundo. */
.rawd-field--lock .rawd-phone{position:relative;display:block;margin:0;padding:0;border:0;background:none;border-radius:0;}

/* O +55 e um <span> e a regra .rawd-field span o tratava como RoTULO (600/13px,
   cor de etiqueta). Aqui ele volta a ser texto de campo, no tom de apoio: e
   contexto fixo, nao dado digitado. */
.rawd-field--lock .rawd-phone .rawd-phone-ddi{position:absolute;left:14px;top:50%;transform:translateY(-50%);margin:0;padding:0;font-size:15px;font-weight:400;line-height:1;color:#8A8781;pointer-events:none;}

/* A regra do cadastro zera a borda do input (la quem desenha e o wrapper). Aqui o
   wrapper e invisivel, entao a borda volta para o proprio campo — igual ao CPF. */
.rawd-field--lock .rawd-phone input{width:100%;padding-left:48px;background:var(--surface);border:.8px solid var(--border);}
/* Travado tem o proprio cinza; sem esta linha o campo do telefone ficava branco
   enquanto CPF e nome ao lado ficavam cinza. */
.rawd-field--lock .rawd-phone input.rawd-lockfield--locked{background:#F1F2F4;border-color:rgba(24,24,24,.1);}


.rawd-lockfield--locked {
	background: #F1F2F4 !important;
	color: #8A8781 !important;
	cursor: default;
}

.rawd-field--blocked .rawd-lockfield--locked {
	border-color: rgba(24, 24, 24, 0.34) !important;
	box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.08) !important;
}

/* Absolute de propósito: em fluxo normal o balão empurra o layout e a
   página "pula" quando ele some. */
/* `.rawd-field span` também casa aqui (cor e display do rótulo) — o seletor
   precisa do pai para vencer por especificidade. */
.rawd-field .rawd-lock-hint {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: flex;
	align-items: center;
	gap: 4px;
	width: auto;
	margin: 6px 0 0;
	z-index: 2;
	background: #FFFFFF;
	border: 1px solid var(--border);
	color: #6E6C66;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: var(--shadow-sm);
	animation: rawd-fade 0.18s var(--ease);
}

.rawd-lock-hint-ico { display: inline-flex; color: #6E6C66; }
.rawd-lock-hint-ico svg { width: 12px; height: 12px; }

.rawd-edit-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.rawd-edit-actions .rawd-cta { margin: 0; flex: 1; }
.rawd-addr-view { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }

/* ---------- Escolhas empilhadas (entrega, retirada, pagamento) ----------
   Seletor de plano: linhas cinza claro, a selecionada escurece a borda e a
   marca. Nada de vermelho — o acento fica para as ações. */
.rawd-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.rawd-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	padding: 13px 14px;
	cursor: pointer;
	transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.rawd-opt:hover { border-color: var(--border-strong); }
.rawd-opt--on { border-color: #1C1C1A; background: #F6F6F4; }

.rawd-opt-mark {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	background: var(--surface);
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.rawd-opt--on .rawd-opt-mark {
	border-color: #1C1C1A;
	box-shadow: inset 0 0 0 3.5px var(--surface), inset 0 0 0 17px #1C1C1A;
}

.rawd-opt-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 70%; }
.rawd-opt-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* Endereço da loja é longo: quebra dentro do bloco, sem empurrar o preço. */
.rawd-opt-desc {
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--text-2);
	white-space: normal;
	overflow-wrap: anywhere;
}

.rawd-opt-price {
	flex-shrink: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text);
	font-family: 'Space Grotesk', sans-serif;
}

.rawd-note--pay { margin-bottom: 8px; }
.rawd-note--small { font-size: 12px; margin: 10px 0 0; }
.rawd-cta--round { border-radius: 999px; }

.rawd-section-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text-2);
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
}

/* Trocar de conta: discreto, no fim dos dados. */
.rawd-switch-account {
	display: block;
	width: 100%;
	margin: 2px 0 0;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--border);
	background: none;
	color: var(--text-2);
	font-size: 12.5px;
	text-align: center;
	cursor: pointer;
}

.rawd-switch-account strong { color: var(--text); text-decoration: underline; font-weight: 600; }
.rawd-switch-account:hover { opacity: 0.7; }
.rawd-note--center { text-align: center; margin: 26px 0 6px; }

.rawd-addr-block { margin-bottom: 4px; }
.rawd-addr-block .rawd-addr-view { margin-bottom: 6px; }

/* Rodapé de cada etapa aberta: avanço explícito + bolinhas do fluxo. */
.rawd-section-foot {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* A nota pertence ao formulario, nao ao resumo: o respiro fica acima dela. */
.rawd-checkout .rawd-note--center {
	margin: 26px 0 6px;
}

.rawd-checkout .rawd-note--center + .rawd-auth {
	margin-top: 0;
	padding-top: 0;
}

.rawd-section-foot .rawd-cta { width: 100%; margin: 0; }

.rawd-flow { display: inline-flex; align-items: center; gap: 8px; }
.rawd-flow-dots { display: inline-flex; align-items: center; gap: 5px; }

.rawd-flow-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--border);
	transition: background 0.22s var(--ease), width 0.22s var(--ease);
}

.rawd-flow-dot--on { background: var(--accent); opacity: 0.35; }
.rawd-flow-dot--now { width: 16px; opacity: 1; }

.rawd-check-mark { color: var(--success); font-size: 14px; margin-left: auto; }
.rawd-ok { font-weight: 500; font-size: 14px; margin: 4px 0 0; }
.rawd-ok--fee { color: var(--success); font-weight: 600; }
.rawd-note { font-size: 13px; color: var(--text-2); margin: 0 0 12px; }

.rawd-addr {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 13px 14px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
	cursor: pointer;
	font-size: 13.5px;
	transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.rawd-addr:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rawd-addr input { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.rawd-addr span { color: var(--text-2); }
.rawd-addr strong { color: var(--text); font-weight: 600; }

.rawd-coupon-row { display: flex; gap: 8px; margin-bottom: 14px; }
.rawd-coupon-row input { flex: 1; text-transform: uppercase; }
.rawd-coupon-row .rawd-cta { width: auto; padding: 0 18px; margin: 0; min-height: 48px; }

.rawd-totals { margin: 14px 0 4px; }
.rawd-totals div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--text-2); }
.rawd-totals dt, .rawd-totals dd { margin: 0; }
.rawd-totals dd { color: var(--text); font-weight: 500; }
.rawd-totals-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px !important; font-size: 17px !important; font-weight: 700; }
.rawd-totals-total dt, .rawd-totals-total dd { color: var(--text) !important; font-weight: 700; }
.rawd-totals-total dd { color: var(--accent) !important; }

/* ---------- Sucesso ---------- */
.rawd-success { text-align: center; padding: 40px 0; }

.rawd-success-icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 30px;
	line-height: 68px;
	margin: 0 auto 18px;
	animation: rawd-pop 0.5s var(--ease);
}

.rawd-success h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.rawd-success > p { color: var(--text-2); font-size: 14px; margin: 0 0 22px; }

.rawd-timeline { list-style: none; padding: 0; margin: 0 auto 22px; text-align: left; max-width: 240px; }

.rawd-timeline li {
	position: relative;
	padding: 7px 0 7px 30px;
	color: var(--text-2);
	font-size: 13.5px;
	font-weight: 500;
}

.rawd-timeline li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 13px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border-strong);
	transition: background 0.3s var(--ease);
}

.rawd-timeline li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 10px;
	top: 25px;
	bottom: -9px;
	width: 2px;
	background: var(--border);
}

.rawd-timeline li.rawd-timeline--done { color: var(--text); font-weight: 600; }
.rawd-timeline li.rawd-timeline--done::before { background: var(--success); }

/* ---------- Pedidos ---------- */
.rawd-orders { padding: 18px 0; }
.rawd-orders > h2 { font-size: 17px; font-weight: 700; margin: 4px 0 16px; }

/* Título + saída da conta na mesma linha (o botão segue o padrão do "Editar"). */
.rawd-orders-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.rawd-orders-head > h2 { font-size: 17px; font-weight: 700; margin: 0; }
.rawd-orders-head .rawd-pencil { white-space: nowrap; }

/* Data acima do grupo, como extrato de banco. */
.rawd-order-day {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-2);
	margin: 18px 2px 8px;
}

.rawd-order-day:first-of-type { margin-top: 4px; }

.rawd-order-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 10px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.rawd-order-head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 14px 16px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.rawd-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rawd-order-line { display: flex; align-items: center; gap: 8px; }
.rawd-order-card strong { font-family: 'Space Grotesk', sans-serif; font-size: 14px; }

.rawd-order-meta {
	font-size: 12.5px;
	color: var(--text-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rawd-order-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rawd-order-total { font-weight: 700; font-size: 14px; font-family: 'Space Grotesk', sans-serif; }
.rawd-order-card--open .rawd-section-caret { transform: rotate(180deg); }

/* ---------- Detalhe do pedido ---------- */
.rawd-order-detail {
	padding: 4px 16px 16px;
	border-top: 1px solid var(--border);
	animation: rawd-fade 0.22s var(--ease);
}

.rawd-order-now {
	font-size: 13px;
	line-height: 1.45;
	color: var(--text);
	background: var(--bg);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	margin: 14px 0 16px;
}

.rawd-order-now--off { color: var(--text-2); }

/* Acompanhamento: sem prazo, só o que aconteceu e a que horas. */
.rawd-track { list-style: none; margin: 0 0 18px; padding: 0; }

.rawd-track-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0 7px 4px;
	font-size: 13px;
	color: var(--text-2);
}

.rawd-track-step::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--border);
}

.rawd-track-step:first-child::before { top: 50%; }
.rawd-track-step:last-child::before { bottom: 50%; }

.rawd-track-dot {
	position: relative;
	z-index: 1;
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
}

.rawd-track-step--done { color: var(--text); }
.rawd-track-step--done .rawd-track-dot { background: var(--success); border-color: var(--success); }
.rawd-track-step--now { font-weight: 600; }
.rawd-track-step--now .rawd-track-dot { box-shadow: 0 0 0 3px rgba(45, 138, 79, 0.16); }
.rawd-track-step--off .rawd-track-dot { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.rawd-track-label { flex: 1; }

.rawd-track-when {
	font-size: 11.5px;
	color: var(--text-2);
	font-family: 'Space Grotesk', sans-serif;
}

.rawd-order-block { margin-bottom: 16px; }

.rawd-order-block h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0 0 6px;
}

.rawd-order-block p { margin: 0; font-size: 13px; line-height: 1.5; }

.rawd-order-items { list-style: none; margin: 0 0 10px; padding: 0; }

.rawd-order-items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	padding: 4px 0;
}

.rawd-order-items em { font-style: normal; color: var(--text-2); }
.rawd-totals--compact { margin: 0; }

/* Fale com a gente: o WhatsApp é o canal do pedido. */
.rawd-order-help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 14px;
}

.rawd-order-help > span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-2);
}

.rawd-wa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	background: var(--surface);
	transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.rawd-wa:hover { border-color: #25D366; color: #128C4A; }
.rawd-wa svg { color: #25D366; }

.rawd-badge {
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text-2);
}

.rawd-badge--placed { background: var(--accent-soft); border-color: #F2D8D6; color: var(--accent); }
.rawd-badge--confirmed, .rawd-badge--preparing, .rawd-badge--out_for_delivery { background: #FCF6E8; border-color: #F0E4C4; color: #8A6D1F; }
.rawd-badge--delivered { background: #EBF5EE; border-color: #D2E8DA; color: var(--success); }
.rawd-badge--canceled { background: var(--bg); }

/* ---------- Estados vazios, skeleton, toast ---------- */
.rawd-empty { text-align: center; padding: 56px 20px; color: var(--text-2); font-size: 14.5px; }
.rawd-empty .rawd-mascot { width: 96px; margin: 0 auto 16px; display: block; animation: rawd-pop 0.5s var(--ease); }
.rawd-empty p { margin: 0 0 18px; }
.rawd-empty .rawd-cta { max-width: 240px; margin: 0 auto; }

.rawd-skeleton { padding: 24px 20px; max-width: 480px; margin: 0 auto; }

.rawd-skeleton-card {
	height: 108px;
	border-radius: var(--radius);
	margin-bottom: 12px;
	background: linear-gradient(100deg, #EFEFEA 40%, #F7F7F3 50%, #EFEFEA 60%);
	background-size: 200% 100%;
	animation: rawd-shimmer 1.3s infinite;
}

.rawd-toast {
	position: fixed;
	bottom: 92px;
	left: 50%;
	transform: translate(-50%, 12px);
	background: var(--text);
	color: #FDFDFB;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
	z-index: 10000;
	max-width: 88vw;
	box-shadow: var(--shadow-md);
}

.rawd-toast--show { opacity: 1; transform: translate(-50%, 0); }
.rawd-toast--error { background: var(--accent); }

.rawd-live { position: absolute; left: -9999px; }

/* ---------- Modais (horários, informações, aviso de embalagem) ---------- */
@keyframes rawd-modal-in {
	from { opacity: 0; transform: translate(-50%, -47%) scale(0.97); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.rawd-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(400px, calc(100vw - 40px));
	max-height: 82vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface);
	border-radius: 20px;
	padding: 26px 24px 24px;
	z-index: 9999;
	box-shadow: var(--shadow-md);
	animation: rawd-modal-in 0.28s var(--ease);
	box-sizing: border-box;
}

.rawd-modal-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--bg);
	color: var(--text-2);
	font-size: 18px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.15s var(--ease);
}

.rawd-modal-x:hover { opacity: 0.6; }

.rawd-modal-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 14px;
	padding-right: 34px;
}

.rawd-modal-text { font-size: 14px; color: var(--text-2); margin: 0 0 12px; line-height: 1.55; }
.rawd-modal-text strong { color: var(--text); }

.rawd-hours-list { margin-top: 4px; }

.rawd-hours-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 2px;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}

.rawd-hours-row:last-child { border-bottom: 0; }
.rawd-hours-row span:last-child { font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
.rawd-hours-row--today { font-weight: 700; }
.rawd-hours-row--today span:first-child::after { content: ' · hoje'; color: var(--text-2); font-weight: 500; font-size: 12px; }
.rawd-hours-closed { color: var(--text-2); font-weight: 500 !important; }

/* "cancelar pedido" — discreto, sem fundo, centralizado. */
.rawd-cancel-link {
	display: block;
	margin: 12px auto 0;
	border: 0;
	background: none;
	color: #B4B4AB;
	font-size: 13px;
	cursor: pointer;
	padding: 6px 10px;
	transition: opacity 0.15s var(--ease);
}

.rawd-cancel-link:hover { opacity: 0.65; }

/* ---------- Filtro de categorias (chips, estilo iFood) ---------- */
/* A barra rola na horizontal; as setas so aparecem quando ha chip cortado. */
.rawd-catsbar { position: relative; }

.rawd-catsbar::before,
.rawd-catsbar::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 46px;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.18s var(--ease);
}

.rawd-catsbar::before { left: 0; background: linear-gradient(90deg, var(--bg) 42%, rgba(250, 250, 248, 0)); }
.rawd-catsbar::after { right: 0; background: linear-gradient(270deg, var(--bg) 42%, rgba(250, 250, 248, 0)); }
.rawd-catsbar--prev::before,
.rawd-catsbar--next::after { opacity: 1; }

.rawd-catsnav {
	position: absolute;
	top: calc(50% - 1px);
	transform: translateY(-50%);
	z-index: 2;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-2);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(24, 24, 24, 0.10);
	transition: color 0.18s var(--ease);
}

/* display:flex vence o [hidden] do navegador — precisa ser explicito. */
.rawd-catsnav[hidden] { display: none !important; }

.rawd-catsnav--prev { left: 0; }
.rawd-catsnav--next { right: 0; }

.rawd-cats {
	display: flex;
	gap: 8px;
	padding: 10px 0 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rawd-cats::-webkit-scrollbar { display: none; }

.rawd-catchip {
	flex-shrink: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-2);
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 15px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.rawd-catchip:hover { color: var(--text); }

.rawd-catchip--on,
.rawd-catchip--on:hover {
	background: var(--text);
	border-color: var(--text);
	color: #FDFDFB;
}

/* Categoria do produto — nota pequena e elegante acima do nome. */
.rawd-row-cat {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-2);
}

/* ---------- Etiquetas sobre a foto (topo direito, empilham) ---------- */
.rawd-row-imgwrap {
	position: relative;
	flex-shrink: 0;
	display: block;
}

.rawd-tags {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	pointer-events: none;
}

.rawd-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(24, 24, 20, 0.25);
	white-space: nowrap;
	max-width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 2ª etiqueta inline no card: entre a descrição e os tamanhos. */
.rawd-tag--inline {
	align-self: flex-start;
	margin: 3px 0 1px;
	max-width: none;
}

/* Etiquetas sobre a imagem grande do sheet. */
.rawd-sheet-imgwrap {
	position: relative;
	display: block;
}

/* Ficha com mais de uma foto: carrossel + a linha do hero da home.
   Sem rolagem automatica e sem setas — so o dedo e o toque na linha. */
.rawd-sheet-imgwrap--multi { border-radius: 16px; overflow: hidden; }

.rawd-sheet-slides {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.rawd-sheet-slides::-webkit-scrollbar { display: none; }

.rawd-sheet-slides .rawd-sheet-img {
	flex: 0 0 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

/* Veu: sem ele a linha branca some numa foto clara. */
.rawd-sheet-imgwrap--multi::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	background: linear-gradient(to top, rgba(24, 24, 24, 0.36), rgba(24, 24, 24, 0));
	pointer-events: none;
	z-index: 1;
}

.rawd-linha {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 14px;
	z-index: 2;
	display: flex;
	width: 52%;
	max-width: 124px;
}

.rawd-seg {
	position: relative;
	flex: 1;
	height: 2px;
	background: #fff;
	opacity: 0.35;
	cursor: pointer;
	transition: opacity 0.25s var(--ease);
}

/* Alvo de toque de 30px sem engordar o traco. */
.rawd-seg::after { content: ''; position: absolute; inset: -14px 0; }
.rawd-seg.is-on { opacity: 1; }

.rawd-tags--sheet { top: 10px; right: 10px; gap: 6px; }

.rawd-tags--sheet .rawd-tag {
	font-size: 11px;
	padding: 5px 11px;
	max-width: 160px;
}

/* Produto visível mas indisponível: vitrine sem compra. */
.rawd-row--off { opacity: 0.55; }
.rawd-row--off .rawd-row-img { filter: grayscale(100%); opacity: 0.8; }
.rawd-row--off .rawd-tags { opacity: 1; }

/* ---------- Hint do opt-in de WhatsApp ---------- */
.rawd-check-hint {
	margin: -4px 0 10px 28px;
	font-size: 12.5px;
	color: var(--text-2);
	animation: rawd-fade 0.25s var(--ease);
}

/* ---------- CTA fixo no rodapé do carrinho ---------- */
.rawd-cta--sticky {
	position: sticky;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	z-index: var(--rawd-z, 10);
	box-shadow: 0 10px 28px rgba(191, 46, 38, 0.30);
}

/* ---------- Mobile estreito: header compacto, título nunca trunca ---------- */
@media (max-width: 479px) {
	.rawd-header-bar { gap: 6px; }
	.rawd-title { font-size: 12.5px; letter-spacing: 0.05em; }
	.rawd-iconbtn { width: 34px; height: 34px; }
	.rawd-iconbtn svg { width: 16px; height: 16px; }

	.rawd-back,
	.rawd-account {
		min-height: 34px;
		min-width: 34px;
		padding: 0 12px;
		font-size: 12.5px;
	}
}

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
	.rawd-shell { padding-top: 8px; }

	.rawd-sheet {
		border-radius: 22px;
		bottom: 32px;
		left: 50%;
		right: auto;
		width: 440px;
		transform: translate(-50%, var(--rawd-drag, 0px));
	}

	@keyframes rawd-sheet-up {
		from { transform: translate(-50%, 6%); opacity: 0; }
		to { transform: translate(-50%, 0); opacity: 1; }
	}
}

/* ---------- Blindagem contra o CSS global do tema ----------
   O tema/kit do Elementor estiliza button:hover com cor de fundo própria e
   vazava para dentro do app (fundo rosa nos botões). O id #rawd-app dá
   especificidade para vencer o kit; cada componente reafirma seu visual. */
#rawd-app button,
#rawd-app button:hover,
#rawd-app button:focus,
#rawd-app button:active {
	background-image: none;
	text-shadow: none;
	text-transform: none;
	outline-width: 0;
}

#rawd-app .rawd-back,
#rawd-app .rawd-account,
#rawd-app .rawd-back:hover,
#rawd-app .rawd-account:hover { background: var(--surface); }
#rawd-app .rawd-back:hover, #rawd-app .rawd-account:hover { color: rgba(28, 28, 26, 0.55); }

#rawd-app .rawd-tab,
#rawd-app .rawd-tab:hover,
#rawd-app .rawd-tab:focus { background: transparent; }
#rawd-app .rawd-tab:hover { color: rgba(28, 28, 26, 0.55); }
#rawd-app .rawd-tab--on { color: var(--text); }
#rawd-app .rawd-tab--on:hover { color: rgba(28, 28, 26, 0.7); }

#rawd-app .rawd-row,
#rawd-app .rawd-row:hover,
#rawd-app .rawd-row:focus,
#rawd-app .rawd-row:active { background: transparent; color: var(--text); }

#rawd-app .rawd-step,
#rawd-app .rawd-step:hover,
#rawd-app .rawd-step:focus { background: transparent; color: var(--accent); }

#rawd-app .rawd-link,
#rawd-app .rawd-link:hover,
#rawd-app .rawd-link:focus { background: transparent; color: var(--accent); }

#rawd-app .rawd-cta { background: var(--accent); color: #FDFDFB; letter-spacing: 0.04em; white-space: normal; }
#rawd-app .rawd-cta:hover,
#rawd-app .rawd-cta:focus { background: rgba(191, 46, 38, 0.85); color: #FDFDFB; letter-spacing: 0.04em; white-space: normal; }
#rawd-app .rawd-cta:active { background: rgba(191, 46, 38, 0.75); }
#rawd-app .rawd-cta:disabled { background: #D8D8CF; color: #92928A; }

#rawd-app .rawd-cta--ghost,
#rawd-app .rawd-cta--ghost:hover,
#rawd-app .rawd-cta--ghost:focus { background: var(--surface); color: var(--text); }
#rawd-app .rawd-cta--ghost:hover { color: rgba(28, 28, 26, 0.55); }

#rawd-app .rawd-cartbar,
#rawd-app .rawd-cartbar:hover,
#rawd-app .rawd-cartbar:focus { background: var(--accent); color: #FDFDFB; }
#rawd-app .rawd-cartbar:hover { color: rgba(253, 253, 251, 0.75); }

#rawd-app .rawd-iconbtn,
#rawd-app .rawd-iconbtn:hover,
#rawd-app .rawd-iconbtn:focus { background: var(--surface); color: var(--text); }

#rawd-app .rawd-status,
#rawd-app .rawd-status:hover,
#rawd-app .rawd-status:focus { background: transparent; }
#rawd-app .rawd-status--open { color: var(--success); }
#rawd-app .rawd-status--closed { color: var(--accent); }

#rawd-app .rawd-modal-x,
#rawd-app .rawd-modal-x:hover,
#rawd-app .rawd-modal-x:focus { background: var(--bg); color: var(--text-2); }

#rawd-app .rawd-cancel-link,
#rawd-app .rawd-cancel-link:hover,
#rawd-app .rawd-cancel-link:focus { background: transparent; color: #B4B4AB; }

#rawd-app .rawd-closed-strip,
#rawd-app .rawd-closed-strip:hover,
#rawd-app .rawd-closed-strip:focus { background: #EFEFEA; color: var(--text-2); }

#rawd-app .rawd-catchip,
#rawd-app .rawd-catchip:hover,
#rawd-app .rawd-catchip:focus { background: var(--surface); color: var(--text-2); }

#rawd-app .rawd-catsnav,
#rawd-app .rawd-catsnav:hover,
#rawd-app .rawd-catsnav:focus,
#rawd-app .rawd-catsnav:active,
#rawd-app .rawd-catsnav:focus-visible {
	background: var(--surface) !important;
	color: var(--text-2) !important;
	border-color: var(--border) !important;
	box-shadow: 0 1px 4px rgba(24, 24, 24, 0.10) !important;
}

#rawd-app .rawd-catsnav:hover { color: var(--text) !important; }
#rawd-app .rawd-catchip:hover { color: var(--text); }
#rawd-app .rawd-catchip--on,
#rawd-app .rawd-catchip--on:hover,
#rawd-app .rawd-catchip--on:focus { background: var(--text); color: #FDFDFB; }

#rawd-app .rawd-section-toggle,
#rawd-app .rawd-section-toggle:hover,
#rawd-app .rawd-section-toggle:focus { background: transparent; color: var(--text-2); }
#rawd-app .rawd-section-toggle:hover { color: var(--text); }

#rawd-app .rawd-pencil,
#rawd-app .rawd-pencil:hover,
#rawd-app .rawd-pencil:focus { background: transparent; color: var(--text-2); }
#rawd-app .rawd-pencil:hover { color: var(--text); }

#rawd-app .rawd-opt,
#rawd-app .rawd-opt:hover,
#rawd-app .rawd-opt:focus { background: var(--surface); color: var(--text); }
#rawd-app .rawd-opt--on,
#rawd-app .rawd-opt--on:hover { background: #F6F6F4; }

#rawd-app .rawd-switch-account,
#rawd-app .rawd-switch-account:hover,
#rawd-app .rawd-switch-account:focus { background: transparent; color: var(--text-2); }

#rawd-app .rawd-order-head,
#rawd-app .rawd-order-head:hover,
#rawd-app .rawd-order-head:focus { background: transparent; color: var(--text); }

#rawd-app .rawd-summary-toggle,
#rawd-app .rawd-summary-toggle:hover,
#rawd-app .rawd-summary-toggle:focus { background: transparent; color: var(--text-2); }

#rawd-app .rawd-step-check--on { background: var(--success); color: #FFFFFF; }

#rawd-app .rawd-sum-remove,
#rawd-app .rawd-sum-remove:hover,
#rawd-app .rawd-sum-remove:focus { background: transparent; }
#rawd-app .rawd-sum-remove:hover { color: var(--accent); }

#rawd-app .rawd-busy { color: transparent; }
#rawd-app .rawd-cta:focus-visible,
#rawd-app .rawd-tab:focus-visible,
#rawd-app .rawd-back:focus-visible,
#rawd-app .rawd-account:focus-visible,
#rawd-app .rawd-step:focus-visible,
#rawd-app .rawd-row:focus-visible,
#rawd-app .rawd-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; outline-width: 2px; }


/* ==========================================================================
   Pagamento online (RawPay)

   Mesmo sistema visual do checkout da loja (/finalizar/), medido de lá para
   não divergir com o tempo:
     seleção  = anel em box-shadow, nunca borda  (0 0 0 1.5px rgba(24,24,24,.55))
     repouso  = anel de 1px quase invisível      (0 0 0 1px rgba(24,24,24,.07))
     raio     = 14px em blocos, 10px em campos e botões
     ação     = #181818, não vermelho
   O overlay vive fora de #rawd-app, então todo estado é declarado aqui.
   ========================================================================== */

.rawpay-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:flex-end;justify-content:center;background:rgba(24,24,24,.5);backdrop-filter:blur(3px);}
.rawpay-sheet{width:100%;max-width:520px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:18px 18px 0 0;padding:24px 22px 28px;animation:rawpaySobe .26s cubic-bezier(.22,1,.36,1);}
@media (min-width:560px){.rawpay-overlay{align-items:center;}.rawpay-sheet{border-radius:14px;}}
@keyframes rawpaySobe{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}

.rawpay-titulo{margin:0 0 5px;font-size:19px;font-weight:700;color:#181818;letter-spacing:-.01em;}
.rawpay-sub{margin:0 0 18px;font-size:13.5px;line-height:1.45;color:#6E6B63;}
.rawpay-grupo{margin:20px 0 9px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#6E6B63;}

.rawpay-valor{display:flex;align-items:baseline;justify-content:space-between;padding:15px 18px;margin-bottom:18px;background:#fff;border:.8px solid #E3E0D6;border-radius:14px;}
.rawpay-valor span:first-child{font-size:13.5px;color:#6E6B63;}
.rawpay-valor strong{font-size:19px;font-weight:700;color:#181818;}

.rawpay-opcao{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:17px 18px;margin-bottom:10px;text-align:left;background:#fff;border:0;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 1px rgba(24,24,24,.07),0 1px 2px rgba(24,24,24,.04);transition:box-shadow .16s ease;}
.rawpay-opcao:hover,.rawpay-opcao:focus-visible{box-shadow:0 0 0 1px rgba(24,24,24,.22),0 2px 6px rgba(24,24,24,.06);outline:none;}
.rawpay-opcao--atual{box-shadow:0 0 0 1.5px rgba(24,24,24,.55),0 3px 10px rgba(24,24,24,.07);}
.rawpay-opcao-nome{font-size:15px;font-weight:400;color:#181818;}
.rawpay-chevron{width:17px;height:17px;flex:0 0 auto;color:#C4C4BC;transition:color .16s ease,transform .16s ease;}
.rawpay-opcao:hover .rawpay-chevron{color:#6E6B63;transform:translateX(2px);}
.rawpay-opcao--atual .rawpay-chevron{color:#181818;}

.rawpay-voltar{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 14px -6px;padding:6px;font-size:13.5px;color:#6E6B63;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.rawpay-voltar::before{content:"";width:7px;height:7px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);}
.rawpay-voltar:hover,.rawpay-voltar:focus-visible{color:#181818;outline:none;}

.rawpay-campo{margin-bottom:14px;}
.rawpay-campo label{display:block;margin-bottom:8px;font-size:15px;font-weight:400;color:#1C1C1A;}
.rawpay-campo input,.rawpay-campo select{width:100%;padding:12px 14px;font-size:15px;color:#1C1C1A;background:#fff;border:.8px solid #ECECE6;border-radius:10px;-webkit-tap-highlight-color:transparent;transition:border-color .16s ease,box-shadow .16s ease;}
.rawpay-campo input:focus,.rawpay-campo select:focus{outline:none;border-color:rgba(24,24,24,.45);box-shadow:0 0 0 3px rgba(24,24,24,.06);}
.rawpay-campo input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:#1C1C1A!important;}
.rawpay-linha{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* Campos do Mercado Pago: o input mora num iframe deles, a moldura e nossa.
   Espelha .rawpay-campo input para o campo ficar indistinguivel dos outros. */
.rawpay-campo .rawpay-campo-seguro{width:100%;height:46px;padding:0 14px;background:#fff;border:.8px solid #ECECE6;border-radius:10px;display:flex;align-items:center;transition:border-color .16s ease,box-shadow .16s ease;}
.rawpay-campo .rawpay-campo-seguro iframe{width:100%!important;height:100%!important;border:0;display:block;}
.rawpay-campo .rawpay-campo-seguro:focus-within{border-color:rgba(24,24,24,.45);box-shadow:0 0 0 3px rgba(24,24,24,.06);}
.rawpay-erro{display:block;margin-top:6px;font-size:12.5px;color:#BF2E26;}

.rawpay-pix{text-align:center;}
.rawpay-qr{width:196px;height:196px;margin:0 auto 14px;padding:12px;background:#fff;border:.8px solid #E3E0D6;border-radius:14px;}
.rawpay-qr img{width:100%;height:100%;display:block;}
.rawpay-codigo{width:100%;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;color:#6E6B63;word-break:break-all;text-align:left;background:#fff;border:.8px solid #ECECE6;border-radius:10px;}
.rawpay-prazo{margin:12px 0 0;font-size:13px;color:#6E6B63;}
.rawpay-prazo strong{color:#181818;font-variant-numeric:tabular-nums;}

.rawpay-acao{width:100%;height:50px;margin-top:8px;font-size:14px;font-weight:700;color:#fff;background:#181818;border:0;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s ease,transform .1s ease;}
.rawpay-acao:hover:not(:disabled),.rawpay-acao:focus-visible:not(:disabled){background:rgba(24,24,24,.85);color:#fff;outline:none;}
.rawpay-acao:active:not(:disabled){transform:scale(.985);}
.rawpay-acao:disabled{opacity:.45;cursor:default;}

/* Segundo botão é link, não botão: mesma regra do .rawpay-desistir ao lado. */
.rawpay-secundario{display:block;width:100%;margin-top:12px;padding:10px 0;font-size:14px;font-weight:500;color:#8A8A82;background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.rawpay-secundario:hover,.rawpay-secundario:focus-visible{color:#181818;background:none;box-shadow:none;outline:none;text-decoration:underline;}

.rawpay-desistir{display:block;width:100%;margin-top:14px;padding:10px 0;font-size:13.5px;color:#8A8A82;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.rawpay-desistir:hover,.rawpay-desistir:focus-visible{color:#181818;outline:none;text-decoration:underline;}

.rawpay-troco{padding-top:8px;margin-top:12px;border-top:.8px solid #ECECE6;}

.rawpay-seguro{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font-size:11.5px;color:#8A8A82;}
.rawpay-seguro svg{width:13px;height:13px;flex:0 0 auto;}

.rawpay-espera{padding:30px 0;text-align:center;}
.rawpay-giro{width:32px;height:32px;margin:0 auto 14px;border:2.5px solid #ECECE6;border-top-color:#181818;border-radius:50%;animation:rawpayGira .8s linear infinite;}
@keyframes rawpayGira{to{transform:rotate(360deg);}}

.rawpop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(24,24,24,.55);backdrop-filter:blur(3px);}
.rawpop-caixa{width:100%;max-width:400px;padding:28px 24px 24px;text-align:center;background:#fff;border-radius:14px;animation:rawpopEntra .3s cubic-bezier(.22,1,.36,1);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;}
@keyframes rawpopEntra{from{transform:scale(.94);opacity:0;}to{transform:none;opacity:1;}}
.rawpop-mascote{width:92px;height:auto;margin:0 auto 14px;display:block;animation:rawpopPula 1.6s ease-in-out infinite;}
@keyframes rawpopPula{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.rawpop-titulo{margin:0 0 8px;font-size:19px;font-weight:700;color:#181818;letter-spacing:-.01em;}
.rawpop-texto{margin:0 0 14px;font-size:14px;line-height:1.5;color:#6E6B63;}
.rawpop-lista{margin:0 0 16px;padding:0 0 0 18px;text-align:left;font-size:13.5px;line-height:1.6;color:#6E6B63;}
.rawpop-nota{margin:0 0 16px;font-size:12.5px;color:#8A8A82;}
.rawpop-btn{display:block;width:100%;height:50px;margin-top:8px;font-size:14px;font-weight:700;border:0;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.rawpop-btn--principal{color:#fff;background:#181818;}
.rawpop-btn--principal:hover{background:rgba(24,24,24,.85);color:#fff;}
.rawpop-btn--secundario{color:#181818;background:#fff;font-weight:500;box-shadow:0 0 0 1px rgba(24,24,24,.12);}
.rawpop-btn--secundario:hover{box-shadow:0 0 0 1px rgba(24,24,24,.32);color:#181818;}

.rawpay-overlay button:hover,.rawpop button:hover{color:inherit;}

/* --------------------------------------------------------------------------
   Hover das linhas de escolha do app (entrega, pagamento, retirada).
   A regra global .rawd-row:hover pintava o texto de vermelho (--accent). Em
   opção de pagamento, vermelho lê como erro. Fica um realce neutro; o vermelho
   segue valendo nas linhas do cardápio.
   -------------------------------------------------------------------------- */
.rawd-row[data-action^="set-"]:hover .rawd-row-name{color:var(--text);}
.rawd-row[data-action^="set-"]:hover{background:rgba(24,24,24,.03);}

@media (prefers-reduced-motion:reduce){
  .rawpay-sheet,.rawpop-caixa{animation:none;}
  .rawpop-mascote{animation:none;}
  .rawpay-giro{animation-duration:2s;}
}

/* --------------------------------------------------------------------------
   Etapa de pagamento.

   Opção e painel moram no MESMO bloco e é o bloco que desenha a borda — assim
   ela nunca quebra na emenda entre os dois. Seleção por anel, como no checkout
   da loja: nada de fundo cinza nem borda preta.
   -------------------------------------------------------------------------- */
.rawd-opts--pagto{display:block;}

.rawd-pay-bloco{margin-bottom:10px;background:#fff;border-radius:14px;overflow:hidden;
	box-shadow:0 0 0 1px rgba(24,24,24,.07),0 1px 2px rgba(24,24,24,.04);
	transition:box-shadow .16s ease;}
.rawd-pay-bloco:last-child{margin-bottom:0;}
.rawd-pay-bloco:hover{box-shadow:0 0 0 1px rgba(24,24,24,.18),0 2px 6px rgba(24,24,24,.05);}
.rawd-pay-bloco--on,.rawd-pay-bloco--on:hover{box-shadow:0 0 0 1.5px rgba(24,24,24,.32),0 3px 10px rgba(24,24,24,.06);}

/* A linha abre mão de fundo, borda e sombra próprios: quem desenha é o bloco. */
.rawd-opts--pagto .rawd-opt,
.rawd-opts--pagto .rawd-opt--on{width:100%;margin:0!important;padding:16px 18px;
	background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;}

/* Bolinha discreta: cinza, nunca preta. */
.rawd-opts--pagto .rawd-opt-mark{display:flex!important;align-items:center;justify-content:center;
	width:18px;height:18px;flex:0 0 auto;background:#fff;
	border:1.5px solid #DCDCD4!important;border-radius:50%;box-shadow:none!important;transition:border-color .16s ease;}
.rawd-opts--pagto .rawd-opt--on .rawd-opt-mark{border-color:#9A968C!important;}
/* Centralizado pelo flex do círculo: margem fixa deixava o ponto 1px fora do
   eixo e a bolinha parecia torta. */
.rawd-opts--pagto .rawd-opt--on .rawd-opt-mark::after{content:"";display:block;width:8px;height:8px;margin:0;border-radius:50%;background:#7A776F;}

.rawd-opts--pagto .rawd-opt-title{font-size:15px;font-weight:400;color:#181818;}

.rawd-pay-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px;margin-left:auto;color:#B4B0A6;transition:color .16s ease;}
.rawd-pay-ico svg{width:20px;height:20px;display:block;}
.rawd-pay-bloco--on .rawd-pay-ico{color:#6E6B63;}

/* Painel: sem borda própria, só um fio separando da linha de cima. */
.rawd-pay-painel{padding:16px 18px 6px;background:transparent;border-top:.8px solid #F1F0EB;
	animation:rawdAbre .18s ease-out;}
@keyframes rawdAbre{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
.rawd-pay-painel .rawd-field{margin-bottom:12px;}
.rawd-pay-painel .rawd-note--pay{margin:0 0 10px;}
.rawd-pay-painel .rawd-opts{margin-bottom:4px;}

.rawd-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rawd-opts--tipo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}

.rawd-pay-aviso{margin:0 0 10px;font-size:13px;line-height:1.45;color:#6E6B63;}
.rawd-pay-aviso--seguro{margin-top:2px;font-size:12.5px;color:#8A8A82;}

@media (prefers-reduced-motion:reduce){.rawd-pay-painel{animation:none;}}

/* --------------------------------------------------------------------------
   A cereja: o check se desenha, o mascote entra em seguida.
   Sequência curta de propósito — quem esperou o pagamento quer a resposta,
   não um espetáculo.
   -------------------------------------------------------------------------- */
.rawpop-check{width:56px;height:56px;display:block;margin:0 auto 10px;}
.rawpop-check-anel{stroke:#2F7A4F;stroke-width:2.5;stroke-dasharray:145;stroke-dashoffset:145;
	animation:rawpopAnel .5s cubic-bezier(.65,0,.45,1) forwards;}
.rawpop-check-tique{stroke:#2F7A4F;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
	stroke-dasharray:36;stroke-dashoffset:36;
	animation:rawpopTique .32s cubic-bezier(.65,0,.45,1) .42s forwards;}
@keyframes rawpopAnel{to{stroke-dashoffset:0;}}
@keyframes rawpopTique{to{stroke-dashoffset:0;}}

/* Com o check presente, o mascote entra depois — não os dois ao mesmo tempo. */
.rawpop-check + .rawpop-titulo{animation:rawpopSobe .3s ease-out .6s both;}
.rawpop-check ~ .rawpop-texto,
.rawpop-check ~ .rawpop-btn{animation:rawpopSobe .3s ease-out .7s both;}
@keyframes rawpopSobe{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* O ícone do PIX é preenchido (marca oficial); os outros são de traço. */
.rawd-pay-ico svg[viewBox="0 0 512 512"]{width:17px;height:17px;}

@media (prefers-reduced-motion:reduce){
	.rawpop-check-anel,.rawpop-check-tique{animation:none;stroke-dashoffset:0;}
	.rawpop-check + .rawpop-titulo,.rawpop-check ~ .rawpop-texto,.rawpop-check ~ .rawpop-btn{animation:none;}
}

/* Tipografia dos botões do pagamento: Poppins, como no resto da marca. */
.rawpay-acao,.rawpay-secundario,.rawpay-desistir,.rawpay-voltar,
.rawpop-btn,.rawpop-link,
.rawd-opts--pagto .rawd-opt-title{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}

/* Ação secundária do popup: link, não botão — e no vermelho da marca. */
.rawpop-link{display:block;width:100%;margin-top:12px;padding:10px 0;font-size:14px;font-weight:500;
	color:#8A8A82;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.rawpop-link:hover,.rawpop-link:focus-visible{color:#181818;outline:none;text-decoration:underline;}

/* --------------------------------------------------------------------------
   Nenhum botão do pagamento herda cor de hover do tema. O vermelho vinha de
   uma regra global de botão e, num botão de fundo branco, lia como erro.
   -------------------------------------------------------------------------- */
.rawpay-overlay .rawpay-opcao,.rawpay-overlay .rawpay-opcao:hover,
.rawpay-overlay .rawpay-opcao:focus,.rawpay-overlay .rawpay-opcao:active,
.rawpay-overlay .rawpay-opcao:hover .rawpay-opcao-nome,
.rawpop .rawpop-btn--secundario,.rawpop .rawpop-btn--secundario:hover,
.rawpop .rawpop-btn--secundario:focus{color:#181818!important;}

.rawpay-overlay .rawpay-secundario,.rawpay-overlay .rawpay-secundario:hover,
.rawpay-overlay .rawpay-desistir,.rawpay-overlay .rawpay-desistir:hover,
.rawpay-overlay .rawpay-voltar,.rawpay-overlay .rawpay-voltar:hover,
.rawpop .rawpop-link,.rawpop .rawpop-link:hover{color:#8A8A82!important;}
.rawpay-overlay .rawpay-secundario:hover,
.rawpay-overlay .rawpay-desistir:hover,.rawpay-overlay .rawpay-voltar:hover,
.rawpop .rawpop-link:hover{color:#181818!important;}

.rawpay-overlay .rawpay-acao,.rawpay-overlay .rawpay-acao:hover,
.rawpop .rawpop-btn--principal,.rawpop .rawpop-btn--principal:hover{color:#fff!important;}

/* iOS e Android dao zoom automatico quando o campo tem fonte menor que 16px,
 e o zoom desalinha o layout inteiro. Corrigir a fonte resolve na causa; mexer
 no viewport com maximum-scale tiraria o pinch-to-zoom de quem precisa dele. */
@media (max-width: 767px) {
	.rawd-field input,
	.rawd-field select,
	.rawd-field textarea,
	.rawd-field .rawd-phone input,
	.rawd-coupon-row input,
	.rawpay-campo input,
	.rawpay-campo select {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   O reset do tema (Hello Elementor) define TODO <button> como contorno rosa
   que PREENCHE de #C36 no hover e no foco. A regra e global, com
   especificidade (0,1,1), e vence qualquer classe nossa sozinha: o guard
   antigo logo acima corrigiu so a COR DO TEXTO, e o fundo continuou virando
   rosa - era o que aparecia na tela de trocar forma de pagamento.
   Aqui cada botao reafirma o proprio fundo, ancorado no container para ter
   especificidade maior. Quem ja tem hover proprio (.rawpay-acao,
   .rawpop-btn--principal) so precisa do :focus.
   -------------------------------------------------------------------------- */
.rawpay-overlay .rawpay-opcao:hover,
.rawpay-overlay .rawpay-opcao:focus,
.rawpop .rawpop-btn--secundario:hover,
.rawpop .rawpop-btn--secundario:focus {
	background: #fff;
}

.rawpay-overlay .rawpay-secundario:hover,
.rawpay-overlay .rawpay-secundario:focus,
.rawpay-overlay .rawpay-desistir:hover,
.rawpay-overlay .rawpay-desistir:focus,
.rawpay-overlay .rawpay-voltar:hover,
.rawpay-overlay .rawpay-voltar:focus,
.rawpay-overlay .rawpay-copiar:hover,
.rawpay-overlay .rawpay-copiar:focus,
.rawpay-overlay .rawpay-x:hover,
.rawpay-overlay .rawpay-x:focus,
.rawpop .rawpop-link:hover,
.rawpop .rawpop-link:focus {
	background: none;
}

.rawpay-overlay .rawpay-acao:focus,
.rawpop .rawpop-btn--principal:focus {
	background: #181818;
}

/* --------------------------------------------------------------------------
   Ancora de rolagem. --rawd-anchor e medida no JS (barras fixas do site + a
   barra sticky do app + folga) e muda sozinha entre deslogado/logado e entre
   celular/desktop. Declarar aqui faz QUALQUER rolagem ate uma etapa parar no
   lugar certo, inclusive as nativas, sem repetir a conta em JS.
   -------------------------------------------------------------------------- */
.rawd-section {
	scroll-margin-top: var(--rawd-anchor, 0px);
}

/* --------------------------------------------------------------------------
   Botoes da tela de confirmacao. Os dois em caixa baixa e na fonte do app;
   "Novo pedido" e acao secundaria, entao vira link vermelho em vez de bloco
   solido - o destaque fica em acompanhar o pedido que a pessoa acabou de fazer.
   -------------------------------------------------------------------------- */
.rawd-success .rawd-cta--ghost {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.rawd-link--novo {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 12px 0;
	border: 0;
	background: none;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--accent);
	cursor: pointer;
}

.rawd-link--novo:hover,
.rawd-link--novo:focus {
	background: none;
	color: var(--accent);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Freio por conta. Acao em preto, nao no vermelho da marca: a tela e um
   "espera", nao um erro. O #rawd-app nao e enfeite: existe um
   `#rawd-app .rawd-cta` com ID que venceria qualquer seletor so de classe.
   "espera", nao um erro nem um convite. Vermelho aqui gritaria.
   -------------------------------------------------------------------------- */
#rawd-app .rawd-cta--escuro {
	/* Como <a>, nao herda a centralizacao do <button>: flex resolve os dois eixos. */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #181818;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

#rawd-app .rawd-cta--escuro:hover,
#rawd-app .rawd-cta--escuro:focus {
	background: rgba(24, 24, 24, .85);
	color: #fff;
}


#rawd-app .rawd-modal-text--nota {
	font-size: 13px;
	color: #8A8781;
}
/* Campos seguros do Mercado Pago na etapa de pagamento: a moldura e nossa, o
   input mora no iframe deles. Espelha .rawd-field input para nao destoar. */
.rawd-mp-campo{width:100%;height:48px;padding:0 14px;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);transition:border-color .18s ease,box-shadow .18s ease;}
.rawd-mp-campo iframe{width:100%!important;height:100%!important;border:0;display:block;}
.rawd-mp-campo:focus-within{border-color:rgba(24,24,24,.45);box-shadow:0 0 0 3px rgba(24,24,24,.06);}
.rawd-mp-aviso{margin:8px 0 0;font-size:13px;color:#C0392B;}
/* Cartao ja tokenizado: os campos viram leitura. Fundo do campo travado, para
   ler como "preenchido e guardado" e nao como algo ainda editavel. */
.rawd-mp-lido{width:100%;min-height:48px;padding:12px 14px;display:flex;align-items:center;gap:0;font-size:15px;color:#1C1C1A;background:#F1F2F4;border:.8px solid rgba(24,24,24,.1);border-radius:var(--radius-sm);}
/* O que esta oculto some para o segundo plano, sem virar ruido visual. */
.rawd-field .rawd-mp-oculto,.rawd-mp-oculto{display:inline;margin:0;font-size:15px;font-weight:400;color:#A8A8A0;letter-spacing:.12em;}
.rawd-field .rawd-mp-oculto--pre,.rawd-mp-oculto--pre{margin-right:7px;}
.rawd-mp-trocar{display:block;margin:10px 0 0 auto;padding:4px 2px;font-size:13px;font-weight:500;color:#8A8A82;background:none;border:0;cursor:pointer;}
.rawd-mp-trocar:hover{color:#181818;text-decoration:underline;}
/* O reset do tema (Hello Elementor) pinta TODO <button> de #C36 no hover e no
   foco. A minha regra do link so declarava a COR, entao o fundo rosa passava por
   baixo. Ancorar no #rawd-app da especificidade (1,1,1) e vence sem !important. */
#rawd-app .rawd-mp-trocar,
#rawd-app .rawd-mp-trocar:hover,
#rawd-app .rawd-mp-trocar:focus,
#rawd-app .rawd-mp-trocar:focus-visible{background:none;border:0;box-shadow:none;}
#rawd-app .rawd-mp-trocar:hover,
#rawd-app .rawd-mp-trocar:focus-visible{color:#181818;text-decoration:underline;outline:none;}

/* ---------- Desktop: o app nasceu com largura de celular ---------- */
/* Sobravam ~660px de branco dos dois lados. Decisao do Lucas: UMA coluna com a linha
   esticada, foto na direita — nao duas colunas. Nao precisa de regra para isso:
   .rawd-row-info ja e flex:1 e .rawd-row-imgwrap e flex-shrink:0, entao o texto come
   a sobra e a foto encosta na direita sozinha.
   Formulario largo nao ajuda ninguem, entao checkout, login e pedidos continuam
   numa coluna estreita centrada. */
@media (min-width: 1024px) {
	/* O container branco vem travado em 1140px pelo tema (Hello Elementor). As outras
	   secoes do site usam 10% de respiro nas laterais — aqui seguimos o mesmo padrao.
	   Escopado por :has() para nao tocar em nenhuma outra pagina, e para sobreviver
	   se a pagina do app for duplicada e mudar de ID. */
	main.site-main:has(#rawd-app) {
		max-width: none;
		/* O tema da largura explicita ao main; sem 'auto' a margem empurra o bloco
		   para fora da tela em vez de encolher ele. */
		width: auto;
		margin-left: 10%;
		margin-right: 10%;
	}

	/* O shell preenche a area do app e o respiro fica no padding: assim a sobra
	   branca das laterais some sem o conteudo encostar na borda. */
	.rawd-shell {
		max-width: 100%;
		padding-left: 36px;
		padding-right: 36px;
	}

	.rawd-checkout,
	.rawd-auth,
	.rawd-orders,
	.rawd-empty {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}