/* CSS Variables for dynamic heights */
:root {
    --navbar-height: 56px;
    --header-total-height: 96px;
}

/* Sticky Header Styles */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

/* Header bottom bar también debe ser fijo */
.header-bottom-bar {
    position: fixed !important;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    z-index: 1029;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

/* Mega menu positioning adjustment for fixed header */
.mega-menu {
    position: fixed !important;
    top: var(--header-total-height);
    left: 0;
    right: 0;
    z-index: 1028;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* Add padding to body to compensate for fixed header */
body {
    padding-top: var(--header-total-height) !important;
}

/* Optional: Add a subtle shadow when scrolling */
.navbar.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-bottom-bar.scrolled {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    :root {
        --navbar-height: 64px; /* Navbar más alto en móviles */
    }
}

@media (max-width: 575.98px) {
    :root {
        --navbar-height: 70px; /* Aún más alto en pantallas muy pequeñas */
    }
}

/* Ensure mega menu card has proper styling */
.mega-menu-card {
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    margin: 0;
}

/* Smooth collapse animation for mega menu */
.mega-menu.collapsing {
    transition: height 0.35s ease;
}

/* Mega menu container positioning */
.mega-menu .container {
    max-width: 100%;
    padding: 0;
}

/* Fix any overflow issues */
.mega-menu {
    overflow-x: hidden;
}

/* Additional navbar improvements */
.navbar-brand img {
    max-height: 48px;
    height: auto;
}

/* Ensure WhatsApp button doesn't break layout */
@media (max-width: 991.98px) {
    .navbar-nav .btn {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}