/**
 * WP X Search - Styles (Integration with Qode Theme)
 * @author 360x.dev
 */

/* Screen reader only */
.wpx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Search button with inline SVG icon */
.wpx-search-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1000000;
    pointer-events: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpx-search-btn::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Mobile styles - z-index and pointer-events management */
@media (max-width: 1024px) {
    .qodef-mobile-header,
    .qodef-mobile-header-inner {
        position: relative;
        z-index: 999999;
    }
    
    .wpx-search-btn {
        position: relative;
        z-index: 1000000;
        pointer-events: auto;
    }
    
    /* CRITICAL: Disable pointer-events when search is closed */
    body:not(.wpx-search-open) .qodef-fullscreen-search-holder,
    body:not(.wpx-search-open) .qodef-cover {
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Enable pointer-events when search is open */
    body.wpx-search-open .qodef-fullscreen-search-holder,
    body.wpx-search-open .qodef-cover {
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Desktop - hide search button */
@media (min-width: 1025px) {
    .wpx-search-btn {
        display: none !important;
    }
}