/* Fix for PC view search box on mobile devices */

/* Target all mobile devices */
@media (hover: none) {
    /* Simple search form styling */
    .form-search {
        background: rgba(40, 40, 50, 0.95) !important;
        border-radius: 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 4px 8px !important;
        height: 44px !important;
        overflow: hidden !important;
    }
    
    /* Input styling */
    .form-search input[type="text"],
    .form-search input[type="search"],
    .form-search #search {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
        color: #ffffff !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        opacity: 1 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        font-size: 0.875rem !important;
        height: 100% !important;
    }
    
    /* Placeholder styling */
    .form-search input::placeholder {
        color: rgba(255, 255, 255, 0.65) !important;
        opacity: 1 !important;
        font-size: 0.875rem !important;
    }
    
    /* Disable browser styling */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: none !important;
    }
    
    /* iOS specific fix */
    @supports (-webkit-touch-callout: none) {
        .form-search {
            background: rgba(40, 40, 50, 0.95) !important;
        }
        
        .form-search input {
            background-color: transparent !important;
            background: transparent !important;
            color: #ffffff !important;
            -webkit-appearance: none !important;
            -webkit-text-fill-color: #ffffff !important;
        }
    }
}