/* 
   File: assets/css/mega-menu-override.css
   Complete mega menu implementation with clickable items and title support
   Load this CSS file LAST to ensure it overrides all conflicts
*/

/* ==========================================================================
                           MEGA MENU BASE STYLES
========================================================================== */

/* Reset any conflicting styles on mega menu container */
#essential-navbar .mega-menu {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 3px 20px !important;
}

/* Mega menu toggle (the clickable link) */
#essential-navbar .mega-menu-toggle {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 4px 5px !important;
  color: var(--color-text-primary, #333) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
  transition: color 0.3s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

/* Mega menu toggle icon */
#essential-navbar .mega-menu-toggle i {
  margin-left: 5px !important;
  /*font-size: 12px !important;*/
  transition: transform 0.3s ease !important;
}

/* Active state for mega menu toggle */
#essential-navbar .mega-menu-toggle.active {
  color: var(--active-color, #e51937) !important;
}

#essential-navbar .mega-menu-toggle.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background-color: var(--active-color, #e51937) !important;
}

/* Hover state for mega menu toggle */
#essential-navbar .mega-menu-toggle:hover:not(.active) {
  color: var(--active-color, #e51937) !important;
}

#essential-navbar .mega-menu:hover .mega-menu-toggle i {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
                         MEGA MENU DROPDOWN CONTAINER
========================================================================== */

/* Main dropdown container - hidden by default */
#essential-navbar .mega-menu-dropdown {
  /* Positioning */
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(15px) !important;

  /* Sizing - ENHANCED with max-height for scrolling */
  width: 900px !important;
  max-width: 90vw !important;
  min-height: 400px !important;
  max-height: 80vh !important; /* Add max height to enable scrolling */

  /* Styling */
  background: var(--mega-menu-bg, #fff) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  border-top: var(--mega-menu-border-top-width, 3px) solid
    var(--mega-menu-border-top, #e51937) !important;

  /* Z-index and interactions */
  z-index: 9999 !important;
  pointer-events: auto !important;

  /* Hidden state */
  opacity: 0 !important;
  visibility: hidden !important;
  display: block !important;

  /* Animation */
  transition: all 0.3s ease !important;

  /* Enable scrolling */
  overflow: hidden !important; /* Container should not scroll, only content */
}

/* ==========================================================================
                           DESKTOP HOVER FUNCTIONALITY
========================================================================== */

/* Desktop hover effect - show mega menu */
@media (min-width: 993px) {
  #essential-navbar .mega-menu:hover .mega-menu-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Keep dropdown visible when hovering over it */
  #essential-navbar .mega-menu-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* ==========================================================================
                           MEGA MENU CONTENT LAYOUT
========================================================================== */

/* Content container with flex layout */
#essential-navbar .mega-menu-content {
  display: flex !important;
  min-height: 350px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Left column - Parent headers */
#essential-navbar .mega-menu-left {
  width: 250px !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border-right: 1px solid #dee2e6 !important;
  padding: 20px 0 !important;
  flex-shrink: 0 !important;
}

/* Parent headers list */
#essential-navbar .parent-headers {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Individual parent header item */
#essential-navbar .parent-header-item {
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
}

#essential-navbar .parent-header-item:last-child {
  border-bottom: none !important;
}

/* Parent header text */
#essential-navbar .parent-header-item span {
  display: block !important;
  padding: 15px 25px !important;
  color: #495057 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

/* Left border indicator */
#essential-navbar .parent-header-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 4px !important;
  background-color: var(--mega-menu-parent-item-hover, #e51937) !important;
  transform: scaleY(0) !important;
  transition: transform 0.3s ease !important;
}

/* Hover and active states for parent headers */
#essential-navbar .parent-header-item:hover,
#essential-navbar .parent-header-item.active {
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#essential-navbar .parent-header-item:hover::before,
#essential-navbar .parent-header-item.active::before {
  transform: scaleY(1) !important;
}

#essential-navbar .parent-header-item:hover span,
#essential-navbar .parent-header-item.active span {
  color: var(--mega-menu-parent-item-hover, #e51937) !important;
  padding-left: 35px !important;
}

/* ==========================================================================
                         CLICKABLE LEFT ITEMS STYLES
========================================================================== */

/* Multiedit items in left column */
#essential-navbar .multiedit-item {
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
}

#essential-navbar .multiedit-item:last-child {
  border-bottom: none !important;
}

#essential-navbar .multiedit-item span {
  display: block !important;
  padding: 15px 25px !important;
  color: #495057 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: capitalize !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

