/**
 * ============================================================================
 * MOBILE MENU MODAL COMPONENT (RSA Design System)
 * Standard Bootstrap Bottom Sheet Modal with High Height and Inset List-Group
 * Buttons organized into separate cards per category scope.
 * Sidebar-matched icons, submenu dots, and solid primary active button states.
 * Strict zero blue/purple, zero bounce scale effect, zero sticky hover.
 * ============================================================================
 */

/* 0. Desktop & Tablet Isolation (>= 768px): Never display modal on desktop */
@media (min-width: 768px) {
  #mobileMenuModal {
    display: none !important;
  }
}

/* 1. Modal Dialog & Full Height Viewport Guarantee (< 768px) */
@media (max-width: 767.98px) {
  #mobileMenuModal.bottom-sheet-modal .modal-dialog {
    height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
  }

  #mobileMenuModal.bottom-sheet-modal .modal-content {
    height: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
  }

  #mobileMenuModal.bottom-sheet-modal .modal-body {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }
}

/* 2. Category Section Headers (Sidebar Category Scope Matching) */
#mobileMenuModal .menu-category-header {
  font-size: 0.72rem;
  letter-spacing: 0.05rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #888888);
  margin-top: 1rem;
  margin-bottom: 0.45rem;
  padding-left: 0.35rem;
  user-select: none;
  -webkit-user-select: none;
}

#mobileMenuModal .menu-category-header:first-of-type {
  margin-top: 0;
}

/* 3. Strictly Zero Bounce / Scale Effect on Click */
#mobileMenuModal .list-group-item,
#mobileMenuModal .list-group-item-action,
#mobileMenuModal .mobile-menu-accordion-btn,
#mobileMenuModal .mobile-menu-sublink {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}

#mobileMenuModal .list-group-item:active,
#mobileMenuModal .list-group-item-action:active,
#mobileMenuModal .mobile-menu-accordion-btn:active,
#mobileMenuModal .mobile-menu-sublink:active {
  transform: none !important;
  -webkit-transform: none !important;
}

/* 4. Disable Sticky Hover Shifts on Touch Devices */
@media (max-width: 767.98px), (hover: none) {
  #mobileMenuModal .list-group-item-action:not(.active):hover,
  #mobileMenuModal .list-group-item-action:not(.active):focus,
  #mobileMenuModal .list-group-item-action:not(.active):active {
    background-color: transparent !important;
    color: inherit;
  }

  #mobileMenuModal .mobile-menu-sublink:hover,
  #mobileMenuModal .mobile-menu-sublink:focus,
  #mobileMenuModal .mobile-menu-sublink:active {
    background-color: transparent !important;
  }
}

/* 5. Button Icons (Sidebar Aligned) */
#mobileMenuModal .menu-item-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bs-secondary-color, var(--bs-secondary, #707070));
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

/* 6. Accordion Toggle & Chevron Animation */
#mobileMenuModal .mobile-menu-accordion-btn {
  background-color: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

#mobileMenuModal .mobile-menu-chevron {
  font-size: 1.25rem;
  color: var(--bs-secondary-color, #888888);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobileMenuModal .mobile-menu-accordion.open .mobile-menu-chevron {
  transform: rotate(180deg);
}

/* 7. Submenu Container, Sublinks & Dots */
#mobileMenuModal .mobile-menu-submenu {
  display: none;
  background-color: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] #mobileMenuModal .mobile-menu-submenu {
  background-color: rgba(255, 255, 255, 0.025);
}

#mobileMenuModal .mobile-menu-accordion.open > .mobile-menu-submenu {
  display: block;
}

#mobileMenuModal .mobile-menu-sublink {
  padding: 0.65rem 0.75rem !important;
  font-size: 0.88rem;
  color: var(--bs-secondary-color, rgba(255, 255, 255, 0.75));
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.06)) !important;
  text-decoration: none;
}

[data-bs-theme="dark"] #mobileMenuModal .mobile-menu-sublink {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

#mobileMenuModal .mobile-menu-submenu .mobile-menu-sublink:last-child {
  border-bottom: none !important;
}

/* Dropdown Dots (Aligned vertically with .menu-item-icon and .me-3) */
#mobileMenuModal .menu-sub-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.75rem !important;
  flex-shrink: 0;
  background: transparent !important;
  box-shadow: none !important;
}

#mobileMenuModal .menu-sub-dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

:root:not([data-bs-theme="dark"]) #mobileMenuModal .menu-sub-dot::before {
  background-color: rgba(0, 0, 0, 0.3);
}

#mobileMenuModal .menu-sub-dot.active::before,
#mobileMenuModal .mobile-menu-sublink.active .menu-sub-dot::before {
  background-color: var(--bs-primary, #ff5911) !important;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 255, 89, 17), 0.25) !important;
}

/* 8. Active Primary Button Styling (Solid Orange Btn-Primary, No Borders / Lines) */
#mobileMenuModal .list-group-item.active:not(.mobile-menu-sublink),
#mobileMenuModal .list-group-item-action.active:not(.mobile-menu-sublink),
#mobileMenuModal .mobile-menu-accordion.active > .mobile-menu-accordion-btn {
  background-color: var(--bs-primary, #ff5911) !important;
  color: #ffffff !important;
  border: none !important;
  border-color: transparent !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

#mobileMenuModal .mobile-menu-accordion.active > .mobile-menu-accordion-btn,
#mobileMenuModal .mobile-menu-accordion.open > .mobile-menu-accordion-btn {
  border-bottom: none !important;
  border-bottom-color: transparent !important;
}

#mobileMenuModal .list-group-item.active:not(.mobile-menu-sublink) i,
#mobileMenuModal .list-group-item-action.active:not(.mobile-menu-sublink) i,
#mobileMenuModal .mobile-menu-accordion.active > .mobile-menu-accordion-btn i,
#mobileMenuModal .list-group-item.active:not(.mobile-menu-sublink) span,
#mobileMenuModal .list-group-item-action.active:not(.mobile-menu-sublink) span,
#mobileMenuModal .mobile-menu-accordion.active > .mobile-menu-accordion-btn span,
#mobileMenuModal .mobile-menu-accordion.active > .mobile-menu-accordion-btn .mobile-menu-chevron {
  color: #ffffff !important;
}

/* 9. Submenu Active State: Consistent subtle gray divider like other sublinks */
#mobileMenuModal .mobile-menu-sublink.active,
#mobileMenuModal .mobile-menu-sublink.active:hover,
#mobileMenuModal .mobile-menu-sublink.active:focus {
  background-color: transparent !important;
  color: var(--bs-primary, #ff5911) !important;
  font-weight: 600 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.06)) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] #mobileMenuModal .mobile-menu-sublink.active,
[data-bs-theme="dark"] #mobileMenuModal .mobile-menu-sublink.active:hover,
[data-bs-theme="dark"] #mobileMenuModal .mobile-menu-sublink.active:focus {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

#mobileMenuModal .mobile-menu-submenu .mobile-menu-sublink:last-child.active {
  border-bottom: none !important;
}

#mobileMenuModal .mobile-menu-sublink.active > span:not(.menu-sub-dot),
#mobileMenuModal .mobile-menu-sublink.active div > span:not(.menu-sub-dot) {
  color: var(--bs-primary, #ff5911) !important;
  font-weight: 600 !important;
}