﻿:root {
	--bn-red: #b42025;
	--bn-red-dark: #801317;
	--bn-red-soft: rgba(180, 32, 37, .18);
	--bn-yellow: #ffc107;
	--bn-black: #111111;
	--bn-nav: #151515;
	--bn-nav-elevated: #202020;
	--bn-nav-muted: rgba(255, 255, 255, .68);
}

body {
	font-family: "Encode Sans", Arial, sans-serif;
}

.bn-bg-red {
	background-color: var(--bn-red) !important;
}

.bn-text-red {
	color: var(--bn-red) !important;
}

.bn-border-yellow {
	border-color: var(--bn-yellow) !important;
}

.bn-hero-image {
	min-height: 560px;
	object-fit: cover;
}

.bn-truck-image {
	min-height: 300px;
	object-fit: cover;
}

.bn-hero-overlay {
	background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .48), rgba(0, 0, 0, .15));
}

.bn-section-kicker {
	letter-spacing: .08em;
}

.bn-icon-circle {
	width: 64px;
	height: 64px;
}

.bn-link-card {
	transition: transform .18s ease, box-shadow .18s ease;
}

	.bn-link-card:hover,
	.bn-link-card:focus-within {
		transform: translateY(-3px);
		box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12) !important;
	}

/* Header */

.bn-navbar {
	background: radial-gradient(circle at top left, rgba(180, 32, 37, .32), transparent 34rem), linear-gradient(90deg, #101010, #1a1a1a);
}

	.bn-navbar .navbar-brand {
		transition: transform .18s ease, box-shadow .18s ease;
	}

		.bn-navbar .navbar-brand:hover,
		.bn-navbar .navbar-brand:focus {
			transform: translateY(-1px);
			box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .25) !important;
		}

	.bn-navbar .nav-link {
		color: rgba(255, 255, 255, .82) !important;
		border-radius: 999px;
		padding: .65rem .9rem;
		transition: background-color .16s ease, color .16s ease;
	}

		.bn-navbar .nav-link:hover,
		.bn-navbar .nav-link:focus,
		.bn-navbar .nav-link.show {
			color: #ffffff !important;
			background-color: rgba(255, 255, 255, .08);
		}

	.bn-navbar .dropdown-toggle::after {
		vertical-align: .14em;
		opacity: .65;
	}

/* Sleek right-side action buttons */

.bn-nav-actions {
	background-color: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 999px;
	padding: .35rem;
	backdrop-filter: blur(8px);
}

.bn-nav-icon-btn,
.bn-nav-user-btn,
.bn-nav-login-btn,
.bn-nav-signout-btn {
	min-height: 42px;
	border-radius: 999px;
	font-weight: 700;
	transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.bn-nav-icon-btn {
	width: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .86);
	background-color: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .10);
}

	.bn-nav-icon-btn:hover,
	.bn-nav-icon-btn:focus {
		color: #111111;
		background-color: var(--bn-yellow);
		border-color: var(--bn-yellow);
		transform: translateY(-1px);
	}

.bn-nav-user-btn {
	color: #ffffff;
	background-color: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .14);
}

	.bn-nav-user-btn:hover,
	.bn-nav-user-btn:focus {
		color: #ffffff;
		background-color: rgba(255, 255, 255, .16);
		border-color: rgba(255, 255, 255, .24);
		transform: translateY(-1px);
	}