#essential-navbar .multiedit-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 4px !important;
  background-color: #28a745 !important; /* Green for multiedit */
  transform: scaleY(0) !important;
  transition: transform 0.3s ease !important;
}

#essential-navbar .multiedit-item:hover,
#essential-navbar .multiedit-item.active {
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#essential-navbar .multiedit-item:hover::before,
#essential-navbar .multiedit-item.active::before {
  transform: scaleY(1) !important;
}

#essential-navbar .multiedit-item:hover span,
#essential-navbar .multiedit-item.active span {
  color: #28a745 !important;
  padding-left: 35px !important;
  font-weight: 600 !important;
}

/* Regular menu items in left column */
#essential-navbar .regular-menu-item {
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
}

#essential-navbar .regular-menu-item:last-child {
  border-bottom: none !important;
}

#essential-navbar .regular-menu-item span {
  display: block !important;
  padding: 15px 25px !important;
  color: #495057 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: capitalize !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

#essential-navbar .regular-menu-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 4px !important;
  background-color: var(
    --mega-menu-regular-menu-item-color,
    #e51937
  ) !important;
  transform: scaleY(0) !important;
  transition: transform 0.3s ease !important;
}

#essential-navbar .regular-menu-item:hover,
#essential-navbar .regular-menu-item.active {
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#essential-navbar .regular-menu-item:hover::before,
#essential-navbar .regular-menu-item.active::before {
  transform: scaleY(1) !important;
}

#essential-navbar .regular-menu-item:hover span,
#essential-navbar .regular-menu-item.active span {
  color: var(--mega-menu-regular-menu-item-color, #e51937) !important;
  padding-left: 35px !important;
  font-weight: 600 !important;
}

/* Clickable left item links */
#essential-navbar .left-item-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}

#essential-navbar .left-item-link span {
  display: block !important;
  padding: 15px 25px !important;
  color: #495057 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: capitalize !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

/* Override existing span styles for clickable items */
#essential-navbar .multiedit-item .left-item-link span,
#essential-navbar .regular-menu-item .left-item-link span {
  cursor: pointer !important;
}

/* Hover effects for clickable links */
#essential-navbar .multiedit-item:hover .left-item-link span,
#essential-navbar .multiedit-item.active .left-item-link span {
  color: #28a745 !important;
  padding-left: 35px !important;
  font-weight: 600 !important;
}

#essential-navbar .regular-menu-item:hover .left-item-link span,
#essential-navbar .regular-menu-item.active .left-item-link span {
  color: var(--mega-menu-regular-menu-item-color, #e51937) !important;
  padding-left: 35px !important;
  font-weight: 600 !important;
}

/* Visual indicator for clickable vs non-clickable items */
#essential-navbar .menu-item[data-clickable="true"] {
  position: relative !important;
}

#essential-navbar .menu-item[data-clickable="true"]::after {
  content: "→" !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  color: #6c757d !important;
  font-size: 12px !important;
}

#essential-navbar .menu-item[data-clickable="true"]:hover::after {
  opacity: 1 !important;
}

/* Ensure proper styling inheritance for different item types */
#essential-navbar .multiedit-item[data-clickable="true"]:hover::after {
  color: #28a745 !important;
}

#essential-navbar .regular-menu-item[data-clickable="true"]:hover::after {
  color: #e51937 !important;
}

/* Different cursor styles for different behaviors */
#essential-navbar .parent-header-item {
  cursor: pointer !important; /* Indicates content switching */
}

#essential-navbar .menu-item[data-clickable="true"] {
  cursor: pointer !important; /* Indicates navigation */
}

#essential-navbar .menu-item[data-clickable="true"] .left-item-link {
  cursor: pointer !important;
}

/* Subtle animation for clickable items */
#essential-navbar .menu-item[data-clickable="true"]:hover {
  transform: translateX(2px) !important;
  transition: transform 0.2s ease !important;
}

#essential-navbar .parent-header-item:hover {
  /* No transform for non-clickable items */
  transform: none !important;
}

/* Right column - Children content */
#essential-navbar .mega-menu-right {
  flex: 1 !important;
  position: relative !important;
  background-color: #fff !important;
  padding: 30px !important;
  overflow-y: auto !important; /* Enable vertical scrolling */
  overflow-x: hidden !important; /* Prevent horizontal scrolling */
  max-height: calc(80vh - 60px) !important; /* Account for padding */
}

/* Custom scrollbar styling for mega menu */
#essential-navbar .mega-menu-right::-webkit-scrollbar {
  width: 8px !important;
}

#essential-navbar .mega-menu-right::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

