/* Enhanced menu item styling for images */
.menu-item-border {
	position: relative;
	margin: 0 5px;
	border-radius: 6px 6px 6px 6px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	background: rgba(241, 5, 5, 0.832);
	backdrop-filter: blur(5px);
	padding: 12px 24px;
	
	/* Create proper ticket cutouts using radial-gradient masks */
	-webkit-mask: 
		radial-gradient(circle 8px at 0% 50%, transparent 8px, black 8px) 0 0/100% 100%,
		radial-gradient(circle 8px at 100% 50%, transparent 8px, black 8px) 0 0/100% 100%;
	-webkit-mask-composite: intersect;
	mask: 
		radial-gradient(circle 8px at 0% 50%, transparent 8px, black 8px) 0 0/100% 100%,
		radial-gradient(circle 8px at 100% 50%, transparent 8px, black 8px) 0 0/100% 100%;
	mask-composite: intersect;
}

/* Hover effect */
.menu-item-border:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(241, 5, 5, 0.3);
	background: rgba(241, 5, 5, 0.9);
}

.menu-item-border.active {
	border: 2px solid #FFD700;
	/* background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1)); */
	background: rgba(241, 5, 5, 0.832);
	box-shadow: 
		0 0 25px rgba(255, 215, 0, 0.5),
		0 6px 20px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.menu-item-border .nav-link {
	padding: 12px 18px;
	border-radius: 10px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.menu-item-border .nav-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	/* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); */
	background: rgba(241, 5, 5, 0.832);
	transition: left 0.5s;
}

.menu-item-border:hover .nav-link::before,
.menu-item-border.active .nav-link::before {
	left: 100%;
}

.menu-image {
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	filter: brightness(0.9) contrast(1.1);
	border-radius: 6px;
}

.menu-item-border:hover .menu-image {
	filter: brightness(1.3) contrast(1.2) drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
	transform: scale(1.05);
}

.menu-item-border.active .menu-image {
	filter: brightness(1.4) contrast(1.3) drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
	transform: scale(1.03);
	border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Pulse animation for active items */
.menu-item-border.active {
	animation: activePulse 2s infinite;
}

@keyframes activePulse {
	0%, 100% {
		box-shadow: 
			0 0 25px rgba(255, 215, 0, 0.5),
			0 6px 20px rgba(0, 0, 0, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
	50% {
		box-shadow: 
			0 0 35px rgba(255, 215, 0, 0.7),
			0 8px 25px rgba(0, 0, 0, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
	.menu-item-border {
		/* background: rgba(0, 0, 0, 0.3); */
		background: rgba(227,0,24,255);
		
		border-color: rgba(255, 255, 255, 0.1);
	}
	
	.menu-item-border:hover {
		/* background: rgba(255, 215, 0, 0.15); */
		background: rgba(227,0,24,255);
		border-color: rgba(255, 215, 0, 0.8);
	}
	
	.menu-item-border.active {
		/* background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.15)); */
		/* background: rgba(227,0,24,255); */
		background: linear-gradient(135deg, #d60000 0%,
  #f00000 20%,
  #ff3333 40%,
  #ff6600 60%,
  #ffffff 80%,
  /* ffcc00 */
  #ffff00 100%);
  /* ffff00 */
		border-color: #fefefe;
        /* FFD700 */
	}
}

/* Mobile responsive adjustments */
@media (max-width: 1199.98px) {
	.offcanvas .menu-item-border {
		margin: 8px 0;
		width: 100%;
		max-width: 300px;
	}
	
	.offcanvas .menu-item-border .nav-link {
		text-align: center;
		padding: 15px 20px;
	}
	
	.offcanvas .menu-image {
		max-width: 120px;
		height: auto;
	}
}

/* Additional glow effect for better visibility */
.menu-item-border.active::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
	border-radius: 14px;
	z-index: -1;
	opacity: 0.3;
	filter: blur(8px);
}