/* OB25 Glassmorphism Menu Styles */
.ob25-menu-container:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 28px;
}

.ob25-menu-group:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  position: relative;
  display: inline-flex;
  margin-left: 5px;
}

/* Menu button */
.ob25-menu-button:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  padding: 0.75rem 1.4rem;
  color: white;
  font-weight: 400;
  border-radius: 0.5rem;
  background: none;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.ob25-menu-button:hover:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: #F0F2F5;
}

.ob25-menu-button:not(:where([data-ob-chrome],[data-ob-chrome] *))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(255, 255, 255, 0.8); /* Change color as needed */
  border-radius: 50px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.ob25-menu-button:hover:not(:where([data-ob-chrome],[data-ob-chrome] *))::before {
  opacity: 1;
  transform: scale(1);
}

/* Dropdown arrow */
.ob25-dropdown-arrow:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.ob25-menu-group:hover .ob25-dropdown-arrow:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  transform: rotate(180deg);
}

/* Style for menu button when submenu is visible */
.ob25-menu-group:hover .ob25-dropdown-toggle:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: #fff;
  border-radius: 50px;
}

/* Create a hover detection area that extends down to the submenu */
.ob25-menu-group:not(:where([data-ob-chrome],[data-ob-chrome] *))::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px; /* Height of the gap between menu and submenu */
  opacity: 0;
}

/* Optional: Add a visual indicator for the active menu item */
.ob25-menu-group.active .ob25-dropdown-toggle:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: #fff;
  border-radius: 50px;
}

/* Submenu container */
.ob25-submenu:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 999;
  border-radius: 1rem;
  backdrop-filter: blur(16px);
}

.ob25-menu-group:hover .ob25-submenu:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  opacity: 1;
  visibility: visible;
}

/* Make sure the dropdown toggle looks clickable */
.ob25-dropdown-toggle:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  cursor: pointer;
}

/* Glassmorphism effect */
.ob25-glass-panel:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background-color: #0c1f30b0;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Menu list */
.ob25-list-menu:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;
  width: 800px;
}

/* Menu items */
.ob25-list-item:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}

.ob25-list-item:hover:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background-color: rgba(255, 255, 255, 0.1);
}

.ob25-list-link:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  display: grid;
  align-items: center;
  text-decoration: none;
  grid-template-columns: 55px auto 20px;
}

/* SVG Icon container and styling */
.ob25-list-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* SVG icon styling */
.ob25-menu-svg-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #F0F2F5;
  stroke-width: 1;
  transition: all 0.3s ease;
}

/* For filled SVGs, use fill instead of stroke */
.ob25-menu-svg-icon.filled:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  fill: #F0F2F5;
  stroke: none;
}

/* Hover effect for SVG icons */
.ob25-list-link:hover .ob25-menu-svg-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  stroke: #ffffff;
  transform: scale(1.1);
}

.ob25-list-link:hover .ob25-menu-svg-icon.filled:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  fill: #ffffff;
}

/* Default icon styling (for missing SVGs) */
.ob25-default-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  opacity: 0.7;
}

/* Optional: Different icon background colors based on gradient */
.ob25-bg-gradient-blue-purple .ob25-list-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}

.ob25-bg-gradient-green-teal .ob25-list-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(20, 184, 166, 0.2) 100%);
}

.ob25-bg-gradient-yellow-orange .ob25-list-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
}

.ob25-bg-gradient-pink-red .ob25-list-icon:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(239, 68, 68, 0.2) 100%);
}

/* Text styling */
.ob25-list-title:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: white;
  font-weight: 400;
  transition: all 0.2s ease;
  font-size: 14px;
}

.ob25-list-link:hover .ob25-list-title:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: rgba(255, 255, 255, 0.9);
}

.ob25-list-desc:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.4em;
}

/* Arrow indicator */
.ob25-list-arrow:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  transform: translateX(0);
  transition: all 0.2s ease;
}

.ob25-list-link:hover .ob25-list-arrow:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: rgba(255, 255, 255, 0.7);
  transform: translateX(0.25rem);
}

/* Promo box */
.ob25-promo-box:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  background: linear-gradient(to right, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  padding: 1rem;
  text-align: center;
}

.ob25-promo-box p:first-child:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: white;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.ob25-promo-box p:last-child:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .ob25-menu-container:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    justify-content: center;
    width: 100%;
  }
  
  .ob25-menu-group:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    margin: 5px;
  }
  
  .ob25-submenu:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    max-width: 90vw;
    left: 0;
    right: 0;
  }
}

/* Flip animation */
/* 3D Flip Animation for Menu Items */
.ob25-list-link:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  perspective: 1000px;
  align-items: center; /* Center all items vertically */
}

/* Container for the flippable content */
.ob25-flip-container:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  min-height: 2.5em; /* Ensure enough height for content */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
}

/* Position the title and description for the flip effect */
.ob25-list-title:not(:where([data-ob-chrome],[data-ob-chrome] *)), .ob25-list-desc:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Full height of container */
  backface-visibility: hidden;
  transition: 0.6s;
  display: flex;
  align-items: center; /* Center text vertically */
}

/* Title is visible by default (front face) */
.ob25-list-title:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  transform: rotateX(0deg);
}

/* Description is hidden initially (back face) */
.ob25-list-desc:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  transform: rotateX(180deg);
  opacity: 0; /* Hidden initially */
}

/* On hover, flip the container */
.ob25-list-item:hover .ob25-flip-container:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  transform: rotateX(180deg);
}

/* Make description visible when flipped */
.ob25-list-item:hover .ob25-list-desc:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  opacity: 1;
}

/* Ensure proper spacing during flip */
.ob25-list-item:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  transition: height 0.3s ease;
}

/* Fix arrow vertical alignment */
.ob25-list-arrow:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
  display: flex;
  align-items: center;
  height: 100%;
}