#essential-navbar .mega-menu-right::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
  transition: background 0.3s ease !important;
}

#essential-navbar .mega-menu-right::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

/* Firefox scrollbar styling */
#essential-navbar .mega-menu-right {
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* ==========================================================================
                           ENHANCED COLUMN SEPARATION
========================================================================== */

/* Children columns with proper vertical separators */
#essential-navbar .children-column {
  flex: 1 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 180px !important;
  position: relative !important;
}

/* Vertical separator between columns */
#essential-navbar .children-column:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: -20px !important;
  top: 0 !important;
  height: 100% !important;
  width: 1px !important;
  background: linear-gradient(
    to bottom,
    transparent 10%,
    #e9ecef 50%,
    transparent 90%
  ) !important;
}

#essential-navbar .children-column:not(:last-child) {
  padding-right: 40px !important;
  margin-right: 0 !important;
}

/* Individual child items */
#essential-navbar .children-column li {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  height: auto !important;
  list-style: none !important;
}

/* Child links */
#essential-navbar .children-column a {
  display: block !important;
  padding: 8px 12px !important;
  color: #6c757d !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  text-transform: none !important;
}

/* Child link hover indicator */
#essential-navbar .children-column a::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 2px !important;
  background-color: var(
    --mega-menu-children-column-indicator-color,
    #e51937
  ) !important;
  transition: width 0.3s ease !important;
}

/* Child link hover and active states */
#essential-navbar .children-column a:hover,
#essential-navbar .children-column a.active {
  background-color: var(
    --mega-menu-children-column-hover-bg,
    #f8f9fa
  ) !important;
  color: var(--mega-menu-children-column-indicator-color, #e51937) !important;
  padding-left: 20px !important;
  transform: translateX(5px) !important;
}

#essential-navbar .children-column a:hover::before,
#essential-navbar .children-column a.active::before {
  width: 12px !important;
}

/* No children state */
#essential-navbar .no-children {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  color: #adb5bd !important;
  font-style: italic !important;
  font-size: 16px !important;
}

/* ==========================================================================
                        TITLES SECTION (RIGHT SIDE) - FIXED DROPDOWN
========================================================================== */

/* Title items that appear inline with other children - NOW LOOK LIKE REGULAR CHILDREN */
#essential-navbar .title-item {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important; /* Ensure block display for vertical layout */
}

/* Title header - now looks like a regular child link with proper spacing */
#essential-navbar .title-item .title-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important; /* Full width */
  padding: 8px 12px !important;
  color: #6c757d !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  text-transform: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none !important; /* Prevent text selection on double click */
}

/* Enhanced hover state for entire title header */
#essential-navbar .title-item .title-header:hover {
  background-color: #f8f9fa !important;
  color: var(--mega-menu-title-header-hover-color, #e51937) !important;
  padding-left: 20px !important;
  transform: translateX(5px) !important;
}

/* Make sure all child elements of title header are clickable */
#essential-navbar .title-item .title-header * {
  pointer-events: none !important; /* Prevent event conflicts */
  user-select: none !important;
}

/* Ensure the title header responds to clicks anywhere */
#essential-navbar .title-item .title-header:active {
  background-color: #e9ecef !important;
  transform: translateX(3px) scale(0.98) !important;
}

/* Level 2 titles (nested within level 1) */
#essential-navbar .title-item .title-children .title-item {
  margin: 0 0 8px 25px !important;
  padding-left: 15px !important; /* Additional indentation for nested level */
  border-left: 2px solid #e9ecef !important; /* Visual hierarchy indicator */
}

/* Level 3 titles (nested within level 2) */
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item {
  margin: 0 0 6px 0 !important;
  padding-left: 20px !important; /* Even more indentation */
  border-left: 2px solid #dee2e6 !important; /* Lighter border for deeper nesting */
}

/* Nested title headers styling */
#essential-navbar .title-item .title-children .title-item .title-header {
  padding: 6px 10px !important; /* Smaller padding for nested titles */
  font-size: 13px !important; /* Slightly smaller font */
  border-radius: 4px !important; /* Smaller border radius */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-header {
  padding: 5px 8px !important; /* Even smaller for level 3 */
  font-size: 12px !important;
  opacity: 0.9 !important; /* Slightly transparent to show hierarchy */
}

/* Nested title text styling */
#essential-navbar .title-item .title-children .title-item .title-text {
  font-size: 13px !important;
  font-weight: 500 !important; /* Less bold than main titles */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-text {
  font-size: 12px !important;
  font-weight: 400 !important; /* Even less bold for level 3 */
}

