/* =========================================
   FIX DROPDOWN OVERFLOW
   Prevent dropdowns from causing horizontal scroll
   ========================================= */

/* Force body to not overflow */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Container fixes */
.container {
    position: relative;
    overflow: visible !important;
}

/* Top header fixes */
.top-header,
.top-header-content,
.header-user-section,
.user-info {
    overflow: visible !important;
    position: relative;
}

/* Nav actions positioning */
.nav-actions {
    position: relative;
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

/* Dropdown positioning fixes */
.search-dropdown,
.cart-dropdown {
    position: relative;
}

/* Dropdown menu positioning - Prevent overflow */
.search-dropdown-menu,
.cart-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0.5rem !important;
}

/* Force dropdowns to stay within viewport */
@media (min-width: 769px) {
    .search-dropdown-menu {
        width: 400px;
        max-width: calc(100vw - 40px);
    }
    
    .cart-dropdown-menu {
        width: 350px;
        max-width: calc(100vw - 40px);
    }
}

@media (max-width: 768px) {
    .search-dropdown-menu,
    .cart-dropdown-menu {
        width: 320px;
        max-width: calc(100vw - 40px);
    }
}

@media (max-width: 480px) {
    .search-dropdown-menu,
    .cart-dropdown-menu {
        position: fixed !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0.5rem 0 !important;
    }
}

/* Ensure dropdown content doesn't overflow */
.search-dropdown-content,
.cart-dropdown-content {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Fix search form on small screens */
.search-form {
    max-width: 100%;
    overflow: visible;
}

.search-input-wrapper {
    min-width: 0;
    flex: 1 1 auto;
}

.search-input {
    width: 100%;
    min-width: 0;
}

/* Fix suggestion tags wrapping */
.suggestion-tags {
    flex-wrap: wrap;
    max-width: 100%;
}

/* Cart items scrolling */
.cart-items {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Ensure user dropdown doesn't overflow either */
.header-user-section .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 110% !important;
    max-width: calc(100vw - 40px);
    min-width: 220px !important;
    z-index: 9999 !important;
    float: none !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 12px !important;
}

/* Top header fixes */
.top-header,
.top-header-content,
.header-user-section,
.user-info {
    overflow: visible !important;
    position: relative;
    z-index: 10001 !important;
}

.top-header {
    z-index: 10001 !important; /* Ensure it's above other content */
}

/* Additional safety for all dropdowns */
.dropdown-menu {
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box;
    background-color: #fff !important;
    z-index: 10002 !important;
    padding: 0.5rem !important;
}

/* Fix spacing between icon and text in dropdown items */
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
}

.dropdown-item i {
    width: 24px;
    text-align: center;
    margin-right: 12px !important;
    font-size: 1.1em;
}

.dropdown-item:hover {
    background-color: #f8fafc !important;
}

/* Prevent dropdown from pushing body */
.dropdown.show {
    position: relative;
}