.bn-nav-login-btn {
	color: #111111;
	background: linear-gradient(135deg, #ffd45c, var(--bn-yellow));
	border: 0;
	box-shadow: 0 .35rem .9rem rgba(255, 193, 7, .22);
}

	.bn-nav-login-btn:hover,
	.bn-nav-login-btn:focus {
		color: #111111;
		background: linear-gradient(135deg, #ffe08a, #ffc720);
		box-shadow: 0 .5rem 1rem rgba(255, 193, 7, .32);
		transform: translateY(-1px);
	}

.bn-nav-signout-btn {
	color: #ffffff;
	background-color: var(--bn-red);
	border: 1px solid rgba(255, 255, 255, .08);
}

	.bn-nav-signout-btn:hover,
	.bn-nav-signout-btn:focus {
		color: #ffffff;
		background-color: var(--bn-red-dark);
		transform: translateY(-1px);
	}

.bn-navbar-toggler {
	border: 1px solid rgba(255, 255, 255, .12);
	background-color: rgba(255, 255, 255, .08);
	color: #ffffff;
}

	.bn-navbar-toggler:hover,
	.bn-navbar-toggler:focus {
		background-color: var(--bn-yellow);
		color: #111111;
	}

/* Dropdowns */

.bn-navbar .dropdown-menu {
	margin-top: .55rem;
	padding: .5rem;
	background: linear-gradient(180deg, rgba(42, 42, 42, .98), rgba(22, 22, 22, .98));
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 1rem;
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .36);
	min-width: 16rem;
}

.bn-navbar .dropdown-item {
	color: rgba(255, 255, 255, .82);
	border-radius: .75rem;
	font-weight: 650;
	padding: .7rem .85rem;
	transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

	.bn-navbar .dropdown-item:hover,
	.bn-navbar .dropdown-item:focus {
		color: #ffffff;
		background-color: var(--bn-red-soft);
		transform: translateX(2px);
	}

.bn-navbar .dropdown-divider {
	border-color: rgba(255, 255, 255, .12);
	margin: .45rem .35rem;
}

/* Favorites offcanvas */

.bn-favorites-header {
	background: radial-gradient(circle at top left, rgba(180, 32, 37, .42), transparent 22rem), linear-gradient(135deg, #121212, #222222);
}

.bn-favorite-link {
	background-color: #1b1b1b;
	color: rgba(255, 255, 255, .82);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	padding: .9rem 1rem;
	font-weight: 650;
}

.bn-favorite-link:hover,
.bn-favorite-link:focus {
	background-color: var(--bn-red-soft);
	color: #ffffff;
}

/* Footer */

.bn-footer-link:hover,
.bn-footer-link:focus {
	color: var(--bn-yellow) !important;
}

@media (min-width: 1200px) {
	.bn-navbar .dropdown:hover > .dropdown-menu,
	.bn-navbar .dropdown:focus-within > .dropdown-menu {
		display: block;
	}

	.bn-navbar .dropdown-toggle::after {
		transition: transform .15s ease;
	}

	.bn-navbar .dropdown:hover > .dropdown-toggle::after,
	.bn-navbar .dropdown:focus-within > .dropdown-toggle::after {
		transform: rotate(180deg);
	}
}

@media (max-width: 1199.98px) {
	.bn-nav-actions {
		background-color: transparent;
		border: 0;
		padding: 0;
	}

	.bn-navbar .navbar-collapse {
		padding-top: 1rem;
	}

	.bn-navbar .nav-link {
		border-radius: .75rem;
	}

	.bn-navbar .dropdown-menu {
		display: block;
		position: static;
		float: none;
		margin: .25rem 0 .75rem 1rem;
		padding: .25rem;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none !important;
		min-width: 0;
	}

	.bn-navbar .dropdown-item {
		color: rgba(255, 255, 255, .68);
		padding: .55rem .75rem;
		border-radius: .65rem;
	}

		.bn-navbar .dropdown-item:hover,
		.bn-navbar .dropdown-item:focus {
			color: #ffffff;
			background-color: rgba(180, 32, 37, .28);
			transform: none;
		}

	.bn-navbar .dropdown-divider {
		border-color: rgba(255, 255, 255, .15);
	}

	.bn-hero-image {
		min-height: 640px;
	}

	.bn-hero-overlay {
		background: rgba(0, 0, 0, .68);
	}
}

/* Login */

.bn-login-page {
	min-height: calc(100vh - 80px);
	background: radial-gradient(circle at top left, rgba(180, 32, 37, .12), transparent 28rem), radial-gradient(circle at bottom right, rgba(255, 193, 7, .16), transparent 24rem), #f5f6f8;
}

.bn-login-container {
	max-width: 760px;
}

.bn-login-card {
	border: 0;
	border-radius: 1.5rem;
	overflow: hidden;
}

.bn-login-header {
	background: radial-gradient(circle at top left, rgba(180, 32, 37, .42), transparent 22rem), linear-gradient(135deg, #151515, #242424);
}

.bn-login-icon-lg {
	width: 64px;
	height: 64px;
}

.bn-login-option {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 1rem;
	padding: 1rem;
	height: 100%;
	text-align: center !important;
}

	.bn-login-option i {
		color: var(--bn-red);
	}

.bn-password-toggle {
	width: 52px;
}

.bn-login-submit.is-loading {
	pointer-events: none;
	opacity: .9;
}

.bn-login-submit:disabled {
	cursor: not-allowed;
}