/* Fonts - Biscuit Belly Commercial Fonts */

/* Termina - Headline Font */
@font-face {
	font-family: 'Termina';
	src: url('../../XImages/fonts/Termina-Bold.woff2') format('woff2'),
	     url('../../XImages/fonts/Termina-Bold.woff') format('woff'),
	     url('../../XImages/fonts/Termina-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Termina';
	src: url('../../XImages/fonts/Termina-Medium.woff2') format('woff2'),
	     url('../../XImages/fonts/Termina-Medium.woff') format('woff'),
	     url('../../XImages/fonts/Termina-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Termina';
	src: url('../../XImages/fonts/Termina-Regular.woff2') format('woff2'),
	     url('../../XImages/fonts/Termina-Regular.woff') format('woff'),
	     url('../../XImages/fonts/Termina-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Proxima Nova - Body Font */
@font-face {
	font-family: 'Proxima Nova';
	src: url('../../XImages/fonts/ProximaNova-Extrabld.woff2') format('woff2'),
	     url('../../XImages/fonts/ProximaNova-Extrabld.woff') format('woff'),
	     url('../../XImages/fonts/Proxima Nova Extrabold.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('../../XImages/fonts/ProximaNova-Medium.woff2') format('woff2'),
	     url('../../XImages/fonts/ProximaNova-Medium.woff') format('woff'),
	     url('../../XImages/fonts/Proxima Nova Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('../../XImages/fonts/ProximaNova-Regular.woff2') format('woff2'),
	     url('../../XImages/fonts/ProximaNova-Regular.woff') format('woff'),
	     url('../../XImages/fonts/Proxima Nova.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* Global - BISCUIT BELLY OFFICIAL BRAND BOOK COLORS
Source: BiscuitBelly-BrandBook.pdf
Navy: #054477 (Primary - foundational brand color)
Mustard: #F2AC00 (Secondary - signature yellow accent)
Coral: #F37280 (Accent - warm highlights)
Teal: #4AC1BE (Accent - fresh, clean highlights)
*/

:root {
	--primary: #054477;    /* Navy - foundational brand color */
	--secondary: #F2AC00;  /* Mustard - signature yellow accent */
	--dark: #1C1818;       /* Dark - text and borders */
	--light: #FFFFFF;      /* White - clean backgrounds */

	/* Additional brand colors */
	--coral: #F37280;      /* Coral - warm accents */
	--teal: #4AC1BE;       /* Teal - fresh, clean highlights */
	--grey: #8D8D8D;       /* Neutral grey */

	/* Define Fonts */
	--primary-font: 'Termina', sans-serif;
	--secondary-font: 'Proxima Nova', sans-serif;

	/* Bootstrap Overrides
    You can override bootstrap application default colours at root, by using the !important flag
    This will change ALL implementations of the bootstrap colour tags
    You can also override bootstrap colours for individual elements, do this when you don't want the changes to apply globally. */

	--bs-black: var(--dark) !important;
	--bs-link-hover-color-rgb: var(--dark) !important;
	--bs-primary: var(--primary) !important;
	--bs-background-blue: var(--primary) !important;
	--bs-emphasis-color: var(--secondary) !important;
	--bs-heading-color: var(--primary) !important;
	--bs-medium-grey: var(--grey) !important;
	--bs-highlight-rgb: var(--secondary) !important;
	--bs-highlight: var(--secondary) !important;
	--bs-secondary-rgb: var(--dark) !important;
	--bs-gray: var(--dark) !important;
}


@keyframes descend {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	opacity: 0;
	animation: descend .9s ease-in-out forwards;
}


/* Universal Elements */
a {
	color: var(--primary);
	background: transparent;
}

a:hover {
	color: var(--dark);
	background: transparent;

}

body {
	font-family: var(--secondary-font);
	color: var(--dark);
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--primary-font);
}


/* End Universal Elements */


/* Header */

.logo-container {
	display: flex;
	justify-content: center;
}

.logo-container>a {
	display: block;
	width: 60%;
	max-width: 420px;
	min-width: 160px;
}

.logo-container>a>img {
	display: block;
	width: 100%;
	height: auto;
}

.logo-container span.navbar-brand {
	display: block;
}

span.header-logo.navbar-brand {
	background: url(../../XImages/base_images/BiscuitBelly-Logo.png) no-repeat center center !important;
	background-size: 25% !important;
	height: 80px;
	width: 270px;
}

.navbar-main {
	height: 100px;
}

.c-dropdown-menu {
	padding: 0 15px !important;
}

.c-profile__group .c-dropdown-menu-card .c-dropdown-card .c-profile-links .c-dropdown-menu li .dropdown-item {
	border-bottom: 1px solid var(--dark) !important;
}

.c-btn__signin .btn,
.c-btn__signup .btn {
	white-space: nowrap;
}

.c-btn__signup .btn:hover, 
.c-btn__signin .btn:hover {
	opacity: 0.8;
}

.logo-container>a>img {
	width: 50%;
	display: block;
}

.navbar-main {
	background: var(--primary) !important;
	display: flex;
	justify-content: space-between;
}

.navbar-brand {
	display: none;
}

.nav-item__language {
	display: none !important;
}


.header-links {
	display: none;
}

.header-container {
	width: 100%;
	display: flex;
	justify-content: space-between
}

.nav.c-nav__delivery {
	background: var(--dark) !important;
	color: var(--light) !important;
}

.nav-item>.c-btn__sm {
	color: var(--secondary);
}

.nav-item>img {
	filter: grayscale(1) contrast(7);
}

/* Desktop Header */
@media only screen and (min-width:48.001rem) {}

/* Mobile Header */
@media only screen and (max-width:48rem) {
	.navbar-toggler-icon {
		filter: invert(1);
	}

	.c-nav__delivery .c-label__text {
		color: var(--light);
	}

	.c-header__main>nav>div {
		margin: auto;
		display: block !important;
	}

	.logo-container>a>img {
		margin: auto;
		width: 25% !important;
	}

	.navbar-cart__wrapper {
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 7px;
		width: 100%;
	}

	header.c-header__main nav.navbar {
		padding: 0.25rem 1rem .75rem !important;
	}


}

/* End Header */

/* Footer */

.left-footer-links,
.right-footer-links {
	display: flex;
	flex-direction: column;
}

.top-footer-links {
	display: flex;
	width: 50%;
	justify-content: space-evenly;
}

.bottom-footer {
	width: 100%;
	padding: 20px 20px 5px 20px;
}

.bottom-footer-links {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.bottom-footer-links>a,
.left-footer-links>a,
.right-footer-links>a,
footer h3 {
	color: var(--primary);
}

.bottom-footer-links>a:hover,
.left-footer-links>a:hover,
.right-footer-links>a:hover {
	color: #46C2BD; /* Teal hover state */
}

.top-footer {
	display: flex;
	width: 100%;
	padding: 20px 0;
	border-top: 3px double var(--secondary);
        justify-content: center;
}

.bottom-footer {
        display: flex;
	padding-top: 10px;
	padding-right: 45px;
	border-top: 1px dashed var(--grey);
        justify-content: center;
}

footer {
	padding-top: 5px;
	background: var(--light);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

}

footer a {
	text-decoration: none;
	color: var(--primary);
}

footer a:hover {
	color: #46C2BD; /* Teal hover state */
}

.middle-footer-logo {
	display: flex;
	flex-direction: column; /* Stack image and tagline vertically */
	align-items: center; /* Center horizontally */
	gap: 20px; /* Space between image and tagline */
}

.middle-footer-logo > img {
	width: 15%;
	max-width: 150px; /* Prevent it from getting too large */
}

#monkeyCopyRight>a {
	color: var(--primary);
}

#monkeyCopyRight>a:hover {
	color: #46C2BD; /* Teal hover state */
}

.copy_text {
	color: var(--dark);
	text-align: center;
	font-size: 0.9rem;
}

.worth-every-crumb {
    font-family: var(--primary-font);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    text-align: center;
    display: flex;
    justify-content: center;
    
    /* Hollow text effect */
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2.5px #4AC1BE; /* Biscuit Belly teal */
}

.monkeylink {
	width: 100%;
	text-align: center;
	padding: 10px 0;
	background-color: transparent;
}

#monkey_link {
	font-size: 0.85rem;
	color: var(--dark);
}

#monkey_link a {
	color: var(--primary);
	text-decoration: none;
}

#monkey_link a:hover {
	color: var(--teal);
}

/* Desktop Footer */
@media only screen and (min-width:48.001rem) {}

/* Tablet/Medium Screens - Stack WORTH EVERY CRUMB vertically */
@media only screen and (min-width: 767px) and (max-width: 1533px) {
	.worth-every-crumb {
		max-width: 200px; /* Narrow width forces words to stack */
		margin: 0 auto; /* Center the narrow container */
		font-size: 3rem; /* Slightly smaller for tablet */
		letter-spacing: 0.2em;
		line-height: 1.1; /* Tighter line spacing */
		word-spacing: 9999px; /* Forces each word onto new line */
	}
	
	.middle-footer-logo > img {
		width: 150px; /* Fixed size for tablet range */
		min-width: 100px; /* Ensure it doesn't shrink */
	}
}


/* Mobile Footer */

@media only screen and (max-width:48rem) {

	.top-footer,
	.top-footer-links,
	.bottom-footer,
	.bottom-footer-links {
		flex-direction: column;
		width: 100%;
		align-items: center;
		text-align: center;

	}

	.middle-footer-logo > img {
		width: 25%;
		max-width: 120px;
	}

	.worth-every-crumb {
		font-size: 2rem; /* Scale down on mobile */
		letter-spacing: 0.15em;
		-webkit-text-stroke: 2px #4AC1BE; /* Slightly thinner stroke on mobile */
	}

	.bottom-footer {
		padding: 10px 0;
	}
}


/* End Footer */


/* Main Content */

.card-product__price .btn-quick-add img {
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
	background: transparent !important;
}

.card-product__price .btn-quick-add:hover img {
	filter: contrast(7) grayscale(1) invert(1);;
}


.btn-outline-primary {
	background-color: var(--secondary) !important;
	color: var(--primary) !important;
	border: 1px solid var(--secondary) !important;
	border-radius: 50px !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	font-weight: 600 !important;
}


.c-checkout__details {
	border: 1px solid var(--dark);
	padding: 20px;
	background: var(--light);
	border-radius: 0.5rem;
}


#v-loyalty-rewards,
#v-saved-locations {
	margin-top: 3.375rem;
}


#v-loyalty-rewards>div:nth-child(1),
#v-saved-locations>div:nth-child(2) {
	display: none;
}

#v-pills-tab>.nav-item>.nav-link {
	border-bottom: 1px solid var(--dark);
}

