/* =====================================================================
   Online ordering — InFlagranti luxury refinements
   Loaded AFTER the compiled Vue bundle (dist/restaurant-ordering.css), which
   already ships the brand gold palette. This sheet rebinds those tokens to
   the active theme (so Customizer changes follow) and refines type & shape.
   Brand fallbacks keep it correct standalone.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

#restaurant-ordering-app {
	--color-gold: var(--gold, #b8a75d);
	--color-gold-light: var(--gold-soft, #d4c58a);
	--color-gold-dark: #8a7a3c;
	--color-dark: var(--bg, #0a0a0a);
	--color-dark-lighter: var(--surface, #141414);
	--color-dark-card: var(--surface-2, #1b1b1b);
	--color-text-primary: var(--gold, #b8a75d);
	--color-text-secondary: var(--text-muted, #a7a39a);
	--font-family: var(--font-body, 'Inter', -apple-system, sans-serif);

	--ro-gold-grad: linear-gradient(135deg, #d4c58a 0%, #b8a75d 55%, #8a7a3c 100%);
	--ro-head: var(--font-head, 'Playfair Display', Georgia, serif);
	color: var(--text, #f4f1ea);
}

#restaurant-ordering-app h1,
#restaurant-ordering-app h2,
#restaurant-ordering-app h3,
#restaurant-ordering-app .menu-category-title,
#restaurant-ordering-app .menu-item__name {
	font-family: var(--ro-head);
}

#restaurant-ordering-app .ro-btn,
#restaurant-ordering-app .ro-btn-primary,
#restaurant-ordering-app .ro-btn-secondary {
	border-radius: 999px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}
#restaurant-ordering-app .ro-btn-primary {
	background: var(--ro-gold-grad);
	color: #1a1408;
	border: none;
}
#restaurant-ordering-app .ro-btn-secondary {
	background: rgba(184, 167, 93, 0.06);
	color: var(--color-gold-light);
	border: 1px solid var(--color-gold);
}
#restaurant-ordering-app .ro-btn-secondary:hover {
	background: var(--ro-gold-grad);
	color: #1a1408;
	border-color: transparent;
}

#restaurant-ordering-app .ro-card,
#restaurant-ordering-app .ro-modal {
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.10);
}
#restaurant-ordering-app .ro-modal-overlay {
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
#restaurant-ordering-app .floating-cart-btn {
	background: var(--ro-gold-grad);
	color: #1a1408;
	box-shadow: 0 12px 40px rgba(184, 167, 93, 0.18);
}
#restaurant-ordering-app .menu-item__price,
#restaurant-ordering-app .cart__totals-total { color: var(--color-gold-light); }

/* Graceful entrance — Vue mounts these views after load, so the animation
   plays when they actually appear. */
#restaurant-ordering-app .menu-browser,
#restaurant-ordering-app .checkout,
#restaurant-ordering-app .order-success,
#restaurant-ordering-app .order-history {
	animation: ro-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#restaurant-ordering-app .menu-category-section {
	animation: ro-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#restaurant-ordering-app .menu-category-section:nth-of-type(2) { animation-delay: 0.08s; }
#restaurant-ordering-app .menu-category-section:nth-of-type(3) { animation-delay: 0.16s; }
#restaurant-ordering-app .menu-category-section:nth-of-type(n+4) { animation-delay: 0.24s; }
@keyframes ro-fade-in {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#restaurant-ordering-app .menu-browser,
	#restaurant-ordering-app .checkout,
	#restaurant-ordering-app .order-success,
	#restaurant-ordering-app .order-history,
	#restaurant-ordering-app .menu-category-section { animation: none; }
}