/* FIXED: Nested title toggle icons - proper initial state and rotation */
#essential-navbar .title-item .title-children .title-item .title-toggle {
  font-size: 8px !important; /* Smaller arrow for nested titles */
  width: 16px !important;
  color: #e51937 !important; /* Different color to distinguish from main titles */
  transform: rotate(
    0deg
  ) !important; /* FIXED: Start with down arrow for level 2 */
  transition: transform 0.3s ease !important;
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-toggle {
  font-size: 7px !important;
  width: 14px !important;
  color: #6f42c1 !important; /* Different color for level 3 */
  transform: rotate(
    0deg
  ) !important; /* FIXED: Start with down arrow for level 3 */
  transition: transform 0.3s ease !important;
}

/* FIXED: Rotate nested title toggles when expanded */
#essential-navbar
  .title-item
  .title-children
  .title-item.expanded
  .title-toggle {
  transform: rotate(
    180deg
  ) !important; /* Rotate when level 2 title is expanded */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item.expanded
  .title-toggle {
  transform: rotate(
    180deg
  ) !important; /* Rotate when level 3 title is expanded */
}

/* Nested title hover states */
#essential-navbar .title-item .title-children .title-item .title-header:hover,
#essential-navbar .title-item .title-children .title-item .title-header.active {
  background-color: #f8f9fa !important;
  color: #e51937 !important; /* Blue instead of red for nested */
  padding-left: 18px !important;
  transform: translateX(3px) !important; /* Smaller transform for nested */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-header:hover,
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-header.active {
  color: #6f42c1 !important; /* Purple for level 3 */
  padding-left: 16px !important;
  transform: translateX(2px) !important;
}

/* Nested title hover indicators */
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-header::before {
  background-color: #e51937 !important; /* Blue for level 2 */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-header::before {
  background-color: #6f42c1 !important; /* Purple for level 3 */
}

/* Nested title children lists */
#essential-navbar .title-item .title-children .title-item .title-children-list {
  padding-left: 25px !important; /* More indentation for nested children */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-children-list {
  padding-left: 30px !important; /* Even more for level 3 */
}

/* Nested title children links */
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children-list
  a {
  font-size: 12px !important; /* Smaller font for nested children */
  padding: 4px 8px !important; /* Smaller padding */
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-children-list
  a {
  font-size: 11px !important;
  padding: 3px 6px !important;
  opacity: 0.9 !important;
}

/* Nested title children hover states */
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children-list
  a:hover,
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children-list
  a.active {
  color: #e51937 !important; /* Blue for level 2 children */
  padding-left: 16px !important;
}

#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-children-list
  a:hover,
#essential-navbar
  .title-item
  .title-children
  .title-item
  .title-children
  .title-item
  .title-children-list
  a.active {
  color: #6f42c1 !important; /* Purple for level 3 children */
  padding-left: 14px !important;
}

/* ==========================================================================
                        MOBILE NESTED TITLES SUPPORT - FIXED ARROWS
========================================================================== */

/* Mobile nested title containers */
#essential-navbar .title-mobile-children .title-mobile-container {
  margin: 5px 0 !important;
  padding-left: 15px !important; /* Indentation for nested mobile titles */
  border-left: 2px solid #e9ecef !important;
}

/* Level 3 mobile nested titles */
#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .title-mobile-children
  .title-mobile-container {
  padding-left: 25px !important;
  border-left: 2px solid #dee2e6 !important;
}

/* Mobile nested title text */
#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .title-mobile-text {
  font-size: 14px !important; /* Slightly smaller for nested */
  font-weight: 500 !important; /* Less bold */
  color: #e51937 !important; /* Blue for nested mobile titles */
}

#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .title-mobile-children
  .title-mobile-container
  .title-mobile-text {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6f42c1 !important; /* Purple for level 3 mobile */
}

/* FIXED: Mobile nested title toggle buttons - proper initial state */
#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .mobile-title-toggle {
  color: #e51937 !important; /* Blue for nested */
  font-size: 16px !important; /* Smaller */
  content: "+" !important; /* FIXED: Start with + (collapsed state) */
}

#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .title-mobile-children
  .title-mobile-container
  .mobile-title-toggle {
  color: #6f42c1 !important; /* Purple for level 3 */
  font-size: 14px !important;
  content: "+" !important; /* FIXED: Start with + (collapsed state) */
}

/* FIXED: Mobile nested title toggle active state */
#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .mobile-title-toggle.active {
  transform: rotate(45deg) !important; /* Rotate to X when expanded */
}

