/* Bootstrap Killer for Investing Dropdown */
.investing-dropdown-bootstrap-killer {
  /* Force complete style reset */
  all: unset !important;
  display: block !important;
  position: relative !important;

  /* Absolutely force these values */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;

  /* Prevent any Bootstrap inheritance */
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: normal !important;
  color: inherit !important;
  text-align: left !important;
  vertical-align: baseline !important;

  /* Force container behavior */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Nuclear reset for ALL children */
.investing-dropdown-bootstrap-killer,
.investing-dropdown-bootstrap-killer .investing-dropdown-container,
.investing-dropdown-bootstrap-killer .investing-dropdown-trigger,
.investing-dropdown-bootstrap-killer .investing-dropdown-menu,
.investing-dropdown-bootstrap-killer .investing-dropdown-layout,
.investing-dropdown-bootstrap-killer .investing-dropdown-categories,
.investing-dropdown-bootstrap-killer .investing-dropdown-links,
.investing-dropdown-bootstrap-killer .investing-dropdown-category-item,
.investing-dropdown-bootstrap-killer .investing-dropdown-item {
  /* Override absolutely everything Bootstrap might set */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;

  /* Typography resets */
  font-family: Arial, sans-serif !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  text-align: inherit !important;
  vertical-align: baseline !important;

  /* Layout resets */
  position: static !important;
  float: none !important;
  clear: none !important;
  overflow: visible !important;

  /* Flexbox and grid resets */
  flex: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: stretch !important;

  /* Sizing resets */
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Force display block only for structural elements */
.investing-dropdown-bootstrap-killer,
.investing-dropdown-bootstrap-killer .investing-dropdown-container,
.investing-dropdown-bootstrap-killer .investing-dropdown-trigger,
.investing-dropdown-bootstrap-killer .investing-dropdown-menu,
.investing-dropdown-bootstrap-killer .investing-dropdown-layout,
.investing-dropdown-bootstrap-killer .investing-dropdown-categories,
.investing-dropdown-bootstrap-killer .investing-dropdown-links,
.investing-dropdown-bootstrap-killer .investing-dropdown-category-item,
.investing-dropdown-bootstrap-killer .investing-dropdown-item {
  display: block !important;
}

/* Now apply our exact styles with extreme specificity */
.investing-dropdown-bootstrap-killer .investing-dropdown-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: normal !important;
  color: #222 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  position: relative !important;
  transition: all 0.2s ease-in-out !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-container:hover
  .investing-dropdown-trigger {
  background: #eef2ff !important;
  color: #1652f0 !important;
  text-decoration: none !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-new-badge {
  background: #ffd700 !important;
  color: #1a1a1a !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
  position: relative !important;
}

/* Keep the badge styling consistent on hover */
.investing-dropdown-bootstrap-killer
  .investing-dropdown-container:hover
  .investing-dropdown-new-badge {
  background: #ffd700 !important;
  color: #1a1a1a !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-menu {
  position: absolute !important;
  top: calc(100% - 4px) !important;
  left: 0 !important;
  z-index: 1050 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
  padding-top: 12px !important;
  margin: 0 !important;
  width: 680px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: all 0.2s ease-in-out !important;
  display: block !important;
  pointer-events: none !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-container:hover
  .investing-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-layout {
  display: flex !important;
  gap: 16px !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-categories {
  width: 200px !important;
  border-right: 1px solid #f3f4f6 !important;
  padding-right: 16px !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-links {
  flex: 1 !important;
  padding-left: 16px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-all-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 24px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-all-grid::-webkit-scrollbar {
  width: 6px !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-all-grid::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 3px !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-all-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 3px !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-all-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-category-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000 !important;
  transition: all 0.15s ease-in-out !important;
  text-decoration: none !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-category-item:hover,
.investing-dropdown-bootstrap-killer .investing-dropdown-category-item.active {
  background-color: #eef2ff !important;
  color: #1652f0 !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-category-item img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-category-item:hover
  img,
.investing-dropdown-bootstrap-killer
  .investing-dropdown-category-item.active
  img {
  opacity: 1;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-item {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: normal !important;
  color: #374151 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

.investing-dropdown-bootstrap-killer .progress-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.investing-dropdown-bootstrap-killer .progress-dot-yellow {
  background-color: #ffd700 !important;
}

.investing-dropdown-bootstrap-killer .progress-dot-orange {
  background-color: #ff6b35 !important;
}

.investing-dropdown-bootstrap-killer .progress-dot-green {
  background-color: #10b981 !important;
}

.investing-dropdown-bootstrap-killer .progress-dot-gray {
  background-color: #d1d5db !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-item:hover {
  color: #1652f0 !important;
  background-color: #f4f6f8 !important;
  text-decoration: none !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-icon {
  height: 24px !important;
  width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-label {
  font-size: 16px !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-container:hover
  .investing-dropdown-label {
  color: #1652f0 !important;
  font-size: 16px !important;
}

.investing-dropdown-bootstrap-killer
  .investing-dropdown-container:hover
  .investing-dropdown-icon {
  filter: invert(34%) sepia(89%) saturate(4500%) hue-rotate(225deg)
    brightness(95%) contrast(97%);
}

/* Two-column layout for the "All" section */
.investing-dropdown-bootstrap-killer .all-investing-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 16px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* Two-column layout for category sections when content is tall */
.investing-dropdown-bootstrap-killer .category-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 16px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* Single column layout for categories with fewer items */
.investing-dropdown-bootstrap-killer .category-single {
  display: block !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* Custom scrollbar for grid layouts */
.investing-dropdown-bootstrap-killer .all-investing-grid::-webkit-scrollbar,
.investing-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar,
.investing-dropdown-bootstrap-killer .category-single::-webkit-scrollbar {
  width: 6px !important;
}

.investing-dropdown-bootstrap-killer
  .all-investing-grid::-webkit-scrollbar-track,
.investing-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar-track,
.investing-dropdown-bootstrap-killer .category-single::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 3px !important;
}

.investing-dropdown-bootstrap-killer
  .all-investing-grid::-webkit-scrollbar-thumb,
.investing-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar-thumb,
.investing-dropdown-bootstrap-killer .category-single::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 3px !important;
}

.investing-dropdown-bootstrap-killer
  .all-investing-grid::-webkit-scrollbar-thumb:hover,
.investing-dropdown-bootstrap-killer
  .category-grid::-webkit-scrollbar-thumb:hover,
.investing-dropdown-bootstrap-killer
  .category-single::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1 !important;
}

/* CRITICAL: Allow Alpine.js to control visibility without forcing display */
.investing-dropdown-bootstrap-killer .investing-dropdown-links {
  position: relative !important;
}

.investing-dropdown-bootstrap-killer .investing-dropdown-links > div[x-show] {
  position: relative !important;
  width: 100% !important;
}

/* CRITICAL Firefox fix: Ensure hidden elements are truly hidden */
.investing-dropdown-bootstrap-killer
  .investing-dropdown-links
  > div[x-show][style*="display: none"],
.investing-dropdown-bootstrap-killer
  .investing-dropdown-links
  > div[x-show][style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Ensure visible elements are properly displayed */
.investing-dropdown-bootstrap-killer
  .investing-dropdown-links
  > div[x-show]:not([style*="display: none"]):not([style*="display:none"]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  left: auto !important;
}