.c-sidebar__account {
	margin: 3.375rem 3rem;
	border: 1px solid var(--dark);
	padding: 20px;
	background: var(--light);
	border-radius: 0.5rem;

}

#accountInformationForm {
	border: 1px solid var(--dark);
	padding: 20px;
	background: var(--light);
	border-radius: 0.5rem;
}

/* flat nav */
.c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--primary);
    width: calc(100% + 0.5rem);
    left: -0.25rem;
}

.c-product__tabs .nav-tabs .nav-item .nav-link:hover, .c-product__tabs .nav-tabs .nav-item .nav-link.active {
    color: var(--primary) !important;
}

#carousel.catering-menu__slider.position-sticky {
    top: 140px !important;
}

.nav-tabs__categories {
	padding: 10px;
	border: 1px solid var(--dark) !important;
	border-radius: 0.5rem;
}

#btnCheckoutFixed {
	background: var(--light);
	padding: 1rem 3rem 1rem 2.1rem;
}

.c-product-item__details .c-product__block {
	padding: 24px;
	border: 1px solid black;
	background: white;
	border-radius: 0.5rem;
}

.accordion-item:last-of-type .accordion-button.collapsed {
	border-radius: 0;
}

.btn-primary {
	--bs-btn-color: var(--primary) !important;
	--bs-btn-bg: var(--secondary) !important;
	--bs-btn-border-color: var(--secondary) !important;
	--bs-btn-hover-color: var(--light) !important;
	--bs-btn-hover-bg: var(--primary) !important;
	--bs-btn-hover-border-color: var(--light) !important;
	--bs-btn-focus-shadow-rgb: 95, 95, 95;
	--bs-btn-active-color: var(--light) !important;
	--bs-btn-active-bg: var(--primary) !important;
	--bs-btn-active-border-color: var(--light) !important;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(24, 24, 24, 0.125);
	--bs-btn-disabled-color: var(--light) !important;
	--bs-btn-disabled-bg: var(--grey) !important;
	--bs-btn-disabled-border-color: var(--grey) !important;
	border-radius: 50px !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	font-weight: 600 !important;
}