#essential-navbar
  .title-mobile-children
  .title-mobile-container
  .title-mobile-children
  .title-mobile-container
  .mobile-title-toggle.active {
  transform: rotate(45deg) !important; /* Rotate to X when expanded */
}

/* ==========================================================================
                              JAVASCRIPT HELPERS
========================================================================== */

/* Classes for JavaScript interaction */
.mega-menu-parent-active {
  background-color: #fff !important;
  color: #e51937 !important;
}

.mega-menu-parent-active::before {
  transform: scaleY(1) !important;
}

.mega-menu-children-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Right side clickable items */
#essential-navbar .right-side-clickable-item {
  margin-bottom: 20px !important;
  padding: 15px !important;
  background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 100%) !important;
  border: 1px solid #28a745 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1) !important;
}

#essential-navbar .right-clickable-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #e51937 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

#essential-navbar .right-clickable-link:hover {
  color: #1e7e34 !important;
  transform: translateX(3px) !important;
}

#essential-navbar .right-clickable-link i {
  font-size: 12px !important;
  opacity: 0.8 !important;
}

#essential-navbar .right-side-separator {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent,
    #28a745,
    transparent
  ) !important;
  margin: 0 0 20px 0 !important;
}

/* ==========================================================================
                    REGULAR CHILDREN SECTION (WITH MULTIEDIT)
========================================================================== */

/* Container for regular children (including multiedit items) */
#essential-navbar .regular-children-section {
  width: 100% !important;
  background-color: #fff !important;
  padding: 15px 0 !important;
}

/* Children separator between titles and regular children */
#essential-navbar .children-separator {
  margin: 20px 0 !important;
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent,
    #dee2e6,
    transparent
  ) !important;
}

/* Multiedit child items styling */
#essential-navbar .multiedit-child-item {
  position: relative !important;
}

#essential-navbar .multiedit-child-item a {
  background: linear-gradient(135deg, #f0fff0 0%, #e8f5e8 100%) !important;
  border: 1px solid #28a745 !important;
  border-radius: 4px !important;
  color: #28a745 !important;
  font-weight: 600 !important;
  position: relative !important;
  padding-left: 35px !important;
}

#essential-navbar .multiedit-child-item a:hover {
  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%) !important;
  color: #1e7e34 !important;
  transform: translateX(8px) !important;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
}

#essential-navbar .multiedit-child-item a::before {
  background-color: #28a745 !important;
  width: 15px !important;
}

/* Multiedit icon styling */
#essential-navbar .multiedit-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  color: #28a745 !important;
}

/* Enhanced styling for mixed content containers */
#essential-navbar
  .children-container:has(.titles-section):has(.regular-children-section) {
  padding: 25px !important;
}

/* Responsive adjustments for mixed content */
@media (max-width: 1200px) {
  #essential-navbar .regular-children-section {
    padding: 10px 0 !important;
  }

  #essential-navbar .children-separator {
    margin: 15px 0 !important;
  }
}

@media (max-width: 992px) {
  #essential-navbar .children-separator {
    margin: 10px 0 !important;
  }
}

/* ==========================================================================
                           MOBILE MEGA MENU STYLES
========================================================================== */

