/* General Navbar styling (adjust as needed) */
.custom-navbar {
    background-color: #3b5d50 !important; 
    padding-top: 15px;
    padding-bottom: 15px;
}

.custom-navbar-nav .nav-item {
    position: relative; /* Crucial for absolute positioning of the dropdown */
    margin-right: 15px; /* Spacing between top-level items */
}

.custom-navbar-nav .nav-item:last-child {
    margin-right: 0;
}

.custom-navbar-nav .nav-link {
    padding: 8px 10px !important; /* Customize padding */
    color: rgba(255,255,255,0.7) !important;
    transition: color 0.3s ease;
}

.custom-navbar-nav .nav-link:hover,
.custom-navbar-nav .nav-item.active .nav-link, /* If you have an active state */
.custom-navbar-nav .nav-item:focus-within .nav-link { /* When dropdown is open via keyboard */
    color: #ffffff !important;
}

/* Dropdown Mega Menu Box */
.MyDropBox {
    border-radius: 10px;
    opacity: 0;                     /* Start fully transparent */
    visibility: hidden;             /* Start hidden and non-interactive */
    transform: translateY(10px);    /* Optional: Start slightly lower */
    transition: opacity 0.25s ease-in-out,
                visibility 0s 0.25s, /* Delay making it non-visible until opacity transition ends when hiding */
                transform 0.25s ease-in-out;

    position: absolute;
    top: 100%; /* Position below the nav item */
    left: 0;   /* Align with the left of the nav item */
    /* Or to center it:
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Adjust if using center alignment for transform */
    /* */
    background-color: #f8f9fa; /* Light background, adjust as needed */
    border: 1px solid #dee2e6;
    border-top: 3px solid #3b5d50; /* Accent color */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000; /* Ensure it's above other content */
    padding: 20px;
    /* min-width: 700px; */
     /* Adjust as per your content, could be a max-width too */
    /* max-width: 900px; */

    /* Flexbox for columns - keep this to arrange children */
    display: flex; /* Always a flex container, visibility/opacity controls appearance */
    flex-wrap: nowrap; /* Keep columns in one row */
    gap: 20px; /* Space between columns */
}

/* Show dropdown on hover or focus-within the parent nav-item */
.custom-navbar-nav .nav-item:hover > .MyDropBox,
.custom-navbar-nav .nav-item:focus-within > .MyDropBox {
    opacity: 1;                 /* Fade in */
    visibility: visible;        /* Make it visible and interactive */
    transform: translateY(0);   /* Optional: Move to its final position */
    transition-delay: 0s, 0s, 0s; /* Ensure opacity, visibility, transform transition immediately on hover/focus */
}


/* Individual Column in the Dropdown */
.DropBoxChild {
    padding: 0 10px; /* Inner padding for column content */
    box-sizing: border-box;
}

.DropBoxChild.text-column {
    flex: 1; /* Allows text columns to share space, adjust basis if needed */
    min-width: 150px; /* Minimum width for a text column */
}

.DropBoxChild.image-column {
    flex-basis: 200px; /* Fixed width for the image column, adjust as needed */
    flex-shrink: 0; /* Prevent image column from shrinking */
    text-align: center; /* Center image if it's smaller than column */
}

.dropdown-category-image {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    object-fit: cover; /* Ensures image covers the area nicely */
    max-height: 200px; /* Optional: constrain image height */
}

/* Subcategory "Headings" (items ending with : or 's) */
.subCategory-heading {
    font-size: 0.95rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.subCategory-heading.mt-3 { /* Bootstrap class still fine here */
    margin-top: 1rem !important;
}

/* Subcategory Links */
.sub-category-name {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.sub-category-name a {
    text-decoration: none;
    color: black;
    
    transition: color 0.2s ease;
}

.sub-category-name a:hover {
    color: #0056b3;
}

.custom-navbar-cta li {
    /*margin-left: 15px;*/
    /* Spacing for user/cart icons 
}
.custom-navbar-cta li:first-child {
    margin-left: 0; /* Remove margin from first item if using ms-auto */
}
.custom-navbar-cta .nav-link {
    padding: 8px !important; /* Make clickable area a bit larger */
}


.custom-navbar-cta .dropdown-item.text-light:hover {
    background-color: rgba(255,255,255,0.1);
}
.custom-navbar-cta .dropdown-divider {
    border-color: rgba(255,255,255,0.2) !important;
}


/* Ensure navbar toggler icon is visible on dark backgrounds */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,0.1);
}