/**
 * Fix dropdown parent container to expand to children's width
 * Ensures dropdown container matches the width of its content
 */

/* Remove fixed width constraints from dropdown */
.sp-dropdown.sp-dropdown-main.sp-menu-right,
.sp-dropdown {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    display: inline-block !important; /* Allow natural width expansion */
    position: absolute !important;
}

/* Let children determine parent width */
.sp-dropdown {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    min-width: 0 !important; /* Remove minimum width constraint */
}

/* Ensure menu items can expand freely */
.sp-dropdown .sp-menu-item,
.sp-dropdown .sp-dropdown-item,
.sp-dropdown li {
    width: auto !important;
    white-space: nowrap !important;
}

/* Links should determine their natural width */
.sp-dropdown .sp-menu-item a,
.sp-dropdown a {
    width: auto !important;
    display: block !important;
    white-space: nowrap !important;
    padding: 12px 25px 12px 20px !important;
}

/* Force parent to contain children */
.sp-dropdown {
    display: table !important; /* Table display forces parent to wrap content */
    width: auto !important;
}

.sp-dropdown .sp-dropdown-inner {
    display: table-row-group !important;
    width: auto !important;
}

.sp-dropdown ul,
.sp-dropdown .sp-dropdown-items {
    display: table-row-group !important;
    width: auto !important;
}

/* Alternative approach using flexbox */
.sp-dropdown.sp-dropdown-main {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    align-items: stretch !important;
}

/* Ensure no width restrictions on any level */
.sp-dropdown,
.sp-dropdown.sp-dropdown-main,
.sp-dropdown.sp-menu-right {
    min-width: unset !important;
    max-width: unset !important;
    width: auto !important;
}

/* Override any inline styles */
.sp-dropdown[style*="width: 220px"] {
    width: auto !important;
}

/* Specific fix for dropdowns with fixed widths */
.sp-dropdown.sp-dropdown-main.sp-menu-right {
    width: max-content !important;
    min-width: max-content !important;
}

/* Ensure proper width inheritance */
.sp-dropdown > * {
    width: auto !important;
    min-width: 100% !important;
}

/* Force recalculation */
.sp-megamenu-parent > li:hover > .sp-dropdown {
    width: auto !important;
    min-width: fit-content !important;
}

/* High specificity override for stubborn elements */
#sp-menu .sp-megamenu-wrapper .sp-dropdown.sp-dropdown-main.sp-menu-right {
    width: auto !important;
    min-width: auto !important;
    display: inline-block !important;
}

/* Ensure dropdown background covers all content */
.sp-dropdown {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Debug helper - commented out */
/*
.sp-dropdown.sp-dropdown-main {
    outline: 2px solid red !important;
}

.sp-dropdown .sp-menu-item {
    outline: 1px solid blue !important;
}
*/