/* Base mobile menu styling */
@media (max-width: 992px) {
  /* Mobile navigation container - RESTORE FULL HEIGHT */
  #essential-navbar #mobile-nav {
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    max-height: 100vh !important; /* RESTORED: Full screen height */
    overflow-y: auto !important;
  }

  /* Simplified scrollbar for mobile menu */
  #essential-navbar #mobile-nav::-webkit-scrollbar {
    width: 4px !important;
  }

  #essential-navbar #mobile-nav::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
  }

  #essential-navbar #mobile-nav::-webkit-scrollbar-thumb {
    background: #ddd !important;
    border-radius: 2px !important;
  }

  /* Simplified mobile search container */
  #essential-navbar .mobile-search-container {
    padding: 15px 20px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #essential-navbar .mobile-search-input {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    background: #fff !important;
    transition: border-color 0.3s ease !important;
  }

  #essential-navbar .mobile-search-input:focus {
    outline: none !important;
    border-color: #e51937 !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
  }

  /* Simplified mobile search results */
  #essential-navbar .mobile-search-results {
    margin-top: 8px !important;
    background: #fff !important;
    border-radius: 4px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    border: 1px solid #e9ecef !important;
  }

  #essential-navbar .mobile-search-result {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f1f1f1 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
  }

  #essential-navbar .mobile-search-result:hover {
    background-color: #f8f9fa !important;
  }

  #essential-navbar .mobile-search-result:last-child {
    border-bottom: none !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE DROPDOWN CONTAINERS
    ========================================================================== */

  /* Mobile dropdown base styles */
  #essential-navbar .mobile-dropdown {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  #essential-navbar .mobile-dropdown:last-child {
    border-bottom: none !important;
  }

  /* Simplified mobile dropdown header */
  #essential-navbar .mobile-dropdown > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 20px !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.2s ease !important;
  }

  #essential-navbar .mobile-dropdown > div:hover {
    background: #f8f9fa !important;
  }

  /* Simplified mobile dropdown links */
  #essential-navbar .mobile-dropdown > div > a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    flex: 1 !important;
    transition: color 0.2s ease !important;
  }

  #essential-navbar .mobile-dropdown > div > a:hover {
    color: #e51937 !important;
  }

  /* Simplified mobile dropdown toggle buttons */
  #essential-navbar .mobile-dropdown-toggle {
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #666 !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    min-width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #essential-navbar .mobile-dropdown-toggle:hover {
    background-color: #f0f0f0 !important;
    color: #e51937 !important;
  }

  #essential-navbar .mobile-dropdown-toggle.active {
    color: #e51937 !important;
    background-color: #ffffff !important;
  }

  /* Simplified mobile submenu */
  #essential-navbar .mobile-submenu {
    background: #f8f9fa !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE PARENT HEADERS
    ========================================================================== */

  /* Mobile parent header container */
  #essential-navbar .mobile-parent-header-container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* Simplified mobile parent header */
  #essential-navbar .mobile-parent-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 20px !important;
    background: #fff !important;
    transition: background-color 0.2s ease !important;
    position: relative !important;
  }

  /* Simplified parent header types */
  #essential-navbar .mobile-parent-header.parent-header-type {
    background: #f8f9fa !important;
    border-left: 3px solid #e51937 !important;
  }

  #essential-navbar .mobile-parent-header.parent-header-type:hover {
    background: #e9ecef !important;
  }

  #essential-navbar
    .mobile-parent-header.parent-header-type
    .mobile-parent-text {
    color: #e51937 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE MULTIEDIT
    ========================================================================== */

  #essential-navbar .mobile-multiedit-container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  #essential-navbar .mobile-parent-header.multiedit-type {
    background: #f0f8ff !important;
    border-left: 3px solid #28a745 !important;
  }

  #essential-navbar .mobile-parent-header.multiedit-type:hover {
    background: #e6f3ff !important;
  }

  #essential-navbar .mobile-parent-link {
    color: #28a745 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    flex: 1 !important;
    transition: color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
  }

  #essential-navbar .mobile-parent_link:hover {
    color: #218838 !important;
  }

  #essential-navbar .mobile-parent-link .mobile-parent-text {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE REGULAR ITEMS
    ========================================================================== */

  #essential-navbar .mobile-regular-container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  #essential-navbar .mobile-parent-header.regular-type {
    background: #fff !important;
    border-left: 3px solid #f5f5f5 !important;
  }

  #essential-navbar .mobile-parent-header.regular-type:hover {
    background: #f8f9fa !important;
  }

  #essential-navbar .mobile-parent-header.regular-type .mobile-parent-text {
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  /* ==========================================================================
                        SIMPLIFIED DIRECT LINKS
    ========================================================================== */

  #essential-navbar .mobile-direct-link-container {
    padding: 10px 20px !important;
    background: #e8f5e8 !important;
    border: 1px solid #d4edda !important;
    border-radius: 4px !important;
    margin: 8px 15px !important;
  }

  #essential-navbar .mobile-direct-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #28a745 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
  }

  #essential-navbar .mobile-direct-link:hover {
    color: #218838 !important;
  }

  #essential-navbar .mobile-direct-link i {
    font-size: 11px !important;
  }

  #essential-navbar .mobile-separator {
    margin: 10px 15px !important;
    height: 1px !important;
    background: #e9ecef !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE CHILD ITEMS
    ========================================================================== */

  #essential-navbar .mobile-child-item-container {
    padding: 8px 25px !important;
    background: #fff !important;
    border-bottom: 1px solid #f5f5f5 !important;
    transition: background-color 0.2s ease !important;
  }

  #essential-navbar .mobile-child-item-container:hover {
    background: #f8f9fa !important;
  }

  #essential-navbar .mobile-child-item-container:last-child {
    border-bottom: none !important;
  }

  #essential-navbar .mobile-child-link {
    color: #101010 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
    display: block !important;
    position: relative !important;
    padding-left: 12px !important;
  }

  #essential-navbar .mobile-child-link::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #e51937 !important;
    font-size: 14px !important;
    opacity: 0.7 !important;
  }

  #essential-navbar .mobile-child-link:hover {
    color: #e51937 !important;
  }

  #essential-navbar .mobile-child-link:hover::before {
    opacity: 1 !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE TITLE CONTAINERS
    ========================================================================== */

  #essential-navbar .mobile-title-container {
    margin: 6px 12px !important;
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.2s ease !important;
  }

  #essential-navbar .mobile-title-container:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  #essential-navbar .mobile-title-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    position: relative !important;
    user-select: none !important; /* Prevent text selection */
    min-height: 44px !important; /* Ensure good touch target size */
  }

  /* Enhanced mobile title header hover/active states */
  #essential-navbar .mobile-title-header:hover {
    background: #e9ecef !important;
  }

  #essential-navbar .mobile-title-header:active {
    background: #dee2e6 !important;
    transform: scale(0.98) !important;
  }

  /* Make all mobile title header children non-interactive */
  #essential-navbar .mobile-title-header * {
    pointer-events: none !important;
    user-select: none !important;
  }

  /* Ensure mobile title text doesn't interfere with clicks */
  #essential-navbar .mobile-title-text {
    pointer-events: none !important;
    user-select: none !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    flex: 1 !important;
    transition: color 0.2s ease !important;
  }

  /* Mobile title toggle should be part of the header but not interfere */
  #essential-navbar .mobile-title-toggle {
    pointer-events: none !important; /* Let parent handle all clicks */
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #666 !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    user-select: none !important;
  }

  /* ==========================================================================
                        SIMPLIFIED NESTED MOBILE TITLES
    ========================================================================== */

  /* Level 2 nested titles - subtle differences */
  #essential-navbar .mobile-title-children .mobile-title-container {
    margin: 4px 8px !important;
    border-left: 2px solid #e51937 !important;
    background: #f9f9f9 !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-header {
    background: #f4f4f4 !important;
    padding: 8px 10px !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-text {
    font-size: 12px !important;
    color: #e51937 !important;
    font-weight: 500 !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-toggle {
    color: #e51937 !important;
    font-size: 12px !important;
  }

  /* Level 3 nested titles - even more subtle */
  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container {
    margin: 3px 6px !important;
    border-left: 2px solid #6c757d !important;
    background: #f5f5f5 !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container
    .mobile-title-header {
    background: #f0f0f0 !important;
    padding: 6px 8px !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container
    .mobile-title-text {
    font-size: 11px !important;
    color: #6c757d !important;
    font-weight: 400 !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container
    .mobile-title-toggle {
    color: #6c757d !important;
    font-size: 10px !important;
  }

  /* Simplified nested children containers */
  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children {
    background: #ffffff !important;
    padding: 4px 0 !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children {
    background: #f0f0f0 !important;
    padding: 2px 0 !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-child-container {
    margin: 1px 6px !important;
    padding: 4px 10px !important;
    /* background: rgba(0, 123, 255, 0.05) !important; */
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container
    .mobile-title-child-container {
    margin: 1px 4px !important;
    padding: 3px 8px !important;
    background: rgba(108, 117, 125, 0.05) !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-child-link {
    font-size: 11px !important;
    color: #1c1c1c !important;
  }

  #essential-navbar
    .mobile-title-children
    .mobile-title-container
    .mobile-title-children
    .mobile-title-container
    .mobile-title-child-link {
    font-size: 10px !important;
    color: #6c757d !important;
  }

  /* ==========================================================================
                        SIMPLIFIED MOBILE REGION SELECTOR
    ========================================================================== */

  #essential-navbar .mobile-region-selector {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #e9ecef !important;
    background: #f8f9fa !important;
  }

  #essential-navbar .mobile-region-selector > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 20px !important;
    background: #f0f0f0 !important;
    transition: background-color 0.2s ease !important;
  }

  #essential-navbar .mobile-region-selector > div:hover {
    background: #e9ecef !important;
  }

  #essential-navbar .mobile-region-selector > div > span {
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #essential-navbar .mobile-region-selector > div > span i {
    color: #6c757d !important;
    font-size: 14px !important;
  }

  #essential-navbar .mobile-region-selector .mobile-dropdown-toggle {
    color: #6c757d !important;
  }

  #essential-navbar .mobile-region-selector .mobile-dropdown-toggle:hover {
    background-color: #dee2e6 !important;
    color: #495057 !important;
  }

  #essential-navbar .mobile-region-selector .mobile-submenu {
    background: #f5f5f5 !important;
  }

  #essential-navbar .mobile-region-selector .mobile-submenu li a {
    color: #495057 !important;
    padding: 10px 20px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #e9ecef !important;
    transition: background-color 0.2s ease !important;
  }

  #essential-navbar .mobile-region-selector .mobile-submenu li a:hover {
    background: #e9ecef !important;
    color: #343a40 !important;
  }

  /* ==========================================================================
                        SIMPLIFIED RESPONSIVE BREAKPOINTS
    ========================================================================== */

  @media (max-width: 576px) {
    #essential-navbar .mobile-parent-header {
      padding: 10px 15px !important;
    }

    #essential-navbar .mobile-parent-text,
    #essential-navbar .mobile-parent-link {
      font-size: 13px !important;
    }

    #essential-navbar .mobile-child-item-container {
      padding: 6px 20px !important;
    }

    #essential-navbar .mobile-title-container {
      margin: 4px 8px !important;
    }

    #essential-navbar .mobile-title-header {
      padding: 8px 10px !important;
    }

    #essential-navbar .mobile-direct-link_container {
      margin: 6px 10px !important;
      padding: 8px 12px !important;
    }
  }

  @media (max-width: 768px) {
    #essential-navbar #mobile-nav {
      max-height: 100vh !important; /* Keep full height on smaller screens too */
    }

    #essential-navbar .mobile-search-container {
      padding: 10px 15px !important;
    }

    #essential-navbar .mobile-search_input {
      padding: 8px 10px !important;
      font-size: 13px !important;
    }
  }
}

