body {
	font-size: 1.2rem;
	font-family: 'Open Sans', sans-serif;
	color: #000;
	background: #fed101;
}
a {
	color: #000;
}
form {
	max-width: 640px;
	margin: auto;
}
.rounded {
	border-radius: 0.5rem !important;
}
.btn {
	border: none;
}
.btn-primary, .btn-dark {
	color: #fff;
	background-color: #000000;
	border-color: #000000;
	width: 100%;
	margin-top: 20px;
	padding: 1rem;
	border-radius: 50px;
}
.btn-outline-dark {
	border-color: #000000;
	width: 100%;
	margin-top: 20px;
	padding: 1rem;
	border-radius: 50px;
	border: 1px solid #000;
}
.btn-primary:hover, .btn-dark:hover {
    color: #fed101;
    background-color: #fb37f3;
    border-color: #fb37f3;
}
.container {
	width: 94%;
	margin: auto;
	max-width: 640px;
}
.orderWrapper {
	background: #FFF;
	padding: 1rem 1rem 2rem;
	margin-bottom: 20px;
	text-align: left;
	border-radius: 0.5rem;
}
.orderWrapper.delivered {
	opacity: 0.6;
}

.orderWrapper img {
	max-width: 100%;
}
.orderNumber {
	text-align: right;
	font-size: 1.4rem;
}

a.mapGen {
	font-size: 1.8rem;
	text-decoration: none;
	margin: 12px 0;
	display: block;
	cursor: pointer;
	font-weight: 800;
}
.pano {
	margin-top: 12px;
	width: 100%;
	height: 300px;
	display: none;
	margin-bottom: 1.5rem;
}
.orderWrapperBoxing .orderInfo {
	text-align: left;
	padding: 0 24px;
}
.orderName {
	margin-bottom: 1rem;
	font-size: 1.4rem;
}
.orderWrapperBoxing .orderInfo div.orderName {
font-weight: 400;
    border-bottom: 1px solid #000;
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    padding-bottom: 24px;
}
.orderNotes {
	font-style: italic;
		font-size: 1.4rem;
}
.form-control, .form-select {
	font-size: 1.2rem;
}
.address {
	text-decoration: none;
}
h1, h2 {
	font-family: "Fredoka One";
	font-size: 1.6rem;
	font-weight: 400;
}
h1 {
	font-family: "Fredoka One";
	font-size: 2rem;
}
.phone {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e5e5e5;
}
.position-fixed {
	width: 100%;
	}
.focaccia {
	color: #FFF;
    font-family: "Fredoka One";
    font-size: 1rem;
    background: #1d00d3;
    border-radius: 3rem;
    padding: 6px;
    text-align: center;
}
.swipe-container {
	z-index: 10;
}
.swipe-fill {
	transform: scaleX(0);
	transform-origin: left center; 
	transition: none;
	background-color: #fc01f3;
}
.swiped-success {
	transition: transform 0.2s ease-in-out;
	transform: scaleX(1);
}
.swipe-text {
	font-size: 1.2rem;
    position: relative;
    top: -2px;
}
.swipe-wrapper {
	border-radius: 50px;
}
.infoWrapper {
	padding: 1rem;
	border-radius: 0.5rem;
	background: #1d00d3;
	color: #FFF;
	margin-bottom: 20px;
}
.infoWrapper a {
	color: #FFF;
}







body { box-sizing: border-box; margin: 0; padding: 0; }
body {
	overflow-x: hidden; 
}

/* Prevent scrolling when menu is open */
body.menu-open {
	overflow: hidden;
}

/* --- HEADER STRUCTURE --- */
header {
	background-color: #000;
	font-family: "Fredoka One";
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6.2vw;
	position: relative;
}
body.menu-open header {
	background-color: #fed101;
}
body.menu-open .logo a {
	color: #000;
}

/* Logo Centering Logic */
.logo a {
	font-family: "Fredoka One";
	font-size: 24px; /* Slightly smaller for mobile optimization */
	font-weight: 400;
	text-decoration: none;
	color: #fff;
	text-transform: none;
	white-space: nowrap;
	display: inline-flex;
	position: relative;
	top: -1px;
}

/* Left & Right containers to balance the center logo */
.header-left, .header-right {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}
.header-left { left: 32px; }
.header-right { right: 20px; }

/* Desktop Nav (Hidden on Mobile) */
.desktop-nav {
	display: none; /* See media query below for desktop view */
}

/* --- MOBILE MENU BUTTON (HAMBURGER) --- */
.hamburger-btn {
	background: none;
	border: none;
	cursor: pointer;
	width: 35px;
	height: 13px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 1001; /* Above the overlay */
}

.hamburger-btn span {
	display: block;
	width: 35px;
	height: 1.5px;
	background-color: #fff;
	transition: all 0.3s ease;
}


body.menu-open .hamburger-btn span {
	background-color: #000;
}
/* Hamburger to 'X' Animation */
body.menu-open .hamburger-btn span:nth-child(1) {
	transform: rotate(45deg) translate(3px, 5px);
	width: 32px;
}
body.menu-open .hamburger-btn span:nth-child(2) {
	transform: rotate(-45deg) translate(3px, -5px);
	width: 32px;
}

/* --- MOBILE OVERLAY MENU --- */
.mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #fed101; /* Matches body bg */
	z-index: 999; /* Just below the header bar/button */
	
	/* Hidden State */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-20px);
	transition: all 0.3s ease-in-out;
	
	/* Layout content inside */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 60px; /* Space for the header bar */
}

/* Active State */
body.menu-open .mobile-overlay {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	max-width: 100vw;
}

