/* Global CSS Styles for WebHospedaje */
/* Shared styles across all pages */

/* Tooltip z-index fix - ensure tooltips appear above all elements */
.tooltip {
  z-index: 9999 !important;
}

/* Dropdown menu styles */
.dropdown-menu {
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
}

.group:hover .dropdown-menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Mobile menu styles */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out;
}

#mobile-menu.active {
  max-height: 1000px;
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out;
}

.submenu.active {
  max-height: 500px;
}

#mobile-menu a,
#mobile-menu button {
  color: #fff;
  font-weight: 500;
}

#mobile-menu .submenu {
  background-color: rgba(255, 255, 255, .15);
}

#mobile-menu .submenu a {
  color: #e5e7eb;
}

#mobile-menu .submenu a:hover {
  background-color: rgba(255, 255, 255, .25);
}

/* Hero canvas styles */
#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Select dropdown options styling */
select option {
  background-color: #2E1A47;
  color: #E6E6FA;
}

/* Animation keyframes */
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.6s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}