/* ==========================================================================
                        SIMPLIFIED MOBILE ANIMATIONS
========================================================================== */

@media (max-width: 992px) {
  /* Subtle animations */
  #essential-navbar .mobile-dropdown,
  #essential-navbar .mobile-parent-header_container,
  #essential-navbar .mobile-multiedit-container,
  #essential-navbar .mobile-regular-container,
  #essential-navbar .mobile-title-container {
    animation: fadeIn 0.2s ease-out !important;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0 !important;
    }
    100% {
      opacity: 1 !important;
    }
  }

  /* Simplified submenu animation */
  #essential-navbar .mobile-submenu {
    animation: slideDown 0.2s ease-out !important;
  }

  @keyframes slideDown {
    0% {
      max-height: 0 !important;
      opacity: 0 !important;
    }
    100% {
      max-height: 500px !important;
      opacity: 1 !important;
    }
  }

  /* Simple title children animation */
  #essential-navbar .mobile-title-children {
    animation: expandVertical 0.2s ease-out !important;
  }

  @keyframes expandVertical {
    0% {
      opacity: 0 !important;
      max-height: 0 !important;
    }
    100% {
      opacity: 1 !important;
      max-height: 300px !important;
    }
  }
}

/* ==========================================================================
                  MOBILE MEGA MENU COLOR VARIABLE OVERRIDES
   This section allows colors.json to control mobile mega menu colors
========================================================================== */

