<!-- ========== MY PORTAL MOBILE FIX - START ========== -->

/* ===== MY PORTAL DROPDOWN MOBILE FIX ===== */

/* Ensure the customer/portal dropdown container has proper positioning */
@media (max-width: 1023px) {
    /* Fix for customer dropdown wrapper */
    .customer-menu,
    [x-data*="customer"],
    [x-data*="Customer"],
    [x-data*="portal"],
    [x-data*="Portal"],
    #customer-menu,
    .customer-section,
    .my-portal-dropdown {
        position: relative !important;
        z-index: 9999 !important;
    }

    /* Fix dropdown menu positioning and visibility on mobile */
    .customer-menu-dropdown,
    .customer-dropdown,
    .portal-dropdown,
    .my-portal-menu,
    [x-show*="open"] .dropdown-menu,
    [x-show*="customerOpen"],
    [x-show*="portalOpen"],
    [x-show*="menuOpen"],
    .customer-menu [x-show],
    .customer-section [x-show] {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 99999 !important;
        transform: translateY(0) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Dropdown menu items styling for mobile */
    .customer-menu-dropdown a,
    .customer-dropdown a,
    .portal-dropdown a,
    .my-portal-menu a,
    .customer-menu [x-show] a,
    .customer-section [x-show] a {
        display: block !important;
        padding: 16px 20px !important;
        font-size: 16px !important;
        color: #333 !important;
        border-bottom: 1px solid #eee !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .customer-menu-dropdown a:active,
    .customer-dropdown a:active,
    .portal-dropdown a:active,
    .my-portal-menu a:active,
    .customer-menu [x-show] a:active,
    .customer-section [x-show] a:active {
        background-color: #f5f5f5 !important;
    }

    /* Portal dropdown header */
    .portal-dropdown-header,
    .customer-dropdown-header {
        padding: 20px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-bottom: 2px solid #e1e8f0 !important;
        background: #f8f9fa !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Backdrop/overlay for mobile dropdown */
    .portal-backdrop,
    .customer-backdrop,
    [x-show*="backdrop"],
    .dropdown-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 99998 !important;
    }
}

/* Desktop styles - keep dropdown as positioned element */
@media (min-width: 1024px) {
    .customer-menu-dropdown,
    .customer-dropdown,
    .portal-dropdown,
    .my-portal-menu {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 200px !important;
        max-height: none !important;
        border-radius: 8px !important;
    }
}

/* Ensure touch events work properly */
.customer-menu button,
.customer-section button,
.my-portal-btn,
[x-data*="customer"] button,
[x-data*="portal"] button {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
}

/* Fix for any potential overflow issues */
#header {
    overflow: visible !important;
}

.container {
    overflow: visible !important;
}