.btn.btn-primary:hover {
	background-color: var(--primary) !important;
	color: var(--light) !important;
	border-color: var(--light) !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
}

.c-card__product .card img,
.c-product-item__details .c-product__details .c-product__img {
	background-color: var(--light);
}

.c-group-filter .c-btn-filter:hover,
.c-group-filter .c-btn-filter:active,
.c-group-filter .c-btn-filter.show,
.c-group-filter .c-btn-filter:focus-visible,
.c-group-filter .icon__close:focus-visible {
	border: 1px solid var(--dark) !important;
}

#sidebarCart .btn-add-to-cart.c-collapse-arrow:hover,
#sidebarCart .btn-add-to-cart.c-collapse-arrow:active,
#sidebarCart .btn-add-to-cart.c-collapse-arrow {
	background-color: var(--secondary) !important;
	border: 1px solid var(--dark) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--secondary);
}

.c-collapse-arrow:hover {
	background-color: var(--secondary) !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active {
	background-color: var(--primary) !important;
	color: var(--light) !important;
	border-color: var(--light) !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
}

/* Header Sign In/Sign Up Buttons */
.c-btn__signin .btn,
.c-btn__signup .btn {
	background-color: var(--secondary) !important;
	color: var(--primary) !important;
	border: 1px solid var(--secondary) !important;
	border-radius: 50px !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	font-weight: 600 !important;
}

.c-btn__signin .btn:hover,
.c-btn__signup .btn:hover {
	background-color: var(--primary) !important;
	color: var(--light) !important;
	border-color: var(--light) !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	opacity: 1 !important;
}

/* Guest Checkout Button */
.c-btn__guest .btn,
.btn.c-btn__guest,
button[class*="guest"],
.guest-checkout .btn {
	background-color: var(--secondary) !important;
	color: var(--primary) !important;
	border: 1px solid var(--secondary) !important;
	border-radius: 50px !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	font-weight: 600 !important;
}

.c-btn__guest .btn:hover,
.btn.c-btn__guest:hover,
button[class*="guest"]:hover,
.guest-checkout .btn:hover {
	background-color: var(--primary) !important;
	color: var(--light) !important;
	border-color: var(--light) !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
}

.c-btn__signin>a,
.c-btn__signin>a:hover {
	background: var(--secondary) !important;
	color: var(--primary) !important;
	border-radius: 50px !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	font-weight: 600 !important;
}

.c-btn__signin:hover,
.c-btn__signup:hover,
#btnCheckout:hover {
	transform: scale(1.03);
}