@media (max-width: 992px) {
  /* Mobile parent header - regular menu items in mobile submenu */
  #essential-navbar .regular-item-mobile {
    background-color: var(--mobile-parent-header-regular-bg, #ffffff) !important;
  }

  #essential-navbar .regular-item-mobile a {
    color: var(--mobile-parent-header-regular-text, #495057) !important;
  }

  /* Mobile parent header - grandchild items */
  #essential-navbar .grandchild-mobile {
    border-left: 2px solid var(--mobile-region-selector-border-color, #e9ecef) !important;
  }

  #essential-navbar .grandchild-mobile a {
    color: var(--mobile-child-text, #101010) !important;
  }

  /* Mobile parent header - parent header mobile styling */
  #essential-navbar .parent-header-mobile {
    background-color: var(--mobile-parent-header-parent-type-bg, #f8f9fa) !important;
  }

  /* Mobile multiedit items */
  #essential-navbar .multiedit-mobile {
    background-color: var(--mobile-parent-header-multiedit-type-bg, #f0fff0) !important;
    border-left: 4px solid var(--mobile-parent-header-multiedit-type-border-left, #28a745) !important;
  }

  #essential-navbar .multiedit-mobile strong {
    color: var(--mobile-parent-header-multiedit-type-text, #28a745) !important;
  }

  /* Mobile regular item children */
  #essential-navbar .regular-item-child-mobile {
    background-color: var(--mobile-title-child-bg, #f3e5f5) !important;
    border-left: 2px solid var(--mobile-nav-border-color, #bbdefb) !important;
  }

  #essential-navbar .regular-item-child-mobile a {
    color: var(--mobile-child-text, #7b1fa2) !important;
  }
}