/**
 * Rent Navigation Button Styles
 *
 * Highlights the "Rent" menu item in the main navigation
 * with orange accent color and button styling.
 */

/* Target the Rent menu item */
.menu-item-uaeauto-rent > a,
.uaeauto-rent-button > a,
li.menu-item a[href*="/cars"],
li.menu-item a[href*="/rent"] {
	background-color: #ff4605 !important;
	color: #fff !important;
	padding: 8px 20px !important;
	border-radius: 25px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(255, 70, 5, 0.3) !important;
}

.menu-item-uaeauto-rent > a:hover,
.uaeauto-rent-button > a:hover,
li.menu-item a[href*="/cars"]:hover,
li.menu-item a[href*="/rent"]:hover {
	background-color: #e63e00 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(255, 70, 5, 0.4) !important;
}

.menu-item-uaeauto-rent > a:focus,
.uaeauto-rent-button > a:focus {
	outline: 2px solid #ff4605 !important;
	outline-offset: 2px !important;
}

/* Current page state */
.menu-item-uaeauto-rent.current-menu-item > a,
.menu-item-uaeauto-rent.current_page_item > a {
	background-color: #e63e00 !important;
}

/* Mobile menu adjustments */
@media (max-width: 991px) {
	.menu-item-uaeauto-rent > a,
	.uaeauto-rent-button > a {
		display: inline-block !important;
		margin: 10px 0 !important;
	}
}

/* Ensure contrast on various header backgrounds */
.header-transparent .menu-item-uaeauto-rent > a,
.dark-header .menu-item-uaeauto-rent > a {
	color: #fff !important;
}

/* Animation for attention */
@keyframes rentButtonPulse {
	0%, 100% {
		box-shadow: 0 2px 8px rgba(255, 70, 5, 0.3);
	}
	50% {
		box-shadow: 0 4px 16px rgba(255, 70, 5, 0.5);
	}
}

/* Optional: Add pulse animation to draw attention */
.menu-item-uaeauto-rent > a {
	/* animation: rentButtonPulse 2s ease-in-out infinite; */
}

/* Remove animation on hover for cleaner UX */
.menu-item-uaeauto-rent > a:hover {
	animation: none;
}