body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: #f4f4f4;
	color: #222;
}

header {
	background: #b22222;
	color: #fff;
	padding: 10px 15px;
}

.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

.logo-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.logo {
	display: flex;
	align-items: center;
}

.logo-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ffe066, #ff6a00);
	margin-right: 10px;
	border: 3px solid #fff;
}

.logo-text {
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 1px;
}

nav a {
	text-decoration: none;
	color: #fff;
	padding: 6px 12px;
	margin: 3px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,0.6);
	display: inline-block;
	transition: .2s;
	font-size: .9rem;
}

nav a:hover {
	background: rgba(255,255,255,0.15);
}

main {
	padding: 20px 15px 40px;
}

.hero {
	background: #fff;
	padding: 15px;
	border-radius: 6px;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}

.hero h1 {
	margin-top: 0;
}

.cta a {
	text-decoration: none;
	background: #b22222;
	color: #fff;
	padding: 10px 18px;
	border-radius: 4px;
	display: inline-block;
	transition: .2s;
}

.cta a:hover {
	background: #8b1a1a;
}

.specials {
	margin-top: 25px;
}

.special-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.special-card {
	flex: 1 1 220px;
	background: #fff;
	border-radius: 6px;
	padding: 12px;
	box-shadow: 0 0 5px rgba(0,0,0,0.08);
}

.special-price {
	font-weight: bold;
	color: #b22222;
}

.special-card .btn {
	margin-top: 8px;
}

footer {
	text-align: center;
	font-size: .8rem;
	padding: 10px;
	color: #666;
}

.layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.order-form,
.cart-area {
	background: #fff;
	padding: 15px;
	border-radius: 6px;
	box-shadow: 0 0 5px rgba(0,0,0,0.08);
}

.order-form {
	flex: 2 1 300px;
}

.cart-area {
	flex: 1 1 220px;
}

label {
	display: block;
	margin-top: 10px;
	font-weight: bold;
}

input[type=text],
select {
	width: 100%;
	padding: 6px;
	margin-top: 4px;
	box-sizing: border-box;
}

.toppings label,
.drinks label {
	font-weight: normal;
	display: block;
}

.btn {
	display: inline-block;
	margin-top: 15px;
	padding: 8px 16px;
	background: #b22222;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: .2s;
}

.btn:hover {
	background: #8b1a1a;
}

#cartItems ul {
	padding-left: 18px;
	margin: 0;
}

.receipt,
.payment {
	background: #fff;
	padding: 15px;
	border-radius: 6px;
	box-shadow: 0 0 5px rgba(0,0,0,0.08);
}

.receipt {
	flex: 2 1 300px;
}

.payment {
	flex: 1 1 230px;
}

table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

th,
td {
	padding: 8px 6px;
	border-bottom: 1px solid #ddd;
}

thead th {
	background: #f0f0f0;
}

td:nth-child(3) {
	text-align: right;
}

tr:last-child td {
	border-bottom: none;
}

table.receipt-table {
	font-family: "Courier New", monospace;
}

table.receipt-table th,
table.receipt-table td {
	text-align: right;
	padding: 4px 3px;
}

table.receipt-table .desc {
	text-align: left;
	width: 65%;
}

table.receipt-table tfoot td {
	font-weight: bold;
}

.note {
	font-size: .9rem;
	color: #555;
	margin-top: 10px;
}

#popupOverlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
}

#popupBox {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
	max-width: 360px;
	text-align: center;
}

#introOverlay {
	position: fixed;
	inset: 0;
	background: #b22222;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

#introLogo {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 1;
	animation: fadeLogo 2s ease forwards 1.4s;
}

.intro-circle {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ffe066, #ff6a00);
	border: 6px solid #fff;
	margin-bottom: 15px;
	animation: pulseCircle 1.2s ease-out forwards;
}

.intro-text {
	font-size: 2rem;
	font-weight: bold;
	color: white;
	letter-spacing: 1.5px;
	text-align: center;
}

@keyframes pulseCircle {
	0% { transform: scale(.2); opacity: 0; }
	40% { transform: scale(1); opacity: 1; }
	100% { transform: scale(6); opacity: 0; }
}

@keyframes fadeLogo {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes overlayFadeOut {
	from { opacity: 1; visibility: visible; }
	to { opacity: 0; visibility: hidden; }
}

@media (max-width: 750px) {
	.layout {
		flex-direction: column;
	}
}
.special-card .btn {
	margin-top: 8px;
	display: inline-block;
}