.mobile-overlay ul {
	list-style: none;
	text-align: center;
}

.mobile-overlay li {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Staggered animation for links */
body.menu-open .mobile-overlay li:nth-child(1) { transition-delay: 0.1s; }
body.menu-open .mobile-overlay li:nth-child(2) { transition-delay: 0.15s; }
body.menu-open .mobile-overlay li:nth-child(3) { transition-delay: 0.2s; }
body.menu-open .mobile-overlay li:nth-child(4) { transition-delay: 0.25s; }
body.menu-open .mobile-overlay li:nth-child(5) { transition-delay: 0.3s; }
body.menu-open .mobile-overlay li:nth-child(6) { transition-delay: 0.35s; }
body.menu-open .mobile-overlay li:nth-child(7) { transition-delay: 0.4s; }
body.menu-open .mobile-overlay li:nth-child(8) { transition-delay: 0.45s; }
body.menu-open .mobile-overlay li:nth-child(9) { transition-delay: 0.5s; }

body.menu-open .mobile-overlay li {
	opacity: 1;
	transform: translateY(0);
}

.mobile-overlay a {
	display: inline-flex;
	font-size: 8.5vmin;
	font-weight: 400;
	color: #000;
	text-decoration: none;
	font-family: "Fredoka One";
}
.mobile-overlay ul {
	padding-left: 0;
}

.mobile-overlay a:hover {
	color: #ff6f61;
}
.mobile-overlay a.active-link {
	text-decoration: underline;
}

/* --- DESKTOP STYLES (Restoring desktop layout) --- */
@media (min-width: 900px) {
	.hamburger-btn { display: none; }
	.mobile-overlay { display: none; }
	
	header {
		flex-direction: column;
		height: auto;
		padding: 0;
	}

	.header-left, .header-right { 
		position: static; 
		width: auto;
	}
	.logo a {
		font-size: 25.2px;
	}
	.top-row {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1.45vw 2vw;
	}

	.desktop-nav {
		display: block;
		padding: 0;
	}
	.desktop-nav ul {
		display: flex;
		justify-content: center;
		gap: 25px;
		list-style: none;
		margin-bottom: 0;
		padding-left: 0;
		font-size: 0;
	}
	.desktop-nav a {
		text-decoration: none;
		color: #fff;
		font-weight: 400;
		text-transform: none;
		font-size: 13px;
		font-family: "Open Sans";
	}
	.desktop-nav a.active-link {
		border-bottom: 1.5px solid;
	}
	.top-row {
        position: relative; 
        display: flex;
        justify-content: space-between; /* Keeps nav left, empty div right */
        align-items: center;
    }

    /* 2. Remove the logo from the document flow and pin it to the dead center */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* Optional: Ensure it sits on top if window gets too small */
        z-index: 10; 
        width: auto; /* Prevent it from stretching */
    }
}
.pageTitle {
	padding: 2rem 0 1rem;
}
.launchWrapper {
	display: flex;
	gap: 20px;
}
.container.mt-2.mb-5 a img {
	display: inline-block;
	margin: auto;
}

.container .btn-group {
	width: 100%;
	font-family: "Fredoka One";
}
.orderWrapperBoxing {
	background: #FFF;
	font-size: 2rem;
	padding: 1rem;
	padding-bottom: 50px;
	text-align: center;
	position: relative;
	top: 0vh;
	scroll-margin-top: 20px;
	border-radius: 0.5rem;
	font-weight: 400;
	min-height: 96vh;
	font-family: "Fredoka One";
	text-transform: lowercase;
}
.text-warning {
	color: #fed101 !important;
	font-weight: 400 !important;
}	
.orderWrapper ul {
	padding-left: 0;
	margin-left: 0;
}
.orderWrapperBoxing .orderInfo div {
	margin-bottom: 8px;
}
.orderWrapperBoxing .orderWrapper img {
	max-width: 100%;
}
.orderWrapperBoxing .orderDetails {
	text-transform: lowercase;
	font-size: 2.5rem;
}
.orderWrapperBoxing .orderNo {
	font-size: 3rem;
}
.orderWrapperBoxing .merch {
	background: #1d00d3;
	padding: 10px;
	color: #FFF;
	border-radius: 50%;
	font-size: 1.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    padding: 10px 30px;
	font-weight: 400;
}
.orderWrapperBoxing .merch ul {
	padding-left: 0;
}
.orderWrapperBoxing .merch li:not(:last-child) {
	border-bottom: 1px solid #FFF;
}
.orderWrapperBoxing .merch li {
	padding: 0.6rem 0;
}
.orderWrapperBoxing .orderInfo div.merch {
	margin: 10px 0 65px;
}

.orderWrapperBoxing .position-fixed {
	width: 100%;
	}
	

.orderWrapperBoxing .buttonWrapper {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	display: block;
    margin: auto;
	padding: 0 20px;
}


/* Dashboard */

.deliveryStats {

}
.deliveryStatus {
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;
	width: 100%;
	font-size: 1.6rem;
}
.shoppingTable td {
	padding: 0.8rem 0.4rem;
}
td.shoppingPacks {
	text-align: right;
}
.form-check-input:checked {
    background-color: #fc01f3;
    border-color: #fc01f3;
}
p.latestAddress {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}
p.latestStatus {
	margin-bottom: 0.5rem;
	font-weight: 800;
}

/* Orders page */
.ordersContainer, .ordersContainer form {
	max-width: none;
}
.ordersContainer table {
	font-size: 0.8rem;
}
.tableWrapper {
	overflow-x: auto;
}