/* ── UNIFIED MASTER NAVIGATION BAR STYLES (RESPONSIVE & FLUID DOWN TO 240x320) ── */

/* Global horizontal overflow prevention */
html, body {
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

#navbar-container {
	width: 100% !important;
	max-width: 100vw !important;
	overflow: visible !important;
}

#navbar-container nav,
nav#main-navbar,
nav {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100vw !important;
	z-index: 10000 !important;
	padding: 0 40px !important;
	height: 64px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background: rgba(255, 255, 255, 0.98) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border-bottom: 1px solid #e2e8f0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	font-family: 'Manrope', sans-serif !important;
}

/* ── BRAND LOGO & NAME ── */
.nav-brand {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	min-width: 0 !important;
}

.nav-logo {
	width: 38px !important;
	height: 38px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.nav-logo img {
	width: 38px !important;
	height: 38px !important;
	object-fit: contain !important;
}

.nav-name {
	font-family: 'Manrope', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: initial !important;
	white-space: nowrap !important;
}

.brand-bids {
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.brand-pilots {
	color: #2563eb !important;
	-webkit-text-fill-color: #2563eb !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

/* ── DESKTOP NAVIGATION LINKS ── */
.nav-links {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	list-style: none !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.nav-links li {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.nav-links a {
	color: #475569 !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'Manrope', sans-serif !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	white-space: nowrap !important;
}

.nav-links a:hover {
	color: #2563eb !important;
	background: #f1f5f9 !important;
}

.nav-links a.active {
	color: #2563eb !important;
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

/* ── STILL BORDERLESS MOBILE APP ICON (ANIMATES ON HOVER ONLY) ── */
.btn-nav-app {
	width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: #475569 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	box-shadow: none !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

.btn-nav-app:hover {
	background: #eff6ff !important;
	color: #2563eb !important;
	border: none !important;
}

.btn-nav-app .mobile-icon-animated {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	stroke: currentColor !important;
	transform: translateY(0) scale(1) !important;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease, color 0.2s ease !important;
}

.btn-nav-app:hover .mobile-icon-animated {
	animation: phoneHoverFloat 0.7s ease-in-out infinite alternate !important;
	color: #2563eb !important;
}

@keyframes phoneHoverFloat {
	0% {
		transform: translateY(0) scale(1.05);
	}
	100% {
		transform: translateY(-3.5px) scale(1.12);
	}
}

/* ── NAV ACTION BUTTONS CONTAINER ── */
.nav-actions {
	display: flex !important;
	gap: 10px !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	margin-left: 0 !important;
}

.btn-nav-login {
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	padding: 0 16px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'Manrope', sans-serif !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.btn-nav-login:hover {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
	color: #2563eb !important;
}

.btn-nav-signup {
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	padding: 0 18px !important;
	border: none !important;
	border-radius: 8px !important;
	background: #2563eb !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: 'Manrope', sans-serif !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	transition: background 0.2s ease, transform 0.15s ease !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.btn-nav-signup:hover {
	background: #1d4ed8 !important;
	transform: translateY(-1px) !important;
}

/* ── ANIMATED MORPHING HAMBURGER / MENU OPENER BUTTON (BORDERLESS) ── */
/* Hidden by default when all buttons fit on desktop; only shown when links collapse on smaller screens */
.btn-nav-hamburger {
	display: none !important;
	width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #0f172a !important;
	cursor: pointer !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 10002 !important;
	-webkit-tap-highlight-color: transparent !important;
	outline: none !important;
}

.btn-nav-hamburger input {
	display: none !important;
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.btn-nav-hamburger svg {
	width: 30px !important;
	height: 30px !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	overflow: visible !important;
}

.btn-nav-hamburger .line {
	fill: none !important;
	stroke: #0f172a !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	stroke-width: 2.8 !important;
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	            stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1),
	            stroke 0.2s ease !important;
}

.btn-nav-hamburger .line-top-bottom {
	stroke-dasharray: 12 63 !important;
}

.btn-nav-hamburger:hover .line {
	stroke: #2563eb !important;
}

.btn-nav-hamburger input:checked + svg,
.btn-nav-hamburger.open svg,
.btn-nav-hamburger[aria-expanded="true"] svg {
	transform: rotate(-45deg) !important;
}

.btn-nav-hamburger input:checked + svg .line-top-bottom,
.btn-nav-hamburger.open svg .line-top-bottom,
.btn-nav-hamburger[aria-expanded="true"] svg .line-top-bottom {
	stroke-dasharray: 20 300 !important;
	stroke-dashoffset: -32.42 !important;
}

.btn-nav-hamburger input:checked + svg .line,
.btn-nav-hamburger.open svg .line,
.btn-nav-hamburger[aria-expanded="true"] svg .line {
	stroke: #2563eb !important;
}

/* ═════════════════════════════════════════════════════════
   DESKTOP RULES (> 1024px: ALL BUTTONS FIT COMFORTABLY)
   No hamburger needed here because all links and buttons fit!
   ═════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
	#navbar-container nav,
	nav#main-navbar,
	nav {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
		align-items: center !important;
		justify-content: initial !important;
	}

	.nav-brand {
		justify-self: start !important;
	}

	.nav-links {
		display: flex !important;
		justify-self: center !important;
		margin: 0 auto !important;
	}

	.nav-actions {
		justify-self: end !important;
		margin-left: 0 !important;
	}

	/* When all buttons fit, NO hamburger needed */
	.btn-nav-hamburger {
		display: none !important;
	}

	/* When logged out on desktop: Beside Pricing is visible, right side app button is hidden */
	body:not(.user-logged-in) .nav-app-li {
		display: inline-flex !important;
	}

	body:not(.user-logged-in) .nav-app-action-btn {
		display: none !important;
	}

	body:not(.user-logged-in) .btn-nav-login,
	body:not(.user-logged-in) .btn-nav-signup {
		display: inline-flex !important;
	}

	/* When logged in on desktop: Beside Pricing is hidden, right side app button is visible */
	body.user-logged-in .nav-app-li,
	body.logged-in .nav-app-li {
		display: none !important;
	}

	body.user-logged-in .nav-app-action-btn,
	body.logged-in .nav-app-action-btn {
		display: inline-flex !important;
	}

	body.user-logged-in .btn-nav-login,
	body.user-logged-in .btn-nav-signup,
	body.logged-in .btn-nav-login,
	body.logged-in .btn-nav-signup {
		display: none !important;
	}
}

@media (min-width: 1025px) and (max-width: 1200px) {
	#navbar-container nav, nav#main-navbar, nav {
		padding: 0 20px !important;
	}

	.nav-links {
		gap: 2px !important;
	}

	.nav-links a {
		padding: 8px 8px !important;
		font-size: 13px !important;
	}

	.btn-nav-login {
		padding: 0 12px !important;
	}

	.btn-nav-signup {
		padding: 0 14px !important;
	}
}

/* ═════════════════════════════════════════════════════════
   COLLAPSED SCREENS (<= 1024px: TABLET, MOBILE, 240x320)
   When buttons do not fit on a single line, links collapse
   and the Hamburger Menu Opener cleanly appears on the right!
   ═════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	#navbar-container nav, nav#main-navbar, nav {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 0 20px !important;
	}

	/* Collapse desktop navigation links into the drawer */
	.nav-links {
		display: none !important;
	}

	/* Show Menu Opener / Hamburger button on the right */
	.btn-nav-hamburger {
		display: inline-flex !important;
	}

	.nav-actions {
		margin-left: auto !important;
	}

	/* Hide individual action buttons from top navbar; they live in the drawer */
	.nav-actions .btn-nav-login,
	.nav-actions .btn-nav-signup,
	.nav-actions .btn-nav-app,
	.nav-actions .nav-app-action-btn,
	.nav-actions #navAppDownloadAction,
	.nav-actions #navLoginBtn,
	.nav-actions #navSignupBtn {
		display: none !important;
	}
}

@media (max-width: 768px) {
	#navbar-container nav, nav#main-navbar, nav {
		padding: 0 16px !important;
		height: 58px !important;
	}

	.nav-logo, .nav-logo img {
		width: 34px !important;
		height: 34px !important;
	}

	.brand-bids, .brand-pilots {
		font-size: 17px !important;
	}

	.btn-nav-hamburger {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
	}
}

@media (max-width: 480px) {
	#navbar-container nav, nav#main-navbar, nav {
		padding: 0 14px !important;
		height: 56px !important;
	}

	.nav-brand {
		gap: 8px !important;
	}

	.nav-logo, .nav-logo img {
		width: 32px !important;
		height: 32px !important;
	}

	.brand-bids, .brand-pilots {
		font-size: 16px !important;
	}

	.btn-nav-hamburger {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
	}
}

@media (max-width: 360px) {
	#navbar-container nav, nav#main-navbar, nav {
		padding: 0 10px !important;
		height: 52px !important;
	}

	.nav-brand {
		gap: 6px !important;
	}

	.nav-logo, .nav-logo img {
		width: 28px !important;
		height: 28px !important;
	}

	.brand-bids, .brand-pilots {
		font-size: 15px !important;
	}

	.btn-nav-hamburger {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
	}
}

/* ═════════════════════════════════════════════════════════
   ULTRA COMPACT / TINY SCREENS (<= 320px DOWN TO 240x320)
   ═════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
	#navbar-container nav, nav#main-navbar, nav {
		padding: 0 8px !important;
		height: 48px !important;
	}

	.nav-brand {
		gap: 5px !important;
		min-width: 0 !important;
		flex-shrink: 1 !important;
	}

	.nav-logo, .nav-logo img {
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		flex-shrink: 0 !important;
	}

	.brand-bids, .brand-pilots {
		font-size: 13px !important;
	}

	.nav-actions {
		gap: 0 !important;
		margin-left: auto !important;
		flex-shrink: 0 !important;
	}

	.btn-nav-hamburger {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
		min-height: 32px !important;
		max-height: 32px !important;
		border: none !important;
		border-radius: 0 !important;
		background: transparent !important;
		flex-shrink: 0 !important;
	}

	.btn-nav-hamburger svg {
		width: 24px !important;
		height: 24px !important;
	}
}

/* 240px feature phone width (240x320 resolution) */
@media (max-width: 260px) {
	#navbar-container nav, nav#main-navbar, nav {
		padding: 0 6px !important;
		height: 46px !important;
	}

	.nav-brand {
		gap: 4px !important;
		max-width: calc(100% - 38px) !important;
	}

	.nav-logo, .nav-logo img {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}

	.brand-bids, .brand-pilots {
		font-size: 11px !important;
	}

	.btn-nav-hamburger {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		max-width: 28px !important;
		min-height: 28px !important;
		max-height: 28px !important;
		border: none !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	.btn-nav-hamburger svg {
		width: 22px !important;
		height: 22px !important;
	}
}

/* ═════════════════════════════════════════════════════════
   MOBILE MENU DRAWER (CONTAINS ALL LINKS & BUTTONS)
   ═════════════════════════════════════════════════════════ */
.nav-mobile-drawer {
	position: fixed !important;
	top: 64px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	background: rgba(255, 255, 255, 0.99) !important;
	backdrop-filter: blur(24px) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	border-bottom: 1px solid #e2e8f0 !important;
	z-index: 9999 !important;
	max-height: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
	box-sizing: border-box !important;
	font-family: 'Manrope', sans-serif !important;
}

@media (max-width: 768px) {
	.nav-mobile-drawer {
		top: 58px !important;
	}
}

@media (max-width: 480px) {
	.nav-mobile-drawer {
		top: 56px !important;
	}
}

@media (max-width: 360px) {
	.nav-mobile-drawer {
		top: 52px !important;
	}
}

@media (max-width: 320px) {
	.nav-mobile-drawer {
		top: 48px !important;
	}
}

@media (max-width: 260px) {
	.nav-mobile-drawer {
		top: 46px !important;
	}
}

.nav-mobile-drawer.open {
	max-height: calc(100vh - 46px) !important;
	max-height: calc(100dvh - 46px) !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

.mobile-drawer-links {
	list-style: none !important;
	margin: 0 auto !important;
	max-width: 1200px !important;
	padding: 14px 18px 6px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	box-sizing: border-box !important;
}

.mobile-drawer-links li {
	margin: 0 !important;
	padding: 0 !important;
}

.mobile-drawer-links a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 11px 14px !important;
	color: #334155 !important;
	text-decoration: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: 'Manrope', sans-serif !important;
	border-radius: 8px !important;
	transition: all 0.15s ease !important;
}

.mobile-drawer-links a:hover,
.mobile-drawer-links a.active {
	background: #eff6ff !important;
	color: #2563eb !important;
}

.drawer-link-icon {
	flex-shrink: 0 !important;
	color: #64748b !important;
	transition: color 0.15s ease !important;
}

.mobile-drawer-links a:hover .drawer-link-icon,
.mobile-drawer-links a.active .drawer-link-icon {
	color: #2563eb !important;
}

.mobile-drawer-app-link {
	color: #2563eb !important;
	font-weight: 700 !important;
}

.mobile-drawer-app-link .drawer-link-icon {
	color: #2563eb !important;
}

.mobile-drawer-dash-link {
	color: #2563eb !important;
	font-weight: 700 !important;
}

.mobile-drawer-footer {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 12px 18px 18px !important;
	border-top: 1px solid #f1f5f9 !important;
	margin-top: 4px !important;
	box-sizing: border-box !important;
}

.drawer-logged-out-actions,
.drawer-logged-in-actions {
	display: flex !important;
	gap: 10px !important;
	width: 100% !important;
}

.btn-drawer-login {
	flex: 1 !important;
	height: 38px !important;
	min-height: 38px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'Manrope', sans-serif !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
}

.btn-drawer-login:hover {
	background: #f8fafc !important;
	border-color: #2563eb !important;
	color: #2563eb !important;
}

.btn-drawer-signup {
	flex: 1 !important;
	height: 38px !important;
	min-height: 38px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	border-radius: 8px !important;
	background: #2563eb !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: 'Manrope', sans-serif !important;
	text-decoration: none !important;
	transition: background 0.2s ease !important;
	box-shadow: none !important;
}

.btn-drawer-signup:hover {
	background: #1d4ed8 !important;
}

.btn-drawer-dash {
	flex: 1 !important;
	height: 38px !important;
	min-height: 38px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	border: none !important;
	border-radius: 8px !important;
	background: #2563eb !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: 'Manrope', sans-serif !important;
	text-decoration: none !important;
	transition: background 0.2s ease !important;
	box-shadow: none !important;
}

.btn-drawer-dash:hover {
	background: #1d4ed8 !important;
}

.btn-drawer-logout {
	flex: 1 !important;
	height: 38px !important;
	min-height: 38px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	border: 1px solid #fca5a5 !important;
	border-radius: 8px !important;
	background: #fef2f2 !important;
	color: #dc2626 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'Manrope', sans-serif !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
}

.btn-drawer-logout:hover {
	background: #fee2e2 !important;
	border-color: #ef4444 !important;
}

/* ── DRAWER RESPONSIVENESS AT <= 320px & 240x320 ── */
@media (max-width: 320px) {
	.mobile-drawer-links {
		padding: 10px 10px 4px !important;
		gap: 2px !important;
	}

	.mobile-drawer-links a {
		padding: 8px 10px !important;
		font-size: 13px !important;
		gap: 8px !important;
	}

	.drawer-link-icon {
		width: 15px !important;
		height: 15px !important;
	}

	.mobile-drawer-footer {
		padding: 10px 10px 14px !important;
	}

	.drawer-logged-out-actions,
	.drawer-logged-in-actions {
		flex-direction: column !important;
		gap: 6px !important;
	}

	.btn-drawer-login,
	.btn-drawer-signup,
	.btn-drawer-dash,
	.btn-drawer-logout {
		width: 100% !important;
		height: 34px !important;
		min-height: 34px !important;
		font-size: 11px !important;
	}
}

@media (max-width: 260px) {
	.mobile-drawer-links a {
		padding: 7px 8px !important;
		font-size: 11px !important;
		gap: 6px !important;
	}

	.btn-drawer-login,
	.btn-drawer-signup,
	.btn-drawer-dash,
	.btn-drawer-logout {
		height: 32px !important;
		min-height: 32px !important;
		font-size: 11px !important;
	}
}

/* ── MOBILE BACKDROP OVERLAY ── */
.nav-mobile-backdrop {
	display: none !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(15, 23, 42, 0.35) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	z-index: 9998 !important;
}

.nav-mobile-backdrop.visible {
	display: block !important;
}

/* ── SUBSCRIPTION EXPIRED DISABLED STATE FOR TOP NAVBAR ITEMS ── */
.nav-links a.nav-item-disabled,
.mobile-drawer-links a.nav-item-disabled,
.btn-drawer-dash.nav-item-disabled,
a.btn-nav-login.nav-item-disabled,
a.btn-nav-signup.nav-item-disabled {
	opacity: 0.32 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	filter: grayscale(1) !important;
}

/* ── UNIVERSAL LOGOUT & SESSION EXPIRY MODALS ── */
.bp-modal-overlay {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(15, 23, 42, 0.68) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	box-sizing: border-box !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
	font-family: 'Manrope', sans-serif !important;
}

.bp-modal-overlay.show {
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

.bp-modal-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
	width: 100% !important;
	max-width: 380px !important;
	padding: 24px 20px !important;
	box-sizing: border-box !important;
	text-align: center !important;
	transform: scale(0.96) translateY(6px) !important;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
	font-family: 'Manrope', sans-serif !important;
}

.bp-modal-overlay.show .bp-modal-card {
	transform: scale(1) translateY(0) !important;
}

.bp-modal-badge {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 16px auto !important;
	box-sizing: border-box !important;
}

.bp-modal-badge-danger {
	background: #fef2f2 !important;
	border: 1px solid #fee2e2 !important;
	color: #dc2626 !important;
}

.bp-modal-badge-warning {
	background: #fffbeb !important;
	border: 1px solid #fef3c7 !important;
	color: #d97706 !important;
}

.bp-modal-title {
	font-family: 'Manrope', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.35 !important;
	text-shadow: none !important;
}

.bp-modal-desc {
	font-family: 'Manrope', sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #64748b !important;
	margin: 0 0 20px 0 !important;
	line-height: 1.55 !important;
	word-break: break-word !important;
	text-shadow: none !important;
}

.bp-modal-countdown {
	color: #dc2626 !important;
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	padding: 2px 8px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	display: inline-block !important;
}

/* STRICT VERTICAL BUTTON STACKING */
.bp-modal-actions-vertical {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 100% !important;
	margin-top: 4px !important;
}

.bp-modal-btn {
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	border-radius: 8px !important;
	width: 100% !important;
	font-family: 'Manrope', sans-serif !important;
	font-size: 13px !important;
	padding: 0 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	outline: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	box-sizing: border-box !important;
}

.bp-modal-btn-primary {
	background: #2563eb !important;
	border: 1px solid #2563eb !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.bp-modal-btn-primary:hover {
	background: #1d4ed8 !important;
	border-color: #1d4ed8 !important;
}

.bp-modal-btn-danger {
	background: #dc2626 !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.bp-modal-btn-danger:hover {
	background: #b91c1c !important;
	border-color: #b91c1c !important;
}

.bp-modal-btn-danger-outline {
	background: #ffffff !important;
	border: 1px solid #fee2e2 !important;
	color: #dc2626 !important;
	font-weight: 600 !important;
}

.bp-modal-btn-danger-outline:hover {
	background: #fef2f2 !important;
	border-color: #fca5a5 !important;
	color: #b91c1c !important;
}

.bp-modal-btn-neutral {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #334155 !important;
	font-weight: 600 !important;
}

.bp-modal-btn-neutral:hover {
	background: #f8fafc !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
}

/* RESPONSIVE BREAKPOINTS (ALL 41 TARGET DEVICES DOWN TO 240PX) */
@media (max-width: 360px) {
	.bp-modal-card {
		padding: 18px 14px !important;
		border-radius: 12px !important;
	}
	.bp-modal-badge {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		margin-bottom: 12px !important;
	}
	.bp-modal-title {
		font-size: 15px !important;
	}
	.bp-modal-desc {
		font-size: 12px !important;
		margin-bottom: 16px !important;
	}
	.bp-modal-btn {
		height: 36px !important;
		min-height: 36px !important;
		font-size: 12px !important;
		gap: 6px !important;
	}
}

@media (max-width: 260px) {
	.bp-modal-overlay {
		padding: 8px !important;
	}
	.bp-modal-card {
		padding: 14px 10px !important;
		border-radius: 10px !important;
	}
	.bp-modal-title {
		font-size: 13px !important;
	}
	.bp-modal-desc {
		font-size: 11px !important;
		margin-bottom: 12px !important;
	}
	.bp-modal-btn {
		height: 34px !important;
		min-height: 34px !important;
		font-size: 11px !important;
	}
}