#heading_preorder,
.c-content__heading {
	color: var(--secondary)
}

/* Profile Menu Icon */
.c-profile__group .c-profile__dropdown span {
	color: var(--secondary) !important;
}

.c-sidebar__cart.open,
.c-sidebar__cart.close {
	transition: all 0.3s ease-in-out;
}

.c-product__tabs .nav-tabs .nav-item .nav-link:hover {
	color: var(--secondary) !important;

}

.c-product__tags .badge {
	background-color: var(--secondary) !important;
}

.c-product__sub-categries.row {
	padding: 10px;
}

.c-card__product .card:hover {
	border-color: var(--dark);
	transform: scale(1.02) !important;
	filter: drop-shadow(2px 2px 2px var(--secondary));
}

.c-card__product .card {
	border: 2px solid var(--dark);
	transition: transform 0.3s ease;
}

/* Menu Item Card Buttons (Customize buttons) */
.c-card__product .btn,
.card-product__price .btn {
	background-color: var(--secondary) !important;
	color: var(--primary) !important;
	border: 1px solid var(--secondary) !important;
	border-radius: 50px !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
	font-weight: 600 !important;
}

.c-card__product .btn:hover,
.card-product__price .btn:hover {
	background-color: var(--primary) !important;
	color: var(--light) !important;
	border-color: var(--light) !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important;
}

.item-header {
	text-transform: uppercase;
	font-family: var(--primary-font);
}

.dropdown-menu,
.overflow-auto {
	scrollbar-color: var(--light) var(--secondary);
	scrollbar-width: thin;
}


/* Desktop Main Content */
@media only screen and (min-width:48.001rem) {
	.c-card__product .card {
		scale: 0.9;
	}

}

/* Mobile Main Content*/
@media only screen and (max-width:575px) {
#carousel.catering-menu__slider.position-sticky {
    top: 95px !important;
}
}

/* End Main Content */

/* Things that should not be local, these really need to be main app style rules */

@media (max-width: 48em) {
	.c-sidebar__block {
		height: 0;
	}
}

.credit-card-multi-image {
	max-width: 250px;
}

.card-product__price .btn-quick-add img {
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
	background: transparent !important;
}

/* Add background to edit button */
#activateEditButton {
	background-color: var(--light);
}

/* Skip to Menu and Submit Menu Buttons - Match Card Button Style */
#skipToMenu,
#submitMenu {
	background-color: var(--secondary) !important; /* Mustard background */
	color: var(--primary) !important; /* Navy text */
	border: 1px solid var(--secondary) !important;
	border-radius: 50px !important; /* Pill-shaped */
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important; /* Prominent shadow */
	padding: 14px 40px !important;
	font-family: var(--primary-font) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-align: center !important;
	letter-spacing: 0.1em !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	font-size: 1.1rem !important;
}

#skipToMenu:hover,
#submitMenu:hover {
	background-color: var(--primary) !important; /* Navy background on hover */
	color: var(--light) !important; /* White text on hover */
	border-color: var(--light) !important;
	box-shadow: 5.56px 5.75px 0 0 rgba(0, 0, 0, .2) !important; /* Keep shadow on hover */
	text-decoration: none !important;
}

/* Menu Item Image Sizer */
.c-product-item__details .c-product__details .c-product__img.default_product_image {
	object-fit: cover;
}

/* Hide Loyalty */
.c-dropdown-menu li:has(a[href="/online/loyaltyReward"]),
.c-dropdown-menu li:has(a[href="/online/dev100/loyaltyReward"]),
.c-sidebar__account li:has(a[href="/online/loyaltyReward"]),
.c-sidebar__account li:has(a[href="/online/dev100/loyaltyReward"]) {
	display: none;
}

/* Credit Card Selection */
[id^="profile_id_-"][id$="_label"]:has(input:checked)::before {
	content: "\2713\0020 ";
	color: var(--bs-highlight);
	margin-right: 0.5em;
}

#payment_method_2 #cc_profiles li.c-payment-method__item--profile-MOO:has(.c-form-choice:nth-of-type(1):last-of-type) {
	display: none;
}

/* END Credit Card Selection */

/* Add to cart sticky fix */
.c-main__content.mainContentActive.c-main__product {
	padding-bottom: 0px !important;
	margin-bottom: 0 !important;
}

.c-quantity-cart__fixed.fixed-bottom {
	position: sticky;
	bottom: 0;
	left: auto;
	right: auto;
	z-index: 1020;
}

.c-quantity-cart__fixed {
	width: calc(100% - 400px);
	margin-inline: auto;
	/* center the bar within its container */
	transform: translateX(0);
	display: none;
	opacity: 0;
	transition: opacity 1s, visibility 1s ease-in-out;
}

.c-quantity-cart__fixed.show {
	display: block;
	opacity: 1;
}

.c-quantity-cart__fixed {
	width: 100%;
}

/* END Add to cart sticky fix */

/* Hide dietary icons on production items */
.c-selection__items .c-items__group .c-dietary__tags {
	display: none !important;
}

/* END Hide dietary icons on production items */

/* Checkout Button Width */
.c-checkout__fixed {
    max-width: 399px !important;
}
/* END Checkout Button Width */